15c951c2a0
Shop page rebuilt into four brand colour-coded use-group sections (Küche/lime, Reinigung/grapefruit, Wäsche/plum, Pflege/care/orange): colour banners with diagonal dividers, per-section grid titles, crimson 'add to cart' + white-outline 'learn more' CTAs, plain-name eyebrows, first-fold halved + thin white band. Split old Haushalt group into clean+wash. Also in this checkpoint (brand-owner feedback items): - L11: Kaiser-Natron® on every visible mention, hyphenated (de+en, products, logo, nav) - L4: product-hero headline reworded to the brand versatility voice - L5/L6: faint 'AI Edited' badge on AI bundle images (data-driven aiEdited flag) - L10: Revitalization animation row + early-access CTA removed - U2: membership 'become a member' button removed - New category tokens (cat-kitchen/clean/wash/care) + Hero/WaveDivider tones - New /kueche category page (route + copy) — not yet linked (see STYLE-CHANGES caveat) - Homepage reverted to original ProductTeaser (banners belong on /shop) dist/ rebuilt and included for the Portainer/gitea deploy. Open decisions tracked in STYLE-CHANGES.md §20 and memory. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Kaiser Natron
Ecommerce frontend. Vue 3 + Vite + Tailwind v4. Backend (PHP / MySQL, Stripe for payments) is plugged in at the src/api/ boundary.
Setup
npm ci
npm run dev
Design system
Everything visual lives in src/design-system/:
tokens/— color, typography, spacing, radius (CSS custom properties consumed by Tailwind v4's@theme)primitives/— atomic components (Button, Input, Badge, Stack)patterns/— composed components (ProductCard, etc.)
Browse the full system at /design when running npm run dev. This is the single source of truth — new UI composes these, never one-off styling.
API boundary
src/api/ exposes a typed surface the backend dev fills in. Until then, fixtures in src/api/ drive the UI so frontend work is unblocked.
Endpoint specs for backend integration live under docs/api/:
docs/api/cart.md— cart endpoints, types, error codes, and how to swap the local implementation for HTTP.docs/api/checkout.md— Stripe handoff: PaymentIntent creation, client-side confirmation, and the webhook that finalises the order.docs/api/orders.md— order lookup and customer order history.docs/api/customers.md— account, login, and address endpoints used by the checkout and account pages.
Supply chain
All dep versions are pinned exactly (no ^/~). Use npm ci (not npm install) in CI and before builds. Run npm audit before adding any new dep.
Deployment (Portainer dev-showcase stack)
This is the showcase path, not real production — the dev machine is the source of truth for the built output. The container has no build step: it just copies a prebuilt dist/ into nginx.
Release flow:
npm run build # produces /dist
git add dist && git commit -m "build: <what changed>"
git push
Then in Portainer → Stacks → Pull and redeploy. The site comes up on host port 5555 (/health returns 200 ok).
Base image: nginx:1.27.3-alpine (pinned). When this graduates to real production, reintroduce the multi-stage Node build + the hardening (read_only, security_opt, resource caps) that lived in earlier revisions of this file.