Add theme toggle, hero snippet, and reorganize homepage components

- Set up next-themes with a light/dark toggle in the header and move all
  sections onto theme tokens; dark mode stays pure black
- Replace the hero terminal line with the AI Elements Snippet component
- Restructure components into layout/, sections/, and shared/ with
  site-wide config in lib/site.ts

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

app/globals.css

@@ -118,7 +118,7 @@
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
+  --background: oklch(0 0 0);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.205 0 0);
   --card-foreground: oklch(0.985 0 0);

app/layout.tsx

@@ -1,10 +1,12 @@
 import type { Metadata } from 'next';
+
+import { ThemeProvider } from '@/components/layout/theme-provider';
+import { siteConfig } from '@/lib/site';
 import './globals.css';
 
 export const metadata: Metadata = {
-  title: 'Vertex — Build. Preview. Ship.',
-  description:
-    'Vertex gives frontend teams the tooling and cloud infrastructure to build, preview, and ship a faster web.',
+  title: siteConfig.title,
+  description: siteConfig.description,
 };
 
 export default function RootLayout({
@@ -13,9 +15,16 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className="dark h-full antialiased">
-      <body className="min-h-full flex flex-col bg-black text-white font-sans selection:bg-white selection:text-black">
-        {children}
+    <html lang="en" suppressHydrationWarning className="h-full antialiased">
+      <body className="min-h-full flex flex-col bg-background text-foreground font-sans selection:bg-foreground selection:text-background">
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="dark"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
       </body>
     </html>
   );

app/page.tsx

@@ -1,23 +1,23 @@
-import { Cta } from '@/components/site/cta';
-import { Features } from '@/components/site/features';
-import { Footer } from '@/components/site/footer';
-import { Hero } from '@/components/site/hero';
-import { LogoCloud } from '@/components/site/logo-cloud';
-import { Navbar } from '@/components/site/navbar';
-import { Stats } from '@/components/site/stats';
+import { SiteFooter } from '@/components/layout/site-footer';
+import { SiteHeader } from '@/components/layout/site-header';
+import { CtaSection } from '@/components/sections/cta-section';
+import { FeaturesSection } from '@/components/sections/features-section';
+import { HeroSection } from '@/components/sections/hero-section';
+import { LogosSection } from '@/components/sections/logos-section';
+import { StatsSection } from '@/components/sections/stats-section';
 
 export default function Home() {
   return (
     <>
-      <Navbar />
-      <main>
-        <Hero />
-        <LogoCloud />
-        <Features />
-        <Stats />
-        <Cta />
+      <SiteHeader />
+      <main id="top">
+        <HeroSection />
+        <LogosSection />
+        <FeaturesSection />
+        <StatsSection />
+        <CtaSection />
       </main>
-      <Footer />
+      <SiteFooter />
     </>
   );
 }