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>
2026-09-18 09:29:12 -04:00
parent a40edbffa9
commit 07a99b441c
28 changed files with 812 additions and 437 deletions
@@ -0,0 +1,53 @@
+import { MobileNavigation } from '@/components/layout/mobile-navigation';
+import { ThemeToggle } from '@/components/layout/theme-toggle';
+import { Brand } from '@/components/shared/brand';
+import { Container } from '@/components/shared/container';
+import { Button } from '@/components/ui/button';
+import { navigationItems, siteConfig } from '@/lib/site';
+
+export function SiteHeader() {
+  return (
+    <header className="sticky top-0 z-50 border-b border-border bg-background/70 backdrop-blur-xl">
+      <Container className="flex h-16 items-center justify-between">
+        <div className="flex items-center gap-8">
+          <a href="#top" aria-label={`${siteConfig.name} home`}>
+            <Brand />
+          </a>
+          <nav aria-label="Main navigation" className="hidden md:block">
+            <ul className="flex items-center gap-6">
+              {navigationItems.map(({ label, href }) => (
+                <li key={label}>
+                  <a
+                    href={href}
+                    className="text-sm text-foreground/60 transition-colors hover:text-foreground"
+                  >
+                    {label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
+        <div className="flex items-center gap-2">
+          <ThemeToggle />
+          <Button
+            asChild
+            size="lg"
+            variant="ghost"
+            className="hidden text-foreground/70 hover:bg-foreground/5 hover:text-foreground sm:inline-flex"
+          >
+            <a href={siteConfig.links.login}>Log In</a>
+          </Button>
+          <Button
+            asChild
+            size="lg"
+            className="hidden rounded-full bg-foreground text-background hover:bg-foreground/90 sm:inline-flex"
+          >
+            <a href={siteConfig.links.signup}>Sign Up</a>
+          </Button>
+          <MobileNavigation items={navigationItems} />
+        </div>
+      </Container>
+    </header>
+  );
+}