Update components/product-grid.tsx

components/product-grid.tsx

@@ -0,0 +1,84 @@
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/badge";
+import Image from "next/image";
+
+const products = [
+  {
+    name: "Hand-Woven Silk Scarf",
+    seller: "Amina K.",
+    price: "$45",
+    category: "Fashion",
+    image: "https://images.unsplash.com/photo-1584030373081-f37b7bb4cb8e?q=80&w=800&auto=format&fit=crop",
+  },
+  {
+    name: "Organic Lavender Soap",
+    seller: "Sarah J.",
+    price: "$12",
+    category: "Wellness",
+    image: "https://images.unsplash.com/photo-1600857062241-98e5dba7f214?q=80&w=800&auto=format&fit=crop",
+  },
+  {
+    name: "Ceramic Coffee Mug",
+    seller: "Elena R.",
+    price: "$28",
+    category: "Home Decor",
+    image: "https://images.unsplash.com/photo-1514228742587-6b1558fcca3d?q=80&w=800&auto=format&fit=crop",
+  },
+  {
+    name: "Embroidered Wall Art",
+    seller: "Priya M.",
+    price: "$65",
+    category: "Art",
+    image: "https://images.unsplash.com/photo-1611486212335-132bb537d4e6?q=80&w=800&auto=format&fit=crop",
+  },
+];
+
+export function ProductGrid() {
+  return (
+    <section id="explore" className="py-20">
+      <Container>
+        <div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-4">
+          <div className="max-w-2xl">
+            <Heading>Featured Creations</Heading>
+            <Subheading className="mt-2">
+              Handpicked treasures from our verified women artists and housewives.
+            </Subheading>
+          </div>
+          <Button variant="link" className="text-pink-600 font-semibold p-0 h-auto">
+            View all products →
+          </Button>
+        </div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+          {products.map((product, index) => (
+            <div key={index} className="group cursor-pointer">
+              <div className="relative aspect-square overflow-hidden rounded-2xl bg-neutral-100 mb-4">
+                <Image
+                  src={product.image}
+                  alt={product.name}
+                  fill
+                  className="object-cover transition-transform duration-500 group-hover:scale-110"
+                />
+                <div className="absolute top-3 left-3">
+                  <Badge className="bg-white/90 text-black backdrop-blur-sm border-none">
+                    {product.category}
+                  </Badge>
+                </div>
+              </div>
+              <h3 className="font-bold text-lg text-neutral-900">{product.name}</h3>
+              <p className="text-neutral-500 text-sm mb-2">by {product.seller}</p>
+              <div className="flex justify-between items-center">
+                <span className="font-bold text-pink-600">{product.price}</span>
+                <Button size="sm" variant="outline" className="rounded-full h-8 px-4 text-xs">
+                  Add to Cart
+                </Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}