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,73 @@
+import { Button } from '@/components/ui/button';
+
+export function Hero() {
+  return (
+    <section className="relative overflow-hidden">
+      <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, rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px)',
+          backgroundSize: '56px 56px',
+        }}
+      />
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute left-1/2 top-[-120px] h-[420px] w-[820px] -translate-x-1/2 rounded-full opacity-40 blur-3xl"
+        style={{
+          background:
+            'conic-gradient(from 180deg at 50% 50%, #7c3aed, #2563eb, #06b6d4, #ec4899, #7c3aed)',
+        }}
+      />
+
+      <div className="relative mx-auto max-w-6xl px-6 pt-24 pb-20 text-center sm:pt-32">
+        <a
+          href="#"
+          className="group inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-3.5 py-1.5 text-xs text-white/70 transition-colors hover:border-white/25 hover:text-white"
+        >
+          <span className="inline-block h-1.5 w-1.5 rounded-full bg-emerald-400" />
+          Vertex Edge is now generally available
+          <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-white to-white/60 bg-clip-text text-5xl font-semibold leading-[1.05] tracking-tight text-transparent sm:text-7xl">
+          Build. Preview. Ship.
+        </h1>
+        <p className="mx-auto mt-6 max-w-2xl text-lg leading-8 text-white/55">
+          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.
+        </p>
+
+        <div className="mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row">
+          <Button
+            asChild
+            size="lg"
+            className="h-11 rounded-full bg-white px-6 text-[15px] text-black hover:bg-white/90"
+          >
+            <a href="#">Start Deploying</a>
+          </Button>
+          <Button
+            asChild
+            size="lg"
+            variant="outline"
+            className="h-11 rounded-full border-white/20 bg-transparent px-6 text-[15px] text-white hover:bg-white/5 hover:text-white"
+          >
+            <a href="#">Get a Demo</a>
+          </Button>
+        </div>
+
+        <div className="mx-auto mt-14 flex max-w-md items-center gap-3 rounded-xl border border-white/10 bg-white/[0.03] px-4 py-3 font-mono text-sm text-white/70">
+          <span className="text-white/30">$</span>
+          <span>
+            <span className="text-white">vertex</span> deploy --prod
+          </span>
+          <span className="ml-auto h-4 w-px animate-pulse bg-white/40" />
+        </div>
+      </div>
+    </section>
+  );
+}