From 7f89e181ad2d9b5e232b92c61727a3cefc8489a7 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Mon, 22 Jun 2026 12:03:33 +0000
Subject: [PATCH] Bob AI: Added volume selector to product cards in shop
 section

---
 src/pages/HomePage/sections/Shop.tsx | 52 ++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/src/pages/HomePage/sections/Shop.tsx b/src/pages/HomePage/sections/Shop.tsx
index 74f4b7c..19ed571 100644
--- a/src/pages/HomePage/sections/Shop.tsx
+++ b/src/pages/HomePage/sections/Shop.tsx
@@ -72,6 +72,58 @@ interface FeaturesRevealCardsBentoProps {
   items: [FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem];
 }
 
+const ProductCard = ({ item, index, staggerDelays, gridClasses }: any) => {
+  const [volume, setVolume] = useState("5ml");
+  const volumeOptions = [
+    { value: "5ml", label: "5ml" },
+    { value: "10ml", label: "10ml" },
+    { value: "30ml", label: "30ml" },
+    { value: "full", label: "Full" },
+  ];
+
+  return (
+    <ScrollReveal
+      variant="slide-up"
+      delay={staggerDelays[index]}
+      className={cls(
+        "card rounded-lg overflow-hidden flex flex-col group relative",
+        gridClasses[index]
+      )}
+    >
+      <div className="relative w-full aspect-video md:aspect-auto md:h-64 overflow-hidden">
+        <ImageOrVideo
+          imageSrc={item.imageSrc}
+          videoSrc={item.videoSrc}
+          className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+        />
+      </div>
+      <div className="p-6 flex flex-col flex-grow gap-4">
+        <div>
+          <h3 className="text-xl font-semibold text-foreground mb-2">
+            {item.title}
+          </h3>
+          <p className="text-accent text-sm">
+            {item.description}
+          </p>
+        </div>
+        
+        <div className="mt-auto flex flex-col gap-4">
+          <div className="flex flex-col gap-2">
+            <Label className="text-xs font-medium text-foreground">Select Volume</Label>
+            <SelectorButton 
+              options={volumeOptions} 
+              activeValue={volume} 
+              onValueChange={setVolume} 
+              className="w-full"
+            />
+          </div>
+          <Button text={`Add to Cart`} variant="primary" className="w-full" />
+        </div>
+      </div>
+    </ScrollReveal>
+  );
+};
+
 const ShopInline = () => {
   const gridClasses = [
     "md:col-span-2",
-- 
2.49.1