2d:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2e:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2f:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 30:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 31:T17ba,import { cn } from "@/lib/utils"; import type { Brand, Product } from "../../../lib/commerce/types"; import { CtaButton, CtaLink } from "../../ui/cta/cta"; import { Eyebrow } from "../../ui/eyebrow/eyebrow"; import { ProductPicture } from "../../ui/_kit/product-picture"; import { headlineScale, RISE } from "../../ui/_kit/hero"; import { defaultProductHref, type Cta, type ProductHref } from "../../ui/_kit/types"; import "../../ui/_kit/kit.css"; const DARK_GARMENT = /\b(black|dark|navy|charcoal)\b/i; export type HeroStackedProductProps = { brand: Brand; product: Product; /** Extra products fanned behind the window (variant `window`). */ behind?: Product[]; headline: string; eyebrow?: string; sub?: string; cta?: Cta; secondaryCta?: Cta; variant?: "stacked" | "window"; /** Garment lightness, which sets the hairline around it. `auto` guesses from the image alt/src (black, dark, navy = dark). */ tone?: "auto" | "light" | "dark"; productHref?: ProductHref; className?: string; }; function Dots() { return ( ); } /** * Solid ink title behind the garment: the title is wider than the garment well so it reads at both ends * and appears to pass behind it. The well carries a hairline whose strength follows the garment `tone`. * `window` frames the product in a retro OS title-bar card (lonelyboi) with the headline beside it. */ export function HeroStackedProduct({ brand, product, behind = [], headline, eyebrow, sub, cta, secondaryCta, variant = "stacked", tone = "auto", productHref = defaultProductHref, className, }: HeroStackedProductProps) { const scale = headlineScale(headline, brand); const actions = cta || secondaryCta ? (

{cta ? {cta.label} : null} {secondaryCta ? {secondaryCta.label} : null}

) : null; if (variant === "window") { const words = headline.split(" "); const last = words.pop(); return (

{eyebrow ? {eyebrow} : null}

{words.join(" ")}{" "} {last}

{sub ?

{sub}

: null} {actions}

{behind.slice(0, 2).map((p, i) => (

); } const dark = tone === "dark" || (tone === "auto" && DARK_GARMENT.test(`${product.featuredImage.alt} ${product.featuredImage.src}`)); return (

{/* Solid ink title layer: wider than the garment well, so it reads at both ends and passes behind it. */}

{headline}

{eyebrow ? {eyebrow} : null} {sub ?

{sub}

: null} {actions}

); } export default HeroStackedProduct; 32:T630,"use client"; import type { ReactNode } from "react"; import { IconArrowRight } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; type Common = { href: string; children: ReactNode; className?: string; onClick?: () => void; }; /** * The one primary call to action: a Kobra Button rendered as a link. * `size="hero"` is a 44px hit area for the big moments; otherwise Kobra's own sizes apply. */ export function CtaButton({ href, children, className, onClick, variant = "default", size = "hero", }: Common & { variant?: "default" | "outline" | "secondary"; size?: "hero" | "default" | "lg"; }) { return ( ); } /** The quiet second action: an underlined text link with a trailing arrow. */ export function CtaLink({ href, children, className, onClick }: Common) { return ( ); } 33:T50a,import type { ProductImage } from "../../../lib/commerce/types"; import { cn } from "@/lib/utils"; export type ProductPictureProps = { image: ProductImage; /** `sizes` attribute. Defaults to a half-viewport guess. */ sizes?: string; loading?: "eager" | "lazy"; /** Use for the one above-the-fold LCP image. */ priority?: boolean; className?: string; }; /** * Plain for a product mockup. Uses the 600px twin as the small source when one exists, * always carries width/height so the box is reserved before the image arrives. */ export function ProductPicture({ image, sizes = "(min-width: 768px) 50vw, 100vw", loading = "lazy", priority = false, className, }: ProductPictureProps) { const width = image.width ?? 1200; const height = image.height ?? 1200; return ( // eslint-disable-next-line @next/next/no-img-element {image.alt}

); } 34:T5ef,/* * Shared motion for the heroes and landing blocks. Plain CSS because it owns keyframes. * Everything here answers prefers-reduced-motion. Easing and durations are the Kobra house numbers. */ /* Entrance: opacity + 8px rise, 220ms --ease-out, staggered 80ms by --kc-i, delay capped at 600ms. */ @keyframes kc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .kc-rise { animation: kc-rise 220ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) both; animation-delay: min(calc(var(--kc-i, 0) * 80ms), 600ms); } /* Retro blinking caret (lonelyboi window). */ @keyframes kc-blink { 50% { opacity: 0; } } .kc-caret { animation: kc-blink 1.1s steps(1) infinite; } /* Hotspot ping ring (lookbook). */ @keyframes kc-ping { from { opacity: 0.5; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } } .kc-ping { animation: kc-ping 1.8s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) infinite; } @media (prefers-reduced-motion: reduce) { .kc-rise, .kc-caret, .kc-ping { animation: none; } } /* Typing indicator dots (chat-feed). */ @keyframes kc-typing { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } .kc-typing-dot { animation: kc-typing 1.1s var(--ease-out, ease-out) infinite; } @media (prefers-reduced-motion: reduce) { .kc-typing-dot { animation: none; opacity: 0.6; } } 35:T622,import type { BlockMeta } from "../../../lib/block-meta"; export const heroStackedProductMeta: BlockMeta = { slug: "hero-stacked-product", title: "Hero: stacked product", description: "Solid ink title passing behind a hairline-framed garment well. The window variant frames the product in a retro OS title-bar card.", group: "heroes", kobraDeps: ["button"], files: [ "blocks/heroes/hero-stacked-product/hero-stacked-product.tsx", "blocks/ui/cta/cta.tsx", "blocks/ui/eyebrow/eyebrow.tsx", "blocks/ui/_kit/product-picture.tsx", "blocks/ui/_kit/hero.ts", "blocks/ui/_kit/types.ts", "blocks/ui/_kit/kit.css", ], props: [ { name: "brand", type: "Brand", description: "Drives headline scale." }, { name: "product", type: "Product", description: "The stacked product." }, { name: "behind", type: "Product[]", default: "[]", description: "Ghost windows fanned behind (window)." }, { name: "headline", type: "string", description: "Display headline." }, { name: "eyebrow", type: "string", description: "Mono label." }, { name: "sub", type: "string", description: "Supporting sentence." }, { name: "cta", type: "Cta", description: "Primary button." }, { name: "tone", type: "'auto' | 'light' | 'dark'", default: "'auto'", description: "Garment lightness for the hairline; auto guesses from the image alt/src." }, { name: "variant", type: "'stacked' | 'window'", default: "'stacked'", description: "Layering or retro window." }, ], tags: ["hero", "layered", "landing"], status: "ready", }; 24:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/#heroes","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Heroes"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Hero: stacked product"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Hero: stacked product"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Solid ink title passing behind a hairline-framed garment well. The window variant frames the product in a retro OS title-bar card."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"hero-stacked-product","group":"heroes","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/heroes/hero-stacked-product/hero-stacked-product.tsx","code":"$31"},{"path":"blocks/ui/cta/cta.tsx","code":"$32"},{"path":"blocks/ui/eyebrow/eyebrow.tsx","code":"import type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/** Small mono label that sits above a headline. */\nexport function Eyebrow({\n children,\n className,\n as: Tag = \"p\",\n}: {\n children: ReactNode;\n className?: string;\n as?: \"p\" | \"span\" | \"div\";\n}) {\n return {children};\n}\n\nexport default Eyebrow;\n"},{"path":"blocks/ui/_kit/product-picture.tsx","code":"$33"},{"path":"blocks/ui/_kit/hero.ts","code":"import type { Brand } from \"../../../lib/commerce/types\";\n\n/** Stagger steps for the one-time entrance (80ms apart, capped at 600ms in kit.css). Full class names on purpose. */\nexport const RISE = [\n \"kc-rise [--kc-i:0]\",\n \"kc-rise [--kc-i:1]\",\n \"kc-rise [--kc-i:2]\",\n \"kc-rise [--kc-i:3]\",\n \"kc-rise [--kc-i:4]\",\n \"kc-rise [--kc-i:5]\",\n \"kc-rise [--kc-i:6]\",\n] as const;\n\n/**\n * display-xl for short headlines, display-l when the line is long enough that display-xl would\n * run past three lines. Condensed CAPS faces (nopermission) carry roughly twice the characters.\n */\nexport function headlineScale(\n headline: string,\n brand: Pick,\n /** Set when the headline shares the row with an image (half width): always display-l. */\n half = false,\n): \"display-xl\" | \"display-l\" {\n if (half) return \"display-l\";\n const limit = brand.voice.caps ? 40 : 22;\n return headline.length > limit ? \"display-l\" : \"display-xl\";\n}\n"},{"path":"blocks/ui/_kit/types.ts","code":"import type { Product } from \"../../../lib/commerce/types\";\n\n/** A call to action: label and where it goes. */\nexport type Cta = { label: string; href: string };\n\n/** A navigation link. `href: null` renders as plain text (no destination yet). */\nexport type NavLink = { label: string; href: string | null };\n\n/** Where a product tile links. Override with the `productHref` prop on any block. */\nexport const defaultProductHref = (p: Product) => `/products/${p.handle}`;\n\nexport type ProductHref = (product: Product) => string;\n"},{"path":"blocks/ui/_kit/kit.css","code":"$34"},{"path":"blocks/heroes/hero-stacked-product/demo.tsx","code":"import { HeroStackedProduct } from \"./hero-stacked-product\";\nimport { brandFixture, featuredProducts } from \"../../../lib/commerce/fixtures/heroes\";\nimport { DemoStack, VariantFrame } from \"../../ui/_kit/variant-frame\";\n\nexport function HeroStackedProductDemo({ brand }: { brand?: string }) {\n const f = brandFixture(brand);\n const [first, ...rest] = featuredProducts(f, 4);\n const base = {\n brand: f.brand,\n product: first,\n behind: rest.slice(0, 2),\n headline: f.hero.headline,\n eyebrow: f.hero.eyebrow,\n sub: f.hero.sub,\n cta: f.hero.cta,\n secondaryCta: { label: \"about\", href: \"/about\" },\n };\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nexport default HeroStackedProductDemo;\n"},{"path":"blocks/heroes/hero-stacked-product/meta.ts","code":"$35"}]}],"props":"$L36"}],"$L37"]}]