the-tip-top-frontend/components/GamePeriod.tsx
soufiane 152563b5e5 feat: add contact form API integration and UI improvements
- Connect contact form to backend API endpoint
- Add email thetiptopgr3@gmail.com to contact and about pages
- Replace about page gradient with actual image
- Change Thé bio icon from emoji to Leaf component
- Remove dates from game period sections
- Add proper error handling for contact form

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-24 11:40:41 +01:00

42 lines
1.9 KiB
TypeScript

'use client';
export default function GamePeriod() {
return (
<div className="grid md:grid-cols-2 gap-6 mt-8">
{/* Période d'achat */}
<div className="bg-white rounded-2xl shadow-lg p-8 border-2 border-[#f59e0b] hover:shadow-xl transition-shadow">
<div className="flex items-start gap-4">
<div className="bg-gradient-to-br from-[#fef3c7] to-[#fde68a] rounded-full p-4 flex-shrink-0">
<svg className="w-8 h-8 text-[#f59e0b]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
</svg>
</div>
<div className="flex-1">
<h3 className="text-2xl font-bold text-gray-900 mb-3">Période d'achat</h3>
<p className="text-gray-600">
Achetez vos tickets de 49 en boutique et obtenez votre code de participation
</p>
</div>
</div>
</div>
{/* Période de jeu */}
<div className="bg-white rounded-2xl shadow-lg p-8 border-2 border-[#1a4d2e] hover:shadow-xl transition-shadow">
<div className="flex items-start gap-4">
<div className="bg-gradient-to-br from-[#d1fae5] to-[#a7f3d0] rounded-full p-4 flex-shrink-0">
<svg className="w-8 h-8 text-[#1a4d2e]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div className="flex-1">
<h3 className="text-2xl font-bold text-gray-900 mb-3">Période de jeu</h3>
<p className="text-gray-600">
Utilisez vos tickets pour jouer et découvrir vos lots instantanément
</p>
</div>
</div>
</div>
</div>
);
}