merge: integrate Emmanuel changes into main

frontend/src/pages/Contact.jsx

@@ -1,45 +1,167 @@
-import imgContact from '../assets/img/img-contact.jpg'
+import imgContact from '../assets/img/img-contact.webp'
+import usePageMeta from '../hooks/usePageMeta'
 
 export default function Contact() {
+  usePageMeta({
+    title: 'Contact | Thé Tip Top',
+    description:
+      "Une question sur le jeu-concours, votre participation ou votre lot ? Contactez l'équipe Thé Tip Top par email, téléphone ou via le formulaire en ligne.",
+  })
+
   return (
     <main className="bg-[#F0F0F0] px-4 sm:px-6 py-10 sm:py-16">
-      <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-6 sm:gap-8">
+      <div className="max-w-6xl mx-auto">
 
-        {/* Informations */}
-        <section className="bg-white rounded-2xl shadow p-5 sm:p-8 md:p-10">
-          <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#006B6B] mb-4 sm:mb-6">
-            Contact
-          </h1>
-          <p className="text-gray-600 leading-relaxed mb-6 sm:mb-8 text-sm sm:text-base">
-            Une question concernant le jeu-concours, votre participation ou votre lot ?
-            Notre équipe ThéTipTop est à votre écoute.
-          </p>
-          <div className="space-y-5 text-gray-700">
-            <div>
-              <h2 className="font-semibold text-[#006B6B] mb-1">Adresse</h2>
-              <p className="text-sm sm:text-base">ThéTipTop<br />18 rue Léon Frot<br />75011 Paris, France</p>
-            </div>
-            <div>
-              <h2 className="font-semibold text-[#006B6B] mb-1">Email</h2>
-              <a href="mailto:contact@thetiptop.fr" className="text-sm sm:text-base hover:text-[#006B6B]">contact@thetiptop.fr</a>
-            </div>
-            <div>
-              <h2 className="font-semibold text-[#006B6B] mb-1">Téléphone</h2>
-              <a href="tel:+33184802034" className="text-sm sm:text-base hover:text-[#006B6B]">01 84 80 20 34</a>
-            </div>
-          </div>
-        </section>
+        {/* Informations + image */}
+        <div className="grid md:grid-cols-2 gap-6 sm:gap-8 mb-8">
 
-        {/* Image */}
-        <section className="rounded-2xl shadow overflow-hidden h-64 sm:h-80 md:h-[468px] md:self-start">
-          <img
-            src={imgContact}
-            alt="Une personne savourant un thé"
-            className="w-full h-full object-cover"
-          />
+          {/* Informations */}
+          <section className="bg-white rounded-2xl shadow p-5 sm:p-8 md:p-10">
+            <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#006B6B] mb-4 sm:mb-6">
+              Contact
+            </h1>
+
+            <p className="text-gray-600 leading-relaxed mb-6 sm:mb-8 text-sm sm:text-base">
+              Une question concernant le jeu-concours, votre participation ou votre lot ?
+              Notre équipe Thé Tip Top est à votre écoute.
+            </p>
+
+            <div className="space-y-5 text-gray-700">
+
+              <div>
+                <h2 className="font-semibold text-[#006B6B] mb-1">
+                  Adresse
+                </h2>
+                <p className="text-sm sm:text-base">
+                  Thé Tip Top
+                  <br />
+                  18 rue Léon Frot
+                  <br />
+                  75011 Paris, France
+                </p>
+              </div>
+
+              <div>
+                <h2 className="font-semibold text-[#006B6B] mb-1">
+                  Email
+                </h2>
+                <a
+                  href="mailto:contact@thetiptop.fr"
+                  className="text-sm sm:text-base hover:text-[#006B6B]"
+                >
+                  contact@thetiptop.fr
+                </a>
+              </div>
+
+              <div>
+                <h2 className="font-semibold text-[#006B6B] mb-1">
+                  Téléphone
+                </h2>
+                <a
+                  href="tel:+33184802034"
+                  className="text-sm sm:text-base hover:text-[#006B6B]"
+                >
+                  01 84 80 20 34
+                </a>
+              </div>
+
+            </div>
+          </section>
+
+          {/* Image */}
+          <section className="rounded-2xl shadow overflow-hidden h-64 sm:h-80 md:h-full md:min-h-0">
+            <img
+              src={imgContact}
+              alt="Une personne savourant un thé"
+              className="w-full h-full object-cover"
+            />
+          </section>
+
+        </div>
+
+        {/* Formulaire */}
+        <section className="bg-white rounded-2xl shadow p-5 sm:p-8 md:p-10 max-w-4xl mx-auto">
+          <h2 className="text-xl sm:text-2xl font-bold text-[#006B6B] mb-4 sm:mb-6">
+            Envoyez-nous un message
+          </h2>
+
+          <form className="space-y-4 sm:space-y-5">
+
+            <div>
+              <label
+                htmlFor="contact-name"
+                className="block text-gray-700 mb-1.5 text-sm sm:text-base"
+              >
+                Nom
+              </label>
+
+              <input
+                type="text"
+                id="contact-name"
+                placeholder="Votre nom"
+                className="w-full border border-gray-300 rounded-xl px-4 py-2.5 sm:py-3 text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-[#006B6B]"
+              />
+            </div>
+
+            <div>
+              <label
+                htmlFor="contact-email"
+                className="block text-gray-700 mb-1.5 text-sm sm:text-base"
+              >
+                Email
+              </label>
+
+              <input
+                type="email"
+                id="contact-email"
+                placeholder="Votre email"
+                className="w-full border border-gray-300 rounded-xl px-4 py-2.5 sm:py-3 text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-[#006B6B]"
+              />
+            </div>
+
+            <div>
+              <label
+                htmlFor="contact-subject"
+                className="block text-gray-700 mb-1.5 text-sm sm:text-base"
+              >
+                Sujet
+              </label>
+
+              <input
+                type="text"
+                id="contact-subject"
+                placeholder="Sujet de votre demande"
+                className="w-full border border-gray-300 rounded-xl px-4 py-2.5 sm:py-3 text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-[#006B6B]"
+              />
+            </div>
+
+            <div>
+              <label
+                htmlFor="contact-message"
+                className="block text-gray-700 mb-1.5 text-sm sm:text-base"
+              >
+                Message
+              </label>
+
+              <textarea
+                id="contact-message"
+                rows="4"
+                placeholder="Votre message..."
+                className="w-full border border-gray-300 rounded-xl px-4 py-2.5 sm:py-3 text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-[#006B6B] resize-none"
+              />
+            </div>
+
+            <button
+              type="submit"
+              className="w-full bg-[#006B6B] hover:bg-[#005858] text-white font-semibold py-2.5 sm:py-3 rounded-xl transition text-sm sm:text-base"
+            >
+              Envoyer le message
+            </button>
+
+          </form>
         </section>
 
       </div>
     </main>
   )
-}
+}