Update app/shop/page.tsx

app/shop/page.tsx

@@ -0,0 +1,162 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { ProductCard } from "@/components/product-card";
+import { Footer } from "@/components/footer";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+
+const allProducts = [
+  {
+    id: "1",
+    name: "Modern Velvet Sofa",
+    price: 899,
+    originalPrice: 1299,
+    image: "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=600&q=80",
+    category: "Living Room",
+    isSale: true,
+  },
+  {
+    id: "2",
+    name: "Scandinavian Dining Table",
+    price: 649,
+    image: "https://images.unsplash.com/photo-1617806118233-18e1de247200?w=600&q=80",
+    category: "Dining Room",
+    isNew: true,
+  },
+  {
+    id: "3",
+    name: "Luxury King Bed Frame",
+    price: 1199,
+    originalPrice: 1499,
+    image: "https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?w=600&q=80",
+    category: "Bedroom",
+    isSale: true,
+  },
+  {
+    id: "4",
+    name: "Ergonomic Office Chair",
+    price: 349,
+    image: "https://images.unsplash.com/photo-1580480055273-228ff5388ef8?w=600&q=80",
+    category: "Office",
+    isNew: true,
+  },
+  {
+    id: "5",
+    name: "Minimalist Coffee Table",
+    price: 299,
+    image: "https://images.unsplash.com/photo-1532372320572-cda25653a26d?w=600&q=80",
+    category: "Living Room",
+  },
+  {
+    id: "6",
+    name: "Leather Recliner",
+    price: 799,
+    originalPrice: 999,
+    image: "https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?w=600&q=80",
+    category: "Living Room",
+    isSale: true,
+  },
+  {
+    id: "7",
+    name: "Oak Bookshelf",
+    price: 449,
+    image: "https://images.unsplash.com/photo-1594620302200-9a762244a156?w=600&q=80",
+    category: "Storage",
+    isNew: true,
+  },
+  {
+    id: "8",
+    name: "Upholstered Dining Chairs (Set of 4)",
+    price: 599,
+    image: "https://images.unsplash.com/photo-1503602642458-232111445657?w=600&q=80",
+    category: "Dining Room",
+  },
+  {
+    id: "9",
+    name: "Platform Bed with Storage",
+    price: 899,
+    image: "https://images.unsplash.com/photo-1540574163026-643ea20ade25?w=600&q=80",
+    category: "Bedroom",
+  },
+  {
+    id: "10",
+    name: "Standing Desk",
+    price: 549,
+    originalPrice: 699,
+    image: "https://images.unsplash.com/photo-1595515106969-1ce29566ff1c?w=600&q=80",
+    category: "Office",
+    isSale: true,
+  },
+  {
+    id: "11",
+    name: "Outdoor Patio Set",
+    price: 1299,
+    image: "https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=600&q=80",
+    category: "Outdoor",
+    isNew: true,
+  },
+  {
+    id: "12",
+    name: "Accent Armchair",
+    price: 399,
+    image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=600&q=80",
+    category: "Living Room",
+  },
+];
+
+const categories = ["All", "Living Room", "Bedroom", "Dining Room", "Office", "Outdoor", "Storage"];
+
+export default function ShopPage() {
+  const [selectedCategory, setSelectedCategory] = useState("All");
+
+  const filteredProducts = selectedCategory === "All" 
+    ? allProducts 
+    : allProducts.filter(p => p.category === selectedCategory);
+
+  return (
+    <>
+      <section className="py-12 border-b">
+        <Container>
+          <Heading className="mb-2">Shop All Furniture</Heading>
+          <p className="text-neutral-600 dark:text-neutral-400">
+            Discover our complete collection of premium furniture
+          </p>
+        </Container>
+      </section>
+
+      <section className="py-12">
+        <Container>
+          {/* Category Filter */}
+          <div className="flex flex-wrap gap-2 mb-8">
+            {categories.map((category) => (
+              <Button
+                key={category}
+                variant={selectedCategory === category ? "default" : "outline"}
+                onClick={() => setSelectedCategory(category)}
+              >
+                {category}
+              </Button>
+            ))}
+          </div>
+
+          {/* Products Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
+            {filteredProducts.map((product) => (
+              <ProductCard key={product.id} {...product} />
+            ))}
+          </div>
+
+          {/* Load More */}
+          <div className="text-center mt-12">
+            <Button variant="outline" size="lg">
+              Load More Products
+            </Button>
+          </div>
+        </Container>
+      </section>
+
+      <Footer />
+    </>
+  );
+}