fe28c47c7c
Bundle data extracted to src/api/bundles.js (single source of truth shared by HomePage's grid and the new BundlePage). Each card on the home grid now links to the bundle's detail route. BundleCard's `imageFit` default flipped to `cover` to match the new /bundles/background/* artwork — full-bleed lifestyle scenes instead of padded product line-ups. The `contain` mode stays available for future bundles whose art needs breathing room. BundlePage layout: split brand-green hero with the bundle artwork on the left, name + items list (linking to component product pages where matched) + pricing + qty + add-to-cart on the right. Mirrors ProductPage chrome (Navbar, dynamic back button, CartDrawer) so the detail-page experience reads as one piece across SKUs and bundles. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
10 lines
1.7 KiB
JavaScript
10 lines
1.7 KiB
JavaScript
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-yr4x-3Jp.js";import{t as l}from"./SectionShell-CyPmh1h8.js";import{t as u}from"./DevicePreview-BQG4JYnV.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')"
|
|
:milestones="[1, 2, 3].map((i) => ({
|
|
year: t(\`about.milestone.\${i}.year\`),
|
|
title: t(\`about.milestone.\${i}.title\`),
|
|
text: t(\`about.milestone.\${i}.text\`),
|
|
}))"
|
|
/>`)],-1)]),p[1]||=s(`section`,null,[s(`h2`,{class:`eyebrow mb-5`},`Tone sequence`),s(`p`,{class:`text-sm text-muted max-w-2xl`},[o(` The three milestone cards cycle the Card primitive's tones left-to-right: `),s(`code`,{class:`font-mono text-[12px]`},`paper`),o(` → `),s(`code`,{class:`font-mono text-[12px]`},`cream`),o(` → `),s(`code`,{class:`font-mono text-[12px]`},`brand`),o(`. The sequence is part of the component's visual contract and is not configurable — see `),s(`code`,{class:`font-mono text-[12px]`},`CARD_TONES`),o(` in `),s(`code`,{class:`font-mono text-[12px]`},`About.vue`),o(`. `)])],-1)]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{p as default}; |