Quiet Pines Retreats

A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.

Start from this templateRead the build prompt

Typefaces

Mukta is an airy, open humanist sans with a clean light weight, which gives the serene phone-off retreat its quiet headlines.

• MuktaHeadings: hero 60px at 300, -1.5px; section titles 32px light
• MuktaBody: body 16px, 12px uppercase nav and eyebrows

Who it is for

• Glamping and off-grid campsite owners
• Eco-retreat operators
• Outdoor travelers seeking digital detox
• Small hospitality brands avoiding listing fees

Layout

1. Transparent header: triangle-tent logo + light wordmark left, tracked uppercase links (Locations, About, Contact) and outlined booking pill right; becomes white on scroll
2. Full-bleed hero slideshow of forest/camp scenes with thin-weight two-line headline bottom-left, white booking pill and segmented progress bars
3. Fanned stacked featured location cards (rating, region, amenity tags, $/night, details link)
4. Experience section: stacked feature rows with round icon chips (off-grid, digital detox, natural water, scenic views)
5. Video-on-hover experience cards
6. Closing booking CTA
7. Locations catalog sortable by price/rating; location detail with parallax banner, gallery, review carousel and sticky booking sidebar
8. Three-step booking flow; auth; admin dashboard; contact page

Palette

serene, minimal, natural, restorative, premium. It feels like switching your phone off.

• background#fcfcfc
• text#333333
• primary sage#a7beb2
• accent mint wash#f0f5f2
• surface#f5f5f5
• border#ebebeb
• hero text#ffffff
• primary strong (text, buttons)#4f6b5c
• secondary text#5c5c5c
• input border#8a8a8a

Every checked pair, measured again

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour on the fill it is read on. Marked tokens are solved from the palette, because no swatch held that role at 4.5:1.

• background
• card
• muted
• primary *
• secondary
• accent
• destructive *

Type scale

Display

Mukta Light 300, 60px hero with -1.5px tracking; 32px light section titles

Body

Mukta 16px, weight 400, line-height 1.6, #5c5c5c secondary text; 12px uppercase nav and eyebrows at weight 500, 0.15em tracking

A single airy sans, light weights only at 32px and above, for a quiet, premium outdoor feel.

Spacing and imagery

Wide 1184px container, very generous whitespace, stacked full-width rows with 8px radius, pill buttons, thin progress bars.

Golden-hour forest and campsite photography full-bleed with darkened overlay; short nature videos that play on hover; parallax banners.

Components

• Transparent-to-white header with outlined pill CTA
• Auto-advancing hero slideshow with progress bars
• Fanned location cards with rating, region, amenity tags, price
• Feature rows with round icon chips
• Video-on-hover cards
• Sortable locations catalog
• Location detail parallax banner and gallery
• Review carousel
• Sticky booking sidebar
• Date-range calendar
• Three-step booking form with confirmation
• Auth pages
• Admin bookings dashboard
• Clip-path mobile menu

Interactions

• Hero slides auto-advance with animated progress segments
• Fanned cards spread on hover (desktop)
• Experience cards play muted video on hover/focus
• Sort catalog by price or rating
• Parallax on detail banners
• Date range selection with nights and total
• Page crossfade transitions
• Mobile menu clip-path reveal

Data

• Location{slug, name, region, rating, pricePerNight, amenities[], description, images[], videoUrl, capacity}
• Review{locationId, author, rating, body, date}
• Booking{id, locationId, checkIn, checkOut, guests, name, email, phone, notes, status, total}
• ContactMessage{name, email, message}
• AdminRole{userId, role}

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Paste a template's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack templates)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any colour change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labelled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### Goal
Build "Quiet Pines Retreats", a direct-booking website for a small collection of off-grid campsites and glamping spots. It feels restorative and minimal; guests compare sites, read reviews and reserve dates directly, and staff manage reservations.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Calendar via react-day-picker, Popover, Select, Card, Carousel via Embla, Sheet, Form, Toast), lucide-react, date-fns. Framer Motion for page crossfades, the fanned cards, parallax and the clip-path menu. react-hook-form + zod. TanStack Query. Supabase: Auth (email, staff only), Postgres (locations, reviews, bookings, contact_messages, user_roles), Storage (photos and short videos), and an Edge Function to create bookings with an overlap check and send confirmation emails.

### Pages & layout
1. **Header**: transparent over the hero, then white. Tent-triangle logo with a light wordmark, tracked uppercase links and an outlined pill "Book now".
2. **Home hero**: four full-bleed slides with a dark gradient, a light two-line headline bottom-left, a white pill "Reserve →" and segmented progress bars along the bottom.
3. **Featured spots**: three location cards fanned and overlapping on desktop, spreading on hover (a plain grid on mobile), each with rating, region, amenity tags, price per night and "View details".
4. **The experience**: stacked white rows, each with a round tinted icon, title and one-line description.
5. Four video-on-hover experience cards and a closing booking CTA.
6. **Locations**: catalog with sort (price or rating) and an amenity filter.
7. **Location detail**: parallax banner, gallery, description, amenities, review carousel and a sticky booking sidebar (dates, guests, nights × rate).
8. **Book**: three steps (Dates and guests, Details, Confirm).
9. **About**, **Contact**, **Auth** and **Admin** (bookings table with status and filters).

### Design system
Tokens: `--background: #fcfcfc`, `--foreground: #333333`, `--primary: #a7beb2` (sage), `--primary-strong: #4f6b5c`, `--accent: #f0f5f2`, `--muted: #f5f5f5`, `--border: #ebebeb` (decorative), `--input-border: #8a8a8a`, `--muted-foreground: #5c5c5c`, `--radius: 0.5rem`, pills at 9999px. Font: Mukta 300/400/500. Scale: 60/32/20/16/14/12px; hero -0.025em; nav 12px uppercase at 0.15em, weight 500; weight 300 only at 32px and above. Spacing: 8px base, 128px sections, 16px row gaps. Motion: slide interval 6s with a progress fill, crossfade 500ms, parallax factor 0.3, menu clip-path 450ms.

### Components & interactions
- Hero: pause and play control; progress segments are buttons to jump slides.
- Fanned cards: keyboard focus spreads them like hover does; each card is a link.
- Video cards: `muted playsinline`, poster frame, play on hover or focus, stop on blur; none under reduced motion.
- Booking sidebar: disabled dates come from existing bookings, with a minimum of 2 nights; shows nights, subtotal, fees and total; "Reserve" is disabled until valid and has a loading state.
- Conflict error: "Those dates were just booked", followed by a refreshed calendar.
- Catalog: sort Select, an empty state for filters, and skeleton loading.

### Data & state
Tables: `locations(slug, name, region, rating, price_per_night, amenities text[], description, images text[], video_path, capacity)`, `reviews(location_id, author_display, rating, body, created_at)`, `bookings(id, location_id, check_in, check_out, guests, name, email, phone, notes, status, total)` with an exclusion constraint on `daterange(check_in, check_out)` per location, and `contact_messages`.

### Accessibility
White hero text sits on a gradient at least 65% black, and the light 300 weight stays at 48px or larger. Sage `#a7beb2` is decorative, so use `--primary-strong` for text and links. Keep small uppercase nav in `#333`. Calendar days are labelled with their availability, the carousels have controls, and the videos have no audio. The mobile menu traps focus. Respect reduced motion for parallax, video and slides. Verified contrast: secondary #5c5c5c on #fcfcfc = 6.52:1; button #ffffff on #4f6b5c = 5.85:1; link #4f6b5c on #fcfcfc = 5.7:1; hero #ffffff on #595959 = 7.0:1.

### Security
RLS: locations and reviews are public-read with staff-only writes. `bookings` are inserted only through the Edge Function (zod validation, overlap check, rate limit, honeypot) and read only by staff; guests get an emailed confirmation code instead of account access. Contact messages are insert-only for anon and staff-read. Uploads are staff-only (JPEG, PNG or WebP under 5 MB; MP4 under 15 MB). Payments, if enabled, go through hosted Stripe Checkout, with keys in function env.

### Performance & SEO
Hero images are optimized with the first one preloaded. Videos load only on hover intent and include posters. Code-split the admin. Add per-location meta with LodgingBusiness/Campground JSON-LD.

### Guardrails
- Use original copy and placeholder nature imagery only, with no trademarked names.
- Do not present seeded reviews as real guests.
- Collect only the booking contact details needed.
- Keep components small and typed, with no `any`, and show errors visibly.
- Done when: overlapping bookings are impossible; the sidebar total is correct; sort and filter work; hero, video and parallax respect reduced motion; the admin sees and updates bookings while anon users cannot read them.

Open the builderAll templatesThis palette on its own