# Mozimo — The Art of Chocolate, Made in India

A full luxury-editorial redesign of [mozimo.in](https://mozimo.in), implementing the
proposed "Enter the world of Mozimo" flow: ivory, deep cacao, champagne gold,
restrained puce — editorial, European, slightly mysterious.

Built with **TanStack Start (React 19 + Vite)**, **Tailwind CSS 4**, and zero animation
dependencies (hand-rolled CSS + IntersectionObserver).

## Design language

- **Palette** — ivory `#faf6ee`, deep cacao `#140a06`, champagne gold `#c2a06e`, brand puce `#703133`
- **Type** — Fraunces (display serif), Renner* (brand geometric sans), Samantha Signature (script accents)
- **Motifs** — arched image masks, paper-grain texture, champagne hairlines, marquee tickers, cursor-trailing index previews, staggered line reveals

## Site map

| Route                   | Contents                                                                                                                                                                                                                                         |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `/`                     | Announcement bar → hero ("Chocolate, perfected.") → brand statement → Shop by Experience → The Mozimo Edit → Signatures → Made by Hand (film) → Ingredient Story → The Art of Giving → Seasonal Edit → Experiences → Journal → Press → Instagram |
| `/chocolate`            | Collection index (Bars → Gifting) with 3-image hover carousels + The Pantry                                                                                                                                                                      |
| `/collections/[handle]` | A Shopify collection as a first-party page (also powers `/gifting` CTAs)                                                                                                                                                                         |
| `/products/[handle]`    | Product page — gallery, price, description, buy (Shopify checkout)                                                                                                                                                                               |
| `/gifting`              | Who is it for (price-wise tiles) → hampers → Seasonal Edit                                                                                                                                                                                       |
| `/experiences`          | Chef's Table, Tastings, Private Events, Collaborations, Pop-ups, Mozimo at Home                                                                                                                                                                  |
| `/bespoke`              | Made for Your Moment — corporate, weddings, collaborations, events, custom packaging + bulk/bespoke enquiry form                                                                                                                                 |
| `/contact`              | Contact form + atelier details                                                                                                                                                                                                                   |
| `/our-world`            | Story · Chocolate · Craft · Ingredients · People (+ `/about` redirects here)                                                                                                                                                                     |
| `/journal` (+3 essays)  | The Mozimo Journal — The Art of Tempering; Why Dark Chocolate Tastes Different; The Story Behind Our Signature Box                                                                                                                               |

## Headless commerce & CMS

The site renders commerce itself; Shopify runs headless behind it.

- **Shopify Storefront API** (`src/lib/shopify.ts`) — products, prices,
  collections. Server-side, cached ~60s; auth via a static
  `SHOPIFY_STOREFRONT_ACCESS_TOKEN` or, with `SHOPIFY_CLIENT_ID` +
  `SHOPIFY_CLIENT_SECRET`, the client auto-mints a storefront token
  (client-credentials → Admin REST) and self-heals if it is ever revoked.
  Checkout stays on Shopify's hosted page until Phase 2 (in-container cart,
  `unauthenticated_write_checkouts` scope already granted).
- **PocketBase** (`src/lib/cms.ts`, running in the same container on :8090,
  published as `cms.mozimo.in`) — editorial layer: gifting tabs, /chocolate
  rows + carousel images, gifting page copy. Reads cached ~30s.
- **Fallbacks** — if either backend is down the site serves the bundled
  defaults from `src/data/catalog.ts`; it never blanks.

Content editing (no deploys): PocketBase admin at `https://cms.mozimo.in/_/` —
edit `gifting_tabs` (tiles, blurbs, product handles per tier, ordering),
`collection_rows` (row order, names, the 3 carousel images per collection),
`gifting_page` (hero copy). Changes go live within the cache TTL.

First-run seeding: `scripts/pb-seed.mjs` (runs automatically at container
start; also `npm run seed`) creates the collections and inserts the shipped
content into an empty database. Idempotent — it never overwrites edits.

## Develop

```bash
npm run dev       # vite dev server (port 3000), loads .env when present
npm run pb        # one-time download + run PocketBase locally (:8090)
npm run seed      # create PB schema + seed default content
npm run build     # production build to dist/
npm start         # serve the production build (node server.mjs)
npm run preview   # serve the production build via vite preview
npm run lint      # eslint (currently broken: leftover Next.js config)
```

Copy `.env.example` to `.env` and fill in the Shopify Storefront token and
PocketBase superuser credentials (`.env*` is gitignored).

## Docker

```bash
docker build -t mozimo-web .
docker run -p 3000:3000 -p 8090:8090 -v mozimo_pb_data:/app/pb_data mozimo-web
```

Three-stage build (`deps → builder → runner`) on pinned `node:26-trixie-slim`:
dependencies install with `npm ci` and BuildKit cache mounts, the final image
runs as the unprivileged `node` user, ships production dependencies, the build
output, PocketBase v0.40.2 (multi-arch) and `entrypoint.sh` which starts both
processes, ensures the PocketBase superuser matches `PB_SUPERUSER_EMAIL` /
`PB_SUPERUSER_PASSWORD` on every boot, and seeds the CMS schema + defaults.
Volumes: `/app/pb_data` holds the CMS database — back it up. Ports: `3000`
web, `8090` PocketBase (`cms.mozimo.in` → 8090 via Caddy, see `ansible/`).