How to Clone Carrd

Create a full-stack one-page website builder called PageDrop using Next.js (App Router), Tailwind CSS, Prisma and SQLite (swap to Postgres later).

## What to build
A Carrd-style builder: users assemble a single page from blocks, publish to a subdomain, and upgrade to a paid plan for custom domains and forms.

## Key screens
- Landing page with pricing (Free / Pro) and a 'Start building' CTA
- Template gallery: pick a starter one-pager
- Editor: block palette + live canvas + desktop/mobile preview toggle + Publish button
- Dashboard: list of the user's sites with edit/duplicate/unpublish
- Site settings: subdomain, custom domain, SEO meta, password
- Public renderer: a route that renders a published site from its stored block JSON
- Auth: email credentials or magic link

## Schema (Prisma)
User (id, name, email, plan), Site (id, ownerId, name, subdomain unique, customDomain, status, blocks Json, theme Json, seo Json, passwordHash), FormSubmission (id, siteId, data Json, createdAt), Pageview (id, siteId, day, count)

## Block model
Blocks are an ordered JSON array. Each block: { id, type, props, style }. Types: heading, text, image, button, divider, socialIcons, embed, form. Build a Block renderer component that switches on type, used by BOTH the editor canvas and the public page.

## Logic that must work
- Reorder blocks (drag or up/down) and persist the new order
- Subdomain uniqueness validated server-side before publish
- Public route /s/[subdomain] reads the site's blocks JSON and renders the page; return 404 if not published
- Plan gating: free users capped at 3 sites and forced to show the footer badge; pro unlocks custom domain + forms
- Form blocks POST to an API route that stores a FormSubmission

## Style
Clean and minimal: white canvas, indigo (#5B5BD6) accent, rounded-xl cards, soft shadows, Inter font. The editor canvas should visually match the published output so what-you-see-is-what-you-get. Fully responsive.

Seed with 6 templates and 2 published demo sites. Use Stripe test mode for the Pro upgrade if available; otherwise mock the upgrade with a button that flips the user's plan to pro.

You are building a production-quality Carrd-style one-page site builder. Work iteratively: scaffold, then implement feature by feature, running the app after each step.

## Stack
- Next.js 14 App Router, TypeScript, Tailwind CSS, shadcn/ui
- PostgreSQL via Prisma; Supabase for auth (email + Google) and image storage
- dnd-kit for block reordering; Zod for all input validation
- Stripe Billing for the Pro subscription; Cloudflare for SaaS (or Vercel domains API) for custom domains

## Architecture requirements
- A site is a document: { theme, blocks: Block[] }. Define a discriminated union Block type in lib/blocks.ts; a single <BlockRenderer> consumes it and is shared by the editor and the public page (single source of truth for rendering)
- Editor is a client island; the rest of the app is server components. Autosave the blocks JSON via a debounced server action
- Public pages render through a wildcard route resolved by subdomain (and custom domain via host header); statically cache published pages with ISR/revalidate-on-publish for near-zero serving cost
- Never trust the client for plan limits - enforce site caps and pro-feature gates server-side from the stored user.plan

## Data model
users, sites (subdomain unique index, custom_domain unique index, blocks jsonb, theme jsonb, seo jsonb, status), form_submissions, pageviews. Index sites(owner_id), sites(subdomain).

## Implementation order
1. Scaffold + Prisma schema + Supabase auth with middleware-protected /app routes
2. Block model + BlockRenderer + a read-only public route /s/[subdomain] rendering seeded block JSON
3. Editor shell: block palette, canvas, select-a-block side panel, desktop/mobile toggle; wire dnd-kit reorder + debounced autosave
4. Per-block settings forms (react-hook-form + Zod) for each block type; image block uploads to Supabase storage with compression
5. Dashboard CRUD: create/duplicate/unpublish sites; subdomain validation and uniqueness
6. Publishing pipeline: publish sets status + triggers revalidation; SEO metadata via generateMetadata from the site's seo JSON
7. Billing: Stripe Checkout for Pro, webhook flips plan, gate custom domains + forms + badge removal
8. Custom domains: add-domain flow, verification, wildcard SSL via Cloudflare for SaaS; resolve host header to the right site

## Quality bar
- Published pages must score well on Lighthouse (SSG/ISR, no editor JS shipped to the public page)
- loading.tsx skeletons and error.tsx boundaries on async routes
- Zod schemas validate every block's props on save so a malformed block can't break the public renderer
- Seed script: 3 users, 6 templates, 4 published sites with varied block layouts

Start with step 1. After each step, tell me what to verify in the browser before moving on.

Design the complete UI for a Carrd-style one-page website builder called PageDrop. React + Tailwind, shadcn/ui components, lucide-react icons. Minimal, calm, confident aesthetic: white background, indigo (#5B5BD6) accent, rounded-xl cards, soft shadows, generous whitespace, Inter font.

## Screens to generate

### 1. Landing page
- Sticky header: wordmark left, nav (Templates, Pricing, Login), 'Start building' primary button right
- Hero: big headline 'One page. Done right.', subhead, a framed live preview of a sample one-pager floating on a soft gradient
- A 3-up feature row (No code, Custom domains, Forms & analytics) with simple line icons
- Pricing: two cards (Free / Pro $19/yr) with feature checklists and a clear CTA on each, the Pro card subtly highlighted
- Footer: simple links, a 'Made with PageDrop' badge example

### 2. Template gallery
- Page heading and a short subhead
- Filter chips (All, Profile, Link-in-bio, Event, Portfolio, Coming Soon) with an active state
- Responsive grid of template cards (3/2/1 columns): a tall device-framed thumbnail, name, category label, and a hover overlay with Preview + Use buttons

### 3. Editor (the hero screen)
- Three-pane layout: left rail = block palette (heading, text, image, button, divider, social, embed, form) as labeled icon tiles; center = page canvas inside a device frame with a desktop/mobile segmented toggle above it; right rail = contextual settings for the selected block (content fields + style: alignment, color swatches, size slider)
- Top bar: editable site name, autosave 'Saved' indicator, Preview (eye) and a prominent Publish button
- Empty-canvas state: a friendly 'Add your first block' prompt with the palette pulsing
- Selected block shows a subtle accent outline with drag handle and delete affordances
- A theme panel toggle in the right rail: font picker, accent color swatches, background (solid/gradient/image)

### 4. Site dashboard
- Header with 'New site' button and a plan badge (Free/Pro)
- Grid of site cards: a thumbnail, site name, subdomain pill, status badge (published green / draft gray), pageview count, and a '...' menu (Edit, Duplicate, Settings, Unpublish)
- Empty state for users with no sites: an illustration and a 'Create your first site' CTA

### 5. Site settings panel
- Tabbed or sectioned layout: Subdomain (with .pagedrop.app suffix and availability check), Custom domain (pro, locked state with an upgrade nudge), SEO (title, description, og:image dropzone), Password protection toggle
- A danger zone at the bottom (delete site) with a confirm dialog

### 6. Upgrade modal
- Triggered by a locked pro feature: a clean modal with the Pro plan benefits, price, and a 'Upgrade to Pro' button

Make every screen fully responsive. On mobile: the editor collapses to a single canvas with the block palette in a bottom sheet and the settings in a slide-over. Use realistic placeholder content - real-sounding names, a musician profile, an event page, varied accent colors per template.

Build a no-code one-page website builder app (Carrd model) called PageDrop.

## Entities
- Site: name, subdomain (text, unique), customDomain (text), status (draft/published), blocks (long text / JSON), theme (JSON: font, accentColor, background), seo (JSON: title, description, ogImage), isPasswordProtected (boolean), password (text), owner (user reference)
- FormSubmission: site (reference), data (JSON), createdAt (date)
- Pageview: site (reference), day (date), count (number)
- Template: name, category (profile/linkbio/event/portfolio/coming-soon), blocks (JSON), thumbnail (image)

## Roles & permissions
- Any signed-in user can create sites; they own and can only edit their own sites
- Plan is a field on the user (free/pro); free users are limited, pro users unlock custom domains and forms
- Admin role: view all sites and a revenue dashboard (count of pro users, MRR estimate)

## Pages
1. Public landing: product pitch, pricing (Free / Pro), Start building CTA
2. Template gallery: browse templates by category, 'Use this template' creates a new site from its blocks
3. Editor: pick/edit blocks on a single canvas with a live preview and a desktop/mobile toggle, then Publish
4. Dashboard: list the user's sites with status, edit/duplicate/unpublish
5. Site settings: subdomain, custom domain (pro), SEO meta, password protection
6. Published page: renders a site's blocks JSON publicly at its subdomain
7. Admin dashboard: all sites, pro-user count, simple revenue chart

## Rules
- Subdomain must be unique and lowercase; block publish if taken
- Free plan: max 3 sites and a 'Made with PageDrop' footer badge that can't be removed; Pro plan: unlimited sites, no badge, custom domains and forms enabled
- A site can only be viewed publicly when status is published
- Form blocks create a FormSubmission record on submit (pro feature)

## Look & feel
Minimal and calm: white background, indigo (#5B5BD6) primary buttons, rounded cards, clean sans-serif typography, lots of whitespace. The editor canvas should match the published page. Mobile responsive throughout.

Seed with 6 templates across the categories, 2 example users (one free, one pro) and 3 published demo sites so the gallery and dashboard have content.