34dcec28fa
Reverts the full-bleed background-banner desktop hero. Desktop uses a 1.4fr / 1fr grid: image column gets the heavier ratio so the 16:9 landscape source has room for its full composition; copy + items + purchase cluster sits in the right column. Back button stays in its own row above the hero on every viewport — no overlay. BundleCard now uses RouterLink for internal hrefs (was rendering a plain <a>, which triggered a hard navigation and lost vue-router's saved scroll position when the user hit back from a bundle page). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 line
8.0 KiB
JavaScript
1 line
8.0 KiB
JavaScript
import{B as e,C as t,S as n,T as r,c as i,ft as a,j as o,l as s,m as c,p as l,r as u,s as d,u as f,ut as p,x as m}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as h}from"./Icon-BCo6-bGH.js";import{t as g}from"./IconButton-Cw1KbfUO.js";import{t as _}from"./i18n-yr4x-3Jp.js";import{t as v}from"./_plugin-vue_export-helper-0vLWKQyu.js";import{t as y}from"./Button-D1Rp2Xe1.js";import{t as b}from"./BundleCard-DAFU1tCy.js";var x={key:0,class:`flex flex-col gap-4`},S={key:0,class:`font-display font-normal leading-[1.05] tracking-tight text-ink text-headline-md`},C={key:0,class:`italic font-light text-brand`},w={__name:`BundlesHeader`,props:{headline:{type:String,default:``},headlineEm:{type:String,default:``},sub:{type:String,default:``},subMaxWidth:{type:String,default:`max-w-md`}},setup(e){return(n,r)=>e.headline||e.headlineEm||e.sub?(t(),f(`div`,x,[e.headline||e.headlineEm?(t(),f(`h2`,S,[l(a(e.headline)+` `,1),e.headlineEm?(t(),f(`em`,C,a(e.headlineEm),1)):s(``,!0)])):s(``,!0),e.sub?(t(),f(`p`,{key:1,class:p([`text-base leading-relaxed text-muted`,e.subMaxWidth])},a(e.sub),3)):s(``,!0)])):s(``,!0)}},T={"aria-hidden":`true`,class:`mt-0.5 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-brand-wash text-brand`},E={class:`font-sans text-sm font-semibold text-ink leading-snug`},D={__name:`BundlesBenefits`,props:{benefits:{type:Array,required:!0,validator:e=>e.every(e=>typeof e==`string`)},listClass:{type:String,default:``}},setup(e){return(n,i)=>e.benefits.length?(t(),f(`ul`,{key:0,class:p([`flex flex-col gap-4`,e.listClass])},[(t(!0),f(u,null,r(e.benefits.slice(0,3),e=>(t(),f(`li`,{key:e,class:`flex items-start gap-3`},[d(`span`,T,[c(h,{name:`check`,size:14,"stroke-width":2.2})]),d(`span`,E,a(e),1)]))),128))],2)):s(``,!0)}},O={id:`bundles`,class:`bg-surface text-ink`},k={class:`mx-auto w-full max-w-6xl px-6 py-16 sm:px-8 sm:py-20 md:px-12 md:py-24 lg:px-16 lg:py-28`},ee={key:0,class:`flex flex-col gap-10 md:gap-12 lg:gap-14`},te={key:0,class:`rounded-md border border-cream-dark bg-cream px-5 py-4 sm:px-6 sm:py-5`},ne={class:`flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between sm:gap-x-8 sm:gap-y-3`},A={"aria-hidden":`true`,class:`inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-brand-wash text-brand`},j={class:`font-sans text-sm font-semibold text-ink leading-snug`},M={class:`min-w-0`},N={class:`md:hidden grid gap-5`},P={class:`hidden md:grid md:gap-6 md:grid-cols-3`},F={key:1,class:`flex justify-center`},I={key:1,class:`grid gap-10 md:gap-12 lg:gap-16 lg:grid-cols-[340px_1fr] lg:items-center`},L={class:`flex flex-col gap-8`},R={class:`min-w-0`},z={class:`md:hidden grid gap-5`},B={class:`hidden md:flex md:flex-col md:gap-6 relative`},V=[`aria-label`],H=[`aria-label`],U={class:`flex items-center justify-between gap-4`},W={class:`flex items-center gap-2`},G=[`aria-label`,`aria-current`,`onClick`],K={class:`flex items-center gap-2`},q=v({__name:`Bundles`,props:{layout:{type:String,default:`sidebar`,validator:e=>[`sidebar`,`stacked`].includes(e)},headline:{type:String,default:``},headlineEm:{type:String,default:``},sub:{type:String,default:``},benefits:{type:Array,default:()=>[],validator:e=>e.every(e=>typeof e==`string`)},joinCta:{type:String,default:``},bundles:{type:Array,required:!0},carouselLabel:{type:String,default:``},carouselPrevLabel:{type:String,default:``},carouselNextLabel:{type:String,default:``},carouselGoToPrefix:{type:String,default:``}},emits:[`add`,`join`],setup(v){let x=v,{t:S}=_(),C=()=>x.carouselLabel||S(`ds.bundles.carousel.label`),T=()=>x.carouselPrevLabel||S(`ds.bundles.carousel.prev`),E=()=>x.carouselNextLabel||S(`ds.bundles.carousel.next`),q=()=>x.carouselGoToPrefix||S(`ds.bundles.carousel.goToSlide`),J=e(null),Y=e(0);function X(){return J.value?J.value.children.length:0}function Z(e,t=`smooth`){let n=J.value;if(!n)return;let r=n.children.length-1,i=Math.max(0,Math.min(e,r));n.scrollTo({left:i*n.clientWidth,behavior:t})}function re(){let e=X()-1;e<0||Z(Y.value===0?e:Y.value-1)}function ie(){let e=X()-1;e<0||Z(Y.value===e?0:Y.value+1)}function ae(){let e=J.value;if(!e)return;let t=Math.round(e.scrollLeft/e.clientWidth);t!==Y.value&&(Y.value=t)}let Q=0;function $(){Q&&cancelAnimationFrame(Q),Q=requestAnimationFrame(()=>{let e=J.value;e&&(e.scrollLeft=Y.value*e.clientWidth,Q=0)})}return n(()=>{window.addEventListener(`resize`,$,{passive:!0})}),m(()=>{window.removeEventListener(`resize`,$),Q&&cancelAnimationFrame(Q)}),(e,n)=>(t(),f(`section`,O,[d(`div`,k,[v.layout===`stacked`?(t(),f(`div`,ee,[c(w,{headline:v.headline,"headline-em":v.headlineEm,sub:v.sub,"sub-max-width":`max-w-2xl`},null,8,[`headline`,`headline-em`,`sub`]),v.benefits.length?(t(),f(`div`,te,[d(`ul`,ne,[(t(!0),f(u,null,r(v.benefits.slice(0,3),e=>(t(),f(`li`,{key:e,class:`flex items-center gap-3`},[d(`span`,A,[c(h,{name:`check`,size:14,"stroke-width":2.2})]),d(`span`,j,a(e),1)]))),128))])])):s(``,!0),d(`div`,M,[d(`div`,N,[(t(!0),f(u,null,r(v.bundles,n=>(t(),i(b,{key:n.id,layout:`vertical`,name:n.name,items:n.items,price:n.price,"member-price":n.memberPrice,usage:n.usage,image:n.image,"image-alt":n.imageAlt,badge:n.badge,"badge-variant":n.badgeVariant||`accent`,href:n.href||``,tone:`paper`,onAdd:t=>e.$emit(`add`,n.id)},null,8,[`name`,`items`,`price`,`member-price`,`usage`,`image`,`image-alt`,`badge`,`badge-variant`,`href`,`onAdd`]))),128))]),d(`div`,P,[(t(!0),f(u,null,r(v.bundles.slice(0,3),n=>(t(),i(b,{key:n.id,layout:`vertical`,name:n.name,items:n.items,price:n.price,"member-price":n.memberPrice,usage:n.usage,image:n.image,"image-alt":n.imageAlt,badge:n.badge,"badge-variant":n.badgeVariant||`accent`,href:n.href||``,tone:`paper`,onAdd:t=>e.$emit(`add`,n.id)},null,8,[`name`,`items`,`price`,`member-price`,`usage`,`image`,`image-alt`,`badge`,`badge-variant`,`href`,`onAdd`]))),128))])]),v.joinCta?(t(),f(`div`,F,[c(y,{variant:`primary`,size:`lg`,onClick:n[0]||=t=>e.$emit(`join`)},{default:o(()=>[l(a(v.joinCta),1)]),_:1})])):s(``,!0)])):(t(),f(`div`,I,[d(`aside`,L,[c(w,{headline:v.headline,"headline-em":v.headlineEm,sub:v.sub,"sub-max-width":`max-w-md`},null,8,[`headline`,`headline-em`,`sub`]),c(D,{benefits:v.benefits},null,8,[`benefits`]),v.joinCta?(t(),i(y,{key:0,variant:`primary`,size:`md`,class:`self-start`,onClick:n[1]||=t=>e.$emit(`join`)},{default:o(()=>[l(a(v.joinCta),1)]),_:1})):s(``,!0)]),d(`div`,R,[d(`div`,z,[(t(!0),f(u,null,r(v.bundles,n=>(t(),i(b,{key:n.id,layout:`vertical`,name:n.name,items:n.items,price:n.price,"member-price":n.memberPrice,usage:n.usage,image:n.image,"image-alt":n.imageAlt,badge:n.badge,"badge-variant":n.badgeVariant||`accent`,href:n.href||``,tone:`paper`,onAdd:t=>e.$emit(`add`,n.id)},null,8,[`name`,`items`,`price`,`member-price`,`usage`,`image`,`image-alt`,`badge`,`badge-variant`,`href`,`onAdd`]))),128))]),d(`div`,B,[d(`div`,{ref_key:`track`,ref:J,class:`flex snap-x snap-mandatory overflow-x-auto scroll-smooth no-scrollbar pt-2 pb-16 -mt-2 -mb-16`,role:`region`,"aria-roledescription":`carousel`,"aria-label":C(),onScroll:ae},[(t(!0),f(u,null,r(v.bundles,(n,r)=>(t(),f(`div`,{key:n.id,class:`snap-start shrink-0 w-full`,role:`group`,"aria-roledescription":`slide`,"aria-label":`${r+1} / ${v.bundles.length}`},[c(b,{layout:`horizontal`,name:n.name,items:n.items,price:n.price,"member-price":n.memberPrice,usage:n.usage,image:n.image,"image-alt":n.imageAlt,badge:n.badge,"badge-variant":n.badgeVariant||`accent`,href:n.href||``,tone:`paper`,onAdd:t=>e.$emit(`add`,n.id)},null,8,[`name`,`items`,`price`,`member-price`,`usage`,`image`,`image-alt`,`badge`,`badge-variant`,`href`,`onAdd`])],8,H))),128))],40,V),d(`div`,U,[d(`div`,W,[(t(!0),f(u,null,r(v.bundles,(e,n)=>(t(),f(`button`,{key:n,type:`button`,class:p([`h-2 rounded-full transition-all duration-base`,Y.value===n?`w-8 bg-brand`:`w-2 bg-brand/30 hover:bg-brand/50`]),"aria-label":`${q()} ${n+1}`,"aria-current":Y.value===n?`true`:void 0,onClick:e=>Z(n)},null,10,G))),128))]),d(`div`,K,[c(g,{icon:`chevron-left`,variant:`brand-wash`,size:`md`,"aria-label":T(),onClick:re},null,8,[`aria-label`]),c(g,{icon:`chevron-right`,variant:`brand-wash`,size:`md`,"aria-label":E(),onClick:ie},null,8,[`aria-label`])])])])])]))])]))}},[[`__scopeId`,`data-v-86262777`]]);export{q as t}; |