Merge Alexis : ajout Layout, Accueil, ReglesJeu et pages légales

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/App.jsx

@@ -1,13 +1,19 @@
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
+import Layout from './components/Layout.jsx'
 import Connexion from './pages/Connexion'
 import Inscription from './pages/Inscription'
-//import Participation from './pages/Participation'
+import Accueil from './pages/Accueil'
+import ReglesJeu from './pages/ReglesJeu'
+import Participation from './pages/Participation'
 import MesGains from './pages/MesGains'
 import Employe from './pages/Employe'
 import Admin from './pages/Admin'
 import Profile from './pages/Profile'
 import SaisirCodeUnique from './pages/SaisirCodeUnique.jsx'
 import Perdu from './pages/Perdu'
+import MentionsLegales from './pages/MentionsLegales'
+import Confidentialite from './pages/Confidentialite'
+import Contact from './pages/Contact.jsx'
 
 export default function App() {
   return (
@@ -16,13 +22,18 @@ export default function App() {
         <Route path="/" element={<Navigate to="/connexion" replace />} />
         <Route path="/connexion" element={<Connexion />} />
         <Route path="/inscription" element={<Inscription />} />
-        {/* <Route path="/participation" element={<Participation />} /> */}
+        <Route path="/accueil" element={<Layout><Accueil /></Layout>} />
-        <Route path="/mes-gains" element={<MesGains />} />
+        <Route path="/regles-jeu" element={<Layout><ReglesJeu /></Layout>} />
-        <Route path="/employe" element={<Employe />} />
+        <Route path="/participation" element={<Layout><Participation /></Layout>} />
-        <Route path="/admin" element={<Admin />} />
+        <Route path="/mes-gains" element={<Layout><MesGains /></Layout>} />
-        <Route path="/profile" element={<Profile />} />
+        <Route path="/employe" element={<Layout><Employe /></Layout>} />
-        <Route path="/saisir-code-unique" element={<SaisirCodeUnique />} />
+        <Route path="/admin" element={<Layout><Admin /></Layout>} />
-        <Route path="/perdu" element={<Perdu />} />
+        <Route path="/profile" element={<Layout><Profile /></Layout>} />
+        <Route path="/saisir-code-unique" element={<Layout><SaisirCodeUnique /></Layout>} />
+        <Route path="/perdu" element={<Layout><Perdu /></Layout>} />
+        <Route path="/mentions-legales" element={<Layout><MentionsLegales /></Layout>} />
+        <Route path="/confidentialite" element={<Layout><Confidentialite /></Layout>} />
+        <Route path="/contact" element={<Layout><Contact /></Layout>} />
       </Routes>
     </BrowserRouter>
   )

frontend/src/components/Footer.jsx

@@ -0,0 +1,217 @@
+import { Link } from 'react-router-dom'
+
+export default function Footer() {
+  return (
+    <footer className="bg-green-900 text-white">
+
+
+      {/* Partie principale */}
+      <div className="max-w-7xl mx-auto px-6 py-12 grid md:grid-cols-4 gap-10">
+
+
+        {/* Logo */}
+        <div>
+
+          <Link to="/accueil">
+            <h3 className="text-xl font-bold mb-3">
+              Thé Tip Top
+            </h3>
+          </Link>
+
+
+          <p className="text-green-100 text-sm leading-relaxed">
+            Participez au jeu-concours Thé Tip Top et tentez de gagner
+            des lots gourmands autour du thé.
+          </p>
+
+        </div>
+
+
+
+        {/* Navigation */}
+        <div>
+
+          <h3 className="text-lg font-semibold mb-5">
+            Navigation
+          </h3>
+
+
+          <ul className="space-y-3 text-green-100">
+
+            <li>
+              <Link
+                to="/accueil"
+                className="hover:text-white transition"
+              >
+                Accueil
+              </Link>
+            </li>
+
+
+            <li>
+              <Link
+                to="/regles-jeu"
+                className="hover:text-white transition"
+              >
+                Règles du jeu
+              </Link>
+            </li>
+
+
+            <li>
+              <Link
+                to="/saisir-code-unique"
+                className="hover:text-white transition"
+              >
+                Tester mon code
+              </Link>
+            </li>
+
+
+            <li>
+              <Link
+                to="/inscription"
+                className="hover:text-white transition"
+              >
+                Créer un compte
+              </Link>
+            </li>
+
+          </ul>
+
+        </div>
+
+
+
+
+        {/* Informations légales */}
+        <div>
+
+          <h3 className="text-lg font-semibold mb-5">
+            Informations
+          </h3>
+
+
+          <ul className="space-y-3 text-green-100">
+
+            <li>
+              <Link
+                to="/mentions-legales"
+                className="hover:text-white transition"
+              >
+                Mentions légales
+              </Link>
+            </li>
+
+
+            <li>
+              <Link
+                to="/confidentialite"
+                className="hover:text-white transition"
+              >
+                Politique de confidentialité
+              </Link>
+            </li>
+
+
+            <li>
+              <Link
+                to="/contact"
+                className="hover:text-white transition"
+              >
+                Contact
+              </Link>
+            </li>
+
+          </ul>
+
+        </div>
+
+
+
+
+        {/* Contact */}
+        <div>
+
+          <h3 className="text-lg font-semibold mb-5">
+            Contact
+          </h3>
+
+          <p className="text-green-100 text-sm mb-3">
+            Une question sur le jeu ?
+          </p>
+
+          <a href="tel:+33184802034" className="block mt-2 font-medium hover:text-green-300">
+            01 84 80 20 34
+          </a>
+
+          <a href="mailto:contact@thetiptop.fr" className="inline-block mt-3 font-medium hover:text-green-300">
+            contact@thetiptop.fr
+          </a>
+
+          <p className="text-green-100 text-sm mt-2">
+            18 rue Léon Frot
+            <br />
+            75011 Paris, France
+          </p>
+
+
+        </div>
+
+
+      </div>
+
+
+
+      {/* Barre basse */}
+
+      <div className="border-t border-green-800">
+
+        <div className="max-w-7xl mx-auto px-6 py-5 flex flex-col md:flex-row justify-between items-center gap-3">
+
+
+          <p className="text-green-200 text-sm">
+            © {new Date().getFullYear()} Thé Tip Top. Tous droits réservés.
+          </p>
+
+          <div className="flex gap-5 text-sm text-green-200">
+            <a
+              href="https://www.facebook.com/profile.php?id=61590449280854"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:text-white transition"
+            >
+              Facebook
+            </a>
+
+
+            <a
+              href="https://www.instagram.com/thetiptop.gp4?igsh=MXZ3YzZ0d3dkazBpeg%3D%3D&utm_source=qr"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:text-white transition"
+            >
+              Instagram
+            </a>
+
+
+            <a
+              href="https://www.tiktok.com/@thetiptop4"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:text-white transition"
+            >
+              TikTok
+            </a>
+
+          </div>
+
+
+        </div>
+
+      </div>
+
+
+    </footer>
+  )
+}

frontend/src/components/Header.jsx

@@ -0,0 +1,58 @@
+import { Link } from 'react-router-dom'
+import logo from '../assets/img/logo.png'
+
+export default function Header() {
+  return (
+    <header className="bg-white shadow-sm">
+      <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
+
+          <Link to="/accueil" className="flex items-center">
+
+          <img
+
+            src={logo}
+
+            alt="Thé Tip Top"
+
+            className="h-12 w-auto"
+
+          />
+
+        </Link>
+
+        <nav className="flex items-center gap-6">
+          <Link
+            to="/accueil"
+            className="text-gray-700 hover:text-green-700 font-medium"
+          >
+            Accueil
+          </Link>
+
+          <Link
+            to="/regles-jeu"
+            className="text-gray-700 hover:text-green-700 font-medium"
+          >
+            Règles du jeu
+          </Link>
+
+          <div className="flex items-center gap-2">
+            <Link
+              to="/connexion"
+              className="bg-green-700 text-white px-4 py-2 rounded-lg hover:bg-green-800 transition-colors"
+            >
+              Connexion
+            </Link>
+
+            <Link
+              to="/inscription"
+              className="bg-green-700 text-white px-4 py-2 rounded-lg hover:bg-green-800 transition-colors"
+            >
+              Inscription
+            </Link>
+          </div>
+        </nav>
+
+      </div>
+    </header>
+  )
+}

frontend/src/components/Layout.jsx

@@ -0,0 +1,16 @@
+import Header from './Header'
+import Footer from './Footer'
+
+export default function Layout({ children }) {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+
+      <main className="flex-1">
+        {children}
+      </main>
+
+      <Footer />
+    </div>
+  )
+}

frontend/src/pages/Accueil.jsx

@@ -0,0 +1,78 @@
+import { Link } from 'react-router-dom'
+
+export default function Accueil() {
+  return (
+    <div className="bg-green-50">
+
+      {/* Hero */}
+      <section className="max-w-7xl mx-auto px-6 py-24">
+
+        <div className="text-center max-w-3xl mx-auto">
+
+          <h1 className="text-5xl md:text-6xl font-bold text-green-800 mb-6">
+            Bienvenue au jeu-concours Thé Tip Top
+          </h1>
+
+          <p className="text-xl text-gray-600 mb-10">
+            À l'occasion de l'ouverture de notre 10ᵉ boutique à Nice, participez à notre jeu-concours et tentez de gagner des lots exceptionnels ! Tous les tickets sont gagnants, alors n'attendez plus pour découvrir votre lot.
+          </p>
+
+          <div className="flex flex-col sm:flex-row justify-center gap-4">
+
+            <Link
+              to="/saisir-code-unique"
+              className="bg-green-700 hover:bg-green-800 text-white font-semibold px-8 py-4 rounded-xl transition-colors"
+            >
+              Tester mon code
+            </Link>
+
+            <Link
+              to="/regles-jeu"
+              className="border border-green-700 text-green-700 hover:bg-green-100 font-semibold px-8 py-4 rounded-xl transition-colors"
+            >
+              Découvrir les règles
+            </Link>
+
+          </div>
+
+        </div>
+
+      </section>
+
+
+      {/* Comment participer */}
+      <section className="max-w-5xl mx-auto px-6 pb-20">
+
+        <h2 className="text-3xl font-bold text-green-800 mb-8 text-center">
+          Comment participer ?
+        </h2>
+
+        <div className="grid md:grid-cols-4 gap-6">
+
+          <div className="bg-white rounded-2xl shadow p-6 text-center">
+            <div className="text-3xl font-bold text-green-700 mb-3">1</div>
+            <p>Achat de 49 € minimum</p>
+          </div>
+
+          <div className="bg-white rounded-2xl shadow p-6 text-center">
+            <div className="text-3xl font-bold text-green-700 mb-3">2</div>
+            <p>Recevez votre code unique</p>
+          </div>
+
+          <div className="bg-white rounded-2xl shadow p-6 text-center">
+            <div className="text-3xl font-bold text-green-700 mb-3">3</div>
+            <p>Saisissez le code sur le site</p>
+          </div>
+
+          <div className="bg-white rounded-2xl shadow p-6 text-center">
+            <div className="text-3xl font-bold text-green-700 mb-3">4</div>
+            <p>Découvrez votre lot</p>
+          </div>
+
+        </div>
+
+      </section>
+
+    </div>
+  )
+}

frontend/src/pages/Confidentialite.jsx

@@ -0,0 +1,183 @@
+export default function Confidentialite() {
+  return (
+    <main className="bg-green-50 min-h-screen px-6 py-16">
+
+      <div className="max-w-5xl mx-auto bg-white rounded-2xl shadow p-10">
+
+        <h1 className="text-4xl font-bold text-green-800 mb-6">
+          Politique de confidentialité
+        </h1>
+
+
+        <p className="text-gray-600 mb-10 leading-relaxed">
+          Thé Tip Top accorde une grande importance à la protection de vos
+          données personnelles. Cette politique explique quelles informations
+          sont collectées, comment elles sont utilisées et quels sont vos droits.
+        </p>
+
+
+
+        {/* Article 1 */}
+        <section className="mb-8">
+
+          <h2 className="text-2xl font-bold text-green-700 mb-3">
+            Article 1 – Responsable du traitement
+          </h2>
+
+          <p className="text-gray-700 leading-relaxed">
+
+            Le responsable du traitement des données collectées via le site
+            du jeu-concours « 100% Gagnant » est la société Thé Tip Top,
+            située au 18 rue Léon Frot, 75011 Paris.
+
+          </p>
+
+        </section>
+
+
+
+        {/* Article 2 */}
+        <section className="mb-8">
+
+          <h2 className="text-2xl font-bold text-green-700 mb-3">
+            Article 2 – Données collectées
+          </h2>
+
+          <p className="text-gray-700 mb-3">
+            Dans le cadre de votre participation, nous pouvons collecter :
+          </p>
+
+
+          <ul className="list-disc list-inside text-gray-700 space-y-2">
+
+            <li>Nom et prénom</li>
+
+            <li>Adresse email</li>
+
+            <li>Informations du compte utilisateur</li>
+
+            <li>Code de participation au jeu</li>
+
+            <li>Informations liées aux gains obtenus</li>
+
+          </ul>
+
+        </section>
+
+
+
+        {/* Article 3 */}
+        <section className="mb-8">
+
+          <h2 className="text-2xl font-bold text-green-700 mb-3">
+            Article 3 – Utilisation des données
+          </h2>
+
+          <p className="text-gray-700 leading-relaxed">
+
+            Les données collectées sont utilisées uniquement pour :
+            gérer votre participation au jeu-concours, vérifier les codes,
+            attribuer les lots, vous contacter en cas de gain et améliorer
+            l'expérience utilisateur.
+
+          </p>
+
+        </section>
+
+
+
+        {/* Article 4 */}
+        <section className="mb-8">
+
+          <h2 className="text-2xl font-bold text-green-700 mb-3">
+            Article 4 – Conservation des données
+          </h2>
+
+          <p className="text-gray-700 leading-relaxed">
+
+            Vos données sont conservées uniquement pendant la durée nécessaire
+            au fonctionnement du jeu-concours et au respect des obligations
+            légales de Thé Tip Top.
+
+          </p>
+
+        </section>
+
+
+
+        {/* Article 5 */}
+        <section className="mb-8">
+
+          <h2 className="text-2xl font-bold text-green-700 mb-3">
+            Article 5 – Cookies
+          </h2>
+
+          <p className="text-gray-700 leading-relaxed">
+
+            Le site utilise des cookies nécessaires au fonctionnement du site
+            ainsi que des cookies statistiques permettant d'améliorer les
+            services proposés. Vous pouvez gérer vos préférences à tout moment.
+
+          </p>
+
+        </section>
+
+
+
+        {/* Article 6 */}
+        <section className="mb-8">
+
+          <h2 className="text-2xl font-bold text-green-700 mb-3">
+            Article 6 – Vos droits
+          </h2>
+
+          <p className="text-gray-700 mb-3">
+            Conformément au RGPD, vous disposez des droits suivants :
+          </p>
+
+
+          <ul className="list-disc list-inside text-gray-700 space-y-2">
+
+            <li>Droit d'accès à vos données</li>
+
+            <li>Droit de rectification</li>
+
+            <li>Droit de suppression</li>
+
+            <li>Droit d'opposition</li>
+
+            <li>Droit à la limitation du traitement</li>
+
+          </ul>
+
+
+        </section>
+
+
+
+        {/* Article 7 */}
+        <section>
+
+          <h2 className="text-2xl font-bold text-green-700 mb-3">
+            Article 7 – Contact
+          </h2>
+
+
+          <p className="text-gray-700">
+
+            Pour toute question concernant vos données personnelles :
+            <br />
+
+            <strong>Email :</strong> contact@thetiptop.fr
+
+          </p>
+
+
+        </section>
+
+
+      </div>
+
+    </main>
+  )
+}

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>
+  )
+}

frontend/src/pages/MentionsLegales.jsx

@@ -0,0 +1,202 @@
+export default function MentionsLegales() {
+  return (
+    <main className="bg-green-50 min-h-screen px-6 py-16">
+
+      <div className="max-w-5xl mx-auto bg-white rounded-2xl shadow p-10">
+
+        <h1 className="text-4xl font-bold text-green-800 mb-6">
+          Mentions légales
+        </h1>
+
+        <p className="text-gray-600 mb-10">
+          Conformément à la loi n°2004-575 du 21 juin 2004 pour la Confiance
+          dans l'Économie Numérique (LCEN), les présentes mentions légales
+          précisent les informations relatives au site du jeu-concours
+          « 100% Gagnant » de Thé Tip Top.
+        </p>
+
+
+        {/* Article 1 */}
+        <section className="mb-8">
+
+          <h2 className="text-2xl font-bold text-green-700 mb-3">
+            Article 1 – Société éditrice du site
+          </h2>
+
+          <div className="text-gray-700 space-y-2">
+
+            <p>
+              <strong>Dénomination sociale :</strong> Thé Tip Top
+            </p>
+
+            <p>
+              <strong>Forme juridique :</strong> Société à Responsabilité Limitée (SARL)
+            </p>
+
+            <p>
+              <strong>Capital social :</strong> 150 000 €
+            </p>
+
+            <p>
+              <strong>Siège social :</strong> 18 rue Léon Frot, 75011 Paris, France
+            </p>
+
+            <p>
+              <strong>Représentant légal :</strong> Eric Bourdon, Gérant
+            </p>
+
+            <p>
+              <strong>SIRET :</strong> 362 521 879 00054
+            </p>
+
+            <p>
+              <strong>TVA intracommunautaire :</strong> FR12 948140589
+            </p>
+
+            <p>
+              <strong>Email :</strong> contact@thetiptop.fr
+            </p>
+
+            <p>
+              <strong>Téléphone :</strong> 01 84 80 20 34
+            </p>
+
+          </div>
+
+        </section>
+
+
+
+        {/* Article 2 */}
+        <section className="mb-8">
+
+          <h2 className="text-2xl font-bold text-green-700 mb-3">
+            Article 2 – Développement du site
+          </h2>
+
+          <p className="text-gray-700">
+            Le site du jeu-concours « 100% Gagnant » a été conçu et développé
+            par Furious Ducks, responsable de la conception technique,
+            de l'application web, de l'API et de l'infrastructure.
+          </p>
+
+        </section>
+
+
+
+        {/* Article 3 */}
+        <section className="mb-8">
+
+          <h2 className="text-2xl font-bold text-green-700 mb-3">
+            Article 3 – Hébergement
+          </h2>
+
+          <p className="text-gray-700">
+            Le site est hébergé par HexaCloud Hostinger.
+          </p>
+
+        </section>
+
+
+
+        {/* Article 4 */}
+        <section className="mb-8">
+
+          <h2 className="text-2xl font-bold text-green-700 mb-3">
+            Article 4 – Propriété intellectuelle
+          </h2>
+
+          <p className="text-gray-700 leading-relaxed">
+
+            L'ensemble des éléments présents sur le site (textes, images,
+            logos, graphismes, logiciels, marques et contenus) appartient
+            à Thé Tip Top ou à ses partenaires.
+
+            Toute reproduction ou utilisation sans autorisation préalable
+            est interdite.
+
+          </p>
+
+        </section>
+
+
+
+        {/* Article 5 */}
+        <section className="mb-8">
+
+          <h2 className="text-2xl font-bold text-green-700 mb-3">
+            Article 5 – Cookies
+          </h2>
+
+          <p className="text-gray-700 leading-relaxed">
+
+            Le site peut utiliser des cookies nécessaires à son fonctionnement
+            ainsi que des cookies d'analyse et de mesure d'audience.
+            L'utilisateur peut gérer ses préférences à tout moment.
+
+          </p>
+
+        </section>
+
+
+
+        {/* Article 6 */}
+        <section className="mb-8">
+
+          <h2 className="text-2xl font-bold text-green-700 mb-3">
+            Article 6 – Responsabilité
+          </h2>
+
+          <p className="text-gray-700 leading-relaxed">
+
+            Thé Tip Top s'efforce de fournir des informations exactes.
+            Toutefois, la société ne peut être tenue responsable des erreurs,
+            interruptions de service ou dommages liés à l'utilisation d'Internet.
+
+          </p>
+
+        </section>
+
+
+
+        {/* Article 7 */}
+        <section className="mb-8">
+
+          <h2 className="text-2xl font-bold text-green-700 mb-3">
+            Article 7 – Droit applicable
+          </h2>
+
+          <p className="text-gray-700">
+
+            Le présent site est soumis au droit français.
+            Tout litige relève des juridictions françaises compétentes.
+
+          </p>
+
+        </section>
+
+
+
+        {/* Article 8 */}
+        <section>
+
+          <h2 className="text-2xl font-bold text-green-700 mb-3">
+            Article 8 – Engagement responsable
+          </h2>
+
+          <p className="text-gray-700 leading-relaxed">
+
+            Thé Tip Top s'engage dans une démarche responsable :
+            optimisation des ressources numériques, limitation de la collecte
+            des données personnelles et utilisation de technologies adaptées.
+
+          </p>
+
+        </section>
+
+
+      </div>
+
+    </main>
+  )
+}

frontend/src/pages/ReglesJeu.jsx

@@ -0,0 +1,182 @@
+import { Link } from 'react-router-dom'
+
+export default function ReglesJeu() {
+  return (
+    <div className="bg-green-50 min-h-screen">
+
+
+      {/* Hero */}
+      <section className="max-w-7xl mx-auto px-6 py-20">
+
+        <div className="text-center max-w-3xl mx-auto">
+
+          <h1 className="text-5xl font-bold text-green-800 mb-6">
+            Règles du jeu
+          </h1>
+
+          <p className="text-xl text-gray-600">
+            Participez au jeu-concours ThéTipTop et découvrez immédiatement
+            le lot que vous avez gagné.
+          </p>
+
+        </div>
+
+      </section>
+
+
+
+      {/* Comment participer */}
+      <section className="max-w-6xl mx-auto px-6 pb-16">
+
+        <h2 className="text-3xl font-bold text-green-800 text-center mb-10">
+          Comment participer ?
+        </h2>
+
+
+        <div className="grid md:grid-cols-3 gap-6">
+
+
+          <div className="bg-white rounded-2xl shadow p-8 text-center">
+
+            <div className="text-4xl font-bold text-green-700 mb-4">
+              1
+            </div>
+
+            <h3 className="text-xl font-semibold mb-3">
+              Obtenez un code
+            </h3>
+
+            <p className="text-gray-600">
+              Achetez un produit ThéTipTop d'une valeur supérieure à 49€
+              en ligne ou en magasin pour recevoir un code unique à 10 chiffres.
+            </p>
+
+          </div>
+
+
+
+          <div className="bg-white rounded-2xl shadow p-8 text-center">
+
+            <div className="text-4xl font-bold text-green-700 mb-4">
+              2
+            </div>
+
+            <h3 className="text-xl font-semibold mb-3">
+              Créez votre compte
+            </h3>
+
+            <p className="text-gray-600">
+              Inscrivez-vous sur le site du jeu-concours afin d'accéder
+              à votre espace participant.
+            </p>
+
+          </div>
+
+
+
+          <div className="bg-white rounded-2xl shadow p-8 text-center">
+
+            <div className="text-4xl font-bold text-green-700 mb-4">
+              3
+            </div>
+
+            <h3 className="text-xl font-semibold mb-3">
+              Découvrez votre lot
+            </h3>
+
+            <p className="text-gray-600">
+              Entrez votre code dans votre espace client et découvrez
+              immédiatement votre récompense.
+            </p>
+
+          </div>
+
+
+        </div>
+
+      </section>
+
+
+
+      {/* Lots */}
+      <section className="max-w-5xl mx-auto px-6 pb-16">
+
+        <div className="bg-white rounded-2xl shadow p-10">
+
+          <h2 className="text-3xl font-bold text-green-800 mb-6 text-center">
+            Que pouvez-vous gagner ?
+          </h2>
+
+
+          <p className="text-gray-600 text-lg text-center leading-relaxed mb-8">
+
+            Tous les billets sont gagnants ! Les récompenses peuvent aller
+            d'un infuseur à thé à un coffret découverte d'une valeur de 69€,
+            en passant par des thés détox et des thés signatures.
+
+          </p>
+
+
+          <div className="bg-green-50 rounded-xl p-6 text-center">
+
+            <h3 className="text-2xl font-bold text-green-700 mb-2">
+              Grand gagnant
+            </h3>
+
+            <p className="text-gray-700">
+              Le participant tiré au sort remportera une année de thé
+              d'une valeur de 360€ !
+            </p>
+
+          </div>
+
+
+        </div>
+
+      </section>
+
+
+
+      {/* CTA */}
+      <section className="max-w-5xl mx-auto px-6 pb-20">
+
+        <div className="bg-green-700 rounded-2xl p-10 text-center text-white">
+
+          <h2 className="text-3xl font-bold mb-4">
+            Ne manquez pas votre chance !
+          </h2>
+
+          <p className="mb-8 text-lg">
+            Inscrivez-vous, entrez votre code de ticket et retirez votre lot
+            en magasin ou en ligne.
+          </p>
+
+
+          <div className="flex flex-col sm:flex-row justify-center gap-4">
+
+            <Link
+              to="/inscription"
+              className="bg-white text-green-700 px-8 py-3 rounded-xl font-semibold hover:bg-green-50"
+            >
+              Inscrivez-vous
+            </Link>
+
+
+            <Link
+              to="/saisir-code-unique"
+              className="border border-white px-8 py-3 rounded-xl font-semibold hover:bg-green-800"
+            >
+              Entrer mon code de ticket
+            </Link>
+
+          </div>
+
+
+        </div>
+
+      </section>
+
+
+    </div>
+  )
+}