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>
Bundle data extracted to src/api/bundles.js (single source of truth
shared by HomePage's grid and the new BundlePage). Each card on the
home grid now links to the bundle's detail route.
BundleCard's `imageFit` default flipped to `cover` to match the new
/bundles/background/* artwork — full-bleed lifestyle scenes instead
of padded product line-ups. The `contain` mode stays available for
future bundles whose art needs breathing room.
BundlePage layout: split brand-green hero with the bundle artwork
on the left, name + items list (linking to component product pages
where matched) + pricing + qty + add-to-cart on the right. Mirrors
ProductPage chrome (Navbar, dynamic back button, CartDrawer) so the
detail-page experience reads as one piece across SKUs and bundles.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The two newly-shipped components (Footer with cream/brand/paper
tones, CheckoutStepper with active/completed/upcoming states) are
now documented in the design system at /design/footer and
/design/checkout-stepper. Sidebar entries added under "Sections"
and "Components" respectively, with DE + EN copy.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two fixes:
- Bring back savedPosition handling in scrollBehavior so /shop ⇄
/shop/<slug> back-nav restores the previous scroll y.
- Add a route.hash watcher in HomePage that calls scrollIntoView with
smooth behaviour. Vue Router's scrollBehavior alone wasn't reliably
firing for same-route hash navigations, so this catches them
explicitly. Also handles direct /#bundles deep-links via immediate.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Anchor links like /#bundles, /#revitalize, /#about now smooth-scroll
to their target instead of jumping. Reverts the earlier instant-jump
choice — for the homepage nav, the animation is the desired feedback.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Anchor links (e.g. /#bundles) still scroll to their target section.
Back/forward navigation now lands at the top of the destination
instead of restoring the previous scroll y, for predictable arrivals.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Introduces:
- src/api/fixtures/products.js + src/api/index.js — placeholder catalog
(24 products across Kaiser-Natron / Holste / Gazelle / Grüne Tante /
Linda) so search has real data. Same shape the backend will return.
- Search.vue — Teleported dialog. Token-scored, diacritics-folded, ß→ss
normalized so German terms still match when users type ASCII. Keyboard
navigation (↑/↓/Enter/Esc), autofocus on open, scroll-lock. Full-screen
on mobile, centered command-palette modal on md+. Tone prop defaults
to 'brand' so the overlay reads as the site's primary affordance
(green), with 'paper' and 'cream' variants available.
- SearchSection.vue + ds-search route + sidebar entry.
- DE + EN strings for the overlay and the showcase.
Navbar wires the triggers: desktop search button sits left of the
LanguageSwitcher in the right cluster; mobile gets a matching bottom-
left floating button (cream surface, safe-area padded) that mirrors the
existing bottom-right cart/menu cluster. The Search overlay is mounted
inside Navbar with the default catalog, so every page that renders a
Navbar gets search for free. Selected products bubble up as a
@select event for navigation handling.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- 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>
Vue 3 + Tailwind v4 frontend scaffold with living design system
at /design. Pinned dependencies, dev-only a11y toolbar with
colour-vision simulation, WCAG contrast checker, and axe-core audit.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
