@pylonsync/create-pylon 0.8.0 → 0.8.2

package/templates/saas/app/(auth)/auth-form.tsx

@@ -1,38 +1,33 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import { db } from "@pylonsync/react";
+import { Link } from "@pylonsync/react";
 import {
   passwordLogin,
   passwordRegister,
   persistSession,
-  createOrg,
   ApiError,
 } from "@pylonsync/client";
 
-// The email/password form, shared by /login and /signup. It calls the built-in
-// auth API directly — `passwordLogin` / `passwordRegister` (from
-// @pylonsync/client) POST to `/api/auth/password/*`.
+// The email/password form shared by /login and /signup, plus an email-code
+// path ("Email me a code") for people who never set a password. Every path
+// calls the built-in auth API (`/api/auth/password/*`, `/api/auth/magic/*`).
 //
-// On success the server sets a session cookie (used by the SSR runtime to
-// resolve auth on the next full navigation) AND returns the session token. We
-// call `persistSession` with that token so the sync engine adopts the new
-// identity: it writes the token to storage (overwriting any earlier guest
-// token a demo flow may have left behind) and re-fetches `/api/auth/me`.
-//
-// Skipping this was a real footgun: a stale anonymous guest token left in
-// localStorage would be sent as a `Bearer` on the engine's auth calls, where
-// the server prefers it over the cookie — so `selectOrg` would 401 with
-// "anonymous session" even though the cookie was a valid user.
+// On success the server sets the session cookie AND returns the token; we
+// call `persistSession` so the sync engine adopts the identity at once (a
+// stale guest token in localStorage would otherwise shadow the cookie on the
+// engine's calls). Sign-up then lands on /onboarding, which creates the
+// workspace; sign-in lands on /dashboard.
 export function AuthForm({ mode }: { mode: "login" | "signup" }) {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [code, setCode] = useState("");
+  const [codeSent, setCodeSent] = useState(false);
+  const [method, setMethod] = useState<"password" | "code">("password");
   const [error, setError] = useState<string | null>(null);
   const [pending, setPending] = useState(false);
-  // OAuth buttons render only for providers the server actually has
-  // configured (GET /api/auth/providers) — an unconfigured provider's
-  // login URL is a JSON error dead-end, not a login page. `null` while
-  // loading so nothing flashes in.
+  // OAuth buttons render only for providers the server has configured
+  // (GET /api/auth/providers). `null` while loading so nothing flashes in.
   const [providers, setProviders] = useState<string[] | null>(null);
 
   useEffect(() => {
@@ -50,37 +45,39 @@ export function AuthForm({ mode }: { mode: "login" | "signup" }) {
     };
   }, []);
 
+  const destination = mode === "login" ? "/dashboard" : "/onboarding";
+
   async function onSubmit(e: React.FormEvent) {
     e.preventDefault();
     setError(null);
     setPending(true);
     try {
-      if (mode === "login") {
-        const session = await passwordLogin({ email, password });
-        // Adopt the real identity locally before navigating — otherwise a
-        // leftover guest token shadows this session on the sync engine's calls.
-        persistSession(session);
-        // Full navigation: the SSR dashboard re-renders with the new cookie.
-        window.location.assign("/dashboard");
-      } else {
-        const session = await passwordRegister({ email, password });
-        persistSession(session);
-        // Auto-provision a first workspace so new accounts land in a ready
-        // dashboard instead of an empty first-run screen. Named "My Workspace"
-        // (renamable in Settings) and made the active tenant. Either way we land
-        // on /dashboard — if provisioning failed here, the dashboard's org-less
-        // safety net retries it.
-        try {
-          const org = await createOrg("My Workspace");
-          await db.sync.selectOrg(org.id);
-        } catch {
-          // Swallowed — the dashboard provisions on load if there's still no org.
+      if (method === "code") {
+        if (!codeSent) {
+          await postJson("/api/auth/magic/send", { email });
+          setCodeSent(true);
+          setPending(false);
+          return;
         }
-        window.location.assign("/dashboard");
+        const session = await postJson<{ token: string; user_id?: string | null }>(
+          "/api/auth/magic/verify",
+          { email, code },
+        );
+        persistSession({ token: session.token, user_id: session.user_id ?? "" });
+        // A code sign-in may have just created the account; the wizard
+        // sends an already-onboarded workspace straight to the dashboard.
+        window.location.assign("/onboarding");
+        return;
       }
+      const session =
+        mode === "login"
+          ? await passwordLogin({ email, password })
+          : await passwordRegister({ email, password });
+      persistSession(session);
+      window.location.assign(destination);
     } catch (err) {
       setError(messageFor(err));
-      setPending(false); // keep the form up to retry (success navigates away)
+      setPending(false);
     }
   }
 
@@ -96,18 +93,43 @@ export function AuthForm({ mode }: { mode: "login" | "signup" }) {
           required
           autoComplete="email"
           placeholder="Enter your email"
+          disabled={codeSent}
         />
-        <IconField
-          label="Password"
-          type="password"
-          icon={<LockIcon />}
-          value={password}
-          onChange={setPassword}
-          required
-          autoComplete={mode === "login" ? "current-password" : "new-password"}
-          placeholder="Enter your password"
-        />
-        {mode === "signup" ? (
+        {method === "password" ? (
+          <IconField
+            label="Password"
+            type="password"
+            icon={<LockIcon />}
+            value={password}
+            onChange={setPassword}
+            required
+            autoComplete={mode === "login" ? "current-password" : "new-password"}
+            placeholder={mode === "login" ? "Enter your password" : "Choose a password (10+ characters)"}
+            trailing={
+              mode === "login" ? (
+                <Link
+                  href="/forgot-password"
+                  className="text-[12px] text-zinc-500 underline underline-offset-2 hover:text-zinc-900"
+                >
+                  Forgot password?
+                </Link>
+              ) : null
+            }
+          />
+        ) : codeSent ? (
+          <IconField
+            label="6-digit code"
+            type="text"
+            icon={<LockIcon />}
+            value={code}
+            onChange={(v) => setCode(v.replace(/\D/g, "").slice(0, 6))}
+            required
+            autoComplete="one-time-code"
+            placeholder="123456"
+            hint={`We emailed a code to ${email}.`}
+          />
+        ) : null}
+        {mode === "signup" && method === "password" ? (
           <p className="text-[12px] leading-snug text-zinc-500">
             By joining, you agree to our{" "}
             <a href="/company/terms" className="underline underline-offset-2">
@@ -117,7 +139,7 @@ export function AuthForm({ mode }: { mode: "login" | "signup" }) {
             <a href="/company/privacy" className="underline underline-offset-2">
               Privacy
             </a>
-            . Passwords need 10+ characters.
+            .
           </p>
         ) : null}
         {error ? (
@@ -127,13 +149,34 @@ export function AuthForm({ mode }: { mode: "login" | "signup" }) {
         ) : null}
         <button
           type="submit"
-          disabled={pending}
+          disabled={pending || (method === "code" && codeSent && code.length !== 6)}
           className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-zinc-900 text-sm font-medium text-white transition-colors hover:bg-zinc-700 disabled:opacity-60"
         >
-          {pending ? "…" : mode === "login" ? "Sign in" : "Sign up"}
+          {pending
+            ? "…"
+            : method === "code"
+              ? codeSent
+                ? "Continue"
+                : "Email me a code"
+              : mode === "login"
+                ? "Sign in"
+                : "Create account"}
         </button>
       </form>
 
+      <button
+        type="button"
+        onClick={() => {
+          setMethod(method === "password" ? "code" : "password");
+          setCodeSent(false);
+          setCode("");
+          setError(null);
+        }}
+        className="w-full text-center text-[13px] text-zinc-500 underline underline-offset-2 hover:text-zinc-900"
+      >
+        {method === "password" ? "Email me a sign-in code instead" : "Use a password instead"}
+      </button>
+
       {/* Social sign-in — only for providers the server reports as
           configured. Enable Google with PYLON_OAUTH_GOOGLE_CLIENT_ID /
           _CLIENT_SECRET / _REDIRECT (GitHub: PYLON_OAUTH_GITHUB_*) and the
@@ -148,7 +191,7 @@ export function AuthForm({ mode }: { mode: "login" | "signup" }) {
 
           {providers.includes("google") ? (
             <a
-              href="/api/auth/login/google?callback=/dashboard&redirect=1"
+              href={`/api/auth/login/google?callback=${destination}&redirect=1`}
               className="inline-flex h-10 w-full items-center justify-center gap-2 rounded-lg border border-zinc-300 bg-white text-sm font-medium text-zinc-900 transition-colors hover:bg-zinc-50"
             >
               <GoogleIcon />
@@ -157,7 +200,7 @@ export function AuthForm({ mode }: { mode: "login" | "signup" }) {
           ) : null}
           {providers.includes("github") ? (
             <a
-              href="/api/auth/login/github?callback=/dashboard&redirect=1"
+              href={`/api/auth/login/github?callback=${destination}&redirect=1`}
               className="inline-flex h-10 w-full items-center justify-center gap-2 rounded-lg border border-zinc-300 bg-white text-sm font-medium text-zinc-900 transition-colors hover:bg-zinc-50"
             >
               <GitHubIcon />
@@ -170,44 +213,56 @@ export function AuthForm({ mode }: { mode: "login" | "signup" }) {
   );
 }
 
+async function postJson<T = Record<string, unknown>>(path: string, body: unknown): Promise<T> {
+  const res = await fetch(path, {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    credentials: "include",
+    body: JSON.stringify(body),
+  });
+  const data = (await res.json().catch(() => ({}))) as T & {
+    error?: { code?: string; message?: string };
+  };
+  if (!res.ok) {
+    throw new Error(data.error?.message ?? `Request failed (${res.status})`);
+  }
+  return data;
+}
+
 function IconField({
   label,
   icon,
   value,
   onChange,
-  type = "text",
-  required,
-  autoComplete,
-  placeholder,
+  trailing,
+  hint,
+  ...rest
 }: {
   label: string;
   icon: React.ReactNode;
   value: string;
   onChange: (v: string) => void;
-  type?: string;
-  required?: boolean;
-  autoComplete?: string;
-  placeholder?: string;
-}) {
+  trailing?: React.ReactNode;
+  hint?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange">) {
   return (
     <label className="block">
-      <span className="mb-1.5 block text-[13px] font-medium text-zinc-700">
+      <span className="mb-1.5 flex items-center justify-between text-[13px] font-medium text-zinc-700">
         {label}
+        {trailing}
       </span>
-      <div className="relative">
-        <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400">
+      <span className="relative block">
+        <span className="pointer-events-none absolute inset-y-0 left-3 flex items-center text-zinc-400">
           {icon}
         </span>
         <input
-          type={type}
           value={value}
           onChange={(e) => onChange(e.target.value)}
-          required={required}
-          autoComplete={autoComplete}
-          placeholder={placeholder}
-          className="h-10 w-full rounded-lg border border-zinc-300 bg-white pl-9 pr-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-zinc-900 focus:ring-2 focus:ring-zinc-900/10"
+          className="h-10 w-full rounded-lg border border-zinc-300 bg-white pl-9 pr-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-zinc-900 focus:ring-2 focus:ring-zinc-900/10 disabled:bg-zinc-50 disabled:text-zinc-500"
+          {...rest}
         />
-      </div>
+      </span>
+      {hint ? <span className="mt-1.5 block text-[12px] text-zinc-500">{hint}</span> : null}
     </label>
   );
 }
@@ -224,7 +279,7 @@ function MailIcon() {
 function LockIcon() {
   return (
     <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <rect x="5" y="11" width="14" height="10" rx="2" />
+      <rect x="4" y="11" width="16" height="10" rx="2" />
       <path d="M8 11V7a4 4 0 0 1 8 0v4" />
     </svg>
   );
@@ -233,7 +288,7 @@ function LockIcon() {
 function GitHubIcon() {
   return (
     <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
-      <path d="M12 1C5.92 1 1 5.92 1 12c0 4.87 3.15 9 7.52 10.45.55.1.75-.24.75-.53 0-.26-.01-.96-.01-1.88-3.06.66-3.71-1.48-3.71-1.48-.5-1.27-1.22-1.61-1.22-1.61-1-.68.08-.67.08-.67 1.1.08 1.68 1.13 1.68 1.13.98 1.68 2.57 1.19 3.2.91.1-.71.38-1.19.69-1.47-2.44-.28-5.01-1.22-5.01-5.44 0-1.2.43-2.18 1.13-2.95-.11-.28-.49-1.4.11-2.91 0 0 .92-.3 3.03 1.13a10.5 10.5 0 0 1 5.52 0c2.1-1.43 3.03-1.13 3.03-1.13.6 1.51.22 2.63.11 2.91.7.77 1.13 1.75 1.13 2.95 0 4.23-2.58 5.16-5.03 5.43.39.34.74 1 .74 2.02 0 1.47-.01 2.65-.01 3.01 0 .29.2.64.76.53A11.01 11.01 0 0 0 23 12c0-6.08-4.92-11-11-11z" />
+      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
     </svg>
   );
 }
@@ -241,28 +296,14 @@ function GitHubIcon() {
 function GoogleIcon() {
   return (
     <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden>
-      <path
-        fill="#4285F4"
-        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-      />
-      <path
-        fill="#34A853"
-        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-      />
-      <path
-        fill="#FBBC05"
-        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"
-      />
-      <path
-        fill="#EA4335"
-        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-      />
+      <path fill="#4285F4" d="M23.49 12.27c0-.79-.07-1.54-.19-2.27H12v4.51h6.47a5.53 5.53 0 0 1-2.4 3.63v3.01h3.87c2.27-2.09 3.55-5.17 3.55-8.88z" />
+      <path fill="#34A853" d="M12 24c3.24 0 5.95-1.08 7.94-2.91l-3.87-3.01c-1.08.72-2.45 1.16-4.07 1.16-3.13 0-5.78-2.11-6.73-4.96H1.29v3.09A12 12 0 0 0 12 24z" />
+      <path fill="#FBBC05" d="M5.27 14.28A7.2 7.2 0 0 1 4.89 12c0-.79.14-1.56.38-2.28V6.63H1.29A12 12 0 0 0 0 12c0 1.94.46 3.77 1.29 5.37l3.98-3.09z" />
+      <path fill="#EA4335" d="M12 4.75c1.77 0 3.35.61 4.6 1.8l3.44-3.44C17.95 1.19 15.24 0 12 0A12 12 0 0 0 1.29 6.63l3.98 3.09C6.22 6.86 8.87 4.75 12 4.75z" />
     </svg>
   );
 }
 
-// Map the framework's auth error codes to friendly copy. `ApiError` carries a
-// stable `.code` (and `.status`) so you branch on the code, not the message.
 function messageFor(err: unknown): string {
   if (err instanceof ApiError) {
     switch (err.code) {

package/templates/saas/app/(auth)/forgot-password/page.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { type Metadata } from "@pylonsync/react";
+import { ForgotPasswordForm } from "../recovery-forms";
+
+export const metadata: Metadata = {
+  title: "Reset your password — Acme",
+  robots: "noindex",
+};
+
+export default function ForgotPasswordPage() {
+  return (
+    <>
+      <h1 className="mt-5 text-[22px] font-semibold tracking-tight text-zinc-900">Reset your password</h1>
+      <p className="mt-1 text-[13px] text-zinc-500">Enter your email and we will send a reset link.</p>
+      <div className="mt-6">
+        <ForgotPasswordForm />
+      </div>
+    </>
+  );
+}

package/templates/saas/app/(auth)/recovery-forms.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import React, { useState } from "react";
+import { persistSession } from "@pylonsync/client";
+import { Link } from "@pylonsync/react";
+
+const inputCls =
+  "h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-zinc-900 focus:ring-2 focus:ring-zinc-900/10";
+const buttonCls =
+  "inline-flex h-10 w-full items-center justify-center rounded-lg bg-zinc-900 text-sm font-medium text-white transition-colors hover:bg-zinc-700 disabled:opacity-60";
+
+async function post(path: string, body: unknown): Promise<Record<string, unknown>> {
+  const res = await fetch(path, {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    credentials: "include",
+    body: JSON.stringify(body),
+  });
+  const data = (await res.json().catch(() => ({}))) as {
+    error?: { code?: string; message?: string };
+  };
+  if (!res.ok) throw new Error(data.error?.message ?? `Request failed (${res.status})`);
+  return data as Record<string, unknown>;
+}
+
+/** /forgot-password: request a reset email. Always says "sent" so the form
+ *  does not reveal whether an address has an account. */
+export function ForgotPasswordForm() {
+  const [email, setEmail] = useState("");
+  const [sent, setSent] = useState(false);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setPending(true);
+    setError(null);
+    try {
+      await post("/api/auth/password/reset/request", { email });
+      setSent(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong.");
+    } finally {
+      setPending(false);
+    }
+  }
+
+  if (sent) {
+    return (
+      <p className="text-sm text-zinc-600">
+        If an account exists for <span className="font-medium">{email}</span>, a reset link is on its way. The
+        link expires in one hour.
+      </p>
+    );
+  }
+  return (
+    <form onSubmit={onSubmit} className="space-y-4">
+      <input
+        type="email"
+        required
+        autoComplete="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder="you@company.com"
+        aria-label="Email"
+        className={inputCls}
+      />
+      {error && <p className="text-[13px] text-red-700">{error}</p>}
+      <button type="submit" disabled={pending} className={buttonCls}>
+        {pending ? "…" : "Send reset link"}
+      </button>
+      <p className="text-center text-[13px] text-zinc-500">
+        <Link href="/login" className="underline underline-offset-2">
+          Back to sign in
+        </Link>
+      </p>
+    </form>
+  );
+}
+
+/** /reset-password?token=…: set a new password and sign in. */
+export function ResetPasswordForm({ token }: { token: string }) {
+  const [password, setPassword] = useState("");
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setPending(true);
+    setError(null);
+    try {
+      const data = await post("/api/auth/password/reset/complete", { token, newPassword: password });
+      if (typeof data.token === "string") {
+        persistSession({ token: data.token, user_id: (data.user_id as string) ?? null });
+        window.location.assign("/dashboard");
+        return;
+      }
+      window.location.assign("/login?reset=1");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "That link is no longer valid.");
+      setPending(false);
+    }
+  }
+
+  if (!token) {
+    return (
+      <p className="text-sm text-zinc-600">
+        This reset link is missing its token.{" "}
+        <Link href="/forgot-password" className="underline underline-offset-2">
+          Request a new one
+        </Link>
+        .
+      </p>
+    );
+  }
+  return (
+    <form onSubmit={onSubmit} className="space-y-4">
+      <input
+        type="password"
+        required
+        minLength={10}
+        autoComplete="new-password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        placeholder="New password (10+ characters)"
+        aria-label="New password"
+        className={inputCls}
+      />
+      {error && <p className="text-[13px] text-red-700">{error}</p>}
+      <button type="submit" disabled={pending} className={buttonCls}>
+        {pending ? "…" : "Set new password"}
+      </button>
+    </form>
+  );
+}

package/templates/saas/app/(auth)/reset-password/page.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { type Metadata, type PageProps } from "@pylonsync/react";
+import { ResetPasswordForm } from "../recovery-forms";
+
+export const metadata: Metadata = {
+  title: "Choose a new password — Acme",
+  robots: "noindex",
+};
+
+// The reset email links here with `?token=…` (see PYLON_PUBLIC_URL on the
+// server: it builds `<public url>/reset-password?token=…`).
+export default function ResetPasswordPage({ searchParams }: PageProps) {
+  const raw = (searchParams as Record<string, string | string[] | undefined> | undefined)?.token;
+  const token = Array.isArray(raw) ? raw[0] ?? "" : raw ?? "";
+  return (
+    <>
+      <h1 className="mt-5 text-[22px] font-semibold tracking-tight text-zinc-900">Choose a new password</h1>
+      <p className="mt-1 text-[13px] text-zinc-500">You will be signed in on every device after this.</p>
+      <div className="mt-6">
+        <ResetPasswordForm token={token} />
+      </div>
+    </>
+  );
+}

package/templates/saas/app/(marketing)/layout.tsx

@@ -198,7 +198,7 @@ export default function MarketingLayout({ children, auth }: LayoutProps) {
               <NavDropdown label="Product" items={PRODUCT_MENU} />
               <NavDropdown label="Resources" items={RESOURCES_MENU} />
               <Link
-                href="/#pricing"
+                href="/pricing"
                 className="text-[13.5px] text-zinc-600 transition-colors hover:text-zinc-900"
               >
                 Pricing

package/templates/saas/app/(marketing)/page.tsx

@@ -14,6 +14,7 @@ import {
   Terminal,
 } from "@/components/marketing";
 import { siteConfig, productBySlug, type Product } from "@/lib/site.config";
+import { PricingTable } from "@/components/pricing-table";
 
 // SEO metadata. Exported `metadata` is rendered into <head> on the server, so
 // this marketing page is fully indexable — view source and the copy is in the
@@ -306,58 +307,8 @@ export default function LandingPage({ auth }: PageProps) {
         <p className="mt-5 max-w-md text-[15px] leading-relaxed text-zinc-500">
           {pricing.body}
         </p>
-        <div className="mt-12 grid gap-5 lg:grid-cols-3">
-          {pricing.plans.map((p) => (
-            <div
-              key={p.name}
-              className={`flex flex-col rounded-2xl border p-7 ${
-                p.featured
-                  ? "border-zinc-900 bg-white shadow-[0_24px_60px_-30px_rgba(0,0,0,0.3)]"
-                  : "border-zinc-200 bg-paper"
-              }`}
-            >
-              <div className="flex items-center justify-between">
-                <h3 className="text-base font-semibold">{p.name}</h3>
-                {p.featured && (
-                  <span className="font-mono text-[10px] uppercase tracking-[0.12em] text-brand">
-                    Most popular
-                  </span>
-                )}
-              </div>
-              <p className="mt-1 text-[13px] text-zinc-500">{p.tagline}</p>
-              <div className="mt-5 flex items-baseline gap-1">
-                <span className="text-4xl font-semibold tracking-tight">
-                  {p.price}
-                </span>
-                <span className="text-[13px] text-zinc-500">{p.unit}</span>
-              </div>
-              <ul className="mt-6 flex-1 space-y-3 text-[14px] text-zinc-600">
-                {p.features.map((f) => (
-                  <li key={f} className="flex gap-2.5">
-                    <span className="mt-[3px] text-brand">✓</span>
-                    {f}
-                  </li>
-                ))}
-              </ul>
-              <div className="mt-7">
-                {p.featured ? (
-                  <PrimaryButton
-                    href={primaryHref}
-                    className="w-full justify-center"
-                  >
-                    {p.cta}
-                  </PrimaryButton>
-                ) : (
-                  <Link
-                    href={primaryHref}
-                    className="inline-flex w-full items-center justify-center rounded-full border border-zinc-300 px-5 py-2.5 text-sm font-medium text-zinc-900 transition-colors hover:border-zinc-400 hover:bg-zinc-50"
-                  >
-                    {p.cta}
-                  </Link>
-                )}
-              </div>
-            </div>
-          ))}
+        <div className="mt-12">
+          <PricingTable signedIn={signedIn} />
         </div>
       </section>