Alement — Born from the source

D2C storefront for a premium Ambur leather sneaker brand. Next.js (App Router) · TypeScript strict · Tailwind · Zustand · Framer Motion · Supabase · Resend.

See SUPABASE.md for backend setup (database, auth, storage) and EMAIL.md for transactional/broadcast email setup.

Run it

npm install
npm run dev        # http://localhost:3000
npm run typecheck  # strict TS gate
npm run build      # production build (needs network for Google Fonts)

Structure

app/
  layout.tsx            fonts, nav, cursor, cart drawer, error boundary
  page.tsx              landing: Hero → FeaturedGrid → Timeline → StoryBand
  shop/                 PLP stub (filters: size, width, price — next pass)
  checkout/             wizard stub (driven by CartStore.checkoutStep)
components/
  landing/              hero, featured-grid, timeline (signature), story-band
  ui/                   custom-cursor, navbar + menu overlay, error-boundary
  cart/                 cart-drawer (qty controls, free-shipping bar)
lib/
  store/cart-store.ts   Zustand: cart, variants, drawer, checkout lifecycle,
                        mock order completion + tracking ID, localStorage persist
  data/products.ts      asset registry + catalog + INR formatter
  utils/sanitize.ts     input sanitization + checkout validators
types/                  shared domain types

Store design notes

• Cart rows are keyed by productId::color::size::width so identical variants merge instead of duplicating.
• Only durable state (items, lastOrder) is persisted; drawer/checkout UI state is deliberately transient.
• completeOrder() is fully local: validates, totals, generates a Alement-XXXX-XXXX tracking ID, clears the cart, flips step to confirmed.
• Subscribe via the exported selectors (selectItemCount, selectSubtotalINR, selectFreeShippingProgress) to keep re-renders narrow.