diff --git a/components/product-grid.tsx b/components/product-grid.tsx
new file mode 100644
index 0000000..470132c
--- /dev/null
+++ b/components/product-grid.tsx
@@ -0,0 +1,90 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/badge";
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+
+const products = [
+  {
+    id: 1,
+    name: "Gourmet Whole Bean",
+    category: "Coffee",
+    price: "$18.99",
+    image: "https://images.unsplash.com/photo-1559056199-641a0ac8b55e?q=80&w=2070&auto=format&fit=crop",
+    tag: "Best Seller"
+  },
+  {
+    id: 2,
+    name: "Biodegradable Pods",
+    category: "Eco-Friendly",
+    price: "$14.50",
+    image: "https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?q=80&w=1974&auto=format&fit=crop",
+    tag: "Sustainable"
+  },
+  {
+    id: 3,
+    name: "Coffee Cookies",
+    category: "Snacks",
+    price: "$8.99",
+    image: "https://images.unsplash.com/photo-1499636136210-6f4ee915583e?q=80&w=1964&auto=format&fit=crop",
+    tag: "Artisan"
+  },
+  {
+    id: 4,
+    name: "Quindío Gift Set",
+    category: "Bundles",
+    price: "$45.00",
+    image: "https://images.unsplash.com/photo-1544787210-2827443cb69b?q=80&w=2022&auto=format&fit=crop",
+    tag: "Gift Idea"
+  }
+];
+
+export function ProductGrid() {
+  return (
+    <section id="products" className="py-24 bg-white">
+      <Container>
+        <div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-4">
+          <div>
+            <Badge className="bg-amber-100 text-amber-800 border-none mb-4">Our Collection</Badge>
+            <Heading>Premium Colombian Selection</Heading>
+          </div>
+          <Button variant="link" className="text-amber-800 font-semibold">View All Products →</Button>
+        </div>
+        
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+          {products.map((product) => (
+            <Card key={product.id} className="group border-none shadow-sm hover:shadow-md transition-all">
+              <CardHeader className="p-0 overflow-hidden rounded-t-xl">
+                <div className="relative h-64 w-full">
+                  <Image 
+                    src={product.image} 
+                    alt={product.name} 
+                    fill 
+                    className="object-cover group-hover:scale-105 transition-transform duration-500"
+                  />
+                  <div className="absolute top-3 left-3">
+                    <Badge className="bg-white/90 text-stone-900 backdrop-blur-sm border-none">
+                      {product.tag}
+                    </Badge>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="pt-6">
+                <p className="text-xs text-stone-500 uppercase tracking-widest mb-1">{product.category}</p>
+                <CardTitle className="text-xl text-stone-900">{product.name}</CardTitle>
+                <p className="text-lg font-bold text-amber-800 mt-2">{product.price}</p>
+              </CardContent>
+              <CardFooter className="pb-6">
+                <Button className="w-full bg-stone-900 hover:bg-stone-800 text-white">
+                  Add to Cart
+                </Button>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}