{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "features-12",
  "type": "registry:block",
  "title": "Features 12",
  "description": "Accordion-driven features that swap an animated screenshot per item.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "accordion",
    "https://magicui.design/r/border-beam"
  ],
  "files": [
    {
      "path": "app/preview/features/twelve/page.tsx",
      "content": "'use client'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'\nimport { ChartBarIncreasingIcon, Database, Fingerprint, IdCard } from 'lucide-react'\nimport Image from 'next/image'\nimport { useState } from 'react'\nimport { motion, AnimatePresence } from 'motion/react'\nimport { BorderBeam } from '@/components/magicui/border-beam'\n\nexport default function Features() {\n    type ImageKey = 'item-1' | 'item-2' | 'item-3' | 'item-4'\n    const [activeItem, setActiveItem] = useState<ImageKey>('item-1')\n\n    const images = {\n        'item-1': {\n            image: '/charts.png',\n            alt: 'Database visualization',\n        },\n        'item-2': {\n            image: '/music.png',\n            alt: 'Security authentication',\n        },\n        'item-3': {\n            image: '/mail2.png',\n            alt: 'Identity management',\n        },\n        'item-4': {\n            image: '/payments.png',\n            alt: 'Analytics dashboard',\n        },\n    }\n\n    return (\n        <section className=\"py-12 md:py-20 lg:py-32\">\n            <div className=\"bg-linear-to-b absolute inset-0 -z-10 sm:inset-6 sm:rounded-b-3xl dark:block dark:to-[color-mix(in_oklab,var(--color-zinc-900)_75%,var(--color-background))]\"></div>\n            <div className=\"mx-auto max-w-5xl space-y-8 px-6 md:space-y-16 lg:space-y-20 dark:[--color-border:color-mix(in_oklab,var(--color-white)_10%,transparent)]\">\n                <div className=\"relative z-10 mx-auto max-w-2xl space-y-6 text-center\">\n                    <h2 className=\"text-balance text-4xl font-semibold lg:text-6xl\">The foundation for AI</h2>\n                    <p>Lyra is evolving to be more than just the models. It supports an entire ecosystem — from products to the APIs and platforms helping developers and businesses innovate.</p>\n                </div>\n\n                <div className=\"grid gap-12 sm:px-12 md:grid-cols-2 lg:gap-20 lg:px-0\">\n                    <Accordion\n                        type=\"single\"\n                        value={activeItem}\n                        onValueChange={(value) => setActiveItem(value as ImageKey)}\n                        className=\"w-full\">\n                        <AccordionItem value=\"item-1\">\n                            <AccordionTrigger>\n                                <div className=\"flex items-center gap-2 text-base\">\n                                    <Database className=\"size-4\" />\n                                    Database Visualization\n                                </div>\n                            </AccordionTrigger>\n                            <AccordionContent>Lyra is evolving to be more than just the models. It supports an entire ecosystem — from products to the APIs and platforms helping developers and businesses innovate.</AccordionContent>\n                        </AccordionItem>\n                        <AccordionItem value=\"item-2\">\n                            <AccordionTrigger>\n                                <div className=\"flex items-center gap-2 text-base\">\n                                    <Fingerprint className=\"size-4\" />\n                                    Advanced Authentication\n                                </div>\n                            </AccordionTrigger>\n                            <AccordionContent>Lyra is evolving to be more than just the models. It supports an entire ecosystem — from products to the APIs and platforms helping developers and businesses innovate.</AccordionContent>\n                        </AccordionItem>\n                        <AccordionItem value=\"item-3\">\n                            <AccordionTrigger>\n                                <div className=\"flex items-center gap-2 text-base\">\n                                    <IdCard className=\"size-4\" />\n                                    Identity Management\n                                </div>\n                            </AccordionTrigger>\n                            <AccordionContent>Lyra is evolving to be more than just the models. It supports an entire ecosystem — from products to the APIs and platforms helping developers and businesses innovate.</AccordionContent>\n                        </AccordionItem>\n                        <AccordionItem value=\"item-4\">\n                            <AccordionTrigger>\n                                <div className=\"flex items-center gap-2 text-base\">\n                                    <ChartBarIncreasingIcon className=\"size-4\" />\n                                    Analytics Dashboard\n                                </div>\n                            </AccordionTrigger>\n                            <AccordionContent>Lyra is evolving to be more than just the models. It supports an entire ecosystem — from products to the APIs and platforms helping developers and businesses innovate.</AccordionContent>\n                        </AccordionItem>\n                    </Accordion>\n\n                    <div className=\"bg-background relative flex overflow-hidden rounded-3xl border p-2\">\n                        <div className=\"w-15 absolute inset-0 right-0 ml-auto border-l bg-[repeating-linear-gradient(-45deg,var(--color-border),var(--color-border)_1px,transparent_1px,transparent_8px)]\"></div>\n                        <div className=\"aspect-76/59 bg-background relative w-[calc(3/4*100%+3rem)] rounded-2xl\">\n                            <AnimatePresence mode=\"wait\">\n                                <motion.div\n                                    key={`${activeItem}-id`}\n                                    initial={{ opacity: 0, y: 6, scale: 0.98 }}\n                                    animate={{ opacity: 1, y: 0, scale: 1 }}\n                                    exit={{ opacity: 0, y: 6, scale: 0.98 }}\n                                    transition={{ duration: 0.2 }}\n                                    className=\"size-full overflow-hidden rounded-2xl border bg-zinc-900 shadow-md\">\n                                    <Image\n                                        src={images[activeItem].image}\n                                        className=\"size-full object-cover object-left-top dark:mix-blend-lighten\"\n                                        alt={images[activeItem].alt}\n                                        width={1207}\n                                        height={929}\n                                    />\n                                </motion.div>\n                            </AnimatePresence>\n                        </div>\n                        <BorderBeam\n                            duration={6}\n                            size={200}\n                            className=\"from-transparent via-yellow-700 to-transparent dark:via-white/50\"\n                        />\n                    </div>\n                </div>\n            </div>\n        </section>\n    )\n}\n",
      "type": "registry:component",
      "target": "components/features-12.tsx"
    }
  ]
}