// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Hero 07 * @description A split-layout hero with description, headline, service tags, and portfolio cards. * Features asymmetric content layout with project showcase grid below. * * @slots hero, hero-container, hero-content, hero-headline-wrapper, hero-heading, * hero-description, hero-cta, hero-tags, hero-tag, hero-portfolio, * hero-portfolio-card, hero-portfolio-image, hero-portfolio-title, hero-portfolio-link * @variant split-portfolio * * @registryDependencies button-link badge * @dependencies lucide-react */ import * as React from "react" import { ArrowUpRight } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ interface ServiceTag { /** Unique identifier for list key */ id: string /** Tag label */ label: string } interface PortfolioCard { /** Unique identifier for list key */ id: string /** Project title */ title: string /** Project image URL */ image: string /** Project link */ href: string } interface Hero07Props { /** Description text on the left */ description?: string /** CTA button text */ ctaText?: string /** CTA button link */ ctaHref?: string /** Main headline text */ headline?: string /** Service/category tags */ tags?: ServiceTag[] /** Portfolio cards to display */ portfolioCards?: PortfolioCard[] /** Additional CSS classes for the section */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_TAGS: ServiceTag[] = [ { id: "tag-1", label: "API Platform" }, { id: "tag-2", label: "Developer Tools" }, { id: "tag-3", label: "Analytics" }, { id: "tag-4", label: "Integrations" }, ] const DEFAULT_PORTFOLIO_CARDS: PortfolioCard[] = [ { id: "project-1", title: "View Case Study", image: "/assets/placeholders/placeholder-16x9.svg", href: "#", }, { id: "project-2", title: "View Case Study", image: "/assets/placeholders/placeholder-16x9.svg", href: "#", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Hero07({ description = "The all-in-one platform for teams who want to build, ship, and iterate on products faster than ever before.", ctaText = "Start Building", ctaHref = "#", headline = "Ship Your Next Great Product", tags = DEFAULT_TAGS, portfolioCards = DEFAULT_PORTFOLIO_CARDS, className, idBase, }: Hero07Props) { const headingId = `${idBase ?? "hero-07"}-heading` return (

{/* Split Content */}

{/* Left: Headline */}

{headline}

{/* Right: Description + CTA */}

{description}

{ctaText}

{/* Service Tags */} {tags.length > 0 && (

{tags.map((tag) => ( {tag.label} ))}

)} {/* Portfolio Cards */} {portfolioCards.length > 0 && (

{portfolioCards.map((card) => (

{card.title}

))}

)}

) } export default Hero07 export { Hero07, type Hero07Props, type ServiceTag, type PortfolioCard }