Food delivery website
A food delivery site “Hot” — charcoal, tomato and cream, a bold grotesque: a hero with a live “delivered in 28:00” countdown and a burger of CSS layers, a menu with a cart in a pinned bar and progress to free delivery, a bowl builder with layers in a bowl, a delivery zone on an SVG block map, an order tracker with a courier along the route, an app promo with a QR and promo code, sticker reviews with reactions and an order counter, an FAQ and a footer with an outlined word. Unbounded, Russo One and Onest.
A site where an order comes together without extra steps: a menu with a cart in a sticky bar, progress towards free delivery and a layer-by-layer bowl builder. The hero promises a delivery time. The service in the demo is fictional.
What it is made of
10 catalog blocks in page order. Each one is installed with its own command; nothing is recreated.
1. Header
Food delivery navbar with address, ETA and a cart counternavbar-038
An “address · N min” chip, a cart with a badge, a tomato line on scroll, burger.
2. First screen
Food delivery hero with a background clip: a burger stacks in slow motion, a live timerhero-048
A background clip: a burger stacks in slow motion and freezes, a live delivery timer, a dish marquee.
3. Menu
Delivery menu: dish cards with a cursor spotlight, fly-to-cart and a “to free delivery” bardelivery-001
Filters, cards with a cursor spotlight, the photo flies into the cart, a fixed cart with progress.
4. Builder
Bowl builder: ingredient photos drop into the bowl, calories and price on the flydelivery-002
Tiles with ingredient photos, the bowl assembles before your eyes, calories and price on the fly.
5. Delivery zone
Delivery zones on a Yandex map: zone rings around the kitchen, address pins, click → time and pricedelivery-003
A Yandex map with zone rings around the kitchen and address pins, click → minutes and fee.
6. Tracker
Order tracker: steps with live progress and a phone with a map where the courier drivesdelivery-004
Steps with live progress, a phone with a map — the courier drives the streets, starts by itself.
7. App
Delivery app promo: promo code, stores, SMS link and a QR stickerdownload-011
A promo code with copy, stores, an SMS form, a QR sticker.
8. Reviews
Sticker reviews with emoji reactions and a live orders counterdelivery-005
Tape stickers with emoji reactions, an “orders today” counter.
9. FAQ
FAQ accordion with a plus-to-cross togglefaq-023
An accordion with a plus-to-cross toggle.
10. Footer
Delivery footer with opening hours, a phone and an outlined giant wordfooter-037
Hours, phone, columns, a huge outlined “HOT”.
Pro
The exact composition, page source and agent link are in PRO
The demo and the block list are open to everyone. Subscribers see every block's props as in the demo, the theme rules, the image prompts and one link an AI agent uses to build the same page.
Get PROFAQ
- What is the “Food delivery website” page made of?
- 10 catalog sections in order: Food delivery navbar with address, ETA and a cart counter, Food delivery hero with a background clip, Delivery menu, Bowl builder, Delivery zones on a Yandex map, Order tracker, Delivery app promo, Sticker reviews with emoji reactions and a live orders counter, FAQ accordion with a plus-to-cross toggle, Delivery footer with opening hours, a phone and an outlined giant word. Each one is a separate VibeUI item.
- How do I build this page with an AI agent?
- Press “Copy the scenario for AI” and paste it into Cursor or Claude Code: the agent gets the page source, shared theme rules and image prompts, and installs every section from the registry with the shadcn CLI.
- Is the scenario free?
- The live demo and the list of sections are open to everyone. The page source and the instruction for the agent come with PRO.