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,82 @@
+import {
+  Snippet,
+  SnippetAddon,
+  SnippetCopyButton,
+  SnippetInput,
+  SnippetText,
+} from '@/components/ai-elements/snippet';
+import { ActionButtons } from '@/components/shared/action-buttons';
+import { Container } from '@/components/shared/container';
+import { GradientGlow } from '@/components/shared/gradient-glow';
+
+const hero = {
+  announcement: { label: 'Vertex Edge is now generally available', href: '#' },
+  title: 'Build. Preview. Ship.',
+  description:
+    'Vertex is the frontend cloud. Give your team the tooling and global infrastructure to build, preview, and ship a faster web — from your first commit to production traffic.',
+  primary: { label: 'Start Deploying', href: '#' },
+  secondary: { label: 'Get a Demo', href: '#' },
+  command: 'vertex deploy --prod',
+};
+
+function GridBackdrop() {
+  return (
+    <div
+      aria-hidden="true"
+      className="pointer-events-none absolute inset-0 [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,black,transparent)]"
+      style={{
+        backgroundImage:
+          'linear-gradient(to right, color-mix(in oklab, var(--foreground) 6%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--foreground) 6%, transparent) 1px, transparent 1px)',
+        backgroundSize: '56px 56px',
+      }}
+    />
+  );
+}
+
+export function HeroSection() {
+  return (
+    <section className="relative overflow-hidden">
+      <GridBackdrop />
+      <GradientGlow className="left-1/2 top-[-120px] h-[420px] w-[820px] -translate-x-1/2 opacity-40" />
+
+      <Container className="relative pt-24 pb-20 text-center sm:pt-32">
+        <a
+          href={hero.announcement.href}
+          className="group inline-flex items-center gap-2 rounded-full border border-foreground/15 bg-foreground/5 px-3.5 py-1.5 text-xs text-foreground/70 transition-colors hover:border-foreground/25 hover:text-foreground"
+        >
+          <span className="inline-block h-1.5 w-1.5 rounded-full bg-emerald-400" />
+          {hero.announcement.label}
+          <span className="transition-transform group-hover:translate-x-0.5">
+            &rarr;
+          </span>
+        </a>
+
+        <h1 className="mx-auto mt-8 max-w-4xl bg-gradient-to-b from-foreground to-foreground/60 bg-clip-text text-5xl font-semibold leading-[1.05] tracking-tight text-transparent sm:text-7xl">
+          {hero.title}
+        </h1>
+        <p className="mx-auto mt-6 max-w-2xl text-lg leading-8 text-foreground/55">
+          {hero.description}
+        </p>
+
+        <ActionButtons
+          className="mt-10"
+          primary={hero.primary}
+          secondary={hero.secondary}
+        />
+
+        <Snippet
+          className="mx-auto mt-14 h-12 max-w-md rounded-xl border-border bg-foreground/[0.03] text-sm"
+          code={hero.command}
+        >
+          <SnippetAddon className="pl-1">
+            <SnippetText>$</SnippetText>
+          </SnippetAddon>
+          <SnippetInput />
+          <SnippetAddon align="inline-end" className="pr-2">
+            <SnippetCopyButton />
+          </SnippetAddon>
+        </Snippet>
+      </Container>
+    </section>
+  );
+}