58 lines
2.5 KiB
JavaScript
58 lines
2.5 KiB
JavaScript
import { Link } from 'react-router-dom'
|
|
|
|
export default function Accueil() {
|
|
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-24">
|
|
<div className="text-center max-w-3xl mx-auto">
|
|
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-[#006B6B] mb-4 sm:mb-6 leading-tight">
|
|
Bienvenue au jeu-concours Thé Tip Top
|
|
</h1>
|
|
<p className="text-base sm:text-lg md:text-xl text-gray-600 mb-8 sm: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-3 sm:gap-4">
|
|
<Link
|
|
to="/saisir-code-unique"
|
|
className="bg-[#006B6B] hover:bg-[#005555] text-white font-semibold px-6 sm:px-8 py-3 sm:py-4 rounded-xl transition-colors text-sm sm:text-base"
|
|
>
|
|
Tester mon code
|
|
</Link>
|
|
<Link
|
|
to="/regles-jeu"
|
|
className="border border-[#006B6B] text-[#006B6B] hover:bg-[#005555] hover:text-white font-semibold px-6 sm:px-8 py-3 sm:py-4 rounded-xl transition-colors text-sm sm:text-base"
|
|
>
|
|
Découvrir les règles
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Comment participer */}
|
|
<section className="max-w-5xl mx-auto px-4 sm:px-6 pb-12 sm:pb-20">
|
|
<h2 className="text-2xl sm:text-3xl font-bold text-[#006B6B] mb-6 sm:mb-8 text-center">
|
|
Comment participer ?
|
|
</h2>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
{[
|
|
{ num: '1', text: 'Achat de 49 € minimum' },
|
|
{ num: '2', text: 'Recevez votre code unique' },
|
|
{ num: '3', text: 'Saisissez le code sur le site' },
|
|
{ num: '4', text: 'Découvrez votre lot' },
|
|
].map((step) => (
|
|
<div key={step.num} className="bg-white rounded-2xl shadow p-4 sm:p-6 text-center">
|
|
<div className="text-2xl sm:text-3xl font-bold text-[#006B6B] mb-2 sm:mb-3">{step.num}</div>
|
|
<p className="text-sm sm:text-base text-gray-700">{step.text}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
)
|
|
}
|