product-card-11-block

1"use client";
2 
3import ImageViewer from "@/components/commerce-ui/image-viewer-basic";
4import PriceFormat_Sale from "@/components/commerce-ui/price-format-sale";
5import { Button } from "@/components/ui/button";
6 
7const DEFAULT_IMAGE_URL =
8  "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/essential-oil-01.jpg";
9 
10interface ProductCard_11Props {
11  imageUrl?: string;
12  organic?: boolean;
13  productName?: string;
14  description?: string;
15  price?: number;
16  originalPrice?: number;
17  volume?: string;
18  aromaType?: string;
19  benefits?: string[];
20  ingredients?: string[];
21  onAddToCart?: () => void;
22  onBuyNow?: () => void;
23  currencyPrefix?: string;
24}
25 
26function ProductCard_11({
27  aromaType = "Floral, Herbaceous",
28  benefits = [
29    "Promotes relaxation",
30    "Reduces stress",
31    "Improves sleep",
32    "Soothes skin",
33  ],
34  currencyPrefix = "$",
35  description = "100% pure essential oil extracted through steam distillation from organic lavender flowers. Provides calming aromatherapy benefits to promote relaxation and better sleep.",
36  imageUrl = DEFAULT_IMAGE_URL,
37  ingredients = ["Pure Lavender Oil", "Lavandula angustifolia"],
38  onAddToCart = () => {},
39  onBuyNow = () => {},
40  organic = true,
41  originalPrice = 24.99,
42  price = 18.99,
43  productName = "Lavender Serenity Essential Oil",
44  volume = "15ml / 0.5 fl oz",
45}: ProductCard_11Props = {}) {
46  return (
47    <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">
48      {/* Organic badge */}
49      {organic && (
50        <div className="absolute top-3 left-3 z-10">
51          <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">
52            100% ORGANIC
53            <span className="absolute -top-1 -right-1 flex h-3 w-3">
54              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-purple-400 opacity-75"></span>
55              <span className="relative inline-flex h-3 w-3 rounded-full bg-purple-500"></span>
56            </span>
57          </span>
58        </div>
59      )}
60 
61      {/* Image container with background glow effect */}
62      <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">
63// … truncated