Update app/shop/page.tsx

app/shop/page.tsx

@@ -0,0 +1,89 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Footer } from "@/components/footer";
+import { ProductCard, Product } from "@/components/product-card";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+
+const allProducts: Product[] = [
+  {
+    id: "1",
+    name: "Classic Oxford Leather",
+    price: 189,
+    category: "Formal",
+    image: "https://images.unsplash.com/photo-1653868250450-b83e6263d427?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwzfHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080",
+    isNew: true
+  },
+  {
+    id: "2",
+    name: "Urban Runner Pro",
+    price: 129,
+    category: "Sneakers",
+    image: "https://images.unsplash.com/photo-1600202280810-e0b3f6f1933e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwxfHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080"
+  },
+  {
+    id: "3",
+    name: "Elegance Stiletto",
+    price: 249,
+    category: "Women",
+    image: "https://images.unsplash.com/photo-1618274158630-bc47a614b3a5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwyfHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080",
+    isSale: true
+  },
+  {
+    id: "4",
+    name: "Heritage Brogue",
+    price: 210,
+    category: "Formal",
+    image: "https://images.unsplash.com/photo-1664505504065-31f8937d2261?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHw0fHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080"
+  },
+  {
+    id: "5",
+    name: "Casual Loafer",
+    price: 145,
+    category: "Casual",
+    image: "https://images.unsplash.com/photo-1646139498425-5bceb422ba6a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHw1fHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080"
+  }
+];
+
+const categories = ["All", "Formal", "Sneakers", "Women", "Casual"];
+
+export default function ShopPage() {
+  const [activeCategory, setActiveCategory] = useState("All");
+
+  const filteredProducts = activeCategory === "All" 
+    ? allProducts 
+    : allProducts.filter(p => p.category === activeCategory);
+
+  return (
+    <main className="min-h-screen pt-32">
+      <Container className="pb-24">
+        <div className="mb-12">
+          <Heading>Shop Collection</Heading>
+          <Subheading className="mt-2">Explore our full range of premium footwear.</Subheading>
+        </div>
+
+        <div className="flex flex-wrap gap-4 mb-12">
+          {categories.map((cat) => (
+            <Button 
+              key={cat} 
+              variant={activeCategory === cat ? "default" : "outline"}
+              onClick={() => setActiveCategory(cat)}
+              className="rounded-full"
+            >
+              {cat}
+            </Button>
+          ))}
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+          {filteredProducts.map((product) => (
+            <ProductCard key={product.id} product={product} />
+          ))}
+        </div>
+      </Container>
+      <Footer />
+    </main>
+  );
+}