andil/THE-TIP-TOP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive : toutes les pages et composants Header/Footer

Browse Source 
- 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
2026-06-24 10:19:52 +02:00
parent 4727a3a268
commit 4ea733440f
9 changed files with 316 additions and 691 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/src/pages/Accueil.jsx
View File

@@ -5,74 +5,53 @@ export default function Accueil() {
<div className="bg-green-50">
{/* Hero */}
<section className="max-w-7xl mx-auto px-6 py-24">
<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-5xl md:text-6xl font-bold text-green-800 mb-6">
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-green-800 mb-4 sm:mb-6 leading-tight">
Bienvenue au jeu-concours Thé Tip Top
</h1>
<p className="text-xl text-gray-600 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 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-4">
<div className="flex flex-col sm:flex-row justify-center gap-3 sm:gap-4">
<Link
to="/saisir-code-unique"
className="bg-green-700 hover:bg-green-800 text-white font-semibold px-8 py-4 rounded-xl transition-colors"
className="bg-green-700 hover:bg-green-800 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-green-700 text-green-700 hover:bg-green-100 font-semibold px-8 py-4 rounded-xl transition-colors"
className="border border-green-700 text-green-700 hover:bg-green-100 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-6 pb-20">
<h2 className="text-3xl font-bold text-green-800 mb-8 text-center">
<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-green-800 mb-6 sm:mb-8 text-center">
Comment participer ?
</h2>
<div className="grid md:grid-cols-4 gap-6">
<div className="bg-white rounded-2xl shadow p-6 text-center">
<div className="text-3xl font-bold text-green-700 mb-3">1</div>
<p>Achat de 49 € minimum</p>
</div>
<div className="bg-white rounded-2xl shadow p-6 text-center">
<div className="text-3xl font-bold text-green-700 mb-3">2</div>
<p>Recevez votre code unique</p>
</div>
<div className="bg-white rounded-2xl shadow p-6 text-center">
<div className="text-3xl font-bold text-green-700 mb-3">3</div>
<p>Saisissez le code sur le site</p>
</div>
<div className="bg-white rounded-2xl shadow p-6 text-center">
<div className="text-3xl font-bold text-green-700 mb-3">4</div>
<p>Découvrez votre lot</p>
</div>
<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-green-700 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>
)
}
}