Ajouter la page concept, améliorer la bannière, ajouter pages contact et concept au menu et ajouter la condition d'inscription pour plus de 18 ans

frontend/src/pages/NotreConcept.jsx

@@ -0,0 +1,145 @@
+import { Link } from 'react-router-dom'
+import usePageMeta from '../hooks/usePageMeta'
+import bannerImg from '../assets/img/banner-the-tip-top.webp'
+
+export default function NotreConcept() {
+  usePageMeta({
+    title: 'Notre concept : un jeu-concours sans perdant | Thé Tip Top',
+    description: "Pourquoi un jeu 100 % gagnant ? Découvrez le concept, la répartition des lots et les garanties de loyauté du jeu-concours Thé Tip Top.",
+  })
+
+  return (
+    <div className="bg-gray-50 min-h-screen">
+
+      {/* Hero */}
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 py-12 sm:py-16 md:py-20">
+        <div className="text-center max-w-3xl mx-auto">
+          <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#006B6B] mb-4 sm:mb-6">
+            Le concept 100 % Gagnant : un jeu-concours sans perdant
+          </h1>
+          <p className="text-base sm:text-xl text-gray-600 mb-8 sm:mb-10">
+            La plupart des jeux-concours font gagner une personne et laissent les autres repartir
+            les mains vides. Nous avons choisi l'inverse&nbsp;: chaque code distribué correspond à
+            un lot réel, attribué à l'avance. Personne ne joue pour rien.
+          </p>
+          <div className="flex flex-col sm:flex-row justify-center gap-3 sm:gap-4">
+            <Link
+              to="/accueil"
+              className="bg-[#006B6B] hover:bg-[#005555] text-white font-semibold px-6 sm:px-8 py-3 rounded-xl transition-colors text-sm sm:text-base"
+            >
+              Voir le jeu-concours
+            </Link>
+            <Link
+              to="/regles-jeu"
+              className="border border-[#006B6B] text-[#006B6B] hover:bg-[#006B6B] hover:text-white font-semibold px-6 sm:px-8 py-3 rounded-xl transition-colors text-sm sm:text-base"
+            >
+              Consulter le règlement
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* Visuel principal */}
+      <section className="max-w-5xl mx-auto px-4 sm:px-6 pb-12 sm:pb-16">
+        <div className="rounded-2xl shadow overflow-hidden">
+          <img
+            src={bannerImg}
+            alt="Infuseur à thé Thé Tip Top, lot garanti du jeu-concours 100 % Gagnant"
+            className="w-full h-full object-cover object-center"
+          />
+        </div>
+      </section>
+
+      {/* Pourquoi un jeu sans perdant */}
+      <section className="max-w-5xl mx-auto px-4 sm:px-6 pb-12 sm:pb-16">
+        <div className="bg-white rounded-2xl shadow p-6 sm:p-10">
+          <h2 className="text-2xl sm:text-3xl font-bold text-[#006B6B] mb-4 sm:mb-6">
+            Pourquoi un jeu sans perdant
+          </h2>
+          <p className="text-gray-600 text-sm sm:text-base leading-relaxed">
+            Un jeu classique récompense la chance. Celui-ci récompense la visite. Nous ouvrons une
+            nouvelle adresse et nous voulions que chaque personne qui pousse la porte reparte avec
+            quelque chose à goûter, pas avec un ticket de loterie. C'est aussi la raison pour
+            laquelle le lot se retire sur place&nbsp;: le jeu est un prétexte à une rencontre, pas à
+            une transaction de plus.
+          </p>
+        </div>
+      </section>
+
+      {/* Comment la loyauté du jeu est garantie */}
+      <section className="max-w-5xl mx-auto px-4 sm:px-6 pb-12 sm:pb-16">
+        <div className="bg-white rounded-2xl shadow p-6 sm:p-10">
+          <h2 className="text-2xl sm:text-3xl font-bold text-[#006B6B] mb-4 sm:mb-6">
+            Comment la loyauté du jeu est garantie
+          </h2>
+          <p className="text-gray-600 text-sm sm:text-base leading-relaxed">
+            L'intégralité des codes et leur lot associé sont générés avant l'ouverture du jeu, puis
+            déposés auprès de Maître Arnaud Rick, commissaire de justice. Aucun lot ne peut être
+            modifié en cours d'opération. Le règlement complet est{' '}
+            <a
+              href="/reglement-jeu-concours-100-gagnant.pdf"
+              className="text-[#006B6B] font-semibold underline hover:no-underline"
+            >
+              consultable et téléchargeable
+            </a>{' '}
+            à tout moment. Le tirage au sort du lot principal est effectué sous le contrôle du même
+            commissaire de justice, et le nombre de participations n'augmente pas les chances de le
+            remporter.
+          </p>
+        </div>
+      </section>
+
+      {/* La répartition des lots */}
+      <section className="max-w-5xl mx-auto px-4 sm:px-6 pb-12 sm:pb-16">
+        <div className="bg-white rounded-2xl shadow p-6 sm:p-10">
+          <h2 className="text-2xl sm:text-3xl font-bold text-[#006B6B] mb-4 sm:mb-6">
+            La répartition des lots, annoncée à l'avance
+          </h2>
+          <p className="text-gray-600 text-sm sm:text-base leading-relaxed">
+            Six codes sur dix donnent un infuseur, deux sur dix une boîte de 100 g, un sur dix une
+            boîte d'un mélange signature, et le solde un coffret découverte. Cette répartition est
+            publiée dès le premier jour et ne varie pas. Vous savez donc, avant même de jouer, ce
+            que vous pouvez obtenir et dans quelle proportion.
+          </p>
+        </div>
+      </section>
+
+      {/* Un jeu conçu pour ne rien gaspiller */}
+      <section className="max-w-5xl mx-auto px-4 sm:px-6 pb-12 sm:pb-20">
+        <div className="bg-white rounded-2xl shadow p-6 sm:p-10">
+          <h2 className="text-2xl sm:text-3xl font-bold text-[#006B6B] mb-4 sm:mb-6">
+            Un jeu conçu pour ne rien gaspiller
+          </h2>
+          <p className="text-gray-600 text-sm sm:text-base leading-relaxed">
+            Le lot le plus distribué est un infuseur réutilisable, choisi pour remplacer durablement
+            les sachets jetables plutôt que pour faire nombre. La participation est entièrement
+            numérique, sans bulletin papier, et nos supports imprimés se limitent au strict
+            nécessaire d'un point de vente.
+          </p>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="max-w-5xl mx-auto px-4 sm:px-6 pb-12 sm:pb-20">
+        <div className="bg-[#006B6B] rounded-2xl p-6 sm:p-10 text-center text-white">
+          <h2 className="text-2xl sm:text-3xl font-bold mb-3 sm:mb-4">
+            Une question sur le concept du jeu ?
+          </h2>
+          <p className="mb-6 sm:mb-8 text-base sm:text-lg">
+            Notre équipe reste à votre écoute pour tout ce qui concerne le jeu-concours et vos
+            lots.
+          </p>
+          <div className="flex justify-center">
+            <Link
+              to="/contact"
+              className="bg-white text-[#006B6B] px-6 sm:px-8 py-3 rounded-xl font-semibold hover:bg-[#006B6B] hover:text-white border border-white text-sm sm:text-base"
+            >
+              Contactez-nous
+            </Link>
+          </div>
+        </div>
+      </section>
+
+    </div>
+  )
+}