product-card-01-block

1"use client";
2 
3import ImageViewer from "@/components/commerce-ui/image-viewer-basic";
4import PriceFormat from "@/components/commerce-ui/price-format-basic";
5import StarRating_Fractions from "@/components/commerce-ui/star-rating-fractions";
6import { Button } from "@/components/ui/button";
7 
8const DEFAULT_IMAGE_URL =
9  "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/headphone-1.jpg";
10 
11interface ProductCardProps {
12  imageUrl?: string;
13  discount?: string | null;
14  title?: string;
15  description?: string;
16  price?: number;
17  prefix?: string;
18  rating?: number;
19  reviewCount?: number;
20  onAddToCart?: () => void;
21  onBuyNow?: () => void;
22  freeShipping?: boolean;
23}
24 
25function ProductCard_01({
26  description = "Premium noise-cancelling headphones with surround sound technology and high comfort",
27  discount = "20% OFF",
28  freeShipping = true,
29  imageUrl = DEFAULT_IMAGE_URL,
30  onAddToCart = () => {},
31  onBuyNow = () => {},
32  prefix = "$",
33  price = 98.96,
34  rating = 4.7,
35  reviewCount = 65,
36  title = "Wireless headset",
37}: ProductCardProps = {}) {
38  return (
39    <div className="group relative flex w-[350px] 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">
40      {/* Image section with background and dynamic glow effect */}
41      <div className="relative overflow-hidden bg-gradient-to-br from-teal-50 to-cyan-50 p-5 dark:from-teal-950/30 dark:to-cyan-950/30">
42        {discount && (
43          <div className="absolute top-3 left-3 z-10">
44            <span className="relative inline-block rounded-full bg-gradient-to-r from-teal-500 to-cyan-600 px-3 py-1.5 text-xs font-bold text-white">
45              {discount}
46            </span>
47          </div>
48        )}
49 
50        {/* Glow effect */}
51        <div className="absolute -bottom-10 left-1/2 h-40 w-40 -translate-x-1/2 transform rounded-full bg-teal-500/20 blur-3xl"></div>
52 
53        <div className="transition-transform duration-500 group-hover:scale-105">
54          <ImageViewer
55            imageUrl={imageUrl}
56            classNameThumbnailViewer="rounded-lg object-contain h-[200px] mx-auto"
57          />
58        </div>
59      </div>
60 
61      {/* Content section */}
62      <div className="flex flex-1 flex-col gap-3 p-5">
63        <div>
64          <h3 className="mb-1.5 text-xl font-semibold tracking-tight text-gray-900 dark:text-gray-100">
65            {title}
66          </h3>
67 
68// … truncated