The live demo was built from exactly this text — nothing added.

# Florist Shop Website

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

## Brief
A single-page shop for [SHOP], a corner florist in [CITY] — same-day delivery on orders before [CUTOFF], bouquets from $[BASE_PRICE]. It must sell flowers honestly: an eight-bouquet catalogue with size and vase options priced live, a delivery date picker (next 7 days, Sundays closed, same-day before the cutoff), a gift message with a live notecard preview, a cart drawer with per-line variants and date, and a client-side checkout that says it takes no payment. One page: index.html with sections (#shop, #subscriptions, #care). Everything runs in the browser; nothing is submitted anywhere.

- Audience: Gift-givers in a mild panic and regulars who know what they like: partners, adult children, apology drafters. They shop on phones, care about the delivery date above all, and want the card message to sound better than they can write.
- Goal: Fill the cart and pick the date. Within ten seconds a visitor sees the same-day cutoff, the price range and the first bouquets; within a minute they have a size, a date and a message started.
- Tone: Warm, lightly witty, flower-literate but never gatekeep-y. Concrete stems and seasonal notes, one joke about lilies, no 'express your emotions through flowers'.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react (MIT), react-dom (MIT), motion (motion.dev, import from 'motion/react') (MIT), lucide-react (MIT), tailwindcss (MIT), postcss (MIT), autoprefixer (MIT), vite (MIT), @vitejs/plugin-react (MIT), typescript (Apache-2.0), @fontsource/lora (OFL-1.1), @fontsource-variable/albert-sans (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Scaffold with npm create vite@latest using the react-ts template. One HTML page at the project root: index.html (entry src/main.tsx).
  - vite.config.ts: base './', plugins [react()], build { outDir 'dist', sourcemap false, assetsInlineLimit 0 }. Do not copy src/ into dist/.
  - Tailwind 3.4 through PostCSS, content ['./index.html', './src/**/*.{ts,tsx}']. In tailwind.config.ts add every color under Design to theme.extend.colors with kebab-case keys (cream-blush, petal, card, leaf, leaf-deep, moss, poppy, poppy-deep, ink-green, rule) and fontFamily display ['Lora', 'Georgia', 'serif'], sans ['Albert Sans Variable', 'system-ui', 'sans-serif']. Set borderRadius DEFAULT to 14px and add maxWidth { container: '1180px' }.
  - In src/fonts.ts import '@fontsource/lora/500.css', '@fontsource/lora/600.css', '@fontsource/lora/500-italic.css' and '@fontsource-variable/albert-sans'; import src/fonts.ts and src/index.css from the entry file.
  - File layout: src/content.ts (every string, bouquet, size price, note, review, hour and image path, typed), src/lib/brand.ts (shopSlug = [SHOP] lowercased with every run of non-alphanumeric characters replaced by '-', emailDomain = shopSlug without hyphens + '.com'), src/lib/storage.ts (safe localStorage get/set wrapped in try/catch, keys prefixed with shopSlug + ':'), src/lib/cutoff.ts (cutoffInfo(now): parses [CUTOFF]; returns { sameDay: boolean, hoursLeft, minutesLeft } from the client clock), src/lib/dates.ts (nextDays(7) with Sundays marked closed; price math: size multiplier posey ×0.75 / bouquet ×1 / abundant ×1.45 off the bouquet base).
  - State: src/store/cart.ts is a tiny external store (useSyncExternalStore) holding lines { key: '<slug>|<size>|<vase>', slug, size, vase, date, message, qty } plus drawer open state and the placed flag, persisted to localStorage key shopSlug + ':cart'. The gift message is per-line (chosen at add time, editable in the drawer).
  - Components in src/components/: Header.tsx (with CartButton + count), CutoffBanner.tsx (the live countdown), Reveal.tsx (Motion whileInView wrapper), Eyebrow.tsx, Footer.tsx; Hero.tsx, Catalogue.tsx (BouquetCard.tsx with SizePicker.tsx, VaseToggle.tsx, AddToCart.tsx), DatePicker.tsx (DayChips.tsx), MessageCard.tsx (the drawn notecard preview), CartDrawer.tsx (LineRow.tsx, QtyStepper.tsx, Checkout.tsx, PlacedCard.tsx), Subscriptions.tsx, Reviews.tsx, CareBlock.tsx. src/pages/Home.tsx composes them.
  - Before the first build, download every image listed under Assets into public/images/ with curl -L -o using the exact file names given. The build itself never fetches anything.
  - public/favicon.svg as described under Assets. index.html: lang en, <meta name='theme-color' content='#FBF6F1'>, <link rel='icon' href='./favicon.svg' type='image/svg+xml'>, <title>[SHOP] — Flowers delivered in [CITY]</title>.
  - Write ASSETS.md at the project root as described under Assets.
  - dist/ holds index.html, hashed JS/CSS, the woff2 fonts, favicon.svg and the six images. Keep it under 10 MB.

## Variables
- [SHOP] — Shop name (default: "Petals & Post"). Invented florist name. Used in the wordmark, title, footer, email (hello@ + shopSlug without hyphens + .com) and localStorage keys. Never a real shop.
- [CITY] — City (default: "Portland, Maine"). Where the shop delivers. Used in the hero, delivery copy, reviews and the footer. Real cities fine; streets invented.
- [CUTOFF] — Same-day cutoff (default: "2pm"). The same-day order cutoff hour, written like '2pm' or '1pm'. Drives the countdown banner, the date picker's same-day chip and one FAQ-style line. Keep it noon–4pm.
- [BASE_PRICE] — Bouquet base price (default: "42"). The standard 'bouquet' size price of the signature arrangement as digits. Posey is ×0.75, abundant ×1.45; every bouquet's sizes derive from its own base around this figure.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/florist-shop-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
- Cream Blush `#FBF6F1` — Page background throughout.
- Petal `#F4E6DE` — Alternate section background (Reviews, Care), hover fill, chips.
- Card `#FFFDFA` — Bouquet cards, notecard preview, drawer, placed card.
- Leaf `#33523F` — Primary: headlines' weight color, primary buttons, size selected, focus ring.
- Leaf Deep `#243B2D` — Primary hover, footer background.
- Moss `#7E8F7C` — Secondary text, captions, eyebrows, closed days.
- Poppy `#D4574B` — The one warm accent: prices, the cutoff countdown, selected date, cart badge, ribbon details.
- Poppy Deep `#B23F35` — Poppy hover, pressed, the countdown's final hour.
- Ink Green `#2A2E26` — Body text, bouquet names, icon color.
- Rule `#E7DAD1` — 1px hairlines, card borders, input borders, dividers.

### Typography
- Display: H1, H2, bouquet names, prices in large sizes, the wordmark, notecard script line: Lora (OFL), weights 500/600
- Text and UI: body, eyebrows, buttons, form fields, captions; tabular numerals for prices and the countdown: Albert Sans (OFL), weights 400/600/700

### Layout & motion
- Spacing: 8px base unit. Container max-width 1180px, centered, side padding 48px desktop, 32px tablet, 20px under 640px. 12-column grid, column gap 24px. Section vertical padding 96px desktop, 72px under 1024px, 56px under 640px. Type scale: H1 clamp(42px, 6.2vw, 78px) Lora 500, line-height 1.04; H2 clamp(28px, 3.8vw, 46px) Lora 500; H3 22px Lora 600; italic phrases in headings use Lora 500 italic (marked *asterisks*, rendered <em>); lead Albert Sans 400 17.5px / 1.7 Ink Green at 90%; body 15.5px / 1.7 (max-width 62ch); eyebrow Albert Sans 700 12px uppercase letter-spacing 0.16em Moss; caption 13px Moss. Buttons: height 50px, Albert Sans 700 14px. Primary: Leaf fill, Card text. Secondary: 1px Leaf border, Leaf text. Small 38px. Inputs: height 48px, 1px Rule border, Card fill, focus Leaf border. Focus ring everywhere: 2px Leaf outline with 3px offset.
- Radius: 14px on cards, buttons, inputs, chips, the notecard and the drawer. 999px only for pills, day chips, the cart badge and the ribbon dot.
- Motion: Easing: --ease-out cubic-bezier(0.22, 0.61, 0.36, 1) for reveals, the drawer and price changes; --ease-io cubic-bezier(0.65, 0, 0.35, 1) for the notecard and checkout swaps. Light-footed and friendly.
- Motion: Reveal: blocks wrapped in <Reveal> start at opacity 0, translateY(14px) and settle over 700ms --ease-out when 15% visible (Motion whileInView, viewport once). Siblings stagger 75ms.
- Motion: CutoffBanner: the countdown ticks every minute (tabular numerals hold width); in the final hour the figure turns Poppy Deep and the banner gently pulses once a minute (off under reduced motion).
- Motion: Bouquet cards: hover lifts 3px; the size picker's prices crossfade 150ms; selecting a size fills the chip Leaf; the vase toggle slides a small drawn vase glyph in.
- Motion: Add to cart: the button reads 'Added ✓' for 1300ms; a small petal (drawn) drifts from the button toward the cart button and fades (700ms, once); the badge pops 1→1.3→1.
- Motion: Notecard preview: the drawn notecard sits beside the message field; typed text appears on the card in Lora italic in real time, with a soft underline draw; the signature line ('— with love, [name]') types once when the name field completes.
- Motion: Date picker: day chips fill Petal on hover and Leaf (Card text) when selected; the same-day chip carries a Poppy 'today' dot that disappears after the cutoff, the chip itself greying out with the caption 'tomorrow''s earliest now'.
- Motion: Cart drawer: overlay fades 300ms, drawer slides from the right 420ms --ease-out; qty steppers pulse the line's subtotal count (300ms); removing collapses the row 240ms.
- Motion: Checkout swap: the placed card rises 16px (320ms --ease-io) with a drawn Poppy ribbon 'ORDER TIED' stamp rotating in -6deg→-2deg; the order number (shopInitials-####) types 700ms.
- Motion: Links: .link-draw grows a 1px currentColor underline over 280ms on hover and focus-visible.
- Motion: prefers-reduced-motion: reduce — no pulses, petals, type-ins or counts; drawer and swaps appear; color/border hover changes stay. Use CSS @media in index.css plus Motion's useReducedMotion in components.
- Imagery: Warm real photography, all six made for this template in one consistent style: soft daylight, blush and cream with deep green leaves and poppy accents, one shop's world — buckets, stems, wrapped paper, workbench corners. Never a person (no faces, no hands); no readable signage. Every photo uses object-fit cover with the object-position given under Assets, 14px corners, no shadow; photos on Cream get a 1px Rule outline. Captions in Albert Sans 13px Moss. Drawn in code: the notecard, the vase glyph, the petal, the ribbon stamp, chips and the favicon. Icons: lucide-react only, stroke width 1.75.

## Pages & Sections
### Shop (`index.html`)
1. **Content file and copy rules** — All copy below is written for the default values ([SHOP] = Petals & Post, [CITY] = Portland, Maine, [CUTOFF] = 2pm, [BASE_PRICE] = 42). Put every string, price and list in src/content.ts and render from it. If any variable value differs, rewrite the hero, all eight bouquets (names, stems, seasonal notes), reviews, subscription copy and care lines so they are specific and believable for the new shop, keeping the same structure and counts (8 bouquets, 3 sizes each, 1 vase toggle, 7 date chips, 3 subscriptions, 3 reviews, 3 care lines). All stems, prices and reviewers are invented. Bouquets (slug · name · base · note · photo): 'meadow-post' The Meadow Post $42 'ranunculus, sweet pea, rye grass — like a letter from a field' hero-bucket; 'saturday-market' Saturday Market $48 'dahlias, cosmos, whatever the grower overslept on' market-wrap; 'first-blush' First Blush $45 'garden roses, lisianthus, a hesitation of astilbe' blush-rose; 'hearth-side' The Hearth Side $56 'amber mums, dried grasses, eucalyptus — for tables with candles' hearth-amber; 'wild-thursday' Wild Thursday $39 'whatever was left at close, made gorgeous — florist''s choice, honestly' wild-stems; 'white-noise' White Noise $58 'white ranunculus, jasmine, no green in sight' white-clean; 'poppy-argument' A Poppy Argument $50 'poppies, wheat, one dramatic branch — a statement, possibly an apology' poppy-argument; 'tuesday-tulips' Tuesday Tulips $34 'twenty tulips, paper-wrapped, no ceremony' tulip-wrap.
   Layout: n/a
   Motion: n/a
2. **Cutoff banner and header** — CutoffBanner (top, Petal band, Leaf Deep text): 'Order by [CUTOFF] for same-day delivery in [CITY]' and the live countdown 'You have 3h 12m' in Poppy (tabular) — after cutoff: 'Same-day has closed — tomorrow''s first deliveries are open.' Header: left the wordmark '[SHOP]' (Lora 600 21px) over 'Cut · wrapped · delivered · [CITY]' (10px uppercase Moss); right nav (Albert Sans 600 14px): 'Bouquets' → #shop, 'Subscriptions' → #subscriptions, 'Care' → #care; the CartButton (Lucide ShoppingBasket + Poppy count badge) opens the drawer.
   Layout: Banner static top, 36px; header sticky below it (72px), Cream Blush/94% blur, Rule border.
3. **Hero** — Two columns. Left: eyebrow 'FLOWERS, CUT THIS MORNING'; H1 'Say it' / '*in season.*'; lead (max-width 520px): 'A corner shop in [CITY] with one rule: if it wasn''t cut this week, it isn''t going out this week. Wrapped in paper, carried by bike, at the door before dinner.'; the primary 'Send flowers today' → #shop with the caption 'Order by [CUTOFF] — the countdown above is honest.'; three quick facts in mono-free small caps: 'Free delivery over $60'; 'Sundays we rest (the flowers too)'; 'Gift note included, always'. Right: hero-bucket.webp (4:3) with the caption 'Saturday''s bucket, 7am — photo by the shop, proudly'.
   Layout: Cream Blush background, vertical padding 104px top; left 6 cols, right 5 cols offset 1.
4. **Bouquet catalogue** — Section id='shop'. Eyebrow 'THE CATALOGUE' and H2 'Eight bouquets, three sizes, one honest vase.' The eight BouquetCards in a 4x2 grid: photo, name (Lora 600 20px), the seasonal note (13.5px Moss), the SizePicker (Posey / Bouquet / Abundant with derived prices, tabular), the VaseToggle ('+ Vase · glass, $12' — adds a drawn vase glyph beside the photo), the date chip row (today if before cutoff, else tomorrow + 6 days, Sundays disabled 'we rest'), the message field placeholder ('Gift note (optional) — we write it on the card'), and 'Add — $42' (live, Leaf fill). Cards open expanded on desktop, stacked-scroll on mobile. Five distinct bouquets map one-to-one to five distinct photos (hero photo never reused as a product card); Tuesday Tulips shows tulips, White Noise shows white ranunculus and jasmine, First Blush shows blush roses, Saturday Market shows the market wrap, The Poppy Argument shows poppies - each photo actually shows its named flowers.
   Layout: Petal background. 4 columns 20px gap (2 under 1024px, 1 under 640px); cards on Card 1px Rule border 18px padding; photo aspect 4:3 top; the price button full-width.
5. **Message notecard** — Between the catalogue and the drawer logic sits the MessageCard demo strip: 'The card, before we write it' — a drawn notecard (Card, 1px Rule border, a Poppy ribbon corner) previewing the current draft in Lora italic, with the line 'Handwritten, in actual ink, by whoever wraps the flowers.' and a small pen icon. This is a component of the add-flow (the message field lives on each card); the strip explains what happens to it. The notecard enlarges with a sample handwritten-style line and a signature placeholder, shown beside the field on desktop and above it on mobile, with a subtle eyebrow.
   Layout: Cream Blush band, two columns: the drawn card 4 cols, the explainer 6 cols offset 2; 72px padding.
6. **Cart drawer and checkout** — The CartDrawer: overlay Leaf Deep at 35%; drawer on Card slides from the right (380px): 'Your flowers' header, lines (photo thumb, name, size · vase row, date, message preview truncated to 28 chars, qty stepper, line price tabular), the delivery note ('Riding to [CITY] addresses, Tue–Sat'), subtotal, 'Checkout' primary with caption 'This demo takes no payment — it ties the order with ribbon and saves it here.' PlacedCard: the Poppy 'ORDER TIED' stamp, order number 'PP-####' typed, 'Delivering [DAY] between 4pm and 7pm.', the echoed message on the drawn card, 'Another bouquet' (clears) and 'Back to the shop'. Persisted in localStorage.
   Layout: Drawer full-height right, 20px padding, scrollable lines; checkout swaps inside the drawer 320ms --ease-io.
7. **Subscriptions, reviews and care** — Section id='subscriptions'. Eyebrow 'EVERY WEEK, OR EVERY MONTH' and three cards: 'The Weekly Post' — 'A fresh hand-tied bouquet every Friday · from $36/week'; 'The Monthly Hearth' — 'One abundant arrangement on the first of the month · from $58/month'; 'Office Fridays' — 'Desk-sized poseys for the whole team · quoted per floor'. A caption: 'Pause for holidays, pollen season, or heartbreak — two taps, no calls.' Reviews (id 'reviews' implicit in section): '"The card message came out better than what I sent them. I''ve stopped trying."' — 'Rosa M., monthly'; '"Ordered at 1:58pm, delivered by 5. I checked the clock twice."' — 'Dan O., same-day convert'; '"My mother now refers to Thursday as tulip day. This is their fault."' — 'Priya S., weekly'. Care (id='care'): three lines with icons — 'Trim 2cm, cold water, every other day'; 'Keep off the radiator and out of the fruit bowl (apples are gossips)'; 'Swap the sugar pill for a penny — old florist''s trick, works on tulips'.
   Layout: Petal band for subscriptions (3 cards, Card surfaces); Reviews on Cream Blush (3 columns); Care a hairline-bounded strip of three, 56px padding.
8. **Footer** — Leaf Deep background, Card-toned text. Three columns: 1) wordmark + '[SHOP]' over 'Cut, wrapped, delivered · [CITY]'. 2) 'The shop': '14 Marigold Lane, [CITY]', hello@ + emailDomain, '(207) 555-0173'. 3) 'Around': Bouquets, Subscriptions, Care, and 'Weddings & events — write us' (mailto). Bottom line: '© [SHOP]. Stems change; the ribbon doesn''t.'
   Layout: Vertical padding 64px, 3 columns, bottom line 32px below a Card/15% rule. Under 768px: stacked.

## Assets
- image: Template photos made for this design (free to redistribute with the template). Download each with curl -L -o into public/images/: https://media.vibefather.ai/assets/1187bf3d-39e4-4025-a1ee-f4a5339d9f06/hero-bucket.webp → public/images/hero-bucket.webp (Hero, meadow-post card; object-position 50% 55%; alt 'A galvanized bucket of mixed stems in morning light'); https://media.vibefather.ai/assets/1187bf3d-39e4-4025-a1ee-f4a5339d9f06/market-wrap.webp → public/images/market-wrap.webp (saturday-market, tuesday-tulips; alt 'A paper-wrapped bouquet on a market table'); https://media.vibefather.ai/assets/1187bf3d-39e4-4025-a1ee-f4a5339d9f06/blush-rose.webp → public/images/blush-rose.webp (first-blush, white-noise; alt 'Blush garden roses with soft astilbe in a glass jar'); https://media.vibefather.ai/assets/1187bf3d-39e4-4025-a1ee-f4a5339d9f06/hearth-amber.webp → public/images/hearth-amber.webp (hearth-side; alt 'Amber mums and dried grasses against a dark shelf'); https://media.vibefather.ai/assets/1187bf3d-39e4-4025-a1ee-f4a5339d9f06/wild-stems.webp → public/images/wild-stems.webp (wild-thursday; alt 'A loose wild arrangement of leftovers made beautiful'); https://media.vibefather.ai/assets/1187bf3d-39e4-4025-a1ee-f4a5339d9f06/poppy-argument.webp → public/images/poppy-argument.webp (poppy-argument; alt 'Red poppies and wheat with one dramatic branch'). Six files in total.
- image: Write ASSETS.md at the project root with a table: path, source URL, author, license — one row for each photo (source 'media.vibefather.ai, made for this template', author 'VibeFather', license 'Distributed with the template'), plus rows for @fontsource/lora and @fontsource-variable/albert-sans (OFL-1.1) and lucide-react (ISC). Never replace photos with stock sites or images with people, faces, hands or readable signage.
- icon: lucide-react only: ShoppingBasket, Plus, Minus, Check, X, Truck, CalendarDays, PenLine, Sun, Droplets, Scissors, Leaf. Stroke width 1.75, 16–24px, color inherits. The notecard, vase glyph, petal, ribbon stamp and favicon are drawn SVG. public/favicon.svg: viewBox 0 0 32 32, a 32x32 rect rx 9 filled #33523F, a Card (#FFFDFA) tulip glyph (two petals and a stem) with a Poppy (#D4574B) ribbon cross. No other logo: the shop name is always set as type; no real payment marks.
- font: Install @fontsource/lora and @fontsource-variable/albert-sans and import them in src/fonts.ts as listed in Setup. Vite bundles the woff2 files into dist/.
- image: Drawn in code: the notecard and ribbon corner, the vase glyph, the drifting petal, the ORDER TIED stamp, day chips and the favicon. No other bitmaps; no illustrations; no map tiles.

## Don'ts
- No backend, no form submission, no fetch to any API: the cart, messages and order save in the browser only (localStorage); the checkout says it takes no payment; the cutoff countdown uses the client clock and says so.
- All links on this single page are anchors (./index.html#shop, #subscriptions, #care) plus the footer mailto.
- Self-host everything: fonts through Fontsource, icons as npm packages or inline SVG, images downloaded into public/images/. No CDN <script> or <link> tags, no Google Fonts, no analytics.
- Production build: minified, no source maps, no src/ copied into dist/, single command npm run build, output in dist/ under 10 MB.
- No real florists, delivery brands or payment marks; no photos with people, faces or hands; no readable signage; all stems, prices and reviews invented.
- No dates or years anywhere; the date picker shows weekday chips (Today/Tomorrow then weekday names) without full dates; the site never shows today's date.
- Never mention VibeFather or any other brand inside the site except the optional credit footer link; all copy is invented US English.
- Respect prefers-reduced-motion: no pulses, petals, type-ins or counts; the countdown still ticks (it is information, not decoration); color/border hovers stay.
- The page must work at 1440x900 desktop and 390x844 mobile with zero console errors; size/date/message controls, the drawer and checkout work with keyboard only and visible focus rings; the drawer traps focus while open.
- Keep copy concrete: no lorem, no 'emotions through flowers'; every price, stem list and hour lives in src/content.ts.

---
— Prompt by VibeFather · https://vibefather.ai/t/florist-shop-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.