products modal added

src/components/LoadingSpinner.tsx

@@ -0,0 +1,5 @@
+const LoadingSpinner = () => (
+  <div className="animate-spin rounded-full h-12 w-12 border-4 border-bakery-600 border-t-transparent" />
+);
+
+export default LoadingSpinner; 

src/components/ProductModal.tsx

@@ -0,0 +1,71 @@
+import { motion, AnimatePresence } from 'framer-motion';
+import Image from 'next/image';
+import type { Product } from '@/types/product';
+
+interface ProductModalProps {
+  product: Product | null;
+  onClose: () => void;
+}
+
+const ProductModal = ({ product, onClose }: ProductModalProps) => {
+  if (!product) return null;
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        className="fixed inset-0 z-50 overflow-y-auto bg-black bg-opacity-50 backdrop-blur-sm"
+        onClick={onClose}
+      >
+        <div className="min-h-screen px-4 text-center">
+          <motion.div
+            initial={{ scale: 0.95, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.95, opacity: 0 }}
+            className="inline-block w-full max-w-2xl p-6 my-8 text-left align-middle bg-white rounded-lg shadow-xl"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="relative h-80 mb-6">
+              <Image
+                src={product.image}
+                alt={product.name}
+                fill
+                className="object-cover rounded-lg"
+              />
+            </div>
+            
+            <div className="flex justify-between items-start mb-4">
+              <h3 className="font-serif text-2xl text-bakery-800">{product.name}</h3>
+              <span className="text-bakery-600 text-xl font-semibold">{product.price}</span>
+            </div>
+
+            <p className="text-bakery-600/80 mb-6">{product.description}</p>
+
+            <div className="space-y-4">
+              <div>
+                <h4 className="font-medium text-bakery-800 mb-2">Ingrédients</h4>
+                <p className="text-bakery-600/80">{product.ingredients}</p>
+              </div>
+              
+              <div>
+                <h4 className="font-medium text-bakery-800 mb-2">Conservation</h4>
+                <p className="text-bakery-600/80">{product.storage}</p>
+              </div>
+            </div>
+
+            <button
+              onClick={onClose}
+              className="mt-6 w-full bg-bakery-600 text-white py-3 rounded-md hover:bg-bakery-700 transition-colors"
+            >
+              Fermer
+            </button>
+          </motion.div>
+        </div>
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+export default ProductModal; 

src/components/ProductsPage.tsx

@@ -0,0 +1,143 @@
+'use client';
+import { useState } from 'react';
+import Image from 'next/image';
+import { motion, AnimatePresence } from 'framer-motion';
+import ProductModal from './ProductModal';
+import { products, categories } from '@/data/products';
+import type { Product } from '@/types/product';
+import LoadingSpinner from './LoadingSpinner';
+
+const ProductsPage = () => {
+  const [selectedCategory, setSelectedCategory] = useState('Tous');
+  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const filteredProducts = selectedCategory === 'Tous'
+    ? products
+    : products.filter(product => product.category === selectedCategory);
+
+  const handleCategoryChange = (category: string) => {
+    setIsLoading(true);
+    setSelectedCategory(category);
+    // Simulate loading state
+    setTimeout(() => setIsLoading(false), 500);
+  };
+
+  return (
+    <div className="min-h-screen bg-bakery-50">
+      {/* Hero Section */}
+      <motion.div 
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        className="relative h-[40vh] bg-bakery-900"
+      >
+        <div className="absolute inset-0 bg-black/40 bg-cover bg-center" style={{ backgroundImage: 'url(/images/ressources/produits-boutique.jpeg)', opacity: '0.6' }} />
+        <div className="relative container mx-auto px-4 h-[45vh] flex items-center justify-center text-center">
+          <div>
+            <h1 className="font-serif text-4xl md:text-5xl text-white mb-4">
+              Nos Produits
+            </h1>
+            <p className="text-white/90 text-lg max-w-2xl">
+              Découvrez notre sélection de produits artisanaux, préparés chaque jour avec passion
+            </p>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Products Section */}
+      <div className="container mx-auto px-4 py-16">
+        {/* Categories */}
+        <div className="flex flex-wrap justify-center gap-4 mb-12">
+          {categories.map((category) => (
+            <motion.button
+              key={category}
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              onClick={() => handleCategoryChange(category)}
+              className={`px-6 py-2 rounded-full border-2 transition-colors ${
+                selectedCategory === category
+                  ? 'bg-bakery-600 text-white border-bakery-600'
+                  : 'border-bakery-600 text-bakery-600 hover:bg-bakery-600 hover:text-white'
+              }`}
+            >
+              {category}
+            </motion.button>
+          ))}
+        </div>
+
+        {/* Products Grid */}
+        {isLoading ? (
+          <div className="flex justify-center items-center h-96">
+            <LoadingSpinner />
+          </div>
+        ) : (
+          <motion.div 
+            layout
+            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+          >
+            <AnimatePresence>
+              {filteredProducts.map((product) => (
+                <motion.div
+                  key={product.id}
+                  layout
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  className="group bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300"
+                >
+                  {/* Image Container */}
+                  <div 
+                    className="relative h-64 overflow-hidden cursor-pointer"
+                    onClick={() => setSelectedProduct(product)}
+                  >
+                    <div className="absolute inset-0 bg-bakery-200/20" />
+                    <Image
+                      src={product.image}
+                      alt={product.name}
+                      fill
+                      className="object-cover transform group-hover:scale-105 transition-transform duration-300"
+                    />
+                  </div>
+
+                  {/* Content */}
+                  <div className="p-6">
+                    <div className="flex justify-between items-start mb-2">
+                      <h3 className="font-serif text-xl text-bakery-800">
+                        {product.name}
+                      </h3>
+                      <span className="text-bakery-600 font-semibold">
+                        {product.price}
+                      </span>
+                    </div>
+                    <p className="text-bakery-600/80 text-sm mb-4">
+                      {product.description}
+                    </p>
+                    <div className="flex justify-between items-center">
+                      <span className="text-sm text-bakery-500">
+                        {product.category}
+                      </span>
+                      <button 
+                        onClick={() => setSelectedProduct(product)}
+                        className="text-bakery-600 hover:text-bakery-800 text-sm font-medium transition-colors"
+                      >
+                        En savoir plus →
+                      </button>
+                    </div>
+                  </div>
+                </motion.div>
+              ))}
+            </AnimatePresence>
+          </motion.div>
+        )}
+      </div>
+
+      {/* Product Modal */}
+      <ProductModal 
+        product={selectedProduct} 
+        onClose={() => setSelectedProduct(null)} 
+      />
+    </div>
+  );
+};
+
+export default ProductsPage;