@oaklandzoo/ostup 0.9.0 → 0.10.0

package/templates/profiles/lead-gen/README.md

@@ -2,45 +2,43 @@
 
 > Service-company site that captures contact requests. Resend for email, optional CRM webhook, local SEO basics.
 
+## What this profile ships (v1)
+
+The overlay drops a working homepage and a `/api/contact` endpoint into your new project. After `vercel --prod` you have:
+
+- A non-blank homepage at `/` with Hero + Services grid + Service-area + Testimonials + FAQ + Contact form + Footer.
+- A POST `/api/contact` route that validates `{name, email, message}` and sends an email via Resend.
+- Optional CRM webhook forwarding (env: `CRM_WEBHOOK_URL`).
+- JSON-LD `LocalBusiness` schema injected via `app/layout.tsx`.
+- Tailwind-utility styling. No design-system lock-in.
+
 ## Day-one scope
 
 | Section | Purpose | Required |
 |---|---|---|
-| Hero | Single value statement + primary CTA "Request a quote" or "Contact us" | yes |
-| Services | 3-8 service cards or list. Tap-to-call on mobile. | yes |
-| Service area | Map placeholder OR text list of cities / zip codes covered | yes |
+| Hero | Single value statement + primary CTA "Get in touch" | yes |
+| Services | 3-8 service cards | yes |
+| Service area | Map placeholder OR text list of cities / zip codes | yes |
 | Testimonials | 2-4 quotes (placeholders OK if brief has none) | yes |
-| FAQ | 4-8 questions, accordion or stacked | yes |
-| Contact form | Name, phone, email, message. Posts to /api/contact. | yes |
-| Footer | Phone, email, license number if applicable, year | yes |
-
-## Wired infrastructure
-
-- **Resend** for email notifications when a lead submits the form.
-- Optional **CRM webhook** (env: `CRM_WEBHOOK_URL`). If set, also POST the lead payload as JSON.
-- **JSON-LD LocalBusiness schema** in the head of every page.
-- Open Graph + Twitter metadata using `{{DISPLAY_NAME}}` and the brand summary.
+| FAQ | 4-8 questions, `<details>`-based accordion | yes |
+| Contact form | Name, email, message. Posts to `/api/contact`. | yes |
+| Footer | Year + display name | yes |
 
 ## Env additions
 
 See `.env.example.additions` for the variables this profile expects.
 
-## API contract for /api/contact
+## API contract
 
 ```
 POST /api/contact
-Content-Type: application/json
-Body: { name: string, email: string, phone?: string, message: string }
-Response: { ok: boolean, id?: string }
+Body: { name, email, message }
+Response: { ok: true } | { error }
+Behavior: validates input, sends email via Resend to CONTACT_TO_EMAIL,
+          optionally POSTs the payload to CRM_WEBHOOK_URL.
 ```
 
-The route:
-1. Validates required fields (name, email, message).
-2. Sends an email via Resend to `CONTACT_TO_EMAIL` from `CONTACT_FROM_EMAIL`.
-3. If `CRM_WEBHOOK_URL` is set, POSTs the lead payload there.
-4. Returns 200 with `{ ok: true }` on success; 400 on validation; 500 on send failure.
-
-No persistent storage v1. Leads live in the operator's email inbox.
+If `RESEND_API_KEY` is unset, the route logs a warning and returns `{ok: true, mock: true}` so local dev does not fail.
 
 ## Hard rules
 
@@ -51,8 +49,18 @@ No persistent storage v1. Leads live in the operator's email inbox.
 
 ## Acceptance
 
-- Visitor can submit the contact form, sees an inline success state.
-- Owner receives the lead by email at the address in `CONTACT_TO_EMAIL`.
-- JSON-LD LocalBusiness schema validates at https://search.google.com/test/rich-results.
+- Visitor submits the contact form, sees an inline success state.
+- Owner receives the lead by email at `CONTACT_TO_EMAIL`.
+- JSON-LD `LocalBusiness` schema validates at https://search.google.com/test/rich-results.
 - Hero CTA above the fold at 420x900.
 - Lighthouse mobile Performance >= 90, Accessibility >= 95.
+
+## Visual verification
+
+After deploy, run:
+
+```bash
+bash scripts/screenshot.sh <your-vercel-url>
+```
+
+Read the resulting PNG to confirm the hero, services grid, and contact form render as expected.

package/templates/profiles/lead-gen/app/api/contact/route.ts

@@ -0,0 +1,49 @@
+import { NextResponse } from 'next/server';
+import { sendEmail } from '@/lib/resend';
+
+export async function POST(req: Request) {
+  let body: { name?: string; email?: string; message?: string };
+  try {
+    body = await req.json();
+  } catch {
+    return NextResponse.json({ error: 'Invalid JSON' }, { status: 400 });
+  }
+
+  const name = (body.name || '').trim();
+  const email = (body.email || '').trim();
+  const message = (body.message || '').trim();
+
+  if (!name || !email || !message) {
+    return NextResponse.json({ error: 'name, email, and message are required' }, { status: 400 });
+  }
+  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+    return NextResponse.json({ error: 'Invalid email' }, { status: 400 });
+  }
+
+  const to = process.env.CONTACT_TO_EMAIL;
+  const from = process.env.RESEND_FROM_EMAIL || 'noreply@example.com';
+
+  if (to) {
+    await sendEmail({
+      to,
+      from,
+      subject: `New inquiry from ${name}`,
+      text: `From: ${name} <${email}>\n\n${message}`,
+    });
+  }
+
+  const webhookUrl = process.env.CRM_WEBHOOK_URL;
+  if (webhookUrl) {
+    try {
+      await fetch(webhookUrl, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ name, email, message, source: '{{PROJECT_NAME}}' }),
+      });
+    } catch {
+      // best-effort; do not fail the form if the CRM webhook is down
+    }
+  }
+
+  return NextResponse.json({ ok: true });
+}

package/templates/profiles/lead-gen/app/layout.tsx

@@ -0,0 +1,29 @@
+import type { Metadata } from 'next';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: '{{DISPLAY_NAME}}',
+  description: '{{PROJECT_PURPOSE_ONE_SENTENCE}}',
+};
+
+const localBusinessSchema = {
+  '@context': 'https://schema.org',
+  '@type': 'LocalBusiness',
+  name: '{{DISPLAY_NAME}}',
+  description: '{{PROJECT_PURPOSE_ONE_SENTENCE}}',
+  url: process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(localBusinessSchema) }}
+        />
+      </head>
+      <body className="bg-white text-slate-900 antialiased">{children}</body>
+    </html>
+  );
+}

package/templates/profiles/lead-gen/app/page.tsx

@@ -0,0 +1,79 @@
+import Hero from '@/components/Hero';
+import ServiceCard from '@/components/ServiceCard';
+import ContactForm from '@/components/ContactForm';
+import FAQ from '@/components/FAQ';
+
+const services = [
+  { title: 'Service one', description: 'What you do best, in one sentence.' },
+  { title: 'Service two', description: 'A second offering customers ask for.' },
+  { title: 'Service three', description: 'The thing that wins repeat business.' },
+];
+
+const faqs = [
+  { q: 'How fast do you respond?', a: 'We reply to every inquiry within one business day.' },
+  { q: 'What areas do you serve?', a: 'See the service-area block above for current coverage.' },
+  { q: 'How do I get a quote?', a: 'Fill out the contact form below and we will follow up with next steps.' },
+];
+
+export default function HomePage() {
+  return (
+    <main>
+      <Hero />
+
+      <section className="mx-auto max-w-6xl px-6 py-16">
+        <h2 className="text-3xl font-semibold tracking-tight">What we do</h2>
+        <div className="mt-8 grid gap-6 md:grid-cols-3">
+          {services.map((s) => (
+            <ServiceCard key={s.title} title={s.title} description={s.description} />
+          ))}
+        </div>
+      </section>
+
+      <section className="bg-slate-50">
+        <div className="mx-auto max-w-6xl px-6 py-16">
+          <h2 className="text-3xl font-semibold tracking-tight">Service area</h2>
+          <p className="mt-4 text-slate-700">
+            Replace this block with the cities, regions, or coverage map from your brief.
+          </p>
+        </div>
+      </section>
+
+      <section className="mx-auto max-w-6xl px-6 py-16">
+        <h2 className="text-3xl font-semibold tracking-tight">Trusted by</h2>
+        <div className="mt-8 grid gap-6 md:grid-cols-2">
+          <blockquote className="rounded-lg border border-slate-200 p-6">
+            <p className="text-slate-800">
+              &ldquo;Replace this with a real testimonial from a client.&rdquo;
+            </p>
+            <footer className="mt-4 text-sm text-slate-500">Client name, role</footer>
+          </blockquote>
+          <blockquote className="rounded-lg border border-slate-200 p-6">
+            <p className="text-slate-800">
+              &ldquo;Another testimonial. Specific results beat adjectives.&rdquo;
+            </p>
+            <footer className="mt-4 text-sm text-slate-500">Client name, role</footer>
+          </blockquote>
+        </div>
+      </section>
+
+      <section className="bg-slate-50">
+        <div className="mx-auto max-w-6xl px-6 py-16">
+          <h2 className="text-3xl font-semibold tracking-tight">Frequently asked</h2>
+          <FAQ items={faqs} />
+        </div>
+      </section>
+
+      <section id="contact" className="mx-auto max-w-3xl px-6 py-16">
+        <h2 className="text-3xl font-semibold tracking-tight">Get in touch</h2>
+        <p className="mt-2 text-slate-600">Tell us about your project. We will reply within one business day.</p>
+        <ContactForm />
+      </section>
+
+      <footer className="border-t border-slate-200">
+        <div className="mx-auto max-w-6xl px-6 py-8 text-sm text-slate-500">
+          (c) {new Date().getFullYear()} {`{{DISPLAY_NAME}}`}. All rights reserved.
+        </div>
+      </footer>
+    </main>
+  );
+}

package/templates/profiles/lead-gen/components/ContactForm.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { useState } from 'react';
+
+type Status = 'idle' | 'sending' | 'sent' | 'error';
+
+export default function ContactForm() {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
+  const [status, setStatus] = useState<Status>('idle');
+  const [errorText, setErrorText] = useState('');
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setStatus('sending');
+    setErrorText('');
+    try {
+      const res = await fetch('/api/contact', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ name, email, message }),
+      });
+      if (!res.ok) {
+        const data = (await res.json().catch(() => ({}))) as { error?: string };
+        throw new Error(data.error || 'Something went wrong');
+      }
+      setStatus('sent');
+      setName('');
+      setEmail('');
+      setMessage('');
+    } catch (err) {
+      setStatus('error');
+      setErrorText(err instanceof Error ? err.message : 'Something went wrong');
+    }
+  }
+
+  if (status === 'sent') {
+    return (
+      <div className="mt-6 rounded-md bg-green-50 p-4 text-green-900">
+        Thanks. We will be in touch shortly.
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={onSubmit} className="mt-6 space-y-4">
+      <label className="block">
+        <span className="text-sm font-medium text-slate-700">Name</span>
+        <input
+          required
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="mt-1 block w-full rounded-md border border-slate-300 px-3 py-2"
+        />
+      </label>
+      <label className="block">
+        <span className="text-sm font-medium text-slate-700">Email</span>
+        <input
+          required
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className="mt-1 block w-full rounded-md border border-slate-300 px-3 py-2"
+        />
+      </label>
+      <label className="block">
+        <span className="text-sm font-medium text-slate-700">Message</span>
+        <textarea
+          required
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          rows={4}
+          className="mt-1 block w-full rounded-md border border-slate-300 px-3 py-2"
+        />
+      </label>
+      {status === 'error' && (
+        <div className="rounded-md bg-red-50 p-3 text-sm text-red-900">{errorText}</div>
+      )}
+      <button
+        type="submit"
+        disabled={status === 'sending'}
+        className="rounded-md bg-slate-900 px-5 py-2 font-medium text-white hover:bg-slate-800 disabled:opacity-60"
+      >
+        {status === 'sending' ? 'Sending...' : 'Send message'}
+      </button>
+    </form>
+  );
+}

package/templates/profiles/lead-gen/components/FAQ.tsx

@@ -0,0 +1,12 @@
+export default function FAQ({ items }: { items: { q: string; a: string }[] }) {
+  return (
+    <div className="mt-8 divide-y divide-slate-200">
+      {items.map((item) => (
+        <details key={item.q} className="py-4">
+          <summary className="cursor-pointer text-lg font-medium">{item.q}</summary>
+          <p className="mt-2 text-slate-700">{item.a}</p>
+        </details>
+      ))}
+    </div>
+  );
+}

package/templates/profiles/lead-gen/components/Hero.tsx

@@ -0,0 +1,20 @@
+export default function Hero() {
+  return (
+    <section className="bg-slate-900 text-white">
+      <div className="mx-auto max-w-6xl px-6 py-24">
+        <h1 className="text-4xl font-bold tracking-tight md:text-6xl">{`{{DISPLAY_NAME}}`}</h1>
+        <p className="mt-6 max-w-2xl text-lg text-slate-200">
+          {`{{PROJECT_PURPOSE_ONE_SENTENCE}}`}
+        </p>
+        <div className="mt-10">
+          <a
+            href="#contact"
+            className="inline-block rounded-md bg-white px-6 py-3 text-base font-medium text-slate-900 hover:bg-slate-100"
+          >
+            Get in touch
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/profiles/lead-gen/components/ServiceCard.tsx

@@ -0,0 +1,8 @@
+export default function ServiceCard({ title, description }: { title: string; description: string }) {
+  return (
+    <article className="rounded-lg border border-slate-200 p-6">
+      <h3 className="text-lg font-semibold">{title}</h3>
+      <p className="mt-2 text-slate-600">{description}</p>
+    </article>
+  );
+}

package/templates/profiles/lead-gen/lib/resend.ts

@@ -0,0 +1,33 @@
+type EmailArgs = {
+  to: string;
+  from: string;
+  subject: string;
+  text: string;
+};
+
+export async function sendEmail(args: EmailArgs): Promise<{ ok: boolean; mock?: boolean }> {
+  const key = process.env.RESEND_API_KEY;
+  if (!key) {
+    console.warn('RESEND_API_KEY missing; contact form is in mock mode. Email not sent.');
+    return { ok: true, mock: true };
+  }
+  try {
+    const res = await fetch('https://api.resend.com/emails', {
+      method: 'POST',
+      headers: {
+        authorization: `Bearer ${key}`,
+        'content-type': 'application/json',
+      },
+      body: JSON.stringify(args),
+    });
+    if (!res.ok) {
+      const detail = await res.text().catch(() => '');
+      console.error(`Resend failed (${res.status}): ${detail}`);
+      return { ok: false };
+    }
+    return { ok: true };
+  } catch (err) {
+    console.error('Resend network error:', err);
+    return { ok: false };
+  }
+}

package/templates/profiles/lead-gen/package.json.additions

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "resend": "^4.0.0"
+  }
+}

package/templates/profiles/saas-dashboard/.env.example.additions

@@ -1,21 +1,10 @@
 # --- saas-dashboard profile additions ---
-# Auth (Better Auth)
-BETTER_AUTH_SECRET=
-BETTER_AUTH_URL=http://localhost:3000
-
-# Database (Neon recommended for Postgres)
+# Postgres connection string (Neon recommended; any Postgres works)
 DATABASE_URL=
 
-# Stripe subscriptions
-STRIPE_SECRET_KEY=
-STRIPE_PUBLISHABLE_KEY=
-STRIPE_WEBHOOK_SECRET=
-STRIPE_PRICE_ID_SOLO=
-STRIPE_PRICE_ID_TEAM=
+# Better Auth secrets
+BETTER_AUTH_SECRET=
+BETTER_AUTH_URL=http://localhost:3000
 
-# Public app URL
+# Public app URL (Vercel sets this for production)
 NEXT_PUBLIC_APP_URL=http://localhost:3000
-
-# Email (for verification + password reset)
-RESEND_API_KEY=
-AUTH_FROM_EMAIL=noreply@example.com

package/templates/profiles/saas-dashboard/README.md

@@ -1,25 +1,34 @@
 # Profile: saas-dashboard
 
-> SaaS MVP with auth, subscription billing skeleton, dashboard shell, settings. Pick the workflow over feature depth.
+> Single-user SaaS MVP shell with Better Auth, dashboard, settings, and middleware guard. Workflow over feature depth.
+
+## What this profile ships (v1)
+
+The overlay drops auth pages, a guarded dashboard, settings, and a pricing stub into your new project. After `vercel --prod` (with `DATABASE_URL` + `BETTER_AUTH_SECRET` set) you have:
+
+- `/sign-in` and `/sign-up` forms wired to Better Auth.
+- `/dashboard` (and nested routes) protected by `middleware.ts`. Unauthenticated visitors redirect to `/sign-in`.
+- `/dashboard/settings` for a single-user account (email + display name).
+- `/pricing` stub ("Coming soon"). No Stripe wiring in v1.
+- A single `users` table in `db/schema.sql`. NO teams, organizations, roles, invites, or memberships.
+
+## Pro upgrades (not shipped in v1)
+
+- Stripe subscriptions and billing portal.
+- Team / org / role / invite UI.
+- Email verification + password reset flow.
+- API keys / OAuth providers.
 
 ## Day-one scope
 
 | Section | Purpose | Required |
 |---|---|---|
-| Landing hero | Convert visitor to signup | yes |
-| Pricing | 1-3 tiers, monthly + annual toggle | yes |
-| Sign up / Log in | Better Auth flow (email+password or magic link) | yes |
-| Dashboard shell | Authenticated route, empty state with onboarding hint | yes |
-| Settings | Profile + billing pages | yes |
-| Billing | Stripe Customer Portal link OR a stub for "manage subscription" | yes |
-| Footer | Links, year, GitHub, status page link if any | yes |
-
-## Wired infrastructure
-
-- **Better Auth** for authentication. Email+password v1; magic link v2.
-- **Postgres** for `User` + any product entities from the brief.
-- **Stripe** for subscriptions. Use Stripe Checkout for initial signup, Stripe Customer Portal for management.
-- **Middleware** at the route level: unauthenticated visitors to `/dashboard/*` redirect to `/login`.
+| Sign-in / Sign-up | Better Auth email+password | yes |
+| Dashboard shell | Authenticated layout with sign-out | yes |
+| Dashboard home | Welcome card | yes |
+| Settings | Email + display name | yes |
+| Pricing stub | "Coming soon" placeholder | yes |
+| Middleware guard | Redirect unauthenticated `/dashboard/*` to `/sign-in` | yes |
 
 ## Env additions
 
@@ -28,33 +37,31 @@ See `.env.example.additions`.
 ## API contracts
 
 ```
-POST /api/auth/signup         (Better Auth handles)
-POST /api/auth/login          (Better Auth handles)
-POST /api/auth/logout         (Better Auth handles)
-GET  /api/auth/session        (Better Auth handles; returns user or 401)
-
-POST /api/billing/checkout    Body: { plan: 'solo' | 'team' }
-                              Response: { url } (Stripe Checkout URL)
-
-GET  /api/billing/portal      Response: { url } (Stripe Customer Portal URL)
-
-POST /api/webhooks/stripe     Handles subscription.created, .updated, .deleted
-                              Updates User.plan
+ALL /api/auth/[...all]      (Better Auth handler — handles sign-in/up/out, sessions)
+POST /api/account/settings  (your code; see app/dashboard/settings/page.tsx)
 ```
 
 ## Hard rules
 
 - Auth gate runs at middleware level. Never serve dashboard UI to unauthenticated requests, even briefly.
-- Session cookies are httpOnly, secure in production, sameSite=lax.
-- Stripe webhook signature verification is mandatory. Reject on bad sig.
-- Empty dashboard state has a clear "Get started" path. No dead-end empty UI.
+- Session cookies are httpOnly, secure in production, sameSite=lax (Better Auth defaults).
 - All errors during auth flow are user-facing (not stack traces).
-- Settings → Billing links to Stripe Customer Portal, not a custom billing UI v1.
+- The build MUST succeed when `DATABASE_URL` is unset (build-time stub via `lib/db.ts`).
 
 ## Acceptance
 
-- New user can sign up, see empty dashboard, log out, log back in.
-- Stripe Checkout can be initiated; webhook updates user plan.
-- Visiting `/dashboard` unauthenticated redirects to `/login`.
-- Visiting `/login` while logged in redirects to `/dashboard`.
-- Lighthouse landing-page Performance >= 90; dashboard >= 80 (slightly lower acceptable due to auth code).
+- New user can sign up, see empty dashboard, sign out, sign back in.
+- Visiting `/dashboard` unauthenticated redirects to `/sign-in`.
+- `db/schema.sql` contains exactly the `users` table; no team/role/invite tables.
+- Lighthouse landing-page Performance >= 80 (slightly lower acceptable due to auth code).
+
+## Visual verification
+
+After deploy, run:
+
+```bash
+bash scripts/screenshot.sh <your-vercel-url>/sign-in
+bash scripts/screenshot.sh <your-vercel-url>/dashboard   # expect redirect to /sign-in
+```
+
+Read the resulting PNGs to confirm the auth flow renders and the dashboard guard works.

package/templates/profiles/saas-dashboard/app/(auth)/sign-in/page.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+export default function SignInPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [pending, setPending] = useState(false);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setPending(true);
+    setError('');
+    try {
+      const res = await fetch('/api/auth/sign-in/email', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      });
+      if (!res.ok) {
+        const data = (await res.json().catch(() => ({}))) as { error?: string };
+        throw new Error(data.error || 'Sign-in failed');
+      }
+      router.push('/dashboard');
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Sign-in failed');
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <main className="mx-auto flex min-h-screen max-w-md flex-col justify-center px-6 py-12">
+      <h1 className="text-3xl font-semibold tracking-tight">Sign in</h1>
+      <p className="mt-2 text-sm text-slate-600">Welcome back to {`{{DISPLAY_NAME}}`}.</p>
+      <form onSubmit={onSubmit} className="mt-8 space-y-4">
+        <label className="block">
+          <span className="text-sm font-medium text-slate-700">Email</span>
+          <input
+            required
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="mt-1 block w-full rounded-md border border-slate-300 px-3 py-2"
+          />
+        </label>
+        <label className="block">
+          <span className="text-sm font-medium text-slate-700">Password</span>
+          <input
+            required
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="mt-1 block w-full rounded-md border border-slate-300 px-3 py-2"
+          />
+        </label>
+        {error && <div className="rounded-md bg-red-50 p-3 text-sm text-red-900">{error}</div>}
+        <button
+          type="submit"
+          disabled={pending}
+          className="w-full rounded-md bg-slate-900 px-4 py-2 font-medium text-white hover:bg-slate-800 disabled:opacity-60"
+        >
+          {pending ? 'Signing in...' : 'Sign in'}
+        </button>
+      </form>
+      <p className="mt-6 text-sm text-slate-600">
+        No account? <a className="font-medium text-slate-900 underline" href="/sign-up">Create one</a>.
+      </p>
+    </main>
+  );
+}