products modal added

2024-11-09 17:39:17 +01:00
parent f877a74467
commit 8847904516
8 changed files with 369 additions and 167 deletions
@@ -8,9 +8,10 @@
      "name": "boulangerie-nextjs",
      "version": "0.1.0",
      "dependencies": {
+        "framer-motion": "^11.11.11",
        "next": "15.0.2",
-        "react": "19.0.0-rc-02c0e824-20241028",
-        "react-dom": "19.0.0-rc-02c0e824-20241028"
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
      },
      "devDependencies": {
        "@types/node": "^20",
@@ -2722,6 +2723,31 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/framer-motion": {
+      "version": "11.11.11",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.11.tgz",
+      "integrity": "sha512-tuDH23ptJAKUHGydJQII9PhABNJBpB+z0P1bmgKK9QFIssHGlfPd6kxMq00LSKwE27WFsb2z0ovY0bpUyMvfRw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/fs.realpath": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3564,7 +3590,6 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/js-yaml": {
@@ -3718,7 +3743,6 @@
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "js-tokens": "^3.0.0 || ^4.0.0"
@@ -4456,24 +4480,28 @@
      "license": "MIT"
    },
    "node_modules/react": {
-      "version": "19.0.0-rc-02c0e824-20241028",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.0.0-rc-02c0e824-20241028.tgz",
-      "integrity": "sha512-GbZ7hpPHQMiEu53BqEaPQVM/4GG4hARo+mqEEnx4rYporDvNvUjutiAFxYFSbu6sgHwcr7LeFv8htEOwALVA2A==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
      "engines": {
        "node": ">=0.10.0"
      }
    },
    "node_modules/react-dom": {
-      "version": "19.0.0-rc-02c0e824-20241028",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0-rc-02c0e824-20241028.tgz",
-      "integrity": "sha512-LrZf3DfHL6Fs07wwlUCHrzFTCMM19yA99MvJpfLokN4I2nBAZvREGZjZAn8VPiSfN72+i9j1eL4wB8gC695F3Q==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
      "license": "MIT",
      "dependencies": {
-        "scheduler": "0.25.0-rc-02c0e824-20241028"
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
      },
      "peerDependencies": {
-        "react": "19.0.0-rc-02c0e824-20241028"
+        "react": "^18.2.0"
      }
    },
    "node_modules/react-is": {
@@ -4675,10 +4703,13 @@
      }
    },
    "node_modules/scheduler": {
-      "version": "0.25.0-rc-02c0e824-20241028",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0-rc-02c0e824-20241028.tgz",
-      "integrity": "sha512-GysnKjmMSaWcwsKTLzeJO0IhU3EyIiC0ivJKE6yDNLqt3IMxDByx8b6lSNXRNdN+ULUY0WLLjSPaZ0LuU/GnTg==",
-      "license": "MIT"
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
    },
    "node_modules/semver": {
      "version": "7.6.3",
@@ -9,18 +9,19 @@
    "lint": "next lint"
  },
  "dependencies": {
-    "react": "19.0.0-rc-02c0e824-20241028",
-    "react-dom": "19.0.0-rc-02c0e824-20241028",
-    "next": "15.0.2"
+    "framer-motion": "^11.11.11",
+    "next": "15.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
  },
  "devDependencies": {
-    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.2",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "15.0.2"
+    "typescript": "^5"
  }
 }
@@ -1,149 +1,24 @@
-import Image from 'next/image';
+import { Metadata } from 'next';
+import ProductsPage from '@/components/ProductsPage';

-interface Product {
-  id: number;
-  name: string;
-  description: string;
-  price: string;
-  category: string;
-  image: string;
-}
-
-const products: Product[] = [
-  {
-    id: 1,
-    name: "Pagnot Traditionnel",
-    description: "Pain de campagne à la croûte dorée et croustillante, façonné à la main selon la tradition.",
-    price: "1.50€",
-    category: "Pains",
-    image: "/images/produits/pagnot.jpeg"
+export const metadata: Metadata = {
+  title: 'Nos Produits | Au Blé d\'Or - Boulangerie Artisanale',
+  description: 'Découvrez notre sélection de pains traditionnels, viennoiseries et pâtisseries artisanales. Produits frais préparés chaque jour avec passion.',
+  keywords: 'boulangerie, pâtisserie, pain artisanal, viennoiseries, croissant, chocolatine, pagnot, baguette tradition',
+  openGraph: {
+    title: 'Nos Produits | Au Blé d\'Or',
+    description: 'Découvrez nos produits artisanaux frais',
+    images: [
+      {
+        url: '/images/og/products.jpg',
+        width: 1200,
+        height: 630,
+        alt: 'Produits de la boulangerie Au Blé d\'Or',
+      },
+    ],
  },
-  {
-    id: 2,
-    name: "Baguette Tradition",
-    description: "La classique baguette française, croustillante à l'extérieur et moelleuse à l'intérieur.",
-    price: "0.90€",
-    category: "Pains",
-    image: "/images/produits/baguette.jpeg"
-  },
-  {
-    id: 3,
-    name: "Cupcake Vanille",
-    description: "Délicieux cupcake à la vanille de Madagascar, surmonté d'une crème légère.",
-    price: "3.00€",
-    category: "Pâtisseries",
-    image: "/images/produits/cupcake.jpg"
-  },
-  {
-    id: 4,
-    name: "Gâteau Royal Chocolat",
-    description: "Gâteau au chocolat noir intense, avec ses trois couches de mousse au chocolat.",
-    price: "12.50€",
-    category: "Pâtisseries",
-    image: "/images/produits/gateau-royal.jpg"
-  },
-  {
-    id: 5,
-    name: "Croissant Pur Beurre",
-    description: "Croissant artisanal au beurre AOP, feuilleté et croustillant.",
-    price: "1.45€",
-    category: "Viennoiseries",
-    image: "/images/produits/croissant.jpeg"
-  },
-  {
-    id: 6,
-    name: "Chocolatine",
-    description: "Viennoiserie au chocolat noir, feuilletée et généreusement garnie.",
-    price: "1.75€",
-    category: "Viennoiseries",
-    image: "/images/produits/chocolatine.jpg"
-  }
-];
-
-const ProductsPage = () => {
-  return (
-    <div className="min-h-screen bg-bakery-50">
-      {/* Hero Section */}
-      <div className="relative h-[50vh] bg-bakery-900">
-        <Image
-          src="/images/ressources/produits-boutique.jpeg"
-          alt="Boutique de produits"
-          fill
-          className="object-cover"
-        />
-        <div className="absolute inset-0 bg-black/40" />
-        <div className="relative container mx-auto px-4 h-full 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>
-      </div>
-
-      {/* Products Section */}
-      <div className="container mx-auto px-4 py-16">
-        {/* Categories */}
-        <div className="flex flex-wrap justify-center gap-4 mb-12">
-          {['Tous', 'Pains', 'Viennoiseries', 'Pâtisseries'].map((category) => (
-            <button
-              key={category}
-              className="px-6 py-2 rounded-full border-2 border-bakery-600 text-bakery-600 hover:bg-bakery-600 hover:text-white transition-colors"
-            >
-              {category}
-            </button>
-          ))}
-        </div>
-
-        {/* Products Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {products.map((product) => (
-            <div 
-              key={product.id}
-              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">
-                <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 className="text-bakery-600 hover:text-bakery-800 text-sm font-medium transition-colors">
-                    En savoir plus →
-                  </button>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
 };

-export default ProductsPage; 
+export default function Page() {
+  return <ProductsPage />;
+} 
@@ -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; 
@@ -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; 
@@ -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; 
@@ -0,0 +1,66 @@
+import { Product } from '@/types/product';
+
+export const categories = ['Tous', 'Pains', 'Viennoiseries', 'Pâtisseries'];
+
+export const products: Product[] = [
+  {
+    id: 1,
+    name: "Pagnot Traditionnel",
+    description: "Pain de campagne à la croûte dorée et croustillante, façonné à la main selon la tradition.",
+    price: "3.50€",
+    category: "Pains",
+    image: "/images/produits/pagnot.jpeg",
+    ingredients: "Farine de blé, eau, levain, sel marin",
+    storage: "À conserver dans un endroit frais et sec, consommer de préférence dans les 2-3 jours"
+  },
+  {
+    id: 2,
+    name: "Baguette",
+    description: "Pain traditionnel français, croustillant à l'extérieur et moelleux à l'intérieur.",
+    price: "2.00€",
+    category: "Pains",
+    image: "/images/produits/baguette.jpeg",
+    ingredients: "Farine de blé, eau, levain, sel",
+    storage: "À conserver dans un endroit frais et sec, consommer de préférence dans les 2-3 jours"
+  },
+  {
+    id: 3,
+    name: "Chocolatine",
+    description: "Viennoiserie feuilletée au beurre, garnie de chocolat.",
+    price: "1.50€",
+    category: "Viennoiseries",
+    image: "/images/produits/chocolatine.jpg",
+    ingredients: "Farine de blé, beurre, sucre, chocolat",
+    storage: "À conserver dans un endroit frais et sec, consommer de préférence dans les 2-3 jours"
+  },
+  {
+    id: 4,
+    name: "Croissant",
+    description: "Viennoiserie feuilletée au beurre, idéale pour le petit-déjeuner.",
+    price: "1.50€",
+    category: "Viennoiseries",
+    image: "/images/produits/croissant.jpeg",
+    ingredients: "Farine de blé, beurre, sucre",
+    storage: "À conserver dans un endroit frais et sec, consommer de préférence dans les 2-3 jours"
+  },
+  {
+    id: 5,
+    name: "Cupcake",
+    description: "Petit gâteau moelleux, idéal pour une pause sucrée.",
+    price: "2.00€",
+    category: "Pâtisseries",
+    image: "/images/produits/cupcake.jpg",
+    ingredients: "Farine de blé, beurre, sucre, oeufs",
+    storage: "À conserver dans un endroit frais et sec, consommer de préférence dans les 2-3 jours"
+  },
+  {
+    id: 6,
+    name: "Gâteau Royal Chocolat",
+    description: "Gâteau au chocolat fondant, idéal pour les amateurs de chocolat.",
+    price: "4.00€",
+    category: "Pâtisseries",
+    image: "/images/produits/gateau-royal.jpg",
+    ingredients: "Farine de blé, beurre, sucre, chocolat, oeufs",
+    storage: "À conserver dans un endroit frais et sec, consommer de préférence dans les 2-3 jours"
+  },
+]; 
@@ -0,0 +1,10 @@
+export interface Product {
+  id: number;
+  name: string;
+  description: string;
+  price: string;
+  category: string;
+  image: string;
+  ingredients: string;
+  storage: string;
+}