{ "name": "HeroBillboardDashboard", "description": "Full-width hero section with centered text content and an interactive Dashboard component below instead of a static image/video.", "details": "Based on HeroBillboard layout — centered TextBox with title, description, tag, and buttons on top, with a full Dashboard component below. The Dashboard includes icon sidebar, search bar, avatar, action buttons, 3 stat cards with animated number cycling (values rotate every 3s via TextNumberCount), a BentoLineChart, and a vertically auto-scrolling list. On mobile, stat cards become a carousel with arrow navigation. Desktop stat cards have staggered GSAP scroll entrance. All Dashboard props are passed via a single 'dashboard' object prop.", "requiredImports": { "lucide-react": ["Sparkles", "Hexagon", "House", "MessageSquareText", "Settings", "CircleDollarSign", "ArrowLeftRight", "Send"], "note": "Import all icons used in tagIcon, dashboard.logoIcon, dashboard.sidebarItems[].icon, dashboard.listItems[].icon. Use component names, not strings." }, "typeDefinitions": { "DashboardStat": { "title": "string (required)", "values": "[number, number, number] - exactly 3 numbers, cycled every 3s (required)", "valuePrefix": "string (optional, e.g. '$')", "valueSuffix": "string (optional, e.g. 'M')", "description": "string (required)", "titleMobile": "string (optional, shorter label for mobile)" }, "DashboardSidebarItem": { "icon": "LucideIcon - import from lucide-react (required)", "active": "boolean (optional, default false)" }, "DashboardListItem": { "icon": "LucideIcon - import from lucide-react (required)", "title": "string (required)", "status": "string (required)" }, "ChartDataItem": { "value": "number (required)" } }, "constraints": { "textRules": { "title": { "required": true, "example": "Real-Time On-Chain Intelligence", "minChars": 2, "maxChars": 40 }, "description": { "required": true, "example": "Monitor protocol revenue, trading volume, and wallet activity.", "minChars": 5, "maxChars": 200 }, "tag": { "required": false, "example": "Live Analytics", "minChars": 2, "maxChars": 30 } }, "buttonRules": { "maxButtons": 2, "structure": { "text": "string - Button label (required)", "href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections", "onClick": "() => void - Additional click handler (optional)", "props": "Partial - Additional button props like className, textClassName (optional)" }, "examples": [ "{ text: 'Get Started', href: 'https://example.com' }", "{ text: 'View Docs', href: 'docs' }" ], "note": "Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site." }, "dashboardRules": { "required": ["title", "stats", "logoIcon", "sidebarItems", "buttons", "listItems", "imageSrc"], "stats": "Exactly 3 DashboardStat objects. See typeDefinitions.DashboardStat.", "sidebarItems": "Array of DashboardSidebarItem. At least 1 item. See typeDefinitions.DashboardSidebarItem.", "listItems": "Array of DashboardListItem. At least 1 item. See typeDefinitions.DashboardListItem.", "buttons": "Array of ButtonConfig. Max 2. Same structure as hero buttons.", "chartData": "Optional. Array of ChartDataItem. See typeDefinitions.ChartDataItem.", "imageSrc": "string - URL for avatar image in dashboard header" } }, "propsSchema": { "title": "string", "description": "string", "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "dashboard": "Object. Required: title, stats (exactly 3), logoIcon, sidebarItems, buttons, listItems, imageSrc. Optional: searchPlaceholder, chartTitle, chartData, listTitle, videoSrc, imageAlt, videoAriaLabel, className, containerClassName, sidebarClassName, statClassName, chartClassName, listClassName. See typeDefinitions for DashboardStat, DashboardSidebarItem, DashboardListItem, ChartDataItem.", "ariaLabel?": "string (default: 'Hero section')", "className?": "string", "containerClassName?": "string", "textBoxClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "tagClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "dashboardClassName?": "string" }, "usageExample": "import { Sparkles, Hexagon, House, MessageSquareText, Settings, CircleDollarSign, ArrowLeftRight, Send } from 'lucide-react';\nimport HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';\n\n", "do": [ "Use for SaaS landing pages", "Use for analytics/dashboard product showcases", "Use for data visualization platforms", "Requires dashboard prop with all nested properties" ], "dont": [ "Do not use without dashboard data", "Do not use for simple hero sections without interactive elements" ], "editRules": { "textOnly": true, "layoutLocked": true, "styleLocked": true } }