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/29m25k6c5-ipo.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/29m25k6c5-ipo.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/29m25k6c5-ipo.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/29m25k6c5-ipo.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:Te5e,import { cva } from "class-variance-authority"; import { cn } from "@/lib/utils"; import type { Brand, Product, ProductImage } 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 type { Cta } from "../../ui/_kit/types"; import { MarqueeStrip } from "../../landing/marquee-strip/marquee-strip"; import "../../ui/_kit/kit.css"; const content = cva("relative z-10 flex flex-col gap-5 px-4 pb-10 md:px-8 md:pb-14", { variants: { variant: { "bottom-start": "items-start justify-end text-start", center: "items-center justify-center text-center", "with-ticker": "items-start justify-end text-start", }, }, defaultVariants: { variant: "bottom-start" }, }); export type HeroFullBleedProps = { brand: Brand; /** Full-bleed image: a product mockup or a lifestyle shot. */ image: ProductImage; headline: string; eyebrow?: string; sub?: string; cta?: Cta; secondaryCta?: Cta; /** Shown in the ticker (with-ticker). */ products?: Product[]; variant?: "bottom-start" | "center" | "with-ticker"; /** Scale the image up so flat-lay mockups lose their white ground at wide aspect ratios. Leave off for lifestyle photos. */ zoom?: boolean; className?: string; }; /** Edge-to-edge image, headline overlaid on a token scrim. */ export function HeroFullBleed({ brand, image, headline, eyebrow, sub, cta, secondaryCta, products = [], variant = "bottom-start", zoom = false, className, }: HeroFullBleedProps) { const centered = variant === "center"; return (

{eyebrow ? {eyebrow} : null}

{headline}

{sub ?

{sub}

: null} {cta || secondaryCta ? (

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

) : null}

{variant === "with-ticker" && products.length > 0 ? ( ({ kind: "text" as const, label: product.title }))} className="relative z-10" /> ) : null}

); } export default HeroFullBleed; 32:Tb3e,import type { ReactNode } from "react"; import { cn } from "@/lib/utils"; import type { Product } from "../../../lib/commerce/types"; import { ProductPicture } from "../../ui/_kit/product-picture"; import { defaultProductHref, type ProductHref } from "../../ui/_kit/types"; import { Marquee, type MarqueeProps } from "./marquee"; export { Marquee } from "./marquee"; export type MarqueeItem = | { kind: "text"; label: string } | { kind: "product"; product: Product } | { kind: "node"; node: ReactNode }; export type MarqueeStripProps = Pick & { items: MarqueeItem[]; /** `ink` is a filled tape, `plain` sits on the canvas, `outline` is stroked type. */ tone?: "ink" | "plain" | "outline"; /** Text size. Display sizes use the brand face and CAPS token. */ size?: "micro" | "display-m" | "display-l"; productHref?: ProductHref; label?: string; className?: string; }; const TONE = { ink: "bg-ink text-canvas", plain: "border-y border-rule text-ink", outline: "border-y border-rule text-transparent [-webkit-text-stroke:1.5px_var(--kc-ink)]", } as const; const SIZE = { micro: "micro py-2.5", "display-m": "display-m py-3", "display-l": "display-l py-4", } as const; function Dot() { return ; } /** Generic marquee of text, product thumbs or custom nodes, separated by a dot. Reused by heroes and the announcement bar. */ export function MarqueeStrip({ items, tone = "ink", size = "micro", direction, speed, pauseOnHover, fill = 2, productHref = defaultProductHref, label, className, }: MarqueeStripProps) { if (items.length === 0) return null; const nodes = items.flatMap((item, i) => { const content = item.kind === "text" ? ( {item.label} ) : item.kind === "product" ? ( {item.product.title} ) : ( {item.node} ); return [content, ]; }); return ( {nodes} ); } export default MarqueeStrip; 33:T7e7,import { Children, Fragment, type ReactNode } from "react"; import { cn } from "@/lib/utils"; import "./marquee.css"; export type MarqueeProps = { children: ReactNode; direction?: "forward" | "reverse"; /** Full loop duration. */ speed?: "slow" | "normal" | "fast"; /** Pause while hovered. Always pauses on keyboard focus inside. */ pauseOnHover?: boolean; /** Repeat the children this many times inside one copy; raise it when the content is short. */ fill?: number; /** Tailwind gap class between items, also the trailing space so the seam matches. */ gap?: "gap-4" | "gap-6" | "gap-8" | "gap-12"; className?: string; /** Applied to the visible region as an accessible name. */ label?: string; }; const DURATION = { slow: "[--kc-marquee-duration:70s]", normal: "[--kc-marquee-duration:40s]", fast: "[--kc-marquee-duration:22s]", } as const; const TRAIL = { "gap-4": "pe-4", "gap-6": "pe-6", "gap-8": "pe-8", "gap-12": "pe-12" } as const; /** * Scrolling marquee primitive (exported for other blocks). CSS-only motion: transform on one * track, pauses on hover, static under motion-reduce. The second copy is aria-hidden. */ export function Marquee({ children, direction = "forward", speed = "normal", pauseOnHover = true, fill = 1, gap = "gap-8", className, label, }: MarqueeProps) { const items = Children.toArray(children); const copy = Array.from({ length: Math.max(1, fill) }, (_, i) => {items}); const copyClass = cn("kc-marquee-copy flex shrink-0 items-center", gap, TRAIL[gap]); return (

{copy}

); } 34:T4c0,/* * Marquee primitive. Two copies of the content sit in one track that slides by half its width, * so the loop is seamless. Pauses on hover and focus (hover-capable pointers only). * Under prefers-reduced-motion it is static: one copy, scrollable, nothing cut off. */ @keyframes kc-marquee { to { transform: translateX(-50%); } } @keyframes kc-marquee-reverse { from { transform: translateX(-50%); } to { transform: translateX(0); } } .kc-marquee { overflow: hidden; } .kc-marquee-track { display: flex; width: max-content; animation: kc-marquee var(--kc-marquee-duration, 40s) linear infinite; will-change: transform; } .kc-marquee[data-direction="reverse"] .kc-marquee-track { animation-name: kc-marquee-reverse; } .kc-marquee:focus-within .kc-marquee-track { animation-play-state: paused; } @media (hover: hover) { .kc-marquee[data-pause="true"]:hover .kc-marquee-track { animation-play-state: paused; } } @media (prefers-reduced-motion: reduce) { .kc-marquee { overflow-x: auto; scrollbar-width: none; } .kc-marquee-track { animation: none; will-change: auto; } .kc-marquee-copy[aria-hidden="true"] { display: none; } } 35: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 ( ); } 36: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}

); } 37: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; } } 38:T4a1,import { HeroFullBleed } from "./hero-full-bleed"; import { brandFixture, featuredProducts } from "../../../lib/commerce/fixtures/heroes"; import { DemoStack, VariantFrame } from "../../ui/_kit/variant-frame"; export function HeroFullBleedDemo({ brand }: { brand?: string }) { const f = brandFixture(brand); const products = featuredProducts(f); const base = { brand: f.brand, image: f.lifestyle ?? products[0].featuredImage, headline: f.hero.headline, eyebrow: f.hero.eyebrow, sub: f.hero.sub, cta: f.hero.cta, secondaryCta: { label: "about", href: "/about" }, zoom: !f.lifestyle, }; return ( ); } export default HeroFullBleedDemo; 39:T67a,import type { BlockMeta } from "../../../lib/block-meta"; export const heroFullBleedMeta: BlockMeta = { slug: "hero-full-bleed", title: "Hero: full-bleed image", description: "Edge-to-edge product or lifestyle image with the headline overlaid on a token scrim. Bottom-start, centered, or with a ticker.", group: "heroes", kobraDeps: ["button"], files: [ "blocks/heroes/hero-full-bleed/hero-full-bleed.tsx", "blocks/landing/marquee-strip/marquee-strip.tsx", "blocks/landing/marquee-strip/marquee.tsx", "blocks/landing/marquee-strip/marquee.css", "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: "image", type: "ProductImage", description: "Full-bleed image." }, { 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: "products", type: "Product[]", default: "[]", description: "Ticker items (with-ticker)." }, { name: "zoom", type: "boolean", default: "false", description: "Scale flat-lay mockups to fill wide aspect ratios." }, { name: "variant", type: "'bottom-start' | 'center' | 'with-ticker'", default: "'bottom-start'", description: "Text placement." }, ], tags: ["hero", "image", "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: full-bleed image"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Hero: full-bleed image"}],["$","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":"Edge-to-edge product or lifestyle image with the headline overlaid on a token scrim. Bottom-start, centered, or with a ticker."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"hero-full-bleed","group":"heroes","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/heroes/hero-full-bleed/hero-full-bleed.tsx","code":"$31"},{"path":"blocks/landing/marquee-strip/marquee-strip.tsx","code":"$32"},{"path":"blocks/landing/marquee-strip/marquee.tsx","code":"$33"},{"path":"blocks/landing/marquee-strip/marquee.css","code":"$34"},{"path":"blocks/ui/cta/cta.tsx","code":"$35"},{"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":"$36"},{"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":"$37"},{"path":"blocks/heroes/hero-full-bleed/demo.tsx","code":"$38"},{"path":"blocks/heroes/hero-full-bleed/meta.ts","code":"$39"}]}],"props":"$L3a"}],"$L3b"]}]