Organize Vertex starter into reusable sections

Use remote logos and avatars, refine landing copy, and document the template structure.

app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 
-import { ThemeProvider } from "@/components/theme-provider";
+import { ThemeProvider } from "@/components/layout/theme-provider";
 import "./globals.css";
 
 const geistSans = Geist({

app/page.tsx

@@ -1,5 +1,29 @@
-import { VertexLandingPage } from "@/components/vertex-landing"
+import { SiteFooter } from "@/components/layout/site-footer"
+import { SiteHeader } from "@/components/layout/site-header"
+import { CtaSection } from "@/components/sections/cta-section"
+import { DevelopersSection } from "@/components/sections/developers-section"
+import { FeaturesSection } from "@/components/sections/features-section"
+import { HeroSection } from "@/components/sections/hero-section"
+import { LogosSection } from "@/components/sections/logos-section"
+import { PricingSection } from "@/components/sections/pricing-section"
+import { ReliabilitySection } from "@/components/sections/reliability-section"
+import { TestimonialsSection } from "@/components/sections/testimonials-section"
 
 export default function Home() {
-  return <VertexLandingPage />
+  return (
+    <div className="min-h-screen bg-background text-foreground selection:bg-blue-600 selection:text-white">
+      <SiteHeader />
+      <main id="top" className="mx-auto max-w-[1280px] border-x">
+        <HeroSection />
+        <LogosSection />
+        <FeaturesSection />
+        <DevelopersSection />
+        <ReliabilitySection />
+        <PricingSection />
+        <TestimonialsSection />
+        <CtaSection />
+        <SiteFooter />
+      </main>
+    </div>
+  )
 }