Archived
products modal added
This commit is contained in:
Paul Fresnel
+20
-145
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user