soufiane
6b03ad8053
- Corriger les erreurs de contraste (text-primary-300 → text-primary-600) - Corriger la hiérarchie des titres (h3 → h2 pour GamePeriod et GrandPrize) - Supprimer les alt redondants sur les images décoratives (PrizeCard) - Ajouter aria-hidden sur les images décoratives - Ajouter aria-label descriptif sur le lien logo du Header - Utiliser les balises <time> pour les dates sémantiques - Convertir les textes importants en titres appropriés (h3, h4) - Mettre à jour les tests PrizeCard 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
50 lines
2.9 KiB
TypeScript
50 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
export default function GamePeriod() {
|
|
return (
|
|
<div className="grid md:grid-cols-2 gap-8 mt-8">
|
|
{/* Période de validation des tickets */}
|
|
<div className="bg-gradient-to-br from-white to-secondary-50 rounded-3xl shadow-xl p-10 border-2 border-secondary-400 hover:shadow-2xl hover:scale-[1.02] transition-all duration-300">
|
|
<div className="flex flex-col items-center text-center">
|
|
<div className="bg-gradient-to-br from-secondary-100 to-secondary-200 rounded-full p-6 mb-6 shadow-lg">
|
|
<svg className="w-12 h-12 text-secondary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" />
|
|
</svg>
|
|
</div>
|
|
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-4">Période de validation des tickets</h2>
|
|
<p className="text-lg text-gray-600 mb-6">
|
|
Achetez et validez votre code de participation
|
|
</p>
|
|
<div className="bg-secondary-100 rounded-2xl px-6 py-4 w-full">
|
|
<h3 className="text-lg font-bold text-secondary-700">
|
|
Du <time dateTime="2025-12-01">1 décembre 2025</time> au <time dateTime="2025-12-31">31 décembre 2025</time>
|
|
</h3>
|
|
<p className="text-secondary-700 font-semibold mt-1">30 jours</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Période de récupération des lots */}
|
|
<div className="bg-gradient-to-br from-white to-primary-50 rounded-3xl shadow-xl p-10 border-2 border-primary-500 hover:shadow-2xl hover:scale-[1.02] transition-all duration-300">
|
|
<div className="flex flex-col items-center text-center">
|
|
<div className="bg-gradient-to-br from-primary-100 to-primary-200 rounded-full p-6 mb-6 shadow-lg">
|
|
<svg className="w-12 h-12 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
|
|
</svg>
|
|
</div>
|
|
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-4">Période de récupération des lots</h2>
|
|
<p className="text-lg text-gray-600 mb-6">
|
|
Récupérez vos lots gagnés en boutique
|
|
</p>
|
|
<div className="bg-primary-50 rounded-2xl px-6 py-4 w-full">
|
|
<h3 className="text-lg font-bold text-primary-700">
|
|
Du <time dateTime="2025-12-01">1 décembre 2025</time> au <time dateTime="2026-01-31">31 janvier 2026</time>
|
|
</h3>
|
|
<p className="text-primary-600 font-semibold mt-1">60 jours</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|