107 lines
4.4 KiB
JavaScript
107 lines
4.4 KiB
JavaScript
import { Link } from 'react-router-dom'
|
|
import { useAuth } from '../context/AuthContext'
|
|
|
|
export default function ReglesJeu() {
|
|
const { user } = useAuth()
|
|
const isLoggedIn = !!user
|
|
|
|
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">
|
|
Règles du jeu
|
|
</h1>
|
|
<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-4 sm:px-6 pb-12 sm:pb-16">
|
|
<h2 className="text-2xl sm:text-3xl font-bold text-[#006B6B] text-center mb-8 sm:mb-10">
|
|
Comment participer ?
|
|
</h2>
|
|
<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-[#006B6B] 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>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* 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 text-center">
|
|
Que pouvez-vous gagner ?
|
|
</h2>
|
|
<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-gray-100 rounded-xl p-4 sm:p-6 text-center">
|
|
<h3 className="text-xl sm:text-2xl font-bold text-[#006B6B] 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-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">
|
|
Ne manquez pas votre chance !
|
|
</h2>
|
|
<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-3 sm:gap-4">
|
|
{!isLoggedIn && (
|
|
<Link
|
|
to="/inscription"
|
|
className="bg-white text-[#006B6B] px-6 sm:px-8 py-3 rounded-xl font-semibold hover:bg-[#006B6B] hover:text-white text-sm sm:text-base"
|
|
>
|
|
Inscrivez-vous
|
|
</Link>
|
|
)}
|
|
<Link
|
|
to="/saisir-code-unique"
|
|
className="border border-white px-6 sm:px-8 py-3 rounded-xl font-semibold hover:bg-[#006B6B] hover:text-white text-sm sm:text-base"
|
|
>
|
|
Entrer mon code de ticket
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
)
|
|
}
|