How to Clone Squarespace

Create a full-stack Squarespace-style website builder called Sitely using Next.js (App Router), TypeScript, Tailwind CSS, Prisma and SQLite (swappable to Postgres). Template-first and section-based, NOT a free-form drag canvas.

## What to build
Users pick a template, customize pre-styled sections and a global theme, then publish to a hosted subdomain. Monetized by a tiered subscription; higher tiers add a store and custom domain.

## Key screens
- Template gallery onboarding: 6 templates with previews
- Dashboard: the user's sites (thumbnail, name, Live/Draft badge), New Site button
- Editor: center live preview; left = ordered list of the page's sections (add/reorder/delete) and a content form for the selected section; a Design tab for global theme tokens (font pairing, color palette, button radius)
- Pages panel: add/rename pages, build the nav
- Store admin (gated): product CRUD that feeds a Store section
- Billing: Personal / Business / Commerce with Stripe test checkout

## The editor model
- A page is an ordered array of sections; each section = { type, content }
- content is a typed bag of fields, e.g. Hero = { heading, subheading, image, ctaText, ctaHref }
- A site has a theme token object (fontHeading, fontBody, colorBg, colorText, colorAccent, buttonRadius)
- Apply the theme tokens globally via CSS variables
- One Section renderer switches on type; changing theme tokens restyles all sections live
- Adding a section inserts a default-content instance of that section type

## Schema (Prisma)
User (id, name, email, plan), Site (id, ownerId, name, subdomain unique, theme Json, status), Page (id, siteId, name, slug, sections Json, order), Product (id, siteId, name, priceCents, imageUrl), PublishedSite (id, siteId, subdomain unique, snapshot Json, publishedAt)

## Logic that must work
- Subdomain uniqueness enforced at the DB level
- Store and custom-domain features gated by plan (check in server actions)
- Publish writes a snapshot (pages + theme) to PublishedSite
- The public route /sites/[subdomain] renders the snapshot, not the draft
- Theme changes apply globally via CSS variables, not per-element overrides

## Style
The product should look high-end: generous whitespace, a tasteful serif+sans pairing on marketing pages, near-black primary (#1A1A1A), one refined accent, big imagery in the gallery. Editor chrome stays light and quiet. Fully responsive.

Seed with 6 templates and 2 fully populated example sites (photographer, restaurant) plus a demo user. Mock Stripe with a successful fake checkout if test keys aren't set.

You are building a production-quality template-first website builder (Squarespace-style). Constrained editing is a feature, not a limitation. Work step by step and run 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
- Stripe for both the builder subscription and users' store checkout; Zod for validation
- Publishing: snapshot to JSONB, render via a public dynamic route (later: static export to Cloudflare Pages)

## Core architecture (decide this first)
- Section registry: each section type has a schema (its content fields) and a React renderer
- Templates are just an ordered list of section instances with default content
- Theme = a token object (typography pair, color palette, button style)
- Apply the theme with CSS custom properties at the site root so one change restyles everything
- No per-element style overrides in the MVP - that constraint guarantees good-looking output
- A page document = { sections: Section[] }; a Section = { id, type, content }. Store pages and theme as JSONB.
- The editor renders the real section components in a preview pane; the inspector edits the selected section's typed content fields (driven by its schema).

## Data model
users, sites (theme JSONB, subdomain unique), pages (sections JSONB), products, orders, published_sites (snapshot JSONB), subscriptions. Index sites(owner_id), published_sites(subdomain).

## Implementation order
1. Scaffold + auth + dashboard + site CRUD; define the Section registry with 6–8 section types and their schemas
2. Template gallery: 6 templates as seed data (ordered section instances); 'Start with template' clones one into a new site
3. Editor: section list (add from registry, reorder via dnd-kit, delete) + a schema-driven content form for the selected section
4. Global theme panel: font pairings, color palettes, button style - applied as CSS variables across the live preview
5. Pages + navigation builder; per-page SEO fields
6. Publish: snapshot pages + theme to published_sites; render at /sites/[subdomain] with correct metadata and JSON-LD
7. Commerce (gated by plan): product CRUD, a Store section, Stripe Checkout, order list
8. Custom domains (gated): connect a domain, provision SSL, map it

## Quality bar
- Schema-driven forms: adding a new section type should require only a schema + a renderer, nothing else
- Published pages are server-rendered, semantic and fast - Lighthouse 90+ on a seeded sample
- Plan gating enforced server-side, never just hidden in the UI
- Currency in integer cents; Intl.NumberFormat for display; Zod on every mutation

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

Design the complete UI for a Squarespace-style website builder called Sitely. React + Tailwind, shadcn/ui, lucide-react icons. The whole product must feel premium and editorial: generous whitespace, a tasteful serif heading + clean sans body pairing, near-black primary (#1A1A1A), one refined accent (a warm sand or sage), and large, beautiful imagery.

## Screens to generate

### 1. Template gallery (onboarding)
- A full-bleed editorial header ('Start with a template you'll be proud of')
- A responsive grid of 6 template cards (Photographer, Restaurant, Agency, Personal, Store, Blog): each a tall, magazine-style thumbnail with the template name, a one-line description, and a 'Start' button on hover

### 2. Dashboard
- Quiet top bar with logo and avatar menu
- The user's sites as large cards: live thumbnail, site name, a Live/Draft badge, plan label, and a hover menu (edit, settings, duplicate)
- A prominent 'Create new site' card with a plus

### 3. The editor (make it detailed but calm)
- A slim left rail with two tabs: 'Edit' and 'Design'
- Edit tab: an ordered list of the current page's sections (Header, Hero, Gallery, About, Contact)
- Each section row is draggable with a drag handle, an eye toggle and a delete icon
- An '+ Add section' button opens a menu of section types, each with a little thumbnail
- When a section is selected, show its content form below it
- Example: Hero form has heading, subheading, image picker and button text
- Design tab: a font-pairing chooser showing 3 elegant pairings as type specimens
- Design tab: a color-palette picker with swatch rows
- Design tab: a button-style toggle (square / rounded / pill)
- Center: a large, true-to-life live preview of the site
- The preview shows a photographer template: full-bleed hero image, an elegant nav, a gallery grid
- Top bar: device toggle (desktop/tablet/mobile), a Preview link, and a refined dark Publish button

### 4. Publish modal
- A subdomain input with a '.sitely.site' suffix and a live availability check
- A note that custom domains need the Business plan
- A success state showing the live URL with a copy button

### 5. Plans page
- Three pricing cards (Personal / Business / Commerce) in an editorial layout with feature checklists and a 'Most popular' ribbon on Business

Use real, attractive placeholder content (a working photographer site in the preview). Make the dashboard, gallery, modals and plans fully responsive; the editor is desktop-first. Include a tasteful empty state for a brand-new blank site.

Build an all-in-one, template-first website builder app called Sitely, modeled on Squarespace.

## Entities
- Site: name, subdomain (text, unique), theme (JSON: fontHeading, fontBody, colors, buttonStyle), status (draft/live), owner (user reference), plan
- Page: site reference, name, slug, sections (JSON array of { type, content }), order
- Product: site reference, name, priceCents (number), imageUrl
- Template: name, category, sections (JSON: the default ordered sections), thumbnailUrl
- Subscription: user reference, plan (personal/business/commerce), status

## Roles & permissions
- Any signed-in user can create sites and becomes the owner
- Owners edit and publish only their own sites
- Store features (products) and custom domains require the Business/Commerce plan
- Admin role: view all sites and users, manage templates, see subscription revenue

## Pages
1. Template gallery: 6 templates with previews; 'Start with this' creates a new site from the template's sections
2. Dashboard: the user's sites (thumbnail, name, Live/Draft badge, plan)
3. Editor: center live preview; left = ordered section list (add/reorder/delete) + a content form for the selected section; a Design tab for global theme (font pairing, color palette, button style)
4. Pages panel: add/rename pages and build the nav
5. Store admin (gated): product CRUD feeding a Store section
6. Billing: Personal/Business/Commerce plans
7. Admin dashboard: all sites, template management, subscription count

## Rules
- Subdomain must be unique across all sites
- Users add and edit pre-styled sections; they do NOT freely drag arbitrary elements
- Changing the global theme restyles every section at once
- Store and custom domain only available on Business/Commerce plans
- Publishing serves the current pages + theme at the subdomain

## Look & feel
Premium and editorial: lots of whitespace, an elegant serif+sans pairing, near-black primary (#1A1A1A), one refined accent, big imagery in the gallery. Editor chrome stays light so content is the focus. Responsive throughout.

Seed with 6 templates and 2 fully populated example sites (photographer and restaurant) plus a demo user so the gallery, dashboard and editor all have real content.