card form added

src/components/Header.tsx

@@ -26,7 +26,7 @@ const Header = () => {
               height={60}
               className="h-12 w-auto"
             />
-            <span className="ml-3 font-serif text-xl text-bakery-800">
+            <span className="ml-3 font-serif text-2xl text-bakery-800">
               Au Blé d&apos;Or
             </span>
           </Link>
@@ -71,7 +71,13 @@ const Header = () => {
         `}>
           <div className="p-4">
             <div className="flex justify-between items-center mb-8">
-              <span className="font-serif text-xl text-bakery-800">Menu</span>
+              <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&apos;Or</p></span>
               <button 
                 onClick={() => setIsMobileMenuOpen(false)}
                 className="p-2"

src/components/HomePage.tsx

@@ -2,10 +2,9 @@
 import Link from 'next/link';
 import Image from 'next/image';
 import { useState } from 'react';
-import LoyaltyCardForm from './LoyaltyCardForm';
 
 const HomePage = () => {
-  const [isLoyaltyFormOpen, setIsLoyaltyFormOpen] = useState(false);
+  const [showLoyaltyForm, setShowLoyaltyForm] = useState(false);
 
   return (
     <div className="min-h-screen">
@@ -85,15 +84,16 @@ const HomePage = () => {
         </div>
       </section>
 
-      {/* Carte de Fidélité */}
+      {/* Loyalty Card Section */}
       <section className="py-16 bg-bakery-600 text-white">
-        <div className="container mx-auto px-4 text-center">
+        <div className="container mx-auto px-4">
-          <h2 className="font-serif text-4xl mb-8">Carte de Fidélité</h2>
+          <div className="text-center mb-8">
-          <p className="text-xl mb-8 max-w-2xl mx-auto">
+            <h2 className="font-serif text-3xl mb-4">Carte de Fidélité</h2>
-            Rejoignez notre programme de fidélité et bénéficiez d&apos;avantages exclusifs.
+            <p className="text-lg mb-8">
-            Votre 10ème baguette offerte !
+              Profitez de nombreux avantages avec notre carte de fidélité
-          </p>
+            </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">
@@ -122,12 +122,111 @@ const HomePage = () => {
             </div>
           </div>
 
-          <button 
+          {/* Button and Form Section */}
-            onClick={() => setIsLoyaltyFormOpen(true)} 
+          <div className="max-w-2xl mx-auto">
-            className="bg-white text-bakery-600 px-8 py-3 rounded-md hover:bg-bakery-50 transition"
+            <button 
-          >
+              onClick={() => setShowLoyaltyForm(!showLoyaltyForm)}
-            Obtenir ma carte
+              className="bg-white text-bakery-600 px-8 py-3 rounded-md hover:bg-bakery-50 transition mb-8 mx-auto block"
-          </button>
+            >
+              {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>
 
@@ -164,11 +263,6 @@ const HomePage = () => {
           </div>
         </div>
       </section>
-
-      <LoyaltyCardForm 
-        isOpen={isLoyaltyFormOpen} 
-        onClose={() => setIsLoyaltyFormOpen(false)} 
-      />
     </div>
   );
 };

src/components/LoyaltyCardForm.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 
 interface LoyaltyCardFormProps {
   isOpen: boolean;
@@ -7,6 +7,7 @@ interface LoyaltyCardFormProps {
 }
 
 const LoyaltyCardForm = ({ isOpen, onClose }: LoyaltyCardFormProps) => {
+  const modalRef = useRef<HTMLDivElement>(null);
   const [formData, setFormData] = useState({
     firstName: '',
     lastName: '',
@@ -17,11 +18,20 @@ const LoyaltyCardForm = ({ isOpen, onClose }: LoyaltyCardFormProps) => {
     email: '',
   });
 
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen]);
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    // Handle form submission here
     console.log('Form submitted:', formData);
-    // Reset form and close overlay
     setFormData({
       firstName: '',
       lastName: '',
@@ -37,15 +47,29 @@ const LoyaltyCardForm = ({ isOpen, onClose }: LoyaltyCardFormProps) => {
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+    <div className="fixed inset-0 z-50 overflow-y-auto bg-black/50 backdrop-blur-sm">
-      <div className="bg-white rounded-lg max-w-md w-full max-h-[90vh] overflow-y-auto">
+      <div className="min-h-screen px-4 text-center">
-        <div className="p-6">
+        {/* This element centers the modal */}
+        <span
+          className="inline-block h-screen align-middle"
+          aria-hidden="true"
+        >
+          &#8203;
+        </span>
+
+        {/* Modal */}
+        <div 
+          ref={modalRef}
+          className="inline-block w-full max-w-md p-6 my-8 text-left align-middle bg-white rounded-lg shadow-xl transform transition-all"
+          onClick={(e) => e.stopPropagation()}
+        >
           <div className="flex justify-between items-center mb-6">
-            <h2 className="font-serif text-2xl text-bakery-800">Demande de Carte de Fidélité</h2>
+            <h2 className="font-serif text-2xl text-bakery-800">
+              Demande de Carte de Fidélité
+            </h2>
             <button
               onClick={onClose}
               className="text-bakery-600 hover:text-bakery-800"
-              aria-label="Fermer"
             >
               <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -54,86 +78,95 @@ const LoyaltyCardForm = ({ isOpen, onClose }: LoyaltyCardFormProps) => {
           </div>
 
           <form onSubmit={handleSubmit} className="space-y-4">
-            <div>
+            <div className="grid grid-cols-2 gap-4">
-              <label htmlFor="firstName" className="block text-sm font-medium text-bakery-700">Prénom</label>
+              <div>
-              <input
+                <label className="block text-sm font-medium text-bakery-700 mb-1">
-                type="text"
+                  Prénom
-                id="firstName"
+                </label>
-                required
+                <input
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-bakery-500 focus:ring-bakery-500"
+                  type="text"
-                value={formData.firstName}
+                  required
-                onChange={(e) => setFormData({ ...formData, firstName: e.target.value })}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
-              />
+                  value={formData.firstName}
+                  onChange={(e) => setFormData({ ...formData, firstName: e.target.value })}
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-bakery-700 mb-1">
+                  Nom
+                </label>
+                <input
+                  type="text"
+                  required
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
+                  value={formData.lastName}
+                  onChange={(e) => setFormData({ ...formData, lastName: e.target.value })}
+                />
+              </div>
             </div>
 
             <div>
-              <label htmlFor="lastName" className="block text-sm font-medium text-bakery-700">Nom</label>
+              <label className="block text-sm font-medium text-bakery-700 mb-1">
-              <input
+                Âge
-                type="text"
+              </label>
-                id="lastName"
-                required
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-bakery-500 focus:ring-bakery-500"
-                value={formData.lastName}
-                onChange={(e) => setFormData({ ...formData, lastName: e.target.value })}
-              />
-            </div>
-
-            <div>
-              <label htmlFor="age" className="block text-sm font-medium text-bakery-700">Âge</label>
               <input
                 type="number"
-                id="age"
                 required
                 min="0"
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-bakery-500 focus:ring-bakery-500"
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
                 value={formData.age}
                 onChange={(e) => setFormData({ ...formData, age: e.target.value })}
               />
             </div>
 
             <div>
-              <label htmlFor="address" className="block text-sm font-medium text-bakery-700">Adresse</label>
+              <label className="block text-sm font-medium text-bakery-700 mb-1">
+                Adresse
+              </label>
               <input
                 type="text"
-                id="address"
                 required
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-bakery-500 focus:ring-bakery-500"
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
                 value={formData.address}
                 onChange={(e) => setFormData({ ...formData, address: e.target.value })}
               />
             </div>
 
-            <div>
+            <div className="grid grid-cols-2 gap-4">
-              <label htmlFor="postalCode" className="block text-sm font-medium text-bakery-700">Code Postal</label>
+              <div>
-              <input
+                <label className="block text-sm font-medium text-bakery-700 mb-1">
-                type="text"
+                  Code Postal
-                id="postalCode"
+                </label>
-                required
+                <input
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-bakery-500 focus:ring-bakery-500"
+                  type="text"
-                value={formData.postalCode}
+                  required
-                onChange={(e) => setFormData({ ...formData, postalCode: e.target.value })}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
-              />
+                  value={formData.postalCode}
+                  onChange={(e) => setFormData({ ...formData, postalCode: e.target.value })}
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-bakery-700 mb-1">
+                  Ville
+                </label>
+                <input
+                  type="text"
+                  required
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
+                  value={formData.city}
+                  onChange={(e) => setFormData({ ...formData, city: e.target.value })}
+                />
+              </div>
             </div>
 
             <div>
-              <label htmlFor="city" className="block text-sm font-medium text-bakery-700">Ville</label>
+              <label className="block text-sm font-medium text-bakery-700 mb-1">
-              <input
+                Email
-                type="text"
+              </label>
-                id="city"
-                required
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-bakery-500 focus:ring-bakery-500"
-                value={formData.city}
-                onChange={(e) => setFormData({ ...formData, city: e.target.value })}
-              />
-            </div>
-
-            <div>
-              <label htmlFor="email" className="block text-sm font-medium text-bakery-700">Email</label>
               <input
                 type="email"
-                id="email"
                 required
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-bakery-500 focus:ring-bakery-500"
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
                 value={formData.email}
                 onChange={(e) => setFormData({ ...formData, email: e.target.value })}
               />
@@ -141,7 +174,7 @@ const LoyaltyCardForm = ({ isOpen, onClose }: LoyaltyCardFormProps) => {
 
             <button
               type="submit"
-              className="w-full bg-bakery-600 text-white py-2 px-4 rounded-md hover:bg-bakery-700 transition duration-200"
+              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>