{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-icon-sections-interactive-icon-showcase","type":"registry:block","title":"Interactive Icon Showcase","files":[{"path":"components/blocks/marketing/icon-sections/interactive-icon-showcase.tsx","content":"import { useState } from 'react';\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent } from '@/components/ui/card';\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from '@/components/ui/collapsible';\nimport { cn } from '@/lib/utils';\nimport {\n ArrowRight,\n ChevronDown,\n ChevronRight,\n CheckCircle2,\n Sparkles,\n Rocket,\n Leaf,\n BarChart,\n ShieldCheck,\n Globe,\n Zap,\n Laptop,\n Smartphone,\n TabletSmartphone,\n Clock,\n LockKeyhole,\n Search,\n RefreshCcw,\n HeartHandshake,\n CreditCard,\n Radar,\n Network,\n} from 'lucide-react';\n\ninterface IconFeature {\n id: string;\n icon: React.ReactNode;\n iconColor: string;\n title: string;\n description: string;\n benefits: string[];\n expanded?: boolean;\n}\n\nexport default function InteractiveIconShowcase() {\n const [features, setFeatures] = useState([\n {\n id: 'automation',\n icon: ,\n iconColor: 'bg-amber-100 text-amber-600',\n title: 'Smart Automation',\n description:\n 'Automate repetitive tasks with intelligent workflows that adapt to your business processes.',\n benefits: [\n 'Save up to 15 hours per week on manual tasks',\n 'Reduce errors by 75% with automated validation',\n 'Create custom workflows without coding',\n 'Connect to 300+ external services and APIs',\n ],\n expanded: false,\n },\n {\n id: 'performance',\n icon: ,\n iconColor: 'bg-blue-100 text-blue-600',\n title: 'Blazing Performance',\n description:\n 'Experience unmatched speed with our optimized architecture and global edge network.',\n benefits: [\n '99.9% uptime guarantee with redundant systems',\n 'Average page load under 1.2 seconds globally',\n 'Automatic content optimization and caching',\n 'Real-time monitoring and auto-scaling',\n ],\n expanded: false,\n },\n {\n id: 'sustainability',\n icon: ,\n iconColor: 'bg-green-100 text-green-600',\n title: 'Eco-Friendly Cloud',\n description:\n 'Our carbon-neutral infrastructure is powered by 100% renewable energy sources.',\n benefits: [\n 'Reduce your digital carbon footprint by 40%',\n 'Energy-efficient data centers worldwide',\n 'Carbon offset programs for all operations',\n 'Transparent sustainability reporting',\n ],\n expanded: false,\n },\n {\n id: 'analytics',\n icon: ,\n iconColor: 'bg-violet-100 text-violet-600',\n title: 'Advanced Analytics',\n description:\n 'Gain deep insights with our comprehensive analytics and reporting dashboard.',\n benefits: [\n 'Real-time data visualization and reporting',\n 'Customizable KPI tracking and alerts',\n 'AI-powered pattern recognition and forecasting',\n 'Export capabilities in multiple formats',\n ],\n expanded: false,\n },\n {\n id: 'security',\n icon: ,\n iconColor: 'bg-red-100 text-red-600',\n title: 'Enterprise Security',\n description:\n 'Protect your data with military-grade encryption and advanced security protocols.',\n benefits: [\n 'SOC 2 Type II, GDPR, and HIPAA compliant',\n 'Multi-factor authentication and SSO integration',\n 'End-to-end encryption for all data',\n 'Regular penetration testing and security audits',\n ],\n expanded: false,\n },\n {\n id: 'global',\n icon: ,\n iconColor: 'bg-cyan-100 text-cyan-600',\n title: 'Global Reach',\n description:\n 'Connect with users worldwide through our distributed infrastructure and localization tools.',\n benefits: [\n 'Content delivery in 200+ countries and territories',\n 'Automatic language detection and translation',\n 'Regional compliance management',\n 'Local payment methods for global commerce',\n ],\n expanded: false,\n },\n {\n id: 'speed',\n icon: ,\n iconColor: 'bg-yellow-100 text-yellow-600',\n title: 'Instant Deployment',\n description:\n 'Deploy changes instantly with zero downtime using our continuous delivery pipeline.',\n benefits: [\n 'One-click deployments to any environment',\n 'Automated testing before deployment',\n 'Instant rollback capabilities',\n 'Canary and blue/green deployment options',\n ],\n expanded: false,\n },\n {\n id: 'responsive',\n icon: ,\n iconColor: 'bg-indigo-100 text-indigo-600',\n title: 'Fully Responsive',\n description:\n 'Deliver perfect experiences across all devices with our adaptive design system.',\n benefits: [\n 'Optimized layouts for desktop, tablet, and mobile',\n 'Accessibility compliant (WCAG 2.1 AA)',\n 'Cross-browser compatibility',\n 'Progressive web app capabilities',\n ],\n expanded: false,\n },\n {\n id: 'mobile',\n icon: ,\n iconColor: 'bg-pink-100 text-pink-600',\n title: 'Mobile-First Design',\n description:\n 'Create exceptional mobile experiences with our touch-optimized components.',\n benefits: [\n 'Native-like performance on mobile devices',\n 'Optimized for touch and gesture interactions',\n 'Offline capabilities and local storage',\n 'Push notification support',\n ],\n expanded: false,\n },\n {\n id: 'multiplatform',\n icon: ,\n iconColor: 'bg-orange-100 text-orange-600',\n title: 'Cross-Platform Support',\n description:\n 'Build once and deploy everywhere with our unified development platform.',\n benefits: [\n 'Single codebase for iOS, Android, and web',\n 'Native API access on all platforms',\n 'Consistent UI across operating systems',\n 'Shared business logic with platform-specific UIs',\n ],\n expanded: false,\n },\n {\n id: 'realtime',\n icon: ,\n iconColor: 'bg-emerald-100 text-emerald-600',\n title: 'Real-Time Updates',\n description:\n 'Keep users in sync with instant updates and live collaborative features.',\n benefits: [\n 'WebSocket-based real-time data synchronization',\n 'Collaborative editing with conflict resolution',\n 'Live user presence indicators',\n 'Event-driven architecture for immediate reactions',\n ],\n expanded: false,\n },\n {\n id: 'privacy',\n icon: ,\n iconColor: 'bg-slate-100 text-slate-600',\n title: 'Privacy Controls',\n description:\n 'Give users complete control over their data with granular privacy settings.',\n benefits: [\n 'User consent management system',\n 'Data anonymization and pseudonymization',\n 'Self-service data access and deletion',\n 'Privacy by design architecture',\n ],\n expanded: false,\n },\n {\n id: 'search',\n icon: ,\n iconColor: 'bg-purple-100 text-purple-600',\n title: 'Intelligent Search',\n description:\n 'Find anything instantly with our powerful search engine and AI-powered recommendations.',\n benefits: [\n 'Full-text search with typo tolerance',\n 'Natural language processing capabilities',\n 'Personalized search results based on user behavior',\n 'Faceted search with dynamic filtering',\n ],\n expanded: false,\n },\n {\n id: 'sync',\n icon: ,\n iconColor: 'bg-teal-100 text-teal-600',\n title: 'Cross-Device Sync',\n description:\n 'Seamlessly transition between devices with automatic data synchronization.',\n benefits: [\n 'Real-time data sync across all devices',\n 'Offline-first architecture with conflict resolution',\n 'Bandwidth-efficient delta syncing',\n 'Selective sync for large datasets',\n ],\n expanded: false,\n },\n {\n id: 'support',\n icon: ,\n iconColor: 'bg-rose-100 text-rose-600',\n title: 'Premium Support',\n description:\n 'Get help when you need it from our dedicated support team and extensive knowledge base.',\n benefits: [\n '24/7 support via chat, email, and phone',\n 'Dedicated account managers for enterprise plans',\n 'Comprehensive documentation and tutorials',\n 'Regular training sessions and webinars',\n ],\n expanded: false,\n },\n {\n id: 'payments',\n icon: ,\n iconColor: 'bg-neutral-100 text-neutral-600',\n title: 'Secure Payments',\n description:\n 'Process payments securely with our PCI-compliant payment processing system.',\n benefits: [\n 'Support for 50+ payment methods globally',\n 'Anti-fraud detection and prevention',\n 'Subscription billing and management',\n 'Seamless checkout experience with one-click payments',\n ],\n expanded: false,\n },\n {\n id: 'monitoring',\n icon: ,\n iconColor: 'bg-fuchsia-100 text-fuchsia-600',\n title: 'Proactive Monitoring',\n description:\n 'Stay ahead of issues with real-time monitoring and predictive maintenance.',\n benefits: [\n 'Real-time performance and error monitoring',\n 'Anomaly detection and predictive alerts',\n 'Detailed logging and diagnostic tools',\n 'Automated incident response workflows',\n ],\n expanded: false,\n },\n {\n id: 'integrations',\n icon: ,\n iconColor: 'bg-sky-100 text-sky-600',\n title: 'Seamless Integrations',\n description:\n 'Connect with your favorite tools through our extensive integration ecosystem.',\n benefits: [\n 'One-click integration with popular platforms',\n 'Custom webhook support for any service',\n 'Bi-directional data synchronization',\n 'No-code integration builder',\n ],\n expanded: false,\n },\n ]);\n\n const handleFeatureToggle = (id: string) => {\n setFeatures(\n features.map((feature) =>\n feature.id === id\n ? { ...feature, expanded: !feature.expanded }\n : feature\n )\n );\n };\n\n return (\n
\n
\n
\n Features\n

\n Everything You Need to Succeed\n

\n

\n Explore our comprehensive suite of features designed to help your\n business thrive\n

\n
\n\n
\n {features.map((feature) => (\n handleFeatureToggle(feature.id)}\n className=\"w-full\"\n >\n \n \n \n
\n
\n \n {feature.icon}\n
\n
\n

\n {feature.title}\n

\n

\n {feature.description}\n

\n
\n
\n \n
\n \n \n\n \n
\n
\n

{feature.description}

\n

\n Key Benefits:\n

\n
    \n {feature.benefits.map((benefit, index) => (\n \n \n {benefit}\n \n ))}\n
\n
\n
\n \n \n \n ))}\n
\n\n \n \n
\n );\n}\n","type":"registry:component","target":"components/blocks/marketing/icon-sections/interactive-icon-showcase.tsx"},{"path":"components/ui/badge.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n secondary:\n \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n destructive:\n \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n outline:\n \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n ghost:\n \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction Badge({\n className,\n variant = \"default\",\n asChild = false,\n ...props\n}: React.ComponentProps<\"span\"> &\n VariantProps & { asChild?: boolean }) {\n const Comp = asChild ? Slot.Root : \"span\"\n\n return (\n \n )\n}\n\nexport { Badge, badgeVariants }\n","type":"registry:ui","target":"components/ui/badge.tsx"},{"path":"components/ui/button.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n outline:\n \"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n ghost:\n \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n destructive:\n \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default:\n \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n icon: \"size-9\",\n \"icon-xs\":\n \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n \"icon-sm\":\n \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n \"icon-lg\": \"size-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n asChild = false,\n ...props\n}: React.ComponentProps<\"button\"> &\n VariantProps & {\n asChild?: boolean\n }) {\n const Comp = asChild ? Slot.Root : \"button\"\n\n return (\n \n )\n}\n\nexport { Button, buttonVariants }\n","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"components/ui/card.tsx","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({\n className,\n size = \"default\",\n ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n return (\n img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardAction,\n CardDescription,\n CardContent,\n}\n","type":"registry:ui","target":"components/ui/card.tsx"},{"path":"components/ui/collapsible.tsx","content":"\"use client\"\n\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\"\n\nfunction Collapsible({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction CollapsibleTrigger({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction CollapsibleContent({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n","type":"registry:ui","target":"components/ui/collapsible.tsx"}],"description":"An interactive panel where hovering an icon updates the description beside it. Invites visitors to explore features at their own pace and stay engaged.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}