only front-end init

app/boutique/page.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useState } from "react";
+import { useLanguage } from "@/contexts/LanguageContext";
+import { products, categories } from "@/data/products";
+import ProductCard from "@/components/ProductCard";
+
+
+export default function Shop() {
+  const { t } = useLanguage();
+  // const [searchParams] = useSearchParams();
+  // const initialCategory = searchParams.get("category") || "all";
+  const [selectedCategory, setSelectedCategory] = useState("all");
+
+  const filtered = selectedCategory === "all" ? products : products.filter((p) => p.category === selectedCategory);
+
+  return (
+    <div className="min-h-screen py-20 lg:py-12">
+      <div className="container mx-auto px-4 lg:px-8">
+        <h1 className="font-serif text-3xl lg:text-5xl text-center mb-8">{t("shop.title")}</h1>
+
+        {/* Filters */}
+        <div className="flex flex-wrap justify-center gap-2 mb-10">
+          <button
+            onClick={() => setSelectedCategory("all")}
+            className={`px-4 py-2 rounded-full text-sm transition-colors ${
+              selectedCategory === "all" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-accent"
+            }`}
+          >
+            {t("shop.filter.all")}
+          </button>
+          {categories.map((cat) => (
+            <button
+              key={cat.id}
+              onClick={() => setSelectedCategory(cat.id)}
+              className={`px-4 py-2 rounded-full text-sm transition-colors cursor-pointer ${
+                selectedCategory === cat.id ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-accent"
+              }`}
+            >
+              {cat.name}
+            </button>
+          ))}
+        </div>
+
+        {/* Product Grid */}
+        <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6">
+          {filtered.map((product) => (
+            <ProductCard key={product.id} product={product} />
+          ))}
+        </div>
+
+        {filtered.length === 0 && (
+          <p className="text-center text-muted-foreground py-20">Aucun produit trouvé.</p>
+        )}
+      </div>
+    </div>
+  );
+};