{
  "name": "product-card-12-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",
    "https://ui.stackzero.co/r/star-rating-fractions.json"
  ],
  "files": [
    {
      "type": "registry:block",
      "content": "\"use client\";\n\nimport ImageViewer from \"@/components/commerce-ui/image-viewer-basic\";\nimport PriceFormat from \"@/components/commerce-ui/price-format-basic\";\nimport StarRating_Fractions from \"@/components/commerce-ui/star-rating-fractions\";\nimport { Button } from \"@/components/ui/button\";\n\nconst DEFAULT_IMAGE_URL =\n  \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/family-01.jpg\";\n\ninterface ProductCard_12Props {\n  imageUrl?: string;\n  specialOffer?: boolean;\n  packageName?: string;\n  description?: string;\n  pricePerPerson?: number;\n  availableSpots?: number;\n  departureDate?: string;\n  duration?: string;\n  features?: string[];\n  testimonial?: {\n    text: string;\n    author: string;\n    avatarUrl?: string;\n    rating?: number;\n  };\n  onBookNow?: () => void;\n  onLearnMore?: () => void;\n  currencyPrefix?: string;\n}\n\nfunction ProductCard_12({\n  availableSpots = 8,\n  currencyPrefix = \"$\",\n  departureDate = \"June 15, 2025\",\n  description = \"All-inclusive family vacation with activities for all ages, beachfront accommodations, and kids club access\",\n  duration = \"7 days / 6 nights\",\n  features = [\n    \"Kids Stay Free\",\n    \"Private Beach Access\",\n    \"Daily Activities\",\n    \"All Meals Included\",\n  ],\n  imageUrl = DEFAULT_IMAGE_URL,\n  onBookNow = () => {},\n  onLearnMore = () => {},\n  packageName = \"Family Paradise Beach Resort\",\n  pricePerPerson = 799,\n  specialOffer = true,\n  testimonial = {\n    author: \"Sarah Johnson\",\n    avatarUrl:\n      \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/user-03.jpg\",\n    rating: 5,\n    text: \"Our family had an amazing time! The kids club was fantastic and we actually got to relax. Best vacation we've had in years.\",\n  },\n}: ProductCard_12Props = {}) {\n  const isLimitedAvailability = availableSpots <= 10;\n\n  return (\n    <div className=\"group flex 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      {/* Image section */}\n      <div className=\"relative h-52 w-full bg-gradient-to-br from-amber-50 via-orange-50 to-rose-50 sm:h-[220px] dark:from-gray-900 dark:via-orange-950/20 dark:to-gray-900\">\n        {specialOffer && (\n          <div className=\"absolute top-3 left-3 z-10 flex items-center justify-center\">\n            <div className=\"animate-pulse-slow rounded-full bg-orange-600 px-3 py-1 text-xs font-bold tracking-wider text-white uppercase shadow-md\">\n              Special Offer\n            </div>\n          </div>\n        )}\n\n        {/* Highlight glow effect */}\n        <div className=\"absolute inset-0\">\n          <div className=\"absolute -top-10 -left-10 h-32 w-32 rounded-full bg-orange-300/30 blur-2xl\"></div>\n          <div className=\"absolute right-0 -bottom-8 h-28 w-28 rounded-full bg-rose-400/30 blur-xl\"></div>\n        </div>\n\n        {/* Image with hover effect */}\n        <div className=\"absolute inset-0 -top-20 overflow-hidden\">\n          <div className=\"h-full w-full transition-transform duration-500 group-hover:scale-[1.03]\">\n            <ImageViewer\n              imageUrl={imageUrl}\n              classNameThumbnailViewer=\"w-full h-full object-cover \"\n            />\n          </div>\n        </div>\n      </div>\n\n      {/* Content section */}\n      <div className=\"flex flex-1 flex-col justify-between p-5\">\n        <div>\n          {/* Package name and description */}\n          <div className=\"mb-3\">\n            <div className=\"flex items-center justify-between\">\n              <h3 className=\"text-xl font-bold text-gray-900 dark:text-white\">\n                {packageName}\n              </h3>\n              <div className=\"text-right\">\n                <p className=\"text-sm text-gray-500 dark:text-gray-400\">\n                  per person\n                </p>\n                <PriceFormat\n                  prefix={currencyPrefix}\n                  value={pricePerPerson}\n                  className=\"text-xl font-bold text-orange-600 dark:text-orange-400\"\n                />\n              </div>\n            </div>\n\n            <div className=\"mt-1 flex items-center text-sm text-gray-600 dark:text-gray-400\">\n              <svg\n                className=\"mr-1.5 h-4 w-4 text-orange-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=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"\n                />\n              </svg>\n              <span>\n                {departureDate} • {duration}\n              </span>\n            </div>\n\n            <p className=\"mt-2 line-clamp-2 text-sm text-gray-600 dark:text-gray-400\">\n              {description}\n            </p>\n          </div>\n\n          {/* Features list */}\n          <div className=\"mb-4\">\n            <ul className=\"grid grid-cols-2 gap-x-4 gap-y-1\">\n              {features.map((feature, index) => (\n                <li key={index} className=\"flex items-center text-sm\">\n                  <svg\n                    className=\"mr-1.5 h-4 w-4 text-amber-500\"\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                    {feature}\n                  </span>\n                </li>\n              ))}\n            </ul>\n          </div>\n        </div>\n\n        {/* Testimonial Section */}\n        <div className=\"mb-4 rounded-lg bg-amber-50 p-3 dark:bg-amber-950/20\">\n          <div className=\"flex items-start gap-3\">\n            {testimonial.avatarUrl && (\n              <div className=\"flex-shrink-0\">\n                <img\n                  src={testimonial.avatarUrl}\n                  alt={testimonial.author}\n                  className=\"h-10 w-10 rounded-full border border-amber-200 object-cover dark:border-amber-800\"\n                />\n              </div>\n            )}\n            <div className=\"flex-1\">\n              <div className=\"mb-1\">\n                <StarRating_Fractions\n                  value={testimonial.rating || 5}\n                  maxStars={5}\n                  readOnly\n                  iconSize={14}\n                  color=\"#f59e0b\"\n                  className=\"inline-flex\"\n                />\n              </div>\n              <p className=\"line-clamp-2 text-xs text-gray-600 italic dark:text-gray-300\">\n                &quot;{testimonial.text}&quot;\n              </p>\n              <p className=\"mt-1 text-xs font-medium text-gray-700 dark:text-gray-300\">\n                — {testimonial.author}\n              </p>\n            </div>\n          </div>\n        </div>\n\n        {/* Bottom section with availability and buttons */}\n        <div className=\"flex items-end justify-between\">\n          <div>\n            {isLimitedAvailability ? (\n              <p className=\"text-xs font-medium text-amber-600 dark:text-amber-400\">\n                <span className=\"mr-1 inline-block h-2 w-2 animate-pulse rounded-full bg-amber-500\"></span>\n                Only {availableSpots} spots left\n              </p>\n            ) : (\n              <p className=\"text-xs font-medium text-green-600 dark:text-green-400\">\n                <span className=\"mr-1 inline-block h-2 w-2 rounded-full bg-green-500\"></span>\n                Available\n              </p>\n            )}\n          </div>\n\n          {/* Action buttons */}\n          <div className=\"flex space-x-2\">\n            <Button\n              variant=\"outline\"\n              onClick={onLearnMore}\n              className=\"border-gray-300 bg-white text-gray-700 hover:border-amber-500 hover:bg-amber-50 hover:text-amber-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200\"\n            >\n              View details\n            </Button>\n            <Button\n              onClick={onBookNow}\n              className=\"bg-gradient-to-r from-amber-500 to-orange-600 text-white hover:from-amber-600 hover:to-orange-700\"\n            >\n              Book now\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default ProductCard_12;\nexport type { ProductCard_12Props };\n",
      "path": "/components/commerce-ui/blocks/product-card/product-card-12.tsx",
      "target": "components/commerce-ui/product-card-12.tsx"
    }
  ]
}