{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-image-accordion",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/accordion/tailwind-image-accordion.tsx",
      "content": "'use client';\nimport Image from 'next/image';\nimport React from 'react';\n\nconst items = [\n  {\n    id: '1',\n    url: '/adrian.png',\n    title: 'Adrian Paul',\n    description: 'COO & Co-Founder',\n    tags: ['Floral', 'Highlands', 'Wildflowers', 'Colorful', 'Resilience'],\n  },\n\n  {\n    id: '2',\n    url: '/flualy.jpg',\n    title: 'Flualy Cual',\n    description: 'Founder & CEO',\n    tags: ['Twilight', 'Peaks', 'Silhouette', 'Evening Sky', 'Peaceful'],\n  },\n  {\n    id: '3',\n    url: '/naymur.png',\n    title: 'Naymur Rahman',\n    description: 'CTO & Co-Founder',\n    tags: ['Rocky', 'Ridges', 'Contrast', 'Adventure', 'Clouds'],\n  },\n];\nfunction TailwindImageAccordion() {\n  return (\n    <>\n      <div className='group flex max-md:flex-col justify-center gap-2 w-[80%] mx-auto mb-10 mt-3'>\n        {items.map((item, i: number) => {\n          return (\n            <article\n              key={item?.url ?? item?.title}\n              className='group/article relative w-full rounded-xl overflow-hidden md:not-[&:hover]:group-hover:w-[20%] md:[&:not(:focus-within):not(:hover)]:group-focus-within:w-[20%] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.15)] before:absolute before:inset-x-0 before:bottom-0 before:h-1/3 before:bg-linear-to-t before:from-black/50 before:transition-opacity md:before:opacity-0 md:hover:before:opacity-100 focus-within:before:opacity-100 after:opacity-0 md:not-[&:hover]:group-hover:after:opacity-100 md:[&:not(:focus-within):not(:hover)]:group-focus-within:after:opacity-100 after:absolute after:inset-0 after:bg-white/30 after:backdrop-blur-sm after:rounded-lg after:transition-all focus-within:ring-3 focus-within:ring-indigo-300'\n            >\n              <a\n                className='absolute inset-0 text-white z-10  p-3 flex flex-col justify-end'\n                href='#'\n              >\n                <h1 className=' text-xl font-medium   md:whitespace-nowrap md:truncate md:opacity-0 group-hover/article:opacity-100 group-focus-within/article:opacity-100 md:translate-y-2 group-hover/article:translate-y-0 group-focus-within/article:translate-y-0 transition duration-200 ease-[cubic-bezier(.5,.85,.25,1.8)] group-hover/article:delay-300 group-focus-within/article:delay-300'>\n                  {item?.title}\n                </h1>\n                <span className=' text-3xl font-medium  md:whitespace-nowrap md:truncate md:opacity-0 group-hover/article:opacity-100 group-focus-within/article:opacity-100 md:translate-y-2 group-hover/article:translate-y-0 group-focus-within/article:translate-y-0 transition duration-200 ease-[cubic-bezier(.5,.85,.25,1.8)] group-hover/article:delay-500 group-focus-within/article:delay-500'>\n                  {item?.description}\n                </span>\n              </a>\n              <Image\n                className='object-cover h-72 md:h-[420px]  w-full'\n                src={item?.url}\n                width='960'\n                height='480'\n                alt='Image 01'\n              />\n            </article>\n          );\n        })}\n      </div>\n    </>\n  );\n}\n\nexport default TailwindImageAccordion;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}