· Homepage 3-product teaser now uses tone="cream" (white image area
+ cream card body) instead of the brand-green media wash, and the
add-to-cart buttons render as the yellow accent variant for visual
emphasis on the brand-green section above.
· First bundle's hero image swapped to /bundles/background/haushalt-bundle-2.webp
per fresh asset.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two prior commits tried to fix a case-sensitivity ghost on the
deployed nginx (Haushalts-Bundle.webp vs haushalts-bundle.webp) by
forcing git to record the rename, but the asset still 404'd after
the Portainer redeploy. Sidestepping the case-history entirely by
shipping a fresh filename — `haushalt-bundle.webp` (singular). New
file, no name collision in any tree, code reference updated to
match.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Previous commit fixed public/ but the Dockerfile copies dist/ into
nginx, and git was still tracking dist/bundles/{background,transparent}/
Haushalts-Bundle.webp + Vorrats-Bundle.webp under their CamelCase
names. Portainer's redeploy was therefore serving the same
case-mismatched files. Same git mv-to-temp-then-back trick on dist/.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The cream tone was flipped to paper body / cream media earlier so the
homepage 3-product teaser could share its cream section ground. That
broke the shop catalogue: cards on cream sections lost their image
contrast and blended into the alternating cream / surface bands.
Cream tone now back to its original mapping (cream body, paper media)
— catalogue cards pop on every section. The new `brand` tone (paper
body, brand-green media) stays exclusive to the homepage teaser, which
is the only surface that asked for green-washed media.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The brand-green media wash was only meant for the homepage's
3-product teaser, not the full shop catalogue. Reverts ShopPage's
ProductCard tone from `brand` → `cream` so shop cards keep the
cream image area / paper body that the rest of the catalogue uses.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Bundle data was carrying localized strings (name, usage, items,
description, imageAlt, badge) directly, so EN visitors saw German
copy on the bundle page and home grid. Strings are now keyed under
bundle.<id>.<field> in the i18n catalogue (DE + EN); src/api/bundles.js
keeps only structural data + i18n key references.
HomePage builds a localizedBundles computed that resolves the keys
through t() before passing to the Bundles design-system component,
so the existing component stays agnostic of i18n. BundlePage exposes
a `bundleCopy` computed for the same reason, and resolvedItems now
maps over `itemKeys` instead of static labels.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The previous "split" commit shipped the background-banner version
under a misleading message. Desktop now genuinely renders as a
1.4fr / 1fr grid: wide 16:9 image on the LEFT, copy + items + price
+ qty + add-to-cart on the RIGHT. Back button stays in its row
above the hero on every viewport — no overlay, no full-bleed
background, no gradient sidebar.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Reverts the full-bleed background-banner desktop hero. Desktop uses
a 1.4fr / 1fr grid: image column gets the heavier ratio so the 16:9
landscape source has room for its full composition; copy + items +
purchase cluster sits in the right column. Back button stays in its
own row above the hero on every viewport — no overlay.
BundleCard now uses RouterLink for internal hrefs (was rendering a
plain <a>, which triggered a hard navigation and lost vue-router's
saved scroll position when the user hit back from a bundle page).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Desktop: back button moves out of its dedicated row (which wasted a
strip of brand-green above the image) into an absolute overlay at
the top-left of the max-width column, so the hero artwork starts at
the very top of the fold. Mobile keeps the in-flow row since there's
no overlay surface there.
Gradient stops: from-25% / via-brand/90 via-65% / to-brand to-80%
— image stays clean for the first quarter, then ramps quickly to
opaque brand-green by the two-thirds mark, leaving the right edge
fully solid for the cream-on-green copy.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Desktop (lg+) now renders the bundle artwork as the hero background
with a brand-green left → right gradient over the right ~50% so the
cream copy stays legible. All purchase actions (name, description,
items, price, qty, add-to-cart) overlay on the right column,
vertically centred in the fold. The mobile / tablet treatment keeps
the natural-aspect banner + stacked content underneath since the
single-column scroll is the right pattern at thumb-zone widths.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Source bundle art is ~16:9 (1200×670); the previous aspect-square
crop dropped roughly half the picture. Banner now spans the full
container at the image's natural aspect on mobile and caps at 55svh
on desktop so the landscape composition reads in full.
Below the banner: description on the left and the items / price /
qty / add-to-cart cluster on the right (lg+), or stacked on mobile.
Buy actions stay aligned to the same scan column on every viewport.
Co-Authored-By: Claude Opus 4.7 (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>
Bumps the desktop/mobile split from Tailwind's md (768 px) to a
custom min-[1100px] threshold so tablets and small laptops get the
mobile chrome (menu button + bottom-right floating cluster) instead
of an over-cramped desktop nav. Bottom-clearance spacers on Home and
Shop track the same threshold so they don't disappear before the
floating cluster does.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Hero copy was reading translations via const = t('key') in setup,
which captures the string at first paint and never updates when the
user switches locale. Calls now happen inline in the template so
Vue's reactivity system tracks state.locale access during render and
re-runs the binding when DE/AT/EN flips.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Bundles now sits directly under the Pulver hero (surface band), with
the cream "ein Pulver, hundert Anwendungen" banner below it. Wave
dividers re-routed brand → surface → cream → brand to keep the
colour rhythm continuous across the new ordering.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
· Wire bundle cards to /bundles/transparent/* artwork; rename the
ä/ü/&-bearing source files to ASCII-safe names so dev server and
CDN paths don't choke on URL-encoding edge cases.
· BundleCard gains an `imageFit` prop (`contain` default vs `cover`)
so per-bundle artwork can opt into edge-to-edge framing without
forcing the whole grid to the same fit.
· BrandHero side-fade fade-out now syncs with the tagline fade-in
(700ms ease 1150ms) — one smooth landing instead of two staggered
beats.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Home page now opens with a BrandHero that plays the figure entrance
animation in flow (replacing the full-screen SplashIntro overlay),
followed by a 3-product Cook/Clean/Care teaser feeding the shop. Splash
paths extracted to a shared module so BrandHero can render the same
illustration without duplicating ~500KB of SVG path strings.
ProductCard gains `cream` and `brand` tones (cream/green media wash
with white card body); homepage teaser uses `brand`, shop catalogue
switches to the green wash too. Bundle cards point at the new
/bundles/background/* artwork.
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>
Both pages were rendering the Navbar with cart-count but not
listening for the @cart event or rendering the drawer, so tapping
the cart icon did nothing. Hooked up cartOpen ref, search-add,
qty/remove handlers, goCheckout, and the CartDrawer template — same
pattern as HomePage / ShopPage / CategoryPage / LegalPage.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Native <select> chevrons render at varying offsets across browsers.
Replaced them with `appearance-none` + an absolute-positioned
chevron-down Icon at right-4 (16px) so the gap between the chevron
and the right border is consistent. Applied to RegisterPage's
salutation select and ShippingStep's shipping/billing country selects.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Switched both the desktop and mobile account IconButton from `ghost`
to `float` (bg-brand-float + text-accent) with shadow disabled — same
md size (w-11 h-11) as the cart button beside it, so the pair reads
as a balanced complementary set: yellow cart, green account.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- IconButton (icon: user) in the desktop right cluster, left of cart,
and a mobile-only top-right account icon. Both navigate to /login.
- RegisterPage now matches the live kaiser-natron.at flow: salutation
dropdown (Frau/Herr/Divers), required terms & privacy checkbox
linking to /datenschutz, marketing opt-in.
- auth.js stub carries salutation + acceptsTerms through to the
session payload so the eventual backend swap is a no-op.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Vue Router's scrollBehavior doesn't fire when RouterLink resolves to
the current URL (logo while on /, /#bundles while already at #bundles),
so the smooth scroll never happened. Added onNavClick + onLogoClick
handlers that intercept the click when the destination is the same
route and call scrollIntoView / window.scrollTo with behavior:'smooth'
directly. Cross-route nav still goes through Vue Router's scrollBehavior
unchanged (savedPosition restore + same-route smooth + cross-route
instant).
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>
The Navbar's primary, secondary, mobile and logo links were plain
<a href> tags, which triggered full-page reloads instead of SPA
navigation — Vue Router's scrollBehavior never ran. Switching them
to RouterLink keeps the user inside the SPA so the smooth-scroll
behaviour for /#bundles, /#revitalize, /#about kicks in.
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>
Previous commit (9177c79) updated public/ source images and HomePage
but forgot to rebuild dist/. Portainer deploys from committed dist/,
so the new hero images never reached the stack.
