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.
Swap lingering "Python/MySQL" wording for "PHP / MySQL" across the
README, `src/api/` seam, the Pinia cart store, and the cart contract
doc. Add endpoint specs for checkout (Stripe handoff + webhook),
orders, and customers so the full plug-in surface is documented in
the same style as cart.md.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
