Archived
2.0
This commit is contained in:
@@ -0,0 +1,110 @@
|
||||
'use client';
|
||||
import { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import LoadingSpinner from './LoadingSpinner';
|
||||
|
||||
const ContactPage = () => {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
message: ''
|
||||
});
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value
|
||||
});
|
||||
};
|
||||
|
||||
// TODO: Implement form submission
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
// Simulate form submission
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
alert('Message sent!');
|
||||
setFormData({ name: '', email: '', message: '' });
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
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-600"
|
||||
>
|
||||
<div className="absolute inset-0 bg-black/40 bg-cover bg-center" style={{ backgroundImage: 'url(/images/ressources/contact-bg.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-sans text-4xl md:text-5xl text-white mb-4">
|
||||
Contact Us
|
||||
</h1>
|
||||
<p className="text-white/90 text-lg max-w-2xl">
|
||||
We'd love to hear from you! Please fill out the form below to get in touch.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Contact Form Section */}
|
||||
<div className="container mx-auto px-4 py-16">
|
||||
<div className="max-w-2xl mx-auto bg-white p-8 rounded-lg shadow-md">
|
||||
<h2 className="text-2xl font-semibold mb-6">Get in Touch</h2>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2" htmlFor="name">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-bakery-600"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2" htmlFor="email">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-bakery-600"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2" htmlFor="message">Message</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-bakery-600"
|
||||
rows={5}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<button
|
||||
type="submit"
|
||||
className="px-6 py-2 bg-bakery-600 text-white rounded-full hover:bg-bakery-700 transition-colors"
|
||||
>
|
||||
{isLoading ? <LoadingSpinner /> : 'Send Message'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactPage;
|
||||
@@ -1,5 +1,6 @@
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import Logo from './Logo';
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
@@ -8,34 +9,21 @@ const Footer = () => {
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
{/* Logo and Description */}
|
||||
<div className="col-span-1 md:col-span-2 flex items-center">
|
||||
<Image
|
||||
src="/images/ressources/logo.png"
|
||||
alt="Au Blé d'Or - Boulangerie Artisanale"
|
||||
width={60}
|
||||
height={60}
|
||||
className="mb-4 mr-4"
|
||||
/>
|
||||
<div>
|
||||
<h2 className="text-bakery-400 font-semibold mb-2 text-lg">Au Blé d'Or</h2>
|
||||
<p className="text-bakery-200 max-w-md">
|
||||
Artisans boulangers depuis 1987, nous perpétuons la tradition
|
||||
du bon pain et des pâtisseries artisanales.
|
||||
</p>
|
||||
</div>
|
||||
<Logo logoColor="#f2f3f2"/>
|
||||
</div>
|
||||
|
||||
{/* Navigation Links */}
|
||||
<div>
|
||||
<h3 className="font-serif text-xl mb-4">Navigation</h3>
|
||||
<h3 className="font-adbhashitha text-xl mb-4">Navigation</h3>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<Link href="/produits" className="text-bakery-200 hover:text-white transition">
|
||||
Nos Produits
|
||||
<Link href="/products" className="text-bakery-200 hover:text-white transition">
|
||||
Our Products
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/notre-histoire" className="text-bakery-200 hover:text-white transition">
|
||||
Notre Histoire
|
||||
<Link href="/history" className="text-bakery-200 hover:text-white transition">
|
||||
History
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
@@ -48,7 +36,7 @@ const Footer = () => {
|
||||
|
||||
{/* Contact Info */}
|
||||
<div>
|
||||
<h3 className="font-serif text-xl mb-4">Contact</h3>
|
||||
<h3 className="font-adbhashitha text-xl mb-4">Contact</h3>
|
||||
<ul className="space-y-2 text-bakery-200">
|
||||
<li>123 Rue du Pain</li>
|
||||
<li>75001 Paris</li>
|
||||
@@ -60,7 +48,7 @@ const Footer = () => {
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="border-t border-bakery-700 mt-8 pt-8 text-center text-bakery-300">
|
||||
<p>© 2024 Au Blé d'Or - Boulangerie Artisanale. Tous droits réservés.</p>
|
||||
<p>© 2025 The Vine Cofeehouse & Bakery</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -2,13 +2,14 @@
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import Logo from './Logo';
|
||||
|
||||
const Header = () => {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
|
||||
const navItems = [
|
||||
{ label: 'Nos Produits', href: '/produits' },
|
||||
{ label: 'Notre Histoire', href: '/notre-histoire' },
|
||||
{ label: 'Our Products', href: '/products' },
|
||||
{ label: 'History', href: '/history' },
|
||||
{ label: 'Contact', href: '/contact' },
|
||||
];
|
||||
|
||||
@@ -17,19 +18,7 @@ const Header = () => {
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex items-center justify-between h-20">
|
||||
{/* Logo */}
|
||||
<Link href="/" className="flex items-center">
|
||||
<Image
|
||||
src="/images/ressources/logo.png"
|
||||
alt="Au Blé d'Or - Boulangerie Artisanale"
|
||||
width={60}
|
||||
height={60}
|
||||
className="h-12 w-auto"
|
||||
/>
|
||||
<span className="ml-3 font-serif text-2xl text-bakery-800">
|
||||
Au Blé d'Or
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
<Logo logoColor="#40433c"/>
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:flex space-x-8">
|
||||
{navItems.map((item) => (
|
||||
@@ -70,13 +59,7 @@ const Header = () => {
|
||||
`}>
|
||||
<div className="p-4">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<span className="font-serif text-xl text-bakery-800"><Image
|
||||
src="/images/ressources/logo.png"
|
||||
alt="Au Blé d'Or - Boulangerie Artisanale"
|
||||
width={60}
|
||||
height={60}
|
||||
className="mb-4 mr-4"
|
||||
/><p>Au Blé d'Or</p></span>
|
||||
<Logo logoColor='black'/>
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="p-2"
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
'use client';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const HistoryPage = () => {
|
||||
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-600"
|
||||
>
|
||||
<div className="absolute inset-0 bg-black/40 bg-cover bg-center" style={{ backgroundImage: 'url(/images/ressources/history-bg.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-sans text-4xl md:text-5xl text-white mb-4">
|
||||
Our History
|
||||
</h1>
|
||||
<p className="text-white/90 text-lg max-w-2xl">
|
||||
Discover the story behind our bakery.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* History Content Section */}
|
||||
<div className="container mx-auto px-4 py-16">
|
||||
<div className="max-w-3xl mx-auto bg-white p-8 rounded-lg shadow-md">
|
||||
<h2 className="text-2xl font-semibold mb-6">Our Journey</h2>
|
||||
<p className="mb-4">
|
||||
Our bakery was founded in 1920 by John Doe, a passionate baker with a dream to bring the finest baked goods to the community. Over the years, our bakery has grown and evolved, but our commitment to quality and tradition has remained the same.
|
||||
</p>
|
||||
<p className="mb-4">
|
||||
In the early days, John would wake up before dawn to prepare fresh bread and pastries for the day. His dedication and hard work quickly earned him a loyal customer base. As the bakery's reputation grew, so did its offerings. Today, we offer a wide variety of baked goods, from classic breads and pastries to modern cakes and desserts.
|
||||
</p>
|
||||
<p className="mb-4">
|
||||
Throughout the decades, our bakery has remained a family-owned business. Each generation has brought new ideas and innovations, while staying true to the values and traditions that John established. We are proud to be a part of this community and to continue serving our customers with the same passion and dedication that started it all.
|
||||
</p>
|
||||
<p className="mb-4">
|
||||
Thank you for being a part of our journey. We look forward to many more years of baking for you and your family.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HistoryPage;
|
||||
+50
-193
@@ -9,48 +9,56 @@ const HomePage = () => {
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
{/* Hero Section */}
|
||||
<section className="relative h-[80vh]">
|
||||
<section className="relative py-16 bg-bakery-600 text-white">"
|
||||
{/* Background Image */}
|
||||
<Image
|
||||
src="/images/ressources/main-banner.jpeg"
|
||||
alt="Au Blé d'Or - Boulangerie Artisanale"
|
||||
{/* <Image
|
||||
src="/images/gallery/Outside.jpg"
|
||||
alt="The Vine Coffeehouse & Bakery"
|
||||
fill
|
||||
priority
|
||||
className="object-cover"
|
||||
quality={90}
|
||||
/>
|
||||
/> */}
|
||||
{/* Overlay */}
|
||||
<div className="absolute inset-0 bg-black/40" />
|
||||
<div className="absolute inset-0"/>
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative container mx-auto px-4 h-full flex items-center">
|
||||
<div className="text-white max-w-2xl">
|
||||
<h1 className="font-serif text-5xl md:text-6xl mb-4">
|
||||
Boulangerie Artisanale
|
||||
</h1>
|
||||
<p className="text-xl mb-8">
|
||||
Découvrez nos pains et pâtisseries faits maison avec passion depuis 1987
|
||||
</p>
|
||||
<Link
|
||||
href="/produits"
|
||||
className="bg-bakery-600 hover:bg-bakery-700 text-white px-8 py-3 rounded-md inline-block transition"
|
||||
>
|
||||
Commander en ligne
|
||||
</Link>
|
||||
</div>
|
||||
<div className="text-white max-w-2xl">
|
||||
<div className="w-full">
|
||||
<Image
|
||||
src="/images/vine_logo/linen_mist.png"
|
||||
alt="The Vine Coffeehouse & Bakery"
|
||||
width={2}
|
||||
height={1}
|
||||
layout="responsive"
|
||||
className="object-cover"
|
||||
quality={90}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xl mb-8">
|
||||
Discover our homemade treats and cakes made with passion.
|
||||
</p>
|
||||
<Link
|
||||
href="/products"
|
||||
className="bg-bakery-50 hover:bg-bakery-100 text-bakery-800 px-8 py-3 rounded-md inline-block transition"
|
||||
>
|
||||
See Our Products
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{/* Nos Spécialités */}
|
||||
{/* Our Specialties */}
|
||||
<section className="py-16 bg-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<h2 className="font-serif text-4xl text-center mb-12">Nos Spécialités</h2>
|
||||
<h2 className="font-adbhashitha text-4xl text-center mb-12">Our Specialties</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{['Pains Traditionnels', 'Viennoiseries', 'Pâtisseries'].map((item, index) => (
|
||||
{['Cinnamon Rolls', 'Sugar Cookies', 'Cakes'].map((item, index) => (
|
||||
<div key={index} className="text-center p-6 bg-bakery-50 rounded-lg">
|
||||
<h3 className="font-serif text-2xl mb-6">{item}</h3>
|
||||
<h3 className="font-sans text-2xl mb-6">{item}</h3>
|
||||
<div className="flex justify-center items-center mb-4">
|
||||
<Image
|
||||
src={`/images/gallery/${item}.png`}
|
||||
@@ -61,203 +69,52 @@ const HomePage = () => {
|
||||
priority={index < 3}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-bakery-700">Découvrez notre sélection de {item.toLowerCase()} préparés chaque jour avec amour.</p>
|
||||
{/* <p className="text-bakery-700">Discover our selection of {item.toLowerCase()} prepared daily with love.</p> */}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Notre Histoire */}
|
||||
<section className="py-16 bg-bakery-50">
|
||||
{/* About Us */}
|
||||
<section className="py-16 bg-bakery-600 text-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-3xl mx-auto text-center">
|
||||
<h2 className="font-serif text-4xl mb-8">Notre Histoire</h2>
|
||||
<h2 className="font-adbhashitha text-4xl mb-8" style={{ letterSpacing: '0.01em' }}>About Us</h2>
|
||||
<p className="text-lg mb-6">
|
||||
Depuis plus de 35 ans, notre boulangerie familiale perpétue la tradition du bon pain artisanal.
|
||||
Chaque jour, nos artisans boulangers se lèvent tôt pour vous proposer des produits frais et authentiques.
|
||||
Welcome to The Vine Bakery, where the warmth of home meets the heart of Princeville, IL. We're passionate about baking delicious, fresh goods that bring people together. Our cozy space invites you to gather with friends and family, sharing in the simple joy of homemade treats made with love and the finest ingredients. Come join us at The Vine and feel right at home.
|
||||
</p>
|
||||
<Link href="/notre-histoire" className="text-bakery-600 hover:text-bakery-700 font-semibold">
|
||||
En savoir plus →
|
||||
<Link href="/notre-histoire" className="text-white hover:text-bakery-700 font-semibold">
|
||||
Learn More →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Loyalty Card Section */}
|
||||
<section className="py-16 bg-bakery-600 text-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="font-serif text-3xl mb-4">Carte de Fidélité</h2>
|
||||
<p className="text-lg mb-8">
|
||||
Profitez de nombreux avantages avec notre carte de fidélité
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Loyalty Card with Flip Effect */}
|
||||
<div className="card-container max-w-2xl mx-auto aspect-[1.586/1] mb-8">
|
||||
<div className="card relative w-full h-full">
|
||||
{/* Front of the card */}
|
||||
<div className="card-side card-front absolute w-full h-full rounded-[24px] overflow-hidden bg-bakery-600">
|
||||
<Image
|
||||
src="/images/ressources/card-front.png"
|
||||
alt="Carte de fidélité - Recto"
|
||||
fill
|
||||
className="object-contain p-1"
|
||||
priority
|
||||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
||||
/>
|
||||
</div>
|
||||
{/* Back of the card */}
|
||||
<div className="card-side card-back absolute w-full h-full rounded-[24px] overflow-hidden bg-bakery-600">
|
||||
<Image
|
||||
src="/images/ressources/card-back.png"
|
||||
alt="Carte de fidélité - Verso"
|
||||
fill
|
||||
className="object-contain p-1"
|
||||
priority
|
||||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Button and Form Section */}
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<button
|
||||
onClick={() => setShowLoyaltyForm(!showLoyaltyForm)}
|
||||
className="bg-white text-bakery-600 px-8 py-3 rounded-md hover:bg-bakery-50 transition mb-8 mx-auto block"
|
||||
>
|
||||
{showLoyaltyForm ? 'Masquer le formulaire' : 'Obtenir ma carte'}
|
||||
</button>
|
||||
|
||||
{/* Form */}
|
||||
{showLoyaltyForm && (
|
||||
<div className="bg-white text-bakery-800 rounded-lg p-6 mt-8 shadow-lg">
|
||||
<h3 className="font-serif text-2xl mb-6">Demande de Carte de Fidélité</h3>
|
||||
|
||||
<form className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
Prénom
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
className="w-full px-3 py-2 border border-bakery-200 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
Nom
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
className="w-full px-3 py-2 border border-bakery-200 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
Âge
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
required
|
||||
min="0"
|
||||
className="w-full px-3 py-2 border border-bakery-200 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
Adresse
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
className="w-full px-3 py-2 border border-bakery-200 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
Code Postal
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
className="w-full px-3 py-2 border border-bakery-200 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
Ville
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
className="w-full px-3 py-2 border border-bakery-200 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
className="w-full px-3 py-2 border border-bakery-200 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-bakery-600 text-white py-3 px-4 rounded-md hover:bg-bakery-700 transition duration-200 mt-6"
|
||||
>
|
||||
Demander ma carte
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Horaires et Contact */}
|
||||
{/* Hours & Contact */}
|
||||
<section className="py-16 bg-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
<div>
|
||||
<h2 className="font-serif text-3xl mb-6">Nos Horaires</h2>
|
||||
<h2 className="font-adbhashitha text-3xl mb-6">Our Hours</h2>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex justify-between">
|
||||
<span>Lundi - Vendredi</span>
|
||||
<span>6h30 - 19h30</span>
|
||||
<span>Monday - Saturday</span>
|
||||
<span>7:00am - 2:00pm</span>
|
||||
</li>
|
||||
<li className="flex justify-between">
|
||||
<span>Samedi</span>
|
||||
<span>6h30 - 20h00</span>
|
||||
</li>
|
||||
<li className="flex justify-between">
|
||||
<span>Dimanche</span>
|
||||
<span>7h00 - 13h00</span>
|
||||
<span>Sunday - Monday</span>
|
||||
<span>Closed</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="font-serif text-3xl mb-6">Contact</h2>
|
||||
<h2 className="font-adbhashitha text-3xl mb-6">Contact</h2>
|
||||
<address className="not-italic">
|
||||
<p className="mb-2">123 Rue du Pain</p>
|
||||
<p className="mb-2">75001 Paris</p>
|
||||
<p className="mb-2">Tél: 01 23 45 67 89</p>
|
||||
<p>Email: contact@blédor-artisanale.fr</p>
|
||||
<p className="mb-2">215 E Main Street</p>
|
||||
<p className="mb-2">61559 Princeville, IL</p>
|
||||
<p className="mb-2">Phone: (309) 701-0660</p>
|
||||
<p>Email: contact@itsthevine.com</p>
|
||||
</address>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import Logo_R from 'public/images/resources/logo_R.svg';
|
||||
import Logo_L from 'public/images/resources/logo_L.svg';
|
||||
|
||||
interface LogoProps {
|
||||
|
||||
logoColor: string;
|
||||
|
||||
}
|
||||
|
||||
const Logo: React.FC<LogoProps> = ({ logoColor }) => {
|
||||
return (
|
||||
<Link href="/" className="flex items-center">
|
||||
<Logo_R fill={logoColor} width={60} height={60}/>
|
||||
{/* <Image
|
||||
src="/images/resources/logo_L.png"
|
||||
alt="The Vine Coffeehouse & Bakery"
|
||||
width={60}
|
||||
height={60}
|
||||
className="h-12 w-auto"
|
||||
/> */}
|
||||
<span className="ml-3 text-2xl text-bakery-800" style={{color: logoColor}}>
|
||||
<span className="font-lejour" style={{ letterSpacing: '0.01em'}}>The Vine </span><span className="font-adbhashitha">Coffeehouse & Bakery</span>
|
||||
</span>
|
||||
<Logo_L fill={logoColor} width={60} height={60}/>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
export default Logo;
|
||||
@@ -64,7 +64,7 @@ const LoyaltyCardForm = ({ isOpen, onClose }: LoyaltyCardFormProps) => {
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="font-serif text-2xl text-bakery-800">
|
||||
<h2 className="font-sans text-2xl text-bakery-800">
|
||||
Demande de Carte de Fidélité
|
||||
</h2>
|
||||
<button
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import Image from 'next/image';
|
||||
import type { Product } from '@/types/product';
|
||||
import AwesomeSlider from 'react-awesome-slider';
|
||||
import "keen-slider/keen-slider.min.css"
|
||||
|
||||
interface ProductModalProps {
|
||||
product: Product | null;
|
||||
@@ -16,56 +18,43 @@ const ProductModal = ({ product, onClose }: ProductModalProps) => {
|
||||
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"
|
||||
className="fixed inset-0 z-50 overflow-y-auto bg-black bg-opacity-50 backdrop-blur-sm flex items-center justify-center"
|
||||
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()}
|
||||
<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">
|
||||
<AwesomeSlider cssModule={AwesomeSlider}>
|
||||
{product.images.map((imgUrl, index) => (
|
||||
<div
|
||||
key={index}
|
||||
data-src={imgUrl}
|
||||
className="w-full h-full bg-cover bg-center"
|
||||
/>
|
||||
))}
|
||||
</AwesomeSlider>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<h3 className="font-sans text-2xl text-bakery-800">{product.name}</h3>
|
||||
{/* <span className="text-bakery-600 text-xl font-semibold">{product.price}</span> */}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="mt-6 w-full bg-bakery-600 text-white py-3 rounded-md hover:bg-bakery-700 transition-colors"
|
||||
>
|
||||
<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>
|
||||
Close
|
||||
</button>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductModal;
|
||||
export default ProductModal;
|
||||
|
||||
@@ -6,13 +6,15 @@ import ProductModal from './ProductModal';
|
||||
import { products, categories } from '@/data/products';
|
||||
import type { Product } from '@/types/product';
|
||||
import LoadingSpinner from './LoadingSpinner';
|
||||
|
||||
import 'react-awesome-slider/dist/styles.css';
|
||||
import AwesomeSlider from 'react-awesome-slider';
|
||||
|
||||
const ProductsPage = () => {
|
||||
const [selectedCategory, setSelectedCategory] = useState('Tous');
|
||||
const [selectedCategory, setSelectedCategory] = useState('All');
|
||||
const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const filteredProducts = selectedCategory === 'Tous'
|
||||
const filteredProducts = selectedCategory === 'All'
|
||||
? products
|
||||
: products.filter(product => product.category === selectedCategory);
|
||||
|
||||
@@ -29,16 +31,16 @@ const ProductsPage = () => {
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="relative h-[40vh] bg-bakery-900"
|
||||
className="relative h-[40vh] bg-bakery-600"
|
||||
>
|
||||
<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="absolute inset-0 bg-black/40 bg-cover bg-center" style={{ backgroundImage: 'url(/images/ressources/contact-bg.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 className="font-sans text-4xl md:text-5xl text-white mb-4">
|
||||
Products
|
||||
</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
|
||||
Explore our wide range of products crafted with the finest ingredients. Whether you're looking for something sweet or savory, we have something for everyone. Browse through our categories to find your perfect treat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -86,42 +88,35 @@ const ProductsPage = () => {
|
||||
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"
|
||||
<div
|
||||
className="relative w-full 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>
|
||||
>
|
||||
<AwesomeSlider
|
||||
bullets={false}
|
||||
style={{ aspectRatio: '1 / 1' }}
|
||||
organicArrows={product.images.length > 1}
|
||||
customContent={true}
|
||||
buttonContentLeft={product.images.length > 1 ? <span className="text-white text-2xl">{'<'}</span> : null}
|
||||
buttonContentRight={product.images.length > 1 ? <span className="text-white text-2xl">{'>'}</span> : null}
|
||||
>
|
||||
{product.images.map((image, index) => (
|
||||
<div key={index} data-src={image} />
|
||||
))}
|
||||
</AwesomeSlider>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<h3 className="font-serif text-xl text-bakery-800">
|
||||
<h3 className="font-sans 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>
|
||||
@@ -132,10 +127,10 @@ const ProductsPage = () => {
|
||||
</div>
|
||||
|
||||
{/* Product Modal */}
|
||||
<ProductModal
|
||||
{/* <ProductModal
|
||||
product={selectedProduct}
|
||||
onClose={() => setSelectedProduct(null)}
|
||||
/>
|
||||
/> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user