home: brand hero with in-flow splash animation, 3-product teaser, bundle imagery
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>
This commit is contained in:
@@ -1 +1 @@
|
||||
import{C as e,T as t,c as n,ft as r,j as i,l as a,p as o,r as s,s as c,u as l,ut as u}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as d}from"./_plugin-vue_export-helper-BOai-rQB.js";import{t as f}from"./Badge-Bu_yseK_.js";var p={id:`about`,class:`bg-cream text-ink`},m={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`},h={class:`flex flex-col items-center text-center gap-4 max-w-3xl mx-auto`},g={key:1,class:`font-display font-normal leading-[1.05] tracking-tight text-ink text-headline-lg`},_={key:2,class:`text-lg leading-relaxed text-muted max-w-2xl`},v={key:0,class:`timeline-track hidden md:grid md:grid-cols-3 mt-16`,"aria-hidden":`true`},y={key:1,class:`timeline-list mt-6 md:mt-8 grid gap-0 md:gap-6 md:grid-cols-3`},b={class:`timeline-mobile-marker`},x=d({__name:`About`,props:{eyebrow:{type:String,default:``},headline:{type:String,default:``},sub:{type:String,default:``},milestones:{type:Array,default:()=>[],validator:e=>e.every(e=>e&&typeof e==`object`&&typeof e.year==`string`&&typeof e.title==`string`&&typeof e.text==`string`)}},setup(d){let x=[{card:`bg-cream border-line`,title:`text-ink`,body:`text-muted`,pill:`pill-paper`},{card:`bg-paper border-line`,title:`text-ink`,body:`text-muted`,pill:`pill-brand-soft`},{card:`bg-brand border-transparent`,title:`text-cream`,body:`text-cream/80`,pill:`pill-accent`}];return(S,C)=>(e(),l(`section`,p,[c(`div`,m,[c(`div`,h,[d.eyebrow?(e(),n(f,{key:0,variant:`brand`},{default:i(()=>[o(r(d.eyebrow),1)]),_:1})):a(``,!0),d.headline?(e(),l(`h2`,g,r(d.headline),1)):a(``,!0),d.sub?(e(),l(`p`,_,r(d.sub),1)):a(``,!0)]),d.milestones.length?(e(),l(`div`,v,[(e(!0),l(s,null,t(d.milestones.slice(0,3),(t,n)=>(e(),l(`div`,{key:`track-`+n,class:`timeline-cell`},[c(`span`,{class:u([`timeline-pill`,x[n].pill])},r(t.year),3)]))),128))])):a(``,!0),d.milestones.length?(e(),l(`ol`,y,[(e(!0),l(s,null,t(d.milestones.slice(0,3),(t,n)=>(e(),l(`li`,{key:t.year+t.title,class:`timeline-item flex flex-col md:h-full`},[c(`div`,b,[c(`span`,{class:u([`timeline-pill`,x[n].pill])},r(t.year),3)]),c(`div`,{class:u([`flex flex-col gap-3 rounded-md border p-6 md:p-7 md:flex-1 md:h-full`,x[n].card])},[c(`h3`,{class:u([`font-display text-2xl font-normal leading-tight`,x[n].title])},r(t.title),3),c(`p`,{class:u([`text-sm leading-relaxed`,x[n].body])},r(t.text),3)],2)]))),128))])):a(``,!0)])]))}},[[`__scopeId`,`data-v-7d574710`]]);export{x as t};
|
||||
import{C as e,T as t,c as n,ft as r,j as i,l as a,p as o,r as s,s as c,u as l,ut as u}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as d}from"./Badge-DiccZCC_.js";import{t as f}from"./_plugin-vue_export-helper-0vLWKQyu.js";var p={id:`about`,class:`bg-cream text-ink`},m={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`},h={class:`flex flex-col items-center text-center gap-4 max-w-3xl mx-auto`},g={key:1,class:`font-display font-normal leading-[1.05] tracking-tight text-ink text-headline-lg`},_={key:2,class:`text-lg leading-relaxed text-muted max-w-2xl`},v={key:0,class:`timeline-track hidden md:grid md:grid-cols-3 mt-16`,"aria-hidden":`true`},y={key:1,class:`timeline-list mt-6 md:mt-8 grid gap-0 md:gap-6 md:grid-cols-3`},b={class:`timeline-mobile-marker`},x=f({__name:`About`,props:{eyebrow:{type:String,default:``},headline:{type:String,default:``},sub:{type:String,default:``},milestones:{type:Array,default:()=>[],validator:e=>e.every(e=>e&&typeof e==`object`&&typeof e.year==`string`&&typeof e.title==`string`&&typeof e.text==`string`)}},setup(f){let x=[{card:`bg-cream border-line`,title:`text-ink`,body:`text-muted`,pill:`pill-paper`},{card:`bg-paper border-line`,title:`text-ink`,body:`text-muted`,pill:`pill-brand-soft`},{card:`bg-brand border-transparent`,title:`text-cream`,body:`text-cream/80`,pill:`pill-accent`}];return(S,C)=>(e(),l(`section`,p,[c(`div`,m,[c(`div`,h,[f.eyebrow?(e(),n(d,{key:0,variant:`brand`},{default:i(()=>[o(r(f.eyebrow),1)]),_:1})):a(``,!0),f.headline?(e(),l(`h2`,g,r(f.headline),1)):a(``,!0),f.sub?(e(),l(`p`,_,r(f.sub),1)):a(``,!0)]),f.milestones.length?(e(),l(`div`,v,[(e(!0),l(s,null,t(f.milestones.slice(0,3),(t,n)=>(e(),l(`div`,{key:`track-`+n,class:`timeline-cell`},[c(`span`,{class:u([`timeline-pill`,x[n].pill])},r(t.year),3)]))),128))])):a(``,!0),f.milestones.length?(e(),l(`ol`,y,[(e(!0),l(s,null,t(f.milestones.slice(0,3),(t,n)=>(e(),l(`li`,{key:t.year+t.title,class:`timeline-item flex flex-col md:h-full`},[c(`div`,b,[c(`span`,{class:u([`timeline-pill`,x[n].pill])},r(t.year),3)]),c(`div`,{class:u([`flex flex-col gap-3 rounded-md border p-6 md:p-7 md:flex-1 md:h-full`,x[n].card])},[c(`h3`,{class:u([`font-display text-2xl font-normal leading-tight`,x[n].title])},r(t.title),3),c(`p`,{class:u([`text-sm leading-relaxed`,x[n].body])},r(t.text),3)],2)]))),128))])):a(``,!0)])]))}},[[`__scopeId`,`data-v-7d574710`]]);export{x as t};
|
||||
@@ -1 +1 @@
|
||||
import{C as e,G as t,m as n,o as r,u as i}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as a}from"./i18n-D7Ao3GC7.js";import{t as o}from"./About-DLWLHk5Z.js";var s={class:`min-h-screen bg-cream`},c={__name:`AboutPreview`,setup(c){let{t:l}=a(),u=r(()=>[1,2,3].map(e=>({year:l(`about.milestone.${e}.year`),title:l(`about.milestone.${e}.title`),text:l(`about.milestone.${e}.text`)})));return(r,a)=>(e(),i(`div`,s,[n(o,{eyebrow:t(l)(`about.eyebrow`),headline:t(l)(`about.headline`),sub:t(l)(`about.sub`),milestones:u.value},null,8,[`eyebrow`,`headline`,`sub`,`milestones`])]))}};export{c as default};
|
||||
import{C as e,G as t,m as n,o as r,u as i}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as a}from"./i18n-VERRV-oN.js";import{t as o}from"./About-DIPGv3tq.js";var s={class:`min-h-screen bg-cream`},c={__name:`AboutPreview`,setup(c){let{t:l}=a(),u=r(()=>[1,2,3].map(e=>({year:l(`about.milestone.${e}.year`),title:l(`about.milestone.${e}.title`),text:l(`about.milestone.${e}.text`)})));return(r,a)=>(e(),i(`div`,s,[n(o,{eyebrow:t(l)(`about.eyebrow`),headline:t(l)(`about.headline`),sub:t(l)(`about.sub`),milestones:u.value},null,8,[`eyebrow`,`headline`,`sub`,`milestones`])]))}};export{c as default};
|
||||
@@ -1,4 +1,4 @@
|
||||
import{C as e,G as t,c as n,ft as r,j as i,m as a,p as o,s}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as c}from"./i18n-D7Ao3GC7.js";import{t as l}from"./SectionShell-osccWl4j.js";import{t as u}from"./DevicePreview-DrPoWfT3.js";var d={class:`eyebrow mb-5`},f=`/design/preview/about`,p={__name:`AboutSection`,setup(p){let{t:m}=c();return(c,p)=>(e(),n(l,{eyebrow:t(m)(`ds.eyebrow.components`),title:t(m)(`ds.about.title`),description:t(m)(`ds.about.description`),wide:``},{default:i(()=>[s(`section`,null,[a(u,{src:f,initial:`desktop`,height:820})]),s(`section`,null,[s(`h2`,d,r(t(m)(`ds.heading.usage`)),1),p[0]||=s(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[s(`pre`,{class:`whitespace-pre-wrap`},`<About
|
||||
import{C as e,G as t,c as n,ft as r,j as i,m as a,p as o,s}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as c}from"./i18n-VERRV-oN.js";import{t as l}from"./SectionShell-osccWl4j.js";import{t as u}from"./DevicePreview-m3tD-qdR.js";var d={class:`eyebrow mb-5`},f=`/design/preview/about`,p={__name:`AboutSection`,setup(p){let{t:m}=c();return(c,p)=>(e(),n(l,{eyebrow:t(m)(`ds.eyebrow.components`),title:t(m)(`ds.about.title`),description:t(m)(`ds.about.description`),wide:``},{default:i(()=>[s(`section`,null,[a(u,{src:f,initial:`desktop`,height:820})]),s(`section`,null,[s(`h2`,d,r(t(m)(`ds.heading.usage`)),1),p[0]||=s(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[s(`pre`,{class:`whitespace-pre-wrap`},`<About
|
||||
:eyebrow="t('about.eyebrow')"
|
||||
:headline="t('about.headline')"
|
||||
:sub="t('about.sub')"
|
||||
@@ -1 +1 @@
|
||||
import{B as e,C as t,D as n,G as r,S as i,T as a,c as o,ft as s,j as c,l,m as u,o as d,p as f,r as p,s as m,u as h,ut as g}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{c as _}from"./runtime-dom.esm-bundler-Bg1uJ-W7.js";import{o as v}from"./vue-router-Cyqru1db.js";import{t as y}from"./i18n-D7Ao3GC7.js";import{i as b,n as x,t as S}from"./api-DlB23x7f.js";import{t as C}from"./Button-D1Rp2Xe1.js";import{t as w}from"./checkout-BywUzOLD.js";import{t as T}from"./Input-D0r2DMc-.js";var E={class:`flex flex-col gap-6`},D=[`aria-label`],O=[`aria-selected`,`onClick`],k={key:0,class:`grid gap-5 md:grid-cols-2`},A={key:3,class:`inline-flex items-center gap-3 cursor-pointer select-none`},j=[`checked`],M={class:`text-sm text-ink`},N={key:4,class:`text-sm text-danger`,role:`alert`,"aria-live":`polite`},P={key:5,class:`text-[13px] text-muted`},F={href:`/account/reset-password`,class:`text-brand hover:underline`},I={class:`fixed inset-x-0 bottom-0 z-30 bg-cream border-t border-line`,role:`contentinfo`},L={class:`mx-auto w-full max-w-7xl px-6 sm:px-8 md:px-12 lg:px-16 py-3 flex gap-3 sm:justify-between`,style:{paddingBottom:`max(0.75rem, env(safe-area-inset-bottom))`}},R={class:`flex-1 sm:flex-initial`},z={__name:`AccountStep`,setup(z){let{t:B}=y(),V=w(),H=v(),U=e(!1),W=e(``),G=[{key:`guest`,label:`checkout.account.tab.guest`},{key:`signin`,label:`checkout.account.tab.signin`},{key:`register`,label:`checkout.account.tab.register`}];function K(e){W.value=``,V.setAccountMode(e)}let q=d(()=>V.accountMode===`guest`),J=d(()=>V.accountMode===`signin`),Y=d(()=>V.accountMode===`register`),X=d(()=>!Y.value||V.password===V.passwordConfirm),Z=d(()=>V.email?q.value?!1:!!(!V.password||V.password.length<8||Y.value&&!X.value):!0);async function Q(){W.value=``,U.value=!0;try{J.value?await b({email:V.email,password:V.password}):Y.value&&await x({email:V.email,password:V.password,firstName:V.firstName,lastName:V.lastName,acceptsMarketing:V.acceptsMarketing}),V.persist(),H.push(`/checkout/shipping`)}catch(e){W.value=e?.message||B(`checkout.error.generic`)}finally{U.value=!1}}return i(async()=>{let e=await S();e?.user?.email&&!V.email&&V.update({email:e.user.email})}),(e,i)=>{let d=n(`RouterLink`);return t(),h(p,null,[m(`section`,E,[m(`div`,{role:`tablist`,"aria-label":r(B)(`checkout.account.tabsLabel`),class:`flex w-full rounded-pill border border-line bg-paper p-1`},[(t(),h(p,null,a(G,e=>m(`button`,{key:e.key,role:`tab`,type:`button`,"aria-selected":r(V).accountMode===e.key,class:g([`flex-1 px-4 py-2 rounded-pill text-[13px] font-semibold tracking-label transition-colors duration-base text-center`,r(V).accountMode===e.key?`bg-brand text-cream`:`text-brand hover:bg-cream`]),onClick:t=>K(e.key)},s(r(B)(e.label)),11,O)),64))],8,D),m(`form`,{class:`flex flex-col gap-5 md:min-h-[28rem]`,novalidate:``,onSubmit:_(Q,[`prevent`])},[u(T,{"model-value":r(V).email,label:r(B)(`checkout.field.email`),type:`email`,required:``,placeholder:r(B)(`checkout.placeholder.email`),hint:q.value?r(B)(`checkout.hint.email`):``,"onUpdate:modelValue":i[0]||=e=>r(V).update({email:e})},null,8,[`model-value`,`label`,`placeholder`,`hint`]),Y.value?(t(),h(`div`,k,[u(T,{"model-value":r(V).firstName,label:r(B)(`checkout.field.firstName`),"onUpdate:modelValue":i[1]||=e=>r(V).update({firstName:e})},null,8,[`model-value`,`label`]),u(T,{"model-value":r(V).lastName,label:r(B)(`checkout.field.lastName`),"onUpdate:modelValue":i[2]||=e=>r(V).update({lastName:e})},null,8,[`model-value`,`label`])])):l(``,!0),J.value||Y.value?(t(),o(T,{key:1,"model-value":r(V).password,label:r(B)(`checkout.field.password`),type:`password`,required:``,hint:Y.value?r(B)(`checkout.hint.password`):``,"onUpdate:modelValue":i[3]||=e=>r(V).update({password:e})},null,8,[`model-value`,`label`,`hint`])):l(``,!0),Y.value?(t(),o(T,{key:2,"model-value":r(V).passwordConfirm,label:r(B)(`checkout.field.passwordConfirm`),type:`password`,required:``,error:X.value?``:r(B)(`checkout.error.passwordMismatch`),"onUpdate:modelValue":i[4]||=e=>r(V).update({passwordConfirm:e})},null,8,[`model-value`,`label`,`error`])):l(``,!0),q.value||Y.value?(t(),h(`label`,A,[m(`input`,{checked:r(V).acceptsMarketing,type:`checkbox`,class:`w-5 h-5 rounded-xs border border-line accent-brand`,onChange:i[5]||=e=>r(V).update({acceptsMarketing:e.target.checked})},null,40,j),m(`span`,M,s(r(B)(`checkout.field.marketing`)),1)])):l(``,!0),W.value?(t(),h(`p`,N,s(W.value),1)):l(``,!0),J.value?(t(),h(`p`,P,[m(`a`,F,s(r(B)(`checkout.account.forgot`)),1)])):l(``,!0)],32)]),m(`footer`,I,[m(`div`,L,[u(d,{to:`/checkout/cart`,class:`flex-1 sm:flex-initial`},{default:c(()=>[u(C,{variant:`primary`,size:`lg`,block:``,type:`button`},{default:c(()=>[f(s(r(B)(`checkout.back`)),1)]),_:1})]),_:1}),m(`div`,R,[u(C,{variant:`accent`,size:`lg`,block:``,loading:U.value,disabled:Z.value,onClick:Q},{default:c(()=>[f(s(r(B)(`checkout.account.cta.continue`)),1)]),_:1},8,[`loading`,`disabled`])])])])],64)}}};export{z as default};
|
||||
import{B as e,C as t,D as n,G as r,S as i,T as a,c as o,ft as s,j as c,l,m as u,o as d,p as f,r as p,s as m,u as h,ut as g}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{s as _}from"./runtime-dom.esm-bundler-CXLmyuFK.js";import{o as v}from"./vue-router-Cyqru1db.js";import{t as y}from"./i18n-VERRV-oN.js";import{i as b,n as x,t as S}from"./api-DlB23x7f.js";import{t as C}from"./Button-D1Rp2Xe1.js";import{t as w}from"./checkout-BywUzOLD.js";import{t as T}from"./Input-D0r2DMc-.js";var E={class:`flex flex-col gap-6`},D=[`aria-label`],O=[`aria-selected`,`onClick`],k={key:0,class:`grid gap-5 md:grid-cols-2`},A={key:3,class:`inline-flex items-center gap-3 cursor-pointer select-none`},j=[`checked`],M={class:`text-sm text-ink`},N={key:4,class:`text-sm text-danger`,role:`alert`,"aria-live":`polite`},P={key:5,class:`text-[13px] text-muted`},F={href:`/account/reset-password`,class:`text-brand hover:underline`},I={class:`fixed inset-x-0 bottom-0 z-30 bg-cream border-t border-line`,role:`contentinfo`},L={class:`mx-auto w-full max-w-7xl px-6 sm:px-8 md:px-12 lg:px-16 py-3 flex gap-3 sm:justify-between`,style:{paddingBottom:`max(0.75rem, env(safe-area-inset-bottom))`}},R={class:`flex-1 sm:flex-initial`},z={__name:`AccountStep`,setup(z){let{t:B}=y(),V=w(),H=v(),U=e(!1),W=e(``),G=[{key:`guest`,label:`checkout.account.tab.guest`},{key:`signin`,label:`checkout.account.tab.signin`},{key:`register`,label:`checkout.account.tab.register`}];function K(e){W.value=``,V.setAccountMode(e)}let q=d(()=>V.accountMode===`guest`),J=d(()=>V.accountMode===`signin`),Y=d(()=>V.accountMode===`register`),X=d(()=>!Y.value||V.password===V.passwordConfirm),Z=d(()=>V.email?q.value?!1:!!(!V.password||V.password.length<8||Y.value&&!X.value):!0);async function Q(){W.value=``,U.value=!0;try{J.value?await b({email:V.email,password:V.password}):Y.value&&await x({email:V.email,password:V.password,firstName:V.firstName,lastName:V.lastName,acceptsMarketing:V.acceptsMarketing}),V.persist(),H.push(`/checkout/shipping`)}catch(e){W.value=e?.message||B(`checkout.error.generic`)}finally{U.value=!1}}return i(async()=>{let e=await S();e?.user?.email&&!V.email&&V.update({email:e.user.email})}),(e,i)=>{let d=n(`RouterLink`);return t(),h(p,null,[m(`section`,E,[m(`div`,{role:`tablist`,"aria-label":r(B)(`checkout.account.tabsLabel`),class:`flex w-full rounded-pill border border-line bg-paper p-1`},[(t(),h(p,null,a(G,e=>m(`button`,{key:e.key,role:`tab`,type:`button`,"aria-selected":r(V).accountMode===e.key,class:g([`flex-1 px-4 py-2 rounded-pill text-[13px] font-semibold tracking-label transition-colors duration-base text-center`,r(V).accountMode===e.key?`bg-brand text-cream`:`text-brand hover:bg-cream`]),onClick:t=>K(e.key)},s(r(B)(e.label)),11,O)),64))],8,D),m(`form`,{class:`flex flex-col gap-5 md:min-h-[28rem]`,novalidate:``,onSubmit:_(Q,[`prevent`])},[u(T,{"model-value":r(V).email,label:r(B)(`checkout.field.email`),type:`email`,required:``,placeholder:r(B)(`checkout.placeholder.email`),hint:q.value?r(B)(`checkout.hint.email`):``,"onUpdate:modelValue":i[0]||=e=>r(V).update({email:e})},null,8,[`model-value`,`label`,`placeholder`,`hint`]),Y.value?(t(),h(`div`,k,[u(T,{"model-value":r(V).firstName,label:r(B)(`checkout.field.firstName`),"onUpdate:modelValue":i[1]||=e=>r(V).update({firstName:e})},null,8,[`model-value`,`label`]),u(T,{"model-value":r(V).lastName,label:r(B)(`checkout.field.lastName`),"onUpdate:modelValue":i[2]||=e=>r(V).update({lastName:e})},null,8,[`model-value`,`label`])])):l(``,!0),J.value||Y.value?(t(),o(T,{key:1,"model-value":r(V).password,label:r(B)(`checkout.field.password`),type:`password`,required:``,hint:Y.value?r(B)(`checkout.hint.password`):``,"onUpdate:modelValue":i[3]||=e=>r(V).update({password:e})},null,8,[`model-value`,`label`,`hint`])):l(``,!0),Y.value?(t(),o(T,{key:2,"model-value":r(V).passwordConfirm,label:r(B)(`checkout.field.passwordConfirm`),type:`password`,required:``,error:X.value?``:r(B)(`checkout.error.passwordMismatch`),"onUpdate:modelValue":i[4]||=e=>r(V).update({passwordConfirm:e})},null,8,[`model-value`,`label`,`error`])):l(``,!0),q.value||Y.value?(t(),h(`label`,A,[m(`input`,{checked:r(V).acceptsMarketing,type:`checkbox`,class:`w-5 h-5 rounded-xs border border-line accent-brand`,onChange:i[5]||=e=>r(V).update({acceptsMarketing:e.target.checked})},null,40,j),m(`span`,M,s(r(B)(`checkout.field.marketing`)),1)])):l(``,!0),W.value?(t(),h(`p`,N,s(W.value),1)):l(``,!0),J.value?(t(),h(`p`,P,[m(`a`,F,s(r(B)(`checkout.account.forgot`)),1)])):l(``,!0)],32)]),m(`footer`,I,[m(`div`,L,[u(d,{to:`/checkout/cart`,class:`flex-1 sm:flex-initial`},{default:c(()=>[u(C,{variant:`primary`,size:`lg`,block:``,type:`button`},{default:c(()=>[f(s(r(B)(`checkout.back`)),1)]),_:1})]),_:1}),m(`div`,R,[u(C,{variant:`accent`,size:`lg`,block:``,loading:U.value,disabled:Z.value,onClick:Q},{default:c(()=>[f(s(r(B)(`checkout.account.cta.continue`)),1)]),_:1},8,[`loading`,`disabled`])])])])],64)}}};export{z as default};
|
||||
@@ -1 +1 @@
|
||||
import{C as e,G as t,c as n,ft as r,j as i,m as a,p as o,s}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as c}from"./i18n-D7Ao3GC7.js";import{t as l}from"./Badge-Bu_yseK_.js";import{t as u}from"./SectionShell-osccWl4j.js";import{t as d}from"./Card-E6lMGZqd.js";var f={class:`eyebrow mb-5`},p={class:`flex flex-wrap gap-3`},m={class:`eyebrow mb-5`},h={class:`flex flex-wrap gap-3`},g={__name:`BadgesSection`,setup(g){let{t:_}=c();return(c,g)=>(e(),n(u,{eyebrow:t(_)(`ds.eyebrow.components`),title:t(_)(`ds.badges.title`),description:t(_)(`ds.badges.description`)},{default:i(()=>[s(`section`,null,[s(`h2`,f,r(t(_)(`ds.heading.variants`)),1),a(d,{tone:`paper`},{default:i(()=>[s(`div`,p,[a(l,{variant:`neutral`},{default:i(()=>[o(r(t(_)(`ds.badges.neutral`)),1)]),_:1}),a(l,{variant:`brand`},{default:i(()=>[o(r(t(_)(`ds.badges.brand`)),1)]),_:1}),a(l,{variant:`accent`},{default:i(()=>[o(r(t(_)(`ds.badges.accent`)),1)]),_:1}),a(l,{variant:`subtle`},{default:i(()=>[o(r(t(_)(`ds.badges.subtle`)),1)]),_:1}),a(l,{variant:`success`},{default:i(()=>[o(r(t(_)(`ds.badges.success`)),1)]),_:1}),a(l,{variant:`warning`},{default:i(()=>[o(r(t(_)(`ds.badges.warning`)),1)]),_:1}),a(l,{variant:`danger`},{default:i(()=>[o(r(t(_)(`ds.badges.danger`)),1)]),_:1})])]),_:1})]),s(`section`,null,[s(`h2`,m,r(t(_)(`ds.heading.nonUppercase`)),1),a(d,{tone:`paper`},{default:i(()=>[s(`div`,h,[a(l,{variant:`brand`,uppercase:!1},{default:i(()=>[o(r(t(_)(`ds.badges.newRelease`)),1)]),_:1}),a(l,{variant:`accent`,uppercase:!1},{default:i(()=>[o(r(t(_)(`ds.badges.featured`)),1)]),_:1}),a(l,{variant:`subtle`,uppercase:!1},{default:i(()=>[...g[0]||=[o(`v2.1.0`,-1)]]),_:1})])]),_:1})])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{g as default};
|
||||
import{C as e,G as t,c as n,ft as r,j as i,m as a,p as o,s}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as c}from"./i18n-VERRV-oN.js";import{t as l}from"./Badge-DiccZCC_.js";import{t as u}from"./SectionShell-osccWl4j.js";import{t as d}from"./Card-E6lMGZqd.js";var f={class:`eyebrow mb-5`},p={class:`flex flex-wrap gap-3`},m={class:`eyebrow mb-5`},h={class:`flex flex-wrap gap-3`},g={__name:`BadgesSection`,setup(g){let{t:_}=c();return(c,g)=>(e(),n(u,{eyebrow:t(_)(`ds.eyebrow.components`),title:t(_)(`ds.badges.title`),description:t(_)(`ds.badges.description`)},{default:i(()=>[s(`section`,null,[s(`h2`,f,r(t(_)(`ds.heading.variants`)),1),a(d,{tone:`paper`},{default:i(()=>[s(`div`,p,[a(l,{variant:`neutral`},{default:i(()=>[o(r(t(_)(`ds.badges.neutral`)),1)]),_:1}),a(l,{variant:`brand`},{default:i(()=>[o(r(t(_)(`ds.badges.brand`)),1)]),_:1}),a(l,{variant:`accent`},{default:i(()=>[o(r(t(_)(`ds.badges.accent`)),1)]),_:1}),a(l,{variant:`subtle`},{default:i(()=>[o(r(t(_)(`ds.badges.subtle`)),1)]),_:1}),a(l,{variant:`success`},{default:i(()=>[o(r(t(_)(`ds.badges.success`)),1)]),_:1}),a(l,{variant:`warning`},{default:i(()=>[o(r(t(_)(`ds.badges.warning`)),1)]),_:1}),a(l,{variant:`danger`},{default:i(()=>[o(r(t(_)(`ds.badges.danger`)),1)]),_:1})])]),_:1})]),s(`section`,null,[s(`h2`,m,r(t(_)(`ds.heading.nonUppercase`)),1),a(d,{tone:`paper`},{default:i(()=>[s(`div`,h,[a(l,{variant:`brand`,uppercase:!1},{default:i(()=>[o(r(t(_)(`ds.badges.newRelease`)),1)]),_:1}),a(l,{variant:`accent`,uppercase:!1},{default:i(()=>[o(r(t(_)(`ds.badges.featured`)),1)]),_:1}),a(l,{variant:`subtle`,uppercase:!1},{default:i(()=>[...g[0]||=[o(`v2.1.0`,-1)]]),_:1})])]),_:1})])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{g as default};
|
||||
@@ -1 +1 @@
|
||||
import{C as e,G as t,O as n,T as r,c as i,ft as a,j as o,l as s,m as c,o as l,p as u,r as d,s as f,u as p,ut as m}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as h}from"./Icon-Dcq1PyHo.js";import{t as g}from"./i18n-D7Ao3GC7.js";import{t as _}from"./Badge-Bu_yseK_.js";import{t as v}from"./Button-D1Rp2Xe1.js";var y=[`src`,`alt`],b={class:`flex flex-col gap-1.5`},x={key:0,class:`text-xs font-semibold tracking-label text-muted uppercase`},S={class:`flex flex-col gap-1.5`},C={key:0,class:`text-sm text-muted tracking-label`},w={class:`flex flex-col gap-0.5`},T={class:`text-xs tracking-label text-muted uppercase`},E={class:`font-display text-2xl font-normal text-brand leading-none`},D={key:0,class:`text-xs text-muted mt-1`},O={key:1,class:`text-xs font-semibold tracking-label uppercase text-danger mt-1`},k=3,A={__name:`BundleCard`,props:{name:{type:String,required:!0},items:{type:Array,required:!0},price:{type:Number,required:!0},memberPrice:{type:Number,default:null},usage:{type:String,default:``},image:{type:String,required:!0},imageAlt:{type:String,default:``},badge:{type:String,default:``},badgeVariant:{type:String,default:`accent`,validator:e=>[`neutral`,`brand`,`accent`,`subtle`,`success`,`warning`,`danger`].includes(e)},tone:{type:String,default:`paper`,validator:e=>[`paper`,`cream`].includes(e)},layout:{type:String,default:`vertical`,validator:e=>[`vertical`,`horizontal`].includes(e)},inStock:{type:Boolean,default:!0},currency:{type:String,default:`€`},href:{type:String,default:``}},emits:[`add`],setup(A){let j=A,{t:M}=g(),N={paper:{surface:`bg-paper`,media:`bg-cream`,border:`border-line`},cream:{surface:`bg-cream`,media:`bg-paper`,border:`border-line`}},P=l(()=>N[j.tone]);function F(e){return`${j.currency} ${e.toFixed(2).replace(`.`,`,`)}`}let I=l(()=>F(j.price)),L=l(()=>j.memberPrice==null?``:F(j.memberPrice)),R=l(()=>j.items.slice(0,k)),z=l(()=>Math.max(0,j.items.length-k));return(l,g)=>(e(),p(`article`,{class:m([`group flex overflow-hidden rounded-md border transition-all duration-base ease-out`,A.layout===`horizontal`?`flex-col md:flex-row`:`flex-col`,P.value.surface,P.value.border,`hover:-translate-y-1 hover:shadow-md hover:border-brand-soft`])},[(e(),i(n(A.href?`a`:`div`),{href:A.href||null,class:m([`relative block overflow-hidden`,A.layout===`horizontal`?`aspect-[4/3] md:aspect-auto md:w-[38%] md:shrink-0 md:min-h-[300px]`:`aspect-[4/3]`,P.value.media])},{default:o(()=>[A.badge?(e(),i(_,{key:0,variant:A.badgeVariant,class:`absolute top-4 left-4 z-[1]`},{default:o(()=>[u(a(A.badge),1)]),_:1},8,[`variant`])):s(``,!0),f(`img`,{src:A.image,alt:A.imageAlt||A.name,loading:`lazy`,decoding:`async`,class:m([`absolute inset-0 w-full h-full object-contain transition-transform duration-slow ease-out group-hover:scale-105`,A.layout===`horizontal`?`p-6 md:p-5`:`p-8`])},null,10,y)]),_:1},8,[`href`,`class`])),f(`div`,{class:m([`flex flex-col gap-4 p-6`,A.layout===`horizontal`?`md:p-6 md:flex-1`:``])},[f(`div`,b,[A.usage?(e(),p(`span`,x,a(A.usage),1)):s(``,!0),(e(),i(n(A.href?`a`:`h3`),{href:A.href||null,class:m([`font-display text-xl font-normal leading-tight text-ink`,A.href?`hover:text-brand transition-colors duration-base`:``])},{default:o(()=>[u(a(A.name),1)]),_:1},8,[`href`,`class`]))]),f(`ul`,S,[(e(!0),p(d,null,r(R.value,t=>(e(),p(`li`,{key:t,class:`text-sm text-ink/80 leading-relaxed`},a(t),1))),128)),z.value>0?(e(),p(`li`,C,`+ `+a(z.value)+` `+a(t(M)(`bundles.card.moreItems`)),1)):s(``,!0)]),f(`div`,{class:m([`mt-auto pt-4 border-t border-line flex gap-3`,A.layout===`horizontal`?`flex-col sm:flex-row sm:items-end sm:justify-between`:`flex-col`])},[f(`div`,w,[f(`span`,T,a(t(M)(`bundles.card.priceLabel`)),1),f(`span`,E,a(I.value),1),L.value?(e(),p(`span`,D,a(t(M)(`bundles.card.memberPrefix`))+` `+a(L.value),1)):s(``,!0),A.inStock?s(``,!0):(e(),p(`span`,O,a(t(M)(`ds.product.outOfStock`)),1))]),c(v,{variant:`primary`,size:`md`,block:A.layout===`vertical`,disabled:!A.inStock,onClick:g[0]||=e=>l.$emit(`add`)},{before:o(()=>[c(h,{name:`plus`,size:16})]),default:o(()=>[u(` `+a(t(M)(`ds.buttons.addToCart`)),1)]),_:1},8,[`block`,`disabled`])],2)],2)],2))}};export{A as t};
|
||||
import{C as e,G as t,O as n,T as r,c as i,ft as a,j as o,l as s,m as c,o as l,p as u,r as d,s as f,u as p,ut as m}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as h}from"./Icon-BCo6-bGH.js";import{t as g}from"./i18n-VERRV-oN.js";import{t as _}from"./Badge-DiccZCC_.js";import{t as v}from"./Button-D1Rp2Xe1.js";var y=[`src`,`alt`],b={class:`flex flex-col gap-1.5`},x={key:0,class:`text-xs font-semibold tracking-label text-muted uppercase`},S={class:`flex flex-col gap-1.5`},C={key:0,class:`text-sm text-muted tracking-label`},w={class:`flex flex-col gap-0.5`},T={class:`text-xs tracking-label text-muted uppercase`},E={class:`font-display text-2xl font-normal text-brand leading-none`},D={key:0,class:`text-xs text-muted mt-1`},O={key:1,class:`text-xs font-semibold tracking-label uppercase text-danger mt-1`},k=3,A={__name:`BundleCard`,props:{name:{type:String,required:!0},items:{type:Array,required:!0},price:{type:Number,required:!0},memberPrice:{type:Number,default:null},usage:{type:String,default:``},image:{type:String,required:!0},imageAlt:{type:String,default:``},badge:{type:String,default:``},badgeVariant:{type:String,default:`accent`,validator:e=>[`neutral`,`brand`,`accent`,`subtle`,`success`,`warning`,`danger`].includes(e)},tone:{type:String,default:`paper`,validator:e=>[`paper`,`cream`].includes(e)},layout:{type:String,default:`vertical`,validator:e=>[`vertical`,`horizontal`].includes(e)},inStock:{type:Boolean,default:!0},currency:{type:String,default:`€`},href:{type:String,default:``}},emits:[`add`],setup(A){let j=A,{t:M}=g(),N={paper:{surface:`bg-paper`,media:`bg-cream`,border:`border-line`},cream:{surface:`bg-cream`,media:`bg-paper`,border:`border-line`}},P=l(()=>N[j.tone]);function F(e){return`${j.currency} ${e.toFixed(2).replace(`.`,`,`)}`}let I=l(()=>F(j.price)),L=l(()=>j.memberPrice==null?``:F(j.memberPrice)),R=l(()=>j.items.slice(0,k)),z=l(()=>Math.max(0,j.items.length-k));return(l,g)=>(e(),p(`article`,{class:m([`group flex overflow-hidden rounded-md border transition-all duration-base ease-out`,A.layout===`horizontal`?`flex-col md:flex-row`:`flex-col`,P.value.surface,P.value.border,`hover:-translate-y-1 hover:shadow-md hover:border-brand-soft`])},[(e(),i(n(A.href?`a`:`div`),{href:A.href||null,class:m([`relative block overflow-hidden`,A.layout===`horizontal`?`aspect-[4/3] md:aspect-auto md:w-[38%] md:shrink-0 md:min-h-[300px]`:`aspect-[4/3]`,P.value.media])},{default:o(()=>[A.badge?(e(),i(_,{key:0,variant:A.badgeVariant,class:`absolute top-4 left-4 z-[1]`},{default:o(()=>[u(a(A.badge),1)]),_:1},8,[`variant`])):s(``,!0),f(`img`,{src:A.image,alt:A.imageAlt||A.name,loading:`lazy`,decoding:`async`,class:m([`absolute inset-0 w-full h-full object-contain transition-transform duration-slow ease-out group-hover:scale-105`,A.layout===`horizontal`?`p-6 md:p-5`:`p-8`])},null,10,y)]),_:1},8,[`href`,`class`])),f(`div`,{class:m([`flex flex-col gap-4 p-6`,A.layout===`horizontal`?`md:p-6 md:flex-1`:``])},[f(`div`,b,[A.usage?(e(),p(`span`,x,a(A.usage),1)):s(``,!0),(e(),i(n(A.href?`a`:`h3`),{href:A.href||null,class:m([`font-display text-xl font-normal leading-tight text-ink`,A.href?`hover:text-brand transition-colors duration-base`:``])},{default:o(()=>[u(a(A.name),1)]),_:1},8,[`href`,`class`]))]),f(`ul`,S,[(e(!0),p(d,null,r(R.value,t=>(e(),p(`li`,{key:t,class:`text-sm text-ink/80 leading-relaxed`},a(t),1))),128)),z.value>0?(e(),p(`li`,C,`+ `+a(z.value)+` `+a(t(M)(`bundles.card.moreItems`)),1)):s(``,!0)]),f(`div`,{class:m([`mt-auto pt-4 border-t border-line flex gap-3`,A.layout===`horizontal`?`flex-col sm:flex-row sm:items-end sm:justify-between`:`flex-col`])},[f(`div`,w,[f(`span`,T,a(t(M)(`bundles.card.priceLabel`)),1),f(`span`,E,a(I.value),1),L.value?(e(),p(`span`,D,a(t(M)(`bundles.card.memberPrefix`))+` `+a(L.value),1)):s(``,!0),A.inStock?s(``,!0):(e(),p(`span`,O,a(t(M)(`ds.product.outOfStock`)),1))]),c(v,{variant:`primary`,size:`md`,block:A.layout===`vertical`,disabled:!A.inStock,onClick:g[0]||=e=>l.$emit(`add`)},{before:o(()=>[c(h,{name:`plus`,size:16})]),default:o(()=>[u(` `+a(t(M)(`ds.buttons.addToCart`)),1)]),_:1},8,[`block`,`disabled`])],2)],2)],2))}};export{A as t};
|
||||
@@ -1,4 +1,4 @@
|
||||
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-D7Ao3GC7.js";import{t as p}from"./BundleCard-C-Kavf9m.js";import{t as m}from"./SectionShell-osccWl4j.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
|
||||
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-VERRV-oN.js";import{t as p}from"./BundleCard-DlVtWgvc.js";import{t as m}from"./SectionShell-osccWl4j.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="[
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
|
||||
import{C as e,G as t,m as n,o as r,u as i}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{a}from"./vue-router-Cyqru1db.js";import{t as o}from"./i18n-D7Ao3GC7.js";import{t as s}from"./Bundles-D7HcUXuU.js";var c={class:`min-h-screen bg-surface`},l={__name:`BundlesPreview`,setup(l){let{t:u}=o(),d=a(),f=r(()=>d.query.layout===`stacked`?`stacked`:`sidebar`),p=[{id:`haushalt`,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:`/products/kaiser-natron-pulver-250-g-grosspackung.webp`,imageAlt:`Haushalts-Bundle mit Kaiser-Natron`,badge:`Bestseller`,badgeVariant:`accent`},{id:`waesche`,name:`Wäsche & Pflege`,usage:`1–2× pro Quartal`,items:[`1× Holste Wasch-Soda 500 g`,`1× Gazelle Wäschestärke 1 l`,`1× Linda Fleckenweg 200 ml`],price:22.9,memberPrice:19.47,image:`/products/holste-wasch-soda-500-g-beutel.webp`,imageAlt:`Wäsche & Pflege Bundle`},{id:`wohlfuehl`,name:`Wohlfühl-Bundle`,usage:`1× pro Quartal`,items:[`1× Kaiser-Natron Tabletten 100 g`,`1× Kaiser-Natron Bad 500 g`,`1× Kaiser-Natron Fußbad 500 g`],price:29.9,memberPrice:25.42,image:`/products/kaiser-natron-bad-500-g.webp`,imageAlt:`Wohlfühl-Bundle`}],m=r(()=>[u(`bundles.benefit.1.title`),u(`bundles.benefit.2.title`),u(`bundles.benefit.3.title`)]);return(r,a)=>(e(),i(`div`,c,[n(s,{layout:f.value,bundles:p,headline:t(u)(`bundles.headline.a`),"headline-em":t(u)(`bundles.headline.em`),sub:t(u)(`bundles.sub`),benefits:m.value,"join-cta":t(u)(`bundles.joinCta`)},null,8,[`layout`,`headline`,`headline-em`,`sub`,`benefits`,`join-cta`])]))}};export{l as default};
|
||||
import{C as e,G as t,m as n,o as r,u as i}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{a}from"./vue-router-Cyqru1db.js";import{t as o}from"./i18n-VERRV-oN.js";import{t as s}from"./Bundles-CDxxY_BR.js";var c={class:`min-h-screen bg-surface`},l={__name:`BundlesPreview`,setup(l){let{t:u}=o(),d=a(),f=r(()=>d.query.layout===`stacked`?`stacked`:`sidebar`),p=[{id:`haushalt`,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:`/products/kaiser-natron-pulver-250-g-grosspackung.webp`,imageAlt:`Haushalts-Bundle mit Kaiser-Natron`,badge:`Bestseller`,badgeVariant:`accent`},{id:`waesche`,name:`Wäsche & Pflege`,usage:`1–2× pro Quartal`,items:[`1× Holste Wasch-Soda 500 g`,`1× Gazelle Wäschestärke 1 l`,`1× Linda Fleckenweg 200 ml`],price:22.9,memberPrice:19.47,image:`/products/holste-wasch-soda-500-g-beutel.webp`,imageAlt:`Wäsche & Pflege Bundle`},{id:`wohlfuehl`,name:`Wohlfühl-Bundle`,usage:`1× pro Quartal`,items:[`1× Kaiser-Natron Tabletten 100 g`,`1× Kaiser-Natron Bad 500 g`,`1× Kaiser-Natron Fußbad 500 g`],price:29.9,memberPrice:25.42,image:`/products/kaiser-natron-bad-500-g.webp`,imageAlt:`Wohlfühl-Bundle`}],m=r(()=>[u(`bundles.benefit.1.title`),u(`bundles.benefit.2.title`),u(`bundles.benefit.3.title`)]);return(r,a)=>(e(),i(`div`,c,[n(s,{layout:f.value,bundles:p,headline:t(u)(`bundles.headline.a`),"headline-em":t(u)(`bundles.headline.em`),sub:t(u)(`bundles.sub`),benefits:m.value,"join-cta":t(u)(`bundles.joinCta`)},null,8,[`layout`,`headline`,`headline-em`,`sub`,`benefits`,`join-cta`])]))}};export{l as default};
|
||||
@@ -1,4 +1,4 @@
|
||||
import{B as e,C as t,G as n,T as r,c as i,ft as a,j as o,m as s,o as c,p as l,r as u,s as d,u as f,ut as p}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as m}from"./i18n-D7Ao3GC7.js";import{t as h}from"./SectionShell-osccWl4j.js";import{t as g}from"./DevicePreview-DrPoWfT3.js";var _={role:`tablist`,"aria-label":`Layout variant`,class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper`},v=[`aria-selected`,`onClick`],y={class:`eyebrow mb-5`},b={__name:`BundlesSection`,setup(b){let{t:x}=m(),S=[{id:`sidebar`,label:`Option 1`},{id:`stacked`,label:`Option 2`}],C=e(`sidebar`),w=c(()=>`/design/preview/bundles?layout=${C.value}`);return(e,c)=>(t(),i(h,{eyebrow:n(x)(`ds.eyebrow.components`),title:n(x)(`ds.bundles.title`),description:n(x)(`ds.bundles.description`),wide:``},{default:o(()=>[d(`section`,null,[s(g,{src:w.value,initial:`desktop`,height:1080},{controls:o(()=>[d(`div`,_,[(t(),f(u,null,r(S,e=>d(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":C.value===e.id,class:p([`inline-flex items-center gap-2 px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,C.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>C.value=e.id},a(e.label),11,v)),64))])]),_:1},8,[`src`])]),d(`section`,null,[d(`h2`,y,a(n(x)(`ds.heading.usage`)),1),c[0]||=d(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[d(`pre`,{class:`whitespace-pre-wrap`},`<Bundles
|
||||
import{B as e,C as t,G as n,T as r,c as i,ft as a,j as o,m as s,o as c,p as l,r as u,s as d,u as f,ut as p}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as m}from"./i18n-VERRV-oN.js";import{t as h}from"./SectionShell-osccWl4j.js";import{t as g}from"./DevicePreview-m3tD-qdR.js";var _={role:`tablist`,"aria-label":`Layout variant`,class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper`},v=[`aria-selected`,`onClick`],y={class:`eyebrow mb-5`},b={__name:`BundlesSection`,setup(b){let{t:x}=m(),S=[{id:`sidebar`,label:`Option 1`},{id:`stacked`,label:`Option 2`}],C=e(`sidebar`),w=c(()=>`/design/preview/bundles?layout=${C.value}`);return(e,c)=>(t(),i(h,{eyebrow:n(x)(`ds.eyebrow.components`),title:n(x)(`ds.bundles.title`),description:n(x)(`ds.bundles.description`),wide:``},{default:o(()=>[d(`section`,null,[s(g,{src:w.value,initial:`desktop`,height:1080},{controls:o(()=>[d(`div`,_,[(t(),f(u,null,r(S,e=>d(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":C.value===e.id,class:p([`inline-flex items-center gap-2 px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,C.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>C.value=e.id},a(e.label),11,v)),64))])]),_:1},8,[`src`])]),d(`section`,null,[d(`h2`,y,a(n(x)(`ds.heading.usage`)),1),c[0]||=d(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[d(`pre`,{class:`whitespace-pre-wrap`},`<Bundles
|
||||
:bundles="bundles"
|
||||
:headline="t('bundles.headline.a')"
|
||||
:headline-em="t('bundles.headline.em')"
|
||||
@@ -1,4 +1,4 @@
|
||||
import{C as e,G as t,c as n,ft as r,j as i,m as a,p as o,s}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as c}from"./Icon-Dcq1PyHo.js";import{t as l}from"./i18n-D7Ao3GC7.js";import{t as u}from"./Button-D1Rp2Xe1.js";import{t as d}from"./SectionShell-osccWl4j.js";import{t as f}from"./Card-E6lMGZqd.js";var p={class:`eyebrow mb-5`},m={class:`flex flex-wrap gap-3`},h={class:`eyebrow mb-5`},g={class:`grid md:grid-cols-3 gap-4`},_={class:`eyebrow mb-4`},v={class:`flex flex-wrap gap-3`},y={class:`eyebrow mb-4`},b={class:`flex flex-wrap gap-3`},x={class:`eyebrow mb-4 !text-cream opacity-80`},S={class:`flex flex-wrap gap-3`},C={class:`eyebrow mb-5`},w={class:`flex flex-wrap items-center gap-3`},T={class:`eyebrow mb-5`},E={class:`flex flex-wrap items-center gap-3`},D={class:`eyebrow mb-5`},O={class:`flex flex-wrap gap-3 items-center`},k={class:`eyebrow mb-5`},A={class:`max-w-md space-y-3`},j={class:`eyebrow mb-5`},M={class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},N={class:`whitespace-pre-wrap`},P={__name:`ButtonsSection`,setup(P){let{t:F}=l();return(l,P)=>(e(),n(d,{eyebrow:t(F)(`ds.eyebrow.components`),title:t(F)(`ds.buttons.title`),description:t(F)(`ds.buttons.description`)},{default:i(()=>[s(`section`,null,[s(`h2`,p,r(t(F)(`ds.heading.variants`)),1),a(f,{tone:`paper`},{default:i(()=>[s(`div`,m,[a(u,{variant:`primary`},{default:i(()=>[o(r(t(F)(`ds.buttons.primary`)),1)]),_:1}),a(u,{variant:`accent`},{default:i(()=>[o(r(t(F)(`ds.buttons.accent`)),1)]),_:1}),a(u,{variant:`secondary`},{default:i(()=>[o(r(t(F)(`ds.buttons.secondary`)),1)]),_:1}),a(u,{variant:`ghost`},{default:i(()=>[o(r(t(F)(`ds.buttons.ghost`)),1)]),_:1}),a(u,{variant:`danger`},{default:i(()=>[o(r(t(F)(`ds.buttons.danger`)),1)]),_:1})])]),_:1})]),s(`section`,null,[s(`h2`,h,r(t(F)(`ds.heading.onDifferentSurfaces`)),1),s(`div`,g,[a(f,{tone:`paper`},{default:i(()=>[s(`p`,_,r(t(F)(`ds.cards.paper`)),1),s(`div`,v,[a(u,{variant:`primary`},{before:i(()=>[a(c,{name:`cart`,size:18})]),default:i(()=>[o(` `+r(t(F)(`ds.buttons.addToCart`)),1)]),_:1}),a(u,{variant:`ghost`},{default:i(()=>[o(r(t(F)(`ds.buttons.learnMore`)),1)]),_:1})])]),_:1}),a(f,{tone:`cream`},{default:i(()=>[s(`p`,y,r(t(F)(`ds.cards.cream`)),1),s(`div`,b,[a(u,{variant:`primary`},{before:i(()=>[a(c,{name:`cart`,size:18})]),default:i(()=>[o(` `+r(t(F)(`ds.buttons.addToCart`)),1)]),_:1}),a(u,{variant:`ghost`},{default:i(()=>[o(r(t(F)(`ds.buttons.learnMore`)),1)]),_:1})])]),_:1}),a(f,{tone:`brand`},{default:i(()=>[s(`p`,x,r(t(F)(`ds.cards.brand`)),1),s(`div`,S,[a(u,{variant:`accent`},{before:i(()=>[a(c,{name:`cart`,size:18})]),default:i(()=>[o(` `+r(t(F)(`ds.buttons.addToCart`)),1)]),_:1}),a(u,{variant:`ghost`,class:`!text-cream hover:!bg-cream-wash`},{default:i(()=>[o(r(t(F)(`ds.buttons.learnMore`)),1)]),_:1})])]),_:1})])]),s(`section`,null,[s(`h2`,C,r(t(F)(`ds.heading.sizes`)),1),a(f,{tone:`paper`},{default:i(()=>[s(`div`,w,[a(u,{size:`sm`},{default:i(()=>[o(r(t(F)(`ds.buttons.small`)),1)]),_:1}),a(u,{size:`md`},{default:i(()=>[o(r(t(F)(`ds.buttons.medium`)),1)]),_:1}),a(u,{size:`lg`},{default:i(()=>[o(r(t(F)(`ds.buttons.large`)),1)]),_:1})])]),_:1})]),s(`section`,null,[s(`h2`,T,r(t(F)(`ds.heading.withIcons`)),1),a(f,{tone:`paper`},{default:i(()=>[s(`div`,E,[a(u,{variant:`primary`},{before:i(()=>[a(c,{name:`cart`,size:18})]),default:i(()=>[o(` `+r(t(F)(`ds.buttons.addToCart`)),1)]),_:1}),a(u,{variant:`secondary`},{after:i(()=>[a(c,{name:`arrow-right`,size:18})]),default:i(()=>[o(r(t(F)(`ds.buttons.learnMore`))+` `,1)]),_:1}),a(u,{variant:`ghost`},{before:i(()=>[a(c,{name:`heart`,size:18})]),default:i(()=>[o(` `+r(t(F)(`ds.buttons.save`)),1)]),_:1}),a(u,{variant:`accent`,size:`sm`},{before:i(()=>[a(c,{name:`check`,size:16})]),default:i(()=>[o(` `+r(t(F)(`ds.buttons.confirm`)),1)]),_:1})])]),_:1})]),s(`section`,null,[s(`h2`,D,r(t(F)(`ds.heading.states`)),1),a(f,{tone:`paper`},{default:i(()=>[s(`div`,O,[a(u,null,{default:i(()=>[o(r(t(F)(`ds.heading.default`)),1)]),_:1}),a(u,{disabled:``},{default:i(()=>[o(r(t(F)(`ds.buttons.disabled`)),1)]),_:1}),a(u,{loading:``},{default:i(()=>[o(r(t(F)(`ds.buttons.loading`)),1)]),_:1})])]),_:1})]),s(`section`,null,[s(`h2`,k,r(t(F)(`ds.heading.block`)),1),a(f,{tone:`paper`},{default:i(()=>[s(`div`,A,[a(u,{block:``,variant:`primary`},{before:i(()=>[a(c,{name:`cart`,size:18})]),default:i(()=>[o(` `+r(t(F)(`ds.buttons.addToCart`)),1)]),_:1}),a(u,{block:``,variant:`secondary`},{default:i(()=>[o(r(t(F)(`ds.buttons.continueShopping`)),1)]),_:1})])]),_:1})]),s(`section`,null,[s(`h2`,j,r(t(F)(`ds.heading.usage`)),1),s(`div`,M,[s(`pre`,N,`<Button variant="primary" size="md">
|
||||
import{C as e,G as t,c as n,ft as r,j as i,m as a,p as o,s}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as c}from"./Icon-BCo6-bGH.js";import{t as l}from"./i18n-VERRV-oN.js";import{t as u}from"./Button-D1Rp2Xe1.js";import{t as d}from"./SectionShell-osccWl4j.js";import{t as f}from"./Card-E6lMGZqd.js";var p={class:`eyebrow mb-5`},m={class:`flex flex-wrap gap-3`},h={class:`eyebrow mb-5`},g={class:`grid md:grid-cols-3 gap-4`},_={class:`eyebrow mb-4`},v={class:`flex flex-wrap gap-3`},y={class:`eyebrow mb-4`},b={class:`flex flex-wrap gap-3`},x={class:`eyebrow mb-4 !text-cream opacity-80`},S={class:`flex flex-wrap gap-3`},C={class:`eyebrow mb-5`},w={class:`flex flex-wrap items-center gap-3`},T={class:`eyebrow mb-5`},E={class:`flex flex-wrap items-center gap-3`},D={class:`eyebrow mb-5`},O={class:`flex flex-wrap gap-3 items-center`},k={class:`eyebrow mb-5`},A={class:`max-w-md space-y-3`},j={class:`eyebrow mb-5`},M={class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},N={class:`whitespace-pre-wrap`},P={__name:`ButtonsSection`,setup(P){let{t:F}=l();return(l,P)=>(e(),n(d,{eyebrow:t(F)(`ds.eyebrow.components`),title:t(F)(`ds.buttons.title`),description:t(F)(`ds.buttons.description`)},{default:i(()=>[s(`section`,null,[s(`h2`,p,r(t(F)(`ds.heading.variants`)),1),a(f,{tone:`paper`},{default:i(()=>[s(`div`,m,[a(u,{variant:`primary`},{default:i(()=>[o(r(t(F)(`ds.buttons.primary`)),1)]),_:1}),a(u,{variant:`accent`},{default:i(()=>[o(r(t(F)(`ds.buttons.accent`)),1)]),_:1}),a(u,{variant:`secondary`},{default:i(()=>[o(r(t(F)(`ds.buttons.secondary`)),1)]),_:1}),a(u,{variant:`ghost`},{default:i(()=>[o(r(t(F)(`ds.buttons.ghost`)),1)]),_:1}),a(u,{variant:`danger`},{default:i(()=>[o(r(t(F)(`ds.buttons.danger`)),1)]),_:1})])]),_:1})]),s(`section`,null,[s(`h2`,h,r(t(F)(`ds.heading.onDifferentSurfaces`)),1),s(`div`,g,[a(f,{tone:`paper`},{default:i(()=>[s(`p`,_,r(t(F)(`ds.cards.paper`)),1),s(`div`,v,[a(u,{variant:`primary`},{before:i(()=>[a(c,{name:`cart`,size:18})]),default:i(()=>[o(` `+r(t(F)(`ds.buttons.addToCart`)),1)]),_:1}),a(u,{variant:`ghost`},{default:i(()=>[o(r(t(F)(`ds.buttons.learnMore`)),1)]),_:1})])]),_:1}),a(f,{tone:`cream`},{default:i(()=>[s(`p`,y,r(t(F)(`ds.cards.cream`)),1),s(`div`,b,[a(u,{variant:`primary`},{before:i(()=>[a(c,{name:`cart`,size:18})]),default:i(()=>[o(` `+r(t(F)(`ds.buttons.addToCart`)),1)]),_:1}),a(u,{variant:`ghost`},{default:i(()=>[o(r(t(F)(`ds.buttons.learnMore`)),1)]),_:1})])]),_:1}),a(f,{tone:`brand`},{default:i(()=>[s(`p`,x,r(t(F)(`ds.cards.brand`)),1),s(`div`,S,[a(u,{variant:`accent`},{before:i(()=>[a(c,{name:`cart`,size:18})]),default:i(()=>[o(` `+r(t(F)(`ds.buttons.addToCart`)),1)]),_:1}),a(u,{variant:`ghost`,class:`!text-cream hover:!bg-cream-wash`},{default:i(()=>[o(r(t(F)(`ds.buttons.learnMore`)),1)]),_:1})])]),_:1})])]),s(`section`,null,[s(`h2`,C,r(t(F)(`ds.heading.sizes`)),1),a(f,{tone:`paper`},{default:i(()=>[s(`div`,w,[a(u,{size:`sm`},{default:i(()=>[o(r(t(F)(`ds.buttons.small`)),1)]),_:1}),a(u,{size:`md`},{default:i(()=>[o(r(t(F)(`ds.buttons.medium`)),1)]),_:1}),a(u,{size:`lg`},{default:i(()=>[o(r(t(F)(`ds.buttons.large`)),1)]),_:1})])]),_:1})]),s(`section`,null,[s(`h2`,T,r(t(F)(`ds.heading.withIcons`)),1),a(f,{tone:`paper`},{default:i(()=>[s(`div`,E,[a(u,{variant:`primary`},{before:i(()=>[a(c,{name:`cart`,size:18})]),default:i(()=>[o(` `+r(t(F)(`ds.buttons.addToCart`)),1)]),_:1}),a(u,{variant:`secondary`},{after:i(()=>[a(c,{name:`arrow-right`,size:18})]),default:i(()=>[o(r(t(F)(`ds.buttons.learnMore`))+` `,1)]),_:1}),a(u,{variant:`ghost`},{before:i(()=>[a(c,{name:`heart`,size:18})]),default:i(()=>[o(` `+r(t(F)(`ds.buttons.save`)),1)]),_:1}),a(u,{variant:`accent`,size:`sm`},{before:i(()=>[a(c,{name:`check`,size:16})]),default:i(()=>[o(` `+r(t(F)(`ds.buttons.confirm`)),1)]),_:1})])]),_:1})]),s(`section`,null,[s(`h2`,D,r(t(F)(`ds.heading.states`)),1),a(f,{tone:`paper`},{default:i(()=>[s(`div`,O,[a(u,null,{default:i(()=>[o(r(t(F)(`ds.heading.default`)),1)]),_:1}),a(u,{disabled:``},{default:i(()=>[o(r(t(F)(`ds.buttons.disabled`)),1)]),_:1}),a(u,{loading:``},{default:i(()=>[o(r(t(F)(`ds.buttons.loading`)),1)]),_:1})])]),_:1})]),s(`section`,null,[s(`h2`,k,r(t(F)(`ds.heading.block`)),1),a(f,{tone:`paper`},{default:i(()=>[s(`div`,A,[a(u,{block:``,variant:`primary`},{before:i(()=>[a(c,{name:`cart`,size:18})]),default:i(()=>[o(` `+r(t(F)(`ds.buttons.addToCart`)),1)]),_:1}),a(u,{block:``,variant:`secondary`},{default:i(()=>[o(r(t(F)(`ds.buttons.continueShopping`)),1)]),_:1})])]),_:1})]),s(`section`,null,[s(`h2`,j,r(t(F)(`ds.heading.usage`)),1),s(`div`,M,[s(`pre`,N,`<Button variant="primary" size="md">
|
||||
<template #before><Icon name="cart" :size="18" /></template>
|
||||
`+r(t(F)(`ds.buttons.addToCart`))+`
|
||||
</Button>`,1)])])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{P as default};
|
||||
@@ -1 +1 @@
|
||||
import{C as e,G as t,c as n,ft as r,j as i,m as a,p as o,s}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as c}from"./i18n-D7Ao3GC7.js";import{t as l}from"./Badge-Bu_yseK_.js";import{t as u}from"./SectionShell-osccWl4j.js";import{t as d}from"./Card-E6lMGZqd.js";var f={class:`eyebrow mb-5`},p={class:`grid md:grid-cols-3 gap-6`},m={class:`font-display text-2xl font-normal mb-2`},h={class:`text-[14px] text-muted leading-relaxed`},g={class:`font-display text-2xl font-normal mb-2`},_={class:`text-[14px] text-muted leading-relaxed`},v={class:`font-display text-2xl font-normal mb-2`},y={class:`text-[14px] opacity-80 leading-relaxed`},b={class:`eyebrow mb-5`},x={class:`grid md:grid-cols-2 gap-6`},S={class:`font-display text-2xl font-normal mb-2`},C={class:`text-[14px] text-muted leading-relaxed`},w={class:`font-display text-2xl font-normal mb-2`},T={class:`text-[14px] text-muted leading-relaxed`},E={class:`eyebrow mb-5`},D={class:`p-7`},O={class:`font-display text-2xl font-normal mb-2`},k={class:`text-[14px] text-muted leading-relaxed`},A={__name:`CardsSection`,setup(A){let{t:j}=c();return(c,A)=>(e(),n(u,{eyebrow:t(j)(`ds.eyebrow.components`),title:t(j)(`ds.cards.title`),description:t(j)(`ds.cards.description`)},{default:i(()=>[s(`section`,null,[s(`h2`,f,r(t(j)(`ds.heading.tones`)),1),s(`div`,p,[a(d,{tone:`paper`},{default:i(()=>[a(l,{variant:`subtle`,class:`mb-4`},{default:i(()=>[o(r(t(j)(`ds.cards.paper`)),1)]),_:1}),s(`h3`,m,r(t(j)(`ds.cards.paperTitle`)),1),s(`p`,h,r(t(j)(`ds.cards.paperBody`)),1)]),_:1}),a(d,{tone:`cream`},{default:i(()=>[a(l,{variant:`subtle`,class:`mb-4`},{default:i(()=>[o(r(t(j)(`ds.cards.cream`)),1)]),_:1}),s(`h3`,g,r(t(j)(`ds.cards.creamTitle`)),1),s(`p`,_,r(t(j)(`ds.cards.creamBody`)),1)]),_:1}),a(d,{tone:`brand`},{default:i(()=>[a(l,{variant:`accent`,class:`mb-4`},{default:i(()=>[o(r(t(j)(`ds.cards.brand`)),1)]),_:1}),s(`h3`,v,r(t(j)(`ds.cards.brandTitle`)),1),s(`p`,y,r(t(j)(`ds.cards.brandBody`)),1)]),_:1})])]),s(`section`,null,[s(`h2`,b,r(t(j)(`ds.heading.interactive`)),1),s(`div`,x,[a(d,{tone:`paper`,interactive:``},{default:i(()=>[s(`h3`,S,r(t(j)(`ds.cards.hoverMe`)),1),s(`p`,C,r(t(j)(`ds.cards.hoverBody`)),1)]),_:1}),a(d,{tone:`cream`,interactive:``},{default:i(()=>[s(`h3`,w,r(t(j)(`ds.cards.hoverMeToo`)),1),s(`p`,T,r(t(j)(`ds.cards.hoverBodyAlt`)),1)]),_:1})])]),s(`section`,null,[s(`h2`,E,r(t(j)(`ds.heading.withoutPadding`)),1),a(d,{tone:`paper`,padded:!1},{default:i(()=>[A[2]||=s(`div`,{class:`h-40 bg-cream rounded-t-md`},null,-1),s(`div`,D,[s(`h3`,O,r(t(j)(`ds.cards.mediaTitle`)),1),s(`p`,k,[o(r(t(j)(`ds.cards.mediaBody`))+` `,1),A[0]||=s(`code`,{class:`font-mono text-[12px]`},`:padded="false"`,-1),A[1]||=o(`. `,-1)])])]),_:1})])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{A as default};
|
||||
import{C as e,G as t,c as n,ft as r,j as i,m as a,p as o,s}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as c}from"./i18n-VERRV-oN.js";import{t as l}from"./Badge-DiccZCC_.js";import{t as u}from"./SectionShell-osccWl4j.js";import{t as d}from"./Card-E6lMGZqd.js";var f={class:`eyebrow mb-5`},p={class:`grid md:grid-cols-3 gap-6`},m={class:`font-display text-2xl font-normal mb-2`},h={class:`text-[14px] text-muted leading-relaxed`},g={class:`font-display text-2xl font-normal mb-2`},_={class:`text-[14px] text-muted leading-relaxed`},v={class:`font-display text-2xl font-normal mb-2`},y={class:`text-[14px] opacity-80 leading-relaxed`},b={class:`eyebrow mb-5`},x={class:`grid md:grid-cols-2 gap-6`},S={class:`font-display text-2xl font-normal mb-2`},C={class:`text-[14px] text-muted leading-relaxed`},w={class:`font-display text-2xl font-normal mb-2`},T={class:`text-[14px] text-muted leading-relaxed`},E={class:`eyebrow mb-5`},D={class:`p-7`},O={class:`font-display text-2xl font-normal mb-2`},k={class:`text-[14px] text-muted leading-relaxed`},A={__name:`CardsSection`,setup(A){let{t:j}=c();return(c,A)=>(e(),n(u,{eyebrow:t(j)(`ds.eyebrow.components`),title:t(j)(`ds.cards.title`),description:t(j)(`ds.cards.description`)},{default:i(()=>[s(`section`,null,[s(`h2`,f,r(t(j)(`ds.heading.tones`)),1),s(`div`,p,[a(d,{tone:`paper`},{default:i(()=>[a(l,{variant:`subtle`,class:`mb-4`},{default:i(()=>[o(r(t(j)(`ds.cards.paper`)),1)]),_:1}),s(`h3`,m,r(t(j)(`ds.cards.paperTitle`)),1),s(`p`,h,r(t(j)(`ds.cards.paperBody`)),1)]),_:1}),a(d,{tone:`cream`},{default:i(()=>[a(l,{variant:`subtle`,class:`mb-4`},{default:i(()=>[o(r(t(j)(`ds.cards.cream`)),1)]),_:1}),s(`h3`,g,r(t(j)(`ds.cards.creamTitle`)),1),s(`p`,_,r(t(j)(`ds.cards.creamBody`)),1)]),_:1}),a(d,{tone:`brand`},{default:i(()=>[a(l,{variant:`accent`,class:`mb-4`},{default:i(()=>[o(r(t(j)(`ds.cards.brand`)),1)]),_:1}),s(`h3`,v,r(t(j)(`ds.cards.brandTitle`)),1),s(`p`,y,r(t(j)(`ds.cards.brandBody`)),1)]),_:1})])]),s(`section`,null,[s(`h2`,b,r(t(j)(`ds.heading.interactive`)),1),s(`div`,x,[a(d,{tone:`paper`,interactive:``},{default:i(()=>[s(`h3`,S,r(t(j)(`ds.cards.hoverMe`)),1),s(`p`,C,r(t(j)(`ds.cards.hoverBody`)),1)]),_:1}),a(d,{tone:`cream`,interactive:``},{default:i(()=>[s(`h3`,w,r(t(j)(`ds.cards.hoverMeToo`)),1),s(`p`,T,r(t(j)(`ds.cards.hoverBodyAlt`)),1)]),_:1})])]),s(`section`,null,[s(`h2`,E,r(t(j)(`ds.heading.withoutPadding`)),1),a(d,{tone:`paper`,padded:!1},{default:i(()=>[A[2]||=s(`div`,{class:`h-40 bg-cream rounded-t-md`},null,-1),s(`div`,D,[s(`h3`,O,r(t(j)(`ds.cards.mediaTitle`)),1),s(`p`,k,[o(r(t(j)(`ds.cards.mediaBody`))+` `,1),A[0]||=s(`code`,{class:`font-mono text-[12px]`},`:padded="false"`,-1),A[1]||=o(`. `,-1)])])]),_:1})])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{A as default};
|
||||
File diff suppressed because one or more lines are too long
@@ -1,4 +1,4 @@
|
||||
import{B as e,C as t,G as n,S as r,c as i,ft as a,j as o,m as s,p as c,s as l}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as u}from"./Icon-Dcq1PyHo.js";import{t as d}from"./i18n-D7Ao3GC7.js";import{c as f,d as p,f as m,l as h,p as g,u as _}from"./api-DlB23x7f.js";import{t as v}from"./Button-D1Rp2Xe1.js";import{t as y}from"./CartDrawer-Bmyv2SnQ.js";import{t as b}from"./SectionShell-osccWl4j.js";var x={class:`eyebrow mb-5`},S={class:`rounded-md border border-line bg-paper p-6 flex flex-col sm:flex-row sm:items-center gap-4`},C={class:`text-[13px] text-muted`},w={class:`eyebrow mb-5`},T={class:`text-[15px] text-muted leading-relaxed mb-4 max-w-2xl`},E={class:`eyebrow mb-5`},D={__name:`CartDrawerSection`,setup(D){let{t:O}=d(),k=g(),A=e(!1);async function j(){await h(),await f(`kaiser-natron-pulver-250-g-grosspackung`,2),await f(`kaiser-natron-bad-500-g`,1),A.value=!0}async function M({productId:e,quantity:t}){await m(e,t)}async function N(e){await p(e)}return r(()=>{_()}),(e,r)=>(t(),i(b,{eyebrow:n(O)(`ds.eyebrow.components`),title:n(O)(`ds.cartDrawer.title`),description:n(O)(`ds.cartDrawer.description`)},{default:o(()=>[l(`section`,null,[l(`h2`,x,a(n(O)(`ds.heading.default`)),1),l(`div`,S,[s(v,{variant:`primary`,onClick:j},{before:o(()=>[s(u,{name:`cart`,size:18})]),default:o(()=>[c(` `+a(n(O)(`ds.cartDrawer.demoLabel`)),1)]),_:1}),l(`p`,C,a(n(O)(`ds.cartDrawer.demoHint`)),1)])]),l(`section`,null,[l(`h2`,w,a(n(O)(`ds.cartDrawer.integrationTitle`)),1),l(`p`,T,a(n(O)(`ds.cartDrawer.integrationBody`)),1),r[2]||=l(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[l(`pre`,{class:`whitespace-pre-wrap`},`import {
|
||||
import{B as e,C as t,G as n,S as r,c as i,ft as a,j as o,m as s,p as c,s as l}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as u}from"./Icon-BCo6-bGH.js";import{t as d}from"./i18n-VERRV-oN.js";import{c as f,d as p,f as m,l as h,p as g,u as _}from"./api-DlB23x7f.js";import{t as v}from"./Button-D1Rp2Xe1.js";import{t as y}from"./CartDrawer-CHRbKtmc.js";import{t as b}from"./SectionShell-osccWl4j.js";var x={class:`eyebrow mb-5`},S={class:`rounded-md border border-line bg-paper p-6 flex flex-col sm:flex-row sm:items-center gap-4`},C={class:`text-[13px] text-muted`},w={class:`eyebrow mb-5`},T={class:`text-[15px] text-muted leading-relaxed mb-4 max-w-2xl`},E={class:`eyebrow mb-5`},D={__name:`CartDrawerSection`,setup(D){let{t:O}=d(),k=g(),A=e(!1);async function j(){await h(),await f(`kaiser-natron-pulver-250-g-grosspackung`,2),await f(`kaiser-natron-bad-500-g`,1),A.value=!0}async function M({productId:e,quantity:t}){await m(e,t)}async function N(e){await p(e)}return r(()=>{_()}),(e,r)=>(t(),i(b,{eyebrow:n(O)(`ds.eyebrow.components`),title:n(O)(`ds.cartDrawer.title`),description:n(O)(`ds.cartDrawer.description`)},{default:o(()=>[l(`section`,null,[l(`h2`,x,a(n(O)(`ds.heading.default`)),1),l(`div`,S,[s(v,{variant:`primary`,onClick:j},{before:o(()=>[s(u,{name:`cart`,size:18})]),default:o(()=>[c(` `+a(n(O)(`ds.cartDrawer.demoLabel`)),1)]),_:1}),l(`p`,C,a(n(O)(`ds.cartDrawer.demoHint`)),1)])]),l(`section`,null,[l(`h2`,w,a(n(O)(`ds.cartDrawer.integrationTitle`)),1),l(`p`,T,a(n(O)(`ds.cartDrawer.integrationBody`)),1),r[2]||=l(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[l(`pre`,{class:`whitespace-pre-wrap`},`import {
|
||||
fetchCart,
|
||||
addToCart,
|
||||
updateCartItem,
|
||||
@@ -1 +1 @@
|
||||
import{C as e,G as t,T as n,ft as r,j as i,l as a,m as o,o as s,p as c,r as l,s as u,u as d}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{o as ee,t as te}from"./vue-router-Cyqru1db.js";import{t as f}from"./Icon-Dcq1PyHo.js";import{t as p}from"./i18n-D7Ao3GC7.js";import{n as m}from"./products-BqW5PUnm.js";import{d as ne,f as re,p as ie}from"./api-DlB23x7f.js";import{t as h}from"./Button-D1Rp2Xe1.js";import{t as ae}from"./QuantityStepper-DEp73rTJ.js";var g={key:0,class:`min-h-[55svh] flex items-center justify-center`},_={class:`flex flex-col gap-4 items-center text-center rounded-md border border-line bg-paper p-10 max-w-md w-full`},v={class:`inline-flex items-center justify-center w-14 h-14 rounded-full bg-cream text-brand`},y={class:`font-display text-xl text-brand`},b={class:`text-[14px] text-muted max-w-sm`},x={key:1,class:`flex flex-col gap-6`},S={class:`flex flex-col rounded-md border border-line bg-paper divide-y divide-line`},C={class:`shrink-0 w-20 h-20 rounded-sm bg-cream overflow-hidden flex items-center justify-center`},w=[`src`,`alt`],T={class:`flex-1 min-w-0`},E={class:`font-display text-base text-ink leading-tight`},D={key:0,class:`text-[12px] text-muted`},O={class:`mt-2 text-[13px] text-muted`},k={class:`flex items-center gap-4`},A={class:`text-[14px] font-semibold text-ink tabular-nums w-20 text-right`},j=[`aria-label`,`onClick`],M={class:`rounded-md border border-line bg-paper px-6 py-5 flex flex-col gap-2`},N={class:`flex items-baseline justify-between text-[14px]`},P={class:`text-muted`},F={class:`text-ink tabular-nums`},oe={class:`flex items-baseline justify-between text-[14px]`},I={class:`text-muted`},L={class:`text-ink tabular-nums`},R={class:`mt-1 pt-3 border-t border-line flex items-baseline justify-between`},z={class:`eyebrow`},B={class:`font-display text-2xl text-brand tabular-nums`},V={key:2,class:`fixed inset-x-0 bottom-0 z-30 bg-cream border-t border-line`,role:`contentinfo`},H={class:`mx-auto w-full max-w-7xl px-6 sm:px-8 md:px-12 lg:px-16 py-3 flex gap-3 sm:justify-between`,style:{paddingBottom:`max(0.75rem, env(safe-area-inset-bottom))`}},U={class:`flex-1 sm:flex-initial`},W={class:`flex-1 sm:flex-initial`},G=4.9,K={__name:`CartStep`,setup(K){let{t:q}=p(),J=ie(),Y=ee(),X=s(()=>J.isEmpty),Z=s(()=>J.subtotal),Q=s(()=>J.items.length?G:0),se=s(()=>+(Z.value+Q.value).toFixed(2));async function ce(e,t){await re(e,t)}async function le(e){await ne(e)}function $(){Y.push(`/checkout/account`)}function ue(){Y.push(`/`)}return(s,ee)=>(e(),d(l,null,[X.value?(e(),d(`div`,g,[u(`div`,_,[u(`span`,v,[o(f,{name:`cart`,size:24,"stroke-width":2})]),u(`p`,y,r(t(q)(`cart.empty.title`)),1),u(`p`,b,r(t(q)(`cart.empty.subtitle`)),1),o(t(te),{to:`/shop`,class:`inline-flex`},{default:i(()=>[o(h,{variant:`primary`,size:`md`},{default:i(()=>[c(r(t(q)(`checkout.cart.cta.shop`)),1)]),_:1})]),_:1})])])):(e(),d(`section`,x,[u(`ul`,S,[(e(!0),d(l,null,n(t(J).items,n=>(e(),d(`li`,{key:n.productId,class:`flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-5 px-5 py-5 sm:px-6`},[u(`div`,C,[n.product?.image?(e(),d(`img`,{key:0,src:n.product.image,alt:n.product?.title||``,loading:`lazy`,decoding:`async`,class:`w-full h-full object-contain p-2`},null,8,w)):a(``,!0)]),u(`div`,T,[u(`p`,E,r(n.product?.title),1),n.product?.size?(e(),d(`p`,D,r(n.product.size),1)):a(``,!0),u(`p`,O,r(t(m)(n.unitPrice))+` `+r(t(q)(`checkout.cart.perItem`)),1)]),u(`div`,k,[o(ae,{"model-value":n.quantity,min:1,"onUpdate:modelValue":e=>ce(n.productId,e)},null,8,[`model-value`,`onUpdate:modelValue`]),u(`span`,A,r(t(m)(n.lineTotal)),1),u(`button`,{type:`button`,class:`text-muted hover:text-danger transition-colors duration-base`,"aria-label":t(q)(`cart.remove`),onClick:e=>le(n.productId)},[o(f,{name:`trash`,size:18,"stroke-width":2})],8,j)])]))),128))]),u(`dl`,M,[u(`div`,N,[u(`dt`,P,r(t(q)(`cart.subtotal`)),1),u(`dd`,F,r(t(m)(Z.value)),1)]),u(`div`,oe,[u(`dt`,I,r(t(q)(`checkout.cart.shipping`)),1),u(`dd`,L,r(t(m)(Q.value)),1)]),u(`div`,R,[u(`dt`,z,r(t(q)(`checkout.cart.total`)),1),u(`dd`,B,r(t(m)(se.value)),1)])])])),X.value?a(``,!0):(e(),d(`footer`,V,[u(`div`,H,[u(`div`,U,[o(h,{variant:`primary`,size:`lg`,block:``,type:`button`,onClick:ue},{default:i(()=>[c(r(t(q)(`checkout.exit`)),1)]),_:1})]),u(`div`,W,[o(h,{variant:`accent`,size:`lg`,block:``,onClick:$},{default:i(()=>[c(r(t(q)(`checkout.cart.cta.continue`)),1)]),_:1})])])]))],64))}};export{K as default};
|
||||
import{C as e,G as t,T as n,ft as r,j as i,l as a,m as o,o as s,p as c,r as l,s as u,u as d}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{o as ee,t as te}from"./vue-router-Cyqru1db.js";import{t as f}from"./Icon-BCo6-bGH.js";import{t as p}from"./i18n-VERRV-oN.js";import{n as m}from"./products-BqW5PUnm.js";import{d as ne,f as re,p as ie}from"./api-DlB23x7f.js";import{t as h}from"./Button-D1Rp2Xe1.js";import{t as ae}from"./QuantityStepper-CyocAaIZ.js";var g={key:0,class:`min-h-[55svh] flex items-center justify-center`},_={class:`flex flex-col gap-4 items-center text-center rounded-md border border-line bg-paper p-10 max-w-md w-full`},v={class:`inline-flex items-center justify-center w-14 h-14 rounded-full bg-cream text-brand`},y={class:`font-display text-xl text-brand`},b={class:`text-[14px] text-muted max-w-sm`},x={key:1,class:`flex flex-col gap-6`},S={class:`flex flex-col rounded-md border border-line bg-paper divide-y divide-line`},C={class:`shrink-0 w-20 h-20 rounded-sm bg-cream overflow-hidden flex items-center justify-center`},w=[`src`,`alt`],T={class:`flex-1 min-w-0`},E={class:`font-display text-base text-ink leading-tight`},D={key:0,class:`text-[12px] text-muted`},O={class:`mt-2 text-[13px] text-muted`},k={class:`flex items-center gap-4`},A={class:`text-[14px] font-semibold text-ink tabular-nums w-20 text-right`},j=[`aria-label`,`onClick`],M={class:`rounded-md border border-line bg-paper px-6 py-5 flex flex-col gap-2`},N={class:`flex items-baseline justify-between text-[14px]`},P={class:`text-muted`},F={class:`text-ink tabular-nums`},oe={class:`flex items-baseline justify-between text-[14px]`},I={class:`text-muted`},L={class:`text-ink tabular-nums`},R={class:`mt-1 pt-3 border-t border-line flex items-baseline justify-between`},z={class:`eyebrow`},B={class:`font-display text-2xl text-brand tabular-nums`},V={key:2,class:`fixed inset-x-0 bottom-0 z-30 bg-cream border-t border-line`,role:`contentinfo`},H={class:`mx-auto w-full max-w-7xl px-6 sm:px-8 md:px-12 lg:px-16 py-3 flex gap-3 sm:justify-between`,style:{paddingBottom:`max(0.75rem, env(safe-area-inset-bottom))`}},U={class:`flex-1 sm:flex-initial`},W={class:`flex-1 sm:flex-initial`},G=4.9,K={__name:`CartStep`,setup(K){let{t:q}=p(),J=ie(),Y=ee(),X=s(()=>J.isEmpty),Z=s(()=>J.subtotal),Q=s(()=>J.items.length?G:0),se=s(()=>+(Z.value+Q.value).toFixed(2));async function ce(e,t){await re(e,t)}async function le(e){await ne(e)}function $(){Y.push(`/checkout/account`)}function ue(){Y.push(`/`)}return(s,ee)=>(e(),d(l,null,[X.value?(e(),d(`div`,g,[u(`div`,_,[u(`span`,v,[o(f,{name:`cart`,size:24,"stroke-width":2})]),u(`p`,y,r(t(q)(`cart.empty.title`)),1),u(`p`,b,r(t(q)(`cart.empty.subtitle`)),1),o(t(te),{to:`/shop`,class:`inline-flex`},{default:i(()=>[o(h,{variant:`primary`,size:`md`},{default:i(()=>[c(r(t(q)(`checkout.cart.cta.shop`)),1)]),_:1})]),_:1})])])):(e(),d(`section`,x,[u(`ul`,S,[(e(!0),d(l,null,n(t(J).items,n=>(e(),d(`li`,{key:n.productId,class:`flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-5 px-5 py-5 sm:px-6`},[u(`div`,C,[n.product?.image?(e(),d(`img`,{key:0,src:n.product.image,alt:n.product?.title||``,loading:`lazy`,decoding:`async`,class:`w-full h-full object-contain p-2`},null,8,w)):a(``,!0)]),u(`div`,T,[u(`p`,E,r(n.product?.title),1),n.product?.size?(e(),d(`p`,D,r(n.product.size),1)):a(``,!0),u(`p`,O,r(t(m)(n.unitPrice))+` `+r(t(q)(`checkout.cart.perItem`)),1)]),u(`div`,k,[o(ae,{"model-value":n.quantity,min:1,"onUpdate:modelValue":e=>ce(n.productId,e)},null,8,[`model-value`,`onUpdate:modelValue`]),u(`span`,A,r(t(m)(n.lineTotal)),1),u(`button`,{type:`button`,class:`text-muted hover:text-danger transition-colors duration-base`,"aria-label":t(q)(`cart.remove`),onClick:e=>le(n.productId)},[o(f,{name:`trash`,size:18,"stroke-width":2})],8,j)])]))),128))]),u(`dl`,M,[u(`div`,N,[u(`dt`,P,r(t(q)(`cart.subtotal`)),1),u(`dd`,F,r(t(m)(Z.value)),1)]),u(`div`,oe,[u(`dt`,I,r(t(q)(`checkout.cart.shipping`)),1),u(`dd`,L,r(t(m)(Q.value)),1)]),u(`div`,R,[u(`dt`,z,r(t(q)(`checkout.cart.total`)),1),u(`dd`,B,r(t(m)(se.value)),1)])])])),X.value?a(``,!0):(e(),d(`footer`,V,[u(`div`,H,[u(`div`,U,[o(h,{variant:`primary`,size:`lg`,block:``,type:`button`,onClick:ue},{default:i(()=>[c(r(t(q)(`checkout.exit`)),1)]),_:1})]),u(`div`,W,[o(h,{variant:`accent`,size:`lg`,block:``,onClick:$},{default:i(()=>[c(r(t(q)(`checkout.cart.cta.continue`)),1)]),_:1})])])]))],64))}};export{K as default};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
|
||||
import{C as e,T as t,c as n,ft as r,l as i,o as a,r as o,s,u as c,ut as l}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{o as u}from"./vue-router-Cyqru1db.js";import{t as d}from"./Icon-Dcq1PyHo.js";var f=[`aria-label`],p={class:`flex items-center gap-2 sm:gap-3`},m={class:`flex items-center gap-2 sm:gap-3 shrink-0`},h=[`disabled`,`aria-current`,`onClick`],g={key:1},_={__name:`CheckoutStepper`,props:{steps:{type:Array,required:!0},activeKey:{type:String,required:!0}},setup(_){let v=_,y=u(),b=a(()=>{let e=v.steps.findIndex(e=>e.key===v.activeKey);return v.steps.map((t,n)=>{let r=n<e?`completed`:n===e?`active`:`upcoming`,i=r===`completed`||r===`upcoming`&&t.completed;return{...t,index:n,state:r,navigable:i}})});function x(e){!e.navigable||e.state===`active`||y.push(e.to)}return(a,u)=>(e(),c(`nav`,{"aria-label":a.$attrs[`aria-label`]||`Checkout progress`},[s(`ol`,p,[(e(!0),c(o,null,t(b.value,(t,a)=>(e(),c(o,{key:t.key},[s(`li`,m,[s(`button`,{type:`button`,disabled:!t.navigable&&t.state!==`active`,"aria-current":t.state===`active`?`step`:void 0,class:l([`group inline-flex items-center gap-2 sm:gap-2.5 transition-colors duration-base focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-brand rounded-sm`,t.navigable||t.state===`active`?`cursor-pointer`:`cursor-not-allowed`]),onClick:e=>x(t)},[s(`span`,{class:l([`inline-flex items-center justify-center w-7 h-7 rounded-full text-[12px] font-bold tabular-nums transition-colors duration-base`,t.state===`active`&&`bg-brand text-cream`,t.state===`completed`&&`bg-brand text-cream group-hover:bg-brand-hover`,t.state===`upcoming`&&`bg-transparent text-muted border border-line`,t.state===`upcoming`&&t.navigable&&`group-hover:border-brand group-hover:text-brand`])},[t.state===`completed`?(e(),n(d,{key:0,name:`check`,size:13,"stroke-width":2.6})):(e(),c(`span`,g,r(t.index+1),1))],2),s(`span`,{class:l([`hidden md:inline whitespace-nowrap text-[13px] tracking-label transition-colors duration-base`,t.state===`active`&&`text-brand font-semibold`,t.state===`completed`&&`text-brand font-medium`,t.state===`upcoming`&&`text-muted font-medium`,t.state===`upcoming`&&t.navigable&&`group-hover:text-brand`])},r(t.label),3)],10,h)]),a<b.value.length-1?(e(),c(`li`,{key:0,"aria-hidden":`true`,class:l([`h-px w-6 sm:w-10 md:w-12 transition-colors duration-base shrink-0`,a<b.value.findIndex(e=>e.key===_.activeKey)?`bg-brand`:`bg-line`])},null,2)):i(``,!0)],64))),128))])],8,f))}};export{_ as t};
|
||||
import{C as e,T as t,c as n,ft as r,l as i,o as a,r as o,s,u as c,ut as l}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{o as u}from"./vue-router-Cyqru1db.js";import{t as d}from"./Icon-BCo6-bGH.js";var f=[`aria-label`],p={class:`flex items-center gap-2 sm:gap-3`},m={class:`flex items-center gap-2 sm:gap-3 shrink-0`},h=[`disabled`,`aria-current`,`onClick`],g={key:1},_={__name:`CheckoutStepper`,props:{steps:{type:Array,required:!0},activeKey:{type:String,required:!0}},setup(_){let v=_,y=u(),b=a(()=>{let e=v.steps.findIndex(e=>e.key===v.activeKey);return v.steps.map((t,n)=>{let r=n<e?`completed`:n===e?`active`:`upcoming`,i=r===`completed`||r===`upcoming`&&t.completed;return{...t,index:n,state:r,navigable:i}})});function x(e){!e.navigable||e.state===`active`||y.push(e.to)}return(a,u)=>(e(),c(`nav`,{"aria-label":a.$attrs[`aria-label`]||`Checkout progress`},[s(`ol`,p,[(e(!0),c(o,null,t(b.value,(t,a)=>(e(),c(o,{key:t.key},[s(`li`,m,[s(`button`,{type:`button`,disabled:!t.navigable&&t.state!==`active`,"aria-current":t.state===`active`?`step`:void 0,class:l([`group inline-flex items-center gap-2 sm:gap-2.5 transition-colors duration-base focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-brand rounded-sm`,t.navigable||t.state===`active`?`cursor-pointer`:`cursor-not-allowed`]),onClick:e=>x(t)},[s(`span`,{class:l([`inline-flex items-center justify-center w-7 h-7 rounded-full text-[12px] font-bold tabular-nums transition-colors duration-base`,t.state===`active`&&`bg-brand text-cream`,t.state===`completed`&&`bg-brand text-cream group-hover:bg-brand-hover`,t.state===`upcoming`&&`bg-transparent text-muted border border-line`,t.state===`upcoming`&&t.navigable&&`group-hover:border-brand group-hover:text-brand`])},[t.state===`completed`?(e(),n(d,{key:0,name:`check`,size:13,"stroke-width":2.6})):(e(),c(`span`,g,r(t.index+1),1))],2),s(`span`,{class:l([`hidden md:inline whitespace-nowrap text-[13px] tracking-label transition-colors duration-base`,t.state===`active`&&`text-brand font-semibold`,t.state===`completed`&&`text-brand font-medium`,t.state===`upcoming`&&`text-muted font-medium`,t.state===`upcoming`&&t.navigable&&`group-hover:text-brand`])},r(t.label),3)],10,h)]),a<b.value.length-1?(e(),c(`li`,{key:0,"aria-hidden":`true`,class:l([`h-px w-6 sm:w-10 md:w-12 transition-colors duration-base shrink-0`,a<b.value.findIndex(e=>e.key===_.activeKey)?`bg-brand`:`bg-line`])},null,2)):i(``,!0)],64))),128))])],8,f))}};export{_ as t};
|
||||
@@ -1,4 +1,4 @@
|
||||
import{B as e,C as t,G as n,T as r,c as i,ft as a,j as o,m as s,o as c,r as l,s as u,u as d,ut as f}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as p}from"./i18n-D7Ao3GC7.js";import{t as m}from"./CheckoutStepper-Dfp8a-R5.js";import{t as h}from"./SectionShell-osccWl4j.js";var g={class:`eyebrow mb-5`},_={class:`flex flex-col gap-6`},v={class:`eyebrow text-muted`},y={class:`eyebrow mb-5`},b={class:`rounded-md border border-line bg-paper p-6 flex flex-col gap-4`},x={class:`flex flex-wrap gap-2`},S=[`onClick`],C={class:`eyebrow mb-5`},w={__name:`CheckoutStepperSection`,setup(w){let{t:T}=p(),E=e(`shipping`),D=c(()=>[{key:`cart`,label:T(`checkout.step.cart`),to:`/checkout/cart`,completed:!0},{key:`account`,label:T(`checkout.step.account`),to:`/checkout/account`,completed:!0},{key:`shipping`,label:T(`checkout.step.shipping`),to:`/checkout/shipping`,completed:!1},{key:`payment`,label:T(`checkout.step.payment`),to:`/checkout/payment`,completed:!1}]),O=[`cart`,`account`,`shipping`,`payment`];return(e,c)=>(t(),i(h,{eyebrow:n(T)(`ds.eyebrow.components`),title:n(T)(`ds.checkoutStepper.title`),description:n(T)(`ds.checkoutStepper.description`)},{default:o(()=>[u(`section`,null,[u(`h2`,g,a(n(T)(`ds.heading.states`)),1),u(`div`,_,[(t(),d(l,null,r(O,e=>u(`div`,{key:e,class:`rounded-md border border-line bg-paper p-6 flex flex-col gap-3`},[u(`p`,v,a(n(T)(`checkout.step.${e}`))+` active`,1),s(m,{steps:D.value,"active-key":e},null,8,[`steps`,`active-key`])])),64))])]),u(`section`,null,[u(`h2`,y,a(n(T)(`ds.heading.interactive`)),1),u(`div`,b,[u(`div`,x,[(t(),d(l,null,r(O,e=>u(`button`,{key:e,type:`button`,class:f([`px-3 py-1.5 rounded-pill border text-[12px] font-semibold tracking-label`,E.value===e?`bg-brand text-cream border-brand`:`bg-paper text-brand border-line hover:border-brand`]),onClick:t=>E.value=e},a(n(T)(`checkout.step.${e}`)),11,S)),64))]),s(m,{steps:D.value,"active-key":E.value},null,8,[`steps`,`active-key`])])]),u(`section`,null,[u(`h2`,C,a(n(T)(`ds.heading.usage`)),1),c[0]||=u(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[u(`pre`,{class:`whitespace-pre-wrap`},`<CheckoutStepper
|
||||
import{B as e,C as t,G as n,T as r,c as i,ft as a,j as o,m as s,o as c,r as l,s as u,u as d,ut as f}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as p}from"./i18n-VERRV-oN.js";import{t as m}from"./CheckoutStepper-q3BKJ0pY.js";import{t as h}from"./SectionShell-osccWl4j.js";var g={class:`eyebrow mb-5`},_={class:`flex flex-col gap-6`},v={class:`eyebrow text-muted`},y={class:`eyebrow mb-5`},b={class:`rounded-md border border-line bg-paper p-6 flex flex-col gap-4`},x={class:`flex flex-wrap gap-2`},S=[`onClick`],C={class:`eyebrow mb-5`},w={__name:`CheckoutStepperSection`,setup(w){let{t:T}=p(),E=e(`shipping`),D=c(()=>[{key:`cart`,label:T(`checkout.step.cart`),to:`/checkout/cart`,completed:!0},{key:`account`,label:T(`checkout.step.account`),to:`/checkout/account`,completed:!0},{key:`shipping`,label:T(`checkout.step.shipping`),to:`/checkout/shipping`,completed:!1},{key:`payment`,label:T(`checkout.step.payment`),to:`/checkout/payment`,completed:!1}]),O=[`cart`,`account`,`shipping`,`payment`];return(e,c)=>(t(),i(h,{eyebrow:n(T)(`ds.eyebrow.components`),title:n(T)(`ds.checkoutStepper.title`),description:n(T)(`ds.checkoutStepper.description`)},{default:o(()=>[u(`section`,null,[u(`h2`,g,a(n(T)(`ds.heading.states`)),1),u(`div`,_,[(t(),d(l,null,r(O,e=>u(`div`,{key:e,class:`rounded-md border border-line bg-paper p-6 flex flex-col gap-3`},[u(`p`,v,a(n(T)(`checkout.step.${e}`))+` active`,1),s(m,{steps:D.value,"active-key":e},null,8,[`steps`,`active-key`])])),64))])]),u(`section`,null,[u(`h2`,y,a(n(T)(`ds.heading.interactive`)),1),u(`div`,b,[u(`div`,x,[(t(),d(l,null,r(O,e=>u(`button`,{key:e,type:`button`,class:f([`px-3 py-1.5 rounded-pill border text-[12px] font-semibold tracking-label`,E.value===e?`bg-brand text-cream border-brand`:`bg-paper text-brand border-line hover:border-brand`]),onClick:t=>E.value=e},a(n(T)(`checkout.step.${e}`)),11,S)),64))]),s(m,{steps:D.value,"active-key":E.value},null,8,[`steps`,`active-key`])])]),u(`section`,null,[u(`h2`,C,a(n(T)(`ds.heading.usage`)),1),c[0]||=u(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[u(`pre`,{class:`whitespace-pre-wrap`},`<CheckoutStepper
|
||||
:steps="steps"
|
||||
:active-key="activeKey"
|
||||
/>
|
||||
@@ -1 +1 @@
|
||||
import{B as e,C as t,G as n,S as r,ft as i,j as a,l as o,m as s,o as c,p as l,s as u,u as d}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{a as f,t as p}from"./vue-router-Cyqru1db.js";import{t as m}from"./Icon-Dcq1PyHo.js";import{t as h}from"./i18n-D7Ao3GC7.js";import{a as g}from"./api-DlB23x7f.js";import{t as _}from"./Button-D1Rp2Xe1.js";var v={class:`min-h-svh flex flex-col bg-cream`},y={class:`text-ink flex-1 flex flex-col justify-center`},b={class:`mx-auto w-full max-w-3xl px-6 sm:px-8 md:px-12 lg:px-16 py-10 sm:py-14 md:py-16 lg:py-20`},x={class:`rounded-md border border-line bg-paper p-8 md:p-10 flex flex-col gap-6 items-center text-center`},S={class:`relative w-20 h-20`},C={class:`absolute inset-0 rounded-full bg-brand text-accent flex items-center justify-center`},w={class:`eyebrow`},T={class:`font-display font-normal leading-[1.05] tracking-tight text-ink text-headline-md`},E={class:`italic font-light text-brand`},D={class:`text-base leading-relaxed text-muted max-w-md`},O={key:0,class:`mt-2 inline-flex items-center gap-2 rounded-pill border border-cream-dark bg-cream px-4 py-2 text-[13px] text-ink`},k={class:`eyebrow text-muted`},A={class:`font-mono text-[12px] text-brand`},j={key:1,class:`text-[13px] text-danger mt-2`,role:`alert`,"aria-live":`polite`},M={class:`mt-4 flex flex-col gap-3 w-full max-w-sm`},N={key:2,class:`text-[12px] text-muted mt-2`},P={__name:`CheckoutSuccessPage`,setup(P){let{t:F}=h(),I=f(),L=e(null),R=e(``),z=e(!0),B=c(()=>String(I.query.order||``));return r(async()=>{if(!B.value){R.value=F(`checkout.success.missing`),z.value=!1;return}try{L.value=await g({orderId:B.value})}catch(e){R.value=e?.message||F(`checkout.error.generic`)}finally{z.value=!1}}),(e,r)=>(t(),d(`div`,v,[u(`main`,y,[u(`div`,b,[u(`article`,x,[u(`div`,S,[r[0]||=u(`span`,{"aria-hidden":`true`,class:`absolute inset-0 rounded-full bg-brand-wash`,style:{animation:`var(--animate-pulse-soft)`}},null,-1),u(`span`,C,[s(m,{name:`check`,size:36,"stroke-width":2.4})])]),u(`p`,w,i(n(F)(`checkout.success.eyebrow`)),1),u(`h1`,T,[l(i(n(F)(`checkout.success.headline`))+` `,1),u(`em`,E,i(n(F)(`checkout.success.headline.em`)),1)]),u(`p`,D,i(n(F)(`checkout.success.sub`)),1),B.value?(t(),d(`div`,O,[u(`span`,k,i(n(F)(`checkout.success.orderId`)),1),u(`span`,A,i(B.value),1)])):o(``,!0),R.value?(t(),d(`p`,j,i(R.value),1)):o(``,!0),u(`div`,M,[s(n(p),{to:`/`,class:`block`},{default:a(()=>[s(_,{variant:`primary`,size:`lg`,class:`w-full`},{default:a(()=>[l(i(n(F)(`checkout.success.cta.home`)),1)]),_:1})]),_:1}),s(n(p),{to:`/shop`,class:`block`},{default:a(()=>[s(_,{variant:`secondary`,size:`lg`,class:`w-full`},{default:a(()=>[l(i(n(F)(`checkout.success.cta.shop`)),1)]),_:1})]),_:1})]),!z.value&&L.value?(t(),d(`p`,N,i(n(F)(`checkout.success.email`)),1)):o(``,!0)])])])]))}};export{P as default};
|
||||
import{B as e,C as t,G as n,S as r,ft as i,j as a,l as o,m as s,o as c,p as l,s as u,u as d}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{a as f,t as p}from"./vue-router-Cyqru1db.js";import{t as m}from"./Icon-BCo6-bGH.js";import{t as h}from"./i18n-VERRV-oN.js";import{a as g}from"./api-DlB23x7f.js";import{t as _}from"./Button-D1Rp2Xe1.js";var v={class:`min-h-svh flex flex-col bg-cream`},y={class:`text-ink flex-1 flex flex-col justify-center`},b={class:`mx-auto w-full max-w-3xl px-6 sm:px-8 md:px-12 lg:px-16 py-10 sm:py-14 md:py-16 lg:py-20`},x={class:`rounded-md border border-line bg-paper p-8 md:p-10 flex flex-col gap-6 items-center text-center`},S={class:`relative w-20 h-20`},C={class:`absolute inset-0 rounded-full bg-brand text-accent flex items-center justify-center`},w={class:`eyebrow`},T={class:`font-display font-normal leading-[1.05] tracking-tight text-ink text-headline-md`},E={class:`italic font-light text-brand`},D={class:`text-base leading-relaxed text-muted max-w-md`},O={key:0,class:`mt-2 inline-flex items-center gap-2 rounded-pill border border-cream-dark bg-cream px-4 py-2 text-[13px] text-ink`},k={class:`eyebrow text-muted`},A={class:`font-mono text-[12px] text-brand`},j={key:1,class:`text-[13px] text-danger mt-2`,role:`alert`,"aria-live":`polite`},M={class:`mt-4 flex flex-col gap-3 w-full max-w-sm`},N={key:2,class:`text-[12px] text-muted mt-2`},P={__name:`CheckoutSuccessPage`,setup(P){let{t:F}=h(),I=f(),L=e(null),R=e(``),z=e(!0),B=c(()=>String(I.query.order||``));return r(async()=>{if(!B.value){R.value=F(`checkout.success.missing`),z.value=!1;return}try{L.value=await g({orderId:B.value})}catch(e){R.value=e?.message||F(`checkout.error.generic`)}finally{z.value=!1}}),(e,r)=>(t(),d(`div`,v,[u(`main`,y,[u(`div`,b,[u(`article`,x,[u(`div`,S,[r[0]||=u(`span`,{"aria-hidden":`true`,class:`absolute inset-0 rounded-full bg-brand-wash`,style:{animation:`var(--animate-pulse-soft)`}},null,-1),u(`span`,C,[s(m,{name:`check`,size:36,"stroke-width":2.4})])]),u(`p`,w,i(n(F)(`checkout.success.eyebrow`)),1),u(`h1`,T,[l(i(n(F)(`checkout.success.headline`))+` `,1),u(`em`,E,i(n(F)(`checkout.success.headline.em`)),1)]),u(`p`,D,i(n(F)(`checkout.success.sub`)),1),B.value?(t(),d(`div`,O,[u(`span`,k,i(n(F)(`checkout.success.orderId`)),1),u(`span`,A,i(B.value),1)])):o(``,!0),R.value?(t(),d(`p`,j,i(R.value),1)):o(``,!0),u(`div`,M,[s(n(p),{to:`/`,class:`block`},{default:a(()=>[s(_,{variant:`primary`,size:`lg`,class:`w-full`},{default:a(()=>[l(i(n(F)(`checkout.success.cta.home`)),1)]),_:1})]),_:1}),s(n(p),{to:`/shop`,class:`block`},{default:a(()=>[s(_,{variant:`secondary`,size:`lg`,class:`w-full`},{default:a(()=>[l(i(n(F)(`checkout.success.cta.shop`)),1)]),_:1})]),_:1})]),!z.value&&L.value?(t(),d(`p`,N,i(n(F)(`checkout.success.email`)),1)):o(``,!0)])])])]))}};export{P as default};
|
||||
@@ -1 +1 @@
|
||||
import{C as e,G as t,T as n,c as r,dt as i,ft as a,j as o,o as s,r as c,s as l,u}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as d}from"./i18n-D7Ao3GC7.js";import{t as f}from"./SectionShell-osccWl4j.js";var p={class:`eyebrow mb-5`},m={class:`grid grid-cols-2 sm:grid-cols-3 gap-4`},h={class:`px-4 py-3`},g={class:`font-mono text-[12px] text-ink block`},_={__name:`ColorsSection`,setup(_){let{t:v}=d(),y=s(()=>[{title:v(`ds.colors.group.brand`),names:[`brand`,`brand-hover`,`brand-soft`]},{title:v(`ds.colors.group.accent`),names:[`accent`,`accent-soft`,`accent-ink`]},{title:v(`ds.colors.group.surface`),names:[`surface`,`paper`,`cream`]},{title:v(`ds.colors.group.ink`),names:[`ink`,`muted`]},{title:v(`ds.colors.group.line`),names:[`line`,`line-strong`]},{title:v(`ds.colors.group.semantic`),names:[`success`,`warning`,`danger`]}]);return(s,d)=>(e(),r(f,{eyebrow:t(v)(`ds.eyebrow.tokens`),title:t(v)(`ds.colors.title`),description:t(v)(`ds.colors.description`)},{default:o(()=>[(e(!0),u(c,null,n(y.value,t=>(e(),u(`section`,{key:t.title},[l(`h2`,p,a(t.title),1),l(`div`,m,[(e(!0),u(c,null,n(t.names,t=>(e(),u(`div`,{key:t,class:`rounded-md border border-line overflow-hidden bg-paper`},[l(`div`,{class:`h-28 border-b border-line`,style:i({background:`var(--color-${t})`})},null,4),l(`div`,h,[l(`code`,g,`--color-`+a(t),1)])]))),128))])]))),128))]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{_ as default};
|
||||
import{C as e,G as t,T as n,c as r,dt as i,ft as a,j as o,o as s,r as c,s as l,u}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as d}from"./i18n-VERRV-oN.js";import{t as f}from"./SectionShell-osccWl4j.js";var p={class:`eyebrow mb-5`},m={class:`grid grid-cols-2 sm:grid-cols-3 gap-4`},h={class:`px-4 py-3`},g={class:`font-mono text-[12px] text-ink block`},_={__name:`ColorsSection`,setup(_){let{t:v}=d(),y=s(()=>[{title:v(`ds.colors.group.brand`),names:[`brand`,`brand-hover`,`brand-soft`]},{title:v(`ds.colors.group.accent`),names:[`accent`,`accent-soft`,`accent-ink`]},{title:v(`ds.colors.group.surface`),names:[`surface`,`paper`,`cream`]},{title:v(`ds.colors.group.ink`),names:[`ink`,`muted`]},{title:v(`ds.colors.group.line`),names:[`line`,`line-strong`]},{title:v(`ds.colors.group.semantic`),names:[`success`,`warning`,`danger`]}]);return(s,d)=>(e(),r(f,{eyebrow:t(v)(`ds.eyebrow.tokens`),title:t(v)(`ds.colors.title`),description:t(v)(`ds.colors.description`)},{default:o(()=>[(e(!0),u(c,null,n(y.value,t=>(e(),u(`section`,{key:t.title},[l(`h2`,p,a(t.title),1),l(`div`,m,[(e(!0),u(c,null,n(t.names,t=>(e(),u(`div`,{key:t,class:`rounded-md border border-line overflow-hidden bg-paper`},[l(`div`,{class:`h-28 border-b border-line`,style:i({background:`var(--color-${t})`})},null,4),l(`div`,h,[l(`code`,g,`--color-`+a(t),1)])]))),128))])]))),128))]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{_ as default};
|
||||
1
dist/assets/DesignLayout-B8yByLs2.js
vendored
Normal file
1
dist/assets/DesignLayout-B8yByLs2.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/assets/DesignLayout-CXO7F-D8.js
vendored
1
dist/assets/DesignLayout-CXO7F-D8.js
vendored
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
|
||||
import{B as e,C as t,E as n,T as r,dt as i,ft as a,m as o,o as s,p as c,r as l,s as u,u as d,ut as f}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as p}from"./Icon-Dcq1PyHo.js";var m={class:`flex items-center gap-3 mb-4 flex-wrap`},h={role:`tablist`,"aria-label":`Preview viewport`,class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper ml-auto`},g=[`aria-selected`,`onClick`],_={class:`rounded-md border border-line bg-surface p-6 overflow-x-auto`},v=[`src`,`title`],y={class:`mt-2 text-center font-mono text-[11px] text-muted`},b={__name:`DevicePreview`,props:{src:{type:String,required:!0},initial:{type:String,default:`desktop`,validator:e=>[`mobile`,`tablet`,`desktop`].includes(e)},height:{type:Number,default:560}},setup(b){let x=b,S=[{id:`mobile`,label:`Mobile`,width:390},{id:`tablet`,label:`Tablet`,width:820},{id:`desktop`,label:`Desktop`,width:1280}],C=e(x.initial),w=s(()=>S.find(e=>e.id===C.value));return(e,s)=>(t(),d(`div`,null,[u(`div`,m,[n(e.$slots,`controls`),u(`div`,h,[(t(),d(l,null,r(S,e=>u(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":C.value===e.id,class:f([`inline-flex items-center gap-2 px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,C.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>C.value=e.id},[o(p,{name:e.id,size:14},null,8,[`name`]),c(` `+a(e.label),1)],10,g)),64))])]),u(`div`,_,[u(`div`,{class:`mx-auto transition-[width] duration-base ease-out`,style:i({width:w.value.width+`px`})},[u(`iframe`,{src:b.src,title:`${w.value.label} preview`,style:i({height:b.height+`px`}),class:`w-full block rounded-sm border border-line bg-paper`,loading:`lazy`},null,12,v),u(`p`,y,a(w.value.width)+`px `,1)],4)])]))}};export{b as t};
|
||||
import{B as e,C as t,E as n,T as r,dt as i,ft as a,m as o,o as s,p as c,r as l,s as u,u as d,ut as f}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as p}from"./Icon-BCo6-bGH.js";var m={class:`flex items-center gap-3 mb-4 flex-wrap`},h={role:`tablist`,"aria-label":`Preview viewport`,class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper ml-auto`},g=[`aria-selected`,`onClick`],_={class:`rounded-md border border-line bg-surface p-6 overflow-x-auto`},v=[`src`,`title`],y={class:`mt-2 text-center font-mono text-[11px] text-muted`},b={__name:`DevicePreview`,props:{src:{type:String,required:!0},initial:{type:String,default:`desktop`,validator:e=>[`mobile`,`tablet`,`desktop`].includes(e)},height:{type:Number,default:560}},setup(b){let x=b,S=[{id:`mobile`,label:`Mobile`,width:390},{id:`tablet`,label:`Tablet`,width:820},{id:`desktop`,label:`Desktop`,width:1280}],C=e(x.initial),w=s(()=>S.find(e=>e.id===C.value));return(e,s)=>(t(),d(`div`,null,[u(`div`,m,[n(e.$slots,`controls`),u(`div`,h,[(t(),d(l,null,r(S,e=>u(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":C.value===e.id,class:f([`inline-flex items-center gap-2 px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,C.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>C.value=e.id},[o(p,{name:e.id,size:14},null,8,[`name`]),c(` `+a(e.label),1)],10,g)),64))])]),u(`div`,_,[u(`div`,{class:`mx-auto transition-[width] duration-base ease-out`,style:i({width:w.value.width+`px`})},[u(`iframe`,{src:b.src,title:`${w.value.label} preview`,style:i({height:b.height+`px`}),class:`w-full block rounded-sm border border-line bg-paper`,loading:`lazy`},null,12,v),u(`p`,y,a(w.value.width)+`px `,1)],4)])]))}};export{b as t};
|
||||
@@ -1 +1 @@
|
||||
import{A as e,B as t,C as n,G as r,S as i,f as a,ft as o,l as s,o as c,s as l,u,ut as d,x as f}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as p}from"./preload-helper-DzyYoeor.js";import{t as m}from"./i18n-D7Ao3GC7.js";var h={class:`flex flex-col gap-3`},g={key:1,class:`grid gap-3 sm:grid-cols-2`},_=[`disabled`,`aria-label`],v=[`disabled`,`aria-label`],y={key:2,class:`text-[13px] text-danger`},b={__name:`ExpressCheckoutMount`,props:{intent:{type:Object,default:null},returnUrl:{type:String,required:!0},busy:{type:Boolean,default:!1}},emits:[`pay`,`error`],setup(b,{expose:x,emit:S}){let{t:C}=m(),w=b,T=S,E=t(null),D=t(null),O=t(!1),k=t(``),A=c(()=>/^pi_stub_express_/.test(w.intent?.clientSecret||``));function j(e){w.busy||w.intent||T(`pay`,{wallet:e})}async function M(){if(!(!w.intent||typeof window>`u`)){if(A.value){O.value=!0;return}try{let e=[`@stripe`,`stripe-js`].join(`/`),{loadStripe:t}=await p(()=>import(e),[]),n=await t(w.intent.publishableKey);if(!n)throw Error(`Stripe.js failed to initialise.`);E.value=n;let r=n.elements({clientSecret:w.intent.clientSecret,appearance:{theme:`flat`,variables:{colorPrimary:`#006548`,colorBackground:`#ffffff`,colorText:`#0f3825`,fontFamily:`"DM Sans", ui-sans-serif, system-ui, sans-serif`,borderRadius:`10px`,spacingUnit:`4px`}}});D.value=r;let i=r.create(`expressCheckout`,{buttonType:{applePay:`buy`,googlePay:`buy`},buttonTheme:{applePay:`black`,googlePay:`black`},buttonHeight:48});i.mount(`#express-checkout-element`),i.on(`ready`,()=>{O.value=!0}),i.on(`loaderror`,e=>{k.value=e?.error?.message||`Failed to load wallet buttons.`}),i.on(`confirm`,async()=>{let e=await n.confirmPayment({elements:r,clientSecret:w.intent.clientSecret,confirmParams:{return_url:w.returnUrl}});e?.error&&T(`error`,e.error)})}catch(e){k.value=e?.message||String(e)}}}async function N(){return w.intent?A.value?(await new Promise(e=>setTimeout(e,600)),{paymentIntent:{id:(w.intent.clientSecret||``).split(`_secret_`)[0]||`pi_stub`,status:`succeeded`}}):{error:{message:`Express confirm is driven by Stripe.`}}:{error:{message:`No intent.`}}}return x({confirm:N,ready:O}),i(()=>{w.intent&&M()}),e(()=>w.intent?.clientSecret,e=>{e&&M()}),f(()=>{E.value=null,D.value=null}),(e,t)=>(n(),u(`div`,h,[b.intent&&!A.value?(n(),u(`div`,{key:0,id:`express-checkout-element`,class:d([`min-h-[52px]`,{"opacity-60":!O.value}]),"aria-live":`polite`},null,2)):(n(),u(`div`,g,[l(`button`,{type:`button`,class:`inline-flex items-center justify-center gap-2 rounded-sm bg-ink h-12 px-5 text-paper transition-colors duration-base hover:bg-brand disabled:opacity-50 disabled:cursor-not-allowed`,disabled:b.busy,"aria-label":r(C)(`checkout.express.applePay.aria`),onClick:t[0]||=e=>j(`apple`)},[...t[2]||=[l(`svg`,{width:`18`,height:`22`,viewBox:`0 0 18 22`,fill:`currentColor`,"aria-hidden":`true`},[l(`path`,{d:`M14.94 11.36c-.02-2.5 2.04-3.7 2.13-3.76-1.16-1.7-2.97-1.94-3.61-1.96-1.54-.16-3 .9-3.78.9-.78 0-1.98-.88-3.26-.86-1.68.02-3.23.97-4.1 2.47-1.74 3.02-.45 7.5 1.25 9.95.83 1.2 1.82 2.55 3.12 2.5 1.25-.05 1.72-.81 3.23-.81 1.51 0 1.93.81 3.25.78 1.34-.02 2.2-1.22 3.02-2.43.95-1.4 1.34-2.75 1.36-2.82-.03-.01-2.61-1-2.61-3.96zM12.6 4.05c.7-.85 1.16-2.02 1.04-3.18-1 .04-2.21.66-2.93 1.5-.65.74-1.21 1.93-1.06 3.07 1.11.09 2.25-.56 2.95-1.39z`})],-1),l(`span`,{class:`text-[14px] font-medium tracking-tight`},`Pay`,-1)]],8,_),l(`button`,{type:`button`,class:`inline-flex items-center justify-center gap-2 rounded-sm bg-ink h-12 px-5 text-paper transition-colors duration-base hover:bg-brand disabled:opacity-50 disabled:cursor-not-allowed`,disabled:b.busy,"aria-label":r(C)(`checkout.express.googlePay.aria`),onClick:t[1]||=e=>j(`google`)},[...t[3]||=[a(`<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M19.6 10.23c0-.68-.06-1.36-.18-2.03H10v3.84h5.4a4.62 4.62 0 0 1-2 3.03v2.5h3.22c1.89-1.74 2.98-4.31 2.98-7.34z" fill="#4285F4"></path><path d="M10 20c2.7 0 4.97-.89 6.62-2.42l-3.22-2.5c-.9.6-2.04.96-3.4.96-2.6 0-4.81-1.76-5.6-4.13H1.07v2.59A10 10 0 0 0 10 20z" fill="#34A853"></path><path d="M4.4 11.91a6 6 0 0 1 0-3.83V5.5H1.07a10 10 0 0 0 0 9l3.33-2.59z" fill="#FBBC04"></path><path d="M10 3.96a5.4 5.4 0 0 1 3.83 1.5l2.85-2.85A9.6 9.6 0 0 0 10 0 10 10 0 0 0 1.07 5.5L4.4 8.08C5.19 5.71 7.4 3.96 10 3.96z" fill="#EA4335"></path></svg><span class="text-[14px] font-medium tracking-tight">Pay</span>`,2)]],8,v)])),k.value?(n(),u(`p`,y,o(k.value),1)):s(``,!0)]))}};export{b as t};
|
||||
import{A as e,B as t,C as n,G as r,S as i,f as a,ft as o,l as s,o as c,s as l,u,ut as d,x as f}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as p}from"./preload-helper-ca-nBW7U.js";import{t as m}from"./i18n-VERRV-oN.js";var h={class:`flex flex-col gap-3`},g={key:1,class:`grid gap-3 sm:grid-cols-2`},_=[`disabled`,`aria-label`],v=[`disabled`,`aria-label`],y={key:2,class:`text-[13px] text-danger`},b={__name:`ExpressCheckoutMount`,props:{intent:{type:Object,default:null},returnUrl:{type:String,required:!0},busy:{type:Boolean,default:!1}},emits:[`pay`,`error`],setup(b,{expose:x,emit:S}){let{t:C}=m(),w=b,T=S,E=t(null),D=t(null),O=t(!1),k=t(``),A=c(()=>/^pi_stub_express_/.test(w.intent?.clientSecret||``));function j(e){w.busy||w.intent||T(`pay`,{wallet:e})}async function M(){if(!(!w.intent||typeof window>`u`)){if(A.value){O.value=!0;return}try{let e=[`@stripe`,`stripe-js`].join(`/`),{loadStripe:t}=await p(()=>import(e),[]),n=await t(w.intent.publishableKey);if(!n)throw Error(`Stripe.js failed to initialise.`);E.value=n;let r=n.elements({clientSecret:w.intent.clientSecret,appearance:{theme:`flat`,variables:{colorPrimary:`#006548`,colorBackground:`#ffffff`,colorText:`#0f3825`,fontFamily:`"DM Sans", ui-sans-serif, system-ui, sans-serif`,borderRadius:`10px`,spacingUnit:`4px`}}});D.value=r;let i=r.create(`expressCheckout`,{buttonType:{applePay:`buy`,googlePay:`buy`},buttonTheme:{applePay:`black`,googlePay:`black`},buttonHeight:48});i.mount(`#express-checkout-element`),i.on(`ready`,()=>{O.value=!0}),i.on(`loaderror`,e=>{k.value=e?.error?.message||`Failed to load wallet buttons.`}),i.on(`confirm`,async()=>{let e=await n.confirmPayment({elements:r,clientSecret:w.intent.clientSecret,confirmParams:{return_url:w.returnUrl}});e?.error&&T(`error`,e.error)})}catch(e){k.value=e?.message||String(e)}}}async function N(){return w.intent?A.value?(await new Promise(e=>setTimeout(e,600)),{paymentIntent:{id:(w.intent.clientSecret||``).split(`_secret_`)[0]||`pi_stub`,status:`succeeded`}}):{error:{message:`Express confirm is driven by Stripe.`}}:{error:{message:`No intent.`}}}return x({confirm:N,ready:O}),i(()=>{w.intent&&M()}),e(()=>w.intent?.clientSecret,e=>{e&&M()}),f(()=>{E.value=null,D.value=null}),(e,t)=>(n(),u(`div`,h,[b.intent&&!A.value?(n(),u(`div`,{key:0,id:`express-checkout-element`,class:d([`min-h-[52px]`,{"opacity-60":!O.value}]),"aria-live":`polite`},null,2)):(n(),u(`div`,g,[l(`button`,{type:`button`,class:`inline-flex items-center justify-center gap-2 rounded-sm bg-ink h-12 px-5 text-paper transition-colors duration-base hover:bg-brand disabled:opacity-50 disabled:cursor-not-allowed`,disabled:b.busy,"aria-label":r(C)(`checkout.express.applePay.aria`),onClick:t[0]||=e=>j(`apple`)},[...t[2]||=[l(`svg`,{width:`18`,height:`22`,viewBox:`0 0 18 22`,fill:`currentColor`,"aria-hidden":`true`},[l(`path`,{d:`M14.94 11.36c-.02-2.5 2.04-3.7 2.13-3.76-1.16-1.7-2.97-1.94-3.61-1.96-1.54-.16-3 .9-3.78.9-.78 0-1.98-.88-3.26-.86-1.68.02-3.23.97-4.1 2.47-1.74 3.02-.45 7.5 1.25 9.95.83 1.2 1.82 2.55 3.12 2.5 1.25-.05 1.72-.81 3.23-.81 1.51 0 1.93.81 3.25.78 1.34-.02 2.2-1.22 3.02-2.43.95-1.4 1.34-2.75 1.36-2.82-.03-.01-2.61-1-2.61-3.96zM12.6 4.05c.7-.85 1.16-2.02 1.04-3.18-1 .04-2.21.66-2.93 1.5-.65.74-1.21 1.93-1.06 3.07 1.11.09 2.25-.56 2.95-1.39z`})],-1),l(`span`,{class:`text-[14px] font-medium tracking-tight`},`Pay`,-1)]],8,_),l(`button`,{type:`button`,class:`inline-flex items-center justify-center gap-2 rounded-sm bg-ink h-12 px-5 text-paper transition-colors duration-base hover:bg-brand disabled:opacity-50 disabled:cursor-not-allowed`,disabled:b.busy,"aria-label":r(C)(`checkout.express.googlePay.aria`),onClick:t[1]||=e=>j(`google`)},[...t[3]||=[a(`<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M19.6 10.23c0-.68-.06-1.36-.18-2.03H10v3.84h5.4a4.62 4.62 0 0 1-2 3.03v2.5h3.22c1.89-1.74 2.98-4.31 2.98-7.34z" fill="#4285F4"></path><path d="M10 20c2.7 0 4.97-.89 6.62-2.42l-3.22-2.5c-.9.6-2.04.96-3.4.96-2.6 0-4.81-1.76-5.6-4.13H1.07v2.59A10 10 0 0 0 10 20z" fill="#34A853"></path><path d="M4.4 11.91a6 6 0 0 1 0-3.83V5.5H1.07a10 10 0 0 0 0 9l3.33-2.59z" fill="#FBBC04"></path><path d="M10 3.96a5.4 5.4 0 0 1 3.83 1.5l2.85-2.85A9.6 9.6 0 0 0 10 0 10 10 0 0 0 1.07 5.5L4.4 8.08C5.19 5.71 7.4 3.96 10 3.96z" fill="#EA4335"></path></svg><span class="text-[14px] font-medium tracking-tight">Pay</span>`,2)]],8,v)])),k.value?(n(),u(`p`,y,o(k.value),1)):s(``,!0)]))}};export{b as t};
|
||||
@@ -1 +1 @@
|
||||
import{C as e,G as t,T as n,ft as r,m as i,o as a,r as o,s,u as c,ut as l}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as u}from"./Logo-xADhl1RY.js";import{t as d}from"./i18n-D7Ao3GC7.js";var f={class:`mx-auto w-full max-w-6xl px-6 py-12 sm:px-8 sm:py-14 md:px-12 md:py-16 lg:px-16`},p={class:`grid gap-10 md:grid-cols-[1.4fr_1fr_1fr] md:gap-12`},m={class:`flex flex-col gap-4 max-w-sm`},h=[`aria-label`],g={class:`flex flex-col gap-2`},_=[`href`],v=[`aria-label`],y={class:`flex flex-col gap-2`},b=[`href`],x={__name:`Footer`,props:{variant:{type:String,default:`cream`,validator:e=>[`cream`,`brand`,`paper`].includes(e)}},setup(x){let S=x,{t:C}=d(),w=a(()=>S.variant===`brand`?{surface:`bg-brand text-cream`,topRule:`border-cream-line`,bottomRule:`border-cream-line/40`,muted:`text-cream/80`,logo:`text-cream`,link:`hover:text-accent`}:S.variant===`paper`?{surface:`bg-paper text-brand`,topRule:`border-line`,bottomRule:`border-line/60`,muted:`text-muted`,logo:`text-brand`,link:`hover:text-brand-hover`}:{surface:`bg-cream text-brand`,topRule:`border-line`,bottomRule:`border-line/60`,muted:`text-muted`,logo:`text-brand`,link:`hover:text-brand-hover`}),T=[{key:`footer.legal.impressum`,href:`/impressum`},{key:`footer.legal.datenschutz`,href:`/datenschutz`}],E=[{key:`footer.explore.shop`,href:`/shop`},{key:`footer.explore.pflege`,href:`/pflege`},{key:`footer.explore.haushalt`,href:`/haushalt`},{key:`footer.explore.bundles`,href:`/#bundles`},{key:`footer.explore.about`,href:`/#about`}],D=new Date().getFullYear();return(a,d)=>(e(),c(`footer`,{class:l([`border-t`,w.value.surface,w.value.topRule])},[s(`div`,f,[s(`div`,p,[s(`div`,m,[i(u,{class:l([`w-20 md:w-24 h-auto`,w.value.logo])},null,8,[`class`]),s(`p`,{class:l([`text-sm leading-relaxed`,w.value.muted])},r(t(C)(`footer.tagline`)),3)]),s(`nav`,{"aria-label":t(C)(`footer.explore.heading`),class:`flex flex-col gap-3`},[s(`p`,{class:l([`eyebrow`,w.value.muted])},r(t(C)(`footer.explore.heading`)),3),s(`ul`,g,[(e(),c(o,null,n(E,e=>s(`li`,{key:e.href},[s(`a`,{href:e.href,class:l([`text-sm underline-offset-4 decoration-1 hover:underline`,w.value.link])},r(t(C)(e.key)),11,_)])),64))])],8,h),s(`nav`,{"aria-label":t(C)(`footer.legal.heading`),class:`flex flex-col gap-3`},[s(`p`,{class:l([`eyebrow`,w.value.muted])},r(t(C)(`footer.legal.heading`)),3),s(`ul`,y,[(e(),c(o,null,n(T,e=>s(`li`,{key:e.href},[s(`a`,{href:e.href,class:l([`text-sm underline-offset-4 decoration-1 hover:underline`,w.value.link])},r(t(C)(e.key)),11,b)])),64))])],8,v)]),s(`div`,{class:l([`mt-12 pt-6 border-t flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3`,w.value.bottomRule])},[s(`p`,{class:l([`text-xs`,w.value.muted])},` © `+r(t(D))+` `+r(t(C)(`footer.copyright`)),3),s(`p`,{class:l([`text-xs`,w.value.muted])},r(t(C)(`footer.madeIn`)),3)],2)])],2))}};export{x as t};
|
||||
import{C as e,G as t,T as n,ft as r,m as i,o as a,r as o,s,u as c,ut as l}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as u}from"./Logo-K2VN1F6l.js";import{t as d}from"./i18n-VERRV-oN.js";var f={class:`mx-auto w-full max-w-6xl px-6 py-12 sm:px-8 sm:py-14 md:px-12 md:py-16 lg:px-16`},p={class:`grid gap-10 md:grid-cols-[1.4fr_1fr_1fr] md:gap-12`},m={class:`flex flex-col gap-4 max-w-sm`},h=[`aria-label`],g={class:`flex flex-col gap-2`},_=[`href`],v=[`aria-label`],y={class:`flex flex-col gap-2`},b=[`href`],x={__name:`Footer`,props:{variant:{type:String,default:`cream`,validator:e=>[`cream`,`brand`,`paper`].includes(e)}},setup(x){let S=x,{t:C}=d(),w=a(()=>S.variant===`brand`?{surface:`bg-brand text-cream`,topRule:`border-cream-line`,bottomRule:`border-cream-line/40`,muted:`text-cream/80`,logo:`text-cream`,link:`hover:text-accent`}:S.variant===`paper`?{surface:`bg-paper text-brand`,topRule:`border-line`,bottomRule:`border-line/60`,muted:`text-muted`,logo:`text-brand`,link:`hover:text-brand-hover`}:{surface:`bg-cream text-brand`,topRule:`border-line`,bottomRule:`border-line/60`,muted:`text-muted`,logo:`text-brand`,link:`hover:text-brand-hover`}),T=[{key:`footer.legal.impressum`,href:`/impressum`},{key:`footer.legal.datenschutz`,href:`/datenschutz`}],E=[{key:`footer.explore.shop`,href:`/shop`},{key:`footer.explore.pflege`,href:`/pflege`},{key:`footer.explore.haushalt`,href:`/haushalt`},{key:`footer.explore.bundles`,href:`/#bundles`},{key:`footer.explore.about`,href:`/#about`}],D=new Date().getFullYear();return(a,d)=>(e(),c(`footer`,{class:l([`border-t`,w.value.surface,w.value.topRule])},[s(`div`,f,[s(`div`,p,[s(`div`,m,[i(u,{class:l([`w-20 md:w-24 h-auto`,w.value.logo])},null,8,[`class`]),s(`p`,{class:l([`text-sm leading-relaxed`,w.value.muted])},r(t(C)(`footer.tagline`)),3)]),s(`nav`,{"aria-label":t(C)(`footer.explore.heading`),class:`flex flex-col gap-3`},[s(`p`,{class:l([`eyebrow`,w.value.muted])},r(t(C)(`footer.explore.heading`)),3),s(`ul`,g,[(e(),c(o,null,n(E,e=>s(`li`,{key:e.href},[s(`a`,{href:e.href,class:l([`text-sm underline-offset-4 decoration-1 hover:underline`,w.value.link])},r(t(C)(e.key)),11,_)])),64))])],8,h),s(`nav`,{"aria-label":t(C)(`footer.legal.heading`),class:`flex flex-col gap-3`},[s(`p`,{class:l([`eyebrow`,w.value.muted])},r(t(C)(`footer.legal.heading`)),3),s(`ul`,y,[(e(),c(o,null,n(T,e=>s(`li`,{key:e.href},[s(`a`,{href:e.href,class:l([`text-sm underline-offset-4 decoration-1 hover:underline`,w.value.link])},r(t(C)(e.key)),11,b)])),64))])],8,v)]),s(`div`,{class:l([`mt-12 pt-6 border-t flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3`,w.value.bottomRule])},[s(`p`,{class:l([`text-xs`,w.value.muted])},` © `+r(t(D))+` `+r(t(C)(`footer.copyright`)),3),s(`p`,{class:l([`text-xs`,w.value.muted])},r(t(C)(`footer.madeIn`)),3)],2)])],2))}};export{x as t};
|
||||
@@ -1,3 +1,3 @@
|
||||
import{C as e,G as t,c as n,ft as r,j as i,m as a,s as o}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as s}from"./i18n-D7Ao3GC7.js";import{t as c}from"./Footer-C7VVtZ3C.js";import{t as l}from"./SectionShell-osccWl4j.js";var u={class:`eyebrow mb-5`},d={class:`rounded-md overflow-hidden border border-line`},f={class:`eyebrow mb-5`},p={class:`rounded-md overflow-hidden border border-line`},m={class:`eyebrow mb-5`},h={class:`rounded-md overflow-hidden border border-line`},g={class:`eyebrow mb-5`},_={__name:`FooterSection`,setup(_){let{t:v}=s();return(s,_)=>(e(),n(l,{eyebrow:t(v)(`ds.eyebrow.components`),title:t(v)(`ds.footer.title`),description:t(v)(`ds.footer.description`)},{default:i(()=>[o(`section`,null,[o(`h2`,u,r(t(v)(`ds.footer.tone.cream`)),1),o(`div`,d,[a(c,{variant:`cream`})])]),o(`section`,null,[o(`h2`,f,r(t(v)(`ds.footer.tone.brand`)),1),o(`div`,p,[a(c,{variant:`brand`})])]),o(`section`,null,[o(`h2`,m,r(t(v)(`ds.footer.tone.paper`)),1),o(`div`,h,[a(c,{variant:`paper`})])]),o(`section`,null,[o(`h2`,g,r(t(v)(`ds.heading.usage`)),1),_[0]||=o(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[o(`pre`,{class:`whitespace-pre-wrap`},`<Footer variant="cream" />
|
||||
import{C as e,G as t,c as n,ft as r,j as i,m as a,s as o}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as s}from"./i18n-VERRV-oN.js";import{t as c}from"./Footer-CzQ7Kpca.js";import{t as l}from"./SectionShell-osccWl4j.js";var u={class:`eyebrow mb-5`},d={class:`rounded-md overflow-hidden border border-line`},f={class:`eyebrow mb-5`},p={class:`rounded-md overflow-hidden border border-line`},m={class:`eyebrow mb-5`},h={class:`rounded-md overflow-hidden border border-line`},g={class:`eyebrow mb-5`},_={__name:`FooterSection`,setup(_){let{t:v}=s();return(s,_)=>(e(),n(l,{eyebrow:t(v)(`ds.eyebrow.components`),title:t(v)(`ds.footer.title`),description:t(v)(`ds.footer.description`)},{default:i(()=>[o(`section`,null,[o(`h2`,u,r(t(v)(`ds.footer.tone.cream`)),1),o(`div`,d,[a(c,{variant:`cream`})])]),o(`section`,null,[o(`h2`,f,r(t(v)(`ds.footer.tone.brand`)),1),o(`div`,p,[a(c,{variant:`brand`})])]),o(`section`,null,[o(`h2`,m,r(t(v)(`ds.footer.tone.paper`)),1),o(`div`,h,[a(c,{variant:`paper`})])]),o(`section`,null,[o(`h2`,g,r(t(v)(`ds.heading.usage`)),1),_[0]||=o(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[o(`pre`,{class:`whitespace-pre-wrap`},`<Footer variant="cream" />
|
||||
<Footer variant="brand" />
|
||||
<Footer variant="paper" />`)],-1)])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{_ as default};
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
|
||||
import{C as e,G as t,ft as n,j as r,m as i,o as a,p as o,r as s,s as c,u as l,ut as u}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{a as d}from"./vue-router-Cyqru1db.js";import{t as f}from"./i18n-D7Ao3GC7.js";import{t as p}from"./Navbar-DhReqfWX.js";import{t as m}from"./Hero-CYtP_CK_.js";var h={class:`italic font-light text-brand-soft`},g={class:`italic font-light text-brand-soft`},_=`/products/kaiser-natron-pulver-250-g-grosspackung.webp`,v=`/products/kaiser-natron-bad-500-g.webp`,y={__name:`HeroPreview`,setup(y){let b=d(),{t:x}=f(),S=a(()=>[`split`,`centered`].includes(b.query.variant)?b.query.variant:`split`),C=a(()=>[`cream`,`paper`,`brand`].includes(b.query.tone)?b.query.tone:`cream`),w=a(()=>b.query.reverse===`1`),T=a(()=>C.value===`brand`?`brand`:C.value),E=a(()=>w.value?v:_),D=a(()=>w.value?`Kaiser-Natron Bad 500 g`:`Kaiser-Natron Pulver 250 g Großpackung`);return(a,d)=>(e(),l(`div`,{class:u([`min-h-screen`,C.value===`brand`?`bg-brand`:`bg-surface`])},[i(p,{variant:T.value,"cart-count":0},null,8,[`variant`]),i(m,{variant:S.value,tone:C.value,reverse:w.value,eyebrow:w.value?t(x)(`home.banner.eyebrow`):t(x)(`ds.hero.eyebrow`),subheadline:w.value?t(x)(`home.banner.sub`):t(x)(`ds.hero.sub`),image:E.value,"image-alt":D.value,badge:w.value?``:t(x)(`ds.badges.featured`),"cta-label":t(x)(`ds.buttons.addToCart`),"secondary-label":t(x)(`ds.buttons.learnMore`)},{headline:r(()=>[w.value?(e(),l(s,{key:0},[o(n(t(x)(`home.banner.headline.a`))+` `,1),c(`em`,h,n(t(x)(`home.banner.headline.em`)),1),o(` `+n(t(x)(`home.banner.headline.b`)),1)],64)):(e(),l(s,{key:1},[o(n(t(x)(`ds.hero.headline.a`))+` `,1),c(`em`,g,n(t(x)(`ds.hero.headline.em`)),1),o(` `+n(t(x)(`ds.hero.headline.b`)),1)],64))]),_:1},8,[`variant`,`tone`,`reverse`,`eyebrow`,`subheadline`,`image`,`image-alt`,`badge`,`cta-label`,`secondary-label`])],2))}};export{y as default};
|
||||
import{C as e,G as t,ft as n,j as r,m as i,o as a,p as o,r as s,s as c,u as l,ut as u}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{a as d}from"./vue-router-Cyqru1db.js";import{t as f}from"./i18n-VERRV-oN.js";import{t as p}from"./Navbar-zO_W6yHw.js";import{t as m}from"./Hero-DR9kGDv3.js";var h={class:`italic font-light text-brand-soft`},g={class:`italic font-light text-brand-soft`},_=`/products/kaiser-natron-pulver-250-g-grosspackung.webp`,v=`/products/kaiser-natron-bad-500-g.webp`,y={__name:`HeroPreview`,setup(y){let b=d(),{t:x}=f(),S=a(()=>[`split`,`centered`].includes(b.query.variant)?b.query.variant:`split`),C=a(()=>[`cream`,`paper`,`brand`].includes(b.query.tone)?b.query.tone:`cream`),w=a(()=>b.query.reverse===`1`),T=a(()=>C.value===`brand`?`brand`:C.value),E=a(()=>w.value?v:_),D=a(()=>w.value?`Kaiser-Natron Bad 500 g`:`Kaiser-Natron Pulver 250 g Großpackung`);return(a,d)=>(e(),l(`div`,{class:u([`min-h-screen`,C.value===`brand`?`bg-brand`:`bg-surface`])},[i(p,{variant:T.value,"cart-count":0},null,8,[`variant`]),i(m,{variant:S.value,tone:C.value,reverse:w.value,eyebrow:w.value?t(x)(`home.banner.eyebrow`):t(x)(`ds.hero.eyebrow`),subheadline:w.value?t(x)(`home.banner.sub`):t(x)(`ds.hero.sub`),image:E.value,"image-alt":D.value,badge:w.value?``:t(x)(`ds.badges.featured`),"cta-label":t(x)(`ds.buttons.addToCart`),"secondary-label":t(x)(`ds.buttons.learnMore`)},{headline:r(()=>[w.value?(e(),l(s,{key:0},[o(n(t(x)(`home.banner.headline.a`))+` `,1),c(`em`,h,n(t(x)(`home.banner.headline.em`)),1),o(` `+n(t(x)(`home.banner.headline.b`)),1)],64)):(e(),l(s,{key:1},[o(n(t(x)(`ds.hero.headline.a`))+` `,1),c(`em`,g,n(t(x)(`ds.hero.headline.em`)),1),o(` `+n(t(x)(`ds.hero.headline.b`)),1)],64))]),_:1},8,[`variant`,`tone`,`reverse`,`eyebrow`,`subheadline`,`image`,`image-alt`,`badge`,`cta-label`,`secondary-label`])],2))}};export{y as default};
|
||||
@@ -1,4 +1,4 @@
|
||||
import{B as e,C as t,G as n,T as r,c as i,dt as a,ft as o,j as s,m as c,o as l,p as u,r as d,s as f,u as p,ut as m}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as h}from"./i18n-D7Ao3GC7.js";import{t as g}from"./SectionShell-osccWl4j.js";import{t as _}from"./DevicePreview-DrPoWfT3.js";var v=[`aria-label`],y=[`aria-selected`,`onClick`],b=[`aria-label`],x=[`aria-selected`,`onClick`],S={class:`eyebrow mb-5`},C={__name:`HeroSection`,setup(C){let{t:w}=h(),T=l(()=>[{id:`split`,label:w(`ds.hero.variant.split`)},{id:`centered`,label:w(`ds.hero.variant.centered`)}]),E=l(()=>[{id:`cream`,label:w(`ds.navbar.tone.cream`),swatch:`var(--color-cream)`},{id:`paper`,label:w(`ds.navbar.tone.paper`),swatch:`#ffffff`},{id:`brand`,label:w(`ds.navbar.tone.brand`),swatch:`var(--color-brand)`}]),D=e(`split`),O=e(`cream`),k=l(()=>`/design/preview/hero?variant=${D.value}&tone=${O.value}`);return(e,l)=>(t(),i(g,{eyebrow:n(w)(`ds.eyebrow.components`),title:n(w)(`ds.hero.title`),description:n(w)(`ds.hero.description`),wide:``},{default:s(()=>[f(`section`,null,[c(_,{src:k.value,initial:`desktop`,height:760},{controls:s(()=>[f(`div`,{role:`tablist`,"aria-label":n(w)(`ds.hero.variant.label`),class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper`},[(t(!0),p(d,null,r(T.value,e=>(t(),p(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":D.value===e.id,class:m([`px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,D.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>D.value=e.id},o(e.label),11,y))),128))],8,v),f(`div`,{role:`tablist`,"aria-label":n(w)(`ds.navbar.tone`),class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper`},[(t(!0),p(d,null,r(E.value,e=>(t(),p(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":O.value===e.id,class:m([`inline-flex items-center gap-2 px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,O.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>O.value=e.id},[f(`span`,{class:`w-2.5 h-2.5 rounded-full border border-line-strong`,style:a({backgroundColor:e.swatch})},null,4),u(` `+o(e.label),1)],10,x))),128))],8,b)]),_:1},8,[`src`])]),f(`section`,null,[f(`h2`,S,o(n(w)(`ds.heading.usage`)),1),l[0]||=f(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[f(`pre`,{class:`whitespace-pre-wrap`},`<Hero
|
||||
import{B as e,C as t,G as n,T as r,c as i,dt as a,ft as o,j as s,m as c,o as l,p as u,r as d,s as f,u as p,ut as m}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as h}from"./i18n-VERRV-oN.js";import{t as g}from"./SectionShell-osccWl4j.js";import{t as _}from"./DevicePreview-m3tD-qdR.js";var v=[`aria-label`],y=[`aria-selected`,`onClick`],b=[`aria-label`],x=[`aria-selected`,`onClick`],S={class:`eyebrow mb-5`},C={__name:`HeroSection`,setup(C){let{t:w}=h(),T=l(()=>[{id:`split`,label:w(`ds.hero.variant.split`)},{id:`centered`,label:w(`ds.hero.variant.centered`)}]),E=l(()=>[{id:`cream`,label:w(`ds.navbar.tone.cream`),swatch:`var(--color-cream)`},{id:`paper`,label:w(`ds.navbar.tone.paper`),swatch:`#ffffff`},{id:`brand`,label:w(`ds.navbar.tone.brand`),swatch:`var(--color-brand)`}]),D=e(`split`),O=e(`cream`),k=l(()=>`/design/preview/hero?variant=${D.value}&tone=${O.value}`);return(e,l)=>(t(),i(g,{eyebrow:n(w)(`ds.eyebrow.components`),title:n(w)(`ds.hero.title`),description:n(w)(`ds.hero.description`),wide:``},{default:s(()=>[f(`section`,null,[c(_,{src:k.value,initial:`desktop`,height:760},{controls:s(()=>[f(`div`,{role:`tablist`,"aria-label":n(w)(`ds.hero.variant.label`),class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper`},[(t(!0),p(d,null,r(T.value,e=>(t(),p(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":D.value===e.id,class:m([`px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,D.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>D.value=e.id},o(e.label),11,y))),128))],8,v),f(`div`,{role:`tablist`,"aria-label":n(w)(`ds.navbar.tone`),class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper`},[(t(!0),p(d,null,r(E.value,e=>(t(),p(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":O.value===e.id,class:m([`inline-flex items-center gap-2 px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,O.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>O.value=e.id},[f(`span`,{class:`w-2.5 h-2.5 rounded-full border border-line-strong`,style:a({backgroundColor:e.swatch})},null,4),u(` `+o(e.label),1)],10,x))),128))],8,b)]),_:1},8,[`src`])]),f(`section`,null,[f(`h2`,S,o(n(w)(`ds.heading.usage`)),1),l[0]||=f(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[f(`pre`,{class:`whitespace-pre-wrap`},`<Hero
|
||||
variant="split"
|
||||
tone="cream"
|
||||
eyebrow="Neu"
|
||||
1
dist/assets/HomePage-BhQtJF4F.css
vendored
Normal file
1
dist/assets/HomePage-BhQtJF4F.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
@property --hero-feather{syntax:"<percentage>";inherits:false;initial-value:12%}.brand-hero__svg--bg[data-v-5982746d]{--hero-feather:12%;-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);transition:--hero-feather .4s 1.85s;display:block}.brand-hero.go .brand-hero__svg--bg[data-v-5982746d]{--hero-feather:0%}.brand-hero__svg--portrait[data-v-5982746d]{width:100%;height:auto;max-height:56svh;margin:0 auto;display:block}.left-m[data-v-5982746d],.right-m[data-v-5982746d]{fill:#b5d8b6}.mound-m[data-v-5982746d]{fill:#fff}.layer.left-m[data-v-5982746d]{opacity:0;transition:transform .8s cubic-bezier(.22,.61,.36,1) .15s,opacity .6s .15s;transform:translate(-14%)}.layer.right-m[data-v-5982746d]{opacity:0;transition:transform .8s cubic-bezier(.22,.61,.36,1) .15s,opacity .6s .15s;transform:translate(14%)}.layer.mound-m[data-v-5982746d]{opacity:0;transition:opacity .55s .7s}.brand-hero__copy[data-v-5982746d]{opacity:0;transition:opacity .7s 1.15s}.brand-hero.go .layer.left-m[data-v-5982746d],.brand-hero.go .layer.right-m[data-v-5982746d]{opacity:1;transform:none}.brand-hero.go .layer.mound-m[data-v-5982746d],.brand-hero.go .brand-hero__copy[data-v-5982746d]{opacity:1}@media (prefers-reduced-motion:reduce){.layer.left-m[data-v-5982746d],.layer.right-m[data-v-5982746d],.layer.mound-m[data-v-5982746d],.brand-hero__copy[data-v-5982746d]{opacity:1!important;transition:none!important;transform:none!important}}
|
||||
1
dist/assets/HomePage-DEQ7y74U.js
vendored
1
dist/assets/HomePage-DEQ7y74U.js
vendored
File diff suppressed because one or more lines are too long
1
dist/assets/HomePage-eJL_FvSe.js
vendored
Normal file
1
dist/assets/HomePage-eJL_FvSe.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
|
||||
import{C as e,E as t,ft as n,l as r,m as i,o as a,u as o,ut as s}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as c}from"./Icon-Dcq1PyHo.js";var l=[`type`,`aria-label`],u={key:0,class:`absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 rounded-full bg-danger text-white text-[10px] font-bold flex items-center justify-center`},d={__name:`IconButton`,props:{icon:{type:String,required:!0},iconSize:{type:Number,default:null},iconStrokeWidth:{type:[Number,String],default:null},variant:{type:String,default:`float`,validator:e=>[`float`,`accent`,`cream-wash`,`brand-wash`,`cream-dark`,`ghost`].includes(e)},size:{type:String,default:`lg`,validator:e=>[`xs`,`sm`,`md`,`lg`].includes(e)},shadow:{type:String,default:null,validator:e=>e===null||[`none`,`sm`,`md`,`lg`].includes(e)},count:{type:Number,default:null},ariaLabel:{type:String,default:``},type:{type:String,default:`button`}},emits:[`click`],setup(d){let f=d,p=new Set([`float`,`accent`]),m={float:`bg-brand-float text-accent`,accent:`bg-accent text-brand hover:bg-accent-soft`,"cream-wash":`bg-cream-wash text-cream hover:bg-cream-wash-strong`,"brand-wash":`bg-brand-wash text-brand`,"cream-dark":`bg-cream-dark text-brand hover:bg-brand-soft hover:text-cream`,ghost:`bg-transparent text-muted hover:bg-brand-wash hover:text-brand`},h={float:`shadow-lg`,accent:``,"cream-wash":``,"brand-wash":``,"cream-dark":``,ghost:``},g={none:``,sm:`shadow-sm`,md:`shadow-md`,lg:`shadow-lg`},_={xs:{box:`w-9 h-9`,icon:18},sm:{box:`w-10 h-10`,icon:20},md:{box:`w-11 h-11`,icon:20},lg:{box:`w-14 h-14`,icon:22}},v=a(()=>p.has(f.variant)),y=a(()=>v.value?`transition-transform duration-base ease-out hover:-translate-y-0.5 active:translate-y-0`:`transition-colors`),b=a(()=>f.shadow===null?h[f.variant]:g[f.shadow]),x=a(()=>[`relative inline-flex items-center justify-center rounded-full`,_[f.size].box,m[f.variant],b.value,y.value]),S=a(()=>f.iconSize??_[f.size].icon);return(a,f)=>(e(),o(`button`,{type:d.type,class:s(x.value),"aria-label":d.ariaLabel||void 0,onClick:f[0]||=e=>a.$emit(`click`,e)},[i(c,{name:d.icon,size:S.value,"stroke-width":d.iconStrokeWidth??void 0},null,8,[`name`,`size`,`stroke-width`]),d.count!==null&&d.count>0?(e(),o(`span`,u,n(d.count),1)):r(``,!0),t(a.$slots,`default`)],10,l))}};export{d as t};
|
||||
import{C as e,E as t,ft as n,l as r,m as i,o as a,u as o,ut as s}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as c}from"./Icon-BCo6-bGH.js";var l=[`type`,`aria-label`],u={key:0,class:`absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 rounded-full bg-danger text-white text-[10px] font-bold flex items-center justify-center`},d={__name:`IconButton`,props:{icon:{type:String,required:!0},iconSize:{type:Number,default:null},iconStrokeWidth:{type:[Number,String],default:null},variant:{type:String,default:`float`,validator:e=>[`float`,`accent`,`cream-wash`,`brand-wash`,`cream-dark`,`ghost`].includes(e)},size:{type:String,default:`lg`,validator:e=>[`xs`,`sm`,`md`,`lg`].includes(e)},shadow:{type:String,default:null,validator:e=>e===null||[`none`,`sm`,`md`,`lg`].includes(e)},count:{type:Number,default:null},ariaLabel:{type:String,default:``},type:{type:String,default:`button`}},emits:[`click`],setup(d){let f=d,p=new Set([`float`,`accent`]),m={float:`bg-brand-float text-accent`,accent:`bg-accent text-brand hover:bg-accent-soft`,"cream-wash":`bg-cream-wash text-cream hover:bg-cream-wash-strong`,"brand-wash":`bg-brand-wash text-brand`,"cream-dark":`bg-cream-dark text-brand hover:bg-brand-soft hover:text-cream`,ghost:`bg-transparent text-muted hover:bg-brand-wash hover:text-brand`},h={float:`shadow-lg`,accent:``,"cream-wash":``,"brand-wash":``,"cream-dark":``,ghost:``},g={none:``,sm:`shadow-sm`,md:`shadow-md`,lg:`shadow-lg`},_={xs:{box:`w-9 h-9`,icon:18},sm:{box:`w-10 h-10`,icon:20},md:{box:`w-11 h-11`,icon:20},lg:{box:`w-14 h-14`,icon:22}},v=a(()=>p.has(f.variant)),y=a(()=>v.value?`transition-transform duration-base ease-out hover:-translate-y-0.5 active:translate-y-0`:`transition-colors`),b=a(()=>f.shadow===null?h[f.variant]:g[f.shadow]),x=a(()=>[`relative inline-flex items-center justify-center rounded-full`,_[f.size].box,m[f.variant],b.value,y.value]),S=a(()=>f.iconSize??_[f.size].icon);return(a,f)=>(e(),o(`button`,{type:d.type,class:s(x.value),"aria-label":d.ariaLabel||void 0,onClick:f[0]||=e=>a.$emit(`click`,e)},[i(c,{name:d.icon,size:S.value,"stroke-width":d.iconStrokeWidth??void 0},null,8,[`name`,`size`,`stroke-width`]),d.count!==null&&d.count>0?(e(),o(`span`,u,n(d.count),1)):r(``,!0),t(a.$slots,`default`)],10,l))}};export{d as t};
|
||||
@@ -1,2 +1,2 @@
|
||||
import{B as e,C as t,G as n,M as r,T as i,c as a,ft as o,j as s,l as c,m as l,o as u,r as d,s as f,u as p}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{a as m}from"./runtime-dom.esm-bundler-Bg1uJ-W7.js";import{n as h,t as g}from"./Icon-Dcq1PyHo.js";import{t as _}from"./i18n-D7Ao3GC7.js";import{t as v}from"./SectionShell-osccWl4j.js";var y={class:`mb-5 flex items-center gap-3 flex-wrap`},b={class:`relative inline-flex items-center`},x={class:`absolute left-3 text-muted pointer-events-none`},S=[`placeholder`],C={class:`text-[12px] text-muted`},w={key:0,class:`text-[14px] text-muted`},T={class:`eyebrow mb-4`},E={class:`grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-3`},D=[`onClick`],O={class:`w-10 h-10 rounded-sm bg-cream text-brand flex items-center justify-center`},k={class:`font-mono text-[11px] text-muted group-hover:text-brand transition-colors`},A={class:`eyebrow mb-5`},j={class:`grid md:grid-cols-3 gap-4`},M={class:`rounded-md border border-line bg-paper text-brand p-8 flex items-center justify-center gap-6`},N={class:`rounded-md border border-line bg-cream text-brand p-8 flex items-center justify-center gap-6`},P={class:`rounded-md bg-brand text-accent p-8 flex items-center justify-center gap-6`},F={class:`eyebrow mb-5`},I={class:`rounded-md border border-line bg-paper p-8 flex items-end gap-8 text-brand`},L={class:`flex flex-col items-center gap-3`},R={class:`flex flex-col items-center gap-3`},z={class:`font-mono text-[11px] text-muted`},B={class:`flex flex-col items-center gap-3`},V={class:`flex flex-col items-center gap-3`},H={class:`flex flex-col items-center gap-3`},U={class:`eyebrow mb-5`},W={__name:`IconsSection`,setup(W){let{t:G}=_(),K=u(()=>[{title:G(`ds.icons.group.commerce`),names:[`cart`,`bag`,`heart`,`user`,`search`]},{title:G(`ds.icons.group.navigation`),names:[`menu`,`close`,`chevron-left`,`chevron-right`,`chevron-down`,`chevron-up`,`arrow-left`,`arrow-right`]},{title:G(`ds.icons.group.actions`),names:[`plus`,`minus`,`check`]},{title:G(`ds.icons.group.contact`),names:[`mail`,`phone`,`map-pin`,`external-link`]},{title:G(`ds.icons.group.feedback`),names:[`info`,`star`]},{title:G(`ds.icons.group.devices`),names:[`mobile`,`tablet`,`desktop`]}]),q=e(``),J=u(()=>{let e=q.value.trim().toLowerCase();return e?K.value.map(t=>({...t,names:t.names.filter(t=>t.includes(e)||(h[t]?.label||``).toLowerCase().includes(e))})).filter(e=>e.names.length>0):K.value}),Y=e(``);async function X(e){let t=`<Icon name="${e}" />`;try{await navigator.clipboard.writeText(t),Y.value=e,setTimeout(()=>{Y.value===e&&(Y.value=``)},1200)}catch{}}return(e,u)=>(t(),a(v,{eyebrow:n(G)(`ds.eyebrow.components`),title:n(G)(`ds.icons.title`),description:n(G)(`ds.icons.description`)},{default:s(()=>[f(`section`,null,[f(`div`,y,[f(`label`,b,[f(`span`,x,[l(g,{name:`search`,size:16})]),r(f(`input`,{"onUpdate:modelValue":u[0]||=e=>q.value=e,type:`search`,placeholder:n(G)(`ds.icons.search`),class:`pl-9 pr-4 py-2 rounded-pill border border-line bg-paper text-[14px] text-ink placeholder:text-muted focus:outline-none focus:border-brand w-[260px]`},null,8,S),[[m,q.value]])]),f(`span`,C,o(n(G)(`ds.icons.copyHint`)),1)]),J.value.length===0?(t(),p(`div`,w,o(n(G)(`ds.icons.noMatch`))+` "`+o(q.value)+`". `,1)):c(``,!0),(t(!0),p(d,null,i(J.value,e=>(t(),p(`div`,{key:e.title,class:`mb-10 last:mb-0`},[f(`h2`,T,o(e.title),1),f(`div`,E,[(t(!0),p(d,null,i(e.names,e=>(t(),p(`button`,{key:e,type:`button`,class:`group flex flex-col items-center justify-center gap-2 p-4 rounded-md border border-line bg-paper text-ink hover:border-brand-soft hover:-translate-y-0.5 hover:shadow-sm transition-all duration-base ease-out`,onClick:t=>X(e)},[f(`span`,O,[l(g,{name:e,size:22},null,8,[`name`])]),f(`span`,k,o(Y.value===e?n(G)(`ds.icons.copied`):e),1)],8,D))),128))])]))),128))]),f(`section`,null,[f(`h2`,A,o(n(G)(`ds.heading.onDifferentSurfaces`)),1),f(`div`,j,[f(`div`,M,[l(g,{name:`cart`,size:28}),l(g,{name:`heart`,size:28}),l(g,{name:`user`,size:28})]),f(`div`,N,[l(g,{name:`cart`,size:28}),l(g,{name:`heart`,size:28}),l(g,{name:`user`,size:28})]),f(`div`,P,[l(g,{name:`cart`,size:28}),l(g,{name:`heart`,size:28}),l(g,{name:`user`,size:28})])])]),f(`section`,null,[f(`h2`,F,o(n(G)(`ds.heading.sizes`)),1),f(`div`,I,[f(`div`,L,[l(g,{name:`cart`,size:16}),u[1]||=f(`code`,{class:`font-mono text-[11px] text-muted`},`16`,-1)]),f(`div`,R,[l(g,{name:`cart`,size:20}),f(`code`,z,o(n(G)(`ds.icons.sizeDefault`)),1)]),f(`div`,B,[l(g,{name:`cart`,size:24}),u[2]||=f(`code`,{class:`font-mono text-[11px] text-muted`},`24`,-1)]),f(`div`,V,[l(g,{name:`cart`,size:32}),u[3]||=f(`code`,{class:`font-mono text-[11px] text-muted`},`32`,-1)]),f(`div`,H,[l(g,{name:`cart`,size:48}),u[4]||=f(`code`,{class:`font-mono text-[11px] text-muted`},`48`,-1)])])]),f(`section`,null,[f(`h2`,U,o(n(G)(`ds.heading.usage`)),1),u[5]||=f(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[f(`pre`,{class:`whitespace-pre-wrap`},`<Icon name="cart" :size="20" />
|
||||
import{B as e,C as t,G as n,M as r,T as i,c as a,ft as o,j as s,l as c,m as l,o as u,r as d,s as f,u as p}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{a as m}from"./runtime-dom.esm-bundler-CXLmyuFK.js";import{n as h,t as g}from"./Icon-BCo6-bGH.js";import{t as _}from"./i18n-VERRV-oN.js";import{t as v}from"./SectionShell-osccWl4j.js";var y={class:`mb-5 flex items-center gap-3 flex-wrap`},b={class:`relative inline-flex items-center`},x={class:`absolute left-3 text-muted pointer-events-none`},S=[`placeholder`],C={class:`text-[12px] text-muted`},w={key:0,class:`text-[14px] text-muted`},T={class:`eyebrow mb-4`},E={class:`grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-3`},D=[`onClick`],O={class:`w-10 h-10 rounded-sm bg-cream text-brand flex items-center justify-center`},k={class:`font-mono text-[11px] text-muted group-hover:text-brand transition-colors`},A={class:`eyebrow mb-5`},j={class:`grid md:grid-cols-3 gap-4`},M={class:`rounded-md border border-line bg-paper text-brand p-8 flex items-center justify-center gap-6`},N={class:`rounded-md border border-line bg-cream text-brand p-8 flex items-center justify-center gap-6`},P={class:`rounded-md bg-brand text-accent p-8 flex items-center justify-center gap-6`},F={class:`eyebrow mb-5`},I={class:`rounded-md border border-line bg-paper p-8 flex items-end gap-8 text-brand`},L={class:`flex flex-col items-center gap-3`},R={class:`flex flex-col items-center gap-3`},z={class:`font-mono text-[11px] text-muted`},B={class:`flex flex-col items-center gap-3`},V={class:`flex flex-col items-center gap-3`},H={class:`flex flex-col items-center gap-3`},U={class:`eyebrow mb-5`},W={__name:`IconsSection`,setup(W){let{t:G}=_(),K=u(()=>[{title:G(`ds.icons.group.commerce`),names:[`cart`,`bag`,`heart`,`user`,`search`]},{title:G(`ds.icons.group.navigation`),names:[`menu`,`close`,`chevron-left`,`chevron-right`,`chevron-down`,`chevron-up`,`arrow-left`,`arrow-right`]},{title:G(`ds.icons.group.actions`),names:[`plus`,`minus`,`check`]},{title:G(`ds.icons.group.contact`),names:[`mail`,`phone`,`map-pin`,`external-link`]},{title:G(`ds.icons.group.feedback`),names:[`info`,`star`]},{title:G(`ds.icons.group.devices`),names:[`mobile`,`tablet`,`desktop`]}]),q=e(``),J=u(()=>{let e=q.value.trim().toLowerCase();return e?K.value.map(t=>({...t,names:t.names.filter(t=>t.includes(e)||(h[t]?.label||``).toLowerCase().includes(e))})).filter(e=>e.names.length>0):K.value}),Y=e(``);async function X(e){let t=`<Icon name="${e}" />`;try{await navigator.clipboard.writeText(t),Y.value=e,setTimeout(()=>{Y.value===e&&(Y.value=``)},1200)}catch{}}return(e,u)=>(t(),a(v,{eyebrow:n(G)(`ds.eyebrow.components`),title:n(G)(`ds.icons.title`),description:n(G)(`ds.icons.description`)},{default:s(()=>[f(`section`,null,[f(`div`,y,[f(`label`,b,[f(`span`,x,[l(g,{name:`search`,size:16})]),r(f(`input`,{"onUpdate:modelValue":u[0]||=e=>q.value=e,type:`search`,placeholder:n(G)(`ds.icons.search`),class:`pl-9 pr-4 py-2 rounded-pill border border-line bg-paper text-[14px] text-ink placeholder:text-muted focus:outline-none focus:border-brand w-[260px]`},null,8,S),[[m,q.value]])]),f(`span`,C,o(n(G)(`ds.icons.copyHint`)),1)]),J.value.length===0?(t(),p(`div`,w,o(n(G)(`ds.icons.noMatch`))+` "`+o(q.value)+`". `,1)):c(``,!0),(t(!0),p(d,null,i(J.value,e=>(t(),p(`div`,{key:e.title,class:`mb-10 last:mb-0`},[f(`h2`,T,o(e.title),1),f(`div`,E,[(t(!0),p(d,null,i(e.names,e=>(t(),p(`button`,{key:e,type:`button`,class:`group flex flex-col items-center justify-center gap-2 p-4 rounded-md border border-line bg-paper text-ink hover:border-brand-soft hover:-translate-y-0.5 hover:shadow-sm transition-all duration-base ease-out`,onClick:t=>X(e)},[f(`span`,O,[l(g,{name:e,size:22},null,8,[`name`])]),f(`span`,k,o(Y.value===e?n(G)(`ds.icons.copied`):e),1)],8,D))),128))])]))),128))]),f(`section`,null,[f(`h2`,A,o(n(G)(`ds.heading.onDifferentSurfaces`)),1),f(`div`,j,[f(`div`,M,[l(g,{name:`cart`,size:28}),l(g,{name:`heart`,size:28}),l(g,{name:`user`,size:28})]),f(`div`,N,[l(g,{name:`cart`,size:28}),l(g,{name:`heart`,size:28}),l(g,{name:`user`,size:28})]),f(`div`,P,[l(g,{name:`cart`,size:28}),l(g,{name:`heart`,size:28}),l(g,{name:`user`,size:28})])])]),f(`section`,null,[f(`h2`,F,o(n(G)(`ds.heading.sizes`)),1),f(`div`,I,[f(`div`,L,[l(g,{name:`cart`,size:16}),u[1]||=f(`code`,{class:`font-mono text-[11px] text-muted`},`16`,-1)]),f(`div`,R,[l(g,{name:`cart`,size:20}),f(`code`,z,o(n(G)(`ds.icons.sizeDefault`)),1)]),f(`div`,B,[l(g,{name:`cart`,size:24}),u[2]||=f(`code`,{class:`font-mono text-[11px] text-muted`},`24`,-1)]),f(`div`,V,[l(g,{name:`cart`,size:32}),u[3]||=f(`code`,{class:`font-mono text-[11px] text-muted`},`32`,-1)]),f(`div`,H,[l(g,{name:`cart`,size:48}),u[4]||=f(`code`,{class:`font-mono text-[11px] text-muted`},`48`,-1)])])]),f(`section`,null,[f(`h2`,U,o(n(G)(`ds.heading.usage`)),1),u[5]||=f(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[f(`pre`,{class:`whitespace-pre-wrap`},`<Icon name="cart" :size="20" />
|
||||
<Icon name="arrow-right" :size="16" label="Next slide" />`)],-1)])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{W as default};
|
||||
@@ -1 +1 @@
|
||||
import{B as e,C as t,G as n,c as r,ft as i,j as a,m as o,s}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as c}from"./i18n-D7Ao3GC7.js";import{t as l}from"./Input-D0r2DMc-.js";import{t as u}from"./SectionShell-osccWl4j.js";import{t as d}from"./Card-E6lMGZqd.js";var f={class:`eyebrow mb-5`},p={class:`grid md:grid-cols-2 gap-6 max-w-3xl`},m={class:`eyebrow mb-5`},h={class:`grid md:grid-cols-2 gap-6 max-w-3xl`},g={__name:`InputsSection`,setup(g){let{t:_}=c(),v=e(``),y=e(``),b=e(``);return(e,c)=>(t(),r(u,{eyebrow:n(_)(`ds.eyebrow.components`),title:n(_)(`ds.inputs.title`),description:n(_)(`ds.inputs.description`)},{default:a(()=>[s(`section`,null,[s(`h2`,f,i(n(_)(`ds.heading.default`)),1),o(d,{tone:`paper`},{default:a(()=>[s(`div`,p,[o(l,{modelValue:v.value,"onUpdate:modelValue":c[0]||=e=>v.value=e,label:n(_)(`ds.inputs.email`),type:`email`,placeholder:`you@example.com`,hint:n(_)(`ds.inputs.emailHint`)},null,8,[`modelValue`,`label`,`hint`]),o(l,{modelValue:y.value,"onUpdate:modelValue":c[1]||=e=>y.value=e,label:n(_)(`ds.inputs.password`),type:`password`,placeholder:`••••••••`},null,8,[`modelValue`,`label`])])]),_:1})]),s(`section`,null,[s(`h2`,m,i(n(_)(`ds.heading.states`)),1),o(d,{tone:`paper`},{default:a(()=>[s(`div`,h,[o(l,{modelValue:b.value,"onUpdate:modelValue":c[2]||=e=>b.value=e,label:n(_)(`ds.inputs.required`),required:``,error:n(_)(`ds.inputs.requiredError`)},null,8,[`modelValue`,`label`,`error`]),o(l,{label:n(_)(`ds.inputs.disabled`),placeholder:n(_)(`ds.inputs.disabledPlaceholder`),disabled:``},null,8,[`label`,`placeholder`])])]),_:1})])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{g as default};
|
||||
import{B as e,C as t,G as n,c as r,ft as i,j as a,m as o,s}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as c}from"./i18n-VERRV-oN.js";import{t as l}from"./Input-D0r2DMc-.js";import{t as u}from"./SectionShell-osccWl4j.js";import{t as d}from"./Card-E6lMGZqd.js";var f={class:`eyebrow mb-5`},p={class:`grid md:grid-cols-2 gap-6 max-w-3xl`},m={class:`eyebrow mb-5`},h={class:`grid md:grid-cols-2 gap-6 max-w-3xl`},g={__name:`InputsSection`,setup(g){let{t:_}=c(),v=e(``),y=e(``),b=e(``);return(e,c)=>(t(),r(u,{eyebrow:n(_)(`ds.eyebrow.components`),title:n(_)(`ds.inputs.title`),description:n(_)(`ds.inputs.description`)},{default:a(()=>[s(`section`,null,[s(`h2`,f,i(n(_)(`ds.heading.default`)),1),o(d,{tone:`paper`},{default:a(()=>[s(`div`,p,[o(l,{modelValue:v.value,"onUpdate:modelValue":c[0]||=e=>v.value=e,label:n(_)(`ds.inputs.email`),type:`email`,placeholder:`you@example.com`,hint:n(_)(`ds.inputs.emailHint`)},null,8,[`modelValue`,`label`,`hint`]),o(l,{modelValue:y.value,"onUpdate:modelValue":c[1]||=e=>y.value=e,label:n(_)(`ds.inputs.password`),type:`password`,placeholder:`••••••••`},null,8,[`modelValue`,`label`])])]),_:1})]),s(`section`,null,[s(`h2`,m,i(n(_)(`ds.heading.states`)),1),o(d,{tone:`paper`},{default:a(()=>[s(`div`,h,[o(l,{modelValue:b.value,"onUpdate:modelValue":c[2]||=e=>b.value=e,label:n(_)(`ds.inputs.required`),required:``,error:n(_)(`ds.inputs.requiredError`)},null,8,[`modelValue`,`label`,`error`]),o(l,{label:n(_)(`ds.inputs.disabled`),placeholder:n(_)(`ds.inputs.disabledPlaceholder`),disabled:``},null,8,[`label`,`placeholder`])])]),_:1})])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{g as default};
|
||||
@@ -1 +1 @@
|
||||
import{C as e,G as t,T as n,ft as r,o as i,r as a,u as o,ut as s}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as c}from"./i18n-D7Ao3GC7.js";var l=[`aria-label`,`aria-pressed`,`onClick`],u={__name:`LanguageSwitcher`,props:{floating:{type:Boolean,default:!1},tone:{type:String,default:`paper`,validator:e=>[`paper`,`cream`,`brand`].includes(e)}},setup(u){let d=u,{locale:f,setLocale:p,availableLocales:m}=c(),h={paper:{container:`border border-line bg-paper`,active:`bg-brand text-accent`,inactive:`text-muted hover:text-brand`},cream:{container:`border border-line-strong bg-paper`,active:`bg-brand text-accent`,inactive:`text-muted hover:text-brand`},brand:{container:`border border-cream-line bg-cream-wash`,active:`bg-accent text-brand`,inactive:`text-cream hover:text-accent`}},g=i(()=>h[d.tone]);return(i,c)=>(e(),o(`div`,{role:`group`,"aria-label":`Language`,class:s([`inline-flex items-center h-10 px-2 gap-0.5 rounded-pill font-sans`,g.value.container,u.floating?`fixed top-6 right-6 z-[60] shadow-sm`:``])},[(e(!0),o(a,null,n(t(m),n=>(e(),o(`button`,{key:n.code,type:`button`,"aria-label":n.name,"aria-pressed":t(f)===n.code,class:s([`px-2.5 py-1 text-[11px] font-bold tracking-eyebrow rounded-pill transition-colors duration-base`,t(f)===n.code?g.value.active:g.value.inactive]),onClick:e=>t(p)(n.code)},r(n.label),11,l))),128))],2))}};export{u as t};
|
||||
import{C as e,G as t,T as n,ft as r,o as i,r as a,u as o,ut as s}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as c}from"./i18n-VERRV-oN.js";var l=[`aria-label`,`aria-pressed`,`onClick`],u={__name:`LanguageSwitcher`,props:{floating:{type:Boolean,default:!1},tone:{type:String,default:`paper`,validator:e=>[`paper`,`cream`,`brand`].includes(e)}},setup(u){let d=u,{locale:f,setLocale:p,availableLocales:m}=c(),h={paper:{container:`border border-line bg-paper`,active:`bg-brand text-accent`,inactive:`text-muted hover:text-brand`},cream:{container:`border border-line-strong bg-paper`,active:`bg-brand text-accent`,inactive:`text-muted hover:text-brand`},brand:{container:`border border-cream-line bg-cream-wash`,active:`bg-accent text-brand`,inactive:`text-cream hover:text-accent`}},g=i(()=>h[d.tone]);return(i,c)=>(e(),o(`div`,{role:`group`,"aria-label":`Language`,class:s([`inline-flex items-center h-10 px-2 gap-0.5 rounded-pill font-sans`,g.value.container,u.floating?`fixed top-6 right-6 z-[60] shadow-sm`:``])},[(e(!0),o(a,null,n(t(m),n=>(e(),o(`button`,{key:n.code,type:`button`,"aria-label":n.name,"aria-pressed":t(f)===n.code,class:s([`px-2.5 py-1 text-[11px] font-bold tracking-eyebrow rounded-pill transition-colors duration-base`,t(f)===n.code?g.value.active:g.value.inactive]),onClick:e=>t(p)(n.code)},r(n.label),11,l))),128))],2))}};export{u as t};
|
||||
@@ -1,3 +1,3 @@
|
||||
import{C as e,G as t,c as n,ft as r,j as i,m as a,s as o}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as s}from"./i18n-D7Ao3GC7.js";import{t as c}from"./LanguageSwitcher-BfOqXAQd.js";import{t as l}from"./SectionShell-osccWl4j.js";import{t as u}from"./Card-E6lMGZqd.js";var d={class:`eyebrow mb-5`},f={class:`grid md:grid-cols-3 gap-4`},p={class:`eyebrow mb-4`},m={class:`text-[13px] text-muted mt-4 leading-relaxed`},h={class:`eyebrow mb-4`},g={class:`text-[13px] text-muted mt-4 leading-relaxed`},_={class:`eyebrow mb-4`},v={class:`text-[13px] opacity-80 mt-4 leading-relaxed`},y={class:`eyebrow mb-5`},b={class:`text-[13px] text-muted max-w-2xl leading-relaxed`},x={class:`eyebrow mb-5`},S={__name:`LanguageSwitcherSection`,setup(S){let{t:C}=s();return(s,S)=>(e(),n(l,{eyebrow:t(C)(`ds.eyebrow.components`),title:t(C)(`ds.language.title`),description:t(C)(`ds.language.description`)},{default:i(()=>[o(`section`,null,[o(`h2`,d,r(t(C)(`ds.heading.onDifferentSurfaces`)),1),o(`div`,f,[a(u,{tone:`paper`},{default:i(()=>[o(`p`,p,r(t(C)(`ds.cards.paper`)),1),a(c,{tone:`paper`}),o(`p`,m,r(t(C)(`ds.language.paperNote`)),1)]),_:1}),a(u,{tone:`cream`},{default:i(()=>[o(`p`,h,r(t(C)(`ds.cards.cream`)),1),a(c,{tone:`cream`}),o(`p`,g,r(t(C)(`ds.language.creamNote`)),1)]),_:1}),a(u,{tone:`brand`},{default:i(()=>[o(`p`,_,r(t(C)(`ds.cards.brand`)),1),a(c,{tone:`brand`}),o(`p`,v,r(t(C)(`ds.language.brandNote`)),1)]),_:1})])]),o(`section`,null,[o(`h2`,y,r(t(C)(`ds.language.floating`)),1),a(u,{tone:`paper`},{default:i(()=>[o(`p`,b,r(t(C)(`ds.language.floatingNote`)),1)]),_:1})]),o(`section`,null,[o(`h2`,x,r(t(C)(`ds.heading.usage`)),1),S[0]||=o(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[o(`pre`,{class:`whitespace-pre-wrap`},`<LanguageSwitcher />
|
||||
import{C as e,G as t,c as n,ft as r,j as i,m as a,s as o}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as s}from"./i18n-VERRV-oN.js";import{t as c}from"./LanguageSwitcher-69tpXxhb.js";import{t as l}from"./SectionShell-osccWl4j.js";import{t as u}from"./Card-E6lMGZqd.js";var d={class:`eyebrow mb-5`},f={class:`grid md:grid-cols-3 gap-4`},p={class:`eyebrow mb-4`},m={class:`text-[13px] text-muted mt-4 leading-relaxed`},h={class:`eyebrow mb-4`},g={class:`text-[13px] text-muted mt-4 leading-relaxed`},_={class:`eyebrow mb-4`},v={class:`text-[13px] opacity-80 mt-4 leading-relaxed`},y={class:`eyebrow mb-5`},b={class:`text-[13px] text-muted max-w-2xl leading-relaxed`},x={class:`eyebrow mb-5`},S={__name:`LanguageSwitcherSection`,setup(S){let{t:C}=s();return(s,S)=>(e(),n(l,{eyebrow:t(C)(`ds.eyebrow.components`),title:t(C)(`ds.language.title`),description:t(C)(`ds.language.description`)},{default:i(()=>[o(`section`,null,[o(`h2`,d,r(t(C)(`ds.heading.onDifferentSurfaces`)),1),o(`div`,f,[a(u,{tone:`paper`},{default:i(()=>[o(`p`,p,r(t(C)(`ds.cards.paper`)),1),a(c,{tone:`paper`}),o(`p`,m,r(t(C)(`ds.language.paperNote`)),1)]),_:1}),a(u,{tone:`cream`},{default:i(()=>[o(`p`,h,r(t(C)(`ds.cards.cream`)),1),a(c,{tone:`cream`}),o(`p`,g,r(t(C)(`ds.language.creamNote`)),1)]),_:1}),a(u,{tone:`brand`},{default:i(()=>[o(`p`,_,r(t(C)(`ds.cards.brand`)),1),a(c,{tone:`brand`}),o(`p`,v,r(t(C)(`ds.language.brandNote`)),1)]),_:1})])]),o(`section`,null,[o(`h2`,y,r(t(C)(`ds.language.floating`)),1),a(u,{tone:`paper`},{default:i(()=>[o(`p`,b,r(t(C)(`ds.language.floatingNote`)),1)]),_:1})]),o(`section`,null,[o(`h2`,x,r(t(C)(`ds.heading.usage`)),1),S[0]||=o(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[o(`pre`,{class:`whitespace-pre-wrap`},`<LanguageSwitcher />
|
||||
<LanguageSwitcher tone="brand" />
|
||||
<LanguageSwitcher floating />`)],-1)])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{S as default};
|
||||
@@ -1 +1 @@
|
||||
import{B as e,C as t,G as n,S as r,T as i,ft as a,l as o,m as s,o as c,r as l,s as u,u as d,x as f}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{o as p}from"./vue-router-Cyqru1db.js";import{t as m}from"./i18n-D7Ao3GC7.js";import{r as h}from"./products-BqW5PUnm.js";import{c as g,d as _,f as v,p as y,u as b}from"./api-DlB23x7f.js";import{t as x}from"./Navbar-DhReqfWX.js";import{t as S}from"./Footer-C7VVtZ3C.js";import{t as C}from"./CartDrawer-Bmyv2SnQ.js";var w={class:`bg-cream text-ink min-h-svh`},T={class:`mx-auto w-full max-w-3xl px-6 py-14 sm:px-8 sm:py-16 md:px-12 md:py-20 lg:px-16 lg:py-24`},E={class:`flex flex-col gap-3 mb-10 md:mb-14`},D={class:`eyebrow`},O={class:`font-display font-normal leading-[1.05] tracking-tight text-ink text-headline-md`},k={key:0,class:`text-[12px] text-muted`},A={class:`flex flex-col gap-10`},j=[`id`],M={class:`font-display text-xl md:text-2xl font-normal text-brand leading-tight`},N={class:`text-[15px] leading-relaxed text-ink whitespace-pre-line`},P={__name:`LegalPage`,props:{kind:{type:String,required:!0,validator:e=>[`impressum`,`datenschutz`].includes(e)}},setup(P){let F=P,{t:I}=m(),L=y(),R=p(),z=e(!1);function B(){z.value=!1,R.push(`/checkout`)}let V=[{key:`nav.shop`,href:`/shop`},{key:`nav.bundles`,href:`/#bundles`},{key:`nav.revitalization`,href:`/#revitalize`},{key:`nav.about`,href:`/#about`}],H={impressum:[`operator`,`contact`,`register`,`vat`,`authority`,`liability`,`copyright`],datenschutz:[`controller`,`scope`,`legalBasis`,`data`,`cookies`,`analytics`,`payments`,`rights`,`retention`,`contact`]},U=c(()=>H[F.kind].map(e=>({id:e,heading:I(`legal.${F.kind}.section.${e}.heading`),body:I(`legal.${F.kind}.section.${e}.body`)}))),W=c(()=>I(`legal.${F.kind}.updated`));async function G(e){await g(e.id,1),z.value=!0}async function K({productId:e,quantity:t}){await v(e,t)}async function q(e){await _(e)}let J=e(null),Y=null;function X(){let e=J.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 r(()=>{if(b(),X(),typeof ResizeObserver<`u`&&J.value){let e=J.value.$el||J.value;Y=new ResizeObserver(X),Y.observe(e)}window.addEventListener(`resize`,X)}),f(()=>{Y&&Y.disconnect(),typeof window<`u`&&window.removeEventListener(`resize`,X)}),(e,r)=>(t(),d(l,null,[s(x,{ref_key:`navRef`,ref:J,variant:`cream`,layout:`standard`,items:V,"cart-count":n(L).count,products:n(h),onCart:r[0]||=e=>z.value=!0,onSearch:G},null,8,[`cart-count`,`products`]),u(`main`,w,[u(`div`,T,[u(`header`,E,[u(`p`,D,a(n(I)(`legal.${P.kind}.eyebrow`)),1),u(`h1`,O,a(n(I)(`legal.${P.kind}.title`)),1),W.value?(t(),d(`p`,k,a(W.value),1)):o(``,!0)]),u(`article`,A,[(t(!0),d(l,null,i(U.value,e=>(t(),d(`section`,{id:e.id,key:e.id,class:`flex flex-col gap-3`},[u(`h2`,M,a(e.heading),1),u(`p`,N,a(e.body),1)],8,j))),128))])])]),s(S),r[2]||=u(`div`,{"aria-hidden":`true`,class:`md:hidden`,style:{height:`calc(64px + env(safe-area-inset-bottom))`}},null,-1),s(C,{modelValue:z.value,"onUpdate:modelValue":r[1]||=e=>z.value=e,items:n(L).items,subtotal:n(L).subtotal,count:n(L).count,onUpdateQuantity:K,onRemove:q,onCheckout:B},null,8,[`modelValue`,`items`,`subtotal`,`count`])],64))}};export{P as default};
|
||||
import{B as e,C as t,G as n,S as r,T as i,ft as a,l as o,m as s,o as c,r as l,s as u,u as d,x as f}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{o as p}from"./vue-router-Cyqru1db.js";import{t as m}from"./i18n-VERRV-oN.js";import{r as h}from"./products-BqW5PUnm.js";import{c as g,d as _,f as v,p as y,u as b}from"./api-DlB23x7f.js";import{t as x}from"./Navbar-zO_W6yHw.js";import{t as S}from"./Footer-CzQ7Kpca.js";import{t as C}from"./CartDrawer-CHRbKtmc.js";var w={class:`bg-cream text-ink min-h-svh`},T={class:`mx-auto w-full max-w-3xl px-6 py-14 sm:px-8 sm:py-16 md:px-12 md:py-20 lg:px-16 lg:py-24`},E={class:`flex flex-col gap-3 mb-10 md:mb-14`},D={class:`eyebrow`},O={class:`font-display font-normal leading-[1.05] tracking-tight text-ink text-headline-md`},k={key:0,class:`text-[12px] text-muted`},A={class:`flex flex-col gap-10`},j=[`id`],M={class:`font-display text-xl md:text-2xl font-normal text-brand leading-tight`},N={class:`text-[15px] leading-relaxed text-ink whitespace-pre-line`},P={__name:`LegalPage`,props:{kind:{type:String,required:!0,validator:e=>[`impressum`,`datenschutz`].includes(e)}},setup(P){let F=P,{t:I}=m(),L=y(),R=p(),z=e(!1);function B(){z.value=!1,R.push(`/checkout`)}let V=[{key:`nav.shop`,href:`/shop`},{key:`nav.bundles`,href:`/#bundles`},{key:`nav.revitalization`,href:`/#revitalize`},{key:`nav.about`,href:`/#about`}],H={impressum:[`operator`,`contact`,`register`,`vat`,`authority`,`liability`,`copyright`],datenschutz:[`controller`,`scope`,`legalBasis`,`data`,`cookies`,`analytics`,`payments`,`rights`,`retention`,`contact`]},U=c(()=>H[F.kind].map(e=>({id:e,heading:I(`legal.${F.kind}.section.${e}.heading`),body:I(`legal.${F.kind}.section.${e}.body`)}))),W=c(()=>I(`legal.${F.kind}.updated`));async function G(e){await g(e.id,1),z.value=!0}async function K({productId:e,quantity:t}){await v(e,t)}async function q(e){await _(e)}let J=e(null),Y=null;function X(){let e=J.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 r(()=>{if(b(),X(),typeof ResizeObserver<`u`&&J.value){let e=J.value.$el||J.value;Y=new ResizeObserver(X),Y.observe(e)}window.addEventListener(`resize`,X)}),f(()=>{Y&&Y.disconnect(),typeof window<`u`&&window.removeEventListener(`resize`,X)}),(e,r)=>(t(),d(l,null,[s(x,{ref_key:`navRef`,ref:J,variant:`cream`,layout:`standard`,items:V,"cart-count":n(L).count,products:n(h),onCart:r[0]||=e=>z.value=!0,onSearch:G},null,8,[`cart-count`,`products`]),u(`main`,w,[u(`div`,T,[u(`header`,E,[u(`p`,D,a(n(I)(`legal.${P.kind}.eyebrow`)),1),u(`h1`,O,a(n(I)(`legal.${P.kind}.title`)),1),W.value?(t(),d(`p`,k,a(W.value),1)):o(``,!0)]),u(`article`,A,[(t(!0),d(l,null,i(U.value,e=>(t(),d(`section`,{id:e.id,key:e.id,class:`flex flex-col gap-3`},[u(`h2`,M,a(e.heading),1),u(`p`,N,a(e.body),1)],8,j))),128))])])]),s(S),r[2]||=u(`div`,{"aria-hidden":`true`,class:`md:hidden`,style:{height:`calc(64px + env(safe-area-inset-bottom))`}},null,-1),s(C,{modelValue:z.value,"onUpdate:modelValue":r[1]||=e=>z.value=e,items:n(L).items,subtotal:n(L).subtotal,count:n(L).count,onUpdateQuantity:K,onRemove:q,onCheckout:B},null,8,[`modelValue`,`items`,`subtotal`,`count`])],64))}};export{P as default};
|
||||
@@ -1 +1 @@
|
||||
import{B as e,C as t,G as n,S as r,c as i,ft as a,j as o,l as s,m as c,o as l,p as u,r as d,s as f,u as p,x as ee}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{c as te}from"./runtime-dom.esm-bundler-Bg1uJ-W7.js";import{a as ne,o as re,t as ie}from"./vue-router-Cyqru1db.js";import{t as ae}from"./i18n-D7Ao3GC7.js";import{r as oe}from"./products-BqW5PUnm.js";import{c as se,d as ce,f as m,i as h,p as g,r as _}from"./api-DlB23x7f.js";import{t as v}from"./Navbar-DhReqfWX.js";import{t as y}from"./Button-D1Rp2Xe1.js";import{t as b}from"./Footer-C7VVtZ3C.js";import{t as x}from"./CartDrawer-Bmyv2SnQ.js";import{t as S}from"./Input-D0r2DMc-.js";var C={class:`bg-cream text-ink min-h-svh`},w={class:`mx-auto w-full max-w-md px-6 py-14 sm:px-8 sm:py-20 md:py-24`},T={class:`flex flex-col gap-3 mb-8 text-center`},E={class:`eyebrow`},D={class:`font-display font-normal leading-[1.05] tracking-tight text-ink text-headline-md`},O={class:`text-[14px] text-muted`},k={key:1,class:`text-sm text-danger`,role:`alert`,"aria-live":`polite`},A={key:1,class:`rounded-md border border-line bg-paper p-6 md:p-8 flex flex-col gap-3 text-center`},j={class:`font-display text-xl text-brand`},M={class:`text-[14px] text-muted`},N={class:`mt-8 text-center text-[14px] text-muted`},P={__name:`LoginPage`,setup(P){let{t:F}=ae(),I=g(),L=ne(),R=re(),z=e(!1);function B(){z.value=!1,R.push(`/checkout`)}async function V(e){await se(e.id,1),z.value=!0}async function H({productId:e,quantity:t}){await m(e,t)}async function U(e){await ce(e)}let W=[{key:`nav.shop`,href:`/shop`},{key:`nav.bundles`,href:`/#bundles`},{key:`nav.revitalization`,href:`/#revitalize`},{key:`nav.about`,href:`/#about`}],G=e(``),K=e(``),q=e(!1),J=e(``),Y=e(!1),X=e(!1),le=l(()=>G.value?Y.value?!1:K.value.length<8:!0);async function ue(){J.value=``,q.value=!0;try{if(Y.value){await _({email:G.value}),X.value=!0;return}await h({email:G.value,password:K.value});let e=String(L.query.next||`/`);R.push(e)}catch(e){J.value=e?.message||F(`checkout.error.generic`)}finally{q.value=!1}}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 r(()=>{if($(),typeof ResizeObserver<`u`&&Z.value){let e=Z.value.$el||Z.value;Q=new ResizeObserver($),Q.observe(e)}window.addEventListener(`resize`,$)}),ee(()=>{Q&&Q.disconnect(),typeof window<`u`&&window.removeEventListener(`resize`,$)}),(e,r)=>(t(),p(d,null,[c(v,{ref_key:`navRef`,ref:Z,variant:`cream`,layout:`standard`,items:W,"cart-count":n(I).count,products:n(oe),onCart:r[0]||=e=>z.value=!0,onSearch:V},null,8,[`cart-count`,`products`]),f(`main`,C,[f(`div`,w,[f(`header`,T,[f(`p`,E,a(n(F)(`auth.login.eyebrow`)),1),f(`h1`,D,a(Y.value?n(F)(`auth.reset.title`):n(F)(`auth.login.title`)),1),f(`p`,O,a(Y.value?n(F)(`auth.reset.sub`):n(F)(`auth.login.sub`)),1)]),X.value?(t(),p(`div`,A,[f(`h2`,j,a(n(F)(`auth.reset.sent.title`)),1),f(`p`,M,a(n(F)(`auth.reset.sent.body`)),1),f(`button`,{type:`button`,class:`text-[13px] text-brand hover:underline self-center mt-2`,onClick:r[4]||=e=>{Y.value=!1,X.value=!1}},a(n(F)(`auth.reset.back`)),1)])):(t(),p(`form`,{key:0,class:`flex flex-col gap-5 rounded-md border border-line bg-paper p-6 md:p-8`,novalidate:``,onSubmit:te(ue,[`prevent`])},[c(S,{modelValue:G.value,"onUpdate:modelValue":r[1]||=e=>G.value=e,label:n(F)(`checkout.field.email`),type:`email`,required:``,placeholder:n(F)(`checkout.placeholder.email`)},null,8,[`modelValue`,`label`,`placeholder`]),Y.value?s(``,!0):(t(),i(S,{key:0,modelValue:K.value,"onUpdate:modelValue":r[2]||=e=>K.value=e,label:n(F)(`checkout.field.password`),type:`password`,required:``},null,8,[`modelValue`,`label`])),J.value?(t(),p(`p`,k,a(J.value),1)):s(``,!0),c(y,{type:`submit`,variant:`primary`,size:`lg`,block:``,loading:q.value,disabled:le.value},{default:o(()=>[u(a(Y.value?n(F)(`auth.reset.cta`):n(F)(`auth.login.cta`)),1)]),_:1},8,[`loading`,`disabled`]),f(`button`,{type:`button`,class:`text-[13px] text-brand hover:underline self-start`,onClick:r[3]||=e=>Y.value=!Y.value},a(Y.value?n(F)(`auth.reset.back`):n(F)(`auth.login.forgot`)),1)],32)),f(`p`,N,[u(a(n(F)(`auth.login.newCustomer`))+` `,1),c(n(ie),{to:`/register`,class:`text-brand hover:underline`},{default:o(()=>[u(a(n(F)(`auth.login.cta.register`)),1)]),_:1})])])]),c(b),c(x,{modelValue:z.value,"onUpdate:modelValue":r[5]||=e=>z.value=e,items:n(I).items,subtotal:n(I).subtotal,count:n(I).count,onUpdateQuantity:H,onRemove:U,onCheckout:B},null,8,[`modelValue`,`items`,`subtotal`,`count`])],64))}};export{P as default};
|
||||
import{B as e,C as t,G as n,S as r,c as i,ft as a,j as o,l as s,m as c,o as l,p as u,r as d,s as f,u as p,x as ee}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{s as te}from"./runtime-dom.esm-bundler-CXLmyuFK.js";import{a as ne,o as re,t as ie}from"./vue-router-Cyqru1db.js";import{t as ae}from"./i18n-VERRV-oN.js";import{r as oe}from"./products-BqW5PUnm.js";import{c as se,d as ce,f as m,i as h,p as g,r as _}from"./api-DlB23x7f.js";import{t as v}from"./Navbar-zO_W6yHw.js";import{t as y}from"./Button-D1Rp2Xe1.js";import{t as b}from"./Footer-CzQ7Kpca.js";import{t as x}from"./CartDrawer-CHRbKtmc.js";import{t as S}from"./Input-D0r2DMc-.js";var C={class:`bg-cream text-ink min-h-svh`},w={class:`mx-auto w-full max-w-md px-6 py-14 sm:px-8 sm:py-20 md:py-24`},T={class:`flex flex-col gap-3 mb-8 text-center`},E={class:`eyebrow`},D={class:`font-display font-normal leading-[1.05] tracking-tight text-ink text-headline-md`},O={class:`text-[14px] text-muted`},k={key:1,class:`text-sm text-danger`,role:`alert`,"aria-live":`polite`},A={key:1,class:`rounded-md border border-line bg-paper p-6 md:p-8 flex flex-col gap-3 text-center`},j={class:`font-display text-xl text-brand`},M={class:`text-[14px] text-muted`},N={class:`mt-8 text-center text-[14px] text-muted`},P={__name:`LoginPage`,setup(P){let{t:F}=ae(),I=g(),L=ne(),R=re(),z=e(!1);function B(){z.value=!1,R.push(`/checkout`)}async function V(e){await se(e.id,1),z.value=!0}async function H({productId:e,quantity:t}){await m(e,t)}async function U(e){await ce(e)}let W=[{key:`nav.shop`,href:`/shop`},{key:`nav.bundles`,href:`/#bundles`},{key:`nav.revitalization`,href:`/#revitalize`},{key:`nav.about`,href:`/#about`}],G=e(``),K=e(``),q=e(!1),J=e(``),Y=e(!1),X=e(!1),le=l(()=>G.value?Y.value?!1:K.value.length<8:!0);async function ue(){J.value=``,q.value=!0;try{if(Y.value){await _({email:G.value}),X.value=!0;return}await h({email:G.value,password:K.value});let e=String(L.query.next||`/`);R.push(e)}catch(e){J.value=e?.message||F(`checkout.error.generic`)}finally{q.value=!1}}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 r(()=>{if($(),typeof ResizeObserver<`u`&&Z.value){let e=Z.value.$el||Z.value;Q=new ResizeObserver($),Q.observe(e)}window.addEventListener(`resize`,$)}),ee(()=>{Q&&Q.disconnect(),typeof window<`u`&&window.removeEventListener(`resize`,$)}),(e,r)=>(t(),p(d,null,[c(v,{ref_key:`navRef`,ref:Z,variant:`cream`,layout:`standard`,items:W,"cart-count":n(I).count,products:n(oe),onCart:r[0]||=e=>z.value=!0,onSearch:V},null,8,[`cart-count`,`products`]),f(`main`,C,[f(`div`,w,[f(`header`,T,[f(`p`,E,a(n(F)(`auth.login.eyebrow`)),1),f(`h1`,D,a(Y.value?n(F)(`auth.reset.title`):n(F)(`auth.login.title`)),1),f(`p`,O,a(Y.value?n(F)(`auth.reset.sub`):n(F)(`auth.login.sub`)),1)]),X.value?(t(),p(`div`,A,[f(`h2`,j,a(n(F)(`auth.reset.sent.title`)),1),f(`p`,M,a(n(F)(`auth.reset.sent.body`)),1),f(`button`,{type:`button`,class:`text-[13px] text-brand hover:underline self-center mt-2`,onClick:r[4]||=e=>{Y.value=!1,X.value=!1}},a(n(F)(`auth.reset.back`)),1)])):(t(),p(`form`,{key:0,class:`flex flex-col gap-5 rounded-md border border-line bg-paper p-6 md:p-8`,novalidate:``,onSubmit:te(ue,[`prevent`])},[c(S,{modelValue:G.value,"onUpdate:modelValue":r[1]||=e=>G.value=e,label:n(F)(`checkout.field.email`),type:`email`,required:``,placeholder:n(F)(`checkout.placeholder.email`)},null,8,[`modelValue`,`label`,`placeholder`]),Y.value?s(``,!0):(t(),i(S,{key:0,modelValue:K.value,"onUpdate:modelValue":r[2]||=e=>K.value=e,label:n(F)(`checkout.field.password`),type:`password`,required:``},null,8,[`modelValue`,`label`])),J.value?(t(),p(`p`,k,a(J.value),1)):s(``,!0),c(y,{type:`submit`,variant:`primary`,size:`lg`,block:``,loading:q.value,disabled:le.value},{default:o(()=>[u(a(Y.value?n(F)(`auth.reset.cta`):n(F)(`auth.login.cta`)),1)]),_:1},8,[`loading`,`disabled`]),f(`button`,{type:`button`,class:`text-[13px] text-brand hover:underline self-start`,onClick:r[3]||=e=>Y.value=!Y.value},a(Y.value?n(F)(`auth.reset.back`):n(F)(`auth.login.forgot`)),1)],32)),f(`p`,N,[u(a(n(F)(`auth.login.newCustomer`))+` `,1),c(n(ie),{to:`/register`,class:`text-brand hover:underline`},{default:o(()=>[u(a(n(F)(`auth.login.cta.register`)),1)]),_:1})])])]),c(b),c(x,{modelValue:z.value,"onUpdate:modelValue":r[5]||=e=>z.value=e,items:n(I).items,subtotal:n(I).subtotal,count:n(I).count,onUpdateQuantity:H,onRemove:U,onCheckout:B},null,8,[`modelValue`,`items`,`subtotal`,`count`])],64))}};export{P as default};
|
||||
@@ -1 +1 @@
|
||||
import{C as e,G as t,c as n,ft as r,j as i,m as a,s as o}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as s}from"./Logo-xADhl1RY.js";import{t as c}from"./i18n-D7Ao3GC7.js";import{t as l}from"./SectionShell-osccWl4j.js";var u={class:`eyebrow mb-5`},d={class:`grid md:grid-cols-3 gap-4`},f={class:`rounded-md border border-line bg-paper p-10 flex flex-col items-center gap-4`},p={class:`font-mono text-[11px] text-muted`},m={class:`rounded-md border border-line bg-cream p-10 flex flex-col items-center gap-4`},h={class:`font-mono text-[11px] text-muted`},g={class:`rounded-md bg-brand p-10 flex flex-col items-center gap-4`},_={class:`font-mono text-[11px] text-cream opacity-70`},v={class:`eyebrow mb-5`},y={class:`rounded-md border border-line bg-paper p-10 flex items-end gap-10 flex-wrap`},b={class:`flex flex-col items-center gap-3`},x={class:`flex flex-col items-center gap-3`},S={class:`flex flex-col items-center gap-3`},C={class:`eyebrow mb-5`},w={class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},T={class:`mb-2 text-muted`},E={__name:`LogoSection`,setup(E){let{t:D}=c();return(c,E)=>(e(),n(l,{eyebrow:t(D)(`ds.eyebrow.brand`),title:t(D)(`ds.logo.title`),description:t(D)(`ds.logo.description`)},{default:i(()=>[o(`section`,null,[o(`h2`,u,r(t(D)(`ds.heading.onDifferentSurfaces`)),1),o(`div`,d,[o(`div`,f,[a(s,{class:`w-40 h-auto text-brand`}),o(`code`,p,r(t(D)(`ds.cards.paper`)),1)]),o(`div`,m,[a(s,{class:`w-40 h-auto text-brand`}),o(`code`,h,r(t(D)(`ds.cards.cream`)),1)]),o(`div`,g,[a(s,{class:`w-40 h-auto text-paper`}),o(`code`,_,r(t(D)(`ds.cards.brand`)),1)])])]),o(`section`,null,[o(`h2`,v,r(t(D)(`ds.heading.sizes`)),1),o(`div`,y,[o(`div`,b,[a(s,{class:`w-16 h-auto text-brand`}),E[0]||=o(`code`,{class:`font-mono text-[11px] text-muted`},`w-16`,-1)]),o(`div`,x,[a(s,{class:`w-32 h-auto text-brand`}),E[1]||=o(`code`,{class:`font-mono text-[11px] text-muted`},`w-32`,-1)]),o(`div`,S,[a(s,{class:`w-60 h-auto text-brand`}),E[2]||=o(`code`,{class:`font-mono text-[11px] text-muted`},`w-60`,-1)])])]),o(`section`,null,[o(`h2`,C,r(t(D)(`ds.heading.usage`)),1),o(`div`,w,[o(`p`,T,r(t(D)(`ds.logo.usageIntro`)),1),E[3]||=o(`pre`,{class:`whitespace-pre-wrap`},`<Logo class="w-60 h-auto text-brand" />`,-1)])])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{E as default};
|
||||
import{C as e,G as t,c as n,ft as r,j as i,m as a,s as o}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as s}from"./Logo-K2VN1F6l.js";import{t as c}from"./i18n-VERRV-oN.js";import{t as l}from"./SectionShell-osccWl4j.js";var u={class:`eyebrow mb-5`},d={class:`grid md:grid-cols-3 gap-4`},f={class:`rounded-md border border-line bg-paper p-10 flex flex-col items-center gap-4`},p={class:`font-mono text-[11px] text-muted`},m={class:`rounded-md border border-line bg-cream p-10 flex flex-col items-center gap-4`},h={class:`font-mono text-[11px] text-muted`},g={class:`rounded-md bg-brand p-10 flex flex-col items-center gap-4`},_={class:`font-mono text-[11px] text-cream opacity-70`},v={class:`eyebrow mb-5`},y={class:`rounded-md border border-line bg-paper p-10 flex items-end gap-10 flex-wrap`},b={class:`flex flex-col items-center gap-3`},x={class:`flex flex-col items-center gap-3`},S={class:`flex flex-col items-center gap-3`},C={class:`eyebrow mb-5`},w={class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},T={class:`mb-2 text-muted`},E={__name:`LogoSection`,setup(E){let{t:D}=c();return(c,E)=>(e(),n(l,{eyebrow:t(D)(`ds.eyebrow.brand`),title:t(D)(`ds.logo.title`),description:t(D)(`ds.logo.description`)},{default:i(()=>[o(`section`,null,[o(`h2`,u,r(t(D)(`ds.heading.onDifferentSurfaces`)),1),o(`div`,d,[o(`div`,f,[a(s,{class:`w-40 h-auto text-brand`}),o(`code`,p,r(t(D)(`ds.cards.paper`)),1)]),o(`div`,m,[a(s,{class:`w-40 h-auto text-brand`}),o(`code`,h,r(t(D)(`ds.cards.cream`)),1)]),o(`div`,g,[a(s,{class:`w-40 h-auto text-paper`}),o(`code`,_,r(t(D)(`ds.cards.brand`)),1)])])]),o(`section`,null,[o(`h2`,v,r(t(D)(`ds.heading.sizes`)),1),o(`div`,y,[o(`div`,b,[a(s,{class:`w-16 h-auto text-brand`}),E[0]||=o(`code`,{class:`font-mono text-[11px] text-muted`},`w-16`,-1)]),o(`div`,x,[a(s,{class:`w-32 h-auto text-brand`}),E[1]||=o(`code`,{class:`font-mono text-[11px] text-muted`},`w-32`,-1)]),o(`div`,S,[a(s,{class:`w-60 h-auto text-brand`}),E[2]||=o(`code`,{class:`font-mono text-[11px] text-muted`},`w-60`,-1)])])]),o(`section`,null,[o(`h2`,C,r(t(D)(`ds.heading.usage`)),1),o(`div`,w,[o(`p`,T,r(t(D)(`ds.logo.usageIntro`)),1),E[3]||=o(`pre`,{class:`whitespace-pre-wrap`},`<Logo class="w-60 h-auto text-brand" />`,-1)])])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{E as default};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
|
||||
import{C as e,T as t,dt as n,m as r,o as i,r as a,s as o,u as s}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{a as c}from"./vue-router-Cyqru1db.js";import{t as l}from"./Navbar-DhReqfWX.js";var u={class:`min-h-screen bg-surface`},d={class:`max-w-5xl mx-auto px-6 py-16 space-y-6`},f={__name:`NavbarPreview`,setup(f){let p=c(),m=i(()=>{let e=p.query.variant;return[`paper`,`cream`,`brand`].includes(e)?e:`paper`}),h=i(()=>p.query.layout===`floating`?`floating`:`standard`);return(i,c)=>(e(),s(`div`,u,[r(l,{variant:m.value,layout:h.value,"cart-count":2},null,8,[`variant`,`layout`]),o(`div`,d,[(e(),s(a,null,t([40,28,40,32,40,28,36,40],e=>o(`div`,{key:e,class:`rounded-md border border-line bg-paper`,style:n({height:e*4+`px`})},null,4)),64))])]))}};export{f as default};
|
||||
import{C as e,T as t,dt as n,m as r,o as i,r as a,s as o,u as s}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{a as c}from"./vue-router-Cyqru1db.js";import{t as l}from"./Navbar-zO_W6yHw.js";var u={class:`min-h-screen bg-surface`},d={class:`max-w-5xl mx-auto px-6 py-16 space-y-6`},f={__name:`NavbarPreview`,setup(f){let p=c(),m=i(()=>{let e=p.query.variant;return[`paper`,`cream`,`brand`].includes(e)?e:`paper`}),h=i(()=>p.query.layout===`floating`?`floating`:`standard`);return(i,c)=>(e(),s(`div`,u,[r(l,{variant:m.value,layout:h.value,"cart-count":2},null,8,[`variant`,`layout`]),o(`div`,d,[(e(),s(a,null,t([40,28,40,32,40,28,36,40],e=>o(`div`,{key:e,class:`rounded-md border border-line bg-paper`,style:n({height:e*4+`px`})},null,4)),64))])]))}};export{f as default};
|
||||
@@ -1,4 +1,4 @@
|
||||
import{B as e,C as t,G as n,T as r,c as i,dt as a,ft as o,j as s,m as c,o as l,p as u,r as d,s as f,u as p,ut as m}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as h}from"./i18n-D7Ao3GC7.js";import{t as g}from"./SectionShell-osccWl4j.js";import{t as _}from"./DevicePreview-DrPoWfT3.js";var v=[`aria-label`],y=[`aria-selected`,`onClick`],b=[`aria-label`],x=[`aria-selected`,`onClick`],S={class:`eyebrow mb-5`},C={__name:`NavbarSection`,setup(C){let{t:w}=h(),T=l(()=>[{id:`paper`,label:w(`ds.navbar.tone.paper`),swatch:`#ffffff`},{id:`cream`,label:w(`ds.navbar.tone.cream`),swatch:`var(--color-cream)`},{id:`brand`,label:w(`ds.navbar.tone.brand`),swatch:`var(--color-brand)`}]),E=l(()=>[{id:`standard`,label:w(`ds.navbar.layout.standard`)},{id:`floating`,label:w(`ds.navbar.layout.floating`)}]),D=e(`paper`),O=e(`standard`),k=l(()=>`/design/preview/navbar?variant=${D.value}&layout=${O.value}`);return(e,l)=>(t(),i(g,{eyebrow:n(w)(`ds.eyebrow.components`),title:n(w)(`ds.navbar.title`),description:n(w)(`ds.navbar.description`),wide:``},{default:s(()=>[f(`section`,null,[c(_,{src:k.value,initial:`mobile`,height:720},{controls:s(()=>[f(`div`,{role:`tablist`,"aria-label":n(w)(`ds.navbar.layout`),class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper`},[(t(!0),p(d,null,r(E.value,e=>(t(),p(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":O.value===e.id,class:m([`px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,O.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>O.value=e.id},o(e.label),11,y))),128))],8,v),f(`div`,{role:`tablist`,"aria-label":n(w)(`ds.navbar.tone`),class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper`},[(t(!0),p(d,null,r(T.value,e=>(t(),p(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":D.value===e.id,class:m([`inline-flex items-center gap-2 px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,D.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>D.value=e.id},[f(`span`,{class:`w-2.5 h-2.5 rounded-full border border-line-strong`,style:a({backgroundColor:e.swatch})},null,4),u(` `+o(e.label),1)],10,x))),128))],8,b)]),_:1},8,[`src`])]),f(`section`,null,[f(`h2`,S,o(n(w)(`ds.heading.usage`)),1),l[0]||=f(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[f(`pre`,{class:`whitespace-pre-wrap`},`<Navbar
|
||||
import{B as e,C as t,G as n,T as r,c as i,dt as a,ft as o,j as s,m as c,o as l,p as u,r as d,s as f,u as p,ut as m}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as h}from"./i18n-VERRV-oN.js";import{t as g}from"./SectionShell-osccWl4j.js";import{t as _}from"./DevicePreview-m3tD-qdR.js";var v=[`aria-label`],y=[`aria-selected`,`onClick`],b=[`aria-label`],x=[`aria-selected`,`onClick`],S={class:`eyebrow mb-5`},C={__name:`NavbarSection`,setup(C){let{t:w}=h(),T=l(()=>[{id:`paper`,label:w(`ds.navbar.tone.paper`),swatch:`#ffffff`},{id:`cream`,label:w(`ds.navbar.tone.cream`),swatch:`var(--color-cream)`},{id:`brand`,label:w(`ds.navbar.tone.brand`),swatch:`var(--color-brand)`}]),E=l(()=>[{id:`standard`,label:w(`ds.navbar.layout.standard`)},{id:`floating`,label:w(`ds.navbar.layout.floating`)}]),D=e(`paper`),O=e(`standard`),k=l(()=>`/design/preview/navbar?variant=${D.value}&layout=${O.value}`);return(e,l)=>(t(),i(g,{eyebrow:n(w)(`ds.eyebrow.components`),title:n(w)(`ds.navbar.title`),description:n(w)(`ds.navbar.description`),wide:``},{default:s(()=>[f(`section`,null,[c(_,{src:k.value,initial:`mobile`,height:720},{controls:s(()=>[f(`div`,{role:`tablist`,"aria-label":n(w)(`ds.navbar.layout`),class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper`},[(t(!0),p(d,null,r(E.value,e=>(t(),p(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":O.value===e.id,class:m([`px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,O.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>O.value=e.id},o(e.label),11,y))),128))],8,v),f(`div`,{role:`tablist`,"aria-label":n(w)(`ds.navbar.tone`),class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper`},[(t(!0),p(d,null,r(T.value,e=>(t(),p(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":D.value===e.id,class:m([`inline-flex items-center gap-2 px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,D.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>D.value=e.id},[f(`span`,{class:`w-2.5 h-2.5 rounded-full border border-line-strong`,style:a({backgroundColor:e.swatch})},null,4),u(` `+o(e.label),1)],10,x))),128))],8,b)]),_:1},8,[`src`])]),f(`section`,null,[f(`h2`,S,o(n(w)(`ds.heading.usage`)),1),l[0]||=f(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[f(`pre`,{class:`whitespace-pre-wrap`},`<Navbar
|
||||
variant="paper"
|
||||
layout="floating"
|
||||
:items="[{ key: 'nav.shop', href: '/shop' }]"
|
||||
File diff suppressed because one or more lines are too long
1
dist/assets/ProductCard-BYmMLcA9.js
vendored
Normal file
1
dist/assets/ProductCard-BYmMLcA9.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
import{C as e,G as t,O as n,c as r,ft as i,j as a,l as o,m as s,o as c,p as l,s as u,u as d,ut as f}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as p}from"./vue-router-Cyqru1db.js";import{t as m}from"./Icon-BCo6-bGH.js";import{t as h}from"./i18n-VERRV-oN.js";import{t as g}from"./Badge-DiccZCC_.js";import{t as _}from"./Button-D1Rp2Xe1.js";var v=[`src`,`alt`],y=[`src`,`alt`],b={class:`flex flex-col gap-3 p-6`},x={class:`flex flex-col gap-1`},S={class:`text-sm text-muted tracking-label min-h-[1lh]`},C={class:`mt-auto flex items-center justify-between gap-3 pt-2`},w={class:`font-display text-2xl font-normal text-brand`},T={key:0,class:`text-xs font-semibold tracking-label uppercase text-danger`},E={__name:`ProductCard`,props:{title:{type:String,required:!0},size:{type:String,default:``},price:{type:[String,Number],required:!0},currency:{type:String,default:`€`},image:{type:String,required:!0},imageAlt:{type:String,default:``},badge:{type:String,default:``},badgeVariant:{type:String,default:`accent`,validator:e=>[`neutral`,`brand`,`accent`,`subtle`,`success`,`warning`,`danger`].includes(e)},tone:{type:String,default:`paper`,validator:e=>[`paper`,`cream`,`brand`].includes(e)},inStock:{type:Boolean,default:!0},href:{type:String,default:``},ctaVariant:{type:String,default:`primary`}},emits:[`add`],setup(E){function D(e){return typeof e==`string`&&e.startsWith(`/`)&&!e.startsWith(`//`)}let O=E,{t:k}=h(),A={paper:{surface:`bg-paper`,media:`bg-paper`,border:`border-line`},cream:{surface:`bg-paper`,media:`bg-cream`,border:`border-line`},brand:{surface:`bg-paper`,media:`bg-brand`,border:`border-line`}},j=c(()=>A[O.tone]),M=c(()=>typeof O.price==`number`?`${O.currency} ${O.price.toFixed(2).replace(`.`,`,`)}`:`${O.currency} ${O.price}`);return(c,h)=>(e(),d(`article`,{class:f([`group flex flex-col overflow-hidden rounded-md border transition-all duration-base ease-out`,j.value.surface,j.value.border,`hover:-translate-y-1 hover:shadow-md hover:border-brand-soft`])},[E.href&&D(E.href)?(e(),r(t(p),{key:0,to:E.href,class:f([`relative flex items-center justify-center h-40 md:h-48 overflow-hidden`,j.value.media])},{default:a(()=>[E.badge?(e(),r(g,{key:0,variant:E.badgeVariant,class:`absolute top-4 left-4 z-[1]`},{default:a(()=>[l(i(E.badge),1)]),_:1},8,[`variant`])):o(``,!0),u(`img`,{src:E.image,alt:E.imageAlt||E.title,loading:`lazy`,decoding:`async`,class:`max-w-[55%] max-h-[80%] object-contain transition-transform duration-slow ease-out group-hover:scale-105`},null,8,v)]),_:1},8,[`to`,`class`])):(e(),r(n(E.href?`a`:`div`),{key:1,href:E.href||null,class:f([`relative flex items-center justify-center h-40 md:h-48 overflow-hidden`,j.value.media])},{default:a(()=>[E.badge?(e(),r(g,{key:0,variant:E.badgeVariant,class:`absolute top-4 left-4 z-[1]`},{default:a(()=>[l(i(E.badge),1)]),_:1},8,[`variant`])):o(``,!0),u(`img`,{src:E.image,alt:E.imageAlt||E.title,loading:`lazy`,decoding:`async`,class:`max-w-[55%] max-h-[80%] object-contain transition-transform duration-slow ease-out group-hover:scale-105`},null,8,y)]),_:1},8,[`href`,`class`])),u(`div`,b,[u(`div`,x,[E.href&&D(E.href)?(e(),r(t(p),{key:0,to:E.href,class:f([`font-display text-xl font-normal leading-tight text-ink min-h-[2lh]`,`hover:text-brand transition-colors duration-base`])},{default:a(()=>[l(i(E.title),1)]),_:1},8,[`to`])):(e(),r(n(E.href?`a`:`h3`),{key:1,href:E.href||null,class:f([`font-display text-xl font-normal leading-tight text-ink min-h-[2lh]`,E.href?`hover:text-brand transition-colors duration-base`:``])},{default:a(()=>[l(i(E.title),1)]),_:1},8,[`href`,`class`])),u(`p`,S,i(E.size||`\xA0`),1)]),u(`div`,C,[u(`span`,w,i(M.value),1),E.inStock?o(``,!0):(e(),d(`span`,T,i(t(k)(`ds.product.outOfStock`)),1))]),s(_,{variant:E.ctaVariant,size:`md`,block:``,disabled:!E.inStock,onClick:h[0]||=e=>c.$emit(`add`)},{before:a(()=>[s(m,{name:`plus`,size:16})]),default:a(()=>[l(` `+i(t(k)(`ds.buttons.addToCart`)),1)]),_:1},8,[`variant`,`disabled`])])],2))}};export{E as t};
|
||||
1
dist/assets/ProductCard-CoLSt6Am.js
vendored
1
dist/assets/ProductCard-CoLSt6Am.js
vendored
@@ -1 +0,0 @@
|
||||
import{C as e,G as t,O as n,c as r,ft as i,j as a,l as o,m as s,o as c,p as l,s as u,u as d,ut as f}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as p}from"./vue-router-Cyqru1db.js";import{t as m}from"./Icon-Dcq1PyHo.js";import{t as h}from"./i18n-D7Ao3GC7.js";import{t as g}from"./Badge-Bu_yseK_.js";import{t as _}from"./Button-D1Rp2Xe1.js";var v=[`src`,`alt`],y=[`src`,`alt`],b={class:`flex flex-col gap-3 p-6`},x={class:`flex flex-col gap-1`},S={class:`text-sm text-muted tracking-label min-h-[1lh]`},C={class:`mt-auto flex items-center justify-between gap-3 pt-2`},w={class:`font-display text-2xl font-normal text-brand`},T={key:0,class:`text-xs font-semibold tracking-label uppercase text-danger`},E={__name:`ProductCard`,props:{title:{type:String,required:!0},size:{type:String,default:``},price:{type:[String,Number],required:!0},currency:{type:String,default:`€`},image:{type:String,required:!0},imageAlt:{type:String,default:``},badge:{type:String,default:``},badgeVariant:{type:String,default:`accent`,validator:e=>[`neutral`,`brand`,`accent`,`subtle`,`success`,`warning`,`danger`].includes(e)},tone:{type:String,default:`paper`,validator:e=>[`paper`,`cream`].includes(e)},inStock:{type:Boolean,default:!0},href:{type:String,default:``},ctaVariant:{type:String,default:`primary`}},emits:[`add`],setup(E){function D(e){return typeof e==`string`&&e.startsWith(`/`)&&!e.startsWith(`//`)}let O=E,{t:k}=h(),A={paper:{surface:`bg-paper`,media:`bg-paper`,border:`border-line`},cream:{surface:`bg-cream`,media:`bg-paper`,border:`border-line`}},j=c(()=>A[O.tone]),M=c(()=>typeof O.price==`number`?`${O.currency} ${O.price.toFixed(2).replace(`.`,`,`)}`:`${O.currency} ${O.price}`);return(c,h)=>(e(),d(`article`,{class:f([`group flex flex-col overflow-hidden rounded-md border transition-all duration-base ease-out`,j.value.surface,j.value.border,`hover:-translate-y-1 hover:shadow-md hover:border-brand-soft`])},[E.href&&D(E.href)?(e(),r(t(p),{key:0,to:E.href,class:f([`relative flex items-center justify-center h-40 md:h-48 overflow-hidden`,j.value.media])},{default:a(()=>[E.badge?(e(),r(g,{key:0,variant:E.badgeVariant,class:`absolute top-4 left-4 z-[1]`},{default:a(()=>[l(i(E.badge),1)]),_:1},8,[`variant`])):o(``,!0),u(`img`,{src:E.image,alt:E.imageAlt||E.title,loading:`lazy`,decoding:`async`,class:`max-w-[55%] max-h-[80%] object-contain transition-transform duration-slow ease-out group-hover:scale-105`},null,8,v)]),_:1},8,[`to`,`class`])):(e(),r(n(E.href?`a`:`div`),{key:1,href:E.href||null,class:f([`relative flex items-center justify-center h-40 md:h-48 overflow-hidden`,j.value.media])},{default:a(()=>[E.badge?(e(),r(g,{key:0,variant:E.badgeVariant,class:`absolute top-4 left-4 z-[1]`},{default:a(()=>[l(i(E.badge),1)]),_:1},8,[`variant`])):o(``,!0),u(`img`,{src:E.image,alt:E.imageAlt||E.title,loading:`lazy`,decoding:`async`,class:`max-w-[55%] max-h-[80%] object-contain transition-transform duration-slow ease-out group-hover:scale-105`},null,8,y)]),_:1},8,[`href`,`class`])),u(`div`,b,[u(`div`,x,[E.href&&D(E.href)?(e(),r(t(p),{key:0,to:E.href,class:f([`font-display text-xl font-normal leading-tight text-ink min-h-[2lh]`,`hover:text-brand transition-colors duration-base`])},{default:a(()=>[l(i(E.title),1)]),_:1},8,[`to`])):(e(),r(n(E.href?`a`:`h3`),{key:1,href:E.href||null,class:f([`font-display text-xl font-normal leading-tight text-ink min-h-[2lh]`,E.href?`hover:text-brand transition-colors duration-base`:``])},{default:a(()=>[l(i(E.title),1)]),_:1},8,[`href`,`class`])),u(`p`,S,i(E.size||`\xA0`),1)]),u(`div`,C,[u(`span`,w,i(M.value),1),E.inStock?o(``,!0):(e(),d(`span`,T,i(t(k)(`ds.product.outOfStock`)),1))]),s(_,{variant:E.ctaVariant,size:`md`,block:``,disabled:!E.inStock,onClick:h[0]||=e=>c.$emit(`add`)},{before:a(()=>[s(m,{name:`plus`,size:16})]),default:a(()=>[l(` `+i(t(k)(`ds.buttons.addToCart`)),1)]),_:1},8,[`variant`,`disabled`])])],2))}};export{E as t};
|
||||
File diff suppressed because one or more lines are too long
@@ -1,4 +1,4 @@
|
||||
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}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as d}from"./i18n-D7Ao3GC7.js";import{t as f}from"./ProductCard-CoLSt6Am.js";import{t as p}from"./SectionShell-osccWl4j.js";var m={class:`eyebrow mb-5`},h={class:`grid sm:grid-cols-2 lg:grid-cols-3 gap-6`},g={key:0,class:`mt-5 text-sm text-muted`},_={class:`font-mono text-[12px]`},v={class:`eyebrow mb-5`},y={class:`grid sm:grid-cols-2 lg:grid-cols-3 gap-6`},b={class:`eyebrow mb-5`},x=`/products/kaiser-natron-pulver-250-g-grosspackung.webp`,S={__name:`ProductsSection`,setup(S){let{t:C}=d(),w=e(``);function T(e){w.value=e,setTimeout(()=>{w.value===e&&(w.value=``)},2e3)}return(e,d)=>(t(),r(p,{eyebrow:n(C)(`ds.eyebrow.components`),title:n(C)(`ds.product.title`),description:n(C)(`ds.product.description`)},{default:a(()=>[l(`section`,null,[l(`h2`,m,i(n(C)(`ds.heading.default`)),1),l(`div`,h,[s(f,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:x,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,href:`#`,onAdd:d[0]||=e=>T(`pulver-250`)}),s(f,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:x,badge:n(C)(`ds.badges.featured`),"badge-variant":`accent`,href:`#`,onAdd:d[1]||=e=>T(`pulver-250-featured`)},null,8,[`badge`]),s(f,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:x,tone:`cream`,href:`#`,onAdd:d[2]||=e=>T(`pulver-250-cream`)})]),w.value?(t(),u(`p`,g,[c(i(n(C)(`ds.product.added`))+`: `,1),l(`code`,_,i(w.value),1)])):o(``,!0)]),l(`section`,null,[l(`h2`,v,i(n(C)(`ds.heading.states`)),1),l(`div`,y,[s(f,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:x,"in-stock":!1}),s(f,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:x,badge:n(C)(`ds.badges.newRelease`),"badge-variant":`brand`,href:`#`},null,8,[`badge`])])]),l(`section`,null,[l(`h2`,b,i(n(C)(`ds.heading.usage`)),1),d[3]||=l(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[l(`pre`,{class:`whitespace-pre-wrap`},`<ProductCard
|
||||
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}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as d}from"./i18n-VERRV-oN.js";import{t as f}from"./ProductCard-BYmMLcA9.js";import{t as p}from"./SectionShell-osccWl4j.js";var m={class:`eyebrow mb-5`},h={class:`grid sm:grid-cols-2 lg:grid-cols-3 gap-6`},g={key:0,class:`mt-5 text-sm text-muted`},_={class:`font-mono text-[12px]`},v={class:`eyebrow mb-5`},y={class:`grid sm:grid-cols-2 lg:grid-cols-3 gap-6`},b={class:`eyebrow mb-5`},x=`/products/kaiser-natron-pulver-250-g-grosspackung.webp`,S={__name:`ProductsSection`,setup(S){let{t:C}=d(),w=e(``);function T(e){w.value=e,setTimeout(()=>{w.value===e&&(w.value=``)},2e3)}return(e,d)=>(t(),r(p,{eyebrow:n(C)(`ds.eyebrow.components`),title:n(C)(`ds.product.title`),description:n(C)(`ds.product.description`)},{default:a(()=>[l(`section`,null,[l(`h2`,m,i(n(C)(`ds.heading.default`)),1),l(`div`,h,[s(f,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:x,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,href:`#`,onAdd:d[0]||=e=>T(`pulver-250`)}),s(f,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:x,badge:n(C)(`ds.badges.featured`),"badge-variant":`accent`,href:`#`,onAdd:d[1]||=e=>T(`pulver-250-featured`)},null,8,[`badge`]),s(f,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:x,tone:`cream`,href:`#`,onAdd:d[2]||=e=>T(`pulver-250-cream`)})]),w.value?(t(),u(`p`,g,[c(i(n(C)(`ds.product.added`))+`: `,1),l(`code`,_,i(w.value),1)])):o(``,!0)]),l(`section`,null,[l(`h2`,v,i(n(C)(`ds.heading.states`)),1),l(`div`,y,[s(f,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:x,"in-stock":!1}),s(f,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:x,badge:n(C)(`ds.badges.newRelease`),"badge-variant":`brand`,href:`#`},null,8,[`badge`])])]),l(`section`,null,[l(`h2`,b,i(n(C)(`ds.heading.usage`)),1),d[3]||=l(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[l(`pre`,{class:`whitespace-pre-wrap`},`<ProductCard
|
||||
title="Kaiser-Natron® Pulver"
|
||||
size="250 g Großpackung"
|
||||
:price="4.49"
|
||||
@@ -1 +1 @@
|
||||
import{C as e,ft as t,m as n,o as r,s as i,u as a,ut as o}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as s}from"./Icon-Dcq1PyHo.js";var c={class:`inline-flex items-center rounded-pill border border-line bg-paper font-sans`},l=[`disabled`,`aria-label`],u=[`disabled`,`aria-label`],d={__name:`QuantityStepper`,props:{modelValue:{type:Number,required:!0},min:{type:Number,default:0},max:{type:Number,default:1/0},disabled:{type:Boolean,default:!1},size:{type:String,default:`md`,validator:e=>[`sm`,`md`].includes(e)},decreaseLabel:{type:String,default:`Decrease`},increaseLabel:{type:String,default:`Increase`}},emits:[`update:modelValue`,`decrease`,`increase`],setup(d,{emit:f}){let p=d,m=f,h={sm:{btn:`w-8 h-8`,icon:14,label:`text-[13px]`},md:{btn:`w-9 h-9`,icon:16,label:`text-[14px]`}},g=r(()=>h[p.size]),_=r(()=>!p.disabled&&p.modelValue>p.min),v=r(()=>!p.disabled&&p.modelValue<p.max);function y(){if(!_.value)return;let e=p.modelValue-1;m(`update:modelValue`,e),m(`decrease`,e)}function b(){if(!v.value)return;let e=p.modelValue+1;m(`update:modelValue`,e),m(`increase`,e)}return(r,f)=>(e(),a(`div`,c,[i(`button`,{type:`button`,class:o([g.value.btn,`inline-flex items-center justify-center rounded-l-pill text-brand transition-colors`,`hover:bg-brand-wash disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent`]),disabled:!_.value,"aria-label":d.decreaseLabel,onClick:y},[n(s,{name:`minus`,size:g.value.icon},null,8,[`size`])],10,l),i(`span`,{class:o([`min-w-[2ch] px-2 font-semibold text-ink tabular-nums text-center`,g.value.label]),"aria-live":`polite`},t(d.modelValue),3),i(`button`,{type:`button`,class:o([g.value.btn,`inline-flex items-center justify-center rounded-r-pill text-brand transition-colors`,`hover:bg-brand-wash disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent`]),disabled:!v.value,"aria-label":d.increaseLabel,onClick:b},[n(s,{name:`plus`,size:g.value.icon},null,8,[`size`])],10,u)]))}};export{d as t};
|
||||
import{C as e,ft as t,m as n,o as r,s as i,u as a,ut as o}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as s}from"./Icon-BCo6-bGH.js";var c={class:`inline-flex items-center rounded-pill border border-line bg-paper font-sans`},l=[`disabled`,`aria-label`],u=[`disabled`,`aria-label`],d={__name:`QuantityStepper`,props:{modelValue:{type:Number,required:!0},min:{type:Number,default:0},max:{type:Number,default:1/0},disabled:{type:Boolean,default:!1},size:{type:String,default:`md`,validator:e=>[`sm`,`md`].includes(e)},decreaseLabel:{type:String,default:`Decrease`},increaseLabel:{type:String,default:`Increase`}},emits:[`update:modelValue`,`decrease`,`increase`],setup(d,{emit:f}){let p=d,m=f,h={sm:{btn:`w-8 h-8`,icon:14,label:`text-[13px]`},md:{btn:`w-9 h-9`,icon:16,label:`text-[14px]`}},g=r(()=>h[p.size]),_=r(()=>!p.disabled&&p.modelValue>p.min),v=r(()=>!p.disabled&&p.modelValue<p.max);function y(){if(!_.value)return;let e=p.modelValue-1;m(`update:modelValue`,e),m(`decrease`,e)}function b(){if(!v.value)return;let e=p.modelValue+1;m(`update:modelValue`,e),m(`increase`,e)}return(r,f)=>(e(),a(`div`,c,[i(`button`,{type:`button`,class:o([g.value.btn,`inline-flex items-center justify-center rounded-l-pill text-brand transition-colors`,`hover:bg-brand-wash disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent`]),disabled:!_.value,"aria-label":d.decreaseLabel,onClick:y},[n(s,{name:`minus`,size:g.value.icon},null,8,[`size`])],10,l),i(`span`,{class:o([`min-w-[2ch] px-2 font-semibold text-ink tabular-nums text-center`,g.value.label]),"aria-live":`polite`},t(d.modelValue),3),i(`button`,{type:`button`,class:o([g.value.btn,`inline-flex items-center justify-center rounded-r-pill text-brand transition-colors`,`hover:bg-brand-wash disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent`]),disabled:!v.value,"aria-label":d.increaseLabel,onClick:b},[n(s,{name:`plus`,size:g.value.icon},null,8,[`size`])],10,u)]))}};export{d as t};
|
||||
@@ -1,4 +1,4 @@
|
||||
import{B as e,C as t,G as n,c as r,ft as i,j as a,m as o,s}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as c}from"./i18n-D7Ao3GC7.js";import{t as l}from"./QuantityStepper-DEp73rTJ.js";import{t as u}from"./SectionShell-osccWl4j.js";var d={class:`eyebrow mb-5`},f={class:`flex flex-wrap items-center gap-6`},p={class:`eyebrow mb-5`},m={class:`flex flex-wrap items-center gap-6`},h={class:`flex flex-col gap-2`},g={class:`eyebrow`},_={class:`flex flex-col gap-2`},v={class:`eyebrow`},y={class:`flex flex-col gap-2`},b={class:`eyebrow`},x={class:`eyebrow mb-5`},S={__name:`QuantityStepperSection`,setup(S){let{t:C}=c(),w=e(1),T=e(3),E=e(5),D=e(2);return(e,c)=>(t(),r(u,{eyebrow:n(C)(`ds.eyebrow.components`),title:n(C)(`ds.qtyStepper.title`),description:n(C)(`ds.qtyStepper.description`)},{default:a(()=>[s(`section`,null,[s(`h2`,d,i(n(C)(`ds.heading.sizes`)),1),s(`div`,f,[o(l,{modelValue:w.value,"onUpdate:modelValue":c[0]||=e=>w.value=e,size:`sm`,"decrease-label":n(C)(`cart.qty.decrease`),"increase-label":n(C)(`cart.qty.increase`)},null,8,[`modelValue`,`decrease-label`,`increase-label`]),o(l,{modelValue:T.value,"onUpdate:modelValue":c[1]||=e=>T.value=e,size:`md`,"decrease-label":n(C)(`cart.qty.decrease`),"increase-label":n(C)(`cart.qty.increase`)},null,8,[`modelValue`,`decrease-label`,`increase-label`])])]),s(`section`,null,[s(`h2`,p,i(n(C)(`ds.heading.states`)),1),s(`div`,m,[s(`div`,h,[s(`span`,g,i(n(C)(`ds.qtyStepper.minBoundary`)),1),o(l,{"model-value":0,min:0,"decrease-label":n(C)(`cart.qty.decrease`),"increase-label":n(C)(`cart.qty.increase`)},null,8,[`decrease-label`,`increase-label`])]),s(`div`,_,[s(`span`,v,i(n(C)(`ds.qtyStepper.maxBoundary`)),1),o(l,{modelValue:E.value,"onUpdate:modelValue":c[2]||=e=>E.value=e,max:5,"decrease-label":n(C)(`cart.qty.decrease`),"increase-label":n(C)(`cart.qty.increase`)},null,8,[`modelValue`,`decrease-label`,`increase-label`])]),s(`div`,y,[s(`span`,b,i(n(C)(`ds.buttons.disabled`)),1),o(l,{modelValue:D.value,"onUpdate:modelValue":c[3]||=e=>D.value=e,disabled:``,"decrease-label":n(C)(`cart.qty.decrease`),"increase-label":n(C)(`cart.qty.increase`)},null,8,[`modelValue`,`decrease-label`,`increase-label`])])])]),s(`section`,null,[s(`h2`,x,i(n(C)(`ds.heading.usage`)),1),c[4]||=s(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[s(`pre`,{class:`whitespace-pre-wrap`},`<QuantityStepper
|
||||
import{B as e,C as t,G as n,c as r,ft as i,j as a,m as o,s}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as c}from"./i18n-VERRV-oN.js";import{t as l}from"./QuantityStepper-CyocAaIZ.js";import{t as u}from"./SectionShell-osccWl4j.js";var d={class:`eyebrow mb-5`},f={class:`flex flex-wrap items-center gap-6`},p={class:`eyebrow mb-5`},m={class:`flex flex-wrap items-center gap-6`},h={class:`flex flex-col gap-2`},g={class:`eyebrow`},_={class:`flex flex-col gap-2`},v={class:`eyebrow`},y={class:`flex flex-col gap-2`},b={class:`eyebrow`},x={class:`eyebrow mb-5`},S={__name:`QuantityStepperSection`,setup(S){let{t:C}=c(),w=e(1),T=e(3),E=e(5),D=e(2);return(e,c)=>(t(),r(u,{eyebrow:n(C)(`ds.eyebrow.components`),title:n(C)(`ds.qtyStepper.title`),description:n(C)(`ds.qtyStepper.description`)},{default:a(()=>[s(`section`,null,[s(`h2`,d,i(n(C)(`ds.heading.sizes`)),1),s(`div`,f,[o(l,{modelValue:w.value,"onUpdate:modelValue":c[0]||=e=>w.value=e,size:`sm`,"decrease-label":n(C)(`cart.qty.decrease`),"increase-label":n(C)(`cart.qty.increase`)},null,8,[`modelValue`,`decrease-label`,`increase-label`]),o(l,{modelValue:T.value,"onUpdate:modelValue":c[1]||=e=>T.value=e,size:`md`,"decrease-label":n(C)(`cart.qty.decrease`),"increase-label":n(C)(`cart.qty.increase`)},null,8,[`modelValue`,`decrease-label`,`increase-label`])])]),s(`section`,null,[s(`h2`,p,i(n(C)(`ds.heading.states`)),1),s(`div`,m,[s(`div`,h,[s(`span`,g,i(n(C)(`ds.qtyStepper.minBoundary`)),1),o(l,{"model-value":0,min:0,"decrease-label":n(C)(`cart.qty.decrease`),"increase-label":n(C)(`cart.qty.increase`)},null,8,[`decrease-label`,`increase-label`])]),s(`div`,_,[s(`span`,v,i(n(C)(`ds.qtyStepper.maxBoundary`)),1),o(l,{modelValue:E.value,"onUpdate:modelValue":c[2]||=e=>E.value=e,max:5,"decrease-label":n(C)(`cart.qty.decrease`),"increase-label":n(C)(`cart.qty.increase`)},null,8,[`modelValue`,`decrease-label`,`increase-label`])]),s(`div`,y,[s(`span`,b,i(n(C)(`ds.buttons.disabled`)),1),o(l,{modelValue:D.value,"onUpdate:modelValue":c[3]||=e=>D.value=e,disabled:``,"decrease-label":n(C)(`cart.qty.decrease`),"increase-label":n(C)(`cart.qty.increase`)},null,8,[`modelValue`,`decrease-label`,`increase-label`])])])]),s(`section`,null,[s(`h2`,x,i(n(C)(`ds.heading.usage`)),1),c[4]||=s(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[s(`pre`,{class:`whitespace-pre-wrap`},`<QuantityStepper
|
||||
v-model="quantity"
|
||||
:min="0"
|
||||
:max="10"
|
||||
@@ -1 +1 @@
|
||||
import{C as e,G as t,T as n,c as r,dt as i,ft as a,j as o,r as s,s as c,u as l}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as u}from"./i18n-D7Ao3GC7.js";import{t as d}from"./SectionShell-osccWl4j.js";var f={class:`grid grid-cols-2 sm:grid-cols-3 gap-6`},p={class:`font-mono text-[12px] text-ink block`},m={class:`text-[12px] text-muted mt-1`},h={__name:`RadiiSection`,setup(h){let{t:g}=u(),_=[{name:`xs`,value:`6px`},{name:`sm`,value:`10px`},{name:`md`,value:`16px`},{name:`lg`,value:`20px`},{name:`xl`,value:`28px`},{name:`pill`,value:`100px`}];return(u,h)=>(e(),r(d,{eyebrow:t(g)(`ds.eyebrow.tokens`),title:t(g)(`ds.radii.title`),description:t(g)(`ds.radii.description`)},{default:o(()=>[c(`div`,f,[(e(),l(s,null,n(_,e=>c(`div`,{key:e.name,class:`flex flex-col items-center`},[c(`div`,{class:`h-32 w-full bg-paper border border-line mb-4 shadow-sm`,style:i({borderRadius:`var(--radius-${e.name})`})},null,4),c(`code`,p,`--radius-`+a(e.name),1),c(`span`,m,a(e.value),1)])),64))])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{h as default};
|
||||
import{C as e,G as t,T as n,c as r,dt as i,ft as a,j as o,r as s,s as c,u as l}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as u}from"./i18n-VERRV-oN.js";import{t as d}from"./SectionShell-osccWl4j.js";var f={class:`grid grid-cols-2 sm:grid-cols-3 gap-6`},p={class:`font-mono text-[12px] text-ink block`},m={class:`text-[12px] text-muted mt-1`},h={__name:`RadiiSection`,setup(h){let{t:g}=u(),_=[{name:`xs`,value:`6px`},{name:`sm`,value:`10px`},{name:`md`,value:`16px`},{name:`lg`,value:`20px`},{name:`xl`,value:`28px`},{name:`pill`,value:`100px`}];return(u,h)=>(e(),r(d,{eyebrow:t(g)(`ds.eyebrow.tokens`),title:t(g)(`ds.radii.title`),description:t(g)(`ds.radii.description`)},{default:o(()=>[c(`div`,f,[(e(),l(s,null,n(_,e=>c(`div`,{key:e.name,class:`flex flex-col items-center`},[c(`div`,{class:`h-32 w-full bg-paper border border-line mb-4 shadow-sm`,style:i({borderRadius:`var(--radius-${e.name})`})},null,4),c(`code`,p,`--radius-`+a(e.name),1),c(`span`,m,a(e.value),1)])),64))])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{h as default};
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
|
||||
import{C as e,T as t,c as n,dt as r,ft as i,j as a,l as o,m as s,p as c,r as l,s as u,u as d}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as f}from"./_plugin-vue_export-helper-BOai-rQB.js";import{t as p}from"./Badge-Bu_yseK_.js";import{t as m}from"./Button-D1Rp2Xe1.js";var h={id:`revitalize`,class:`bg-brand text-cream`},g={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`},_={class:`flex flex-col items-center text-center gap-6 max-w-3xl mx-auto`},v={key:1,class:`font-display font-normal leading-[1.04] tracking-tight text-headline-lg`},y={key:0,class:`italic font-light text-accent-soft`},b={key:2,class:`text-lg leading-relaxed text-cream/80 max-w-2xl`},x={key:0,class:`mt-10 md:mt-14 grid gap-6 sm:grid-cols-3 sm:gap-8 max-w-4xl mx-auto`},S={"aria-hidden":`true`,class:`rv-orbit`},C={key:0,class:`rv-orbit-center`},w={class:`font-sans text-base font-semibold text-cream leading-snug`},T={key:1,class:`mt-10 md:mt-14 flex justify-center`},E=f({__name:`Revitalization`,props:{eyebrow:{type:String,default:``},headline:{type:String,default:``},headlineEm:{type:String,default:``},sub:{type:String,default:``},features:{type:Array,default:()=>[],validator:e=>e.every(e=>typeof e==`string`||e&&typeof e==`object`&&typeof e.title==`string`)},notifyCta:{type:String,default:``}},emits:[`notify`],setup(f){return(E,D)=>(e(),d(`section`,h,[u(`div`,g,[u(`div`,_,[f.eyebrow?(e(),n(p,{key:0,variant:`accent`},{default:a(()=>[c(i(f.eyebrow),1)]),_:1})):o(``,!0),f.headline||f.headlineEm?(e(),d(`h2`,v,[c(i(f.headline)+` `,1),f.headlineEm?(e(),d(`em`,y,i(f.headlineEm),1)):o(``,!0)])):o(``,!0),f.sub?(e(),d(`p`,b,i(f.sub),1)):o(``,!0)]),f.features.length?(e(),d(`ul`,x,[(e(!0),d(l,null,t(f.features.slice(0,3),(t,n)=>(e(),d(`li`,{key:typeof t==`string`?t:t.title,class:`flex flex-col items-center gap-4 text-center`},[u(`span`,S,[u(`span`,{class:`rv-orbit-ring`,style:r({animationDelay:`${n*-5}s`})},[...D[1]||=[u(`span`,{class:`rv-orbit-dot`},null,-1)]],4),typeof t==`object`&&t.icon?(e(),d(`span`,C,i(t.icon),1)):o(``,!0)]),u(`span`,w,i(typeof t==`string`?t:t.title),1)]))),128))])):o(``,!0),f.notifyCta?(e(),d(`div`,T,[s(m,{variant:`accent`,size:`lg`,onClick:D[0]||=e=>E.$emit(`notify`)},{default:a(()=>[c(i(f.notifyCta),1)]),_:1})])):o(``,!0)])]))}},[[`__scopeId`,`data-v-04135cd6`]]);export{E as t};
|
||||
import{C as e,T as t,c as n,dt as r,ft as i,j as a,l as o,m as s,p as c,r as l,s as u,u as d}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as f}from"./Badge-DiccZCC_.js";import{t as p}from"./_plugin-vue_export-helper-0vLWKQyu.js";import{t as m}from"./Button-D1Rp2Xe1.js";var h={id:`revitalize`,class:`bg-brand text-cream`},g={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`},_={class:`flex flex-col items-center text-center gap-6 max-w-3xl mx-auto`},v={key:1,class:`font-display font-normal leading-[1.04] tracking-tight text-headline-lg`},y={key:0,class:`italic font-light text-accent-soft`},b={key:2,class:`text-lg leading-relaxed text-cream/80 max-w-2xl`},x={key:0,class:`mt-10 md:mt-14 grid gap-6 sm:grid-cols-3 sm:gap-8 max-w-4xl mx-auto`},S={"aria-hidden":`true`,class:`rv-orbit`},C={key:0,class:`rv-orbit-center`},w={class:`font-sans text-base font-semibold text-cream leading-snug`},T={key:1,class:`mt-10 md:mt-14 flex justify-center`},E=p({__name:`Revitalization`,props:{eyebrow:{type:String,default:``},headline:{type:String,default:``},headlineEm:{type:String,default:``},sub:{type:String,default:``},features:{type:Array,default:()=>[],validator:e=>e.every(e=>typeof e==`string`||e&&typeof e==`object`&&typeof e.title==`string`)},notifyCta:{type:String,default:``}},emits:[`notify`],setup(p){return(E,D)=>(e(),d(`section`,h,[u(`div`,g,[u(`div`,_,[p.eyebrow?(e(),n(f,{key:0,variant:`accent`},{default:a(()=>[c(i(p.eyebrow),1)]),_:1})):o(``,!0),p.headline||p.headlineEm?(e(),d(`h2`,v,[c(i(p.headline)+` `,1),p.headlineEm?(e(),d(`em`,y,i(p.headlineEm),1)):o(``,!0)])):o(``,!0),p.sub?(e(),d(`p`,b,i(p.sub),1)):o(``,!0)]),p.features.length?(e(),d(`ul`,x,[(e(!0),d(l,null,t(p.features.slice(0,3),(t,n)=>(e(),d(`li`,{key:typeof t==`string`?t:t.title,class:`flex flex-col items-center gap-4 text-center`},[u(`span`,S,[u(`span`,{class:`rv-orbit-ring`,style:r({animationDelay:`${n*-5}s`})},[...D[1]||=[u(`span`,{class:`rv-orbit-dot`},null,-1)]],4),typeof t==`object`&&t.icon?(e(),d(`span`,C,i(t.icon),1)):o(``,!0)]),u(`span`,w,i(typeof t==`string`?t:t.title),1)]))),128))])):o(``,!0),p.notifyCta?(e(),d(`div`,T,[s(m,{variant:`accent`,size:`lg`,onClick:D[0]||=e=>E.$emit(`notify`)},{default:a(()=>[c(i(p.notifyCta),1)]),_:1})])):o(``,!0)])]))}},[[`__scopeId`,`data-v-04135cd6`]]);export{E as t};
|
||||
@@ -1 +1 @@
|
||||
import{C as e,G as t,m as n,o as r,u as i}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as a}from"./i18n-D7Ao3GC7.js";import{t as o}from"./Revitalization-Cr74N6Zm.js";var s={class:`min-h-screen bg-brand`},c={__name:`RevitalizationPreview`,setup(c){let{t:l}=a(),u=r(()=>[{title:l(`revit.feature.1.title`),icon:`⚗️`},{title:l(`revit.feature.2.title`),icon:`💊`},{title:l(`revit.feature.3.title`),icon:`🌿`}]);return(r,a)=>(e(),i(`div`,s,[n(o,{eyebrow:t(l)(`revit.eyebrow`),headline:t(l)(`revit.headline.a`),"headline-em":t(l)(`revit.headline.em`),sub:t(l)(`revit.sub`),features:u.value,"notify-cta":t(l)(`revit.notifyCta`)},null,8,[`eyebrow`,`headline`,`headline-em`,`sub`,`features`,`notify-cta`])]))}};export{c as default};
|
||||
import{C as e,G as t,m as n,o as r,u as i}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as a}from"./i18n-VERRV-oN.js";import{t as o}from"./Revitalization-hZcOm3kw.js";var s={class:`min-h-screen bg-brand`},c={__name:`RevitalizationPreview`,setup(c){let{t:l}=a(),u=r(()=>[{title:l(`revit.feature.1.title`),icon:`⚗️`},{title:l(`revit.feature.2.title`),icon:`💊`},{title:l(`revit.feature.3.title`),icon:`🌿`}]);return(r,a)=>(e(),i(`div`,s,[n(o,{eyebrow:t(l)(`revit.eyebrow`),headline:t(l)(`revit.headline.a`),"headline-em":t(l)(`revit.headline.em`),sub:t(l)(`revit.sub`),features:u.value,"notify-cta":t(l)(`revit.notifyCta`)},null,8,[`eyebrow`,`headline`,`headline-em`,`sub`,`features`,`notify-cta`])]))}};export{c as default};
|
||||
@@ -1,4 +1,4 @@
|
||||
import{C as e,G as t,c as n,ft as r,j as i,m as a,s as o}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as s}from"./i18n-D7Ao3GC7.js";import{t as c}from"./SectionShell-osccWl4j.js";import{t as l}from"./DevicePreview-DrPoWfT3.js";var u={class:`eyebrow mb-5`},d=`/design/preview/revitalization`,f={__name:`RevitalizationSection`,setup(f){let{t:p}=s();return(s,f)=>(e(),n(c,{eyebrow:t(p)(`ds.eyebrow.components`),title:t(p)(`ds.revitalization.title`),description:t(p)(`ds.revitalization.description`),wide:``},{default:i(()=>[o(`section`,null,[a(l,{src:d,initial:`desktop`,height:720})]),o(`section`,null,[o(`h2`,u,r(t(p)(`ds.heading.usage`)),1),f[0]||=o(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[o(`pre`,{class:`whitespace-pre-wrap`},`<Revitalization
|
||||
import{C as e,G as t,c as n,ft as r,j as i,m as a,s as o}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as s}from"./i18n-VERRV-oN.js";import{t as c}from"./SectionShell-osccWl4j.js";import{t as l}from"./DevicePreview-m3tD-qdR.js";var u={class:`eyebrow mb-5`},d=`/design/preview/revitalization`,f={__name:`RevitalizationSection`,setup(f){let{t:p}=s();return(s,f)=>(e(),n(c,{eyebrow:t(p)(`ds.eyebrow.components`),title:t(p)(`ds.revitalization.title`),description:t(p)(`ds.revitalization.description`),wide:``},{default:i(()=>[o(`section`,null,[a(l,{src:d,initial:`desktop`,height:720})]),o(`section`,null,[o(`h2`,u,r(t(p)(`ds.heading.usage`)),1),f[0]||=o(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[o(`pre`,{class:`whitespace-pre-wrap`},`<Revitalization
|
||||
:eyebrow="t('revit.eyebrow')"
|
||||
:headline="t('revit.headline.a')"
|
||||
:headline-em="t('revit.headline.em')"
|
||||
File diff suppressed because one or more lines are too long
@@ -1,4 +1,4 @@
|
||||
import{B as e,C as t,G as n,T as r,c as i,ft as a,j as o,m as s,p as c,r as l,s as u,u as d}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as f}from"./Icon-Dcq1PyHo.js";import{t as p}from"./i18n-D7Ao3GC7.js";import{t as m}from"./Search-CZvYlcDU.js";import{a as h,r as g}from"./products-BqW5PUnm.js";import{t as _}from"./Button-D1Rp2Xe1.js";import{t as v}from"./SectionShell-osccWl4j.js";var y={class:`eyebrow mb-5`},b={class:`rounded-md border border-line bg-paper p-6 flex flex-col sm:flex-row sm:items-center gap-4`},x={class:`text-[13px] text-muted`},S={class:`eyebrow mb-5`},C={class:`rounded-md border border-line bg-paper divide-y divide-line overflow-hidden`},w=[`src`,`alt`],T={class:`min-w-0 flex-1`},E={class:`text-[14px] font-semibold text-ink truncate`},D={class:`text-[12px] text-muted truncate`},O={class:`shrink-0 text-[13px] font-semibold text-brand`},k={class:`eyebrow mb-5`},A=`natron pulver`,j={__name:`SearchSection`,setup(j){let{t:M}=p(),N=e(!1),P=h(A,g,4);return(e,p)=>(t(),i(v,{eyebrow:n(M)(`ds.eyebrow.components`),title:n(M)(`ds.search.title`),description:n(M)(`ds.search.description`)},{default:o(()=>[u(`section`,null,[u(`h2`,y,a(n(M)(`ds.heading.default`)),1),u(`div`,b,[s(_,{variant:`primary`,onClick:p[0]||=e=>N.value=!0},{before:o(()=>[s(f,{name:`search`,size:18})]),default:o(()=>[c(` `+a(n(M)(`ds.search.demo.label`)),1)]),_:1}),u(`p`,x,a(n(M)(`ds.search.demo.hint`)),1)])]),u(`section`,null,[u(`h2`,S,a(n(M)(`ds.heading.variants`))+` — "`+a(A)+`"`,1),u(`ul`,C,[(t(!0),d(l,null,r(n(P),e=>(t(),d(`li`,{key:e.id,class:`flex items-center gap-4 px-4 py-3`},[u(`img`,{src:e.image,alt:e.title,loading:`lazy`,decoding:`async`,class:`shrink-0 w-12 h-12 rounded-sm object-cover bg-cream`},null,8,w),u(`div`,T,[u(`p`,E,a(e.title),1),u(`p`,D,a(e.size)+` · `+a(e.category),1)]),u(`span`,O,`€ `+a(e.price.toFixed(2).replace(`.`,`,`)),1)]))),128))])]),u(`section`,null,[u(`h2`,k,a(n(M)(`ds.heading.usage`)),1),p[2]||=u(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[u(`pre`,{class:`whitespace-pre-wrap`},`import { products } from '@/api/products.js'
|
||||
import{B as e,C as t,G as n,T as r,c as i,ft as a,j as o,m as s,p as c,r as l,s as u,u as d}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as f}from"./Icon-BCo6-bGH.js";import{t as p}from"./i18n-VERRV-oN.js";import{t as m}from"./Search-CMgWklDk.js";import{a as h,r as g}from"./products-BqW5PUnm.js";import{t as _}from"./Button-D1Rp2Xe1.js";import{t as v}from"./SectionShell-osccWl4j.js";var y={class:`eyebrow mb-5`},b={class:`rounded-md border border-line bg-paper p-6 flex flex-col sm:flex-row sm:items-center gap-4`},x={class:`text-[13px] text-muted`},S={class:`eyebrow mb-5`},C={class:`rounded-md border border-line bg-paper divide-y divide-line overflow-hidden`},w=[`src`,`alt`],T={class:`min-w-0 flex-1`},E={class:`text-[14px] font-semibold text-ink truncate`},D={class:`text-[12px] text-muted truncate`},O={class:`shrink-0 text-[13px] font-semibold text-brand`},k={class:`eyebrow mb-5`},A=`natron pulver`,j={__name:`SearchSection`,setup(j){let{t:M}=p(),N=e(!1),P=h(A,g,4);return(e,p)=>(t(),i(v,{eyebrow:n(M)(`ds.eyebrow.components`),title:n(M)(`ds.search.title`),description:n(M)(`ds.search.description`)},{default:o(()=>[u(`section`,null,[u(`h2`,y,a(n(M)(`ds.heading.default`)),1),u(`div`,b,[s(_,{variant:`primary`,onClick:p[0]||=e=>N.value=!0},{before:o(()=>[s(f,{name:`search`,size:18})]),default:o(()=>[c(` `+a(n(M)(`ds.search.demo.label`)),1)]),_:1}),u(`p`,x,a(n(M)(`ds.search.demo.hint`)),1)])]),u(`section`,null,[u(`h2`,S,a(n(M)(`ds.heading.variants`))+` — "`+a(A)+`"`,1),u(`ul`,C,[(t(!0),d(l,null,r(n(P),e=>(t(),d(`li`,{key:e.id,class:`flex items-center gap-4 px-4 py-3`},[u(`img`,{src:e.image,alt:e.title,loading:`lazy`,decoding:`async`,class:`shrink-0 w-12 h-12 rounded-sm object-cover bg-cream`},null,8,w),u(`div`,T,[u(`p`,E,a(e.title),1),u(`p`,D,a(e.size)+` · `+a(e.category),1)]),u(`span`,O,`€ `+a(e.price.toFixed(2).replace(`.`,`,`)),1)]))),128))])]),u(`section`,null,[u(`h2`,k,a(n(M)(`ds.heading.usage`)),1),p[2]||=u(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[u(`pre`,{class:`whitespace-pre-wrap`},`import { products } from '@/api/products.js'
|
||||
import Search from '@/design-system/components/Search.vue'
|
||||
|
||||
const open = ref(false)
|
||||
@@ -1 +1 @@
|
||||
import{C as e,G as t,T as n,c as r,dt as i,ft as a,j as o,o as s,r as c,s as l,u}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as d}from"./i18n-D7Ao3GC7.js";import{t as f}from"./SectionShell-osccWl4j.js";var p={class:`grid sm:grid-cols-3 gap-8`},m={class:`font-mono text-[12px] text-ink block`},h={class:`text-[13px] text-muted mt-1`},g={__name:`ShadowsSection`,setup(g){let{t:_}=d(),v=s(()=>[{name:`sm`,css:`var(--shadow-sm)`,note:_(`ds.shadows.sm.note`)},{name:`md`,css:`var(--shadow-md)`,note:_(`ds.shadows.md.note`)},{name:`lg`,css:`var(--shadow-lg)`,note:_(`ds.shadows.lg.note`)}]);return(s,d)=>(e(),r(f,{eyebrow:t(_)(`ds.eyebrow.tokens`),title:t(_)(`ds.shadows.title`),description:t(_)(`ds.shadows.description`)},{default:o(()=>[l(`div`,p,[(e(!0),u(c,null,n(v.value,t=>(e(),u(`div`,{key:t.name,class:`space-y-4`},[l(`div`,{class:`h-36 rounded-md bg-paper`,style:i({boxShadow:t.css})},null,4),l(`div`,null,[l(`code`,m,`--shadow-`+a(t.name),1),l(`p`,h,a(t.note),1)])]))),128))])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{g as default};
|
||||
import{C as e,G as t,T as n,c as r,dt as i,ft as a,j as o,o as s,r as c,s as l,u}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as d}from"./i18n-VERRV-oN.js";import{t as f}from"./SectionShell-osccWl4j.js";var p={class:`grid sm:grid-cols-3 gap-8`},m={class:`font-mono text-[12px] text-ink block`},h={class:`text-[13px] text-muted mt-1`},g={__name:`ShadowsSection`,setup(g){let{t:_}=d(),v=s(()=>[{name:`sm`,css:`var(--shadow-sm)`,note:_(`ds.shadows.sm.note`)},{name:`md`,css:`var(--shadow-md)`,note:_(`ds.shadows.md.note`)},{name:`lg`,css:`var(--shadow-lg)`,note:_(`ds.shadows.lg.note`)}]);return(s,d)=>(e(),r(f,{eyebrow:t(_)(`ds.eyebrow.tokens`),title:t(_)(`ds.shadows.title`),description:t(_)(`ds.shadows.description`)},{default:o(()=>[l(`div`,p,[(e(!0),u(c,null,n(v.value,t=>(e(),u(`div`,{key:t.name,class:`space-y-4`},[l(`div`,{class:`h-36 rounded-md bg-paper`,style:i({boxShadow:t.css})},null,4),l(`div`,null,[l(`code`,m,`--shadow-`+a(t.name),1),l(`p`,h,a(t.note),1)])]))),128))])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{g as default};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
|
||||
import{C as e,G as t,T as n,c as r,ft as i,j as a,m as o,r as s,s as c,u as l,ut as u}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as d}from"./i18n-D7Ao3GC7.js";import{t as f}from"./SectionShell-osccWl4j.js";import{t as p}from"./Card-E6lMGZqd.js";var m={class:`grid md:grid-cols-2 gap-6`},h={class:`eyebrow mb-3`},g={class:`text-[14px] text-muted leading-relaxed`},_={class:`eyebrow mb-3`},v={class:`text-[14px] text-muted leading-relaxed`},y={class:`eyebrow mb-6`},b={class:`divide-y divide-line rounded-md border border-line bg-paper px-6`},x={class:`font-mono text-[11px] text-muted w-24 shrink-0`},S={__name:`TypographySection`,setup(S){let{t:C}=d(),w=[`xs`,`sm`,`base`,`lg`,`xl`,`2xl`,`3xl`,`4xl`,`5xl`];return(d,S)=>(e(),r(f,{eyebrow:t(C)(`ds.eyebrow.tokens`),title:t(C)(`ds.typography.title`),description:t(C)(`ds.typography.description`)},{default:a(()=>[c(`section`,m,[o(p,{tone:`paper`},{default:a(()=>[c(`p`,h,i(t(C)(`ds.heading.display`)),1),S[0]||=c(`p`,{class:`font-display text-5xl font-normal leading-[1.05] mb-3`},`Fraunces`,-1),c(`p`,g,i(t(C)(`ds.typography.serifDesc`)),1),S[1]||=c(`code`,{class:`font-mono text-[11px] text-muted block mt-5`},`var(--font-serif)`,-1)]),_:1}),o(p,{tone:`paper`},{default:a(()=>[c(`p`,_,i(t(C)(`ds.heading.body`)),1),S[2]||=c(`p`,{class:`font-sans text-5xl font-medium leading-[1.05] mb-3`},`DM Sans`,-1),c(`p`,v,i(t(C)(`ds.typography.sansDesc`)),1),S[3]||=c(`code`,{class:`font-mono text-[11px] text-muted block mt-5`},`var(--font-sans)`,-1)]),_:1})]),c(`section`,null,[c(`h2`,y,i(t(C)(`ds.heading.scale`)),1),c(`div`,b,[(e(),l(s,null,n(w,e=>c(`div`,{key:e,class:`flex items-baseline gap-8 py-4`},[c(`code`,x,`text-`+i(e),1),c(`span`,{class:u(`text-${e}`)},i(t(C)(`ds.typography.sample`)),3)])),64))])])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{S as default};
|
||||
import{C as e,G as t,T as n,c as r,ft as i,j as a,m as o,r as s,s as c,u as l,ut as u}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as d}from"./i18n-VERRV-oN.js";import{t as f}from"./SectionShell-osccWl4j.js";import{t as p}from"./Card-E6lMGZqd.js";var m={class:`grid md:grid-cols-2 gap-6`},h={class:`eyebrow mb-3`},g={class:`text-[14px] text-muted leading-relaxed`},_={class:`eyebrow mb-3`},v={class:`text-[14px] text-muted leading-relaxed`},y={class:`eyebrow mb-6`},b={class:`divide-y divide-line rounded-md border border-line bg-paper px-6`},x={class:`font-mono text-[11px] text-muted w-24 shrink-0`},S={__name:`TypographySection`,setup(S){let{t:C}=d(),w=[`xs`,`sm`,`base`,`lg`,`xl`,`2xl`,`3xl`,`4xl`,`5xl`];return(d,S)=>(e(),r(f,{eyebrow:t(C)(`ds.eyebrow.tokens`),title:t(C)(`ds.typography.title`),description:t(C)(`ds.typography.description`)},{default:a(()=>[c(`section`,m,[o(p,{tone:`paper`},{default:a(()=>[c(`p`,h,i(t(C)(`ds.heading.display`)),1),S[0]||=c(`p`,{class:`font-display text-5xl font-normal leading-[1.05] mb-3`},`Fraunces`,-1),c(`p`,g,i(t(C)(`ds.typography.serifDesc`)),1),S[1]||=c(`code`,{class:`font-mono text-[11px] text-muted block mt-5`},`var(--font-serif)`,-1)]),_:1}),o(p,{tone:`paper`},{default:a(()=>[c(`p`,_,i(t(C)(`ds.heading.body`)),1),S[2]||=c(`p`,{class:`font-sans text-5xl font-medium leading-[1.05] mb-3`},`DM Sans`,-1),c(`p`,v,i(t(C)(`ds.typography.sansDesc`)),1),S[3]||=c(`code`,{class:`font-mono text-[11px] text-muted block mt-5`},`var(--font-sans)`,-1)]),_:1})]),c(`section`,null,[c(`h2`,y,i(t(C)(`ds.heading.scale`)),1),c(`div`,b,[(e(),l(s,null,n(w,e=>c(`div`,{key:e,class:`flex items-baseline gap-8 py-4`},[c(`code`,x,`text-`+i(e),1),c(`span`,{class:u(`text-${e}`)},i(t(C)(`ds.typography.sample`)),3)])),64))])])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{S as default};
|
||||
File diff suppressed because one or more lines are too long
2
dist/assets/index-C0u67XXb.js
vendored
Normal file
2
dist/assets/index-C0u67XXb.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/assets/index-DbstNz-e.js
vendored
2
dist/assets/index-DbstNz-e.js
vendored
File diff suppressed because one or more lines are too long
2
dist/assets/index-DgOgR9jF.css
vendored
Normal file
2
dist/assets/index-DgOgR9jF.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/assets/index-DhKPWs8Z.css
vendored
1
dist/assets/index-DhKPWs8Z.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
9
dist/index.html
vendored
9
dist/index.html
vendored
@@ -12,14 +12,13 @@
|
||||
href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,200;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,200;1,9..144,400;1,9..144,600&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script type="module" crossorigin src="/assets/index-DbstNz-e.js"></script>
|
||||
<link rel="modulepreload" crossorigin href="/assets/_plugin-vue_export-helper-BOai-rQB.js">
|
||||
<link rel="modulepreload" crossorigin href="/assets/preload-helper-DzyYoeor.js">
|
||||
<script type="module" crossorigin src="/assets/index-C0u67XXb.js"></script>
|
||||
<link rel="modulepreload" crossorigin href="/assets/preload-helper-ca-nBW7U.js">
|
||||
<link rel="modulepreload" crossorigin href="/assets/runtime-core.esm-bundler-DTXUv7Wx.js">
|
||||
<link rel="modulepreload" crossorigin href="/assets/runtime-dom.esm-bundler-Bg1uJ-W7.js">
|
||||
<link rel="modulepreload" crossorigin href="/assets/runtime-dom.esm-bundler-CXLmyuFK.js">
|
||||
<link rel="modulepreload" crossorigin href="/assets/pinia-D94NEbtV.js">
|
||||
<link rel="modulepreload" crossorigin href="/assets/vue-router-Cyqru1db.js">
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-DhKPWs8Z.css">
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-DgOgR9jF.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
56
scripts/extract-splash-paths.cjs
Normal file
56
scripts/extract-splash-paths.cjs
Normal file
@@ -0,0 +1,56 @@
|
||||
#!/usr/bin/env node
|
||||
// One-shot helper: pulls the dWide*/dPort* SVG path constants out of
|
||||
// SplashIntro.vue and writes them to src/components/splashPaths.js so
|
||||
// BrandHero (and any future surface) can render the same artwork
|
||||
// without duplicating ~500KB of path data.
|
||||
//
|
||||
// Idempotent — safe to re-run if the source paths in SplashIntro.vue
|
||||
// are ever updated (e.g. retracing the SVG).
|
||||
|
||||
const fs = require('fs')
|
||||
const path = require('path')
|
||||
|
||||
const SRC = path.join(__dirname, '..', 'src', 'components', 'SplashIntro.vue')
|
||||
const OUT = path.join(__dirname, '..', 'src', 'components', 'splashPaths.js')
|
||||
|
||||
const src = fs.readFileSync(SRC, 'utf8')
|
||||
const scriptStart = src.indexOf('<script setup>')
|
||||
const scriptEnd = src.indexOf('</script>')
|
||||
const script = src.slice(scriptStart, scriptEnd)
|
||||
|
||||
const NAMES = [
|
||||
'dWideDark',
|
||||
'dWideLeft',
|
||||
'dWideRight',
|
||||
'dWideMiddle',
|
||||
'dWideWhite',
|
||||
'dPortDark',
|
||||
'dPortLeft',
|
||||
'dPortRight',
|
||||
'dPortTop',
|
||||
'dPortMound',
|
||||
]
|
||||
|
||||
const out = []
|
||||
out.push('// Splash artwork path data, extracted from SplashIntro.vue so the')
|
||||
out.push('// splash overlay and the in-page BrandHero can render the same')
|
||||
out.push("// illustration without duplicating ~500KB of SVG path strings.")
|
||||
out.push('// Source of truth lives in trace-2.svg / trace.svg; regenerate via')
|
||||
out.push('// `node scripts/extract-splash-paths.js` after retracing.')
|
||||
out.push('')
|
||||
|
||||
for (const name of NAMES) {
|
||||
const re = new RegExp('const\\s+' + name + '\\s*=\\s*`([\\s\\S]*?)`', 'm')
|
||||
const m = script.match(re)
|
||||
if (!m) {
|
||||
console.error('Could not find constant', name, 'in SplashIntro.vue')
|
||||
process.exit(1)
|
||||
}
|
||||
out.push('export const ' + name + ' = `' + m[1] + '`')
|
||||
out.push('')
|
||||
}
|
||||
|
||||
fs.writeFileSync(OUT, out.join('\n'))
|
||||
const bytes = fs.statSync(OUT).size
|
||||
console.log('Wrote', OUT)
|
||||
console.log('Size:', (bytes / 1024).toFixed(1), 'KB')
|
||||
83
scripts/inline-splash-paths-import.cjs
Normal file
83
scripts/inline-splash-paths-import.cjs
Normal file
@@ -0,0 +1,83 @@
|
||||
#!/usr/bin/env node
|
||||
// Rewrite SplashIntro.vue to import the dWide*/dPort* path constants
|
||||
// from splashPaths.js instead of declaring them inline.
|
||||
|
||||
const fs = require('fs')
|
||||
const path = require('path')
|
||||
|
||||
const FILE = path.join(__dirname, '..', 'src', 'components', 'SplashIntro.vue')
|
||||
// File-order list, used to walk the source linearly. The import
|
||||
// statement uses the same set so the order stays stable.
|
||||
const NAMES_IN_FILE_ORDER = [
|
||||
'dWideDark',
|
||||
'dWideWhite',
|
||||
'dWideLeft',
|
||||
'dWideMiddle',
|
||||
'dWideRight',
|
||||
'dPortDark',
|
||||
'dPortLeft',
|
||||
'dPortRight',
|
||||
'dPortTop',
|
||||
'dPortMound',
|
||||
]
|
||||
const NAMES = NAMES_IN_FILE_ORDER
|
||||
|
||||
let src = fs.readFileSync(FILE, 'utf8')
|
||||
|
||||
// Remove each `const NAME = \`...\`` declaration (single long line per
|
||||
// our writeup of the file). Tolerate trailing newline. The marker
|
||||
// `/* ---- Path data ... ---- */` block comment becomes redundant once
|
||||
// the constants leave; replace it with a short pointer to splashPaths.
|
||||
const startMarker = '/* ---- Path data (extracted from trace-2.svg and trace.svg, then bucketed) ---- */'
|
||||
const startIdx = src.indexOf(startMarker)
|
||||
if (startIdx === -1) {
|
||||
console.error('Path-data marker not found — splash file may have been refactored.')
|
||||
process.exit(1)
|
||||
}
|
||||
|
||||
// Strip from the marker to the end of the last constant declaration.
|
||||
// Find the last constant's closing backtick + newline.
|
||||
let cursor = startIdx
|
||||
for (const name of NAMES) {
|
||||
const constStart = src.indexOf('const ' + name, cursor)
|
||||
if (constStart === -1) {
|
||||
console.error('Constant', name, 'not found — aborting.')
|
||||
process.exit(1)
|
||||
}
|
||||
cursor = constStart
|
||||
}
|
||||
// `cursor` is at the start of the last `const ...` line. Find the
|
||||
// line's closing backtick, then the following newline.
|
||||
const lastBacktickOpen = src.indexOf('`', cursor)
|
||||
const lastBacktickClose = src.indexOf('`', lastBacktickOpen + 1)
|
||||
const endOfLine = src.indexOf('\n', lastBacktickClose)
|
||||
const removeEnd = endOfLine === -1 ? src.length : endOfLine + 1
|
||||
|
||||
const importStmt =
|
||||
"import {\n" +
|
||||
NAMES.map((n) => ' ' + n + ',').join('\n') +
|
||||
"\n} from './splashPaths.js'\n"
|
||||
|
||||
const replacement =
|
||||
'/* Path data lives in splashPaths.js — shared with BrandHero so the\n' +
|
||||
' in-page brand hero can render the same illustration without\n' +
|
||||
' duplicating ~500KB of SVG path strings. Regenerate via\n' +
|
||||
' `node scripts/extract-splash-paths.cjs` after retracing. */\n'
|
||||
|
||||
src = src.slice(0, startIdx) + replacement + src.slice(removeEnd)
|
||||
|
||||
// Add the import at the top of the script-setup block, right after the
|
||||
// existing `import { ref, ... } from 'vue'` line.
|
||||
const vueImportLine = "import { ref, onMounted, onBeforeUnmount } from 'vue'"
|
||||
const idx = src.indexOf(vueImportLine)
|
||||
if (idx === -1) {
|
||||
console.error('Vue import line not found — aborting.')
|
||||
process.exit(1)
|
||||
}
|
||||
const insertAt = idx + vueImportLine.length
|
||||
src = src.slice(0, insertAt) + '\n' + importStmt + src.slice(insertAt)
|
||||
|
||||
fs.writeFileSync(FILE, src)
|
||||
const bytes = fs.statSync(FILE).size
|
||||
console.log('Updated', FILE)
|
||||
console.log('Size:', (bytes / 1024).toFixed(1), 'KB')
|
||||
25
src/App.vue
25
src/App.vue
@@ -1,26 +1,12 @@
|
||||
<script setup>
|
||||
import { computed, ref, defineAsyncComponent } from 'vue'
|
||||
import { computed, defineAsyncComponent } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import SplashIntro from './components/SplashIntro.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const isPreview = computed(() => route.meta.preview === true)
|
||||
const isDesignRoute = computed(() => route.path.startsWith('/design'))
|
||||
const inIframe = typeof window !== 'undefined' && window.self !== window.top
|
||||
|
||||
// Show the splash once per session, and never inside the DS iframe previews —
|
||||
// it would replay every time the preview reloads, which is not what we want.
|
||||
const splashAlreadyShown =
|
||||
typeof window !== 'undefined' && window.sessionStorage?.getItem('splashed') === '1'
|
||||
const showSplash = ref(!splashAlreadyShown && !inIframe && !isPreview.value)
|
||||
|
||||
function onSplashFinished() {
|
||||
showSplash.value = false
|
||||
try {
|
||||
window.sessionStorage?.setItem('splashed', '1')
|
||||
} catch {}
|
||||
}
|
||||
|
||||
const isDev = import.meta.env.DEV
|
||||
const A11yToolbar = isDev
|
||||
? defineAsyncComponent(() => import('./design-system/devtools/A11yToolbar.vue'))
|
||||
@@ -28,14 +14,13 @@ const A11yToolbar = isDev
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SplashIntro v-if="showSplash" @finished="onSplashFinished" />
|
||||
<!-- Single router outlet. Each page (Home, Shop, /design/*) owns its
|
||||
own layout chrome — no app-level wrapper, so there's no frame
|
||||
where an intermediate layout can flash before the route
|
||||
resolves. (Previously a conditional DefaultLayout was rendered
|
||||
whenever `route.meta.layout !== 'none'`, but during initial
|
||||
load `route.meta` is `{}`, so the condition was truthy and the
|
||||
dev sidebar showed under every page for one frame.) -->
|
||||
resolves. The full-screen SplashIntro overlay was removed: the
|
||||
BrandHero on the home page now plays the figure entrance
|
||||
animation in flow, so the user lands on usable chrome (nav +
|
||||
hero) immediately rather than waiting through a 2.8s overlay. -->
|
||||
<router-view />
|
||||
<A11yToolbar v-if="isDev && isDesignRoute && !isPreview && !inIframe" />
|
||||
</template>
|
||||
|
||||
File diff suppressed because one or more lines are too long
25
src/components/splashPaths.js
Normal file
25
src/components/splashPaths.js
Normal file
File diff suppressed because one or more lines are too long
278
src/design-system/components/BrandHero.vue
Normal file
278
src/design-system/components/BrandHero.vue
Normal file
@@ -0,0 +1,278 @@
|
||||
<!--
|
||||
BrandHero.vue
|
||||
-------------------------------------------------------------------
|
||||
Home-page brand hero. Replaces the previous full-screen SplashIntro
|
||||
overlay: the same figure-entrance animation now plays in flow on
|
||||
the page itself, so the user lands on usable chrome (nav + hero)
|
||||
instead of waiting through a 2.8s overlay.
|
||||
|
||||
Layout:
|
||||
· Desktop (≥1218 px): the SVG sits as a centred figure inside
|
||||
the LEFT half of the first fold; the tagline column sits in
|
||||
the RIGHT half, also centred within its half — the two halves
|
||||
balance one another instead of leaving a wide trough between.
|
||||
· Below 1218 px: stacked — illustration above, tagline below.
|
||||
|
||||
Animation choreography (mirrors the old splash exactly, minus the
|
||||
wordmark which has no destination on the final page):
|
||||
1. left-m (woman) slides in from the left
|
||||
2. right-m (landscape) slides in from the right
|
||||
3. mound-m (white handful of natron) fades in
|
||||
4. tagline + SINCE 1881 fade in LAST
|
||||
|
||||
Path data is imported from `splashPaths.js`.
|
||||
-->
|
||||
<template>
|
||||
<section
|
||||
class="brand-hero relative isolate overflow-hidden bg-brand text-cream md:min-h-[calc(100svh-var(--nav-h))]"
|
||||
:class="{ 'is-portrait': isPortrait, go: started }"
|
||||
>
|
||||
<!-- =========================================================
|
||||
DESKTOP — single horizontally-centred max-width container
|
||||
with figure + tagline as a 2-col flex row. Removes the
|
||||
absolute-positioning trough by anchoring both halves to a
|
||||
shared centred container; the figure scales with column
|
||||
width so it stays balanced against the tagline at every
|
||||
viewport size.
|
||||
========================================================= -->
|
||||
<template v-if="!isPortrait">
|
||||
<div class="mx-auto flex min-h-[calc(100svh-var(--nav-h))] w-full max-w-7xl items-center px-6 md:px-10 lg:px-12">
|
||||
<!-- Figure column. Width-fills its half of the container,
|
||||
height auto-derives from the cropped portrait viewBox.
|
||||
`max-h-[80svh]` keeps the figure from overshooting the
|
||||
fold on tall ultrawide displays. -->
|
||||
<div class="brand-hero__media flex w-1/2 items-center justify-center">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="brand-hero__svg--bg block w-full h-auto max-h-[80svh]"
|
||||
viewBox="0 380 1024 1156"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path class="layer left-m" fill-rule="evenodd" :d="dPortLeft" />
|
||||
<path class="layer right-m" fill-rule="evenodd" :d="dPortRight" />
|
||||
<path class="layer mound-m" fill-rule="evenodd" :d="dPortMound" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Tagline column. Same width as the figure column so the
|
||||
composition is symmetrically centred; inner copy block
|
||||
is left-aligned and width-clamped so headline wrapping
|
||||
stays predictable across breakpoints. -->
|
||||
<div class="brand-hero__copy flex w-1/2 items-center justify-start pl-4 md:pl-6 lg:pl-8">
|
||||
<div class="w-full max-w-md xl:max-w-lg 2xl:max-w-xl text-left">
|
||||
<p class="mb-4 md:mb-5 text-sm md:text-base tracking-label uppercase text-cream/75">{{ since }}</p>
|
||||
<h1 class="font-display font-normal leading-[1.06] tracking-tight text-cream text-[1.75rem] md:text-[2.25rem] lg:text-[2.5rem] xl:text-[2.75rem] 2xl:text-[3.25rem]">
|
||||
{{ headlineA }}
|
||||
<em class="italic font-light text-accent-soft">{{ headlineEm }}</em>
|
||||
{{ headlineB }}
|
||||
</h1>
|
||||
<RouterLink to="/shop" class="mt-7 md:mt-8 inline-flex">
|
||||
<Button variant="accent" size="lg">{{ shopLabel }}</Button>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- =========================================================
|
||||
PORTRAIT / MOBILE — stacked, illustration above tagline
|
||||
========================================================= -->
|
||||
<div
|
||||
v-else
|
||||
class="relative mx-auto grid w-full max-w-7xl grid-cols-1 items-center gap-6 px-4 pt-2 pb-10 sm:gap-8 sm:px-6 sm:pt-4"
|
||||
>
|
||||
<div class="brand-hero__media">
|
||||
<svg
|
||||
class="brand-hero__svg brand-hero__svg--portrait"
|
||||
viewBox="0 380 1024 1156"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path class="layer left-m" fill-rule="evenodd" :d="dPortLeft" />
|
||||
<path class="layer right-m" fill-rule="evenodd" :d="dPortRight" />
|
||||
<path class="layer mound-m" fill-rule="evenodd" :d="dPortMound" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="brand-hero__copy flex flex-col items-center text-center">
|
||||
<h1 class="max-w-3xl font-display font-normal leading-[1.08] tracking-tight text-cream text-[1.5rem] sm:text-[2rem]">
|
||||
{{ headlineA }}
|
||||
<em class="italic font-light text-accent-soft">{{ headlineEm }}</em>
|
||||
{{ headlineB }}
|
||||
</h1>
|
||||
<p class="mt-4 text-[0.95rem] tracking-label uppercase text-cream/75">{{ since }}</p>
|
||||
<RouterLink to="/shop" class="mt-6 inline-flex">
|
||||
<Button variant="accent" size="lg">{{ shopLabel }}</Button>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import { RouterLink } from 'vue-router'
|
||||
import {
|
||||
dPortLeft,
|
||||
dPortRight,
|
||||
dPortMound,
|
||||
} from '@/components/splashPaths.js'
|
||||
import Button from './Button.vue'
|
||||
import { useI18n } from '@/i18n/index.js'
|
||||
|
||||
// Bumped from the original 768/900 px split to 1218 px because at
|
||||
// the desktop split layout's narrower widths the tagline column
|
||||
// collides with the figure on the left.
|
||||
const portraitQuery = '(max-width: 1218px)'
|
||||
const isPortrait = ref(false)
|
||||
// `started` flips true one RAF after mount so the layers transition
|
||||
// from their initial offset/hidden state into their final position —
|
||||
// the splash entrance animation, in flow on the page itself.
|
||||
const started = ref(false)
|
||||
let mql = null
|
||||
let onChange = null
|
||||
|
||||
onMounted(() => {
|
||||
if (typeof window !== 'undefined' && window.matchMedia) {
|
||||
mql = window.matchMedia(portraitQuery)
|
||||
isPortrait.value = mql.matches
|
||||
onChange = (e) => { isPortrait.value = e.matches }
|
||||
mql.addEventListener ? mql.addEventListener('change', onChange) : mql.addListener(onChange)
|
||||
}
|
||||
// Defer the `go` flip a frame so the browser commits the initial
|
||||
// (offset / hidden) state before we transition out of it. Without
|
||||
// the rAF the layers paint in their final position and skip the
|
||||
// transition entirely.
|
||||
requestAnimationFrame(() => { started.value = true })
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (mql && onChange) {
|
||||
mql.removeEventListener ? mql.removeEventListener('change', onChange) : mql.removeListener(onChange)
|
||||
}
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
const headlineA = t('home.brand.headline.a')
|
||||
const headlineEm = t('home.brand.headline.em')
|
||||
const headlineB = t('home.brand.headline.b')
|
||||
const since = t('home.brand.since')
|
||||
// Reuses the navbar's "Shop" / "Shop" label — keeps the wording in
|
||||
// step with the top-nav entry point so the user sees the same word
|
||||
// for the same destination.
|
||||
const shopLabel = t('nav.shop')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Desktop SVG.
|
||||
`display: block` removes the inline-svg baseline gap.
|
||||
`mask-image` softens the LEFT and RIGHT edges of the artwork into
|
||||
the brand-green ground while the entrance is in progress so the
|
||||
mint silhouette feels less sheer at the edges. Once the entrance
|
||||
has settled the feather animates back to 0 % so the figure stands
|
||||
fully opaque at rest — the soft edges are an entrance effect, not
|
||||
a permanent sticker frame.
|
||||
The feather amount is held in `--hero-feather`; @property is what
|
||||
makes the percentage interpolate (custom properties don't animate
|
||||
without an explicit type registration). Browsers without
|
||||
@property support snap from 12 % → 0 % at the end of the delay,
|
||||
which is an acceptable graceful degradation. */
|
||||
@property --hero-feather {
|
||||
syntax: '<percentage>';
|
||||
inherits: false;
|
||||
initial-value: 12%;
|
||||
}
|
||||
|
||||
.brand-hero__svg--bg {
|
||||
display: block;
|
||||
--hero-feather: 12%;
|
||||
-webkit-mask-image: linear-gradient(
|
||||
to right,
|
||||
transparent 0%,
|
||||
#000 var(--hero-feather),
|
||||
#000 calc(100% - var(--hero-feather)),
|
||||
transparent 100%
|
||||
);
|
||||
mask-image: linear-gradient(
|
||||
to right,
|
||||
transparent 0%,
|
||||
#000 var(--hero-feather),
|
||||
#000 calc(100% - var(--hero-feather)),
|
||||
transparent 100%
|
||||
);
|
||||
transition: --hero-feather 400ms ease 1850ms;
|
||||
}
|
||||
|
||||
.brand-hero.go .brand-hero__svg--bg {
|
||||
--hero-feather: 0%;
|
||||
}
|
||||
|
||||
.brand-hero__svg--portrait {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 56svh;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Layer fills (matches the splash's resolved palette). */
|
||||
.left-m { fill: #b5d8b6; }
|
||||
.right-m { fill: #b5d8b6; }
|
||||
.mound-m { fill: #ffffff; }
|
||||
|
||||
/* ---------- Entrance animation (replaces SplashIntro) ----------
|
||||
Initial state: figures translated off to their respective sides
|
||||
and hidden, mound and copy hidden. Adding `.go` to the section
|
||||
transitions every layer to its resting position. Delays cascade
|
||||
so the figures land first, the mound fades in once they've
|
||||
landed, and the copy is the last beat — the eye reaches the
|
||||
tagline only after the artwork has settled. */
|
||||
.layer.left-m {
|
||||
opacity: 0;
|
||||
transform: translateX(-14%);
|
||||
transition: transform 800ms cubic-bezier(.22, .61, .36, 1) 150ms,
|
||||
opacity 600ms ease 150ms;
|
||||
}
|
||||
.layer.right-m {
|
||||
opacity: 0;
|
||||
transform: translateX(14%);
|
||||
transition: transform 800ms cubic-bezier(.22, .61, .36, 1) 150ms,
|
||||
opacity 600ms ease 150ms;
|
||||
}
|
||||
.layer.mound-m {
|
||||
opacity: 0;
|
||||
transition: opacity 550ms ease 700ms;
|
||||
}
|
||||
.brand-hero__copy {
|
||||
opacity: 0;
|
||||
transition: opacity 700ms ease 1150ms;
|
||||
}
|
||||
|
||||
.brand-hero.go .layer.left-m,
|
||||
.brand-hero.go .layer.right-m {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
.brand-hero.go .layer.mound-m {
|
||||
opacity: 1;
|
||||
}
|
||||
.brand-hero.go .brand-hero__copy {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Reduced-motion users get the final state immediately — no slide,
|
||||
no fade. The hero is purely decorative animation, so honouring
|
||||
the preference doesn't cost any communicated information. */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.layer.left-m,
|
||||
.layer.right-m,
|
||||
.layer.mound-m,
|
||||
.brand-hero__copy {
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -30,7 +30,7 @@ const props = defineProps({
|
||||
tone: {
|
||||
type: String,
|
||||
default: 'paper',
|
||||
validator: (t) => ['paper', 'cream'].includes(t),
|
||||
validator: (t) => ['paper', 'cream', 'brand'].includes(t),
|
||||
},
|
||||
inStock: { type: Boolean, default: true },
|
||||
href: { type: String, default: '' },
|
||||
@@ -46,11 +46,16 @@ defineEmits(['add'])
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// Media background is pinned to `bg-paper` (white) for both tones
|
||||
// while the product PNGs still carry baked-in solid backgrounds.
|
||||
// Once the imagery is re-exported with transparency we can reinstate
|
||||
// the tone-coupled media tint (paper→cream, cream→paper) for the
|
||||
// subtle surface contrast the DS originally called for.
|
||||
// Each tone pairs a media wash (the image area at the top of the
|
||||
// card) with a body surface (the title / price / CTA cluster
|
||||
// underneath).
|
||||
// · `paper` — historic all-white card.
|
||||
// · `cream` — cream image wash + white body. Homepage ProductTeaser
|
||||
// uses this so the product silhouettes share the cream surface
|
||||
// of the surrounding section.
|
||||
// · `brand` — brand-green image wash + white body. Shop page uses
|
||||
// this so the products read as the brand stage and the cards
|
||||
// pop off the cream catalogue surface.
|
||||
const tones = {
|
||||
paper: {
|
||||
surface: 'bg-paper',
|
||||
@@ -58,8 +63,13 @@ const tones = {
|
||||
border: 'border-line',
|
||||
},
|
||||
cream: {
|
||||
surface: 'bg-cream',
|
||||
media: 'bg-paper',
|
||||
surface: 'bg-paper',
|
||||
media: 'bg-cream',
|
||||
border: 'border-line',
|
||||
},
|
||||
brand: {
|
||||
surface: 'bg-paper',
|
||||
media: 'bg-brand',
|
||||
border: 'border-line',
|
||||
},
|
||||
}
|
||||
|
||||
82
src/design-system/components/ProductTeaser.vue
Normal file
82
src/design-system/components/ProductTeaser.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<!--
|
||||
ProductTeaser.vue
|
||||
-------------------------------------------------------------------
|
||||
Three-card product teaser sitting above the primary product hero on
|
||||
the homepage. Picks one product per use-case (Cook / Clean / Care)
|
||||
so the row reads as a representative sample rather than a curated
|
||||
bestseller list — the "Shop Kaiser Natron" CTA underneath funnels
|
||||
the visitor into the full catalogue.
|
||||
-->
|
||||
<script setup>
|
||||
import { RouterLink } from 'vue-router'
|
||||
import ProductCard from './ProductCard.vue'
|
||||
import Button from './Button.vue'
|
||||
|
||||
defineProps({
|
||||
eyebrow: { type: String, default: '' },
|
||||
headline: { type: String, default: '' },
|
||||
sub: { type: String, default: '' },
|
||||
/** Three products. Card layout assumes a 3-up grid on md+. */
|
||||
products: { type: Array, required: true },
|
||||
ctaLabel: { type: String, default: '' },
|
||||
ctaHref: { type: String, default: '/shop' },
|
||||
tone: {
|
||||
type: String,
|
||||
default: 'cream',
|
||||
validator: (t) => ['cream', 'paper', 'surface'].includes(t),
|
||||
},
|
||||
})
|
||||
|
||||
defineEmits(['add'])
|
||||
|
||||
const tones = {
|
||||
cream: 'bg-cream',
|
||||
paper: 'bg-paper',
|
||||
surface: 'bg-surface',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section
|
||||
:class="[
|
||||
'relative px-6 py-14 sm:px-8 sm:py-16 md:px-12 md:py-20 lg:px-16 lg:py-24',
|
||||
tones[tone],
|
||||
]"
|
||||
>
|
||||
<div class="mx-auto w-full max-w-6xl flex flex-col items-center gap-10 md:gap-14">
|
||||
<header class="flex flex-col items-center gap-3 text-center max-w-2xl">
|
||||
<p v-if="eyebrow" class="eyebrow">{{ eyebrow }}</p>
|
||||
<h2
|
||||
v-if="headline"
|
||||
class="font-display font-normal leading-[1.08] tracking-tight text-ink text-[1.625rem] sm:text-[2rem] md:text-[2.5rem]"
|
||||
>{{ headline }}</h2>
|
||||
<p v-if="sub" class="text-lg leading-relaxed text-muted">{{ sub }}</p>
|
||||
</header>
|
||||
|
||||
<!-- Three-up grid. Stacks on mobile, two-up on md (so the third
|
||||
card doesn't get squashed below 1024px), three-up on lg+. -->
|
||||
<div class="grid w-full grid-cols-1 gap-6 md:grid-cols-2 md:gap-7 lg:grid-cols-3 lg:gap-8">
|
||||
<ProductCard
|
||||
v-for="p in products"
|
||||
:key="p.id"
|
||||
:title="p.name || p.title"
|
||||
:size="p.size || ''"
|
||||
:price="p.price"
|
||||
:image="p.image"
|
||||
:image-alt="p.imageAlt || p.name || p.title"
|
||||
:badge="p.badge || ''"
|
||||
:badge-variant="p.badgeVariant || 'accent'"
|
||||
:href="p.href || (p.id ? `/shop/${p.id}` : '')"
|
||||
tone="brand"
|
||||
@add="$emit('add', p.id)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="ctaLabel" class="flex justify-center">
|
||||
<RouterLink :to="ctaHref" class="inline-flex">
|
||||
<Button variant="primary" size="lg">{{ ctaLabel }}</Button>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -350,6 +350,17 @@ const de = {
|
||||
'home.categories.cook': 'Kochen',
|
||||
'home.categories.care': 'Pflege',
|
||||
|
||||
// Home page – brand hero (top-of-fold, splash artwork settles here).
|
||||
'home.brand.headline.a': 'Kaiser Natron –',
|
||||
'home.brand.headline.em': 'der Premium-Anbieter',
|
||||
'home.brand.headline.b': 'für Reinigen, Kochen, Pflegen.',
|
||||
'home.brand.since': 'seit 1881',
|
||||
// Home page – 3-product teaser sitting between brand hero and product hero.
|
||||
'home.teaser.eyebrow': 'Drei Klassiker',
|
||||
'home.teaser.headline': 'Für jeden Bereich das Richtige.',
|
||||
'home.teaser.sub': 'Ein Beispiel aus jeder Familie – Kochen, Reinigen, Pflegen.',
|
||||
'home.teaser.cta': 'Kaiser Natron Shop',
|
||||
|
||||
// Checkout page (DE).
|
||||
'checkout.eyebrow': 'Bestellung abschließen',
|
||||
'checkout.headline': 'Fast geschafft —',
|
||||
@@ -1012,6 +1023,17 @@ const en = {
|
||||
'home.categories.cook': 'Cook',
|
||||
'home.categories.care': 'Care',
|
||||
|
||||
// Home page – brand hero (top-of-fold, splash artwork settles here).
|
||||
'home.brand.headline.a': 'Kaiser Natron —',
|
||||
'home.brand.headline.em': 'the premium provider',
|
||||
'home.brand.headline.b': 'for Clean, Cook, Care.',
|
||||
'home.brand.since': 'since 1881',
|
||||
// Home page – 3-product teaser sitting between brand hero and product hero.
|
||||
'home.teaser.eyebrow': 'Three classics',
|
||||
'home.teaser.headline': 'One pick from every family.',
|
||||
'home.teaser.sub': 'A flagship for cooking, cleaning and care — three SKUs, one origin.',
|
||||
'home.teaser.cta': 'Shop Kaiser Natron',
|
||||
|
||||
// Checkout page (EN).
|
||||
'checkout.eyebrow': 'Complete your order',
|
||||
'checkout.headline': 'Almost there —',
|
||||
|
||||
@@ -3,6 +3,8 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import Navbar from '@/design-system/components/Navbar.vue'
|
||||
import Hero from '@/design-system/components/Hero.vue'
|
||||
import BrandHero from '@/design-system/components/BrandHero.vue'
|
||||
import ProductTeaser from '@/design-system/components/ProductTeaser.vue'
|
||||
import Bundles from '@/design-system/components/Bundles.vue'
|
||||
import Revitalization from '@/design-system/components/Revitalization.vue'
|
||||
import About from '@/design-system/components/About.vue'
|
||||
@@ -58,6 +60,30 @@ const heroProductId = 'kaiser-natron-pulver-250-g-grosspackung'
|
||||
const imgBanner = '/products/kaiser-natron-bad-500-g.webp'
|
||||
const bannerProductId = 'kaiser-natron-bad-500-g'
|
||||
|
||||
// Brand-hero → product-hero teaser: one SKU per use-case (Cook /
|
||||
// Clean / Care). Avoids duplicating the Pulver 250 g (primary hero)
|
||||
// and Bad 500 g (cream banner) so the row reads as new surface area
|
||||
// rather than a repeat of what's already on screen.
|
||||
const teaserIds = [
|
||||
'kaiser-natron-tabletten-100-g-dose', // cook
|
||||
'kaiser-natron-allzweck-spray-500-ml', // clean
|
||||
'kaiser-natron-fussbad-500-g', // care
|
||||
]
|
||||
const teaserProducts = computed(() =>
|
||||
teaserIds
|
||||
.map((id) => products.find((p) => p.id === id))
|
||||
.filter(Boolean)
|
||||
.map((p) => ({
|
||||
id: p.id,
|
||||
name: p.title,
|
||||
size: p.size,
|
||||
price: p.price,
|
||||
image: p.image,
|
||||
imageAlt: p.title,
|
||||
href: p.href,
|
||||
})),
|
||||
)
|
||||
|
||||
// Homepage top-level nav items — overrides the Navbar default so the
|
||||
// homepage reads as the shop entry point (Shop / Bundles / Revitalisierung
|
||||
// / Über uns) instead of the generic catalogue chrome.
|
||||
@@ -132,7 +158,7 @@ const bundles = [
|
||||
],
|
||||
price: 24.9,
|
||||
memberPrice: 21.17,
|
||||
image: '/products/kaiser-natron-pulver-250-g-grosspackung.webp',
|
||||
image: '/bundles/background/Haushalts-Bundle.webp',
|
||||
imageAlt: 'Haushalts-Bundle mit Kaiser-Natron',
|
||||
badge: 'Bestseller',
|
||||
badgeVariant: 'accent',
|
||||
@@ -144,7 +170,7 @@ const bundles = [
|
||||
items: ['1× Holste Wasch-Soda 500 g', '1× Gazelle Wäschestärke 1 l', '1× Linda Fleckenweg 200 ml'],
|
||||
price: 22.9,
|
||||
memberPrice: 19.47,
|
||||
image: '/products/kaiser-natron-pulver-250-g-grosspackung.webp',
|
||||
image: '/bundles/background/Wäsche & Pflege-Bundle.webp',
|
||||
imageAlt: 'Wäsche & Pflege Bundle',
|
||||
badge: '',
|
||||
badgeVariant: 'accent',
|
||||
@@ -156,7 +182,7 @@ const bundles = [
|
||||
items: ['1× Kaiser-Natron Tabletten 100 g', '1× Kaiser-Natron Bad 500 g', '1× Kaiser-Natron Fußbad 500 g'],
|
||||
price: 29.9,
|
||||
memberPrice: 25.42,
|
||||
image: '/products/kaiser-natron-bad-500-g.webp',
|
||||
image: '/bundles/background/Wohlfühl_Bundle.webp',
|
||||
imageAlt: 'Wohlfühl-Bundle mit Kaiser-Natron Bad',
|
||||
badge: '',
|
||||
badgeVariant: 'accent',
|
||||
@@ -173,6 +199,12 @@ async function onBannerAdd() {
|
||||
cartOpen.value = true
|
||||
}
|
||||
|
||||
async function onTeaserAdd(productId) {
|
||||
if (!productId) return
|
||||
await addToCart(productId, 1)
|
||||
cartOpen.value = true
|
||||
}
|
||||
|
||||
// Bundles share a single "add" handler. Until the backend exposes a
|
||||
// real bundle SKU endpoint, the UI stand-in adds the bundle's anchor
|
||||
// product to the cart so the user gets visible feedback. The mapping
|
||||
@@ -274,42 +306,86 @@ onBeforeUnmount(() => {
|
||||
/>
|
||||
<!-- First-fold wrapper — full viewport height, pulled up under the
|
||||
sticky nav via a negative margin equal to `--nav-h`. The nav
|
||||
and the wrapper share the brand green, so the overlap reads as
|
||||
a single continuous surface, and the hero centers at the TRUE
|
||||
viewport vertical midpoint (50svh) rather than the midpoint of
|
||||
the nav-offset space below it. The wave divider sits OUTSIDE
|
||||
this wrapper so it never eats vertical space from the centering
|
||||
calculation. `--nav-h` is defaulted in global CSS so first
|
||||
paint is correct; a ResizeObserver refines it on mount. -->
|
||||
and the wrapper share the brand green so the overlap reads as
|
||||
one continuous surface. Hosts the BrandHero — same illustration
|
||||
the SplashIntro overlay leaves behind, so the splash dismiss
|
||||
fades into a matching in-page artwork with no visual seam. -->
|
||||
<div
|
||||
class="flex flex-col bg-brand md:min-h-[calc(100svh-var(--nav-h))] md:justify-center"
|
||||
>
|
||||
<Hero
|
||||
class="w-full"
|
||||
variant="split"
|
||||
tone="brand"
|
||||
:subheadline="t('ds.hero.sub')"
|
||||
:image="imgPulver250"
|
||||
image-alt="Kaiser-Natron Pulver 250 g Großpackung"
|
||||
:cta-label="t('ds.buttons.addToCart')"
|
||||
:secondary-label="t('ds.buttons.learnMore')"
|
||||
:secondary-href="`/shop/${heroProductId}`"
|
||||
@cta="onHeroAdd"
|
||||
>
|
||||
<template #headline>
|
||||
{{ t('ds.hero.headline.a') }}
|
||||
<em class="italic font-light text-accent-soft">{{ t('ds.hero.headline.em') }}</em>
|
||||
{{ t('ds.hero.headline.b') }}
|
||||
</template>
|
||||
</Hero>
|
||||
<BrandHero class="w-full" />
|
||||
</div>
|
||||
|
||||
<!-- Wave divider from brand-green → cream. Sits OUTSIDE the fold
|
||||
wrapper so it doesn't steal vertical space from the hero's
|
||||
centering. The SVG is fully opaque: a cream rect fills the
|
||||
whole viewBox so the SVG's bottom row is solid cream (matches
|
||||
the banner below → no seam), and a green path paints the top
|
||||
portion (matches the bg-brand fold above → no seam). -->
|
||||
<!-- Wave brand → cream. Mirrors the existing pattern: rect = dest
|
||||
colour (cream), path = source colour (brand), parent painted in
|
||||
source so the seam disappears against the section above. -->
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="block w-full h-12 md:h-16 shrink-0 -mb-px bg-brand"
|
||||
viewBox="0 0 1440 64"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<rect width="1440" height="64" fill="var(--color-cream)" />
|
||||
<path
|
||||
d="M0,0 L0,40 C320,4 520,60 720,32 C920,4 1120,60 1440,24 L1440,0 Z"
|
||||
fill="var(--color-brand)"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<!-- Three-product teaser — one SKU per Cook/Clean/Care use-case,
|
||||
cream surface, "Shop Kaiser Natron" CTA underneath funnels
|
||||
into the full catalogue. -->
|
||||
<ProductTeaser
|
||||
class="-mt-px"
|
||||
:eyebrow="t('home.teaser.eyebrow')"
|
||||
:headline="t('home.teaser.headline')"
|
||||
:sub="t('home.teaser.sub')"
|
||||
:products="teaserProducts"
|
||||
:cta-label="t('home.teaser.cta')"
|
||||
cta-href="/shop"
|
||||
tone="cream"
|
||||
@add="onTeaserAdd"
|
||||
/>
|
||||
|
||||
<!-- Wave cream → brand — sets up the existing Pulver product hero,
|
||||
which keeps its brand-green ground. rect = brand (dest), path =
|
||||
cream (source), parent painted cream. -->
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="block w-full h-12 md:h-16 shrink-0 -mb-px bg-cream"
|
||||
viewBox="0 0 1440 64"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<rect width="1440" height="64" fill="var(--color-brand)" />
|
||||
<path
|
||||
d="M0,0 L0,40 C320,4 520,60 720,32 C920,4 1120,60 1440,24 L1440,0 Z"
|
||||
fill="var(--color-cream)"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<!-- Existing Pulver 250 g hero — moved out of the first-fold
|
||||
wrapper since BrandHero now owns the first fold. Sits on
|
||||
brand-green via `tone="brand"`. -->
|
||||
<Hero
|
||||
class="-mt-px w-full"
|
||||
variant="split"
|
||||
tone="brand"
|
||||
:subheadline="t('ds.hero.sub')"
|
||||
:image="imgPulver250"
|
||||
image-alt="Kaiser-Natron Pulver 250 g Großpackung"
|
||||
:cta-label="t('ds.buttons.addToCart')"
|
||||
:secondary-label="t('ds.buttons.learnMore')"
|
||||
:secondary-href="`/shop/${heroProductId}`"
|
||||
@cta="onHeroAdd"
|
||||
>
|
||||
<template #headline>
|
||||
{{ t('ds.hero.headline.a') }}
|
||||
<em class="italic font-light text-accent-soft">{{ t('ds.hero.headline.em') }}</em>
|
||||
{{ t('ds.hero.headline.b') }}
|
||||
</template>
|
||||
</Hero>
|
||||
|
||||
<!-- Wave brand → cream for the second-fold cream banner. -->
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="block w-full h-12 md:h-16 shrink-0 -mb-px bg-brand"
|
||||
@@ -326,9 +402,7 @@ onBeforeUnmount(() => {
|
||||
<!-- Second-fold product banner — same Hero component, cream surface,
|
||||
split layout reversed so the product sits on the left. `compact`
|
||||
tightens the desktop media sizing so this section reads as a
|
||||
companion band, not a second full hero stage. The -mt-px pairs
|
||||
with the wave's -mb-px to overlap the two sections by 1 CSS
|
||||
pixel and hide any device-pixel seam. -->
|
||||
companion band, not a second full hero stage. -->
|
||||
<Hero
|
||||
class="-mt-px"
|
||||
variant="split"
|
||||
|
||||
@@ -241,7 +241,7 @@ onBeforeUnmount(() => {
|
||||
:image="product.image"
|
||||
:image-alt="product.title"
|
||||
:href="product.href"
|
||||
tone="cream"
|
||||
tone="brand"
|
||||
:in-stock="product.inStock"
|
||||
:cta-variant="i % 2 === 1 ? 'accent' : 'primary'"
|
||||
@add="onAdd(product)"
|
||||
|
||||
Reference in New Issue
Block a user