{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "features-with-panel",
  "type": "registry:block",
  "title": "Features with Panel",
  "description": "Interactive feature list with sticky media panel and smooth transitions.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": ["@scrollxui/card"],
  "dependencies": ["motion"],
  "files": [
    {
      "type": "registry:component",
      "path": "registry/blocks/features/features-with-panel.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { Card } from '@/components/ui/card';\nimport { cn } from '@/lib/utils';\n\ninterface FeatureItem {\n  title: string;\n  alt?: string;\n  content: string | React.ReactNode;\n}\n\nfunction FeatureMedia({ content, alt }: { content: string | React.ReactNode; alt?: string }) {\n  if (typeof content !== 'string') {\n    return <div className='w-full h-full'>{content}</div>;\n  }\n\n  const isVideo = /\\.(mp4|webm|ogg)$/i.test(content);\n  const isImage = /\\.(jpg|jpeg|png|webp|gif|avif|svg)$/i.test(content) || /unsplash|images\\./i.test(content);\n\n  if (isVideo) {\n    return (\n      <video\n        src={content}\n        autoPlay\n        muted\n        loop\n        playsInline\n        className='w-full h-full object-cover'\n      />\n    );\n  }\n\n  if (isImage) {\n    return <img src={content} alt={alt} className='w-full h-full object-cover' />;\n  }\n\n  return (\n    <div className='flex items-center justify-center w-full h-full p-8'>\n      <p className='text-sm text-muted-foreground leading-relaxed'>{content}</p>\n    </div>\n  );\n}\n\nconst items: FeatureItem[] = [\n  {\n    title: 'Copy & paste components, instantly.',\n    alt: 'Drop in fully-styled, accessible components with a single CLI command.',\n    content: 'https://scrollxui.dev/assets/copypasteinstantly.webm',\n  },\n  {\n    title: 'Install components & blocks via CLI.',\n    alt: 'Run a single command to add any component directly into your codebase — no package to manage.',\n    content: 'https://scrollxui.dev/assets/installviacli.webm',\n  },\n  {\n    title: 'Tailwind-first styling you actually own.',\n    alt: 'No black-box CSS. The source lives in your project — tweak anything, anytime.',\n    content: 'https://scrollxui.dev/images/tailwind.png',\n  },\n  {\n    title: 'Dark mode out of the box.',\n    alt: 'Theme switching with CSS variables. Light, dark, or fully custom — zero extra work.',\n    content: 'https://scrollxui.dev/assets/darkmode.webm',\n  },\n  {\n    title: 'Responsive by default, every time.',\n    alt: 'Every component adapts seamlessly across mobile, tablet, and desktop — no extra work needed.',\n    content: 'https://scrollxui.dev/assets/responsive.webm',\n  },\n];\n\nexport default function FeaturesWithPanel() {\n  const [active, setActive] = React.useState(0);\n\n  return (\n    <section className='relative w-full py-24'>\n      <div className='mx-auto max-w-6xl px-6'>\n        <div className='grid grid-cols-1 lg:grid-cols-2 lg:gap-16 lg:items-start'>\n\n          <div>\n            <h2 className='text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl mb-10'>\n              Features.\n            </h2>\n\n            <ul className='flex flex-col gap-1'>\n              {items.map((item, index) => (\n                <motion.li\n                  key={index}\n                  initial={{ opacity: 0, y: 8 }}\n                  whileInView={{ opacity: 1, y: 0 }}\n                  viewport={{ once: true }}\n                  transition={{ duration: 0.35, delay: index * 0.07, ease: 'easeOut' }}\n                  onClick={() => setActive(index)}\n                  className={cn(\n                    'flex flex-col px-4 py-3.5 rounded-xl cursor-pointer transition-all duration-200 lg:flex-row lg:items-center lg:gap-4',\n                    active === index\n                      ? 'ring-1 ring-foreground'\n                      : 'ring-1 ring-transparent'\n                  )}\n                >\n                  <div className='flex flex-row items-center gap-4 w-full lg:contents'>\n                    <span\n                      className={cn(\n                        'size-7 rounded-full flex items-center justify-center text-xs font-medium shrink-0 transition-colors duration-200',\n                        active === index ? 'bg-foreground text-background' : 'bg-muted text-muted-foreground'\n                      )}\n                    >\n                      {index + 1}\n                    </span>\n                    <span\n                      className={cn(\n                        'text-sm font-medium transition-colors duration-200',\n                        active === index ? 'text-foreground' : 'text-muted-foreground'\n                      )}\n                    >\n                      {item.title}\n                    </span>\n                  </div>\n\n                  <AnimatePresence initial={false}>\n                    {active === index && (\n                      <motion.div\n                        initial={{ height: 0, opacity: 0 }}\n                        animate={{ height: 'auto', opacity: 1 }}\n                        exit={{ height: 0, opacity: 0 }}\n                        transition={{ duration: 0.35, ease: [0.4, 0, 0.2, 1] }}\n                        className='w-full overflow-hidden lg:hidden'\n                      >\n                        <Card className='w-full mt-3 overflow-hidden p-0 gap-0 aspect-4/3 relative'>\n                          <div className='absolute inset-0'>\n                            <FeatureMedia content={item.content} alt={item.alt} />\n                          </div>\n                        </Card>\n                      </motion.div>\n                    )}\n                  </AnimatePresence>\n                </motion.li>\n              ))}\n            </ul>\n          </div>\n\n          <div className='hidden lg:block sticky top-10'>\n            <Card className='relative w-full aspect-4/3 overflow-hidden p-0 gap-0'>\n              <AnimatePresence mode='wait'>\n                <motion.div\n                  key={active}\n                  initial={{ opacity: 0, y: 12, scale: 0.98 }}\n                  animate={{ opacity: 1, y: 0, scale: 1 }}\n                  exit={{ opacity: 0, y: -8, scale: 0.98 }}\n                  transition={{ duration: 0.35, ease: [0.4, 0, 0.2, 1] }}\n                  className='absolute inset-0'\n                >\n                  <FeatureMedia content={items[active].content} alt={items[active].alt} />\n                </motion.div>\n              </AnimatePresence>\n            </Card>\n          </div>\n\n        </div>\n      </div>\n    </section>\n  );\n}"
    }
  ]
}