Initial commit: Next.js SaaS template

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
2026-09-17 23:03:22 -04:00
commit b4d7778be2
88 changed files with 16134 additions and 0 deletions
@@ -0,0 +1,85 @@
+import Image from 'next/image';
+
+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 LogoCloud() {
+  return (
+    <section className="border-y border-white/10 bg-white/[0.02]">
+      <div className="mx-auto max-w-6xl px-6 py-12">
+        <p className="text-center text-xs font-medium uppercase tracking-[0.2em] text-white/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 invert transition-opacity duration-200 group-hover:opacity-80"
+                />
+              </div>
+            ))}
+          </Marquee>
+        </div>
+      </div>
+    </section>
+  );
+}