Update app/products/page.tsx

app/products/page.tsx

@@ -0,0 +1,90 @@
+"use client";
+import { useState } from "react";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { products, categories } from "@/lib/data";
+import { ProductCard } from "@/components/product-card";
+import { Footer } from "@/components/footer";
+import { Input } from "@/components/ui/input";
+import { Search, SlidersHorizontal } from "lucide-react";
+
+export default function ProductsPage() {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState("All");
+
+  const filteredProducts = products.filter((p) => {
+    const matchesSearch = p.name.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesCategory = selectedCategory === "All" || p.category === selectedCategory;
+    return matchesSearch && matchesCategory;
+  });
+
+  return (
+    <main className="min-h-screen bg-neutral-50">
+      <div className="bg-white border-b py-8">
+        <Container>
+          <Heading className="mb-6">Our Products</Heading>
+          <div className="flex flex-col md:flex-row gap-4">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400" />
+              <Input 
+                placeholder="Search products..." 
+                className="pl-10 rounded-full bg-neutral-50 border-none"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+            </div>
+            <div className="flex gap-2 overflow-x-auto pb-2 md:pb-0 no-scrollbar">
+              <button
+                onClick={() => setSelectedCategory("All")}
+                className={`px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-colors ${
+                  selectedCategory === "All" 
+                    ? "bg-blue-600 text-white" 
+                    : "bg-neutral-100 text-neutral-600 hover:bg-neutral-200"
+                }`}
+              >
+                All
+              </button>
+              {categories.map((cat) => (
+                <button
+                  key={cat.name}
+                  onClick={() => setSelectedCategory(cat.name)}
+                  className={`px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-colors ${
+                    selectedCategory === cat.name 
+                      ? "bg-blue-600 text-white" 
+                      : "bg-neutral-100 text-neutral-600 hover:bg-neutral-200"
+                  }`}
+                >
+                  {cat.name}
+                </button>
+              ))}
+            </div>
+          </div>
+        </Container>
+      </div>
+
+      <section className="py-12">
+        <Container>
+          <div className="flex items-center justify-between mb-8">
+            <p className="text-sm text-neutral-500">
+              Showing {filteredProducts.length} products
+            </p>
+          </div>
+          
+          {filteredProducts.length > 0 ? (
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+              {filteredProducts.map((product) => (
+                <ProductCard key={product.id} product={product} />
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-20">
+              <Heading level={3} className="text-xl text-neutral-400">No products found</Heading>
+              <p className="text-neutral-500 mt-2">Try adjusting your search or filters</p>
+            </div>
+          )}
+        </Container>
+      </section>
+      <Footer />
+    </main>
+  );
+}