14 lines
2.9 KiB
JavaScript
14 lines
2.9 KiB
JavaScript
import{A as e,S as t,W as n,c as r,ct as i,m as a,o,ot as s,p as c,r as l,s as u,st as d,u as f,w as p,z as m}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as h}from"./i18n-BxXwPz8H.js";import{t as g}from"./SectionShell-CHsfR9Y3.js";import{t as _}from"./DevicePreview-Dj1SP-lv.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=o(()=>[{id:`split`,label:w(`ds.hero.variant.split`)},{id:`centered`,label:w(`ds.hero.variant.centered`)}]),E=o(()=>[{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=m(`split`),O=m(`cream`),k=o(()=>`/design/preview/hero?variant=${D.value}&tone=${O.value}`);return(o,m)=>(t(),r(g,{eyebrow:n(w)(`ds.eyebrow.components`),title:n(w)(`ds.hero.title`),description:n(w)(`ds.hero.description`),wide:``},{default:e(()=>[u(`section`,null,[a(_,{src:k.value,initial:`desktop`,height:760},{controls:e(()=>[u(`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),f(l,null,p(T.value,e=>(t(),f(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":D.value===e.id,class:s([`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},i(e.label),11,y))),128))],8,v),u(`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),f(l,null,p(E.value,e=>(t(),f(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":O.value===e.id,class:s([`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},[u(`span`,{class:`w-2.5 h-2.5 rounded-full border border-line-strong`,style:d({backgroundColor:e.swatch})},null,4),c(` `+i(e.label),1)],10,x))),128))],8,b)]),_:1},8,[`src`])]),u(`section`,null,[u(`h2`,S,i(n(w)(`ds.heading.usage`)),1),m[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`},`<Hero
|
|
variant="split"
|
|
tone="cream"
|
|
eyebrow="Neu"
|
|
headline="Kaiser-Natron Pulver"
|
|
subheadline="Reinigt. Backt. Neutralisiert."
|
|
image="/products/cutouts/…-removebg-preview.png"
|
|
image-alt="Kaiser-Natron Pulver 250 g"
|
|
badge="Bestseller"
|
|
cta-label="In den Warenkorb"
|
|
secondary-label="Mehr erfahren"
|
|
@cta="addToCart(sku)"
|
|
@secondary="router.push('/anwendungen')"
|
|
/>`)],-1)])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{C as default}; |