How to Clone Wix

Create a full-stack Wix-style freemium website builder called Pixapress using Next.js (App Router), TypeScript, Tailwind CSS, Prisma and SQLite (swappable to Postgres). Free tier with an upgrade funnel; absolute-positioning editor; AI starter-site generator.

## What to build
Users build a site for free on a branded subdomain (with a small banner) and upgrade to remove the banner, connect a custom domain and unlock booking/store. Free is the funnel; premium plans are the revenue.

## Key screens
- AI onboarding: a short questionnaire (business type, name, vibe) that generates a starter site
- Template gallery: templates by category
- Editor: center absolute-positioning canvas (drag-move + resize handles + snap guides); left 'Add element' panel; right properties panel for the selected element; top bar with device toggle, undo/redo, Preview, Publish, Upgrade
- Dashboard: user's sites with Free/Premium badges
- Upgrade modal: Free / Combo / Business plans with Stripe test checkout
- Booking settings (gated): services CRUD feeding a Booking section

## The editor model
- A page is an array of elements, each { id, type, x, y, width, height, props }
- Render elements absolutely positioned in a canvas container
- Drag updates x/y; corner handles update width/height
- Show snap guides aligning to other elements and the grid
- Selecting an element loads its props into the right panel; edits patch the element and re-render
- Undo/redo via a snapshot history stack

## Schema (Prisma)
User (id, name, email, plan), Site (id, ownerId, name, subdomain unique, customDomain, status, hasBanner), Page (id, siteId, name, elements Json), Service (id, siteId, name, durationMin, priceCents), PublishedSite (id, siteId, subdomain unique, snapshot Json, publishedAt)

## Logic that must work
- Free sites keep the banner; removing it and connecting a custom domain require a premium plan (gate in server actions)
- Booking/store features require the Business plan
- Subdomain uniqueness enforced at the DB level
- Publish snapshots pages to PublishedSite; the public route /sites/[subdomain] renders the snapshot (banner included for free plans)
- The AI generator calls an LLM to choose sections and write copy from the questionnaire, returning a starting elements array

## Style
Mass-market and energetic: bright primary (#0C6EFD), rounded buttons, big friendly onboarding, a colorful template gallery. Editor chrome clean and modern with visible drag/resize handles and snap guides. Fully responsive for marketing/dashboard.

Seed with 4 category templates and 2 example sites (salon, food truck) plus a demo user. If no LLM key is configured, fall back to a deterministic generator that picks sections by business type. Mock Stripe if test keys aren't set.

You are building a production-quality freemium website builder (Wix-style): an absolute-positioning editor, an AI starter generator, and a free-to-premium funnel. Work step by step and run the app after each step.

## Stack
- Next.js 14 App Router, TypeScript, Tailwind CSS, shadcn/ui for app chrome
- Zustand for editor state (selection, drag, resize, snapping, history)
- PostgreSQL via Prisma; Supabase for auth (email + Google) and asset storage
- An LLM (Claude API) for the AI site generator - treat it as a real dependency with cost and latency
- Stripe for premium subscriptions and store/booking payments; Zod for validation

## Core architecture (decide this first)
- Element model: each page is Element[] where Element = { id, type, frame: { x, y, w, h }, props }. Absolute layout in a fixed-width canvas with a responsive scaling strategy for mobile (don't pretend it's flow layout).
- A geometry/snapping module computes alignment guides and snap points; keep it pure and testable.
- One Element renderer switches on type, used by the editor canvas and the publish step.
- AI generator: questionnaire -> structured LLM call -> validated (Zod) site spec -> Element[] seeded with copy. Always validate and have a deterministic fallback.
- Plan gating is server-side: banner removal, custom domains, booking and store are entitlements, not UI toggles.

## Data model
users, sites (subdomain unique, customDomain, hasBanner, plan), pages (elements JSONB), services, products, orders, published_sites (snapshot JSONB), subscriptions. Index sites(owner_id), published_sites(subdomain).

## Implementation order
1. Scaffold + auth + dashboard + site CRUD
2. Absolute-positioning canvas: render Element[], drag to move, corner-handle resize, selection
3. Snapping + alignment guides; left 'Add element' panel; right schema-driven properties panel
4. Undo/redo history; debounced autosave via server action
5. AI generator: questionnaire -> LLM -> validated site spec -> new site; deterministic fallback
6. Publish: snapshot to published_sites; render at /sites/[subdomain] with the free banner when on the free plan; correct metadata
7. Premium funnel: Stripe subscription; entitlements remove banner, allow custom domain
8. Booking (gated): services CRUD + a Booking element with availability and Stripe payment

## Quality bar
- Snapping must feel good (sub-pixel jitter-free) and the canvas stay smooth with 60+ elements
- AI output is always schema-validated before it touches the DB; never render unvalidated LLM JSON
- Published free sites correctly include the banner; premium sites correctly omit it - covered by a test
- Currency in integer cents; Zod on every mutation; loading/error states on every async route

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

Design the complete UI for a Wix-style freemium website builder called Pixapress. React + Tailwind, shadcn/ui, lucide-react icons. The product is mass-market and energetic: a bright confident primary (#0C6EFD), rounded buttons, big friendly type, and a colorful, welcoming feel.

## Screens to generate

### 1. AI onboarding flow
- A clean centered, stepped wizard
- Step 1 'What kind of site?': a grid of big category tiles (Restaurant, Fitness, Portfolio, Store, Salon, Blog)
- Step 2 'What's it called?': a single large input
- Step 3 'Pick a vibe': Bold / Calm / Playful / Elegant as visual swatches
- A 'Generating your site...' state with a friendly loader

### 2. Template gallery
- Category filter chips along the top
- A colorful responsive grid of template cards (thumbnail, name, 'Edit' button on hover)

### 3. The editor (make it detailed)
- Top bar: logo, site name, a device toggle (desktop/tablet/mobile), undo/redo, a 'Preview' link, a prominent 'Publish' button, and a gold 'Upgrade' pill
- Left: a vertical 'Add' panel - a column of element buttons with icons
- Element buttons: Text, Image, Button, Box/Shape, Gallery, Video, Strip/Section
- Center: the canvas - a sample small-business homepage with freely positioned elements
- Show the SELECTED element with a blue bounding box and eight resize handles
- Render pink snap/alignment guide lines extending to nearby elements
- Right: a properties panel for the selected element
- Properties: position (X/Y) and size (W/H) at the top
- Then type-specific controls (text + font + color for Text; image picker + fit for Image; label + link + style for Button)

### 4. Dashboard
- The user's sites as cards (thumbnail, name, a Free or Premium badge) plus a big 'Create new site' tile

### 5. Upgrade modal
- Three plan cards (Free / Combo / Business) with feature checklists and a 'Most popular' tag on Combo
- A monthly/annual billing toggle with an annual-discount badge
- Clear callouts for what upgrading unlocks: remove banner, connect domain, accept bookings

Put realistic placeholder content in the canvas: a salon homepage with a hero and a 'Book now' button, a services strip, and an image gallery. Show the free-tier 'Made with Pixapress' banner pinned to the bottom of the preview. Make onboarding, gallery, dashboard and modal fully responsive; the editor is desktop-first.

Build a freemium drag-and-drop website builder app called Pixapress, modeled on Wix.

## Entities
- Site: name, subdomain (text, unique), customDomain (text, optional), status (draft/live), hasBanner (boolean), owner (user reference), plan
- Page: site reference, name, elements (JSON array: each element has type, x, y, width, height, and content/style props)
- Service: site reference, name, durationMin (number), priceCents (number) - for the booking feature
- Template: name, category, elements (JSON default layout), thumbnailUrl
- Subscription: user reference, plan (free/combo/business), status

## Roles & permissions
- Any signed-in user can create sites and becomes the owner
- Owners edit and publish only their own sites
- Custom domain and banner removal require a premium (Combo/Business) plan
- Booking and store features require the Business plan
- Admin role: view all sites and users, manage templates, see subscription revenue

## Pages
1. AI onboarding: a short questionnaire (business type, name, vibe) that generates a starter site with relevant sections and copy
2. Template gallery: templates grouped by category
3. Editor: center free-positioning canvas (drag to move, handles to resize, snap guides); left 'Add element' panel; right properties panel for the selected element; top bar with device toggle, undo/redo, Preview, Publish, Upgrade
4. Dashboard: the user's sites (Free/Premium badge)
5. Upgrade: Free / Combo / Business plans and what each unlocks
6. Booking settings (gated): services CRUD feeding a Booking section
7. Admin dashboard: all sites, template management, subscription count

## Rules
- Free sites keep a 'Made with Pixapress' banner and a branded subdomain
- Connecting a custom domain and removing the banner require a premium plan
- Booking/store features require the Business plan
- Elements are absolutely positioned (x/y/width/height); the user can place them anywhere with snapping
- Subdomain must be unique; the public site shows the last published version

## Look & feel
Mass-market and energetic: bright primary (#0C6EFD), rounded buttons, big friendly onboarding steps, a colorful template gallery. The editor chrome is clean and modern with obvious drag/resize handles and snap guides. Responsive for onboarding, gallery and dashboard.

Seed with 4 category templates and 2 example sites (a salon and a food truck) plus a demo user so the gallery, editor and dashboard all have content.