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

# Food Delivery App

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

## Brief
Build [BRAND], an original food-delivery web app for [AUDIENCE], serving [OCCASION] around the fictional [DELIVERY_AREA]. Include address selection, cuisine filters, restaurant cards with ratings and delivery details, a complete restaurant menu with sticky category tabs, a persistent minimum-order basket, an itemized sample checkout, and a live-style order tracker with an animated courier route. Use five invented restaurants, original English copy, six generated food photographs, and one code-drawn neighborhood map; every transaction and delivery event is simulated locally.

- Audience: [AUDIENCE]. The template should also serve restaurant groups, food-product founders, indie hackers, and designers who need a polished static prototype of a complete delivery workflow.
- Goal: Let a visitor move continuously from restaurant discovery to a menu, meet the minimum order, understand the full checkout total, place a sample order, and watch its status and courier route advance. Direct visits to the restaurant, checkout, and tracking routes must also contain meaningful demo content, and every visible control must update real client-side state.
- Tone: Warm, brisk, neighborly, and precise. Use appetizing but restrained food writing, transparent prices and timing, and clear demo disclosures. Avoid delivery-platform clichés, manufactured urgency, exaggerated ratings claims, or language that implies a real order or courier exists.

## Stack
- Framework: Vite 6 + React 19 + TypeScript
- Styling: Tailwind CSS 4
- Libraries: motion (MIT), lucide-react (ISC), @fontsource-variable/bricolage-grotesque (OFL-1.1), @fontsource-variable/inter (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Set Vite base to './' and build.sourcemap to false; emit minified static files into dist/ with index.html as the only HTML entry and no src/ directory copied into the output.
  - Configure Tailwind CSS 4 through @tailwindcss/vite; define the color tokens, typography, route-map keyframes, progress treatments, and reusable app utilities in src/index.css.
  - Implement index.html plus hash routes #/restaurant, #/checkout, and #/tracking. Direct #/restaurant selects the first restaurant; direct #/checkout uses the initialized sample or persisted basket; direct #/tracking creates the built-in sample order when no submitted order exists.
  - Create src/content.ts as the single source for variable values and derived copy, restaurant and menu records, cuisine filters, address presets, fees, sample order stages, image paths, map labels, and UI labels. Rewrite default copy when variables change and derive a storage namespace by lowercasing BRAND and removing spaces and punctuation.
  - Use one React context with reducers for selected address, cuisine, selected restaurant, basket lines, checkout fulfillment, submitted order, tracking playback, dialogs, and toast feedback. Do not add a state-management or routing library.
  - Persist basket lines, address selection, initialization state, submitted order, and tracking timestamps in localStorage under one versioned key derived from BRAND. Validate stored restaurant IDs, dish IDs, quantities, and totals against src/content.ts when loading.
  - On the first visit only, initialize one Charred lemon chicken in the sample basket and label it as a prefilled demo. Clearing the basket must remain empty after reload; never reseed it after the user clears or submits it.
  - Use integer minor units for all prices and Intl.NumberFormat with [CURRENCY] for display. Changing currency changes formatting only; rewrite price values explicitly rather than implying conversion.
  - Use Motion for route changes, drawers, dialogs, basket updates, and toasts. Use SVG path geometry plus requestAnimationFrame for courier position; pause timers while the document is hidden and never use Math.random for order events.
  - Self-host Bricolage Grotesque Variable and Inter Variable through the listed Fontsource packages. Bundle Lucide icons locally and draw only the original [BRAND] basket-line symbol and neighborhood map as inline SVG.
  - Implement accessible dialogs and drawers with a visible close button, Escape and scrim dismissal, focus trapping, focus restoration, and a polite status region for basket, address, checkout, and tracking updates.
  - Respect prefers-reduced-motion from the first render: disable autonomous courier movement and nonessential transitions, retain manual Next demo step and Replay controls, and keep every ordering interaction functional.

## Variables
- [BRAND] — Invented delivery service brand (default: "Pepper & Parcel"). Use in the wordmark, document title, storage namespace, checkout, order details, and footer; rewrite all brand-derived copy when changed.
- [OCCASION] — Meal occasion (default: "weeknight dinners"). A short lowercase occasion such as weeknight dinners or weekend lunches; adapt hero copy, empty states, and checkout labels without changing the food photographs.
- [AUDIENCE] — Primary customer audience (default: "busy neighbors who want a reliable meal without cooking"). Rewrite discovery and service copy for this audience while keeping the interface concise.
- [DELIVERY_AREA] — Fictional delivery district (default: "Maple District"). Use an invented district in the address bar, restaurant coverage copy, checkout, and map labels; never substitute a real branded location.
- [ACCENT] — Primary action accent as a hex color (default: "#B7472A"). Apply to primary buttons, selected chips, active categories, and route highlights while preserving accessible contrast.
- [CURRENCY] — Display currency (default: "USD"). Use Intl.NumberFormat for every price and keep all calculations in integer minor units.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/food-delivery-app 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
- Canvas `#F6F1E8` — Warm parchment app background and spacious separation between modules.
- Surface `#FFFDF8` — Restaurant cards, menu panels, address dialog, checkout, and sticky bars.
- Ink `#25291F` — Primary text, wordmark, icons, prices, and high-contrast outlines.
- Muted `#6E7165` — Metadata, secondary copy, timings, and inactive controls.
- Tomato `#B7472A` — Default value of [ACCENT]; primary actions, active filters, and route progress with white text.
- Sage `#DDE6D4` — Success panels, vegetarian labels, delivered states, and quiet map areas.
- Leaf `#365B3D` — Success text, availability, and high-contrast accents on Sage.
- Honey `#F1C75B` — Rating stars and small highlights, always beside dark Ink text.
- Hairline `#E3DCCE` — One-pixel borders, dividers, input outlines, and progress tracks.

### Typography
- Hero, page headings, restaurant names, and editorial food moments: Bricolage Grotesque Variable (OFL), weights 500/600/700/800
- Navigation, menu items, prices, forms, status labels, and body copy: Inter Variable (OFL), weights 400/500/600/700

### Layout & motion
- Spacing: Use a 4px base unit. App content has a 1280px maximum width with 28px desktop and 16px mobile gutters. Desktop header is 72px, mobile header 64px, and major page modules are separated by 24px. Restaurant cards use 16px padding, menu rows 20px, and checkout panels 24px. Keep interactive targets at least 44×44px, preserve 16px between sticky bars and content, and include safe-area padding below mobile controls.
- Radius: Use 24px for the photographic hero and tracking map, 18px for restaurant and checkout cards, 14px for menu images and dialogs, 10px for inputs, and fully rounded shapes only for cuisine chips, rating badges, and compact icon buttons. Use 1px Hairline borders and short warm shadows rather than glass effects.
- Motion: Use 180–240ms ease-out transitions for cuisine selection, restaurant hover, add buttons, quantity steppers, address changes, and cart badges; update state before playing any effect.
- Motion: Hash-route changes fade and settle 8px upward over 200ms. Preserve the shared header and bottom navigation without animating them, and move focus to the new page heading.
- Motion: Adding a dish draws one small checkmark and pulses the basket badge once. The minimum-order progress bar animates width over 260ms while its text updates immediately.
- Motion: Sticky menu category tabs use a 180ms active-indicator slide and smooth scroll with the correct header offset; scrollspy changes the active tab without moving the page.
- Motion: Checkout success transitions directly into tracking with one 240ms order-card settle. Do not use confetti, celebratory audio, or a fake payment-processing delay.
- Motion: For a playing order, move the bicycle marker continuously along the SVG route using getPointAtLength, and reveal route progress with the same normalized value. Status changes and courier position derive from one 60-second clock.
- Motion: Dialogs and mobile drawers enter over 220ms with opacity and a 12px settle; toasts remain for 1800ms. Never block basket or navigation controls during an animation.
- Motion: Under prefers-reduced-motion, remove route settles, smooth scrolling, badge pulses, progress interpolation, and autonomous courier motion. Show a static route and allow manual tracking-stage changes only.
- Imagery: Use exactly six local AI-generated realistic editorial food photographs: one wide neighborhood-dinner tableau and five 4:3 restaurant-signature dishes. Every image shares soft upper-left window daylight, warm cream stone surfaces, matte ivory ceramics, subtle tomato and sage accents, natural food texture, gentle contact shadows, 50mm lens perspective, and fine 35mm grain. Keep plates fully readable with appetizing portions and no text, packaging marks, logos, watermarks, people, hands, or recognizable branded products. Use each restaurant photograph only for that restaurant and its matching signature dish; delivery-spread.webp belongs only to discovery. Do not rename a supplied dish into unrelated food when variables change. The first screen must prominently feature the wide tableau, not typography alone.

## Pages & Sections
### Restaurant discovery (`index.html`)
1. **Shared app shell and address bar** — Create an original [BRAND] text wordmark beside a simple inline-SVG basket made from two horizontal lines and one curved handle. The sticky header contains Home, a delivery-address button, Track order, and a Basket button with a live unit-count badge. Default address copy is 'Deliver to · 128 Willow Lane, [DELIVERY_AREA]'. Clicking it opens an address dialog with three fictional preset choices: 128 Willow Lane, 42 Alder Street, and 17 Garden Mews, all in [DELIVERY_AREA]. Selecting one updates the shared address everywhere and closes the dialog; do not request geolocation or a real personal address. Include a small 'Local demo · simulated restaurants and orders' label. On mobile, keep the wordmark and address in the header and use fixed bottom navigation for Home, Restaurants, Track, and Basket with real route targets. The shared shell described here applies to every route.
   Layout: Desktop header is a 72px three-column row inside the 1280px container, with wordmark left, address center, and actions right. Mobile uses a 64px two-row header whose address truncates to one line without covering the wordmark. Bottom navigation is 64px plus safe-area inset, with 80px page-bottom clearance. Dialog max-width is 460px with three full-width address options.
   Motion: Address selection and active navigation update immediately. Dialog follows the shared transition; the basket badge pulses once after additions only.
2. **First-screen food tableau and search** — Use delivery-spread.webp as the large visual anchor. Eyebrow: '[DELIVERY_AREA] kitchen collective'. Heading: 'Good food, close to home.' Supporting copy: 'Order [OCCASION] from independent kitchens, with every fee clear before you order.' Add a compact search field labeled 'Search restaurants or dishes' with placeholder 'Try chicken, bowls, or flatbread'. Typing filters restaurant cards by restaurant name, cuisine, and menu-item names; show a clear button and a result count. Include the primary action 'Browse restaurants', which moves focus and scrolls to the restaurant grid. A small overlay badge reads '5 neighborhood kitchens · sample availability'. Do not add app-store buttons, promotional countdowns, or a marketing-section stack.
   Layout: At 1440×900, place the hero immediately below the header in a 12-column Surface panel approximately 360px high: five columns for copy/search and seven for the full-height food tableau. Use a gentle Canvas-to-transparent scrim only where copy meets the image. Below 768px stack copy above a 190px image crop, keep the heading no larger than 40px, and let the cuisine row begin within the first screen where space allows.
   Motion: The image has one subtle 1.02 scale entrance over 420ms; no continuous Ken Burns effect. Search results and clear state update immediately.
3. **Cuisine filters** — Render six horizontally arranged chips from src/content.ts: All, Grill, Seafood, Vegetarian, Flatbread, and Dessert. All is selected initially. Selecting a chip filters the restaurant list and updates the heading '5 kitchens for [OCCASION]' to the matching count and cuisine. Search and cuisine filters compose; an empty result shows 'No kitchens match that search' with working Clear filters action. Keep result counts derived from data, never hard-coded.
   Layout: Use a sticky filter row below the shared header only while the restaurant grid is in view, with a solid Canvas background and Hairline bottom border. Desktop chips sit left with result count right. Mobile uses a horizontal snap row with 12px gaps and no visible scrollbar; chips never shrink below their content width.
   Motion: Selected chip fills [ACCENT] with white text and its indicator slides over 180ms. Filtered cards use a short opacity update without reordering delays.
4. **Restaurant list and exact sample data** — Create five restaurant cards in this order, each with its matching local image, cuisine, rating, review count, delivery estimate, delivery fee, minimum order, and View menu action. Ember & Thyme: charred-chicken.webp, Grill, 4.8, 324 sample reviews, 20–30 min, $1.49 fee, $20 minimum. Nori & Ladle: sesame-salmon.webp, Seafood, 4.7, 186, 25–35 min, $2.49, $22. Juniper Bowl: garden-grain-bowl.webp, Vegetarian, 4.9, 218, 15–25 min, $0.99, $15. Copper Crust: truffle-flatbread.webp, Flatbread, 4.8, 441, 20–30 min, $1.99, $18. Butter & Berry: citrus-pavlova.webp, Dessert, 4.9, 157, 15–25 min, $0.99, $12. Label ratings and availability as sample data once above the grid. Selecting the entire card or View menu stores that restaurant and opens #/restaurant; direct route access defaults to Ember & Thyme.
   Layout: Use a three-column desktop grid with equal-height Surface cards and 4:3 image crops; the first card may span two columns only if all five remain visually balanced. Tablet uses two columns and mobile one. Keep rating, time, and fee in one compact metadata row with Honey star and Lucide Clock/Bike icons; place minimum-order copy below without truncating restaurant names.
   Motion: Cards lift at most 3px on hover with a shallow shadow. Route selection uses the shared 200ms settle; reduced motion removes the lift.
5. **Service note and footer** — Below the grid add a compact Sage service note titled 'One basket, one kitchen' explaining that each sample order contains dishes from the selected restaurant, its own minimum, and its own delivery fee. Add 'Switching kitchens starts a new sample basket after confirmation' and implement that confirmation when a non-empty basket would be replaced. Finish with [BRAND], 'Restaurants, ratings, menus, fees, addresses, and orders are fictional sample content. No payment is collected.' and the optional [CREDIT] link. Do not add dates, social counts, real coverage claims, or unrelated marketing sections.
   Layout: Use one horizontal desktop note with icon and text, stacking on mobile. Footer is a quiet two-row block with Hairline top border and enough bottom clearance for mobile navigation.
   Motion: No continuous motion; a single 8px reveal is optional and must be removed under reduced motion.

### Restaurant menu and minimum-order basket (`#/restaurant`)
1. **Restaurant cover and information** — Provide Back to kitchens and breadcrumbs Home / cuisine / restaurant. Show the selected restaurant's matching cover image, name, cuisine, sample rating and review count, delivery estimate, fee, minimum order, and 'Sample menu · availability is local demo data'. Default Ember & Thyme copy is 'Live-fire plates, bright sides, and a little something sweet.' Include a heart Save kitchen toggle persisted locally and an Information accordion with 'Kitchen hours · 11:30 AM–9:30 PM', 'Delivery only in this demo', and 'Allergen information is illustrative; this is not a real restaurant.' Switching restaurants with items in the basket requires a dialog explaining that the current basket will be cleared.
   Layout: Desktop cover uses a 5/7 grid with text left and a 4:3 photograph right, inside a 24px-radius Surface panel. Mobile stacks compact text above a 210px image. Keep Back and Save controls visible above the cover and preserve the shared shell.
   Motion: Cover image uses one 180ms crossfade when restaurant changes; save and accordion states update immediately.
2. **Sticky category tabs and menu records** — Build sticky category tabs derived from the selected menu with working click-to-scroll and IntersectionObserver scrollspy. Ember & Thyme has Popular, Mains, Sides, Dessert, and Drinks. Popular: Charred lemon chicken $18, 'Smoked paprika, charred lemon, pan juices', with charred-chicken.webp; Smashed cucumber salad $6, 'Sesame, rice vinegar, toasted seeds', text-only. Mains: Smoked short rib $22, 'Slow-roasted beef, onion jam, natural jus'; Harissa cauliflower $16, 'Roasted cauliflower, chickpeas, herb tahini'. Sides: Rosemary potatoes $5, 'Crisp potatoes, rosemary salt'; Charred broccolini $7, 'Garlic, chili, toasted almonds'. Dessert: Burnt honey custard $7, 'Silky custard, oat crumble'. Drinks: Blood-orange soda $4 and Cucumber sparkling water $3. Add dietary tags Vegetarian or Contains nuts only where accurate. Every row has description, price, and a 44px Add button with Plus; adding increments the shared basket and changes the control to a quantity stepper. Other restaurants each have four menu records with one matching signature photo and three text-only rows: Nori & Ladle—Sesame salmon $19, Miso mushroom don $15, Seaweed cucumber salad $6, Yuzu soda $4; Juniper Bowl—Garden grain bowl $14, Roast sweet potato bowl $13, Pickled cabbage cup $4, Mint lime cooler $4; Copper Crust—Truffle mushroom flatbread $16, Smoked tomato flatbread $14, Rosemary sea-salt knots $6, Basil lemonade $4; Butter & Berry—Citrus pavlova $9, Brown butter shortcake $8, Vanilla berry cup $6, Iced chamomile tea $4. Give every record an original one-line description and appropriate categories in src/content.ts; never reuse another restaurant's photograph.
   Layout: Desktop menu is an 8/4 grid with menu groups left and a compact basket summary right; the sticky tab row sits below the 72px shared header. Mobile tabs remain below the two-row header in a horizontal snap strip, and menu rows stack text above controls only when necessary. Photo-backed signature rows use 152×120px thumbnails; text-only rows retain aligned prices and a narrow Tomato ingredient rule rather than fake placeholder photos. Group headings have 32px top spacing and stable anchor offsets.
   Motion: Tabs use the active indicator and scrollspy behavior from Design. Add buttons briefly show Added without delaying the shared state update; quantity steppers replace them in place.
3. **Persistent minimum-order bar** — Whenever the basket has items, show a persistent bar with thumbnail, restaurant name, unit count, current merchandise subtotal, and progress toward that restaurant's minimum. On the fresh Ember & Thyme sample basket show '$18.00 subtotal · Add $2.00 to reach the $20.00 minimum' and an 90%-filled track. The View basket action always opens #/checkout when items exist; it is not disabled below minimum, while checkout submission remains disabled there. At or above minimum, replace the message with 'Minimum met · ready to review' in Leaf and fill the track. Include a small 'Prefilled sample basket' label until the visitor changes any quantity. Clear basket empties all lines after confirmation and persists the empty state.
   Layout: Desktop bar is sticky at the bottom within the 4-column basket summary and also fixed above the viewport bottom after the summary leaves view. Mobile uses one fixed Surface bar above bottom navigation with safe-area padding, a two-line progress message, and a full-width View basket action; it must never cover dish Add buttons or the tracking route.
   Motion: Progress width follows Design; subtotal and remaining amount update immediately. Bar entrance uses a 12px rise over 200ms and does not repeat on every quantity change.

### Basket and sample checkout (`#/checkout`)
1. **Basket lines and fulfillment** — Heading: 'Review your order'. With items, show restaurant name, each dish thumbnail when one exists, name, unit price, quantity stepper capped at 12, line total, and Remove with a five-second Undo toast. The fresh sample basket contains one Charred lemon chicken and clearly states 'This basket was prefilled for the demo'. With an empty basket, show a code-drawn basket, 'Your basket is ready for something good', and a working Browse kitchens action. Fulfillment includes the selected fictional address with Change opening the same preset dialog, delivery timing choices 'As soon as possible', '6:30 PM', '7:00 PM', and '7:30 PM' as sample slots, and an order-note field limited to 120 characters with placeholder 'Optional note for this sample order'. Do not request names, email, phone, card details, login, or a real address.
   Layout: Desktop uses an 8/4 grid with basket and fulfillment panels left and summary right. Mobile stacks all sections and keeps quantity controls at least 44px. Empty state is centered but retains shared navigation. Address and time choices use large selectable rows rather than dense dropdowns.
   Motion: Quantities and totals update before visual effects. Removal collapses over 160ms and Undo restores the exact line and quantity; address dialog follows shared behavior.
2. **Transparent totals and sample-order action** — Show merchandise subtotal, the selected restaurant's delivery fee, a fixed $1.25 sample service fee, and final total. Add no tax, tip, discount, small-order fee, or hidden charge. All math uses integer minor units and [CURRENCY]. If subtotal is below the restaurant minimum, show the exact amount still needed, disable Place sample order, and provide a working Add more dishes action back to #/restaurant. Otherwise enable the button. The payment panel contains only 'Demo payment · no card required' and the disclosure 'This creates a local sample order. No payment or personal information is collected.' Place sample order snapshots current lines, fees, address, restaurant, and total into one submitted order, assigns reference PP-1048 or another deterministic brand-derived reference, clears the basket, starts the 60-second tracking clock at Confirmed, and navigates to #/tracking.
   Layout: Desktop summary is sticky below the header with each fee on its own row and a bold final total. Minimum progress appears directly above the full-width primary action. Mobile summary follows fulfillment and remains readable without horizontal scrolling; no fixed checkout button may cover content.
   Motion: Minimum eligibility and totals update immediately. Successful placement uses the shared order-card settle on #/tracking, never a fake processing spinner.

### Live-style order tracking (`#/tracking`)
1. **Order status timeline and playback** — Heading: 'Your order, step by step'. Always show 'Live demo · simulated courier and timing'. If no submitted order exists, create a built-in Ember & Thyme sample containing one Charred lemon chicken and one Smashed cucumber salad, subtotal $24, delivery $1.49, service $1.25, total $26.74, reference PP-1048, and initialize its clock at 42 seconds so direct visitors see On the way. A newly submitted order instead starts at 0 seconds with its actual basket snapshot. Define five stages: Confirmed 0–9 seconds, Preparing 10–24, Picked up 25–39, On the way 40–54, Delivered 55–60. Copy is respectively 'The kitchen has your sample order', 'Your dishes are being prepared', 'The courier has collected the order', 'Following the neighborhood route', and 'Sample order delivered'. Provide Pause demo/Resume demo, Next demo step, and Replay from start. Next demo step moves to the next stage boundary and pauses; Replay resets only tracking, not restaurant or address data. Delivered stops at 60 and never loops automatically. Persist timing so reload does not restart an active order.
   Layout: Desktop places a 5-step vertical timeline in a 4-column Surface panel beside the map, with current stage expanded and completed stages checked. Mobile uses a compact horizontal five-segment progress row above the map and the current-stage card below it. Playback controls are full-width on mobile and remain keyboard accessible.
   Motion: One deterministic 60-second clock drives stage and route. Pause freezes both; Next and Replay update both in one state change. Reduced motion starts paused and offers manual stages without autonomous advancement.
2. **Original animated courier map** — Draw an original schematic neighborhood map in inline SVG, with no map tiles or external service. Use a viewBox 0 0 820 380, Sage park blocks, Canvas blocks with Hairline roads, a small pale-blue creek, and three quiet labels derived from [DELIVERY_AREA]: 'Garden Square', 'Willow Lane', and 'Kitchen Row'. Place the selected restaurant at lower left and the selected fictional address at upper right using Lucide ChefHat and Home markers. Draw the route as path 'M 72 314 C 160 250 192 168 302 184 S 456 298 548 158 S 682 76 756 118'. Keep a Hairline route underlay and reveal a Tomato progress stroke. Move a small circular Bicycle marker with getPointAtLength: fixed at the restaurant through second 24, normalized route progress from 0 to 1 during seconds 25–54, and fixed at the destination at Delivered. Include a compact legend 'Illustrative map · not to scale' and the current sample ETA '12–18 min' while On the way, changing to 'Arrived' at Delivered. No real geolocation, courier identity, street data, or live traffic is implied.
   Layout: Desktop map fills an 8-column Surface panel with a 24px radius and minimum height 430px. Mobile map is 300px high with labels shortened as needed and no clipped endpoints. Status overlay sits at top left without covering the bicycle or destination; legend stays bottom left.
   Motion: Bicycle position and Tomato stroke share normalized route progress from the tracking clock. Do not bounce or rotate the marker excessively. Reduced motion shows the marker at the current stage's static position and changes it only through manual controls.
3. **Order details and next actions** — Below the tracker show reference, restaurant, fictional delivery address, selected time, each order line and quantity, subtotal, delivery fee, service fee, and final total from the same snapshot. Buttons are Order again, Back to kitchens, and Start a new sample order. Order again restores the snapshot lines to the basket and opens #/checkout; Back to kitchens opens index.html; Start a new sample order clears only the submitted order and opens discovery with the existing address preserved. Include 'Courier, timing, route, and order status are generated locally for this demo.'
   Layout: Use a 7/5 desktop grid with order lines left and totals/actions right, stacking on mobile. Keep long references and addresses wrapped without overflow and actions at least 44px high.
   Motion: Order details settle once over 200ms. Buttons act immediately and do not reset tracking unless their labels explicitly say so.

## Assets
- image: Download https://media.vibefather.ai/assets/f1c18452-9e0a-4a41-966d-6f6bd8d0ee66/delivery-spread.webp to public/images/delivery-spread.webp. Alt: 'A warm neighborhood dinner spread with colorful shared dishes on cream stone.' Use only as the discovery hero tableau and its responsive crops. Credit in ASSETS.md: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/f1c18452-9e0a-4a41-966d-6f6bd8d0ee66/charred-chicken.webp to public/images/charred-chicken.webp. Alt: 'Charred lemon chicken with herbs and pan juices on an ivory plate.' Use only for Ember & Thyme's restaurant card, cover, Charred lemon chicken menu row, basket, and order snapshots. Credit in ASSETS.md: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/f1c18452-9e0a-4a41-966d-6f6bd8d0ee66/sesame-salmon.webp to public/images/sesame-salmon.webp. Alt: 'Sesame salmon with rice and green vegetables in a matte ceramic bowl.' Use only for Nori & Ladle's restaurant card, cover, Sesame salmon menu row, and its order snapshots. Credit in ASSETS.md: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/f1c18452-9e0a-4a41-966d-6f6bd8d0ee66/garden-grain-bowl.webp to public/images/garden-grain-bowl.webp. Alt: 'Colorful grain bowl with roasted vegetables, greens, and herb dressing.' Use only for Juniper Bowl's restaurant card, cover, Garden grain bowl menu row, and its order snapshots. Credit in ASSETS.md: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/f1c18452-9e0a-4a41-966d-6f6bd8d0ee66/truffle-flatbread.webp to public/images/truffle-flatbread.webp. Alt: 'Mushroom flatbread with melted cheese and herbs on a cream stone table.' Use only for Copper Crust's restaurant card, cover, Truffle mushroom flatbread menu row, and its order snapshots. Credit in ASSETS.md: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/f1c18452-9e0a-4a41-966d-6f6bd8d0ee66/citrus-pavlova.webp to public/images/citrus-pavlova.webp. Alt: 'Small citrus pavlova with cream and bright fruit on an ivory dessert plate.' Use only for Butter & Berry's restaurant card, cover, Citrus pavlova menu row, and its order snapshots. Credit in ASSETS.md: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- icon: Use lucide-react for MapPin, ChevronDown, Search, X, Home, Bike, Clock, Star, Plus, Minus, ShoppingBasket, ArrowLeft, Heart, Check, Trash2, RotateCcw, Pause, Play, SkipForward, ChefHat, ReceiptText, and Navigation. Keep icons locally bundled and record Lucide's ISC license in ASSETS.md. Draw the original basket-line wordmark and schematic neighborhood map with inline SVG/CSS; do not imitate a delivery-platform symbol.
- font: Self-host Bricolage Grotesque Variable through @fontsource-variable/bricolage-grotesque and Inter Variable through @fontsource-variable/inter. Import only the used variable-font files, record both OFL-1.1 licenses in ASSETS.md, and make no Google Fonts or other CDN requests.

## Don'ts
- Do not add a backend, server code, API routes, databases, authentication, remote forms, analytics, third-party APIs, real payment, geolocation, map, restaurant, or courier integrations. All restaurants, availability, fees, addresses, orders, and tracking behavior are local sample state.
- Do not use any existing food-delivery platform name, logo, mascot, slogan, signature illustration, exact color palette, proprietary icon set, custom font, recognizable interface composition, trade dress, or source code.
- Do not copy real restaurant identities, menus, dish descriptions, ratings, review counts, prices, photography, promotional copy, addresses, or order records; all supplied businesses and content must remain fictional and original.
- Do not use proprietary map tiles, real route data, third-party route artwork, branded courier illustrations, recognizable packaging, or brand marks. The neighborhood map must be the specified original inline SVG and the bicycle a generic Lucide icon.
- Do not use real people's likenesses, celebrity images, identifiable couriers, customer portraits, hands, anime or game characters, or any logo inside generated imagery. The six food photographs contain food and table settings only.
- Do not present sample ratings, review counts, delivery estimates, fees, stock, addresses, ETAs, order references, or courier status as real. Retain visible demo and simulation disclosures on discovery, menu, checkout, and tracking.
- Do not request or store real personal information, account credentials, email, phone, card details, or a free-form home address. Address selection uses only the three fictional presets and remains in localStorage.
- Do not allow checkout below the selected restaurant minimum, exceed quantity 12 per dish, mix restaurant baskets without confirmation, hide any fee, add tax/tip/discounts, or recalculate a submitted order from changed menu data instead of its snapshot.
- Do not reseed a cleared basket on reload, restart an active tracking clock on reload, loop a delivered order automatically, or clear a newly submitted order when Replay is used.
- Do not use random order events, fake network activity, fake payment-processing delays, autoplaying audio, countdown pressure, or a checkout that collects payment.
- Do not hotlink assets or use Unsplash, Pexels, Pixabay, Google Images, placeholder-image services, CC BY-NC or CC BY-SA media. Download the six listed images to their exact local paths and list every third-party file in ASSETS.md.
- Do not add images beyond the six listed food photographs or rename a dish photograph into unrelated food. Use each restaurant image only in its specified contexts and keep all runtime image paths relative.
- Do not load fonts, scripts, icons, styles, or maps from a CDN. Use only the fixed stack and permitted licenses, with both fonts self-hosted through Fontsource and no restricted component source.
- Do not emit source maps, copy src/ into dist/, exceed 20 MB, use absolute root asset URLs, or require server fallback. The production build must work from a nested static path with one npm run build.
- Do not add more HTML entries, bare-directory links, routing libraries, or server-dependent URLs. Keep the specified hash routes; direct #/restaurant shows Ember & Thyme, direct #/checkout renders initialized or persisted basket state, and direct #/tracking renders the built-in sample order.
- Do not hard-code BRAND, OCCASION, AUDIENCE, DELIVERY_AREA, ACCENT, or CURRENCY outside src/content.ts, leave variable tokens visible, or break derived labels and storage namespaces when values change.
- Do not introduce horizontal overflow, clipped sticky bars, inaccessible icon-only controls, tiny touch targets, keyboard traps, or console errors. Verify 1440×900 and 390×844 across all four routes, menu scrollspy, address selection, basket math, minimum enforcement, checkout, and tracking controls.
- Do not ignore prefers-reduced-motion. Autonomous tracking and nonessential motion must stop or start paused while manual order, navigation, and tracking-stage controls continue to work.
- Do not add SEO metadata, Open Graph tags, JSON-LD, sitemaps, visible dates, or keyword-stuffed content; a plain [BRAND] document title and original favicon are enough.
- Do not mention VibeFather anywhere in the demo except the optional renderer-provided [CREDIT] footer link.

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