AI Prompts & Starter Kits

Build a complete, deployable full-stack SaaS web application called GroomSite — an AI-powered micro-site builder exclusively tailored for local personal service businesses such as independent barbershops, pet grooming studios, nail salons, massage therapists, and tattoo artists.
Core Value Proposition (display prominently on landing):
"Create a stunning, bookable website for your barbershop or grooming studio in under 5 minutes. Just describe your business — AI does the rest. Professional design, services/prices list, photo gallery, and integrated online booking with payments & reminders. No coding, no hassle."
Target Users & Personas:

Primary: Solo/independent business owners (often 35–55 years old, limited tech skills, busy with clients, currently using Instagram/Facebook or manual phone bookings).
Secondary: Their clients (booking appointments on the generated sites).

Key User Stories:

As an owner, I can sign up in <30 seconds and immediately start creating my first site.
As an owner, I describe my business in a simple form/prompt, and AI generates a fully customized, mobile-responsive site with my services, prices, photos, and booking calendar.
As a client, I visit the generated site and can easily view services/prices, see photos, and book an appointment 24/7 with payment/deposit.
As an owner on premium, I get a custom domain, remove branding, and access advanced features like analytics and multi-staff calendars.

Pages & Exact Flows (build in this priority order):

Marketing Landing Page (public)
Hero: Big headline + subheadline, demo GIF/video placeholder, primary CTA "Create Your Site Free".
Examples section: Show 4–6 generated site previews (use styles like the reference images below).
How it works (3 steps).
Pricing tiers.
Testimonials placeholder.
Footer.

Auth Pages
Sign up / Login: Email + password, Google OAuth. Powered by Supabase Auth or Clerk.

Owner Dashboard
Sidebar navigation: My Sites, Billing, Settings.
Main area: List of user's sites (cards with preview thumbnail, name, subdomain, edit/publish buttons).
Prominent "Create New Site" button.

Site Creation Flow (multi-step wizard or single-page form)
Step 1: Business basics — Name, Type (dropdown: Barbershop / Pet Grooming / Nail Salon / Massage / Other), Location, Phone, Hours.
Step 2: Services — Add services with name, price, duration, description (e.g., "Men's Fade – $35 – 45 min").
Step 3: Photos — Upload 4–10 images or let AI suggest placeholders based on business type.
Step 4: Style & Prompt — Textarea for free-form description ("Modern urban barbershop with vintage vibe, black and gold colors, focus on fades and beards") + style presets (Modern, Classic, Vibrant, Minimal).
Final Step: AI Generation — Show loading spinner, then live preview of generated site. Allow "Regenerate" or minor edits (re-run AI on sections).
Publish button → deploys to subdomain (e.g., mybarber.groomsite.app).

Generated Micro-Site (public-facing, one-page scrollable default)
Sections (in order):
– Hero: Business name, tagline, hero photo, "Book Now" CTA.
– Services: Grid/cards with name, price, duration, description, book button.
– Gallery: Masonry or carousel of uploaded photos.
– About: AI-generated bio + owner photo.
– Booking: Embedded clean calendar (availability slots, service selection, client info form, Stripe payment/deposit).
– Contact/Map: Address, phone, Google Maps embed, hours.
– Footer: Powered by GroomSite (free tier only).
Fully mobile-responsive, fast-loading, basic SEO (title, meta from business info).


Booking Integration Details

Use Cal.com open-source embed or simple Supabase + Stripe-based calendar.
Features: Select service → see available slots → fill name/email/phone → optional deposit/payment → confirmation email/SMS reminder (24h before).
Reduce no-shows with optional 20–50% deposit (premium feature).

Monetization (Freemium)

Free: Subdomain, GroomSite branding, basic booking (limited appointments/month).
Premium ($12/mo): Custom domain, remove branding, unlimited bookings, analytics, SMS reminders, multi-staff.
Pro ($25/mo): Everything + priority AI, custom themes, export data.
Implement Stripe Billing in dashboard.

Tech Stack (use these for best results)

Frontend: Next.js or React + Tailwind CSS + Shadcn/UI components (clean, modern).
Backend/DB/Auth/Storage: Supabase (covers 90% — auth, PostgreSQL rows for sites/bookings, storage for photos).
AI Generation: OpenAI GPT-4o or Groq/Llama3 via API for text, layout suggestions, copy.
Payments: Stripe Checkout + Billing.
Hosting: Vercel (auto-deploy).
Emails/SMS: Resend or Postmark for email; Twilio for SMS reminders.

Design Guidelines & Visual References

Overall aesthetic: Clean, professional, trustworthy — high contrast, ample whitespace.
Color schemes: Adapt to niche — Barbershops: blacks, grays, golds; Pet Grooming: soft blues/greens, playful accents.
Typography: Sans-serif (Inter or Poppins), bold headings.
Icons: Simple line icons for services/booking.


Final Instructions for the Generator:
Build a fully functional, polished MVP starting with the landing page → auth → dashboard → site creation flow → generated site preview. Make everything deployable and testable. Prioritize speed, mobile responsiveness, and niche-specific polish (barber/grooming vibes). Use realistic placeholder data for demos.