{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "category-previews-01",
  "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/01/page.tsx",
      "content": "const 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>\n          <h2 className=\"font-heading text-3xl\">Collections</h2>\n        </header>\n\n        <div className=\"mt-6 space-y-12 lg:grid lg:grid-cols-3 lg:space-y-0 lg:gap-x-6\">\n          {callouts.map((callout) => (\n            <div key={callout.name} className=\"group relative\">\n              <img\n                alt={callout.imageAlt}\n                src={callout.imageSrc}\n                className=\"w-full object-cover transition-opacity group-hover:opacity-75 max-sm:h-80 sm:aspect-2/1 lg:aspect-square\"\n              />\n              <h3 className=\"text-muted-foreground mt-4 text-sm\">\n                <a href={callout.href}>\n                  <span className=\"absolute inset-0\" />\n                  {callout.name}\n                </a>\n              </h3>\n              <p className=\"text-base font-semibold text-gray-900\">{callout.description}</p>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/category-previews-01.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}