Grocery Delivery

Install

The whole page lands in app/templates/grocery-delivery/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.

Sections it ships with

Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.

1. 1

   Navbar and Hero

   Sticky top nav with an address lookup that checks delivery availability, beside a live order-tracking visual backing the 30-minute delivery promise.

   hero
2. 2

   Shop by Category

   Eight fresh-food categories as gradient circular entry points, each showing today's live item count.

   gallery
3. 3

   Flash Sale

   A countdown deal wall on deep green, with discount badges and product cards tracking how much of the stock is already claimed.

   product
4. 4

   Seasonal Produce

   A grid of in-season items labelled with origin and certification badges, each with one-tap add to cart.

   menu
5. 5

   Shop the Recipe

   Weekly chef-designed recipe cards that drop the whole ingredient list into the cart at once, portioned so nothing goes to waste.

   content
6. 6

   Delivery Slots

   An interactive picker for delivery now or a booked slot within the next three days, with a live summary of the chosen window.

   form
7. 7

   Closing Call to Action

   A green gradient offer banner pushing money off the first order and free delivery over a spend threshold.

   cta
8. 8

   Footer

   Brand blurb, shopping and service links, plus regulatory details such as the food-business registration number.

   footer