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",