0a7879688f
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>
1 line
6.2 KiB
JavaScript
1 line
6.2 KiB
JavaScript
import{B as e,C as t,D as n,G as r,S as i,T as ee,c as a,ft as o,j as s,l as c,m as l,o as u,p as d,r as f,s as p,u as m,x as te}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{a as ne,o as re}from"./vue-router-Cyqru1db.js";import{t as h}from"./Icon-BCo6-bGH.js";import{t as ie}from"./i18n-yr4x-3Jp.js";import{t as ae}from"./Badge-DiccZCC_.js";import{r as g}from"./products-BqW5PUnm.js";import{c as _,d as oe,f as se,p as ce,u as le}from"./api-DlB23x7f.js";import{t as ue}from"./Navbar-CjSgO-pN.js";import{t as v}from"./Button-D1Rp2Xe1.js";import{t as de}from"./QuantityStepper-7Y8q77T-.js";import{t as fe}from"./CartDrawer-CY64MRh3.js";import{t as y}from"./Footer-Dr1HAyhH.js";import{n as b}from"./bundles-mf4yhmCB.js";var x={key:0,class:`bg-cream min-h-[60svh] flex items-center justify-center px-6`},S={class:`text-center max-w-md`},C={class:`font-display text-3xl text-ink mb-4`},w={class:`text-muted mb-6`},T={key:1,class:`bg-brand text-cream`},E={class:`mx-auto w-full max-w-7xl px-6 md:px-10 lg:px-16 pt-6`},D={class:`mx-auto w-full max-w-7xl px-6 md:px-10 lg:px-16 pt-6 md:pt-8`},O={class:`relative overflow-hidden rounded-lg bg-cream/10`},k=[`src`,`alt`],A={class:`mx-auto w-full max-w-7xl px-6 md:px-10 lg:px-16 py-10 md:py-14 lg:py-16`},j={class:`grid grid-cols-1 gap-10 lg:grid-cols-[1.1fr_1fr] lg:gap-14`},M={class:`flex flex-col gap-5 min-w-0`},N={key:0,class:`text-xs tracking-label uppercase text-cream/70`},P={class:`font-display font-normal leading-[1.06] tracking-tight text-cream text-[2rem] md:text-[2.5rem] lg:text-[3rem]`},F={key:1,class:`text-base md:text-lg leading-relaxed text-cream/85 max-w-2xl`},I={class:`flex flex-col gap-6 min-w-0`},L={class:`flex flex-col gap-2`},R={class:`text-xs tracking-label uppercase text-cream/70`},z={class:`flex flex-col gap-1.5`},B={key:1},V={class:`flex flex-col gap-1`},pe={class:`font-display text-3xl md:text-4xl text-cream`},me={key:0,class:`text-sm text-cream/70`},he={class:`text-accent font-medium`},ge={class:`flex flex-wrap items-center gap-4 mt-2`},_e={__name:`BundlePage`,setup(_e){let{t:H}=ie(),U=ce(),ve=ne(),W=re(),G=e(!1),K=e(1),ye=u(()=>String(ve.params.slug||``)),q=u(()=>b(ye.value)),J=e(null);i(()=>{le();let e=typeof window<`u`?window.history.state?.back:null;J.value=typeof e==`string`?e:null});let be=u(()=>{let e=J.value;return!e||e===`/`||e.startsWith(`/#`)?`product.backHome`:`product.backGeneric`});function xe(){J.value?W.back():W.push(`/`)}let Se=[{key:`nav.shop`,href:`/shop`},{key:`nav.bundles`,href:`/#bundles`},{key:`nav.revitalization`,href:`/#revitalize`},{key:`nav.about`,href:`/#about`}],Ce=[],we=u(()=>{let e=q.value;return e?`€ ${e.price.toFixed(2).replace(`.`,`,`)}`:``}),Y=u(()=>{let e=q.value;return e?.memberPrice?`€ ${e.memberPrice.toFixed(2).replace(`.`,`,`)}`:``}),Te=u(()=>{let e=q.value;return e?e.items.map(e=>({label:e,product:g.find(t=>e.toLowerCase().includes(t.title.toLowerCase().replace(/®/g,``).trim()))})):[]});async function Ee(){let e=q.value;e?.anchorProductId&&(await _(e.anchorProductId,K.value),G.value=!0)}async function X({productId:e,quantity:t}){await se(e,t)}async function De(e){await oe(e)}function Oe(){G.value=!1,W.push(`/checkout`)}async function ke(e){await _(e.id,1),G.value=!0}let Z=e(null),Q=null;function $(){let e=Z.value,t=e&&(e.$el||e);if(!t||typeof window>`u`)return;let n=Math.round(t.getBoundingClientRect().height);document.documentElement.style.setProperty(`--nav-h`,`${n}px`)}return i(()=>{if($(),typeof ResizeObserver<`u`&&Z.value){let e=Z.value.$el||Z.value;Q=new ResizeObserver($),Q.observe(e)}typeof window<`u`&&window.addEventListener(`resize`,$)}),te(()=>{Q&&Q.disconnect(),typeof window<`u`&&window.removeEventListener(`resize`,$)}),(e,i)=>{let u=n(`RouterLink`);return t(),m(f,null,[l(ue,{ref_key:`navRef`,ref:Z,variant:`brand`,layout:`standard`,items:Se,"secondary-items":Ce,"cart-count":r(U).count,products:r(g),onCart:i[0]||=e=>G.value=!0,onSearch:ke},null,8,[`cart-count`,`products`]),q.value?(t(),m(`main`,T,[p(`div`,E,[p(`button`,{type:`button`,class:`inline-flex items-center gap-2 text-sm tracking-label uppercase text-cream/75 hover:text-cream transition-colors`,onClick:xe},[l(h,{name:`arrow-left`,size:16}),d(` `+o(r(H)(be.value)),1)])]),p(`section`,D,[p(`div`,O,[q.value.badge?(t(),a(ae,{key:0,variant:q.value.badgeVariant||`accent`,class:`absolute top-4 left-4 z-[1] shadow-sm`},{default:s(()=>[d(o(q.value.badge),1)]),_:1},8,[`variant`])):c(``,!0),p(`img`,{src:q.value.image,alt:q.value.imageAlt||q.value.name,loading:`eager`,decoding:`async`,class:`block w-full h-auto object-cover lg:max-h-[55svh]`},null,8,k)])]),p(`section`,A,[p(`div`,j,[p(`div`,M,[q.value.usage?(t(),m(`p`,N,o(q.value.usage),1)):c(``,!0),p(`h1`,P,o(q.value.name),1),q.value.description?(t(),m(`p`,F,o(q.value.description),1)):c(``,!0)]),p(`div`,I,[p(`div`,L,[p(`p`,R,o(r(H)(`bundle.items`)),1),p(`ul`,z,[(t(!0),m(f,null,ee(Te.value,(e,n)=>(t(),m(`li`,{key:n,class:`flex items-start gap-2 text-base text-cream/95 leading-relaxed`},[l(h,{name:`check`,size:18,class:`mt-0.5 shrink-0 text-accent`}),e.product?(t(),a(u,{key:0,to:e.product.href,class:`hover:text-accent transition-colors`},{default:s(()=>[d(o(e.label),1)]),_:2},1032,[`to`])):(t(),m(`span`,B,o(e.label),1))]))),128))])]),p(`div`,V,[p(`span`,pe,o(we.value),1),Y.value?(t(),m(`span`,me,[d(o(r(H)(`bundle.memberPrice`))+` `,1),p(`span`,he,o(Y.value),1)])):c(``,!0)]),p(`div`,ge,[l(de,{modelValue:K.value,"onUpdate:modelValue":i[1]||=e=>K.value=e,min:1,max:10},null,8,[`modelValue`]),l(v,{variant:`accent`,size:`lg`,onClick:Ee},{before:s(()=>[l(h,{name:`plus`,size:16})]),default:s(()=>[d(` `+o(r(H)(`ds.buttons.addToCart`)),1)]),_:1})])])])])])):(t(),m(`main`,x,[p(`div`,S,[p(`h1`,C,o(r(H)(`product.notFound.title`)),1),p(`p`,w,o(r(H)(`product.notFound.body`)),1),l(u,{to:`/`,class:`inline-flex`},{default:s(()=>[l(v,{variant:`primary`,size:`lg`},{default:s(()=>[d(o(r(H)(`product.backHome`)),1)]),_:1})]),_:1})])])),i[3]||=p(`div`,{"aria-hidden":`true`,class:`min-[1100px]:hidden bg-brand`,style:{height:`calc(100px + env(safe-area-inset-bottom))`}},null,-1),l(y),l(fe,{modelValue:G.value,"onUpdate:modelValue":i[2]||=e=>G.value=e,items:r(U).items,subtotal:r(U).subtotal,count:r(U).count,onUpdateQuantity:X,onRemove:De,onCheckout:Oe},null,8,[`modelValue`,`items`,`subtotal`,`count`])],64)}}};export{_e as default}; |