Vibe Coding Template · React + Tailwind · Claude Code, Cursor, Lovable
Local Business Website Template
A production-ready local business website template for Lovable, Bolt.new, and Replit. Build a premium salon, studio, restaurant, or service business website with an immersive homepage hero, services and pricing page, team profiles, photo gallery, booking request form, reviews page, brand story, and FAQ. Ships as a single copy-paste multi-file code optimised for Lovable, Claude Code, Cursor, Codex, Replit, and Google Stitch.
Preview (main screen)
Copy the full multi-file code. Files are separated by // === filename === headers so Cursor and Claude Code split them automatically. Next.js 14+ App Router, Tailwind CSS v3+, Switzer font.
Vibe code the whole app with a prompt
Paste the prompt into your AI coding tool and it builds the entire Local Business Website Template in a single conversation. Each version is written specifically for that tool.
Build me a complete premium local business website called Maison, a wellness and beauty studio. It should have: a homepage with a sticky nav (wordmark, 5 links, blue Book now button), a full-bleed atmospheric hero with a warm taupe-to-cream gradient and a large headline "Where beauty meets intention.", 3 service category cards below it (Facial Treatments, Body Massage, Hair and Styling), a press logo strip, and 3 testimonials. Then these separate pages: a services page with category tabs (All, Facials, Body, Hair, Nails, Packages) and a 3-column service card grid with pricing, plus a featured package card; a team page with a 4-column grid of practitioner cards (avatar, name, specialty, bio, rating, book link); a gallery page with a masonry 3-column grid and filter bar; a booking page with a contact column on the left (map, address, hours) and a form on the right (name, email, phone, service, date, time, notes, submit in blue); a reviews page with a 4.9 star rating header, 3 platform badges, and a masonry grid of review cards; an about page with a founder portrait hero, founding story, 3 value pillar cards, a pull-quote "Beauty should feel like a ritual, not a routine.", a timeline, and a team photo; and a FAQ page with 4 topic sections in an accordion with a quick links sidebar. Design must be minimal and premium: white background, black text, small Apple-style font sizes, blue only on the primary Book CTA, rich warm gradients for all image placeholders.
How to use this Local Business Website Template as a prompt
- Paste the prompt into Lovable, Claude Code, or Cursor to build a complete Next.js local business website with all 8 pages wired together and a shared sticky navigation.
- Best for premium salons, wellness studios, boutique restaurants, personal trainers, physiotherapists, and any service business that competes on quality rather than price.
- Ask Claude Code or Cursor to wire the booking form to Calendly, Acuity Scheduling, Fresha, or a custom Supabase bookings table, and swap the brand colours and business name in a single pass.
How to use this Local Business Website Template as code
- Copy the full multi-file code and paste it into a fresh Next.js 14+ project. Cursor and Claude Code split the file automatically using the // === filename === headers.
- Built on Next.js App Router + Tailwind CSS v3. Rich gradient backgrounds replace photography placeholders until real images are supplied. No motion library or image assets required.
- Compatible with any booking platform (Fresha, Acuity, Calendly, custom Supabase) for the booking form, and with Google Maps Embed, Mapbox, or a static map image for the contact map.
Sections inside the Local Business Website Template
Each section is its own page with a live preview, section-only code, and vibe coding prompts for Claude Code, Cursor, Codex, Lovable, Replit, and Google Stitch.
Homepage Hero Section
Local business website homepage hero for Lovable and Claude Code: atmospheric full-bleed gradient, large headline, service category cards, press strip, and testimonials.
Services and Pricing Page
Local business services and pricing page for Lovable and Claude Code: category tabs, 3-column service card grid with pricing, and a featured package card.
Team and Practitioners Page
Local business team page for Lovable and Claude Code: 4-column practitioner grid with gradient avatars, specialty filter chips, bio, rating, and book link.
Photo Gallery Page
Local business gallery page for Lovable and Claude Code: masonry 3-column grid with gradient placeholders, category filter bar, and hover lightbox hint.
Booking and Contact Page
Local business booking page for Lovable and Claude Code: two-column layout with contact details and a booking request form, plus why-book-with-us cards.
Reviews and Social Proof Page
Local business reviews page for Lovable and Claude Code: 4.9-star rating header, platform badges, masonry review grid, and write-a-review button.
Brand Story Page
Local business about page for Lovable and Claude Code: full-bleed founder hero, founding story, value pillar cards, pull-quote, and milestone timeline.
FAQ Page
Local business FAQ page for Lovable and Claude Code: sectioned accordion with 4 topic groups, a quick links sidebar, and a contact CTA at the bottom.
Vibe coding guides
FAQ
What is the Local Business Website template?+
It is a complete multi-page website template for premium salons, wellness studios, boutique restaurants, and service businesses. It includes 8 pages: homepage with hero and testimonials, services and pricing, team, photo gallery, booking form, reviews, brand story, and FAQ. Ships as a single copy-paste multi-file code block for Lovable, Claude Code, Cursor, Codex, Replit, and Google Stitch.
Which businesses is this template designed for?+
Any local service business that competes on quality and experience. The template was designed around Maison, a premium wellness and beauty studio, but works equally well for boutique restaurants, high-end gyms, physiotherapy clinics, personal trainers, hair salons, nail bars, spas, and any business where trust and atmosphere drive bookings.
How do I add a real booking system to this template?+
The booking page includes a request form that submits to a /api/book route. You can wire it to Supabase to store requests, or replace the form column with a Fresha widget, Calendly inline embed, or Acuity Scheduling embed. Ask Claude Code or Cursor via the prompt on the Booking page to add your preferred integration.
Do I need photography to use this template?+
No. All image placeholders are CSS gradients that evoke the atmosphere of the business (warm amber for skincare, sage for wellness, lavender for hair). The site ships fully designed and visually complete without a single image file. Add real photography when you have it by replacing gradient divs with Next.js Image components.
Can I adapt this template for a restaurant or gym?+
Yes. The structure (hero, services, team, gallery, book, reviews, about, faq) is universal for any service business. For a restaurant: rename Services to Menu, Team to Our Chefs, Book to Reserve, and adapt the category tabs. For a gym: rename Services to Classes, Team to Trainers, and Book to Join. The design system adapts to any brand colour with a single tailwind.config.ts change.
How do I change the business name and colours from Maison to my own brand?+
Do a global find-and-replace for "Maison" with your business name. Change the hero gradient values in the Parent component from the taupe-to-cream palette to your brand colours. Change #2B65F6 to your brand blue in tailwind.config.ts. All primary CTAs, links, and highlights update automatically.
What tech stack does this template use?+
Next.js 14+ App Router plus Tailwind CSS v3 plus font-sans, written in TypeScript. No image dependencies, no motion libraries, no charting libraries. Compatible with Supabase for booking requests and data storage, Next.js Image for photos when added, and Vercel for hosting.
Which AI coding tool is best for building a local business website with this template?+
Lovable for a working visual preview in minutes without local setup. Claude Code for a full multi-file drop into an existing repo with type checks. Cursor for pair-programming the build page by page. Replit for a live URL to share with a client immediately. Codex for autonomous multi-file generation. Google Stitch for designing each page visually before exporting the React and Tailwind code.