{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "category-previews-02",
  "type": "registry:component",
  "title": "Category Previews",
  "author": "Toby Belhome",
  "description": "Highlight product categories with visually engaging Tailwind CSS category preview sections. These layouts showcase images, titles, and brief descriptions to guide users through your store effortlessly. Perfect for e-commerce platforms and marketplaces aiming for a modern, organized, and user-friendly shopping experience.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "examples/blocks/ecommerce/category-previews/02/page.tsx",
      "content": "import { cn } from \"@/lib/utils\";\nimport Link from \"next/link\";\n\nconst callouts = [\n  {\n    name: \"Desk and Office\",\n    description: \"Work from home accessories\",\n    imageSrc:\n      \"https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-edition-01.jpg\",\n    imageAlt:\n      \"Desk with leather desk pad, walnut desk organizer, wireless keyboard and mouse, and porcelain mug.\",\n    href: \"#\"\n  },\n  {\n    name: \"Self-Improvement\",\n    description: \"Journals and note-taking\",\n    imageSrc:\n      \"https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-edition-02.jpg\",\n    imageAlt:\n      \"Wood table with porcelain mug, leather journal, brass pen, leather key ring, and a houseplant.\",\n    href: \"#\"\n  },\n  {\n    name: \"Travel\",\n    description: \"Daily commute essentials\",\n    imageSrc:\n      \"https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-edition-03.jpg\",\n    imageAlt: \"Collection of four insulated travel bottles on wooden shelf.\",\n    href: \"#\"\n  }\n];\n\nexport default function Example() {\n  return (\n    <section className=\"py-10 lg:py-20\">\n      <div className=\"container mx-auto px-4\">\n        <header className=\"mb-6\">\n          <h2 className=\"font-heading text-3xl\">Collections</h2>\n        </header>\n\n        <div className=\"grid gap-6 md:grid-cols-2\">\n          {callouts.map((callout, i) => (\n            <Link\n              key={callout.name}\n              href={callout.href}\n              className={cn(\"group relative block overflow-hidden border\", {\n                \"row-span-2 aspect-video md:aspect-auto\": i === 0,\n                \"aspect-video\": i !== 0\n              })}>\n              <img\n                className=\"h-full w-full object-cover transition-all duration-300 group-hover:opacity-75\"\n                src={callout.imageSrc}\n                alt=\"\"\n              />\n              <div className=\"absolute inset-0 top-auto flex items-end justify-between bg-white/30 p-4 backdrop-blur-md dark:bg-black/30\">\n                <p className=\"relative text-base font-semibold\">{callout.description}</p>\n                <h3 className=\"relative text-sm\">{callout.name}</h3>\n              </div>\n            </Link>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/category-previews-02.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}