The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Custom Cake Bakery Website

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build an original single-page website for [BRAND], an invented custom cake bakery offering [SPECIALTY] in [CITY]. The centerpiece is a working cake configurator with a live code-drawn SVG cake, deterministic pricing, lead-time-aware pickup selection, and a copyable order request. Use six coordinated local cake photographs for the hero, gallery, and process section; the configurator itself must be drawn in code, not represented by a static image.

- Audience: People planning birthdays, weddings, showers, anniversaries, and small gatherings who want to understand cake choices, servings, price, and pickup timing before contacting a local bakery.
- Goal: Help visitors move from visual inspiration to a complete, coherent cake request while making the bakery feel established, careful, and approachable. Make the builder genuinely useful on desktop and mobile, with no fake checkout or submission.
- Tone: Warm, specific, assured, and lightly playful. Use concise sensory language about cake and clear practical language about ordering. Avoid exaggerated claims, luxury clichés, and sugary marketing filler.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: Motion 11 for React (MIT), lucide-react (ISC), @fontsource-variable/fraunces (OFL), @fontsource/dm-sans (OFL)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Create a Vite React TypeScript project; install Tailwind CSS 3.4, motion, lucide-react, @fontsource-variable/fraunces, and @fontsource/dm-sans.
  - Set base: './' and build.sourcemap: false in vite.config.ts; the production output must be dist/.
  - Configure Tailwind with the colors, font families, spacing, and keyframes below; import the local Fontsource packages in src/main.tsx.
  - Keep all site copy, image paths, opening hours, FAQs, testimonials, and variable-derived values in src/content.ts; keep cake options and prices in src/cakeOptions.ts.
  - Use one React state object for the cake configuration and derive servings, SVG geometry, line items, and total from it; never maintain duplicate price or preview state.
  - Persist only non-personal cake configuration choices in localStorage; do not persist names, contact details, messages, or pickup dates.

## Variables
- [BRAND] — Bakery name (default: "Fable & Frost"). An invented bakery name used in the header, hero, footer, and page title.
- [CITY] — City and region (default: "Portland, Oregon"). Used in the eyebrow, pickup guidance, and visit copy.
- [SPECIALTY] — Cake specialty (default: "garden-inspired celebration cakes"). A short lowercase phrase describing the bakery's point of view.
- [LEAD_TIME_DAYS] — Minimum notice in days (default: "4"). A positive integer used by both the pickup-date validation and ordering copy.
- [PICKUP_ADDRESS] — Pickup address (default: "18 Marigold Lane, Portland, Oregon"). An invented street address used in the visit section, footer, and copied request.
- [ORDER_EMAIL] — Order email (default: "[email protected]"). The destination shown when visitors copy their request; use a reserved .example address for fictional content.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/custom-cake-bakery-website in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Paper `#F7F1E8` — Primary page background and generous negative space
- Ink `#30251F` — Headlines, body text, and dark controls
- Cherry `#A4473C` — Primary buttons, selected states, links, and small editorial accents
- Blush `#EBC9C0` — Hero panel, illustration background, and selected-option wash
- Sage `#68735D` — Secondary accents, decorative stems, and success feedback
- Cream `#FFFCF7` — Photograph mats, form surfaces, and text on dark buttons

### Typography
- Display and brand wordmark; use 76px/0.98 at desktop, 48px/1.02 on mobile, weight 600 with occasional italic emphasis: Fraunces Variable (OFL), weights 500/600/700
- Body, navigation, controls, labels, and prices; body 17px/1.65, labels 13px with modest tracking: DM Sans (OFL), weights 400/500/600/700

### Layout & motion
- Spacing: Use an 8px base grid. Cap the main container at 1280px with 40px desktop and 20px mobile side padding. Give major sections 112px desktop and 72px mobile vertical padding. Keep form groups 28px apart and body measures below 62 characters.
- Radius: Use 18px for photograph frames and the cake-preview stage, 12px for form controls and option rows, and 4px for small labels. Reserve fully rounded shapes for tiny status dots and the cake's piped decorations, not every container.
- Motion: Reveal major section headings and content groups once with Motion whileInView: opacity 0 to 1 and y 24 to 0 over 500ms, with 80ms stagger between siblings.
- Motion: When a cake option changes, crossfade and gently scale only the affected SVG tier or decoration over 220ms; animate the estimated-total digits with a subtle 120ms highlight rather than a rolling counter.
- Motion: Give gallery images a 1.03 scale on hover and focus within 450ms; give buttons a 2px upward shift and keep selected option rows visibly marked without layout movement.
- Motion: Use a 180ms opacity and scale transition for the request dialog and a short toast for copy feedback. Under prefers-reduced-motion, disable reveals, smooth scrolling, scaling, and nonessential transitions.
- Imagery: Use the six generated photorealistic editorial food photographs listed in assets: hero-cake.webp, berry-cake.webp, pistachio-cake.webp, chocolate-cake.webp, citrus-cake.webp, and cake-making.webp. All share warm left-side window light, soft shadows, subtle film grain, realistic buttercream, and a cream, terracotta, blush, and muted-sage palette. Show complete cakes or close craft details, never tight faces, text, logos, or branded decorations. The live cake in the builder is a separate original inline SVG with clean, softly textured geometry.

## Pages & Sections
### [BRAND] — Custom celebration cakes (`index.html`)
1. **Header and navigation** — Use a text wordmark '[BRAND]' with a small line 'CUSTOM CAKES · [CITY]'. Desktop navigation items are 'Cake gallery', 'Build your cake', 'How it works', and 'Visit', linking to #gallery, #builder, #process, and #visit. The primary button reads 'Start your cake' and links to #builder. On mobile, use a Menu icon button that opens a compact navigation panel with the same links and a visible Close state.
   Layout: Sticky 80px header on a nearly opaque Paper background with a fine Ink/12 bottom border. Place the wordmark left and navigation plus CTA right inside the 1280px container. At 390px, reduce to 68px, show only wordmark and a 44px menu button, and place the open panel directly below the header without covering the whole screen.
   Motion: No intro animation. Smooth-scroll anchor navigation only when reduced motion is not requested; close the mobile panel after a navigation choice.
2. **Hero** — Eyebrow: '[SPECIALTY] · made to order in [CITY]'. H1: 'Your celebration, baked into a cake.' Body: 'Choose the size, layers, flavor and finish. See your cake take shape and get a clear estimate before you request pickup.' Primary CTA: 'Build your cake'; secondary text link: 'Browse the gallery'. Add a small detail line: 'Pickup in [CITY] · [LEAD_TIME_DAYS]-day minimum notice'. Use hero-cake.webp with the supplied alt text and a small caption beneath it: 'Made for your table · About 8–70 servings'.
   Layout: Desktop uses a 12-column grid with five columns for copy and seven for the photograph. Align copy near the vertical center, keep the H1 to three deliberate lines, and use generous space between headline and actions. The image fills a 4:3 frame with an 18px radius and a small Blush offset shape behind its upper-right corner. At mobile, stack eyebrow, H1, body, CTAs, detail line, then photograph; keep both CTAs reachable and avoid horizontal clipping.
   Motion: On load, fade the copy upward by 18px over 500ms and reveal the photograph with opacity plus a 12px rise. Do not animate the headline letter by letter.
3. **Cake gallery** — H2: 'A starting point, not a limit.' Intro: 'Browse a few finishes, then make them yours in the builder.' Create four photographic entries: 'Raspberry Veil' with 'vanilla bean · raspberry frosting · seasonal fruit'; 'Pistachio Pearl' with 'lemon elderflower · pistachio frosting · piped pearls'; 'Cocoa Arc' with 'chocolate hazelnut · cocoa frosting · chocolate arcs'; and 'Citrus Petal' with 'lemon elderflower · silk vanilla frosting · pressed sugar petals'. Each has a visible 'Use this finish' button that applies the matching flavor, frosting, and decoration to the builder, then moves to #builder.
   Layout: Use an editorial 12-column composition rather than four equal cards: Raspberry Veil spans five columns with a portrait image, Pistachio Pearl seven with landscape, Cocoa Arc seven with portrait cropped consistently, and Citrus Petal five with landscape. Put titles and descriptors below images with thin rules, not floating glass cards. Mobile becomes one column in the same order, with image aspect ratios preserved and buttons at least 44px tall.
   Motion: Reveal rows in sequence. On image hover or keyboard focus, scale only the photograph to 1.03 and darken the 'Use this finish' arrow; activation gives immediate selected-state feedback in the builder.
4. **Custom cake builder** — H2: 'Build the cake you have in mind.' Intro: 'Every choice updates the sketch and the estimate. You can change anything before you copy your request.' Use accessible fieldsets with radio inputs and exact choices. SIZE: Petite 6-inch, about 8 base servings, $58; Classic 8-inch, about 16 base servings, $82; Grand 10-inch, about 28 base servings, $118. TIERS: One tier, no surcharge and 1× base servings; Two tiers, +$48 and 1.75× base servings rounded to the nearest whole number; Three tiers, +$96 and 2.5× base servings rounded to the nearest whole number. FLAVOR: Vanilla bean +$0 with pale filling bands; Chocolate hazelnut +$6 with cocoa filling bands; Lemon elderflower +$6 with pale-yellow filling bands; Spiced carrot +$4 with warm-orange filling bands. FROSTING: Silk vanilla +$0, #F4E5CF; Raspberry +$4, #D99491; Pistachio +$4, #AEBB9B; Cocoa +$2, #76564A. DECORATION: Pressed sugar petals +$14, Piped pearls +$10, Chocolate arcs +$12, Seasonal fruit +$16. Add an optional inscription checkbox and, when checked, a required message field capped at 28 characters costing +$6. Show the inscription on the SVG cake using a generic script font fallback only if a licensed local font is available; otherwise use DM Sans italic. PICKUP: a native date input with min set to local today plus [LEAD_TIME_DAYS] days and max six months ahead; disable Sundays and Mondays through validation and explain 'Pickup is Tuesday–Saturday. We need at least [LEAD_TIME_DAYS] days notice.' CONTACT: required Name and Email fields plus optional Phone and Celebration notes; validate email format and required fields inline. SUMMARY: show brand, dynamic approximate servings, selected options, inscription if present, pickup date, and itemized charges for size, tiers, flavor, frosting, decoration, and inscription. Display 'Estimated total' in USD and 'Final design and price are confirmed by the bakery.' Buttons are 'Review cake request' and a quieter 'Start over'. Review opens an accessible modal containing the full summary and a 'Copy request' button. Copy writes a plain-text request to the clipboard and confirms 'Copied — paste it into an email to [ORDER_EMAIL].' Never claim the request was sent. Start over restores Petite, one tier, Vanilla bean, Silk vanilla, Pressed sugar petals, no inscription, and clears pickup and contact fields after confirmation.
   Layout: Use a Blush-tinted full-width section with the heading above a two-column workspace. At desktop, the left five columns contain a sticky preview stage at top: 96px; the right seven columns contain sequential fieldsets separated by fine rules. The preview stage includes a 520×520 responsive SVG on a Cream background, approximate servings, the itemized summary below it, and the review action. All fieldsets remain visible as sequential sections; do not hide options behind a multi-step wizard. On mobile, place the SVG preview first without sticky positioning, then the controls, then a non-sticky summary. Use full-width option rows with 44px minimum targets and keep the total visible without horizontal overflow.
   Motion: The inline SVG must redraw immediately from shared state: size changes the cake width and height, tiers add centered tapered tiers, frosting changes outer fill, flavor changes visible filling bands, decoration adds clearly different original SVG shapes, and inscription updates its text. Use a cake stand, soft oval shadow, and restrained sugar texture. Announce estimated total and validation messages with aria-live; no spinning, bouncing cake, or automatic scrolling while options change.
5. **Ordering process and visit** — At #process, H2: 'From sketch to celebration.' Three numbered steps: 01 'Build your cake' — 'Choose a size and finish, then add the details that make it yours.' 02 'Choose pickup' — 'Pick a Tuesday–Saturday date that allows at least [LEAD_TIME_DAYS] days notice.' 03 'Send the request' — 'Copy your summary and email it to [ORDER_EMAIL]. We will confirm the design, availability and final price before requesting a 50% deposit.' At #visit, show 'Come by for cake talk.', '[PICKUP_ADDRESS]', 'Tuesday–Friday, 9:00 AM–5:00 PM', 'Saturday, 9:00 AM–2:00 PM', 'Sunday–Monday, closed', and 'Pickups are by appointment.' Use cake-making.webp beside this practical information.
   Layout: Place the three steps in a ruled horizontal row, then a two-column visit block with the process photograph on the left and address/hours on the right. Add a simple original SVG flourish behind the step numbers, not a map or external embed. Mobile stacks steps with left rules and places the photograph before the visit details.
   Motion: Reveal each step with a short stagger. Keep all hours and contact information visible without animation dependencies.
6. **Celebration notes** — H2: 'Notes from the party table.' Use three clearly fictional, specific quotes without star ratings: Nina & Theo: 'The lemon elderflower cake was light, not too sweet, and the sugar petals matched our table linens.' Marcus L.: 'The estimate made planning our daughter’s party easier, and the two-tier cake fed everyone with a little left for Sunday.' Priya S.: 'They turned a few colors I liked into a cocoa-and-petal design that felt completely ours.' Add a small editorial note: 'Customer names and stories shown here are invented sample content.'
   Layout: Three equal columns separated by top and bottom fine rules, with generous Fraunces quote styling and DM Sans attribution. Stack on mobile with 28px gaps and no carousel.
   Motion: One restrained group reveal only; no auto-rotating testimonial carousel.
7. **Frequently asked questions** — H2: 'Before you preheat the party plans.' Use five accordion items, first open by default. 'How far ahead should I order?' — '[LEAD_TIME_DAYS] days is the minimum for simple cakes. For three-tier designs, two to three weeks gives us more room to plan.' 'Is the estimate the final price?' — 'It covers the choices shown here. We confirm the final quote after reviewing your request; elaborate handmade details may change it.' 'Can you accommodate allergies?' — 'Tell us about allergies in Celebration notes. Our kitchen handles wheat, dairy, eggs and nuts, so we cannot guarantee an allergen-free cake.' 'Do you deliver?' — 'Pickup is at [PICKUP_ADDRESS]. Ask about local delivery in your email and we will quote it if available.' 'How do I confirm an order?' — 'Email the copied request to [ORDER_EMAIL]. After we confirm the design and date, a 50% deposit reserves your pickup. This website does not take payment.'
   Layout: A 12-column grid with a four-column sticky heading and eight-column accordion list. Each question is a full-width button with a Plus icon that rotates to a minus state; answers have readable 60-character measures. On mobile, remove sticky positioning and keep touch targets at least 48px.
   Motion: Accordion height and opacity transitions last 200ms and become instant for reduced motion.
8. **Footer** — Show '[BRAND]' in large Fraunces type, '[SPECIALTY]' beneath it, then '[PICKUP_ADDRESS]' and '[ORDER_EMAIL]'. Include text links to #gallery, #builder, #process, and #visit, and a final small line: 'Made with care in [CITY].' Append the optional [CREDIT] link unobtrusively.
   Layout: Ink background with Cream text, 64px vertical padding, brand block on the left and navigation/contact on the right. Avoid an oversized wordmark that clips at small widths; at 390px stack all content and allow the email address to wrap.
   Motion: No continuous footer animation.

## Assets
- image: hero-cake.webp — https://media.vibefather.ai/assets/71bc3964-1198-48d9-a5f9-d3d5adbbf9a7/hero-cake.webp → public/images/hero-cake.webp. Alt: 'Two-tier cream celebration cake with sugar petals on a stone pedestal.' Used as the large hero photograph. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Download locally and record path, URL, and credit in ASSETS.md.
- image: berry-cake.webp — https://media.vibefather.ai/assets/71bc3964-1198-48d9-a5f9-d3d5adbbf9a7/berry-cake.webp → public/images/berry-cake.webp. Alt: 'Blush raspberry cake topped with strawberries and raspberries.' Used for Raspberry Veil in the gallery. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Download locally and record path, URL, and credit in ASSETS.md.
- image: pistachio-cake.webp — https://media.vibefather.ai/assets/71bc3964-1198-48d9-a5f9-d3d5adbbf9a7/pistachio-cake.webp → public/images/pistachio-cake.webp. Alt: 'Muted pistachio-green cake with delicate piped buttercream pearls.' Used for Pistachio Pearl in the gallery. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Download locally and record path, URL, and credit in ASSETS.md.
- image: chocolate-cake.webp — https://media.vibefather.ai/assets/71bc3964-1198-48d9-a5f9-d3d5adbbf9a7/chocolate-cake.webp → public/images/chocolate-cake.webp. Alt: 'Cocoa-frosted celebration cake decorated with sculptural chocolate arcs.' Used for Cocoa Arc in the gallery. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Download locally and record path, URL, and credit in ASSETS.md.
- image: citrus-cake.webp — https://media.vibefather.ai/assets/71bc3964-1198-48d9-a5f9-d3d5adbbf9a7/citrus-cake.webp → public/images/citrus-cake.webp. Alt: 'Ivory lemon cake with pale citrus and ivory sugar petals.' Used for Citrus Petal in the gallery. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Download locally and record path, URL, and credit in ASSETS.md.
- image: cake-making.webp — https://media.vibefather.ai/assets/71bc3964-1198-48d9-a5f9-d3d5adbbf9a7/cake-making.webp → public/images/cake-making.webp. Alt: 'Baker’s hands piping a cream border onto a celebration cake.' Used beside the ordering process and visit information. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Download locally and record path, URL, and credit in ASSETS.md.
- image: Draw the configurator cake as original inline React SVG, including tiers, filling bands, frosting, four decoration variants, pedestal, shadow, and optional inscription. Draw the small botanical flourishes locally as SVG. No external illustration file is needed; describe the SVG implementation in ASSETS.md as original code-drawn artwork.
- icon: Use lucide-react for Menu, X, ArrowRight, Plus, Minus, CalendarDays, MapPin, Mail, RotateCcw, Copy, and Check. Install the ISC-licensed package locally; do not load an icon CDN or use brand icons. Record the dependency and license in ASSETS.md.
- font: Self-host Fraunces Variable through @fontsource-variable/fraunces, OFL. Import only the used variable axes and weights through the npm package; record the package and license in ASSETS.md.
- font: Self-host DM Sans through @fontsource/dm-sans, OFL. Install and import the 400, 500, 600, and 700 files locally; record the package and license in ASSETS.md.

## Don'ts
- Do not use a backend, serverless functions, API routes, database, authentication, third-party APIs, analytics, real payment, or external form submission. All interactions must run locally in the browser.
- Do not claim that an order was submitted, an email was sent, a date was reserved, or payment was taken. The final working action only copies the request summary.
- Do not hard-code a second copy of prices, servings, lead-time validation, or preview state; derive every displayed value from the shared configuration and option data.
- Do not use real bakery names, existing logos, slogans, branded toppers, copyrighted characters, celebrity likenesses, recognizable product branding, or copied website code, copy, photographs, or illustrations.
- Do not use Unsplash, Pexels, Pixabay, Google Images, placeholder-image services, CC BY-NC or CC BY-SA material, commercial fonts, restricted component source, or any asset without an allowed license.
- Do not hotlink assets or load scripts, fonts, icons, styles, maps, or images from a CDN. Download the six approved images into public/images and self-host all fonts through the specified npm packages.
- Do not replace the photographic hero with typography alone, a flat placeholder, a CSS cake, or a generic gradient. Do not replace the live SVG configurator with a static image.
- Do not add fake reviews presented as verified, social-media counts, unverifiable awards, scarcity timers, or claims about the template publisher inside the bakery site.
- Do not hide builder choices behind inaccessible divs or a multi-step wizard. Use semantic fieldsets, labels, radio controls, keyboard-visible focus, a properly labelled dialog, and at least 44px touch targets.
- Do not ignore invalid pickup dates, Sundays, Mondays, or a lead time different from the variable value. Do not persist personal contact details in localStorage.
- Do not use bare-directory links, root-absolute asset paths, external navigation for section links, or a framework server. The only page is index.html and all section links use local anchors.
- Do not emit source maps, copy src/ into dist/, exceed 20 MB, or require more than npm run build for the static production output.
- Do not introduce console errors, horizontal overflow, clipped footer text, sticky elements that cover controls, or motion that ignores prefers-reduced-motion at 1440×900 or 390×844.
- Do not add SEO metadata beyond a plain [BRAND] title and favicon, and do not add JSON-LD, Open Graph tags, sitemap work, or keyword-stuffed copy.
- Do not overuse rounded cards, pills, glass effects, purple gradients, emoji, or generic AI-style decoration; preserve the restrained editorial rules, warm paper surface, and practical hierarchy.

---
— Prompt by VibeFather · https://vibefather.ai/t/custom-cake-bakery-website · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.