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>
17 lines
3.3 KiB
JavaScript
17 lines
3.3 KiB
JavaScript
import{B as e,C as t,G as n,c as r,ft as i,j as a,l as o,m as s,p as c,s as l,u,y as d}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as f}from"./i18n-yr4x-3Jp.js";import{t as p}from"./BundleCard-D1vhTteW.js";import{t as m}from"./SectionShell-CyPmh1h8.js";var h={class:`eyebrow mb-5`},g={class:`grid sm:grid-cols-2 lg:grid-cols-3 gap-6`},_={key:0,class:`mt-5 text-sm text-muted`},v={class:`font-mono text-[12px]`},y={class:`grid gap-6`},b={class:`eyebrow mb-5`},x={class:`grid sm:grid-cols-2 gap-6`},S={class:`eyebrow mb-5`},C=`/products/kaiser-natron-pulver-250-g-grosspackung.webp`,w={__name:`BundleCardSection`,setup(w){let{t:T}=f(),E=e(``);function D(e){E.value=e,setTimeout(()=>{E.value===e&&(E.value=``)},2e3)}let O={name:`Haushalts-Bundle`,usage:`2–3× pro Quartal empfohlen`,items:[`1× Kaiser-Natron Pulver 250 g`,`1× Allzweck-Spray 500 ml`,`1× Spülmittel 500 ml`],price:24.9,memberPrice:21.17,image:C,imageAlt:`Haushalts-Bundle`},k={...O,items:[...O.items,`1× Holste Wasch-Soda 500 g`,`1× Allzweckreiniger 750 ml`]};return(e,f)=>(t(),r(m,{eyebrow:n(T)(`ds.eyebrow.components`),title:n(T)(`ds.bundleCard.title`),description:n(T)(`ds.bundleCard.description`)},{default:a(()=>[l(`section`,null,[l(`h2`,h,i(n(T)(`ds.heading.default`)),1),l(`div`,g,[s(p,d(O,{onAdd:f[0]||=e=>D(`default`)}),null,16),s(p,d(O,{badge:`Bestseller`,"badge-variant":`accent`,onAdd:f[1]||=e=>D(`bestseller`)}),null,16),s(p,d(O,{tone:`cream`,onAdd:f[2]||=e=>D(`cream`)}),null,16)]),E.value?(t(),u(`p`,_,[c(i(n(T)(`ds.product.added`))+`: `,1),l(`code`,v,i(E.value),1)])):o(``,!0)]),l(`section`,null,[f[5]||=l(`h2`,{class:`eyebrow mb-5`},`Horizontal layout`,-1),f[6]||=l(`p`,{class:`text-sm text-muted mb-5 max-w-2xl`},[c(` Passed as `),l(`code`,{class:`font-mono text-[12px]`},`layout="horizontal"`),c(`. From `),l(`code`,{class:`font-mono text-[12px]`},`md`),c(` up the media takes ~38% of the row and the body fills the rest, with the CTA inlined next to the price block. Below `),l(`code`,{class:`font-mono text-[12px]`},`md`),c(` it collapses back to vertical. `)],-1),l(`div`,y,[s(p,d(O,{layout:`horizontal`,badge:`Bestseller`,"badge-variant":`accent`,onAdd:f[3]||=e=>D(`horizontal`)}),null,16)])]),l(`section`,null,[l(`h2`,b,i(n(T)(`ds.heading.states`)),1),f[7]||=l(`p`,{class:`text-sm text-muted mb-5 max-w-2xl`},` Same bundle across both cards — only the state being demonstrated changes. `,-1),l(`div`,x,[s(p,d(O,{"in-stock":!1}),null,16),s(p,d(k,{onAdd:f[4]||=e=>D(`overflow`)}),null,16)]),f[8]||=l(`p`,{class:`mt-3 text-sm text-muted max-w-2xl`},[c(` More than three items collapse the tail into a `),l(`code`,{class:`font-mono text-[12px]`},`+ N weitere`),c(` line so the card stays scannable. `)],-1)]),l(`section`,null,[l(`h2`,S,i(n(T)(`ds.heading.usage`)),1),f[9]||=l(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[l(`pre`,{class:`whitespace-pre-wrap`},`<BundleCard
|
||
name="Haushalts-Bundle"
|
||
usage="2–3× pro Quartal empfohlen"
|
||
:items="[
|
||
'1× Kaiser-Natron Pulver 250 g',
|
||
'1× Allzweck-Spray 500 ml',
|
||
'1× Spülmittel 500 ml',
|
||
]"
|
||
:price="24.9"
|
||
:member-price="21.17"
|
||
image="/products/cutouts/…-removebg-preview.png"
|
||
badge="Bestseller"
|
||
badge-variant="accent"
|
||
tone="paper"
|
||
layout="horizontal"
|
||
@add="addBundle(bundleId)"
|
||
/>`)],-1)])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{w as default}; |