Direction A — Apothecary

Storefront mockups

Mobile-first, at 430 px. Real products, real prices, real reviews. Open each and scroll — notes under every screen explain the decisions worth arguing about.

The journey

1

Home

Hero, trust strip, bestsellers, collection tiles, story, reviews, journal. Every block a content record.

2

Category listing

Two-column grid, sticky filters, sold-out handling, SEO copy below the products rather than above.

3

Product detail

The page that has to convert. Price, rating, dispatch countdown and free-shipping gap above the fold; ingredients, reviews, sticky buy bar.

4

Cart drawer

Slides over the page. Free-shipping progress bar, per-line savings, one cross-sell.

5

Checkout

Four accordion steps, phone verified before payment, partial-COD split shown in rupees with the forfeiture warning.

What carries through all five

Worth reacting to

Not yet mocked

Order tracking, account and orders list, search results, blog index and post, and the content pages. All are straightforward once these five set the language — say if you want any of them before scaffolding starts.

Styling lives in theme.css as CSS custom properties, so it becomes the Tailwind theme config plus a small base layer rather than being rewritten.