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,86 @@
+const features = [
+  {
+    step: '01',
+    title: 'Build',
+    description:
+      'Native support for 35+ frameworks. Push your code and Vertex handles the build pipeline, caching, and dependencies automatically.',
+    icon: <path d="M8 6L2 12l6 6M16 6l6 6-6 6" strokeWidth="1.5" fill="none" />,
+  },
+  {
+    step: '02',
+    title: 'Preview',
+    description:
+      'Every push gets a live preview URL. Share it, comment on it, and ship with confidence — no environment drift, no surprises.',
+    icon: (
+      <>
+        <rect
+          x="3"
+          y="4"
+          width="18"
+          height="14"
+          rx="2"
+          strokeWidth="1.5"
+          fill="none"
+        />
+        <path d="M9 21h6M12 18v3" strokeWidth="1.5" fill="none" />
+      </>
+    ),
+  },
+  {
+    step: '03',
+    title: 'Ship',
+    description:
+      'Deploy to a global edge network in seconds. Instant rollbacks, zero-downtime releases, and traffic that lands close to every user.',
+    icon: (
+      <path
+        d="M4 13l1.5-5.5A2 2 0 0 1 7.4 6h9.2a2 2 0 0 1 1.9 1.5L20 13M4 13v5h16v-5M4 13h16M8 17h.01M16 17h.01"
+        strokeWidth="1.5"
+        fill="none"
+      />
+    ),
+  },
+];
+
+export function Features() {
+  return (
+    <section className="mx-auto max-w-6xl px-6 py-24">
+      <div className="max-w-2xl">
+        <p className="font-mono text-xs uppercase tracking-[0.2em] text-white/40">
+          The workflow
+        </p>
+        <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
+          From commit to production, without the ceremony.
+        </h2>
+      </div>
+
+      <div className="mt-14 grid gap-px overflow-hidden rounded-2xl border border-white/10 bg-white/10 md:grid-cols-3">
+        {features.map((feature) => (
+          <div
+            key={feature.step}
+            className="group flex flex-col bg-black p-8 transition-colors hover:bg-white/[0.03]"
+          >
+            <div className="flex items-center justify-between">
+              <svg
+                width="28"
+                height="28"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                className="text-white/80"
+                aria-hidden="true"
+              >
+                {feature.icon}
+              </svg>
+              <span className="font-mono text-xs text-white/30">
+                {feature.step}
+              </span>
+            </div>
+            <h3 className="mt-6 text-xl font-medium">{feature.title}</h3>
+            <p className="mt-3 text-sm leading-6 text-white/50">
+              {feature.description}
+            </p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}