{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-list-01",
  "type": "registry:component",
  "title": "Product List",
  "author": "Toby Belhome",
  "description": "Display products in clean and engaging Tailwind CSS product list sections. These layouts feature images, titles, prices, and brief descriptions, making browsing effortless. Perfect for online stores, marketplaces, and e-commerce platforms aiming for modern, visually appealing, and conversion-focused product displays.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "examples/blocks/ecommerce/product-list/01/page.tsx",
      "content": "import Link from \"next/link\";\nimport Image from \"next/image\";\n\nconst products = [\n  {\n    title: \"White crew-Neck T-Shirt\",\n    image: \"/images/products/list1.png\",\n    price: \"$29.00\"\n  },\n  {\n    title: \"White crew-Neck T-Shirt\",\n    image: \"/images/products/list2.png\",\n    price: \"$29.00\"\n  },\n  {\n    title: \"White crew-Neck T-Shirt\",\n    image: \"/images/products/list3.png\",\n    price: \"$29.00\"\n  },\n  {\n    title: \"White crew-Neck T-Shirt\",\n    image: \"/images/products/list4.png\",\n    price: \"$29.00\"\n  }\n];\n\nexport type Product = (typeof products)[number];\n\nexport default function Page() {\n  return (\n    <section className=\"py-10 lg:py-20\">\n      <div className=\"mx-auto max-w-7xl px-4\">\n        <header className=\"mx-auto mb-6 max-w-2xl space-y-2 text-center lg:mb-10\">\n          <h2 className=\"font-heading text-3xl sm:text-4xl\">New Season Products</h2>\n          <p className=\"text-muted-foreground text-balance lg:text-lg\">\n            Discover the new and trending products added to the collection.\n          </p>\n        </header>\n\n        <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4 lg:gap-6\">\n          {products.map((product, i) => (\n            <Product key={i} product={product} />\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n\nconst Product = ({ product }: { product: Product }) => (\n  <Link href=\"#\" className=\"group\">\n    <figure className=\"relative aspect-square w-full overflow-hidden rounded-lg object-cover\">\n      <Image\n        fill\n        className=\"object-cover transition-transform duration-300 group-hover:scale-105 group-hover:rotate-2\"\n        src={product.image}\n        alt={product.title}\n      />\n    </figure>\n    <div className=\"mt-3 space-y-0.5\">\n      <p className=\"font-medium\">{product.title}</p>\n      <p className=\"text-muted-foreground\">{product.price}</p>\n    </div>\n  </Link>\n);\n",
      "type": "registry:component",
      "target": "components/product-list-01.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}