Ajout de la page d'accueil, règles du jeu, confidentialité, mentions légales et contact

2026-06-19 16:05:11 +02:00
parent 25be38027d
commit e2d045c0ab
10 changed files with 1128 additions and 6 deletions
--- a/frontend/src/pages/Contact.jsx
+++ b/frontend/src/pages/Contact.jsx
@@ -0,0 +1,174 @@
+export default function Contact() {
+  return (
+    <main className="bg-green-50 min-h-screen px-6 py-16">
+
+      <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-8">
+
+
+        {/* Informations */}
+        <section className="bg-white rounded-2xl shadow p-10">
+
+          <h1 className="text-4xl font-bold text-green-800 mb-6">
+            Contact
+          </h1>
+
+
+          <p className="text-gray-600 leading-relaxed mb-8">
+            Une question concernant le jeu-concours, votre participation
+            ou votre lot ? Notre équipe ThéTipTop est à votre écoute.
+          </p>
+
+
+
+          <div className="space-y-6 text-gray-700">
+
+
+            <div>
+              <h2 className="font-semibold text-green-700">
+                Adresse
+              </h2>
+
+              <p>
+                ThéTipTop
+                <br />
+                18 rue Léon Frot
+                <br />
+                75011 Paris, France
+              </p>
+            </div>
+
+
+
+            <div>
+              <h2 className="font-semibold text-green-700">
+                Email
+              </h2>
+
+              <p>
+                contact@thetiptop.fr
+              </p>
+            </div>
+
+
+
+            <div>
+              <h2 className="font-semibold text-green-700">
+                Téléphone
+              </h2>
+
+              <p>
+                01 84 80 20 34
+              </p>
+            </div>
+
+
+          </div>
+
+
+        </section>
+
+
+
+
+        {/* Formulaire */}
+
+        <section className="bg-white rounded-2xl shadow p-10">
+
+
+          <h2 className="text-2xl font-bold text-green-800 mb-6">
+            Envoyez-nous un message
+          </h2>
+
+
+
+          <form className="space-y-5">
+
+
+            <div>
+
+              <label className="block text-gray-700 mb-2">
+                Nom
+              </label>
+
+              <input
+                type="text"
+                placeholder="Votre nom"
+                className="w-full border border-gray-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-green-600"
+              />
+
+            </div>
+
+
+
+            <div>
+
+              <label className="block text-gray-700 mb-2">
+                Email
+              </label>
+
+              <input
+                type="email"
+                placeholder="Votre email"
+                className="w-full border border-gray-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-green-600"
+              />
+
+            </div>
+
+
+
+
+            <div>
+
+              <label className="block text-gray-700 mb-2">
+                Sujet
+              </label>
+
+              <input
+                type="text"
+                placeholder="Sujet de votre demande"
+                className="w-full border border-gray-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-green-600"
+              />
+
+            </div>
+
+
+
+
+            <div>
+
+              <label className="block text-gray-700 mb-2">
+                Message
+              </label>
+
+              <textarea
+                rows="5"
+                placeholder="Votre message..."
+                className="w-full border border-gray-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-green-600"
+              />
+
+            </div>
+
+
+
+
+            <button
+              type="submit"
+              className="w-full bg-green-700 hover:bg-green-800 text-white font-semibold py-3 rounded-xl transition"
+            >
+              Envoyer le message
+            </button>
+
+
+
+          </form>
+
+
+        </section>
+
+
+      </div>
+
+
+    </main>
+  )
+}