# Phase 4 — Deploy to Vercel

Deploy the generated site live. Takes ~2 minutes from build to live URL.

## Prerequisites

```bash
# Check Vercel CLI is installed
vercel --version

# If not installed
npm i -g vercel@latest

# Check you're logged in
vercel whoami
```

## Step 1 — Local Build Verification

Before deploying, run a local build to catch errors:
```bash
npm run build
```

Fix any TypeScript or module errors. Common issues:
- Missing `'use client'` on components using `useState`/`useEffect`/`useRef`
- GSAP `ScrollTrigger` not registered (must be in a client component)
- `framer-motion` `useMotionValue` used in Server Component — extract to client component

## Step 2 — Link to Vercel Project

```bash
vercel link
```

If this is a new project, answer the prompts:
- Scope: your team/personal account
- Project name: `<brand.name>-site` (lowercase, hyphenated)
- Root directory: `.` (current directory)

## Step 3 — Deploy Preview

```bash
vercel
```

This deploys to a preview URL like `https://<project>-<hash>.vercel.app`.

Open the preview URL and verify:
- Hero animation plays on load
- Scroll triggers fire on scroll
- All sections render
- Mobile layout works (use browser dev tools at 390px)
- No console errors

## Step 4 — Deploy Production

```bash
vercel --prod
```

This promotes the preview to `https://<project>.vercel.app` (or custom domain if configured).

## Step 5 — Output Live URL

After deployment completes, present the user with:
```
Your site is live!

Preview: https://<project>-<hash>.vercel.app
Production: https://<project>.vercel.app

Built from: <source-url>
```

## Optional: Custom Domain

```bash
vercel domains add <yourdomain.com>
vercel alias set <deployment-url> <yourdomain.com>
```

## Optional: Environment Variables

If the site uses AI features (AI Gateway, Firecrawl API key in server actions):
```bash
vercel env add FIRECRAWL_API_KEY
vercel env pull .env.local   # pull all env vars locally
```

## Deployment Checklist

- [ ] `npm run build` succeeds with zero errors
- [ ] `vercel` preview URL loads correctly
- [ ] Hero animation plays on preview URL
- [ ] Scroll animations work on preview URL
- [ ] Mobile layout verified at 390px width
- [ ] No console errors in browser devtools
- [ ] `vercel --prod` promoted to production
- [ ] Production URL shared with user