4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:Tfb3,/** * HeroSplit — copy on one side, media on the other. * * `media` is a plain `ReactNode` slot rather than an image prop, because a split * hero's media is a one-off: a screenshot, a video, an illustration, a live * demo. Passing `` straight in is simpler than any indirection this * file could offer, and it keeps the section free of framework imports. * * a11y: on narrow screens the copy comes first in both DOM and visual order, so * reading order and tab order agree. `reverse` swaps the columns on large * screens only, with `lg:order-*`, which keeps that guarantee intact — reversing * the DOM instead would put the media ahead of the headline for screen readers. * * Dependencies: react, @/lib/types, @/lib/utils, * @/components/ui/container, @/components/ui/cta-group, @/components/ui/eyebrow, * @/components/ui/heading, @/components/ui/section. */ import type { ElementType, ReactNode } from "react" import type { CtaItem, HeadingLevel, LinkComponent, StackSlotProps, } from "@/lib/types" import { cn, slugId } from "@/lib/utils" import { Container } from "@/components/ui/container" import { CtaGroup } from "@/components/ui/cta-group" import { Eyebrow } from "@/components/ui/eyebrow" import { Heading } from "@/components/ui/heading" import { Section } from "@/components/ui/section" export interface HeroSplitProps extends StackSlotProps { title: string description?: string eyebrow?: ReactNode actions?: CtaItem[] link?: LinkComponent note?: ReactNode banner?: ReactNode /** The right-hand column. Pass ``, a video, or anything else. */ media?: ReactNode /** Extra content under the buttons, such as a logo strip or a stat row. */ children?: ReactNode /** Puts the media on the left from `lg` up. Does not change DOM order. */ reverse?: boolean headingLevel?: HeadingLevel size?: "md" | "lg" as?: "section" | "div" spacing?: "sm" | "md" | "lg" | "none" className?: string id?: string } const titleSizes = { md: "text-display-sm", lg: "text-display-md" } as const export function HeroSplit({ title, description, eyebrow, actions, link, note, banner, media, children, reverse = false, stackAs, blockAs, headingLevel = 1, size = "lg", as = "div", spacing = "lg", className, id, }: HeroSplitProps) { const Stack = (stackAs ?? "div") as ElementType const Block = (blockAs ?? "div") as ElementType const titleId = id ? `${id}-title` : slugId(title) return (

{banner ? {banner} : null} {eyebrow ? ( {eyebrow} ) : null} {title} {description ? (

{description}

) : null} {actions?.length ? ( ) : null} {note ? (

{note}

) : null} {children ? {children} : null} {media ? (

{media}

) : null}

) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@facade","registryDependencies":["https://facadeui.dev/r/container.json","https://facadeui.dev/r/cta-group.json","https://facadeui.dev/r/eyebrow.json","https://facadeui.dev/r/heading.json","https://facadeui.dev/r/section.json","https://facadeui.dev/r/types.json","https://facadeui.dev/r/utils.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/sections/hero-split.tsx","content":"$50","type":"registry:component","target":"components/sections/hero-split.tsx"}],"className":"h-[70svh] min-h-80"}]]}]