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
- Free shipping is stated everywhere — ticker, product page, cart drawer, checkout. With most products between ₹100 and ₹690, ₹499 is two items away and it is the single strongest lever on basket size.
- Struck-through pricing is a first-class pattern, not an afterthought. A large part of the catalogue is discounted at any time.
- Gurmukhi and Devanagari render properly in reviews — Noto Sans subsets loaded alongside the Latin face, with the extra line-height they need.
- No dark patterns. No popups, no fake urgency, no resetting countdowns, no "9 people viewing". The dispatch timer is real, driven by the 1 PM cutoff.
- Every interaction is an htmx fragment swap. Filters, quantity changes, the drawer, coupon application. No client-side cart state, no JavaScript framework.
Worth reacting to
- Does the product card hold across ₹100 to ₹950? The Kansa items are five times the price of a lemongrass brew.
- Do the sale badges read clearly enough given how much is discounted at once?
- Does the wellness range sit comfortably in the same skin as the classic teas — that is the real tension in the catalogue.
- Is the checkout partial-COD block clear enough that nobody disputes a forfeited advance later?
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.