Become a better
builder
with Lovable

Build a complete SaaS dashboard web application for [YOUR PRODUCT NAME] — [ONE SENTENCE DESCRIPTION, e.g. "a project management tool for freelance designers"].

USER AUTHENTICATION:
- Sign up page with: email, password, confirm password, full name
- Log in page with: email + password
- Forgot password flow with email reset
- After login, redirect to main dashboard
- Use Supabase for auth (integrate directly)

MAIN DASHBOARD (after login):
Sidebar navigation with these sections:
- Dashboard (home icon)
- [YOUR MAIN FEATURE — e.g. "Projects"]
- [YOUR SECOND FEATURE — e.g. "Clients"]
- [YOUR THIRD FEATURE — e.g. "Invoices"]
- Settings
- Logout (bottom of sidebar)

TOP METRICS ROW (4 stat cards):
Card 1: [METRIC — e.g. "Active Projects"] — show number prominently + trend arrow
Card 2: [METRIC — e.g. "Total Clients"] — show number prominently + trend arrow
Card 3: [METRIC — e.g. "Monthly Revenue"] — show dollar amount + trend
Card 4: [METRIC — e.g. "Hours Logged This Week"] — show number + comparison to last week

MAIN CONTENT AREA:

Section 1: [PRIMARY LIST VIEW — e.g. "Recent Projects"]
- Table or card grid with columns: [PROJECT NAME], [CLIENT], [STATUS], [DUE DATE], [ACTIONS]
- Status pills: color-coded (e.g. green = Active, yellow = In Review, red = Overdue, gray = Completed)
- Sort by column headers
- Search bar to filter list
- "New [item]" button top right → opens a modal form

Section 2: [CHART OR GRAPH — e.g. "Revenue Over Time"]
- Line chart showing last 6 months
- Toggle between monthly/weekly view
- Use placeholder/mock data for initial build

SETTINGS PAGE:
- Profile section: name, email, avatar upload, save button
- Account section: change password, delete account
- Notifications section: toggle switches for email notifications

DESIGN SPECIFICATIONS:
- Color scheme: [PRIMARY — e.g. "#2D5016" dark green] + white sidebar + light gray content area background
- Typography: Inter or similar clean sans-serif
- Sidebar: white background, [PRIMARY COLOR] active state
- Cards: white, subtle box shadow, 8px border radius
- Tables: clean, alternating row shading, sortable headers
- Fully responsive (sidebar collapses to hamburger on mobile)

TECHNICAL:
- Built with React + Tailwind CSS
- Use Supabase for auth and database
- All forms should validate before submission
- Loading states on all async operations
- Empty states when no data exists (with a "Create your first [item]" CTA)

Build a mobile-first online booking page for [YOUR BUSINESS — e.g. "a freelance UX designer taking on new client projects"].

PAGE HEADER:
- Business name: [YOUR NAME / BRAND]
- Tagline: [ONE LINE — e.g. "Book a free 30-minute strategy session"]
- Profile image slot (circular, 80px)
- Short bio: [2 SENTENCES — e.g. "I help early-stage SaaS companies turn user research into design that converts. 5 years of experience, 40+ happy clients."]

SERVICE SELECTION (step 1):
Service cards the client can choose from:
- Service 1: [NAME — e.g. "Free Discovery Call"] | [DURATION — e.g. 30 min] | [PRICE — e.g. Free] | [DESCRIPTION — 1 sentence]
- Service 2: [NAME — e.g. "UX Audit"] | [DURATION — e.g. 2 hours] | [PRICE — e.g. $350] | [DESCRIPTION — 1 sentence]
- Service 3: [NAME — e.g. "Full Project Engagement"] | [DURATION — e.g. Custom] | [PRICE — e.g. From $3,500] | [DESCRIPTION — 1 sentence]

AVAILABILITY DISPLAY (step 2 — after service selection):
- Weekly calendar view showing available time slots
- Available times shown as clickable buttons (e.g. "Mon 9:00am", "Mon 2:00pm")
- Gray out unavailable times
- Show timezone selector (default to [YOUR TIMEZONE — e.g. EST])
- "Next week" / "Previous week" navigation
- Use placeholder availability: Mon–Fri, 9am–5pm, 30-min slots for calls, 2-hour blocks for audits

CLIENT INFORMATION FORM (step 3):
Fields required:
- Full name (required)
- Email address (required)
- Company name (optional)
- [CUSTOM QUESTION 1 — e.g. "What's the biggest design challenge you're facing right now?"] (text area, required)
- [CUSTOM QUESTION 2 — e.g. "Have you worked with a freelance designer before?"] (yes/no toggle)
- How did you hear about me? (dropdown: LinkedIn, Referral, Google, Twitter/X, Other)

CONFIRMATION PAGE (after booking):
- "You're confirmed!" heading
- Summary: service name, date, time, with client's name
- What to expect next: [2–3 STEPS — e.g. "1. You'll receive a calendar invite in 2 minutes. 2. I'll send a brief questionnaire 24 hours before. 3. Join via the Zoom link in your invite."]
- "Add to Google Calendar" button
- "Add to Apple Calendar" button

DESIGN:
- Mobile-first (primary experience on phone)
- Clean, professional aesthetic
- Primary color: [YOUR BRAND COLOR]
- Progress indicator (1 → 2 → 3) at top of page
- Each step transitions smoothly to the next
- Form validation with clear error messages

Build a client portal web application for [YOUR BUSINESS TYPE — e.g. "a freelance web design agency"].

CLIENT LOGIN:
- Simple login page: email + password
- No self-registration (you create accounts manually in admin)
- After login, client sees only their own project — not others

CLIENT DASHBOARD (main view after login):
Header:
- "Welcome back, [CLIENT FIRST NAME]"
- Project name prominently displayed
- Overall project status badge: [DISCOVERY / IN PROGRESS / IN REVIEW / COMPLETE]

PROJECT TIMELINE:
Visual progress bar showing project phases:
- Phase 1: [e.g. Discovery & Strategy]
- Phase 2: [e.g. Design & Wireframes]
- Phase 3: [e.g. Development]
- Phase 4: [e.g. Review & Revisions]
- Phase 5: [e.g. Launch]
Current phase highlighted. Completed phases checked. Future phases greyed.

DELIVERABLES SECTION:
A list/table of project deliverables with:
- Deliverable name: [e.g. "Brand Style Guide", "Homepage Design", "Mobile Prototype"]
- Status: Not Started / In Progress / Ready for Review / Approved
- Due date
- File/link attachment (if status is "Ready for Review")
- Action button: "Approve" or "Request Changes"

When client clicks "Request Changes" → modal opens with:
- Text area: "What would you like changed?"
- Submit button sends an email notification to [YOUR EMAIL]

MESSAGES SECTION:
Simple threaded messaging between client and you:
- Timeline of messages with timestamps
- Reply box at bottom
- File attachment support
- New message notification badge

DOCUMENTS SECTION:
- List of shared documents: contracts, invoices, briefs
- Each row: document name, date uploaded, download button
- "Awaiting Signature" badge for documents that need client sign-off

ADMIN VIEW (separate login at /admin):
- See all clients and their project status at a glance
- Create new client account
- Upload deliverables and set status
- Send messages

DESIGN:
- Clean, professional — clients should feel confident and informed
- Primary color: [YOUR BRAND COLOR]
- Client view is minimal — only what they need to see
- Mobile-responsive
- All status changes trigger email notifications

Build a viral waitlist landing page with referral mechanics for [YOUR PRODUCT NAME] — [ONE SENTENCE DESCRIPTION].

PRE-LAUNCH HERO SECTION:
- Headline: "[YOUR HEADLINE — e.g. 'The Content Tool That Knows Your Brand']"
- Subheadline: "[YOUR SUBHEADLINE — e.g. 'Launching [MONTH YEAR]. Join 4,200 people waiting to get early access.']"
- Email capture input + CTA button: "[BUTTON TEXT — e.g. 'Join the Waitlist →']"
- Social proof counter (updates dynamically): "[X,XXX] people already on the list"
- Launch date countdown timer (days : hours : minutes : seconds until [YOUR LAUNCH DATE])

POST-SIGN-UP CONFIRMATION PAGE (shown immediately after email capture):
Header: "You're on the list! 🎉"
Position display: "You're #[POSITION] in line"

REFERRAL SECTION:
- Headline: "Move up the list — invite friends to skip the queue"
- Unique referral link (generated per user): [DOMAIN]/ref/[UNIQUE_CODE]
- Copy link button
- Share buttons: Twitter/X, LinkedIn, WhatsApp, Copy
- Referral count tracker: "You've referred [X] people"
- Referral benefit tier:
  * 1 referral → [REWARD — e.g. "Early access 1 week before launch"]
  * 3 referrals → [REWARD — e.g. "3 months free on launch"]
  * 5 referrals → [REWARD — e.g. "Founding member pricing — locked for life"]
- Progress bar showing how close they are to next tier

QUEUE POSITION LOGIC:
- First to sign up = position 1
- Referring someone moves you up 5 positions per referral
- Display current position dynamically after sign-up

SOCIAL PROOF SECTION (on main landing page):
- 3 avatars + quote format:
  "[QUOTE — e.g. 'Finally, an AI tool that doesn't need babysitting.']" — [NAME, e.g. Sarah K., Marketing Lead]
- Problem stats: 3 data points about the problem your product solves

PRODUCT TEASER SECTION:
- "What you're waiting for" section
- 3 feature teaser cards (blurred background image with icon and title visible)
- Each card: feature name + one-sentence benefit — no full details (creates mystery)

DESIGN:
- Dark mode primary (dark navy or charcoal background)
- Primary accent: [YOUR BRAND COLOR]
- Countdown timer: large and prominent, styled like a dashboard widget
- Position number: large, bold, glowable — make it feel exciting
- Mobile-optimized first
- Smooth animation on the position counter when it updates

TECHNICAL:
- Store emails and referral codes in Supabase
- Unique referral code generated on sign-up (6-character alphanumeric)
- Track referral attribution: when someone signs up via referral link, credit the referrer
- Email confirmation sent on sign-up with their referral link