Vibe Code a Florist Website

Build a one-page florist / flower shop 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
═══════════════════════════════════════════════════════════════
- Shop name: [SHOP NAME]
- Address: [FULL ADDRESS]
- Phone: [PHONE]
- Email: [EMAIL]
- Social: Instagram + (optional) Pinterest (open in new tab, rel="noopener")
- Hours: [WEEKDAY / SAT / SUN]
- Specialty: weddings / everyday / subscriptions (mix)
- Delivery: same-day in [CITY], next-day in [SURROUNDING ZIPS]
- Founded year: [YEAR]
- Sourcing: from [LOCAL FARM(S) / REGION]

═══════════════════════════════════════════════════════════════
BRAND
═══════════════════════════════════════════════════════════════
- Brand colors: deep forest green (#2f4538), dusty blush (#dfb8a8), cream
 (#f5efe2), dusty rose accent (#a0635f). Override if user provides;
 derive variants for AA contrast.

═══════════════════════════════════════════════════════════════
DESIGN DIRECTION
═══════════════════════════════════════════════════════════════
- Botanical, lush, garden-fresh editorial. NOT corporate-floral, NOT
 cheap-bouquet-online. Editorial gardening magazine feel.
- Type pairing: high-contrast display serif for headings (Lora, Cormorant
 Garamond, Fraunces) + Inter for body. ONE italic accent. NO script
 fonts.
- Eyebrow labels: uppercase, tracked .22em, dusty rose, prefixed by a
 28px CSS ::before line in forest.
- Headlines: short, sensory, with ONE italic accent ("Same-day delivery.
 *Fiercely seasonal.*"). Italic words in dusty rose.
- Subtle SVG botanical accents (leaves, branches, stems) as section
 dividers, clean line drawings, NOT inline emojis, NOT clip-art. Define
 once as <symbol>, use sparingly.
- Photo-heavy: full-bleed bouquet photography, hands wrapping flowers, work
 bench shots.
- Icon system: 24x24 line icons, fill="none", stroke="currentColor",
 stroke-width 1.5, round caps. Cover: tulip-line, leaf, vase, bow,
 delivery-truck, calendar, clock, pin, phone, mail, check, star.
- Icon containers: 44x44 rounded squares with cream-tinted bg, flip to
 filled forest with cream icon on hover.
- Motion: scroll fade-ins, very subtle Ken Burns on hero, hover lifts (4px)
 on product cards.

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

1. FIXED NAV (glass cream translucent + backdrop blur)
 - Wordmark (serif) left | anchor nav center | "Shop bouquets" rose pill
 CTA right
 - Sub-line: small "Same-day delivery in [CITY]" with pulsing forest dot

2. HERO
 - Two-column: text left, photo right (Unsplash: "wrapped bouquet
 florist" or "fresh flowers studio") rounded 28px with forest gradient
 overlay bottom-right
 - Left: eyebrow with line marker, headline ("Same-day delivery.
 *Locally grown.* *Fiercely seasonal.*"), 2-line subhead, primary
 "Shop bouquets" CTA + secondary "Subscribe"
 - Floating pill on photo: "Today's stems: [3 seasonal flowers]"
 - Ken Burns slow zoom

3. FEATURED BOUQUETS
 - Eyebrow + headline ("This week's *bouquets*")
 - 4-column grid of product cards (auto-fit, minmax 260px)
 - Each card: hero photo (rounded 16px, ratio square), bouquet name
 (serif, e.g., "The Summer Garden"), size options as pill row
 (Small/Medium/Large with price under each), 2-line description,
 "Order →" rose link
 - 8 bouquets total

4. SUBSCRIPTIONS
 - Eyebrow + headline ("Flowers *every Friday*")
 - 3-column card grid (stack mobile): Weekly / Bi-weekly / Monthly
 - Each card: frequency name (serif), price (large serif rose), what's
 included (4 lines in prose with check icons), example bouquet thumb,
 "Subscribe" rose button
 - Middle card visually elevated

5. OCCASIONS
 - Eyebrow + headline ("Flowers for *every reason*")
 - 5-card horizontal row (stack mobile): Birthday / Anniversary /
 Sympathy / Wedding & Events / Just Because
 - Each: 44x44 cream-tinted icon badge + occasion name (serif) + 1-line
 description + "Browse →" rose link

6. CUSTOM ORDERS & WEDDINGS
 - Two-column: text left, form right
 - Left: eyebrow, headline ("Weddings and *custom designs*"), 2-paragraph
 description, "Download our wedding lookbook PDF" link
 - Right: cream card with rose border (1px)
 • Fields: full name, email, phone, event date, event type (select:
 Wedding / Corporate / Birthday / Sympathy / Other), recipient
 (yourself / someone else), budget range, vision (textarea)
 • Submit rose button
 • Inline JS success message (preventDefault)

7. ABOUT
 - Two-column: text left, photo composition right
 - Left: eyebrow, headline ("Family-owned since *[YEAR]*"), 3-paragraph
 story (where flowers come from, what makes the shop different,
 sustainability practices)
 - Right: layered photo composition, large florist-at-work photo
 (rounded 20px) + overlapping smaller shop interior photo (rounded
 16px, cream border)

8. DELIVERY AREA
 - Two-column: text left, info card right
 - Left: eyebrow, headline ("Where we *deliver*"), 1 paragraph about
 same-day in [CITY], next-day in surrounding areas, cutoff times
 - Right: list of zip codes / neighborhoods in 2-column compact grid,
 with cutoff time emphasized in monospace ("Order by 2pm for same-day")

9. CARE TIPS
 - Thin cream section
 - Eyebrow + headline ("Make them *last longer*")
 - 4-step horizontal row (stack mobile)
 - Each: outlined forest numeral (01-04) + tip title + 1-line description
 - Tips: Change water daily / Trim stems at angle / Keep cool / Remove
 fading blooms

10. TESTIMONIALS
 - 3 quote cards in grid
 - Each: oversized opening quotation in muted forest, quote body
 (specific bouquet, specific occasion, varied lengths), 5 rose SVG
 stars, separator, gradient-circle initials avatar + first name +
 last initial + occasion ("Anniversary delivery")
 - NO fake stock photos

11. HOURS + MAP
 - Two-column: hours table left, Google Maps embed right (rounded 24px,
 cream border)
 - Map iframe via Google Maps embed URL (no API key)
 - Floating overlay: shop name, address, "Get directions →"

12. INSTAGRAM STRIP
 - "FRESH ON INSTAGRAM" label left + 9-image grid right (Unsplash:
 "flower arrangement", "bouquet hands", "florist workbench")
 - Each rounded 8px, slight desaturate on hover
 - Below: "Follow for daily blooms →" Instagram link

13. NEWSLETTER
 - Centered card on blush, forest radial blob accents
 - Eyebrow "PETAL POST", headline ("New blooms, *every Tuesday*"),
 inline email input + rose submit + inline success

14. FOOTER (deep forest)
 - Centered wordmark cream serif
 - Italic serif tagline below (NOT handwritten)
 - Social row: rose-bordered glass circles (Instagram + Pinterest)
 - Bottom: address + hours + delivery cutoff + copyright

═══════════════════════════════════════════════════════════════
TECHNICAL REQUIREMENTS
═══════════════════════════════════════════════════════════════
- Single index.html, no build step
- JSON-LD `Florist` schema in <head> with name, address, telephone,
 openingHours, areaServed (list of zips/neighborhoods)
- 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; mailto with prefilled subject for custom orders
- Responsive at 900px and 500px breakpoints
- Semantic HTML5; aria-labels on icon-only links
- Favicon: inline SVG data URI (tulip or leaf mark)

═══════════════════════════════════════════════════════════════
COPY VOICE
═══════════════════════════════════════════════════════════════
Earthy, sensory, seasonal. Treats flowers as craft, not commodity.
Specific over generic ("Garden roses from a farm two hours north, cut
yesterday morning", not "fresh flowers daily"). Headlines short with ONE
italic word. Body copy mentions specific flowers in season, specific
farms. Testimonials feel like real reviews, specific occasion, varied
lengths.

═══════════════════════════════════════════════════════════════
ANTI-PATTERNS TO AVOID
═══════════════════════════════════════════════════════════════
- No emojis (including flowers, hearts, tulips, roses)
- No script/handwritten fonts (no Allura, no Pacifico)
- No "passion for flowers", "love what we do", "magic in every bouquet"
 filler
- No bouncing petal cursors or floating flower particles
- No fake stock photos of pristine bouquets on white backgrounds
- No real wholesale/grower logos as images, typeset names
- No "Voted best florist" badge graphics
- 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: "Florist" 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. Include JSON-LD
schema. Show the file as a single code block and briefly summarize the
design decisions made.