Responsive : toutes les pages et composants Header/Footer
- Header : menu hamburger animé pour mobile, nav cachée sur petit écran - Footer : grid 2 colonnes sur mobile, 4 colonnes sur desktop - Accueil : titres et paddings adaptés mobile/tablette/desktop - ReglesJeu : titres, cartes et CTA responsives - MentionsLegales / Confidentialite : paddings et titres adaptés mobile - Contact : padding et formulaire adaptés mobile - Admin : tableau avec scroll horizontal sur mobile - Employe : formulaire de recherche en colonne sur mobile - Ajout composants Layout, Header, Footer et logo depuis branche Alexis Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Emma781227
@@ -4,179 +4,97 @@ 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">
|
||||
|
||||
<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-5xl font-bold text-green-800 mb-6">
|
||||
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-green-800 mb-4 sm:mb-6">
|
||||
Règles du jeu
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-gray-600">
|
||||
<p className="text-base sm: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">
|
||||
<section className="max-w-6xl mx-auto px-4 sm:px-6 pb-12 sm:pb-16">
|
||||
<h2 className="text-2xl sm:text-3xl font-bold text-green-800 text-center mb-8 sm: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 className="grid sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6">
|
||||
{[
|
||||
{
|
||||
num: '1',
|
||||
title: 'Obtenez un code',
|
||||
text: "Achetez un produit ThéTipTop d'une valeur supérieure à 49€ en ligne ou en magasin pour recevoir un code unique à 10 chiffres.",
|
||||
},
|
||||
{
|
||||
num: '2',
|
||||
title: 'Créez votre compte',
|
||||
text: "Inscrivez-vous sur le site du jeu-concours afin d'accéder à votre espace participant.",
|
||||
},
|
||||
{
|
||||
num: '3',
|
||||
title: 'Découvrez votre lot',
|
||||
text: 'Entrez votre code dans votre espace client et découvrez immédiatement votre récompense.',
|
||||
},
|
||||
].map((step) => (
|
||||
<div key={step.num} className="bg-white rounded-2xl shadow p-6 sm:p-8 text-center">
|
||||
<div className="text-3xl sm:text-4xl font-bold text-green-700 mb-3 sm:mb-4">{step.num}</div>
|
||||
<h3 className="text-lg sm:text-xl font-semibold mb-2 sm:mb-3">{step.title}</h3>
|
||||
<p className="text-gray-600 text-sm sm:text-base">{step.text}</p>
|
||||
</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">
|
||||
<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-green-800 mb-4 sm:mb-6 text-center">
|
||||
Que pouvez-vous gagner ?
|
||||
</h2>
|
||||
|
||||
|
||||
<p className="text-gray-600 text-lg text-center leading-relaxed mb-8">
|
||||
|
||||
<p className="text-gray-600 text-base sm:text-lg text-center leading-relaxed mb-6 sm: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€ !
|
||||
<div className="bg-green-50 rounded-xl p-4 sm:p-6 text-center">
|
||||
<h3 className="text-xl sm:text-2xl font-bold text-green-700 mb-2">Grand gagnant</h3>
|
||||
<p className="text-gray-700 text-sm sm:text-base">
|
||||
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">
|
||||
<section className="max-w-5xl mx-auto px-4 sm:px-6 pb-12 sm:pb-20">
|
||||
<div className="bg-green-700 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">
|
||||
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 className="mb-6 sm:mb-8 text-base sm: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">
|
||||
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-3 sm:gap-4">
|
||||
<Link
|
||||
to="/inscription"
|
||||
className="bg-white text-green-700 px-8 py-3 rounded-xl font-semibold hover:bg-green-50"
|
||||
className="bg-white text-green-700 px-6 sm:px-8 py-3 rounded-xl font-semibold hover:bg-green-50 text-sm sm:text-base"
|
||||
>
|
||||
Inscrivez-vous
|
||||
</Link>
|
||||
|
||||
|
||||
<Link
|
||||
to="/saisir-code-unique"
|
||||
className="border border-white px-8 py-3 rounded-xl font-semibold hover:bg-green-800"
|
||||
className="border border-white px-6 sm:px-8 py-3 rounded-xl font-semibold hover:bg-green-800 text-sm sm:text-base"
|
||||
>
|
||||
Entrer mon code de ticket
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user