// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Hero 09 * @description A bold magazine/editorial-style hero with extra large typography, * vertical accent text, and a prominent image. Creates a sophisticated, * publication-quality aesthetic with strong typographic hierarchy. * * @slots hero, hero-container, hero-layout, hero-vertical-text, * hero-content, hero-eyebrow, hero-heading, hero-description, * hero-cta-group, hero-primary-cta, hero-link-cta, * hero-image-section, hero-image-wrapper, hero-image, hero-caption * @variant editorial * * @registryDependencies button-link * @dependencies lucide-react */ import * as React from "react" import { ArrowRight, ArrowUpRight } from "lucide-react" import { cn } from "@/registry/lib/utils" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ interface CtaConfig { /** Button text */ text: string /** Link destination */ href: string } interface ImageConfig { /** Image source URL */ src: string /** Alt text for accessibility */ alt: string /** Optional image caption */ caption?: string } interface Hero09Props { /** Eyebrow text above heading */ eyebrow?: string /** Vertical accent text (displayed rotated on desktop) */ verticalText?: string /** Main heading text - supports line breaks with \n */ heading?: string /** Supporting description paragraph */ description?: string /** Primary CTA button */ primaryCta?: CtaConfig /** Text link CTA */ linkCta?: CtaConfig /** Hero image configuration */ image?: ImageConfig /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_PRIMARY_CTA: CtaConfig = { text: "Get Started", href: "#", } const DEFAULT_LINK_CTA: CtaConfig = { text: "Learn more", href: "#", } const DEFAULT_IMAGE: ImageConfig = { src: "/assets/placeholders/placeholder-16x9.svg", alt: "Featured image", caption: "Building better software, faster", } // ============================================================================ // COMPONENT // ============================================================================ function Hero09({ eyebrow = "Featured Story", verticalText = "01", heading = "From Concept\nto Launch", description = "The modern platform for teams who want to build, ship, and scale their products with confidence.", primaryCta = DEFAULT_PRIMARY_CTA, linkCta = DEFAULT_LINK_CTA, image = DEFAULT_IMAGE, className, idBase, }: Hero09Props) { const headingId = `${idBase ?? "hero-09"}-heading` return (

{/* Vertical Text - Desktop only */} {/* Main Content Grid */}

{/* Content Column */}

{/* Eyebrow */} {eyebrow && ( {eyebrow} )} {/* Heading - Extra large */}

{heading.split("\n").map((line, i) => ( {i > 0 &&
} {line} ))}

{/* Description */} {description && (

{description}

)} {/* CTAs - Stacked layout for editorial feel */}

{primaryCta && ( {primaryCta.text} )} {linkCta && ( {linkCta.text} )}

{/* Image Column - Larger for editorial impact */}

{/* Caption */} {image.caption && (

{image.caption}

)}

{/* Bottom Border - Editorial accent */}

) } export default Hero09 export { Hero09, type Hero09Props, type CtaConfig, type ImageConfig }

{heading.split("\n").map((line, i) => ( {i > 0 && } {line} ))}

{heading.split("\n").map((line, i) => ( {i > 0 &&
} {line} ))}