@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/theme/valero/slots/product/ProductActions/ProductOptionsSection.tsx

@@ -0,0 +1,233 @@
+"use client"
+
+import Image from "next/image"
+import Color from "color"
+import { HttpTypes } from "@medusajs/types"
+import OptionSelect from "@modules/products/components/product-actions/option-select"
+import type { ProductOptions } from "@core/domain/product/variant-selection"
+
+type ProductOptionsSectionProps = {
+  product: HttpTypes.StoreProduct
+  disabled?: boolean
+  isAdding: boolean
+  options: ProductOptions
+  setOptionValue: (optionId: string, value: string) => void
+  setColorValue: (optionId: string, value: string) => void
+  validationErrors: Record<string, string>
+  colorOption?: HttpTypes.StoreProductOption
+  sizeOption?: HttpTypes.StoreProductOption
+  otherOptions: HttpTypes.StoreProductOption[]
+  colorVariants: HttpTypes.StoreProductVariant[]
+  selectedColorValue?: string
+  quantity: number
+  setQuantity: (value: number) => void
+  inventoryLimit: number | null
+  onOpenSizeChart: () => void
+}
+
+export function ProductOptionsSection({
+  product,
+  disabled,
+  isAdding,
+  options,
+  setOptionValue,
+  setColorValue,
+  validationErrors,
+  colorOption,
+  sizeOption,
+  otherOptions,
+  colorVariants,
+  selectedColorValue,
+  quantity,
+  setQuantity,
+  inventoryLimit,
+  onOpenSizeChart,
+}: ProductOptionsSectionProps) {
+  return (
+    <>
+      {colorOption && (
+        <div className="flex flex-col gap-3">
+          <div className="flex items-center gap-2">
+            <h3 className="text-[11px] font-semibold text-heading uppercase tracking-[var(--letter-spacing-nav)]">
+              {colorVariants.length > 0
+                ? "More Colors"
+                : `Select ${colorOption.title}`}
+            </h3>
+            {validationErrors[colorOption.id] && (
+              <span className="text-[10px] text-red-600 font-black uppercase tracking-wider animate-pulse border-l-2 border-red-600 pl-2">
+                Please Select {String(colorOption.title || "")}
+              </span>
+            )}
+          </div>
+          {colorVariants.length > 0 ? (
+            <div className="flex gap-2 sm:gap-3 overflow-x-auto pb-2">
+              {colorVariants.map((variant) => {
+                const variantImage =
+                  (variant.metadata?.image as string) ||
+                  variant.thumbnail ||
+                  variant.images?.[0]?.url ||
+                  product.thumbnail
+                const variantColorValue = variant.options?.find(
+                  (opt) => opt.option_id === colorOption.id
+                )?.value
+                const isSelected = variantColorValue === selectedColorValue
+                let stripColor = (variant.metadata?.color_hex as string) || null
+                if (!stripColor && variantColorValue) {
+                  try {
+                    stripColor = Color(
+                      variantColorValue.toLowerCase().replace(/\s+/g, "")
+                    ).hex()
+                  } catch {
+                    stripColor = null
+                  }
+                }
+                return (
+                  <button
+                    key={variant.id}
+                    type="button"
+                    className={`w-12 h-14 sm:w-16 sm:h-[4.5rem] overflow-hidden border flex-shrink-0 flex flex-col ${
+                      isSelected
+                        ? "border-brand-accent ring-1 ring-brand-accent"
+                        : "border-[var(--color-header-border)] hover:border-brand-accent-light"
+                    }`}
+                    onClick={() => {
+                      if (colorOption && variantColorValue) {
+                        setColorValue(colorOption.id, variantColorValue)
+                      }
+                    }}
+                  >
+                    <div className="flex-1 w-full relative overflow-hidden">
+                      {variantImage && (
+                        <Image
+                          src={variantImage}
+                          alt={`Color variant: ${variantColorValue || "Unknown"}`}
+                          fill
+                          sizes="64px"
+                          className="object-cover"
+                        />
+                      )}
+                    </div>
+                    {stripColor && (
+                      <div
+                        className="h-2 w-full border-t border-gray-100"
+                        style={{ backgroundColor: stripColor }}
+                      />
+                    )}
+                  </button>
+                )
+              })}
+            </div>
+          ) : (
+            <OptionSelect
+              option={colorOption}
+              current={options[colorOption.id]}
+              updateOption={setOptionValue}
+              title={colorOption.title ?? ""}
+              data-testid="product-options"
+              disabled={!!disabled || isAdding}
+              error={validationErrors[colorOption.id]}
+            />
+          )}
+        </div>
+      )}
+
+      {sizeOption && (
+        <div className="flex flex-col gap-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <h3 className="text-[11px] font-semibold text-heading uppercase tracking-[var(--letter-spacing-nav)]">
+                Select Size
+              </h3>
+              {validationErrors[sizeOption.id] && (
+                <span className="text-[10px] text-red-600 font-black uppercase tracking-wider animate-pulse border-l-2 border-red-600 pl-2">
+                  Please Select {String(sizeOption.title || "")}
+                </span>
+              )}
+            </div>
+            <button
+              type="button"
+              onClick={onOpenSizeChart}
+              className="flex items-center gap-1.5 text-xs sm:text-sm font-medium hover:opacity-80 text-brand-accent"
+            >
+              <Image src="/Size Chart.svg" alt="Size Chart" width={16} height={16} />
+              Size Chart
+            </button>
+          </div>
+          <OptionSelect
+            option={sizeOption}
+            current={options[sizeOption.id]}
+            updateOption={setOptionValue}
+            title={sizeOption.title ?? ""}
+            data-testid="product-options"
+            disabled={!!disabled || isAdding}
+            error={validationErrors[sizeOption.id]}
+          />
+        </div>
+      )}
+
+      {otherOptions
+        .sort((a, b) => (a.title || "").localeCompare(b.title || ""))
+        .map((option) => (
+          <div key={option.id} className="flex flex-col gap-3">
+            <div className="flex items-center gap-2">
+              <h3 className="text-[11px] font-semibold text-heading uppercase tracking-[var(--letter-spacing-nav)]">
+                Select {String(option.title || "")}
+              </h3>
+              {validationErrors[option.id] && (
+                <span className="text-[10px] text-red-600 font-black uppercase tracking-wider animate-pulse border-l-2 border-red-600 pl-2">
+                  Please Select {String(option.title || "")}
+                </span>
+              )}
+            </div>
+            <OptionSelect
+              option={option}
+              current={options[option.id]}
+              updateOption={setOptionValue}
+              title={option.title ?? ""}
+              data-testid="product-options"
+              disabled={!!disabled || isAdding}
+              error={validationErrors[option.id]}
+            />
+          </div>
+        ))}
+
+      <div className="flex flex-col gap-3">
+        <div className="flex items-center justify-between">
+          <h3 className="text-xs sm:text-sm font-semibold text-gray-900 uppercase">
+            Quantity
+          </h3>
+          {inventoryLimit !== null && inventoryLimit > 0 && inventoryLimit <= 5 && (
+            <span className="text-[10px] sm:text-xs font-bold uppercase tracking-wider text-orange-600">
+              Hurry! Only {inventoryLimit} left
+            </span>
+          )}
+        </div>
+        <div className="flex items-center border border-[var(--color-header-border)] overflow-hidden bg-surface w-[120px]">
+          <button
+            type="button"
+            onClick={() => setQuantity(Math.max(1, quantity - 1))}
+            disabled={quantity <= 1}
+            className="w-10 h-10 flex items-center justify-center hover:bg-gray-50 disabled:opacity-50"
+          >
+            −
+          </button>
+          <span className="flex-1 text-center font-semibold text-gray-900 py-2">
+            {quantity}
+          </span>
+          <button
+            type="button"
+            onClick={() => {
+              if (inventoryLimit === null || quantity < inventoryLimit) {
+                setQuantity(quantity + 1)
+              }
+            }}
+            disabled={inventoryLimit !== null && quantity >= inventoryLimit}
+            className="w-10 h-10 flex items-center justify-center hover:bg-gray-50 disabled:opacity-50"
+          >
+            +
+          </button>
+        </div>
+      </div>
+    </>
+  )
+}

package/templates/storefront/src/theme/valero/slots/product/ProductActions/ProductPriceSection.tsx

@@ -0,0 +1,53 @@
+import {
+  formatDisplayPrice,
+  formatINRPrice,
+  type VariantPrice,
+} from "@core/domain/product/pricing"
+
+type ProductPriceSectionProps = {
+  displayPrice: VariantPrice
+  quantityInCart: number
+}
+
+export function ProductPriceSection({
+  displayPrice,
+  quantityInCart,
+}: ProductPriceSectionProps) {
+  const originalPrice = displayPrice?.original_price_number
+  const currentPrice = displayPrice?.calculated_price_number
+  const discountPercentage =
+    originalPrice && currentPrice && originalPrice > currentPrice
+      ? Math.round(((originalPrice - currentPrice) / originalPrice) * 100)
+      : null
+
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="flex items-baseline justify-between flex-wrap gap-2">
+        <div className="flex items-baseline gap-3 flex-wrap">
+          <span className="text-xl sm:text-2xl font-semibold text-heading">
+            {formatDisplayPrice(displayPrice, currentPrice)}
+          </span>
+          {originalPrice && currentPrice && originalPrice > currentPrice && (
+            <>
+              <span className="text-base text-[var(--color-text-muted)] line-through">
+                {formatINRPrice(originalPrice)}
+              </span>
+              {discountPercentage && (
+                <span className="text-sm font-medium text-brand-sale">
+                  {discountPercentage}% off
+                </span>
+              )}
+            </>
+          )}
+        </div>
+
+        {quantityInCart > 0 && (
+          <span className="text-[11px] font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-brand-success">
+            {quantityInCart} in bag
+          </span>
+        )}
+      </div>
+      <p className="text-xs text-[var(--color-text-muted)]">Tax included.</p>
+    </div>
+  )
+}

package/templates/storefront/src/theme/valero/slots/product/ProductActions/ProductTrustSection.tsx

@@ -0,0 +1,84 @@
+"use client"
+
+import Image from "next/image"
+import PincodeChecker from "@modules/cart/components/pincode-checker"
+
+type ProductTrustSectionProps = {
+  selectedVariantId?: string
+  onOpenFeature: (feature: string) => void
+}
+
+export function ProductTrustSection({ selectedVariantId, onOpenFeature }: ProductTrustSectionProps) {
+  return (
+    <>
+    <div className="flex items-center justify-between py-2 px-4 bg-gray-50/60 rounded-xl border border-gray-100/80 mt-0.5 sm:-mt-1.5 mb-1 sm:mb-0">
+      <div className="flex items-center gap-3 sm:gap-4">
+        <Image src="/Item.svg" alt="Mastercard" width={40} height={28} className="h-6 sm:h-7 w-auto grayscale-[0.2]" />
+        <Image src="/Item (1).svg" alt="Amex" width={40} height={28} className="h-6 sm:h-7 w-auto grayscale-[0.2]" />
+        <Image src="/Item (2).svg" alt="Diners" width={40} height={28} className="h-7 sm:h-7 w-auto grayscale-[0.2]" />
+        <Image src="/visa.svg" alt="Visa" width={40} height={28} className="h-5 sm:h-6 w-auto grayscale-[0.2]" />
+      </div>
+      <div className="flex items-center gap-1.5 sm:gap-2 ml-2 sm:ml-0">
+         <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#156229" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+           <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+           <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+         </svg>
+         <span className="text-[9px] sm:text-[11px] font-bold text-gray-700 uppercase tracking-wider whitespace-nowrap">Secure Payments</span>
+      </div>
+    </div>
+
+    {/* Pincode Checker Section */}
+    <div className="mt-0.5 sm:-mt-1.5 mb-0">
+      <PincodeChecker variantId={selectedVariantId} />
+    </div>
+
+    {/* Service Features Section */}
+    <div className="flex flex-row overflow-x-auto no-scrollbar py-4 border-t border-gray-200 gap-4 min-[500px]:gap-0 min-[500px]:justify-between min-[500px]:overflow-visible">
+      {/* 7 Days Easy Return */}
+      <div className="flex flex-col items-center gap-2 flex-shrink-0 min-w-[120px] min-[500px]:flex-1 min-[500px]:min-w-0 group">
+        <div className="w-8 h-8 flex items-center justify-center">
+          <Image src="/Return.svg" alt="Return" width={28} height={26} />
+        </div>
+        <div className="flex items-center gap-1.5 cursor-pointer hover:opacity-80 transition-opacity" onClick={() => onOpenFeature('return')}>
+          <span className="text-xs text-gray-800 font-medium text-center whitespace-nowrap leading-none">7 Days Easy Return</span>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" className="text-gray-600 group-hover:text-purple-600 transition-colors relative top-[-0.5px]">
+            <polyline points="9 18 15 12 9 6"></polyline>
+          </svg>
+        </div>
+      </div>
+
+      {/* Separator */}
+      <div className="hidden min-[500px]:block w-px h-12 bg-gray-200 flex-shrink-0"></div>
+
+      {/* Fast Delivery */}
+      <div className="flex flex-col items-center gap-2 flex-shrink-0 min-w-[120px] min-[500px]:flex-1 min-[500px]:min-w-0 group">
+        <div className="w-8 h-8 flex items-center justify-center">
+          <Image src="/delivery.svg" alt="Delivery" width={30} height={18} />
+        </div>
+        <div className="flex items-center gap-1.5 cursor-pointer hover:opacity-80 transition-opacity" onClick={() => onOpenFeature('delivery')}>
+          <span className="text-xs text-gray-800 font-medium text-center whitespace-nowrap leading-none">Fast Delivery</span>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" className="text-gray-600 group-hover:text-purple-600 transition-colors relative top-[-0.5px]">
+            <polyline points="9 18 15 12 9 6"></polyline>
+          </svg>
+        </div>
+      </div>
+
+      {/* Separator */}
+      <div className="hidden min-[500px]:block w-px h-12 bg-gray-200 flex-shrink-0"></div>
+
+      {/* Cash On Delivery Available */}
+      <div className="flex flex-col items-center gap-2 flex-shrink-0 min-w-[120px] min-[500px]:flex-1 min-[500px]:min-w-0 group">
+        <div className="w-8 h-8 flex items-center justify-center">
+          <Image src="/Cod.svg" alt="COD" width={30} height={18} />
+        </div>
+        <div className="flex items-center gap-1.5 cursor-pointer hover:opacity-80 transition-opacity" onClick={() => onOpenFeature('cod')}>
+          <span className="text-xs text-gray-800 font-medium text-center whitespace-nowrap leading-none">Cash On Delivery Available</span>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" className="text-gray-600 group-hover:text-purple-600 transition-colors relative top-[-0.5px]">
+            <polyline points="9 18 15 12 9 6"></polyline>
+          </svg>
+        </div>
+      </div>
+    </div>
+    </>
+  )
+}

package/templates/storefront/src/theme/valero/slots/product/ProductActions/index.tsx

@@ -0,0 +1,161 @@
+"use client"
+
+import { useEffect, useMemo, useRef, useState } from "react"
+import { useParams } from "next/navigation"
+import { HttpTypes } from "@medusajs/types"
+import { useProductVariant } from "@core/hooks/use-product-variant"
+import { useProductActions } from "@core/hooks/use-product-actions"
+import { getDisplayPrice } from "@core/domain/product/pricing"
+import LoginPopup from "@modules/common/components/login-popup"
+import { ProductPriceSection } from "./ProductPriceSection"
+import { ProductOptionsSection } from "./ProductOptionsSection"
+import { ProductCTASection } from "./ProductCTASection"
+import { ProductTrustSection } from "./ProductTrustSection"
+import { ProductHighlightsSection } from "./ProductHighlightsSection"
+import { ProductFeaturePanel } from "./ProductFeaturePanel"
+import { ProductDetailsSection } from "./ProductDetailsSection"
+
+type ProductActionsProps = {
+  product: HttpTypes.StoreProduct
+  region?: HttpTypes.StoreRegion
+  disabled?: boolean
+  cart?: HttpTypes.StoreCart | null
+}
+
+export default function ProductActions({
+  product,
+  region,
+  disabled,
+  cart,
+}: ProductActionsProps) {
+  const countryCode = useParams().countryCode as string
+  const actionsRef = useRef<HTMLDivElement>(null)
+
+  const {
+    options,
+    setOptionValue,
+    setColorValue,
+    selectedVariant,
+    isValidVariant,
+    validationErrors,
+    validateOptions,
+    colorOption,
+    sizeOption,
+    otherOptions,
+    colorVariants,
+    selectedColorValue,
+  } = useProductVariant({ product })
+
+  const displayPrice = useMemo(
+    () => getDisplayPrice(product, selectedVariant),
+    [product, selectedVariant]
+  )
+
+  const {
+    quantity,
+    setQuantity,
+    isAdding,
+    isBuyingNow,
+    variantInCart,
+    quantityInCart,
+    inStock,
+    inventoryLimit,
+    handleAddToCart,
+    handleBuyNow,
+    handleIncreaseQuantity,
+    handleDecreaseQuantity,
+  } = useProductActions({
+    product,
+    region,
+    cart,
+    selectedVariant,
+    options,
+    isValidVariant,
+    displayPrice,
+    validateOptions,
+  })
+
+  const [activeFeature, setActiveFeature] = useState<string | null>(null)
+  const [showLoginPopup, setShowLoginPopup] = useState(false)
+  const [showNotifyMessage, setShowNotifyMessage] = useState(false)
+
+  useEffect(() => {
+    setShowNotifyMessage(false)
+  }, [options])
+
+  return (
+    <>
+      <div
+        className="flex flex-col gap-4 sm:gap-5 w-full"
+        ref={actionsRef}
+      >
+        {displayPrice && (
+          <ProductPriceSection
+            displayPrice={displayPrice}
+            quantityInCart={quantityInCart}
+          />
+        )}
+
+        <ProductOptionsSection
+          product={product}
+          disabled={disabled}
+          isAdding={isAdding}
+          options={options}
+          setOptionValue={setOptionValue}
+          setColorValue={setColorValue}
+          validationErrors={validationErrors}
+          colorOption={colorOption}
+          sizeOption={sizeOption}
+          otherOptions={otherOptions}
+          colorVariants={colorVariants}
+          selectedColorValue={selectedColorValue}
+          quantity={quantity}
+          setQuantity={setQuantity}
+          inventoryLimit={inventoryLimit}
+          onOpenSizeChart={() => setActiveFeature("size_chart")}
+        />
+
+        <ProductCTASection
+          product={product}
+          selectedVariant={selectedVariant}
+          options={options}
+          isValidVariant={isValidVariant}
+          disabled={disabled}
+          inStock={inStock}
+          inventoryLimit={inventoryLimit}
+          quantity={quantity}
+          quantityInCart={quantityInCart}
+          variantInCart={variantInCart}
+          isAdding={isAdding}
+          isBuyingNow={isBuyingNow}
+          showNotifyMessage={showNotifyMessage}
+          setShowNotifyMessage={setShowNotifyMessage}
+          handleAddToCart={handleAddToCart}
+          handleBuyNow={handleBuyNow}
+          handleIncreaseQuantity={handleIncreaseQuantity}
+          handleDecreaseQuantity={handleDecreaseQuantity}
+        />
+
+        <ProductTrustSection
+          selectedVariantId={selectedVariant?.id}
+          onOpenFeature={setActiveFeature}
+        />
+
+        <ProductHighlightsSection product={product} />
+
+        <ProductFeaturePanel
+          activeFeature={activeFeature}
+          onClose={() => setActiveFeature(null)}
+        />
+
+        <ProductDetailsSection product={product} />
+      </div>
+
+      <LoginPopup
+        isOpen={showLoginPopup}
+        onClose={() => setShowLoginPopup(false)}
+        countryCode={countryCode}
+      />
+    </>
+  )
+}

package/templates/storefront/src/theme/valero/slots/product/ProductCard/index.tsx

@@ -0,0 +1,132 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import Image from "next/image"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { getProductPrice } from "@core/util/get-product-price"
+import { convertToLocale } from "@core/util/money"
+import { useAddToCart } from "@core/hooks/use-add-to-cart"
+import PlaceholderImage from "@modules/common/icons/placeholder-image"
+import { clx } from "@medusajs/ui"
+import type { ProductCardProps } from "@core/types/product-card"
+
+export default function ProductCard({
+  product,
+  region,
+  className,
+}: ProductCardProps) {
+  const { isAdding, handleAddToCart } = useAddToCart({ region })
+  const [imageHover, setImageHover] = useState(false)
+
+  const { cheapestPrice } = getProductPrice({ product })
+  const thumbnail = product.thumbnail
+  const secondImage = product.images?.[1]?.url
+
+  const discount = cheapestPrice?.percentage_diff
+  const hasSale =
+    discount && Number.parseInt(String(discount).replace(/\D/g, ""), 10) > 0
+
+  const priceLabel = useMemo(() => {
+    if (!cheapestPrice) return null
+    return convertToLocale({
+      amount: cheapestPrice.calculated_price_number,
+      currency_code: cheapestPrice.currency_code,
+    })
+  }, [cheapestPrice])
+
+  const compareLabel = useMemo(() => {
+    if (!cheapestPrice?.original_price_number) return null
+    if (cheapestPrice.calculated_price_number >= cheapestPrice.original_price_number)
+      return null
+    return convertToLocale({
+      amount: cheapestPrice.original_price_number,
+      currency_code: cheapestPrice.currency_code,
+    })
+  }, [cheapestPrice])
+
+  const onQuickAdd = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    handleAddToCart(product)
+  }
+
+  return (
+    <article className={clx("group flex flex-col w-full", className)}>
+      <LocalizedClientLink
+        href={`/products/${product.handle}`}
+        className="block"
+        data-testid="product-card"
+      >
+        <div
+          className="relative aspect-[3/4] overflow-hidden bg-surface-muted mb-4"
+          onMouseEnter={() => setImageHover(true)}
+          onMouseLeave={() => setImageHover(false)}
+        >
+          {thumbnail ? (
+            <>
+              <Image
+                src={thumbnail}
+                alt={product.title || "Product"}
+                fill
+                sizes="(max-width:640px) 50vw, (max-width:1024px) 33vw, 25vw"
+                className={clx(
+                  "object-cover transition-opacity duration-500",
+                  imageHover && secondImage ? "opacity-0" : "opacity-100"
+                )}
+              />
+              {secondImage && (
+                <Image
+                  src={secondImage}
+                  alt=""
+                  fill
+                  sizes="(max-width:640px) 50vw, (max-width:1024px) 33vw, 25vw"
+                  className={clx(
+                    "object-cover transition-opacity duration-500",
+                    imageHover ? "opacity-100" : "opacity-0"
+                  )}
+                />
+              )}
+            </>
+          ) : (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <PlaceholderImage size={48} />
+            </div>
+          )}
+
+          {hasSale && (
+            <span className="absolute top-3 left-3 bg-brand-sale text-white text-[10px] font-semibold uppercase tracking-wider px-2.5 py-1">
+              Sale
+            </span>
+          )}
+
+          <div className="absolute inset-x-0 bottom-0 p-3 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
+            <button
+              type="button"
+              onClick={onQuickAdd}
+              disabled={isAdding === product.id}
+              className="w-full bg-brand-accent text-[var(--color-text-inverse)] py-3 text-[11px] font-semibold uppercase tracking-[var(--letter-spacing-nav)] hover:bg-brand-accent-hover transition-colors disabled:opacity-60"
+            >
+              {isAdding === product.id ? "Adding…" : "Quick add"}
+            </button>
+          </div>
+        </div>
+
+        <div className="space-y-1.5">
+          <h3 className="text-sm font-medium text-heading leading-snug line-clamp-2 group-hover:underline underline-offset-2">
+            {product.title}
+          </h3>
+          <div className="flex items-baseline gap-2">
+            {priceLabel && (
+              <span className="text-sm font-semibold text-heading">{priceLabel}</span>
+            )}
+            {compareLabel && (
+              <span className="text-sm text-[var(--color-text-muted)] line-through">
+                {compareLabel}
+              </span>
+            )}
+          </div>
+        </div>
+      </LocalizedClientLink>
+    </article>
+  )
+}