{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-icon-sections-expandable-icon-cards","type":"registry:block","title":"Expandable Icon Cards","files":[{"path":"components/blocks/marketing/icon-sections/expandable-icon-cards.tsx","content":"import { useState } from 'react';\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport { cn } from '@/lib/utils';\n\nimport {\n ArrowRight,\n ChevronDown,\n ChevronUp,\n Compass,\n FileText,\n LifeBuoy,\n Lightbulb,\n Rocket,\n Settings,\n ShieldCheck,\n Zap,\n} from 'lucide-react';\n\ninterface FeatureCard {\n id: string;\n icon: React.ReactNode;\n title: string;\n shortDescription: string;\n expandedDescription: string;\n benefits: string[];\n color: string;\n}\n\nexport default function ExpandableIconCards() {\n const [expandedCardId, setExpandedCardId] = useState(null);\n\n const toggleCard = (id: string) => {\n setExpandedCardId(expandedCardId === id ? null : id);\n };\n\n const features: FeatureCard[] = [\n {\n id: 'security',\n icon: ,\n title: 'Enterprise Security',\n shortDescription: 'Bank-grade protection for your sensitive data.',\n expandedDescription:\n 'Our comprehensive security approach uses multi-layered defenses, continuous monitoring, and regular third-party audits to keep your data protected at every level.',\n benefits: [\n 'End-to-end encryption for all data transmission',\n 'SOC 2 Type II and ISO 27001 certified',\n 'Regular penetration testing',\n 'Automated threat detection and response',\n ],\n color:\n 'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-950 dark:text-blue-200 dark:border-blue-900',\n },\n {\n id: 'ai',\n icon: ,\n title: 'AI-Powered Insights',\n shortDescription: 'Smart analytics that help guide better decisions.',\n expandedDescription:\n 'Our artificial intelligence algorithms continuously analyze your data to provide actionable insights, predictive recommendations, and automated optimizations.',\n benefits: [\n 'Predictive analytics and trend forecasting',\n 'Anomaly detection for unusual patterns',\n 'Automated recommendation engine',\n 'Natural language processing for data queries',\n ],\n color:\n 'bg-purple-100 text-purple-700 border-purple-200 dark:bg-purple-950 dark:text-purple-200 dark:border-purple-900',\n },\n {\n id: 'scaling',\n icon: ,\n title: 'Seamless Scaling',\n shortDescription: 'Grow without limits as your business expands.',\n expandedDescription:\n 'Built on a modern cloud architecture, our platform dynamically scales to accommodate growing data volumes, user bases, and processing requirements without performance degradation.',\n benefits: [\n 'Auto-scaling infrastructure',\n 'Zero downtime deployments',\n 'Global CDN for fast access worldwide',\n 'Elastic resource allocation',\n ],\n color:\n 'bg-green-100 text-green-700 border-green-200 dark:bg-green-950 dark:text-green-200 dark:border-green-900',\n },\n {\n id: 'integration',\n icon: ,\n title: 'Universal Integration',\n shortDescription: 'Connect with all your essential tools and services.',\n expandedDescription:\n 'We provide extensive integration capabilities through RESTful APIs, webhooks, and pre-built connectors for seamless data flow between your existing software ecosystem.',\n benefits: [\n '200+ pre-built integrations with popular tools',\n 'Open API with comprehensive documentation',\n 'Custom webhook support',\n 'Bi-directional data synchronization',\n ],\n color:\n 'bg-amber-100 text-amber-700 border-amber-200 dark:bg-amber-950 dark:text-amber-200 dark:border-amber-900',\n },\n {\n id: 'customization',\n icon: ,\n title: 'Deep Customization',\n shortDescription: 'Tailor every aspect to match your unique workflows.',\n expandedDescription:\n 'Every business is different, which is why our platform offers extensive customization options - from visual themes to complex business logic and workflow automation.',\n benefits: [\n 'Drag-and-drop interface builder',\n 'Custom fields and data models',\n 'Workflow rule engine',\n 'White-labeling options',\n ],\n color:\n 'bg-rose-100 text-rose-700 border-rose-200 dark:bg-rose-950 dark:text-rose-200 dark:border-rose-900',\n },\n {\n id: 'performance',\n icon: ,\n title: 'Lightning Performance',\n shortDescription: 'Blazing fast response times for optimal productivity.',\n expandedDescription:\n 'Our architecture is optimized for speed at every level - from the database layer to the frontend rendering - ensuring your team never waits for the software to catch up.',\n benefits: [\n 'Sub-second response times',\n 'Optimized database queries',\n 'Efficient content delivery',\n 'Background processing for heavy tasks',\n ],\n color:\n 'bg-orange-100 text-orange-700 border-orange-200 dark:bg-orange-950 dark:text-orange-200 dark:border-orange-900',\n },\n {\n id: 'support',\n icon: ,\n title: '24/7 Expert Support',\n shortDescription: 'Always available assistance when you need it most.',\n expandedDescription:\n 'Our dedicated support team is available around the clock to help with any questions or issues you might encounter, with multiple communication channels to suit your preferences.',\n benefits: [\n 'Live chat, email, and phone support',\n 'Guaranteed response times',\n 'Dedicated success manager',\n 'Comprehensive knowledge base',\n ],\n color:\n 'bg-sky-100 text-sky-700 border-sky-200 dark:bg-sky-950 dark:text-sky-200 dark:border-sky-900',\n },\n {\n id: 'compliance',\n icon: ,\n title: 'Global Compliance',\n shortDescription: 'Meet regulatory requirements across jurisdictions.',\n expandedDescription:\n 'Stay compliant with industry regulations and data privacy laws with our comprehensive compliance features, regular audits, and built-in controls for data governance.',\n benefits: [\n 'GDPR, CCPA, HIPAA compliance controls',\n 'Audit logging and reporting',\n 'Data retention policies',\n 'Role-based access control',\n ],\n color:\n 'bg-indigo-100 text-indigo-700 border-indigo-200 dark:bg-indigo-950 dark:text-indigo-200 dark:border-indigo-900',\n },\n ];\n\n return (\n
\n
\n
\n Features\n

\n Powerful capabilities, simplified\n

\n

\n Explore the comprehensive feature set that gives our platform a\n competitive edge. Click on any card to learn more about each\n feature.\n

\n
\n\n
\n {features.map((feature) => (\n \n toggleCard(feature.id)}\n >\n {/* Card Header - Always visible */}\n
\n
\n {feature.icon}\n
\n\n
\n
\n

\n {feature.title}\n

\n
\n {expandedCardId === feature.id ? (\n \n ) : (\n \n )}\n
\n
\n

{feature.shortDescription}

\n
\n
\n\n {/* Expanded Content */}\n {expandedCardId === feature.id && (\n
\n
\n

\n {feature.expandedDescription}\n

\n
\n\n
\n

Key Benefits

\n
    \n {feature.benefits.map((benefit, idx) => (\n \n
    \n
    \n
    \n {benefit}\n \n ))}\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/expandable-icon-cards.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"}],"description":"Icon cards that expand on click to reveal more detail. Keeps the section compact while letting curious visitors dig into any feature they choose.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}