Update components/categories.tsx

components/categories.tsx

@@ -0,0 +1,73 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Card, CardContent } from "@/components/ui/card";
+import { BlurImage } from "@/components/blur-image";
+import Link from "next/link";
+
+const categories = [
+  {
+    name: "Living Room",
+    image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=600&q=80",
+    count: 120,
+  },
+  {
+    name: "Bedroom",
+    image: "https://images.unsplash.com/photo-1522771739844-6a9f6d5f14af?w=600&q=80",
+    count: 95,
+  },
+  {
+    name: "Dining Room",
+    image: "https://images.unsplash.com/photo-1617806118233-18e1de247200?w=600&q=80",
+    count: 78,
+  },
+  {
+    name: "Office",
+    image: "https://images.unsplash.com/photo-1497366216548-37526070297c?w=600&q=80",
+    count: 65,
+  },
+  {
+    name: "Outdoor",
+    image: "https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=600&q=80",
+    count: 42,
+  },
+  {
+    name: "Storage",
+    image: "https://images.unsplash.com/photo-1595428774223-ef52624120d2?w=600&q=80",
+    count: 58,
+  },
+];
+
+export function Categories() {
+  return (
+    <section className="py-20">
+      <Container>
+        <div className="text-center mb-12">
+          <Heading>Shop by Category</Heading>
+        </div>
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+          {categories.map((category) => (
+            <Link key={category.name} href={`/categories/${category.name.toLowerCase().replace(" ", "-")}`}>
+              <Card className="group cursor-pointer hover:shadow-lg transition-all duration-300">
+                <CardContent className="p-0">
+                  <div className="relative h-40 overflow-hidden rounded-t-lg">
+                    <BlurImage
+                      src={category.image}
+                      alt={category.name}
+                      fill
+                      className="object-cover group-hover:scale-110 transition-transform duration-300"
+                    />
+                  </div>
+                  <div className="p-4 text-center">
+                    <h3 className="font-semibold text-sm mb-1">{category.name}</h3>
+                    <p className="text-xs text-neutral-500">{category.count} items</p>
+                  </div>
+                </CardContent>
+              </Card>
+            </Link>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}