{
  "name": "product-card-11-block",
  "type": "registry:block",
  "dependencies": [],
  "registryDependencies": [
    "button",
    "https://ui.stackzero.co/r/image-viewer-basic.json",
    "https://ui.stackzero.co/r/price-format-sale.json"
  ],
  "files": [
    {
      "type": "registry:block",
      "content": "\"use client\";\n\nimport ImageViewer from \"@/components/commerce-ui/image-viewer-basic\";\nimport PriceFormat_Sale from \"@/components/commerce-ui/price-format-sale\";\nimport { Button } from \"@/components/ui/button\";\n\nconst DEFAULT_IMAGE_URL =\n  \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/essential-oil-01.jpg\";\n\ninterface ProductCard_11Props {\n  imageUrl?: string;\n  organic?: boolean;\n  productName?: string;\n  description?: string;\n  price?: number;\n  originalPrice?: number;\n  volume?: string;\n  aromaType?: string;\n  benefits?: string[];\n  ingredients?: string[];\n  onAddToCart?: () => void;\n  onBuyNow?: () => void;\n  currencyPrefix?: string;\n}\n\nfunction ProductCard_11({\n  aromaType = \"Floral, Herbaceous\",\n  benefits = [\n    \"Promotes relaxation\",\n    \"Reduces stress\",\n    \"Improves sleep\",\n    \"Soothes skin\",\n  ],\n  currencyPrefix = \"$\",\n  description = \"100% pure essential oil extracted through steam distillation from organic lavender flowers. Provides calming aromatherapy benefits to promote relaxation and better sleep.\",\n  imageUrl = DEFAULT_IMAGE_URL,\n  ingredients = [\"Pure Lavender Oil\", \"Lavandula angustifolia\"],\n  onAddToCart = () => {},\n  onBuyNow = () => {},\n  organic = true,\n  originalPrice = 24.99,\n  price = 18.99,\n  productName = \"Lavender Serenity Essential Oil\",\n  volume = \"15ml / 0.5 fl oz\",\n}: ProductCard_11Props = {}) {\n  return (\n    <div className=\"group relative flex w-[320px] flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all duration-300 hover:shadow-md dark:border-gray-800 dark:bg-gray-900\">\n      {/* Organic badge */}\n      {organic && (\n        <div className=\"absolute top-3 left-3 z-10\">\n          <span className=\"relative inline-block rounded-full bg-gradient-to-r from-purple-500 to-indigo-700 px-3 py-1.5 text-xs font-semibold text-white\">\n            100% ORGANIC\n            <span className=\"absolute -top-1 -right-1 flex h-3 w-3\">\n              <span className=\"absolute inline-flex h-full w-full animate-ping rounded-full bg-purple-400 opacity-75\"></span>\n              <span className=\"relative inline-flex h-3 w-3 rounded-full bg-purple-500\"></span>\n            </span>\n          </span>\n        </div>\n      )}\n\n      {/* Image container with background glow effect */}\n      <div className=\"relative overflow-hidden bg-gradient-to-br from-indigo-50 via-purple-50 to-violet-100 p-6 dark:from-indigo-950/30 dark:via-purple-950/20 dark:to-violet-950/30\">\n        <div className=\"absolute -bottom-10 left-1/2 h-40 w-40 -translate-x-1/2 transform rounded-full bg-purple-500/20 blur-3xl\"></div>\n        <div className=\"transition-transform duration-500 group-hover:scale-105 group-hover:rotate-2\">\n          <ImageViewer\n            imageUrl={imageUrl}\n            classNameThumbnailViewer=\"rounded-lg object-contain h-[180px] mx-auto drop-shadow-lg\"\n          />\n        </div>\n      </div>\n\n      {/* Product details */}\n      <div className=\"flex flex-1 flex-col gap-3 p-5\">\n        <div>\n          <h3 className=\"mb-1 text-xl font-semibold tracking-tight text-gray-900 dark:text-gray-100\">\n            {productName}\n          </h3>\n          <p className=\"text-xs text-gray-600 dark:text-gray-400\">\n            {volume} • {aromaType}\n          </p>\n        </div>\n\n        {/* Description - truncated to 2 lines */}\n        <p className=\"line-clamp-2 text-sm text-gray-600 dark:text-gray-400\">\n          {description}\n        </p>\n\n        {/* Features grid */}\n        <div className=\"mb-1\">\n          <p className=\"mb-1 text-xs font-medium text-gray-500 uppercase dark:text-gray-400\">\n            Key Benefits\n          </p>\n          <div className=\"grid grid-cols-2 gap-x-2 gap-y-1\">\n            {benefits.map((benefit, index) => (\n              <div key={index} className=\"flex items-center text-xs\">\n                <svg\n                  className=\"mr-1.5 h-3.5 w-3.5 shrink-0 text-purple-600\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  viewBox=\"0 0 24 24\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth=\"2\"\n                    d=\"M5 13l4 4L19 7\"\n                  />\n                </svg>\n                <span className=\"text-gray-700 dark:text-gray-300\">\n                  {benefit}\n                </span>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* Ingredients tags */}\n        <div className=\"mb-1\">\n          <p className=\"mb-1 text-xs font-medium text-gray-500 uppercase dark:text-gray-400\">\n            Ingredients\n          </p>\n          <div className=\"flex flex-wrap gap-1\">\n            {ingredients.map((ingredient, index) => (\n              <span\n                key={index}\n                className=\"inline-flex items-center rounded-full bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 dark:bg-purple-900/30 dark:text-purple-300\"\n              >\n                {ingredient}\n              </span>\n            ))}\n          </div>\n        </div>\n\n        {/* Price with shipping info */}\n        <div className=\"mt-auto\">\n          <PriceFormat_Sale\n            prefix={currencyPrefix}\n            originalPrice={originalPrice}\n            salePrice={price}\n            showSavePercentage={false}\n            className=\"text-lg font-semibold text-gray-600 dark:text-gray-300\"\n            classNameSalePrice=\"text-2xl font-bold text-purple-600 dark:text-purple-400\"\n          />\n\n          <p className=\"mt-1 inline-flex items-center text-sm text-green-600 dark:text-green-400\">\n            <svg\n              className=\"mr-1 h-4 w-4\"\n              fill=\"currentColor\"\n              viewBox=\"0 0 20 20\"\n            >\n              <path\n                fillRule=\"evenodd\"\n                d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z\"\n                clipRule=\"evenodd\"\n              />\n            </svg>\n            Ships within 24 hours\n          </p>\n        </div>\n\n        {/* Action buttons */}\n        <div className=\"mt-3 flex flex-col gap-3\">\n          <Button\n            variant=\"outline\"\n            onClick={onAddToCart}\n            className=\"w-full border-gray-300 bg-white text-gray-800 transition-all duration-200 hover:border-purple-500 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:border-purple-500 dark:hover:bg-gray-700\"\n          >\n            Add to cart\n          </Button>\n          <Button\n            onClick={onBuyNow}\n            className=\"w-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white transition-all hover:from-indigo-700 hover:to-purple-700\"\n          >\n            Buy now\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default ProductCard_11;\nexport type { ProductCard_11Props };\n",
      "path": "/components/commerce-ui/blocks/product-card/product-card-11.tsx",
      "target": "components/commerce-ui/product-card-11.tsx"
    }
  ]
}