diff --git a/registry/components/HeroBillboardDashboard.json b/registry/components/HeroBillboardDashboard.json deleted file mode 100644 index bfc02e9..0000000 --- a/registry/components/HeroBillboardDashboard.json +++ /dev/null @@ -1,114 +0,0 @@ -{ - "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 - } -}