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>
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>
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>
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>
