a07058d656
- Responsive hero for home + category tops (390→1280px), composed from Button, Badge, and the Icon/Logo primitives already in the DS. - Two layouts — split (copy left / product right on lg, stacked below) and centered — and three surface tones — cream, paper, brand. On the brand-green surface the secondary CTA is rendered with a cream outline pill since Button's ghost/secondary variants read dark-on-dark there. - Decorative disc + soft glow behind the product cutout give the image a focal point without needing a photographed backdrop. - Headline can be passed as a string prop or as a slot (so consumers can mix in the italic `text-brand-soft` emphasis used on the home page). - Ships with a /design/hero showcase page that renders the component in the DevicePreview iframe across mobile / tablet / desktop, plus layout and tone tabs and a usage snippet. Preview route is /design/preview/hero so the iframe can include the live Navbar. - i18n keys added to DE + EN; AT inherits from DE. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Kaiser Natron
Ecommerce frontend. Vue 3 + Vite + Tailwind v4. Backend (Python/MySQL) 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/fixtures/ drive the UI so frontend work is unblocked.
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 stack)
Portainer builds the image from the Dockerfile at the repo root each time the stack is pulled & redeployed — no registry needed.
- Portainer → Stacks → Add stack
- Either paste
docker-compose.ymlin the web editor or point Portainer at this repo (build path/) - Deploy. The site comes up on host port 5555 (internal container port 80).
- Health:
GET /healthreturns200 ok.
Pinned images: node:24.15.0-alpine3.23 (build stage), nginx:1.27.3-alpine (serve stage). Bump explicitly when you want to upgrade — no floating tags.