// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Hero 03 * @description A visually striking hero with animated gradient background, * floating trust badges, and centered content. Great for modern SaaS products. * * @slots hero, hero-container, hero-content, hero-badge, hero-heading, * hero-description, hero-cta-group, hero-primary-cta, hero-secondary-cta, * hero-features, hero-social-proof, hero-avatars * @variant gradient * * @registryDependencies button-link button badge * @dependencies lucide-react */ import * as React from "react" import { ArrowRight, Check, Sparkles } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ interface CtaConfig { /** Unique identifier for list key */ id: string /** Button text */ text: string /** Link destination */ href: string } interface FeatureItem { /** Unique identifier for list key */ id: string /** Feature text */ text: string } interface AvatarConfig { /** Unique identifier for list key */ id: string /** Image source URL */ src: string /** Alt text */ alt: string } interface Hero03Props { /** Optional badge with icon */ badge?: string /** Main heading - use \n for line breaks */ heading?: string /** Accent text rendered in primary color */ headingAccent?: string /** Supporting description */ description?: string /** Primary CTA button */ primaryCta?: CtaConfig /** Secondary CTA button */ secondaryCta?: CtaConfig /** Feature list displayed below CTAs */ features?: FeatureItem[] /** Avatar stack for social proof */ avatars?: AvatarConfig[] /** Social proof text next to avatars */ socialProofText?: string /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_PRIMARY_CTA: CtaConfig = { id: "primary", text: "Start Building", href: "#", } const DEFAULT_SECONDARY_CTA: CtaConfig = { id: "secondary", text: "See Examples", href: "#", } const DEFAULT_FEATURES: FeatureItem[] = [ { id: "no-cc", text: "No credit card required" }, { id: "trial", text: "14-day free trial" }, { id: "cancel", text: "Cancel anytime" }, ] const DEFAULT_AVATARS: AvatarConfig[] = [ { id: "user-1", src: "/assets/placeholders/avatar-placeholder.svg", alt: "User 1" }, { id: "user-2", src: "/assets/placeholders/avatar-placeholder.svg", alt: "User 2" }, { id: "user-3", src: "/assets/placeholders/avatar-placeholder.svg", alt: "User 3" }, { id: "user-4", src: "/assets/placeholders/avatar-placeholder.svg", alt: "User 4" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Hero03({ badge = "Now with AI-powered features", heading = "The modern way to build", headingAccent = "web applications", description = "UI component library built with Radix, Tailwind and React.\n Beautiful, accessible, and customizable.", primaryCta = DEFAULT_PRIMARY_CTA, secondaryCta = DEFAULT_SECONDARY_CTA, features = DEFAULT_FEATURES, avatars = DEFAULT_AVATARS, socialProofText = "Join 10,000+ developers", className, idBase, }: Hero03Props) { const headingId = `${idBase ?? "hero-03"}-heading` return (

{/* Gradient Background */}

{/* Badge */} {badge && ( )} {/* Heading */}

{heading}{" "} {headingAccent}

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

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

)} {/* CTAs */}

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

{/* Feature List */} {features && features.length > 0 && (

{features.map((feature) => (

))}

)} {/* Social Proof */} {avatars && avatars.length > 0 && (

{/* Avatar Stack */}

{avatars.map((avatar) => (

))} {avatars.length > 0 && (

+99

)}

{/* Social Proof Text */} {socialProofText && (

{socialProofText}

)}

{/* Bottom Gradient */}

) } export default Hero03 export { Hero03, type Hero03Props, type CtaConfig, type FeatureItem, type AvatarConfig }