{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "hero", "version": "2.2.1", "category": "miscellaneous", "meta": { "preview": "https://ui.manifest.build/previews/hero.png", "version": "2.2.1", "changelog": { "1.0.0": "Initial release with logos, title, subtitle, CTA buttons, and tech logos footer", "1.1.0": "Added card wrapper, text logo support, improved light/dark mode compatibility", "2.0.0": "BREAKING: Changed button props from string labels to HeroButton objects with optional label and icon", "2.0.1": "Image logos now display without bordered container, text logos remain in bordered square", "2.1.0": "Added urlLight prop for dark mode logo variant support", "2.1.1": "Reduced logo image height for better visual balance", "2.1.2": "Removed default content data - component only renders explicitly provided data", "2.1.3": "Replaced key={index} with stable content-based keys for tech logos", "2.2.0": "Added demo data defaults - component renders demo content when no data prop is provided", "2.2.1": "Fixed import type for verbatimModuleSyntax compatibility" } }, "changelog": { "1.0.0": "Initial release with logos, title, subtitle, CTA buttons, and tech logos footer", "1.1.0": "Added card wrapper, text logo support, improved light/dark mode compatibility", "2.0.0": "BREAKING: Changed button props from string labels to HeroButton objects with optional label and icon", "2.0.1": "Image logos now display without bordered container, text logos remain in bordered square", "2.1.0": "Added urlLight prop for dark mode logo variant support", "2.1.1": "Reduced logo image height for better visual balance", "2.1.2": "Removed default content data - component only renders explicitly provided data", "2.1.3": "Replaced key={index} with stable content-based keys for tech logos", "2.2.0": "Added demo data defaults - component renders demo content when no data prop is provided", "2.2.1": "Fixed import type for verbatimModuleSyntax compatibility" }, "title": "Hero", "author": "MNFST, Inc", "description": "Landing hero section with optional logos, title, subtitle, CTA buttons, and tech logos footer. Supports image or text logos with separator.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/miscellaneous/hero.tsx", "content": "'use client';\n\nimport { Button } from '@/components/ui/button';\nimport type { ReactNode } from 'react';\nimport { demoHeroDefault } from './demo/miscellaneous';\n\n/**\n * Represents a logo in the hero section.\n * @interface HeroLogo\n * @property {string} [url] - URL of the logo image (shown in light mode)\n * @property {string} [urlLight] - URL of the light version logo (shown in dark mode for visibility)\n * @property {string} [alt] - Alt text for the logo\n * @property {string} [text] - Text to display if no URL is provided (e.g., \"Acme\")\n */\nexport interface HeroLogo {\n url?: string;\n urlLight?: string;\n alt?: string;\n text?: string;\n}\n\n/**\n * Represents a tech/partner logo in the footer section.\n * @interface TechLogo\n * @property {string} [url] - URL of the tech logo image\n * @property {string} [alt] - Alt text for the logo\n * @property {string} [name] - Name of the technology (used for tooltip)\n */\nexport interface TechLogo {\n url?: string;\n alt?: string;\n name?: string;\n}\n\n/**\n * Represents a button configuration in the hero section.\n * @interface HeroButton\n * @property {string} [label] - Text label for the button (optional)\n * @property {ReactNode} [icon] - Icon to display in the button (optional)\n */\nexport interface HeroButton {\n label?: string;\n icon?: ReactNode;\n}\n\n/**\n * ═══════════════════════════════════════════════════════════════════════════\n * HeroProps\n * ═══════════════════════════════════════════════════════════════════════════\n *\n * Props for the Hero component. A landing hero section with optional logos,\n * title, subtitle, call-to-action buttons, and tech logos footer.\n */\nexport interface HeroProps {\n data?: {\n /** Primary logo displayed in the hero. Can be an image URL or text. */\n logo1?: HeroLogo;\n /** Secondary logo displayed next to the primary logo (shows separator between them). */\n logo2?: HeroLogo;\n /** Separator text between logos (e.g., \"x\", \"&\", \"and\"). Only shown when both logos are present. */\n logoSeparator?: string;\n /** Main title/heading of the hero section. */\n title?: string;\n /** Subtitle or description text below the title. */\n subtitle?: string;\n /** Primary button configuration with optional label and icon. */\n primaryButton?: HeroButton;\n /** Secondary button configuration with optional label and icon. */\n secondaryButton?: HeroButton;\n /** Label text above the tech logos (e.g., \"Built with open-source technologies\"). */\n techLogosLabel?: string;\n /** Array of tech/partner logos to display in the footer section. */\n techLogos?: TechLogo[];\n };\n actions?: {\n /** Called when the primary button is clicked. */\n onPrimaryClick?: () => void;\n /** Called when the secondary button is clicked. */\n onSecondaryClick?: () => void;\n };\n}\n\n\n/**\n * Renders a logo - image logos display directly, text logos get a bordered container\n * Supports light/dark mode variants for image logos\n */\nfunction LogoDisplay({ logo }: { logo: HeroLogo }) {\n // Image logos display directly without a container\n if (logo.url) {\n // If urlLight is provided, show different logos for light/dark mode\n if (logo.urlLight) {\n return (\n <>\n \n