· 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>
Pulled from the live site
(typo3conf/ext/gmsite_kaiser/Resources/Public/Images/favicon.png).
Replaces the placeholder K-on-brand SVG.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Set --color-brand to #006548 and cascade every green-tinted token
(hover/soft/float, ink, muted, line, washes, accent-ink, success,
shadows) off it through color-mix(). Retuning the brand is now a
single-variable change.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Replace inline circular-button markup and duplicated Badge classes with
first-class design-system components so every affordance is globally
controllable:
- IconButton (float / accent / cream-wash / brand-wash × sm / md / lg)
with optional count overlay; raised variants get the hover-lift
animation, flat variants keep transition-colors. No visual change.
- Badge gains an `as` prop so the search 'Clear' affordance renders as
a button with the exact same typography/pill.
- Navbar mobile search/menu + overlay close, and the search overlay's
mobile floating close, now use IconButton.
Cart icon buttons left inline for now — they combine size-specific
shadow with the count overlay and deserve a follow-up consolidation
once we add a shadow prop to IconButton.
Applies to navbar mobile search + menu and the search overlay close —
one step lighter than brand so shadow-lg actually reads. Clear pill
label trimmed to just 'Clear' / 'Löschen'.
Keeps the small-badge typography (px/py/radius/weight/tracking) but
renders "CLEAR" in accent text so it reads as an inline affordance
rather than a filled chip.
Revert mobile search/menu/close floaters to bg-brand text-accent with
shadow-lg — the cream-wash fill blended into the brand surface. Replace
the browser's native search cancel with a yellow accent-style badge
reading "clear", matching the small-badge typography.
Match the overlay menu's close button: subtle translucent fill on brand
green with a yellow icon. Drops the flat brand-on-brand buttons whose
shadows didn't read on a green page.
Adds a client-side fuzzy product search to the design system:
- `src/api/products.js`: fixture catalogue (22 products across the Kaiser
Natron, Holste, Gazelle, Grüne Tante and Linda ranges) plus a scored,
diacritic-folded search (ß→ss, ä→ae, NFKD) with weighted fields
(title 5, brand/keywords 3, size/category 2, id 1) and prefix bonus.
- `Search.vue`: tone-driven (brand/paper/cream) full-screen overlay on
mobile, centered modal on md+. Auto-focus, arrow-key nav, Enter/Esc,
suggested-products empty state, keyboard-hint footer on desktop, safe-
area aware, scroll-locks the document while open.
- Navbar now hosts two triggers: a pill-shaped "Search products"
lookalike (desktop, in the same LanguageSwitcher-style container) and
a green/accent shadow-sm floating button bottom-left on mobile. Both
open the same overlay.
- HomePage feeds the products list into Navbar.
- Design-system showcase (`/design/search`) with live demo + canned
result preview + usage snippet. Sidebar + mobile bottom-nav entries
and DE/EN i18n added.
Co-Authored-By: Claude Opus 4.7 <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>
Trim the split/centered mediaSize widths and the responsive max-h caps
on the image itself by ~15% so the product cutout doesn't dominate the
first fold.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
DesignLayout now hides its 260px sidebar below lg and shows a fixed
bottom bar surfacing the current page. Tapping it opens a 50svh bottom
sheet with the full nav list (grouped, scrolls internally) plus the
back-to-site link. Route changes auto-close the sheet and the backdrop
is tap-to-dismiss.
Hero split variant: drop the grid's items-center and add lg:justify-center
on the copy column so the headline/CTA block now lines up with the
image's vertical midpoint instead of sitting at the top.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Wrap the hero in an explicit flex-centering row on HomePage so vertical
centering doesn't depend on class merging, and swap the wrapper from
min-h-svh to h-svh so the layout is exactly one fold. Shrink the hero's
own py-16..lg:py-28 to py-10..lg:py-20 so the section fits comfortably
between navbar and viewport bottom.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The hero product image is a tall portrait PNG. With the hero now
stretching to fill the first fold, `w-full h-auto` was letting the
image's intrinsic height exceed the available vertical space — the
product box got clipped at the bottom and pushed the composition off.
Switch to `w-auto max-w-full max-h-[...svh]` so the image fits within
the fold and keeps its aspect ratio. Stepped 40 / 55 / 70 svh across
mobile / tablet / desktop — mobile keeps the image compact so the
headline + CTAs still land on the fold when stacked above.
Also drop the "Featured" badge from the home-page hero — the product
is already the only thing on the first fold.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Wraps the home page in a `min-h-svh flex flex-col` shell so the Hero
can take `flex-1 flex items-center` and vertically fill whatever viewport
height is left after the navbar. Uses `svh` so the hero doesn't pop
below the fold when mobile browser chrome is visible.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Replaces the scaffolding copy block. Uses the existing i18n keys the
design-system showcase already exercises, with the italic emphasis
switched to text-accent-soft so the warm yellow reads on the
brand-green surface. Primary CTA → /shop, secondary → /anwendungen.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Portainer's "Pull and redeploy" runs `compose pull` before `compose up`.
With `image: kaiser-natron:portainer` set, that tries to pull the image
from Docker Hub and fails with "pull access denied" because the image
only exists as a local build artifact. `pull_policy: build` tells
compose to skip the pull step for this service.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
On mobile and tablet the split hero now stacks image-first, copy below
(matches the rhythm users expect when the product is the focal point).
Desktop is unchanged — text left, product right on lg+. Uses order-*
utilities so DOM order stays copy-first for readers/SEO while the
visual order flips.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The Portainer host keeps failing on `npm ci` inside the build stage
(both Alpine+libc6-compat and Debian slim exited 1 without ever surfacing
the real error to us). For a dev showcase this isn't worth chasing —
the dev machine is the source of truth for the built output anyway.
- Dockerfile: drop the Node build stage. Image is just nginx:1.27.3-alpine
with /dist copied in. No npm inside the container.
- docker-compose.yml: drop the production hardening (read_only, tmpfs,
security_opt, resource caps) and the container_name. Dev-only, don't
inhibit things.
- .gitignore / .dockerignore: stop ignoring dist/ — it's committed now.
- README: document the `npm run build && commit && push` release flow
and note what to reinstate when this graduates to real production.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Alpine + libc6-compat still lost the fight with Tailwind v4's prebuilt
oxide / lightningcss / rolldown bindings on the Portainer host. Debian
slim (glibc-native) is the known-good base for this stack. The serve
stage stays nginx:alpine, so the deployed image size is unchanged —
only the discarded build stage grew.
Also flip the home-page navbar from floating to the standard layout.
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>
The prebuilt @tailwindcss/oxide and lightningcss .node bindings expect a
glibc-compat runtime. On bare Alpine musl they fail to load during the
install-time probe, which cascades into `npm ci` exiting 1 in the
Portainer build.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
node:24.13.0-alpine3.20 was never published to Docker Hub, so the
Portainer build failed on pull. Switch to node:24.15.0-alpine3.23
(current Node 24 line on current Alpine line) and update README.
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>
