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

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