Vibe Code a Bakery Website

Build a one-page neighborhood bakery website as a single self-contained HTML
file (inline CSS and JS, no external dependencies except Google Fonts and
Unsplash images via their CDN).

═══════════════════════════════════════════════════════════════
BUSINESS DETAILS
═══════════════════════════════════════════════════════════════
- Bakery name: [BAKERY NAME]
- Concept: sourdough / pastry / French / Eastern European / Asian baked
 goods (pick one)
- Address: [FULL ADDRESS]
- Phone: [PHONE]
- Email: [EMAIL]
- Social: Instagram + Facebook (open in new tab, rel="noopener")
- Founded year: [YEAR]
- Hours: [WEEKDAY / WEEKEND / SUN], and the "we typically sell out by [TIME]"
 note
- Starter name + age (if relevant, e.g., "Mira, 12 years old")
- Custom orders: yes (cakes, holiday pies, wedding), by email/phone

═══════════════════════════════════════════════════════════════
BRAND
═══════════════════════════════════════════════════════════════
- Brand colors: warm cream (#f7eee0), terracotta (#c87a4c), soft brown
 (#5d3a25), sage green accent (#8a9a6f). Override if user provides hex
 values; derive deeper variants for AA contrast on body text.

═══════════════════════════════════════════════════════════════
DESIGN DIRECTION
═══════════════════════════════════════════════════════════════
- Warm, hand-crafted editorial. Close-up bread photography. Real-ingredients
 feel. NOT industrial-corporate, NOT cute-cupcake-cliche.
- Type pairing: high-contrast display serif for headings (Recoleta, Lora,
 Cormorant Garamond) + Inter for body. ONE italic accent in italic serif.
 NO script/handwritten fonts.
- Eyebrow labels: uppercase, tracked .20em, terracotta color, prefixed by a
 28px CSS ::before line.
- Headlines: short and sensory with ONE italic accent ("Bread baked the
 *slow way*"). Italic word uses terracotta color.
- Subtle SVG wheat-stalk / leaf decorative elements as section dividers
 (NOT inline emojis, NOT clip-art). Define once as <symbol>, use sparingly.
- Photo composition: full-bleed bread shots, hands tearing crust, oven shots,
 ingredient close-ups. Cream-bordered frames on key images.
- Icon system: 24x24 line icons, fill="none", stroke="currentColor",
 stroke-width 1.6, round caps. Cover: wheat, leaf, flame, plate, croissant
 (geometric shape, not emoji), star, calendar, clock, pin, phone, mail,
 check, instagram-mark.
- Icon containers: 44x44 rounded squares with cream-tinted bg, flip to
 filled terracotta with cream icon on hover.
- Motion: scroll fade-ins, very subtle Ken Burns on hero, hover lifts (4px)
 on product cards. No bouncing.

═══════════════════════════════════════════════════════════════
SECTIONS (in this exact order)
═══════════════════════════════════════════════════════════════

1. FIXED NAV (glass effect cream translucent + backdrop blur)
 - Wordmark (large serif) left | nav links center | "Order custom" terracotta
 pill CTA right
 - Below: ultra-thin info bar ("Open today: 7am - sold out, usually by 1pm")

2. HERO
 - Two-column: text left, photo right (Unsplash search: "sourdough crust"
 or "baker hands flour") rounded 28px with cream-bordered frame
 - Left: eyebrow with line marker ("EST [YEAR]"), large headline with
 italic accent ("Bread baked the *slow way*, sold the same day"), 2-line
 subhead, primary "See today's bake" CTA + secondary "Custom orders →"
 - Floating pill on photo: "Today's bake: [3 RANDOM ITEMS]"
 - Ken Burns slow zoom on hero

3. TODAY'S BAKE
 - Eyebrow + headline ("On the *shelves* today")
 - 2-column list layout (single column mobile) of today's items
 - Each item row: small icon badge + name (serif) on left + price in
 monospace on right + 1-line description in muted text below name
 - Thin sage divider between rows
 - 10-12 items spread across bread + pastries + cakes
 - Below list: italic line "We bake what tastes best with the season"

4. OUR STORY
 - Two-column: text left, photo composition right
 - Left: eyebrow, headline ("Three generations *of dough*"), 3-paragraph
 story including the starter's name + age, where flour comes from (one
 specific local mill), the oven story (wood-fired? steam-injection?
 hearth?)
 - Right: layered photo composition, large hands-shaping-dough photo
 (rounded 24px) + overlapping smaller crumb shot (rounded 16px,
 terracotta border frame)
 - Two floating markers: "EST [YEAR]" tag top-left in terracotta, sage
 "Locally-milled flour" pill bottom-right with leaf icon

5. CUSTOM ORDERS
 - Two-column: text left, form right
 - Left: eyebrow, headline ("Cakes for *the moments* that matter"), 3-line
 description, 4-item list with check icons (birthday cakes, wedding
 cakes, holiday pies, gluten-free options)
 - Right: cream card with thin terracotta border
 • Fields: full name, email, phone, occasion (select), pickup date,
 guest count, dietary requirements, message (textarea, "Tell us
 about the day")
 • Submit terracotta button, full-width
 • Inline JS success message (preventDefault)
 - Below form in muted text: "We respond within 24 hours. 7-day lead time
 for custom cakes."

6. BREAD SUBSCRIPTION (or "Bread Box")
 - Eyebrow + headline ("Bread every *Friday*")
 - 3-column card grid: Weekly / Bi-Weekly / Monthly (stack mobile)
 - Each card: subscription frequency (serif), price (large serif
 terracotta), what's included (3-4 items as prose with check icons),
 "Sign up" terracotta button
 - Middle (Weekly) card visually elevated with subtle terracotta glow

7. GALLERY
 - Eyebrow + headline ("Through the *oven door*")
 - 8-image grid (CSS columns: 3 desktop, 2 tablet, 1 mobile), masonry
 feel without JS
 - Mix of: bread loaves, pastries, oven shots, ingredients, hands at work
 - Each rounded 12px, hover slight 1.03 scale

8. PRESS / HONORS STRIP
 - Thin cream section with subtle borders top/bottom
 - "AS FEATURED IN" label left + 4-5 typographic press names right
 (italic serif + uppercase sans mix, muted color, hover terracotta)
 - NO real publication logos

9. TESTIMONIALS
 - 3 quote cards in grid
 - Each: oversized opening quotation mark in muted terracotta, quote body
 (specific bread/pastry, specific moment, varied lengths), separator,
 gradient-circle initials avatar + first name + last initial + frequent
 order ("Sourdough boule, every Friday")
 - NO photos of fake people

10. FIND US
 - Two-column: hours table left (with sold-out caveat), embedded Google
 Map right (rounded 24px, shadow, cream border)
 - Map iframe via Google Maps embed URL (no API key)
 - Floating overlay top-left: bakery name, address, "Get directions →"

11. NEWSLETTER
 - Centered card on cream, sage radial blob accents
 - Eyebrow "FROM OUR OVEN", headline ("Friday's bake list, *every
 Thursday night*"), inline email input + terracotta submit + inline
 success

12. FAQ
 - 6 collapsible <details>: "Do you do gluten-free?", "Can I pre-order?",
 "Do you wholesale to cafes?", "How early should I order a custom
 cake?", "Do you ship?", "Parking?"

13. FOOTER (deep brown)
 - Centered wordmark in cream serif
 - Italic serif tagline below (NOT handwritten, e.g., "Made by hand,
 eaten by neighbors")
 - Social row: terracotta-bordered glass circles (only platforms user
 provides)
 - Bottom: address + hours + "Made in [CITY]" + copyright

═══════════════════════════════════════════════════════════════
TECHNICAL REQUIREMENTS
═══════════════════════════════════════════════════════════════
- Single index.html, no build step
- JSON-LD `Bakery` schema in <head> with name, address, telephone,
 openingHours, priceRange, servesCuisine
- CSS custom properties for palette at top
- Smooth scroll with scroll-padding-top
- Real Unsplash images via CDN with ?w=900&q=80&auto=format&fit=crop
- Hero loading="eager", everything else "lazy"
- <picture> with WebP + JPG fallback on hero
- tel:/mailto: links throughout; mailto with prefilled subject for custom
 orders
- Responsive at 900px and 500px breakpoints
- Semantic HTML5; aria-labels on icon-only links
- All times in local timezone, mention in schema
- Favicon: inline SVG data URI (wheat or bread mark)

═══════════════════════════════════════════════════════════════
COPY VOICE
═══════════════════════════════════════════════════════════════
Earthy, warm, sensory. Treats baking as craft. Specific over generic
("Twenty-hour cold ferment, scored with a lame, baked in cast-iron at
260°C", not "made with love"). Mention specifics: the starter's name and
age, the local mill, the oven. Body copy short, deliberate. Testimonials
should feel like real reviews, specific loaves, specific Fridays.

═══════════════════════════════════════════════════════════════
ANTI-PATTERNS TO AVOID
═══════════════════════════════════════════════════════════════
- No emojis (including bread, croissant, cake emojis)
- No "made with love", "passion for baking", "artisan magic" filler
- No script/handwritten fonts (no Caveat, no Pacifico)
- No animated rolling-pin cursors or flour-dust particle effects
- No cartoon baker mascot illustrations
- No "Award-winning bakery" stars or Yelp-badge graphics, use typeset
 press names
- No fake stock photos of generic loaves on white backgrounds
- No "Best in [CITY]" exclamation banners
- No bullet lists in card copy (write as prose)


═══════════════════════════════════════════════════════════════
SEO & DISCOVERABILITY
═══════════════════════════════════════════════════════════════
Implement all of the following so the page ships production-ready for search
engines and social sharing. This is not optional; treat it as part of the
build, not an afterthought.

DO NOT INVENT DATA: never fabricate business names, addresses, phone or email, license or certification numbers, coordinates, prices, reviews or ratings, team members, photos, press mentions, or results and stats. If a detail is not provided, leave a clearly labeled {{TODO: ...}} placeholder — never a plausible-looking fake. Any form must POST to a real endpoint (Formspree, Web3Forms, Basin, or similar) or fall back to a mailto:/tel: link — never show a fake "success" message with no backend. Wrap every motion effect in @media (prefers-reduced-motion: reduce), and make sure any accent color used for text, links, or prices meets WCAG 2.2 AA contrast against its background.

1. TITLE TAG & META DESCRIPTION
   - <title> tag: "[Business Name] - [Primary Service] in [City]" (under 60 chars)
   - <meta name="description"> 150-160 chars, include the city/area, primary
     service, and a call to action (e.g., "Book online" / "Call now")
   - <meta name="robots" content="index, follow">

2. OPEN GRAPH & TWITTER CARDS
   - og:title, og:description, og:image (hero image), og:url, og:type=website
   - twitter:card=summary_large_image, twitter:title, twitter:description,
     twitter:image
   - Place all OG/Twitter meta in <head>

3. STRUCTURED DATA (JSON-LD)
   - Insert a <script type="application/ld+json"> block in <head> with
     @type: "Bakery" schema
   - Include: name, description, url, telephone, email, address
     (streetAddress, addressLocality, addressRegion, postalCode,
     addressCountry), image. Add geo, openingHoursSpecification, and priceRange ONLY when the user supplied real values — never invent them; and do NOT output aggregateRating or Review markup unless the user provides real, verifiable reviews (fabricated ratings violate Google's structured-data spam policy)
   - Add BreadcrumbList schema: Home > [Category] > [Business Name]
   - If the page has a FAQ section, add FAQPage schema with every Q&A pair

4. HEADING HIERARCHY FOR SEO
   - Exactly ONE <h1> per page — use the real, human headline the design calls for; put keywords in the <title> and meta, not the visible H1
   - Logical H2 > H3 nesting for every section; never skip a level
   - Section headings should include secondary keywords naturally
     (keep the section's real, human label; put keywords in the title and meta, not stuffed into headings)

5. IMAGE SEO
   - Every <img> must have a descriptive alt attribute that includes
     relevant keywords (NOT just "image1.jpg")
   - Format: alt="[what the image shows] - [Business Name] in [City]"
   - Use the client's own images, or neutral solid/gradient placeholders with a visible "replace with your photo" note — never hardcode Unsplash photo IDs (they often resolve to the wrong or trademarked image). Always set width + height (or aspect-ratio) to prevent layout shift

6. LOCAL SEO SIGNALS
   - Include full NAP (Name, Address, Phone) in the footer, matching the
     schema data exactly
   - Add a link to Google Maps with the business address
   - Use location-specific keywords in at least 3 section headings
   - If the page has testimonials, include the reviewer's city/area

7. TECHNICAL SEO
   - Canonical tag: <link rel="canonical" href="[PAGE URL]">
   - Language: <html lang="en">
   - Charset: <meta charset="UTF-8"> + viewport meta (already required)
   - All internal anchor links use descriptive text (not "click here")
   - Loading performance: critical CSS inline, fonts via display=swap,
     hero image eager, everything else lazy
   - Keep the CSS and JS readable and editable — do NOT minify (this file is meant to be customized by the owner)

8. CONTENT SEO SIGNALS
   - Write real, useful body copy (not just headings and bullet points).
     Each major section should have at least one paragraph of 2-3 sentences
     that describes the offering in natural language a search engine can parse.
   - Use the primary keyword once or twice where it reads naturally; keep the rest in the title tag and meta description, never stuffed into copy.
   - Include a clear call-to-action with anchor text that includes the
     service keyword (e.g., "Book your appointment" not "Click here").

═══════════════════════════════════════════════════════════════
DELIVERABLE
═══════════════════════════════════════════════════════════════
One polished HTML file (~70-80KB), production-ready, that I can open in a
browser and immediately deploy. Show the file as a single code block and
briefly summarize the design decisions made.