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,86 @@
+import Image from 'next/image';
+
+import { Container } from '@/components/shared/container';
+import { Marquee } from '@/components/ui/marquee';
+
+const customerLogos = [
+  {
+    name: 'Next.js',
+    src: 'https://sb.frontend.co/storage/v1/object/public/assets/logos/standard/nextjs-logo.svg',
+    width: 394,
+    height: 80,
+  },
+  {
+    name: 'OpenAI',
+    src: 'https://sb.frontend.co/storage/v1/object/public/assets/logos/standard/openai-logo.svg',
+    width: 512,
+    height: 126,
+  },
+  {
+    name: 'Stripe',
+    src: 'https://sb.frontend.co/storage/v1/object/public/assets/logos/standard/stripe-logo.svg',
+    width: 73,
+    height: 31,
+  },
+  {
+    name: 'Vercel',
+    src: 'https://sb.frontend.co/storage/v1/object/public/assets/logos/standard/vercel-logo.svg',
+    width: 2048,
+    height: 407,
+  },
+  {
+    name: 'Supabase',
+    src: 'https://sb.frontend.co/storage/v1/object/public/assets/logos/standard/supabase-logo.svg',
+    width: 581,
+    height: 113,
+  },
+  {
+    name: 'Anthropic',
+    src: 'https://sb.frontend.co/storage/v1/object/public/assets/logos/standard/anthropic-logo.svg',
+    width: 579,
+    height: 65,
+  },
+  {
+    name: 'Tailwind CSS',
+    src: 'https://sb.frontend.co/storage/v1/object/public/assets/logos/standard/tailwindcss-logo.svg',
+    width: 665,
+    height: 82,
+  },
+  {
+    name: 'Linear',
+    src: 'https://sb.frontend.co/storage/v1/object/public/assets/logos/standard/linear-logo.svg',
+    width: 122,
+    height: 31,
+  },
+];
+
+export function LogosSection() {
+  return (
+    <section className="border-y border-border bg-foreground/[0.02]">
+      <Container className="py-12">
+        <p className="text-center text-xs font-medium uppercase tracking-[0.2em] text-foreground/40">
+          Trusted by fast-moving teams shipping to millions
+        </p>
+        <div className="relative mt-8 overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_15%,black_85%,transparent)]">
+          <Marquee pauseOnHover className="[--duration:40s] [--gap:4rem]">
+            {customerLogos.map((logo) => (
+              <div
+                key={logo.name}
+                className="group flex h-12 items-center justify-center px-2"
+              >
+                <Image
+                  src={logo.src}
+                  alt={`${logo.name} logo`}
+                  width={logo.width}
+                  height={logo.height}
+                  unoptimized
+                  className="h-7 w-[120px] max-w-full object-contain opacity-40 brightness-0 transition-opacity duration-200 group-hover:opacity-80 dark:invert"
+                />
+              </div>
+            ))}
+          </Marquee>
+        </div>
+      </Container>
+    </section>
+  );
+}