From 05d121bfd4c0900c45c6ffd724279b29e17e024c Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Sun, 18 Jan 2026 18:29:47 +0000
Subject: [PATCH] Update app/categories/page.tsx

---
 app/categories/page.tsx | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 app/categories/page.tsx

diff --git a/app/categories/page.tsx b/app/categories/page.tsx
new file mode 100644
index 0000000..901601b
--- /dev/null
+++ b/app/categories/page.tsx
@@ -0,0 +1,40 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Footer } from "@/components/footer";
+import { products } from "@/lib/data";
+import Link from "next/link";
+
+export default function CategoriesPage() {
+  const categories = [
+    { name: "Electronics", icon: "🔌", image: "https://images.unsplash.com/photo-1498049794561-7780e7231661?q=80&w=1000&auto=format&fit=crop" },
+    { name: "Fashion", icon: "👕", image: "https://images.unsplash.com/photo-1445205170230-053b830c6050?q=80&w=1000&auto=format&fit=crop" },
+    { name: "Groceries", icon: "🍎", image: "https://images.unsplash.com/photo-1542838132-92c53300491e?q=80&w=1000&auto=format&fit=crop" },
+    { name: "Hotel Supplies", icon: "🏨", image: "https://images.unsplash.com/photo-1593642632823-8f785ba67e45?q=80&w=1000&auto=format&fit=crop" },
+  ];
+
+  return (
+    <main className="min-h-screen bg-neutral-50">
+      <Container className="py-20">
+        <Heading className="mb-12">Shop by Category</Heading>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {categories.map((cat) => (
+            <Link key={cat.name} href={`/products?category=${cat.name}`} className="group">
+              <div className="bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-md transition-all">
+                <div className="aspect-[4/3] relative">
+                  <img src={cat.image} alt={cat.name} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                  <div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors" />
+                  <div className="absolute bottom-4 left-4 text-white">
+                    <span className="text-3xl mb-2 block">{cat.icon}</span>
+                    <h3 className="text-xl font-bold">{cat.name}</h3>
+                  </div>
+                </div>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </Container>
+      <Footer />
+    </main>
+  );
+}