wkadmin/the-tip-top-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert to previous version

Browse Source
This commit is contained in:
Lamrini-asmae 2025-11-23 18:26:15 +01:00
parent fa60ac990c
commit f0c8a35fe4
13 changed files with 440 additions and 451 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
app/client/page.tsx
View File

@ -78,32 +78,32 @@ export default function ClientPage() {
}; };
return ( return (
<div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-8"> <div className="min-h-screen bg-gray-50 py-8">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
{/* Welcome Section */} {/* Welcome Section */}
<div className="mb-8"> <div className="mb-8">
<h1 className="text-4xl font-bold text-[#5a5a4e] mb-2"> <h1 className="text-4xl font-bold text-gray-900 mb-2">
Bonjour {user?.firstName} ! 👋 Bonjour {user?.firstName} ! 👋
</h1> </h1>
<p className="text-[#8a8a7a]"> <p className="text-gray-600">
Bienvenue dans votre espace client Bienvenue dans votre espace client
</p> </p>
</div> </div>
{/* Quick Action */} {/* Quick Action */}
<div className="mb-8"> <div className="mb-8">
<div className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] text-white rounded-xl shadow-md p-8 border-2 border-[#e5e4dc]"> <div className="bg-gradient-to-r from-[#1a4d2e] to-[#2d5a3d] text-white rounded-xl shadow-md p-8">
<div className="flex flex-col md:flex-row items-center justify-between gap-4"> <div className="flex flex-col md:flex-row items-center justify-between gap-4">
<div> <div>
<h2 className="text-2xl font-bold mb-2"> <h2 className="text-2xl font-bold mb-2">
Vous avez un nouveau ticket ? Vous avez un nouveau ticket ?
</h2> </h2>
<p className="text-white/90"> <p className="text-green-50">
Entrez votre code et découvrez votre gain instantanément Entrez votre code et découvrez votre gain instantanément
</p> </p>
</div> </div>
<Link href={ROUTES.GAME}> <Link href={ROUTES.GAME}>
<button className="bg-white text-[#d4a574] hover:bg-[#f5f5f0] font-bold px-8 py-4 rounded-lg transition-all shadow-lg hover:scale-105 duration-300 whitespace-nowrap"> <button className="bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-8 py-4 rounded-lg transition-all hover:shadow-xl whitespace-nowrap">
Jouer maintenant 🎮 Jouer maintenant 🎮
</button> </button>
</Link> </Link>
@ -113,13 +113,13 @@ export default function ClientPage() {
{/* Statistics Cards */} {/* Statistics Cards */}
<div className="grid md:grid-cols-3 gap-6 mb-8"> <div className="grid md:grid-cols-3 gap-6 mb-8">
<div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md p-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<p className="text-sm font-medium text-[#8a8a7a] mb-2"> <p className="text-sm font-medium text-gray-600 mb-2">
Total Participations Total Participations
</p> </p>
<p className="text-4xl font-bold text-blue-600"> <p className="text-4xl font-bold text-gray-900">
{stats.total} {stats.total}
</p> </p>
</div> </div>
@ -131,10 +131,10 @@ export default function ClientPage() {
</div> </div>
</div> </div>
<div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md p-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<p className="text-sm font-medium text-[#8a8a7a] mb-2"> <p className="text-sm font-medium text-gray-600 mb-2">
Gains réclamés Gains réclamés
</p> </p>
<p className="text-4xl font-bold text-green-600"> <p className="text-4xl font-bold text-green-600">
@ -149,10 +149,10 @@ export default function ClientPage() {
</div> </div>
</div> </div>
<div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md p-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<p className="text-sm font-medium text-[#8a8a7a] mb-2"> <p className="text-sm font-medium text-gray-600 mb-2">
En attente En attente
</p> </p>
<p className="text-4xl font-bold text-yellow-600"> <p className="text-4xl font-bold text-yellow-600">
@ -169,12 +169,12 @@ export default function ClientPage() {
</div> </div>
{/* Recent Tickets */} {/* Recent Tickets */}
<div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md overflow-hidden">
<div className="px-6 py-4 border-b border-[#e5e4dc]"> <div className="px-6 py-4 border-b border-gray-200">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h2 className="text-xl font-bold text-[#5a5a4e]">Mes derniers tickets</h2> <h2 className="text-xl font-bold text-gray-900">Mes derniers tickets</h2>
<Link href={ROUTES.HISTORY}> <Link href={ROUTES.HISTORY}>
<button className="text-[#d4a574] hover:text-[#c4956a] font-semibold text-sm transition-colors"> <button className="text-[#1a4d2e] hover:text-[#f59e0b] font-semibold text-sm transition-colors">
Voir tout l'historique Voir tout l'historique
</button> </button>
</Link> </Link>
@ -184,11 +184,11 @@ export default function ClientPage() {
{tickets.length === 0 ? ( {tickets.length === 0 ? (
<div className="text-center py-12"> <div className="text-center py-12">
<div className="text-6xl mb-4">🎲</div> <div className="text-6xl mb-4">🎲</div>
<p className="text-[#8a8a7a] mb-4"> <p className="text-gray-600 mb-4">
Vous n'avez pas encore participé au jeu Vous n'avez pas encore participé au jeu
</p> </p>
<Link href={ROUTES.GAME}> <Link href={ROUTES.GAME}>
<button className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300"> <button className="bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-6 py-3 rounded-lg transition-all">
Jouer maintenant Jouer maintenant
</button> </button>
</Link> </Link>
@ -197,31 +197,31 @@ export default function ClientPage() {
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="min-w-full"> <table className="min-w-full">
<thead> <thead>
<tr className="border-b border-[#e5e4dc]"> <tr className="border-b border-gray-200">
<th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
Code Ticket Code Ticket
</th> </th>
<th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
Gain Gain
</th> </th>
<th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
Statut Statut
</th> </th>
<th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
Date Date
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-[#e5e4dc]"> <tbody className="divide-y divide-gray-200">
{tickets.slice(0, 5).map((ticket) => { {tickets.slice(0, 5).map((ticket) => {
const prizeConfig = ticket.prize const prizeConfig = ticket.prize
? PRIZE_CONFIG[ticket.prize.type as keyof typeof PRIZE_CONFIG] ? PRIZE_CONFIG[ticket.prize.type as keyof typeof PRIZE_CONFIG]
: null; : null;
return ( return (
<tr key={ticket.id} className="hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors"> <tr key={ticket.id} className="hover:bg-gray-50 transition-colors">
<td className="px-6 py-4 whitespace-nowrap"> <td className="px-6 py-4 whitespace-nowrap">
<span className="font-mono text-sm font-semibold text-[#5a5a4e]"> <span className="font-mono text-sm font-semibold text-gray-900">
{ticket.code} {ticket.code}
</span> </span>
</td> </td>
@ -257,7 +257,7 @@ export default function ClientPage() {
)} )}
</div> </div>
<div> <div>
<p className="text-sm font-medium text-[#5a5a4e]"> <p className="text-sm font-medium text-gray-900">
{prizeConfig.name} {prizeConfig.name}
</p> </p>
</div> </div>
@ -268,7 +268,7 @@ export default function ClientPage() {
<td className="px-6 py-4 whitespace-nowrap"> <td className="px-6 py-4 whitespace-nowrap">
{getStatusBadge(ticket.status)} {getStatusBadge(ticket.status)}
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-[#8a8a7a]"> <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
{ticket.playedAt ? new Date(ticket.playedAt).toLocaleDateString("fr-FR") : "-"} {ticket.playedAt ? new Date(ticket.playedAt).toLocaleDateString("fr-FR") : "-"}
</td> </td>
</tr> </tr>

120
app/contact/page.tsx
View File

@ -45,15 +45,15 @@ export default function ContactPage() {
}; };
return ( return (
<div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]"> <div className="min-h-screen bg-gray-50">
{/* Hero Section */} {/* Hero Section */}
<section className="bg-gradient-to-r from-white to-[#faf9f5] py-12 border-b-2 border-[#e5e4dc]"> <section className="bg-white py-12">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<h1 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] mb-4"> <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
Contactez-nous Contactez-nous
</h1> </h1>
<p className="text-lg text-[#8a8a7a]"> <p className="text-lg text-gray-600">
Une question sur le jeu-concours ? Besoin d'aide ? Notre équipe est là pour vous accompagner ! Une question sur le jeu-concours ? Besoin d'aide ? Notre équipe est là pour vous accompagner !
</p> </p>
</div> </div>
@ -68,13 +68,13 @@ export default function ContactPage() {
{/* Contact Form */} {/* Contact Form */}
<div> <div>
<div className="bg-white rounded-xl shadow-md p-8 border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md p-8">
<h2 className="text-2xl font-bold text-[#5a5a4e] mb-6">Envoyez-nous un message</h2> <h2 className="text-2xl font-bold text-gray-900 mb-6">Envoyez-nous un message</h2>
<form onSubmit={handleSubmit} className="space-y-6"> <form onSubmit={handleSubmit} className="space-y-6">
{/* Nom complet */} {/* Nom complet */}
<div> <div>
<label htmlFor="fullName" className="block text-sm font-semibold text-[#5a5a4e] mb-2"> <label htmlFor="fullName" className="block text-sm font-semibold text-gray-700 mb-2">
Nom complet <span className="text-red-500">*</span> Nom complet <span className="text-red-500">*</span>
</label> </label>
<input <input
@ -85,13 +85,13 @@ export default function ContactPage() {
value={formData.fullName} value={formData.fullName}
onChange={handleChange} onChange={handleChange}
placeholder="Votre nom et prénom" placeholder="Votre nom et prénom"
className="w-full px-4 py-3 border-2 border-[#e5e4dc] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-[#d4a574]" className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent"
/> />
</div> </div>
{/* Email */} {/* Email */}
<div> <div>
<label htmlFor="email" className="block text-sm font-semibold text-[#5a5a4e] mb-2"> <label htmlFor="email" className="block text-sm font-semibold text-gray-700 mb-2">
Email <span className="text-red-500">*</span> Email <span className="text-red-500">*</span>
</label> </label>
<input <input
@ -102,13 +102,13 @@ export default function ContactPage() {
value={formData.email} value={formData.email}
onChange={handleChange} onChange={handleChange}
placeholder="votre@email.com" placeholder="votre@email.com"
className="w-full px-4 py-3 border-2 border-[#e5e4dc] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-[#d4a574]" className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent"
/> />
</div> </div>
{/* Sujet */} {/* Sujet */}
<div> <div>
<label htmlFor="subject" className="block text-sm font-semibold text-[#5a5a4e] mb-2"> <label htmlFor="subject" className="block text-sm font-semibold text-gray-700 mb-2">
Sujet <span className="text-red-500">*</span> Sujet <span className="text-red-500">*</span>
</label> </label>
<select <select
@ -117,7 +117,7 @@ export default function ContactPage() {
required required
value={formData.subject} value={formData.subject}
onChange={handleChange} onChange={handleChange}
className="w-full px-4 py-3 border-2 border-[#e5e4dc] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-[#d4a574] bg-white" className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent bg-white"
> >
<option value="">Sélectionnez un sujet</option> <option value="">Sélectionnez un sujet</option>
<option value="jeu-concours">Question sur le jeu-concours</option> <option value="jeu-concours">Question sur le jeu-concours</option>
@ -130,7 +130,7 @@ export default function ContactPage() {
{/* Message */} {/* Message */}
<div> <div>
<label htmlFor="message" className="block text-sm font-semibold text-[#5a5a4e] mb-2"> <label htmlFor="message" className="block text-sm font-semibold text-gray-700 mb-2">
Message <span className="text-red-500">*</span> Message <span className="text-red-500">*</span>
</label> </label>
<textarea <textarea
@ -141,7 +141,7 @@ export default function ContactPage() {
onChange={handleChange} onChange={handleChange}
placeholder="Décrivez votre demande en détail..." placeholder="Décrivez votre demande en détail..."
rows={6} rows={6}
className="w-full px-4 py-3 border-2 border-[#e5e4dc] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-[#d4a574] resize-none" className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent resize-none"
/> />
</div> </div>
@ -154,11 +154,11 @@ export default function ContactPage() {
required required
checked={formData.acceptPolicy} checked={formData.acceptPolicy}
onChange={handleCheckboxChange} onChange={handleCheckboxChange}
className="mt-1 w-5 h-5 text-[#d4a574] border-[#e5e4dc] rounded focus:ring-2 focus:ring-[#d4a574]" className="mt-1 w-5 h-5 text-[#1a4d2e] border-gray-300 rounded focus:ring-2 focus:ring-[#1a4d2e]"
/> />
<label htmlFor="acceptPolicy" className="text-sm text-[#5a5a4e] select-none cursor-pointer"> <label htmlFor="acceptPolicy" className="text-sm text-gray-700 select-none cursor-pointer">
J'accepte que mes données soient collectées et traitées conformément à la{' '} J'accepte que mes données soient collectées et traitées conformément à la{' '}
<Link href="/privacy" className="text-[#d4a574] underline hover:text-[#c4956a]"> <Link href="/privacy" className="text-[#1a4d2e] underline hover:text-[#f59e0b]">
politique de confidentialité politique de confidentialité
</Link>{' '} </Link>{' '}
<span className="text-red-500">*</span> <span className="text-red-500">*</span>
@ -170,7 +170,7 @@ export default function ContactPage() {
<button <button
type="submit" type="submit"
disabled={isSubmitting} disabled={isSubmitting}
className="w-full bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] disabled:from-gray-400 disabled:to-gray-500 text-white font-bold px-8 py-4 rounded-lg transition-all duration-300 shadow-lg hover:shadow-[0_0_20px_rgba(212,165,116,0.6)] hover:scale-105" className="w-full bg-[#1a4d2e] hover:bg-[#2d5a3d] disabled:bg-gray-400 text-white font-bold px-8 py-4 rounded-lg transition-all"
> >
{isSubmitting ? "Envoi en cours..." : "Envoyer le message"} {isSubmitting ? "Envoi en cours..." : "Envoyer le message"}
</button> </button>
@ -183,16 +183,16 @@ export default function ContactPage() {
<div className="space-y-6"> <div className="space-y-6">
{/* Nos coordonnées */} {/* Nos coordonnées */}
<div className="bg-white rounded-xl shadow-md p-8 border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md p-8">
<h2 className="text-2xl font-bold text-[#5a5a4e] mb-6">Nos coordonnées</h2> <h2 className="text-2xl font-bold text-gray-900 mb-6">Nos coordonnées</h2>
<div className="space-y-6"> <div className="space-y-6">
{/* Siège social */} {/* Siège social */}
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md flex-shrink-0">📍</div> <div className="text-2xl flex-shrink-0">📍</div>
<div> <div>
<h3 className="font-semibold text-[#5a5a4e] mb-1">Siège social</h3> <h3 className="font-semibold text-gray-900 mb-1">Siège social</h3>
<p className="text-[#8a8a7a] text-sm"> <p className="text-gray-600 text-sm">
Thé Tip Top<br /> Thé Tip Top<br />
123 Avenue des Thés<br /> 123 Avenue des Thés<br />
75001 Paris, France 75001 Paris, France
@ -202,11 +202,11 @@ export default function ContactPage() {
{/* Téléphone */} {/* Téléphone */}
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md flex-shrink-0">📞</div> <div className="text-2xl flex-shrink-0">📞</div>
<div> <div>
<h3 className="font-semibold text-[#5a5a4e] mb-1">Téléphone</h3> <h3 className="font-semibold text-gray-900 mb-1">Téléphone</h3>
<p className="text-[#8a8a7a] text-sm"> <p className="text-gray-600 text-sm">
<a href="tel:+33123456789" className="hover:text-[#d4a574] transition-colors"> <a href="tel:+33123456789" className="hover:text-[#1a4d2e] transition-colors">
+33 1 23 45 67 89 +33 1 23 45 67 89
</a><br /> </a><br />
<span className="text-xs">Du lundi au vendredi<br />9h00 - 18h00</span> <span className="text-xs">Du lundi au vendredi<br />9h00 - 18h00</span>
@ -216,22 +216,22 @@ export default function ContactPage() {
{/* Email */} {/* Email */}
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md flex-shrink-0">✉️</div> <div className="text-2xl flex-shrink-0">✉️</div>
<div> <div>
<h3 className="font-semibold text-[#5a5a4e] mb-1">Email</h3> <h3 className="font-semibold text-gray-900 mb-1">Email</h3>
<div className="text-[#8a8a7a] text-sm space-y-1"> <div className="text-gray-600 text-sm space-y-1">
<p> <p>
<a href="mailto:contact@thetiptop.com" className="hover:text-[#d4a574] transition-colors"> <a href="mailto:contact@thetiptop.com" className="hover:text-[#1a4d2e] transition-colors">
contact@thetiptop.com contact@thetiptop.com
</a> </a>
</p> </p>
<p> <p>
<a href="mailto:support@thetiptop.com" className="hover:text-[#d4a574] transition-colors"> <a href="mailto:support@thetiptop.com" className="hover:text-[#1a4d2e] transition-colors">
support@thetiptop.com support@thetiptop.com
</a> </a>
</p> </p>
<p> <p>
<a href="mailto:privacy@thetiptop.com" className="hover:text-[#d4a574] transition-colors"> <a href="mailto:privacy@thetiptop.com" className="hover:text-[#1a4d2e] transition-colors">
privacy@thetiptop.com privacy@thetiptop.com
</a> </a>
</p> </p>
@ -241,10 +241,10 @@ export default function ContactPage() {
{/* Service client */} {/* Service client */}
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md flex-shrink-0">🕐</div> <div className="text-2xl flex-shrink-0">🕐</div>
<div> <div>
<h3 className="font-semibold text-[#5a5a4e] mb-1">Service client</h3> <h3 className="font-semibold text-gray-900 mb-1">Service client</h3>
<p className="text-[#8a8a7a] text-sm"> <p className="text-gray-600 text-sm">
Réponse sous 24h<br /> Réponse sous 24h<br />
Support multilingue<br /> Support multilingue<br />
Du lundi au samedi Du lundi au samedi
@ -255,49 +255,49 @@ export default function ContactPage() {
</div> </div>
{/* Nos boutiques */} {/* Nos boutiques */}
<div className="bg-white rounded-xl shadow-md p-8 border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md p-8">
<h2 className="text-2xl font-bold text-[#5a5a4e] mb-6">Nos boutiques</h2> <h2 className="text-2xl font-bold text-gray-900 mb-6">Nos boutiques</h2>
<div className="space-y-4"> <div className="space-y-4">
{/* Boutique 1 */} {/* Boutique 1 */}
<div className="pb-4 border-b border-[#e5e4dc]"> <div className="pb-4 border-b border-gray-200">
<h3 className="font-semibold text-[#5a5a4e] mb-2">Paris Rivoli</h3> <h3 className="font-semibold text-gray-900 mb-2">Paris Rivoli</h3>
<p className="text-[#8a8a7a] text-sm mb-1"> <p className="text-gray-600 text-sm mb-1">
123 Rue de Rivoli, 75001 Paris 123 Rue de Rivoli, 75001 Paris
</p> </p>
<p className="text-sm text-[#8a8a7a]">01 23 45 67 89</p> <p className="text-sm text-gray-500">01 23 45 67 89</p>
</div> </div>
{/* Boutique 2 */} {/* Boutique 2 */}
<div className="pb-4 border-b border-[#e5e4dc]"> <div className="pb-4 border-b border-gray-200">
<h3 className="font-semibold text-[#5a5a4e] mb-2">Paris Saint-Germain</h3> <h3 className="font-semibold text-gray-900 mb-2">Paris Saint-Germain</h3>
<p className="text-[#8a8a7a] text-sm mb-1"> <p className="text-gray-600 text-sm mb-1">
45 Boulevard Saint-Germain, 75006 Paris 45 Boulevard Saint-Germain, 75006 Paris
</p> </p>
<p className="text-sm text-[#8a8a7a]">01 23 45 67 90</p> <p className="text-sm text-gray-500">01 23 45 67 90</p>
</div> </div>
{/* Boutique 3 */} {/* Boutique 3 */}
<div className="pb-4 border-b border-[#e5e4dc]"> <div className="pb-4 border-b border-gray-200">
<h3 className="font-semibold text-[#5a5a4e] mb-2">Lyon République</h3> <h3 className="font-semibold text-gray-900 mb-2">Lyon République</h3>
<p className="text-[#8a8a7a] text-sm mb-1"> <p className="text-gray-600 text-sm mb-1">
78 Rue de la République, 69002 Lyon 78 Rue de la République, 69002 Lyon
</p> </p>
<p className="text-sm text-[#8a8a7a]">04 12 34 56 78</p> <p className="text-sm text-gray-500">04 12 34 56 78</p>
</div> </div>
{/* Boutique 4 */} {/* Boutique 4 */}
<div> <div>
<h3 className="font-semibold text-[#5a5a4e] mb-2">Marseille Canebière</h3> <h3 className="font-semibold text-gray-900 mb-2">Marseille Canebière</h3>
<p className="text-[#8a8a7a] text-sm mb-1"> <p className="text-gray-600 text-sm mb-1">
32 La Canebière, 13001 Marseille 32 La Canebière, 13001 Marseille
</p> </p>
<p className="text-sm text-[#8a8a7a]">04 91 23 45 67</p> <p className="text-sm text-gray-500">04 91 23 45 67</p>
</div> </div>
</div> </div>
<div className="mt-6 pt-6 border-t border-[#e5e4dc]"> <div className="mt-6 pt-6 border-t border-gray-200">
<p className="text-xs text-[#8a8a7a] flex items-start gap-2"> <p className="text-xs text-gray-500 flex items-start gap-2">
<span>💡</span> <span>💡</span>
<span>Retrouvez toutes nos boutiques et leurs horaires sur notre site principal</span> <span>Retrouvez toutes nos boutiques et leurs horaires sur notre site principal</span>
</p> </p>
@ -314,17 +314,17 @@ export default function ContactPage() {
<section className="py-12"> <section className="py-12">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<div className="bg-gradient-to-r from-[#d4a574]/10 to-[#c4956a]/10 rounded-xl p-8 border-l-4 border-[#d4a574] shadow-lg"> <div className="bg-gradient-to-r from-yellow-50 to-yellow-100 rounded-xl p-8 border-l-4 border-yellow-500">
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<div className="w-16 h-16 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-3xl shadow-md flex-shrink-0">💡</div> <div className="text-3xl">💡</div>
<div className="flex-1"> <div className="flex-1">
<h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Avant de nous contacter</h3> <h3 className="text-xl font-bold text-gray-900 mb-2">Avant de nous contacter</h3>
<p className="text-[#5a5a4e] mb-4"> <p className="text-gray-700 mb-4">
Consultez notre FAQ, vous y trouverez peut-être la réponse à votre question ! Consultez notre FAQ, vous y trouverez peut-être la réponse à votre question !
</p> </p>
<Link <Link
href="/faq" href="/faq"
className="inline-flex items-center justify-center bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-3 rounded-lg transition-all duration-300 shadow-lg hover:scale-105" className="inline-flex items-center justify-center bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-6 py-3 rounded-lg transition-all"
> >
Voir la FAQ Voir la FAQ
</Link> </Link>

52
app/faq/FAQContent.tsx
View File

@ -63,14 +63,14 @@ const faqData: FAQ[] = [
]; ];
const categories = [ const categories = [
{ name: "Participation", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" }, { name: "Participation", color: "bg-green-100 text-green-700" },
{ name: "Codes", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" }, { name: "Codes", color: "bg-blue-100 text-blue-700" },
{ name: "Compte", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" }, { name: "Compte", color: "bg-purple-100 text-purple-700" },
{ name: "Délais", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" }, { name: "Délais", color: "bg-orange-100 text-orange-700" },
{ name: "Retrait", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" }, { name: "Retrait", color: "bg-teal-100 text-teal-700" },
{ name: "Tirage final", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" }, { name: "Tirage final", color: "bg-yellow-100 text-yellow-700" },
{ name: "Données", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" }, { name: "Données", color: "bg-pink-100 text-pink-700" },
{ name: "Technique", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" }, { name: "Technique", color: "bg-gray-100 text-gray-700" },
]; ];
export default function FAQContent() { export default function FAQContent() {
@ -96,15 +96,15 @@ export default function FAQContent() {
}; };
return ( return (
<div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]"> <div className="min-h-screen bg-gray-50">
{/* Hero Section */} {/* Hero Section */}
<section className="bg-gradient-to-r from-white to-[#faf9f5] py-12 border-b-2 border-[#e5e4dc]"> <section className="bg-white py-12">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<h1 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] mb-4"> <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
Questions fréquentes Questions fréquentes
</h1> </h1>
<p className="text-lg text-[#8a8a7a]"> <p className="text-lg text-gray-600">
Trouvez rapidement les réponses à vos questions sur notre jeu-concours Thé Tip Top. Trouvez rapidement les réponses à vos questions sur notre jeu-concours Thé Tip Top.
</p> </p>
</div> </div>
@ -121,10 +121,10 @@ export default function FAQContent() {
placeholder="Rechercher une question..." placeholder="Rechercher une question..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="w-full px-4 py-3 pl-12 border-2 border-[#e5e4dc] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-[#d4a574] bg-white shadow-sm" className="w-full px-4 py-3 pl-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent"
/> />
<svg <svg
className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-[#8a8a7a]" className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -152,10 +152,10 @@ export default function FAQContent() {
onClick={() => setSelectedCategory( onClick={() => setSelectedCategory(
selectedCategory === category.name ? null : category.name selectedCategory === category.name ? null : category.name
)} )}
className={`px-4 py-2 rounded-full text-sm font-semibold transition-all ${ className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
selectedCategory === category.name selectedCategory === category.name
? 'bg-gradient-to-r from-[#d4a574] to-[#c4956a] text-white shadow-lg ring-2 ring-offset-2 ring-[#d4a574]' ? category.color + ' ring-2 ring-offset-2 ring-green-500'
: category.color + ' hover:shadow-md border border-[#d4a574]/30' : category.color + ' hover:opacity-80'
}`} }`}
> >
{category.name} {category.name}
@ -171,15 +171,15 @@ export default function FAQContent() {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto space-y-3"> <div className="max-w-4xl mx-auto space-y-3">
{filteredFAQs.length === 0 ? ( {filteredFAQs.length === 0 ? (
<div className="bg-white rounded-xl shadow-md p-8 text-center text-[#8a8a7a] border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md p-8 text-center text-gray-500">
Aucune question ne correspond à votre recherche. Aucune question ne correspond à votre recherche.
</div> </div>
) : ( ) : (
filteredFAQs.map((faq, index) => ( filteredFAQs.map((faq, index) => (
<div key={index} className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]"> <div key={index} className="bg-white rounded-xl shadow-md overflow-hidden">
<button <button
onClick={() => toggleQuestion(index)} onClick={() => toggleQuestion(index)}
className="w-full flex items-start justify-between p-6 text-left hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors" className="w-full flex items-start justify-between p-6 text-left hover:bg-gray-50 transition-colors"
> >
<div className="flex-1 pr-4"> <div className="flex-1 pr-4">
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-2">
@ -187,10 +187,10 @@ export default function FAQContent() {
{faq.category} {faq.category}
</span> </span>
</div> </div>
<h3 className="text-lg font-semibold text-[#5a5a4e]">{faq.question}</h3> <h3 className="text-lg font-semibold text-gray-900">{faq.question}</h3>
</div> </div>
<svg <svg
className={`w-6 h-6 text-[#8a8a7a] flex-shrink-0 transition-transform ${ className={`w-6 h-6 text-gray-500 flex-shrink-0 transition-transform ${
openQuestion === index ? 'rotate-180' : '' openQuestion === index ? 'rotate-180' : ''
}`} }`}
fill="none" fill="none"
@ -201,7 +201,7 @@ export default function FAQContent() {
</svg> </svg>
</button> </button>
{openQuestion === index && ( {openQuestion === index && (
<div className="px-6 pb-6 text-[#5a5a4e] leading-relaxed"> <div className="px-6 pb-6 text-gray-700 leading-relaxed">
{faq.answer} {faq.answer}
</div> </div>
)} )}
@ -216,7 +216,7 @@ export default function FAQContent() {
<section className="pb-16"> <section className="pb-16">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<div className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] rounded-2xl shadow-2xl p-12 text-center text-white border-2 border-[#e5e4dc]"> <div className="bg-gradient-to-br from-[#1a4d2e] via-[#2d5a3d] to-[#1a4d2e] rounded-xl p-8 text-center text-white">
<h2 className="text-2xl md:text-3xl font-bold mb-4"> <h2 className="text-2xl md:text-3xl font-bold mb-4">
Vous ne trouvez pas votre réponse ? Vous ne trouvez pas votre réponse ?
</h2> </h2>
@ -226,13 +226,13 @@ export default function FAQContent() {
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <div className="flex flex-col sm:flex-row gap-4 justify-center">
<a <a
href="mailto:support@thetiptop.com" href="mailto:support@thetiptop.com"
className="inline-flex items-center justify-center gap-2 bg-white text-[#d4a574] hover:bg-[#f5f5f0] font-bold px-8 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300" className="inline-flex items-center justify-center gap-2 bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-8 py-3 rounded-lg transition-all"
> >
✉️ support@thetiptop.com ✉️ support@thetiptop.com
</a> </a>
<Link <Link
href="/contact" href="/contact"
className="inline-flex items-center justify-center bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white font-bold px-8 py-3 rounded-lg transition-all border-2 border-white/30 hover:border-white/50" className="inline-flex items-center justify-center bg-white hover:bg-gray-100 text-[#1a4d2e] font-bold px-8 py-3 rounded-lg transition-all"
> >
Formulaire de contact Formulaire de contact
</Link> </Link>

82
app/historique/page.tsx
View File

@ -103,37 +103,37 @@ export default function HistoriquePage() {
}; };
return ( return (
<div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-8"> <div className="min-h-screen bg-gray-50 py-8">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="mb-8"> <div className="mb-8">
<h1 className="text-4xl font-bold text-[#5a5a4e] mb-2 flex items-center gap-3"> <h1 className="text-4xl font-bold text-gray-900 mb-2 flex items-center gap-3">
<Calendar className="w-10 h-10 text-[#d4a574]" /> <Calendar className="w-10 h-10 text-[#1a4d2e]" />
Historique de mes participations Historique de mes participations
</h1> </h1>
<p className="text-[#8a8a7a]"> <p className="text-gray-600">
Consultez l'historique complet de vos participations et gains Consultez l'historique complet de vos participations et gains
</p> </p>
</div> </div>
<div className="grid md:grid-cols-4 gap-6 mb-8"> <div className="grid md:grid-cols-4 gap-6 mb-8">
<div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md p-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<p className="text-sm font-medium text-[#8a8a7a] mb-2">Total</p> <p className="text-sm font-medium text-gray-600 mb-2">Total</p>
<p className="text-4xl font-bold text-blue-600">{stats.total}</p> <p className="text-4xl font-bold text-blue-600">{stats.total}</p>
</div> </div>
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center"> <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
<svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg> </svg>
</div> </div>
</div> </div>
</div> </div>
<div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md p-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<p className="text-sm font-medium text-[#8a8a7a] mb-2">Réclamés</p> <p className="text-sm font-medium text-gray-600 mb-2">Réclamés</p>
<p className="text-4xl font-bold text-green-600">{stats.claimed}</p> <p className="text-4xl font-bold text-green-600">{stats.claimed}</p>
</div> </div>
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center"> <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
@ -144,10 +144,10 @@ export default function HistoriquePage() {
</div> </div>
</div> </div>
<div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md p-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<p className="text-sm font-medium text-[#8a8a7a] mb-2">En attente</p> <p className="text-sm font-medium text-gray-600 mb-2">En attente</p>
<p className="text-4xl font-bold text-yellow-600">{stats.pending}</p> <p className="text-4xl font-bold text-yellow-600">{stats.pending}</p>
</div> </div>
<div className="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center"> <div className="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center">
@ -158,10 +158,10 @@ export default function HistoriquePage() {
</div> </div>
</div> </div>
<div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md p-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<p className="text-sm font-medium text-[#8a8a7a] mb-2">Rejetés</p> <p className="text-sm font-medium text-gray-600 mb-2">Rejetés</p>
<p className="text-4xl font-bold text-red-600">{stats.rejected}</p> <p className="text-4xl font-bold text-red-600">{stats.rejected}</p>
</div> </div>
<div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center"> <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center">
@ -173,17 +173,17 @@ export default function HistoriquePage() {
</div> </div>
</div> </div>
<div className="bg-white rounded-xl shadow-md p-6 mb-6 border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md p-6 mb-6">
<div className="flex flex-col md:flex-row gap-4"> <div className="flex flex-col md:flex-row gap-4">
<div className="flex-1"> <div className="flex-1">
<div className="relative"> <div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#8a8a7a] w-5 h-5" /> <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
<input <input
type="text" type="text"
placeholder="Rechercher par code ticket..." placeholder="Rechercher par code ticket..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="w-full pl-10 pr-4 py-3 border-2 border-[#e5e4dc] rounded-lg focus:ring-2 focus:ring-[#d4a574] focus:border-[#d4a574] focus:outline-none" className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent"
/> />
</div> </div>
</div> </div>
@ -193,8 +193,8 @@ export default function HistoriquePage() {
onClick={() => setFilter('ALL')} onClick={() => setFilter('ALL')}
className={`px-4 py-2 rounded-lg font-semibold transition-all ${ className={`px-4 py-2 rounded-lg font-semibold transition-all ${
filter === 'ALL' filter === 'ALL'
? 'bg-gradient-to-r from-[#d4a574] to-[#c4956a] text-white shadow-lg' ? 'bg-[#1a4d2e] text-white'
: 'bg-[#f5f5f0] text-[#5a5a4e] hover:bg-[#e5e4dc]' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
}`} }`}
> >
Tous ({tickets.length}) Tous ({tickets.length})
@ -203,8 +203,8 @@ export default function HistoriquePage() {
onClick={() => setFilter('CLAIMED')} onClick={() => setFilter('CLAIMED')}
className={`px-4 py-2 rounded-lg font-semibold transition-all ${ className={`px-4 py-2 rounded-lg font-semibold transition-all ${
filter === 'CLAIMED' filter === 'CLAIMED'
? 'bg-green-600 text-white shadow-lg' ? 'bg-green-600 text-white'
: 'bg-[#f5f5f0] text-[#5a5a4e] hover:bg-[#e5e4dc]' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
}`} }`}
> >
Réclamés ({stats.claimed}) Réclamés ({stats.claimed})
@ -213,8 +213,8 @@ export default function HistoriquePage() {
onClick={() => setFilter('PENDING')} onClick={() => setFilter('PENDING')}
className={`px-4 py-2 rounded-lg font-semibold transition-all ${ className={`px-4 py-2 rounded-lg font-semibold transition-all ${
filter === 'PENDING' filter === 'PENDING'
? 'bg-yellow-600 text-white shadow-lg' ? 'bg-yellow-600 text-white'
: 'bg-[#f5f5f0] text-[#5a5a4e] hover:bg-[#e5e4dc]' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
}`} }`}
> >
En attente ({stats.pending}) En attente ({stats.pending})
@ -223,8 +223,8 @@ export default function HistoriquePage() {
onClick={() => setFilter('REJECTED')} onClick={() => setFilter('REJECTED')}
className={`px-4 py-2 rounded-lg font-semibold transition-all ${ className={`px-4 py-2 rounded-lg font-semibold transition-all ${
filter === 'REJECTED' filter === 'REJECTED'
? 'bg-red-600 text-white shadow-lg' ? 'bg-red-600 text-white'
: 'bg-[#f5f5f0] text-[#5a5a4e] hover:bg-[#e5e4dc]' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
}`} }`}
> >
Rejetés ({stats.rejected}) Rejetés ({stats.rejected})
@ -233,15 +233,15 @@ export default function HistoriquePage() {
</div> </div>
</div> </div>
<div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md overflow-hidden">
<div className="px-6 py-4 border-b border-[#e5e4dc]"> <div className="px-6 py-4 border-b border-gray-200">
<h2 className="text-xl font-bold text-[#5a5a4e]">Tous mes tickets ({filteredTickets.length})</h2> <h2 className="text-xl font-bold text-gray-900">Tous mes tickets ({filteredTickets.length})</h2>
</div> </div>
<div className="p-6"> <div className="p-6">
{filteredTickets.length === 0 ? ( {filteredTickets.length === 0 ? (
<div className="text-center py-12"> <div className="text-center py-12">
<div className="text-6xl mb-4">🎲</div> <div className="text-6xl mb-4">🎲</div>
<p className="text-[#8a8a7a] mb-4"> <p className="text-gray-600 mb-4">
{searchQuery || filter !== 'ALL' {searchQuery || filter !== 'ALL'
? 'Aucun ticket trouvé avec ces filtres' ? 'Aucun ticket trouvé avec ces filtres'
: 'Vous n\'avez pas encore participé au jeu'} : 'Vous n\'avez pas encore participé au jeu'}
@ -249,7 +249,7 @@ export default function HistoriquePage() {
{!searchQuery && filter === 'ALL' && ( {!searchQuery && filter === 'ALL' && (
<button <button
onClick={() => router.push(ROUTES.GAME)} onClick={() => router.push(ROUTES.GAME)}
className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300" className="bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-6 py-3 rounded-lg transition-all"
> >
Jouer maintenant Jouer maintenant
</button> </button>
@ -259,34 +259,34 @@ export default function HistoriquePage() {
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="min-w-full"> <table className="min-w-full">
<thead> <thead>
<tr className="border-b border-[#e5e4dc]"> <tr className="border-b border-gray-200">
<th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
Code Ticket Code Ticket
</th> </th>
<th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
Gain Gain
</th> </th>
<th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
Statut Statut
</th> </th>
<th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
Date de participation Date de participation
</th> </th>
<th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
Date de réclamation Date de réclamation
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-[#e5e4dc]"> <tbody className="divide-y divide-gray-200">
{filteredTickets.map((ticket) => { {filteredTickets.map((ticket) => {
const prizeConfig = ticket.prize const prizeConfig = ticket.prize
? PRIZE_CONFIG[ticket.prize.type as keyof typeof PRIZE_CONFIG] ? PRIZE_CONFIG[ticket.prize.type as keyof typeof PRIZE_CONFIG]
: null; : null;
return ( return (
<tr key={ticket.id} className="hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors"> <tr key={ticket.id} className="hover:bg-gray-50 transition-colors">
<td className="px-6 py-4 whitespace-nowrap"> <td className="px-6 py-4 whitespace-nowrap">
<span className="font-mono text-sm font-semibold text-[#5a5a4e]"> <span className="font-mono text-sm font-semibold text-gray-900">
{ticket.code} {ticket.code}
</span> </span>
</td> </td>
@ -322,7 +322,7 @@ export default function HistoriquePage() {
)} )}
</div> </div>
<div> <div>
<p className="text-sm font-medium text-[#5a5a4e]"> <p className="text-sm font-medium text-gray-900">
{prizeConfig.name} {prizeConfig.name}
</p> </p>
</div> </div>
@ -333,7 +333,7 @@ export default function HistoriquePage() {
<td className="px-6 py-4 whitespace-nowrap"> <td className="px-6 py-4 whitespace-nowrap">
{getStatusBadge(ticket.status)} {getStatusBadge(ticket.status)}
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-[#8a8a7a]"> <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
{ticket.playedAt {ticket.playedAt
? new Date(ticket.playedAt).toLocaleDateString("fr-FR", { ? new Date(ticket.playedAt).toLocaleDateString("fr-FR", {
day: 'numeric', day: 'numeric',
@ -344,7 +344,7 @@ export default function HistoriquePage() {
}) })
: "-"} : "-"}
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-[#8a8a7a]"> <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
{ticket.claimedAt {ticket.claimedAt
? new Date(ticket.claimedAt).toLocaleDateString("fr-FR", { ? new Date(ticket.claimedAt).toLocaleDateString("fr-FR", {
day: 'numeric', day: 'numeric',

36
app/jeux/page.tsx
View File

@ -110,28 +110,28 @@ export default function JeuxPage() {
: null; : null;
return ( return (
<div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-8"> <div className="min-h-screen bg-gray-50 py-8">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
{/* Formulaire Section */} {/* Formulaire Section */}
<section className="mb-16"> <section className="mb-16">
<div className="max-w-2xl mx-auto"> <div className="max-w-2xl mx-auto">
<div className="bg-white rounded-xl shadow-2xl overflow-hidden border-2 border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md overflow-hidden">
<div className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] px-6 py-6 shadow-lg"> <div className="bg-gradient-to-r from-[#1a4d2e] to-[#2d5a3d] px-6 py-6">
<h1 className="text-center text-3xl md:text-4xl font-bold text-white"> <h1 className="text-center text-3xl md:text-4xl font-bold text-white">
🎁 Jouez maintenant ! 🎁 Jouez maintenant !
</h1> </h1>
</div> </div>
<div className="p-8"> <div className="p-8">
<div className="mb-6 text-center"> <div className="mb-6 text-center">
<p className="text-[#5a5a4e] text-lg"> <p className="text-gray-700 text-lg">
Bonjour <span className="font-bold text-[#d4a574]">{user?.firstName}</span>, Bonjour <span className="font-bold text-[#1a4d2e]">{user?.firstName}</span>,
entrez le code de 10 caractères présent sur votre ticket de caisse entrez le code de 10 caractères présent sur votre ticket de caisse
</p> </p>
</div> </div>
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6"> <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
<div> <div>
<label htmlFor="ticketCode" className="block text-sm font-semibold text-[#5a5a4e] mb-2"> <label htmlFor="ticketCode" className="block text-sm font-semibold text-gray-700 mb-2">
Code du ticket Code du ticket
</label> </label>
<input <input
@ -139,14 +139,14 @@ export default function JeuxPage() {
type="text" type="text"
placeholder="TTP2025ABC" placeholder="TTP2025ABC"
{...register("ticketCode")} {...register("ticketCode")}
className="w-full px-6 py-4 text-center text-2xl font-mono font-bold uppercase border-2 border-[#e5e4dc] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-[#d4a574] tracking-widest bg-white shadow-inner" className="w-full px-6 py-4 text-center text-2xl font-mono font-bold uppercase border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent tracking-widest"
maxLength={10} maxLength={10}
/> />
{errors.ticketCode && ( {errors.ticketCode && (
<p className="mt-2 text-sm text-red-600">{errors.ticketCode.message}</p> <p className="mt-2 text-sm text-red-600">{errors.ticketCode.message}</p>
)} )}
{errorMessage && ( {errorMessage && (
<div className="mt-3 p-4 bg-red-50 border-l-4 border-red-500 rounded-lg shadow-md"> <div className="mt-3 p-4 bg-red-50 border border-red-200 rounded-lg">
<p className="text-sm text-red-800 font-medium mb-2"> <p className="text-sm text-red-800 font-medium mb-2">
❌ {errorMessage} ❌ {errorMessage}
</p> </p>
@ -158,7 +158,7 @@ export default function JeuxPage() {
</Link> </Link>
</div> </div>
)} )}
<p className="mt-2 text-sm text-[#8a8a7a] text-center"> <p className="mt-2 text-sm text-gray-500 text-center">
Format: TTP2025ABC (10 caractères) Format: TTP2025ABC (10 caractères)
</p> </p>
</div> </div>
@ -167,20 +167,20 @@ export default function JeuxPage() {
<button <button
type="submit" type="submit"
disabled={isPlaying} disabled={isPlaying}
className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] disabled:from-gray-400 disabled:to-gray-500 text-white font-bold px-12 py-4 text-lg rounded-lg transition-all duration-300 shadow-lg hover:shadow-[0_0_20px_rgba(212,165,116,0.6)] hover:scale-105" className="bg-[#f59e0b] hover:bg-[#d97706] disabled:bg-gray-400 text-white font-bold px-12 py-4 text-lg rounded-lg transition-all shadow-lg hover:shadow-xl"
> >
{isPlaying ? "Vérification en cours..." : "🎲 Tenter ma chance !"} {isPlaying ? "Vérification en cours..." : "🎲 Tenter ma chance !"}
</button> </button>
</div> </div>
</form> </form>
<div className="mt-6 p-4 bg-gradient-to-r from-[#d4a574]/10 to-[#c4956a]/10 border-l-4 border-[#d4a574] rounded-lg shadow-md"> <div className="mt-6 p-4 bg-blue-50 border-l-4 border-blue-500 rounded-lg">
<p className="text-sm text-[#5a5a4e] font-semibold mb-2"> <p className="text-sm text-blue-800 font-semibold mb-2">
💡 Bon à savoir : 💡 Bon à savoir :
</p> </p>
<ul className="text-sm text-[#5a5a4e] space-y-1 list-disc list-inside"> <ul className="text-sm text-blue-700 space-y-1 list-disc list-inside">
<li>Chaque code ne peut être utilisé qu'une seule fois</li> <li>Chaque code ne peut être utilisé qu'une seule fois</li>
<li>Consultez vos tickets sur la page <Link href={ROUTES.HISTORY} className="underline font-medium hover:text-[#d4a574] transition-colors">Mes gains</Link></li> <li>Consultez vos tickets sur la page <Link href={ROUTES.HISTORY} className="underline font-medium hover:text-blue-900">Mes gains</Link></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -260,8 +260,8 @@ export default function JeuxPage() {
</div> </div>
{/* Loading Animation */} {/* Loading Animation */}
<div className="flex items-center gap-2 text-[#5a5a4e]"> <div className="flex items-center gap-2 text-gray-600">
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-[#d4a574]"></div> <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-[#1a4d2e]"></div>
<span className="font-medium">Tirage en cours...</span> <span className="font-medium">Tirage en cours...</span>
</div> </div>
</div> </div>
@ -323,13 +323,13 @@ export default function JeuxPage() {
<div className="flex gap-3 justify-center"> <div className="flex gap-3 justify-center">
<button <button
onClick={closeModal} onClick={closeModal}
className="border-2 border-[#e5e4dc] hover:bg-[#f5f5f0] text-[#5a5a4e] font-bold px-6 py-3 rounded-lg transition-all" className="border-2 border-gray-300 hover:bg-gray-50 text-gray-700 font-bold px-6 py-3 rounded-lg transition-all"
> >
Fermer Fermer
</button> </button>
<button <button
onClick={() => router.push(ROUTES.HISTORY)} onClick={() => router.push(ROUTES.HISTORY)}
className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-3 rounded-lg transition-all duration-300 shadow-lg hover:shadow-[0_0_20px_rgba(212,165,116,0.6)]" className="bg-[#1a4d2e] hover:bg-[#2d5a3d] text-white font-bold px-6 py-3 rounded-lg transition-all"
> >
Voir mes gains Voir mes gains
</button> </button>

108
app/lots/page.tsx
View File

@ -8,15 +8,15 @@ export const metadata: Metadata = {
export default function LotsPage() { export default function LotsPage() {
return ( return (
<div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]"> <div className="min-h-screen bg-gray-50">
{/* Hero Section */} {/* Hero Section */}
<section className="bg-gradient-to-r from-white to-[#faf9f5] py-12 border-b-2 border-[#e5e4dc]"> <section className="bg-white py-12">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<h1 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] mb-4"> <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
Lots à gagner Lots à gagner
</h1> </h1>
<p className="text-lg text-[#8a8a7a]"> <p className="text-lg text-gray-600">
Découvrez tous les magnifiques prix de notre jeu-concours. Avec 100% de gagnants garantis, Découvrez tous les magnifiques prix de notre jeu-concours. Avec 100% de gagnants garantis,
chaque participant repart avec un lot ! chaque participant repart avec un lot !
</p> </p>
@ -28,7 +28,7 @@ export default function LotsPage() {
<section className="py-8"> <section className="py-8">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-5xl mx-auto"> <div className="max-w-5xl mx-auto">
<div className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] rounded-2xl p-8 shadow-2xl border-2 border-[#e5e4dc]"> <div className="bg-gradient-to-r from-yellow-100 to-yellow-200 rounded-2xl p-8 shadow-lg border-2 border-yellow-300">
<div className="flex flex-col md:flex-row items-center gap-6"> <div className="flex flex-col md:flex-row items-center gap-6">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<div className="w-32 h-32 bg-white rounded-lg flex items-center justify-center text-6xl shadow-md"> <div className="w-32 h-32 bg-white rounded-lg flex items-center justify-center text-6xl shadow-md">
@ -36,17 +36,17 @@ export default function LotsPage() {
</div> </div>
</div> </div>
<div className="flex-1 text-center md:text-left"> <div className="flex-1 text-center md:text-left">
<div className="inline-block bg-white text-[#d4a574] text-xs font-bold px-3 py-1 rounded-full mb-2 shadow-md"> <div className="inline-block bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full mb-2">
GRAND PRIX FINAL GRAND PRIX FINAL
</div> </div>
<h2 className="text-3xl md:text-4xl font-bold text-white mb-2"> <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-2">
1 an de thé offert 1 an de thé offert
</h2> </h2>
<p className="text-white/90 mb-3"> <p className="text-gray-700 mb-3">
Le grand prix du tirage final : une année complète de thé premium livré chez vous Le grand prix du tirage final : une année complète de thé premium livré chez vous
</p> </p>
<div className="text-2xl font-bold text-white"> <div className="text-2xl font-bold text-orange-600">
Valeur : 360€ <span className="text-sm text-white/80 font-normal">Tirage sous contrôle d'huissier</span> Valeur : 360€ <span className="text-sm text-gray-600 font-normal">Tirage sous contrôle d'huissier</span>
</div> </div>
</div> </div>
</div> </div>
@ -62,21 +62,21 @@ export default function LotsPage() {
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{/* Prize 1 - Infuseur */} {/* Prize 1 - Infuseur */}
<div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden">
<div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center"> <div className="aspect-square bg-gradient-to-br from-amber-50 to-orange-50 flex items-center justify-center">
<div className="text-8xl">🍵</div> <div className="text-8xl">🍵</div>
</div> </div>
<div className="p-6"> <div className="p-6">
<div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3"> <div className="inline-block bg-red-100 text-red-600 text-sm font-bold px-3 py-1 rounded-full mb-3">
60% des lots 60% des lots
</div> </div>
<h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Infuseur à thé premium</h3> <h3 className="text-xl font-bold text-gray-900 mb-2">Infuseur à thé premium</h3>
<p className="text-[#8a8a7a] text-sm mb-4"> <p className="text-gray-600 text-sm mb-4">
Un infuseur en acier inoxydable de haute qualité pour ressortir les arômes de vos thés en vrac Un infuseur en acier inoxydable de haute qualité pour ressortir les arômes de vos thés en vrac
</p> </p>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="text-2xl font-bold text-[#d4a574]">15€</div> <div className="text-2xl font-bold text-[#1a4d2e]">15€</div>
<button className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors"> <button className="text-[#1a4d2e] hover:text-[#f59e0b] transition-colors">
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> </svg>
@ -86,21 +86,21 @@ export default function LotsPage() {
</div> </div>
{/* Prize 2 - Thé détox */} {/* Prize 2 - Thé détox */}
<div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden">
<div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center"> <div className="aspect-square bg-gradient-to-br from-green-50 to-emerald-50 flex items-center justify-center">
<div className="text-8xl">📦</div> <div className="text-8xl">📦</div>
</div> </div>
<div className="p-6"> <div className="p-6">
<div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3"> <div className="inline-block bg-orange-100 text-orange-600 text-sm font-bold px-3 py-1 rounded-full mb-3">
20% des lots 20% des lots
</div> </div>
<h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Boîte 100g thé détox</h3> <h3 className="text-xl font-bold text-gray-900 mb-2">Boîte 100g thé détox</h3>
<p className="text-[#8a8a7a] text-sm mb-4"> <p className="text-gray-600 text-sm mb-4">
Mélange détox aux plantes bio : menthe, citronnelle, fenouil et gingembre Mélange détox aux plantes bio : menthe, citronnelle, fenouil et gingembre
</p> </p>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="text-2xl font-bold text-[#d4a574]">25€</div> <div className="text-2xl font-bold text-[#1a4d2e]">25€</div>
<button className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors"> <button className="text-[#1a4d2e] hover:text-[#f59e0b] transition-colors">
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> </svg>
@ -110,21 +110,21 @@ export default function LotsPage() {
</div> </div>
{/* Prize 3 - Thé signature */} {/* Prize 3 - Thé signature */}
<div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden">
<div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center"> <div className="aspect-square bg-gradient-to-br from-blue-50 to-cyan-50 flex items-center justify-center">
<div className="text-8xl">🌿</div> <div className="text-8xl">🌿</div>
</div> </div>
<div className="p-6"> <div className="p-6">
<div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3"> <div className="inline-block bg-green-100 text-green-600 text-sm font-bold px-3 py-1 rounded-full mb-3">
10% des lots 10% des lots
</div> </div>
<h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Boîte 100g thé signature</h3> <h3 className="text-xl font-bold text-gray-900 mb-2">Boîte 100g thé signature</h3>
<p className="text-[#8a8a7a] text-sm mb-4"> <p className="text-gray-600 text-sm mb-4">
Notre mélange signature exclusif : Earl Grey aux agrumes et pétales de fleurs Notre mélange signature exclusif : Earl Grey aux agrumes et pétales de fleurs
</p> </p>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="text-2xl font-bold text-[#d4a574]">35€</div> <div className="text-2xl font-bold text-[#1a4d2e]">35€</div>
<button className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors"> <button className="text-[#1a4d2e] hover:text-[#f59e0b] transition-colors">
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> </svg>
@ -134,21 +134,21 @@ export default function LotsPage() {
</div> </div>
{/* Prize 4 - Coffret 39€ */} {/* Prize 4 - Coffret 39€ */}
<div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden">
<div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center"> <div className="aspect-square bg-gradient-to-br from-purple-50 to-pink-50 flex items-center justify-center">
<div className="text-8xl">🎁</div> <div className="text-8xl">🎁</div>
</div> </div>
<div className="p-6"> <div className="p-6">
<div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3"> <div className="inline-block bg-purple-100 text-purple-600 text-sm font-bold px-3 py-1 rounded-full mb-3">
6% des lots 6% des lots
</div> </div>
<h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Coffret découverte 39€</h3> <h3 className="text-xl font-bold text-gray-900 mb-2">Coffret découverte 39€</h3>
<p className="text-[#8a8a7a] text-sm mb-4"> <p className="text-gray-600 text-sm mb-4">
Sélection de nos 3 thés premium dans un élégant coffret cadeau Sélection de nos 3 thés premium dans un élégant coffret cadeau
</p> </p>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="text-2xl font-bold text-[#d4a574]">39€</div> <div className="text-2xl font-bold text-[#1a4d2e]">39€</div>
<button className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors"> <button className="text-[#1a4d2e] hover:text-[#f59e0b] transition-colors">
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> </svg>
@ -158,21 +158,21 @@ export default function LotsPage() {
</div> </div>
{/* Prize 5 - Coffret 69€ */} {/* Prize 5 - Coffret 69€ */}
<div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden">
<div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center"> <div className="aspect-square bg-gradient-to-br from-amber-50 to-yellow-50 flex items-center justify-center">
<div className="text-8xl">🎁</div> <div className="text-8xl">🎁</div>
</div> </div>
<div className="p-6"> <div className="p-6">
<div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3"> <div className="inline-block bg-amber-100 text-amber-700 text-sm font-bold px-3 py-1 rounded-full mb-3">
4% des lots 4% des lots
</div> </div>
<h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Coffret prestige 69€</h3> <h3 className="text-xl font-bold text-gray-900 mb-2">Coffret prestige 69€</h3>
<p className="text-[#8a8a7a] text-sm mb-4"> <p className="text-gray-600 text-sm mb-4">
Collection premium : 5 thés d'exception avec accessoires dans un coffret luxe Collection premium : 5 thés d'exception avec accessoires dans un coffret luxe
</p> </p>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="text-2xl font-bold text-[#d4a574]">69€</div> <div className="text-2xl font-bold text-[#1a4d2e]">69€</div>
<button className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors"> <button className="text-[#1a4d2e] hover:text-[#f59e0b] transition-colors">
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> </svg>
@ -182,21 +182,21 @@ export default function LotsPage() {
</div> </div>
{/* Prize 6 - Tirage Final */} {/* Prize 6 - Tirage Final */}
<div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border-2 border-[#d4a574]"> <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border-2 border-[#f59e0b]">
<div className="aspect-square bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 flex items-center justify-center"> <div className="aspect-square bg-gradient-to-br from-yellow-50 to-amber-50 flex items-center justify-center">
<div className="text-8xl">🏆</div> <div className="text-8xl">🏆</div>
</div> </div>
<div className="p-6"> <div className="p-6">
<div className="inline-block bg-gradient-to-r from-[#d4a574] to-[#c4956a] text-white text-sm font-bold px-3 py-1 rounded-full mb-3 shadow-md"> <div className="inline-block bg-yellow-100 text-yellow-700 text-sm font-bold px-3 py-1 rounded-full mb-3">
1 an de THÉ 1 an de THÉ
</div> </div>
<h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Tirage Final</h3> <h3 className="text-xl font-bold text-gray-900 mb-2">Tirage Final</h3>
<p className="text-[#8a8a7a] text-sm mb-4"> <p className="text-gray-600 text-sm mb-4">
Valeur 360€ - Livraison mensuelle pendant 12 mois Valeur 360€ - Livraison mensuelle pendant 12 mois
</p> </p>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="text-2xl font-bold text-[#d4a574]">360€</div> <div className="text-2xl font-bold text-[#f59e0b]">360€</div>
<button className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors"> <button className="text-[#1a4d2e] hover:text-[#f59e0b] transition-colors">
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> </svg>
@ -213,7 +213,7 @@ export default function LotsPage() {
{/* CTA Section */} {/* CTA Section */}
<section className="py-16"> <section className="py-16">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto bg-gradient-to-r from-[#d4a574] to-[#c4956a] rounded-2xl shadow-2xl p-12 text-center text-white border-2 border-[#e5e4dc]"> <div className="max-w-4xl mx-auto bg-gradient-to-r from-[#1a4d2e] to-[#2d5a3d] rounded-2xl shadow-2xl p-12 text-center text-white">
<h2 className="text-3xl md:text-4xl font-bold mb-4"> <h2 className="text-3xl md:text-4xl font-bold mb-4">
Prêt à découvrir votre lot ? Prêt à découvrir votre lot ?
</h2> </h2>
@ -222,7 +222,7 @@ export default function LotsPage() {
tentez votre chance ! Avec 100% de gagnants, vous ne pouvez que gagner. tentez votre chance ! Avec 100% de gagnants, vous ne pouvez que gagner.
</p> </p>
<Link href="/register"> <Link href="/register">
<button className="bg-white text-[#d4a574] hover:bg-[#f5f5f0] font-bold text-lg px-12 py-4 rounded-lg shadow-xl transition-all duration-300 hover:scale-105"> <button className="bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold text-lg px-12 py-4 rounded-lg shadow-xl transition-all">
Participer maintenant Participer maintenant
</button> </button>
</Link> </Link>

41
app/privacy/page.tsx
View File

@ -7,19 +7,19 @@ export const metadata: Metadata = {
export default function PrivacyPage() { export default function PrivacyPage() {
return ( return (
<div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-12 px-4"> <div className="min-h-screen bg-gradient-to-b from-primary-50 to-white py-12 px-4">
<div className="max-w-4xl mx-auto bg-white rounded-xl shadow-lg border border-[#e5e4dc] p-8"> <div className="max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-8">
<h1 className="text-3xl font-bold text-[#5a5a4e] mb-6"> <h1 className="text-3xl font-bold text-gray-900 mb-6">
Politique de confidentialité Politique de confidentialité
</h1> </h1>
<p className="text-sm text-[#8a8a7a] mb-8"> <p className="text-sm text-gray-600 mb-8">
Dernière mise à jour : 17 janvier 2025 Dernière mise à jour : 17 janvier 2025
</p> </p>
<div className="space-y-6 text-[#5a5a4e]"> <div className="space-y-6 text-gray-700">
<section> <section>
<h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3"> <h2 className="text-2xl font-semibold text-gray-900 mb-3">
1. Introduction 1. Introduction
</h2> </h2>
<p> <p>
@ -30,12 +30,12 @@ export default function PrivacyPage() {
</section> </section>
<section> <section>
<h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3"> <h2 className="text-2xl font-semibold text-gray-900 mb-3">
2. Données collectées 2. Données collectées
</h2> </h2>
<p className="mb-2">Nous collectons les informations suivantes :</p> <p className="mb-2">Nous collectons les informations suivantes :</p>
<ul className="list-disc pl-6 space-y-2"> <ul className="list-disc pl-6 space-y-2">
<li>Informations d'identification : nom, prénom, adresse e-mail</li> <li>Informations d identification : nom, prénom, adresse e-mail</li>
<li>Informations de profil : photo de profil (si fournie via OAuth)</li> <li>Informations de profil : photo de profil (si fournie via OAuth)</li>
<li>Informations de connexion : via Google ou Facebook OAuth</li> <li>Informations de connexion : via Google ou Facebook OAuth</li>
<li>Données de participation : codes de tickets, gains remportés</li> <li>Données de participation : codes de tickets, gains remportés</li>
@ -44,7 +44,7 @@ export default function PrivacyPage() {
</section> </section>
<section> <section>
<h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3"> <h2 className="text-2xl font-semibold text-gray-900 mb-3">
3. Utilisation des données 3. Utilisation des données
</h2> </h2>
<p className="mb-2">Vos données sont utilisées pour :</p> <p className="mb-2">Vos données sont utilisées pour :</p>
@ -58,23 +58,23 @@ export default function PrivacyPage() {
</section> </section>
<section> <section>
<h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3"> <h2 className="text-2xl font-semibold text-gray-900 mb-3">
4. Vos droits (RGPD) 4. Vos droits (RGPD)
</h2> </h2>
<p className="mb-2">Conformément au RGPD, vous disposez des droits suivants :</p> <p className="mb-2">Conformément au RGPD, vous disposez des droits suivants :</p>
<ul className="list-disc pl-6 space-y-2"> <ul className="list-disc pl-6 space-y-2">
<li><strong>Droit d'accès :</strong> obtenir une copie de vos données</li> <li><strong>Droit d accès :</strong> obtenir une copie de vos données</li>
<li><strong>Droit de rectification :</strong> corriger vos données inexactes</li> <li><strong>Droit de rectification :</strong> corriger vos données inexactes</li>
<li><strong>Droit à l'effacement :</strong> demander la suppression de vos données</li> <li><strong>Droit à l effacement :</strong> demander la suppression de vos données</li>
<li><strong>Droit d'opposition :</strong> vous opposer au traitement de vos données</li> <li><strong>Droit d opposition :</strong> vous opposer au traitement de vos données</li>
</ul> </ul>
<p className="mt-3"> <p className="mt-3">
Pour exercer ces droits, contactez-nous à : <a href="mailto:privacy@thetiptop.fr" className="text-[#d4a574] hover:text-[#c4956a] transition-colors">privacy@thetiptop.fr</a> Pour exercer ces droits, contactez-nous à : <a href="mailto:privacy@thetiptop.fr" className="text-primary-600 hover:underline">privacy@thetiptop.fr</a>
</p> </p>
</section> </section>
<section> <section>
<h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3"> <h2 className="text-2xl font-semibold text-gray-900 mb-3">
5. Contact 5. Contact
</h2> </h2>
<p> <p>
@ -82,21 +82,18 @@ export default function PrivacyPage() {
vous pouvez nous contacter : vous pouvez nous contacter :
</p> </p>
<ul className="list-none space-y-2 mt-3"> <ul className="list-none space-y-2 mt-3">
<li><strong>Email :</strong> <a href="mailto:privacy@thetiptop.fr" className="text-[#d4a574] hover:text-[#c4956a] transition-colors">privacy@thetiptop.fr</a></li> <li><strong>Email :</strong> <a href="mailto:privacy@thetiptop.fr" className="text-primary-600 hover:underline">privacy@thetiptop.fr</a></li>
<li><strong>Adresse :</strong> 18 Avenue Thiers, 06000 Nice, France</li> <li><strong>Adresse :</strong> 18 Avenue Thiers, 06000 Nice, France</li>
</ul> </ul>
</section> </section>
</div> </div>
<div className="mt-8 pt-6 border-t border-[#e5e4dc]"> <div className="mt-8 pt-6 border-t border-gray-200">
<a <a
href="/" href="/"
className="inline-flex items-center gap-2 text-[#d4a574] hover:text-[#c4956a] font-medium transition-colors group" className="text-primary-600 hover:text-primary-700 font-medium"
> >
<svg className="w-5 h-5 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> ← Retour à l accueil
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
</svg>
Retour à l'accueil
</a> </a>
</div> </div>
</div> </div>

68
app/profil/page.tsx
View File

@ -95,48 +95,48 @@ export default function ProfilePage() {
}; };
return ( return (
<div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-8"> <div className="min-h-screen bg-gray-50 py-8">
<div className="container mx-auto px-4 max-w-4xl"> <div className="container mx-auto px-4 max-w-4xl">
<h1 className="text-4xl font-bold text-[#5a5a4e] mb-8">Mon profil</h1> <h1 className="text-4xl font-bold text-gray-900 mb-8">Mon profil</h1>
<div className="grid md:grid-cols-3 gap-6"> <div className="grid md:grid-cols-3 gap-6">
{/* Profile Info Card */} {/* Profile Info Card */}
<div className="md:col-span-2"> <div className="md:col-span-2">
<div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md overflow-hidden">
<div className="px-6 py-4 border-b border-[#e5e4dc]"> <div className="px-6 py-4 border-b border-gray-200">
<h2 className="text-xl font-bold text-[#5a5a4e]">Informations personnelles</h2> <h2 className="text-xl font-bold text-gray-900">Informations personnelles</h2>
</div> </div>
<div className="p-6"> <div className="p-6">
{!isEditing ? ( {!isEditing ? (
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<label className="text-sm font-medium text-[#8a8a7a]"> <label className="text-sm font-medium text-gray-500">
Prénom Prénom
</label> </label>
<p className="text-lg text-[#5a5a4e]">{user.firstName}</p> <p className="text-lg text-gray-900">{user.firstName}</p>
</div> </div>
<div> <div>
<label className="text-sm font-medium text-[#8a8a7a]"> <label className="text-sm font-medium text-gray-500">
Nom Nom
</label> </label>
<p className="text-lg text-[#5a5a4e]">{user.lastName}</p> <p className="text-lg text-gray-900">{user.lastName}</p>
</div> </div>
<div> <div>
<label className="text-sm font-medium text-[#8a8a7a]"> <label className="text-sm font-medium text-gray-500">
Email Email
</label> </label>
<p className="text-lg text-[#5a5a4e]">{user.email}</p> <p className="text-lg text-gray-900">{user.email}</p>
</div> </div>
<div> <div>
<label className="text-sm font-medium text-[#8a8a7a]"> <label className="text-sm font-medium text-gray-500">
Téléphone Téléphone
</label> </label>
<p className="text-lg text-[#5a5a4e]"> <p className="text-lg text-gray-900">
{user.phone || "Non renseigné"} {user.phone || "Non renseigné"}
</p> </p>
</div> </div>
<div> <div>
<label className="text-sm font-medium text-[#8a8a7a]"> <label className="text-sm font-medium text-gray-500">
Rôle Rôle
</label> </label>
<div className="mt-1"> <div className="mt-1">
@ -148,7 +148,7 @@ export default function ProfilePage() {
<div className="pt-4"> <div className="pt-4">
<button <button
onClick={() => setIsEditing(true)} onClick={() => setIsEditing(true)}
className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300" className="bg-[#1a4d2e] hover:bg-[#2d5a3d] text-white font-bold px-6 py-3 rounded-lg transition-all"
> >
Modifier mes informations Modifier mes informations
</button> </button>
@ -191,7 +191,7 @@ export default function ProfilePage() {
<button <button
type="submit" type="submit"
disabled={isSubmitting} disabled={isSubmitting}
className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] disabled:bg-gray-400 text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300" className="bg-[#1a4d2e] hover:bg-[#2d5a3d] disabled:bg-gray-400 text-white font-bold px-6 py-3 rounded-lg transition-all"
> >
{isSubmitting ? "Enregistrement..." : "Enregistrer"} {isSubmitting ? "Enregistrement..." : "Enregistrer"}
</button> </button>
@ -199,7 +199,7 @@ export default function ProfilePage() {
type="button" type="button"
onClick={handleCancel} onClick={handleCancel}
disabled={isSubmitting} disabled={isSubmitting}
className="border-2 border-[#e5e4dc] hover:bg-[#f5f5f0] text-[#5a5a4e] font-bold px-6 py-3 rounded-lg transition-all" className="border-2 border-gray-300 hover:bg-gray-50 text-gray-700 font-bold px-6 py-3 rounded-lg transition-all"
> >
Annuler Annuler
</button> </button>
@ -212,13 +212,13 @@ export default function ProfilePage() {
{/* Account Status Card */} {/* Account Status Card */}
<div> <div>
<div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md overflow-hidden">
<div className="px-6 py-4 border-b border-[#e5e4dc]"> <div className="px-6 py-4 border-b border-gray-200">
<h2 className="text-xl font-bold text-[#5a5a4e]">Statut du compte</h2> <h2 className="text-xl font-bold text-gray-900">Statut du compte</h2>
</div> </div>
<div className="p-6 space-y-4"> <div className="p-6 space-y-4">
<div> <div>
<label className="text-sm font-medium text-[#8a8a7a]"> <label className="text-sm font-medium text-gray-500">
Email vérifié Email vérifié
</label> </label>
<div className="mt-1"> <div className="mt-1">
@ -230,33 +230,41 @@ export default function ProfilePage() {
</div> </div>
</div> </div>
<div> <div>
<label className="text-sm font-medium text-[#8a8a7a]"> <label className="text-sm font-medium text-gray-500">
Membre depuis Membre depuis
</label> </label>
<p className="text-sm text-[#5a5a4e] mt-1"> <p className="text-sm text-gray-900 mt-1">
{formatDate(user.createdAt)} {formatDate(user.createdAt)}
</p> </p>
</div> </div>
<div>
<label className="text-sm font-medium text-gray-500">
Dernière modification
</label>
<p className="text-sm text-gray-900 mt-1">
{user.updatedAt ? formatDate(user.updatedAt) : 'N/A'}
</p>
</div>
</div> </div>
</div> </div>
{/* Quick Actions Card */} {/* Quick Actions Card */}
<div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc] mt-6"> <div className="bg-white rounded-xl shadow-md overflow-hidden mt-6">
<div className="px-6 py-4 border-b border-[#e5e4dc]"> <div className="px-6 py-4 border-b border-gray-200">
<h2 className="text-xl font-bold text-[#5a5a4e]">Actions rapides</h2> <h2 className="text-xl font-bold text-gray-900">Actions rapides</h2>
</div> </div>
<div className="p-6 space-y-2"> <div className="p-6 space-y-2">
{user.role === "CLIENT" && ( {user.role === "CLIENT" && (
<> <>
<button <button
onClick={() => router.push(ROUTES.GAME)} onClick={() => router.push(ROUTES.GAME)}
className="w-full bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300" className="w-full bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-6 py-3 rounded-lg transition-all"
> >
Jouer Jouer
</button> </button>
<button <button
onClick={() => router.push(ROUTES.HISTORY)} onClick={() => router.push(ROUTES.HISTORY)}
className="w-full border-2 border-[#d4a574] text-[#d4a574] hover:bg-[#d4a574] hover:text-white font-bold px-6 py-3 rounded-lg transition-all" className="w-full border-2 border-[#1a4d2e] text-[#1a4d2e] hover:bg-[#1a4d2e] hover:text-white font-bold px-6 py-3 rounded-lg transition-all"
> >
Historique Historique
</button> </button>
@ -265,7 +273,7 @@ export default function ProfilePage() {
{user.role === "EMPLOYEE" && ( {user.role === "EMPLOYEE" && (
<button <button
onClick={() => router.push(ROUTES.EMPLOYEE_DASHBOARD)} onClick={() => router.push(ROUTES.EMPLOYEE_DASHBOARD)}
className="w-full border-2 border-[#d4a574] text-[#d4a574] hover:bg-[#d4a574] hover:text-white font-bold px-6 py-3 rounded-lg transition-all" className="w-full border-2 border-[#1a4d2e] text-[#1a4d2e] hover:bg-[#1a4d2e] hover:text-white font-bold px-6 py-3 rounded-lg transition-all"
> >
Tableau de bord Tableau de bord
</button> </button>
@ -273,7 +281,7 @@ export default function ProfilePage() {
{user.role === "ADMIN" && ( {user.role === "ADMIN" && (
<button <button
onClick={() => router.push(ROUTES.ADMIN_DASHBOARD)} onClick={() => router.push(ROUTES.ADMIN_DASHBOARD)}
className="w-full border-2 border-[#d4a574] text-[#d4a574] hover:bg-[#d4a574] hover:text-white font-bold px-6 py-3 rounded-lg transition-all" className="w-full border-2 border-[#1a4d2e] text-[#1a4d2e] hover:bg-[#1a4d2e] hover:text-white font-bold px-6 py-3 rounded-lg transition-all"
> >
Administration Administration
</button> </button>

188
app/rules/page.tsx
View File

@ -11,15 +11,15 @@ export default function RulesPage() {
}; };
return ( return (
<div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]"> <div className="min-h-screen bg-gray-50">
{/* Hero Section */} {/* Hero Section */}
<section className="bg-gradient-to-r from-white to-[#faf9f5] py-12 border-b-2 border-[#e5e4dc]"> <section className="bg-white py-12">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<h1 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] mb-4"> <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
Règlement du jeu-concours Règlement du jeu-concours
</h1> </h1>
<p className="text-lg text-[#8a8a7a]"> <p className="text-lg text-gray-600">
Toutes les conditions de participation à notre grand jeu-concours "Thé Tip Top" Toutes les conditions de participation à notre grand jeu-concours "Thé Tip Top"
pour l'ouverture de notre 10e boutique. pour l'ouverture de notre 10e boutique.
</p> </p>
@ -31,36 +31,36 @@ export default function RulesPage() {
<section className="py-8"> <section className="py-8">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<div className="bg-white rounded-xl shadow-md p-6 mb-8 border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md p-6 mb-8">
<div className="flex items-center gap-2 mb-6"> <div className="flex items-center gap-2 mb-6">
<span className="text-2xl">📋</span> <span className="text-2xl">📋</span>
<h2 className="text-2xl font-bold text-[#5a5a4e]">Résumé du jeu-concours</h2> <h2 className="text-2xl font-bold text-gray-900">Résumé du jeu-concours</h2>
</div> </div>
<div className="grid md:grid-cols-3 gap-4"> <div className="grid md:grid-cols-3 gap-4">
{/* 100% gagnants */} {/* 100% gagnants */}
<div className="bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 rounded-lg p-6 text-center border border-[#d4a574]/20 hover:shadow-lg transition-shadow"> <div className="bg-red-50 rounded-lg p-6 text-center">
<div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-3xl shadow-lg">🎯</div> <div className="text-4xl mb-3">🎯</div>
<div className="text-2xl font-bold text-[#5a5a4e] mb-2">100% gagnants</div> <div className="text-2xl font-bold text-gray-900 mb-2">100% gagnants</div>
<p className="text-sm text-[#8a8a7a]"> <p className="text-sm text-gray-600">
Chaque participant repart avec un lot garanti Chaque participant repart avec un lot garanti
</p> </p>
</div> </div>
{/* 30 + 30 jours */} {/* 30 + 30 jours */}
<div className="bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 rounded-lg p-6 text-center border border-[#d4a574]/20 hover:shadow-lg transition-shadow"> <div className="bg-orange-50 rounded-lg p-6 text-center">
<div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-3xl shadow-lg">🔄</div> <div className="text-4xl mb-3">🔄</div>
<div className="text-2xl font-bold text-[#5a5a4e] mb-2">30 + 30 jours</div> <div className="text-2xl font-bold text-gray-900 mb-2">30 + 30 jours</div>
<p className="text-sm text-[#8a8a7a]"> <p className="text-sm text-gray-600">
Période de jeu + délai de réclamation Période de jeu + délai de réclamation
</p> </p>
</div> </div>
{/* Grand prix 360€ */} {/* Grand prix 360€ */}
<div className="bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 rounded-lg p-6 text-center border border-[#d4a574]/20 hover:shadow-lg transition-shadow"> <div className="bg-yellow-50 rounded-lg p-6 text-center">
<div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-3xl shadow-lg">🏆</div> <div className="text-4xl mb-3">🏆</div>
<div className="text-2xl font-bold text-[#5a5a4e] mb-2">Grand prix 360€</div> <div className="text-2xl font-bold text-gray-900 mb-2">Grand prix 360€</div>
<p className="text-sm text-[#8a8a7a]"> <p className="text-sm text-gray-600">
Tirage final sous contrôle d'huissier Tirage final sous contrôle d'huissier
</p> </p>
</div> </div>
@ -76,17 +76,17 @@ export default function RulesPage() {
<div className="max-w-4xl mx-auto space-y-4"> <div className="max-w-4xl mx-auto space-y-4">
{/* Section 1 - Conditions de participation */} {/* Section 1 - Conditions de participation */}
<div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md overflow-hidden">
<button <button
onClick={() => toggleSection(1)} onClick={() => toggleSection(1)}
className="w-full flex items-center justify-between p-6 text-left hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors" className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md">📋</div> <span className="text-2xl">📋</span>
<h3 className="text-xl font-bold text-[#5a5a4e]">1. Conditions de participation</h3> <h3 className="text-xl font-bold text-gray-900">1. Conditions de participation</h3>
</div> </div>
<svg <svg
className={`w-6 h-6 text-[#8a8a7a] transition-transform ${openSection === 1 ? 'rotate-180' : ''}`} className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 1 ? 'rotate-180' : ''}`}
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -95,7 +95,7 @@ export default function RulesPage() {
</svg> </svg>
</button> </button>
{openSection === 1 && ( {openSection === 1 && (
<div className="px-6 pb-6 space-y-4 text-[#5a5a4e]"> <div className="px-6 pb-6 space-y-4 text-gray-700">
<p>Le jeu est ouvert à toute personne physique majeure résidant en France métropolitaine.</p> <p>Le jeu est ouvert à toute personne physique majeure résidant en France métropolitaine.</p>
<p className="font-semibold">Sont exclus de la participation :</p> <p className="font-semibold">Sont exclus de la participation :</p>
<ul className="list-disc list-inside space-y-2 ml-4"> <ul className="list-disc list-inside space-y-2 ml-4">
@ -109,17 +109,17 @@ export default function RulesPage() {
</div> </div>
{/* Section 2 - Codes de participation */} {/* Section 2 - Codes de participation */}
<div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md overflow-hidden">
<button <button
onClick={() => toggleSection(2)} onClick={() => toggleSection(2)}
className="w-full flex items-center justify-between p-6 text-left hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors" className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md">🎫</div> <span className="text-2xl">🎫</span>
<h3 className="text-xl font-bold text-[#5a5a4e]">2. Codes de participation</h3> <h3 className="text-xl font-bold text-gray-900">2. Codes de participation</h3>
</div> </div>
<svg <svg
className={`w-6 h-6 text-[#8a8a7a] transition-transform ${openSection === 2 ? 'rotate-180' : ''}`} className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 2 ? 'rotate-180' : ''}`}
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -128,7 +128,7 @@ export default function RulesPage() {
</svg> </svg>
</button> </button>
{openSection === 2 && ( {openSection === 2 && (
<div className="px-6 pb-6 space-y-4 text-[#5a5a4e]"> <div className="px-6 pb-6 space-y-4 text-gray-700">
<p>Pour participer au jeu, le participant doit :</p> <p>Pour participer au jeu, le participant doit :</p>
<ol className="list-decimal list-inside space-y-2 ml-4"> <ol className="list-decimal list-inside space-y-2 ml-4">
<li>Effectuer un achat de minimum 49€ dans une boutique Thé Tip Top participante</li> <li>Effectuer un achat de minimum 49€ dans une boutique Thé Tip Top participante</li>
@ -138,26 +138,26 @@ export default function RulesPage() {
<li>Saisir le code figurant sur son ticket dans l'espace dédié</li> <li>Saisir le code figurant sur son ticket dans l'espace dédié</li>
<li>Découvrir instantanément son gain</li> <li>Découvrir instantanément son gain</li>
</ol> </ol>
<div className="bg-gradient-to-r from-[#d4a574]/10 to-[#c4956a]/10 border-l-4 border-[#d4a574] p-4 mt-4 rounded"> <div className="bg-amber-50 border-l-4 border-amber-500 p-4 mt-4">
<p className="font-semibold text-[#5a5a4e]">⚠️ Important</p> <p className="font-semibold text-amber-900">⚠️ Important</p>
<p className="text-[#5a5a4e]">Chaque code ne peut être utilisé qu'une seule fois. Toute tentative de fraude entraînera l'exclusion du participant.</p> <p className="text-amber-800">Chaque code ne peut être utilisé qu'une seule fois. Toute tentative de fraude entraînera l'exclusion du participant.</p>
</div> </div>
</div> </div>
)} )}
</div> </div>
{/* Section 3 - Calendrier et délais */} {/* Section 3 - Calendrier et délais */}
<div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md overflow-hidden">
<button <button
onClick={() => toggleSection(3)} onClick={() => toggleSection(3)}
className="w-full flex items-center justify-between p-6 text-left hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors" className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md">📅</div> <span className="text-2xl">📅</span>
<h3 className="text-xl font-bold text-[#5a5a4e]">3. Calendrier et délais</h3> <h3 className="text-xl font-bold text-gray-900">3. Calendrier et délais</h3>
</div> </div>
<svg <svg
className={`w-6 h-6 text-[#8a8a7a] transition-transform ${openSection === 3 ? 'rotate-180' : ''}`} className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 3 ? 'rotate-180' : ''}`}
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -166,7 +166,7 @@ export default function RulesPage() {
</svg> </svg>
</button> </button>
{openSection === 3 && ( {openSection === 3 && (
<div className="px-6 pb-6 space-y-4 text-[#5a5a4e]"> <div className="px-6 pb-6 space-y-4 text-gray-700">
<div> <div>
<p className="font-semibold mb-2">📍 Période de participation</p> <p className="font-semibold mb-2">📍 Période de participation</p>
<p>Du 1er janvier 2025 à 00h00 au 31 janvier 2025 à 23h59 (heure de Paris)</p> <p>Du 1er janvier 2025 à 00h00 au 31 janvier 2025 à 23h59 (heure de Paris)</p>
@ -179,26 +179,26 @@ export default function RulesPage() {
<p className="font-semibold mb-2">📍 Tirage final</p> <p className="font-semibold mb-2">📍 Tirage final</p>
<p>Le tirage au sort pour le grand prix (1 an de thé - 360€) aura lieu le 15 février 2025 sous contrôle d'huissier de justice</p> <p>Le tirage au sort pour le grand prix (1 an de thé - 360€) aura lieu le 15 février 2025 sous contrôle d'huissier de justice</p>
</div> </div>
<div className="bg-gradient-to-r from-[#d4a574]/10 to-[#c4956a]/10 border-l-4 border-[#d4a574] p-4 mt-4 rounded"> <div className="bg-green-50 border-l-4 border-green-500 p-4 mt-4">
<p className="font-semibold text-[#5a5a4e]">✓ À retenir</p> <p className="font-semibold text-green-900">✓ À retenir</p>
<p className="text-[#5a5a4e]">Seules les participations enregistrées pendant la période officielle seront prises en compte.</p> <p className="text-green-800">Seules les participations enregistrées pendant la période officielle seront prises en compte.</p>
</div> </div>
</div> </div>
)} )}
</div> </div>
{/* Section 4 - Tirage final Grand Prix */} {/* Section 4 - Tirage final Grand Prix */}
<div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md overflow-hidden">
<button <button
onClick={() => toggleSection(4)} onClick={() => toggleSection(4)}
className="w-full flex items-center justify-between p-6 text-left hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors" className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md">🏆</div> <span className="text-2xl">🏆</span>
<h3 className="text-xl font-bold text-[#5a5a4e]">4. Tirage final - Grand Prix</h3> <h3 className="text-xl font-bold text-gray-900">4. Tirage final - Grand Prix</h3>
</div> </div>
<svg <svg
className={`w-6 h-6 text-[#8a8a7a] transition-transform ${openSection === 4 ? 'rotate-180' : ''}`} className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 4 ? 'rotate-180' : ''}`}
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -207,7 +207,7 @@ export default function RulesPage() {
</svg> </svg>
</button> </button>
{openSection === 4 && ( {openSection === 4 && (
<div className="px-6 pb-6 space-y-4 text-[#5a5a4e]"> <div className="px-6 pb-6 space-y-4 text-gray-700">
<p className="font-semibold text-xl">Grand Prix : 1 an de thé offert (valeur 360€)</p> <p className="font-semibold text-xl">Grand Prix : 1 an de thé offert (valeur 360€)</p>
<p>À l'issue de la période de participation, un tirage au sort sera organisé pour désigner le grand gagnant du prix principal.</p> <p>À l'issue de la période de participation, un tirage au sort sera organisé pour désigner le grand gagnant du prix principal.</p>
<div> <div>
@ -223,26 +223,26 @@ export default function RulesPage() {
<p className="font-semibold mb-2">Le lot :</p> <p className="font-semibold mb-2">Le lot :</p>
<p>Le gagnant recevra pendant 12 mois consécutifs une livraison mensuelle de thé d'une valeur de 30€, soit un total de 360€.</p> <p>Le gagnant recevra pendant 12 mois consécutifs une livraison mensuelle de thé d'une valeur de 30€, soit un total de 360€.</p>
</div> </div>
<div className="bg-gradient-to-r from-[#d4a574]/10 to-[#c4956a]/10 border-l-4 border-[#d4a574] p-4 mt-4 rounded"> <div className="bg-yellow-50 border-l-4 border-yellow-500 p-4 mt-4">
<p className="font-semibold text-[#5a5a4e]">🎁 Information</p> <p className="font-semibold text-yellow-900">🎁 Information</p>
<p className="text-[#5a5a4e]">Le gagnant sera contacté par email et par téléphone dans les 48h suivant le tirage.</p> <p className="text-yellow-800">Le gagnant sera contacté par email et par téléphone dans les 48h suivant le tirage.</p>
</div> </div>
</div> </div>
)} )}
</div> </div>
{/* Section 5 - Retrait des lots */} {/* Section 5 - Retrait des lots */}
<div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md overflow-hidden">
<button <button
onClick={() => toggleSection(5)} onClick={() => toggleSection(5)}
className="w-full flex items-center justify-between p-6 text-left hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors" className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md">🎁</div> <span className="text-2xl">🎁</span>
<h3 className="text-xl font-bold text-[#5a5a4e]">5. Retrait des lots</h3> <h3 className="text-xl font-bold text-gray-900">5. Retrait des lots</h3>
</div> </div>
<svg <svg
className={`w-6 h-6 text-[#8a8a7a] transition-transform ${openSection === 5 ? 'rotate-180' : ''}`} className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 5 ? 'rotate-180' : ''}`}
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -251,7 +251,7 @@ export default function RulesPage() {
</svg> </svg>
</button> </button>
{openSection === 5 && ( {openSection === 5 && (
<div className="px-6 pb-6 space-y-4 text-[#5a5a4e]"> <div className="px-6 pb-6 space-y-4 text-gray-700">
<p>Les lots doivent être réclamés dans un délai de <strong>30 jours</strong> à compter de la date de participation.</p> <p>Les lots doivent être réclamés dans un délai de <strong>30 jours</strong> à compter de la date de participation.</p>
<div> <div>
<p className="font-semibold mb-2">Modalités de remise :</p> <p className="font-semibold mb-2">Modalités de remise :</p>
@ -261,7 +261,7 @@ export default function RulesPage() {
<li><strong>Grand prix (1 an de thé) :</strong> Livraison mensuelle à l'adresse de votre choix</li> <li><strong>Grand prix (1 an de thé) :</strong> Livraison mensuelle à l'adresse de votre choix</li>
</ul> </ul>
</div> </div>
<div className="bg-red-50 border-l-4 border-red-500 p-4 mt-4 rounded"> <div className="bg-red-50 border-l-4 border-red-500 p-4 mt-4">
<p className="font-semibold text-red-900">⚠️ Attention</p> <p className="font-semibold text-red-900">⚠️ Attention</p>
<p className="text-red-800">Les lots non réclamés dans le délai imparti seront considérés comme abandonnés. Aucun lot ne peut être échangé, remboursé ou converti en espèces.</p> <p className="text-red-800">Les lots non réclamés dans le délai imparti seront considérés comme abandonnés. Aucun lot ne peut être échangé, remboursé ou converti en espèces.</p>
</div> </div>
@ -270,17 +270,17 @@ export default function RulesPage() {
</div> </div>
{/* Section 6 - Protection des données */} {/* Section 6 - Protection des données */}
<div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md overflow-hidden">
<button <button
onClick={() => toggleSection(6)} onClick={() => toggleSection(6)}
className="w-full flex items-center justify-between p-6 text-left hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors" className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md">🔒</div> <span className="text-2xl">🔒</span>
<h3 className="text-xl font-bold text-[#5a5a4e]">6. Protection des données personnelles</h3> <h3 className="text-xl font-bold text-gray-900">6. Protection des données personnelles</h3>
</div> </div>
<svg <svg
className={`w-6 h-6 text-[#8a8a7a] transition-transform ${openSection === 6 ? 'rotate-180' : ''}`} className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 6 ? 'rotate-180' : ''}`}
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -289,7 +289,7 @@ export default function RulesPage() {
</svg> </svg>
</button> </button>
{openSection === 6 && ( {openSection === 6 && (
<div className="px-6 pb-6 space-y-4 text-[#5a5a4e]"> <div className="px-6 pb-6 space-y-4 text-gray-700">
<p>Les données personnelles collectées dans le cadre du jeu font l'objet d'un traitement informatique destiné à gérer la participation au jeu et l'attribution des lots.</p> <p>Les données personnelles collectées dans le cadre du jeu font l'objet d'un traitement informatique destiné à gérer la participation au jeu et l'attribution des lots.</p>
<div> <div>
<p className="font-semibold mb-2">Vos droits :</p> <p className="font-semibold mb-2">Vos droits :</p>
@ -301,8 +301,8 @@ export default function RulesPage() {
<li>Droit à la portabilité des données</li> <li>Droit à la portabilité des données</li>
</ul> </ul>
</div> </div>
<p>Pour exercer vos droits, contactez-nous à : <a href="mailto:contact@thetiptop.fr" className="text-[#d4a574] underline hover:text-[#c4956a]">contact@thetiptop.fr</a></p> <p>Pour exercer vos droits, contactez-nous à : <a href="mailto:contact@thetiptop.fr" className="text-[#1a4d2e] underline hover:text-[#f59e0b]">contact@thetiptop.fr</a></p>
<p>Pour plus d'informations, consultez notre <a href="/privacy" className="text-[#d4a574] underline hover:text-[#c4956a]">Politique de confidentialité</a>.</p> <p>Pour plus d'informations, consultez notre <a href="/privacy" className="text-[#1a4d2e] underline hover:text-[#f59e0b]">Politique de confidentialité</a>.</p>
</div> </div>
)} )}
</div> </div>
@ -312,58 +312,36 @@ export default function RulesPage() {
</section> </section>
{/* Informations légales Section */} {/* Informations légales Section */}
<section className="py-16 bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]"> <section className="py-12 bg-gradient-to-br from-[#1a4d2e] via-[#2d5a3d] to-[#1a4d2e]">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-5xl mx-auto"> <div className="max-w-4xl mx-auto">
<div className="text-center mb-8"> <div className="bg-white/10 backdrop-blur-sm rounded-xl p-8 text-white">
<h2 className="text-3xl font-bold text-[#5a5a4e] mb-2">Informations légales</h2> <h2 className="text-2xl font-bold mb-6">Informations légales</h2>
<p className="text-[#8a8a7a]">Détails officiels du jeu-concours</p>
</div>
<div className="grid md:grid-cols-2 gap-6 mb-6"> <div className="grid md:grid-cols-2 gap-8">
{/* Organisateur */} <div>
<div className="bg-white rounded-xl shadow-lg p-6 border-2 border-[#e5e4dc] hover:shadow-xl transition-shadow"> <h3 className="font-semibold mb-3 text-[#f59e0b]">Organisateur</h3>
<div className="flex items-center gap-3 mb-4"> <p className="text-sm">Thé Tip Top</p>
<div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center shadow-md">
<span className="text-xl">🏢</span>
</div>
<h3 className="text-xl font-bold text-[#5a5a4e]">Organisateur</h3>
</div>
<div className="space-y-2 text-[#5a5a4e]">
<p className="font-semibold">Thé Tip Top</p>
<p className="text-sm">18 Avenue des Thés</p> <p className="text-sm">18 Avenue des Thés</p>
<p className="text-sm">75001 Paris, France</p> <p className="text-sm">75001 Paris, France</p>
<p className="text-sm text-[#8a8a7a]">SIRET: 12345678901234</p> <p className="text-sm">SIRET: 12345678901234</p>
</div> </div>
</div>
{/* Huissier */} <div>
<div className="bg-white rounded-xl shadow-lg p-6 border-2 border-[#e5e4dc] hover:shadow-xl transition-shadow"> <h3 className="font-semibold mb-3 text-[#f59e0b]">Huissier</h3>
<div className="flex items-center gap-3 mb-4"> <p className="text-sm">Maître Dupont</p>
<div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center shadow-md">
<span className="text-xl">⚖️</span>
</div>
<h3 className="text-xl font-bold text-[#5a5a4e]">Huissier</h3>
</div>
<div className="space-y-2 text-[#5a5a4e]">
<p className="font-semibold">Maître Dupont</p>
<p className="text-sm">Office Notarial de Paris</p> <p className="text-sm">Office Notarial de Paris</p>
<p className="text-sm">456 Rue de la Justice</p> <p className="text-sm">456 Rue de la Justice</p>
<p className="text-sm">75002 Paris, France</p> <p className="text-sm">75002 Paris, France</p>
</div> </div>
</div> </div>
</div>
{/* Note légale */} <div className="mt-6 pt-6 border-t border-white/20">
<div className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] rounded-xl shadow-lg p-6 text-white text-center"> <p className="text-sm text-white/80">
<div className="flex items-center justify-center gap-2 mb-3"> Jeu-concours gratuit sans obligation d'achat, sauf pour l'acquisition du ticket donnant droit à participation.
<span className="text-2xl">📜</span> Règlement déposé chez Maître Dupont, huissier de justice à Paris.
<h3 className="text-lg font-semibold">Note légale</h3> </p>
</div> </div>
<p className="text-sm text-white/90 leading-relaxed">
Jeu-concours gratuit sans obligation d'achat, sauf pour l'acquisition du ticket donnant droit à participation.
Règlement déposé chez Maître Dupont, huissier de justice à Paris.
</p>
</div> </div>
</div> </div>
</div> </div>

61
app/terms/page.tsx
View File

@ -7,67 +7,67 @@ export const metadata: Metadata = {
export default function TermsPage() { export default function TermsPage() {
return ( return (
<div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-12 px-4"> <div className="min-h-screen bg-gradient-to-b from-primary-50 to-white py-12 px-4">
<div className="max-w-4xl mx-auto bg-white rounded-xl shadow-lg border border-[#e5e4dc] p-8"> <div className="max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-8">
<h1 className="text-3xl font-bold text-[#5a5a4e] mb-6"> <h1 className="text-3xl font-bold text-gray-900 mb-6">
Conditions d'utilisation Conditions d utilisation
</h1> </h1>
<p className="text-sm text-[#8a8a7a] mb-8"> <p className="text-sm text-gray-600 mb-8">
Dernière mise à jour : 17 janvier 2025 Dernière mise à jour : 17 janvier 2025
</p> </p>
<div className="space-y-6 text-[#5a5a4e]"> <div className="space-y-6 text-gray-700">
<section> <section>
<h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3"> <h2 className="text-2xl font-semibold text-gray-900 mb-3">
1. Présentation 1. Présentation
</h2> </h2>
<p> <p>
Bienvenue sur le site du jeu-concours Thé Tip Top. En accédant à ce site Bienvenue sur le site du jeu-concours Thé Tip Top. En accédant à ce site
et en participant au jeu, vous acceptez d'être lié par les présentes et en participant au jeu, vous acceptez d être lié par les présentes
conditions d'utilisation. conditions d utilisation.
</p> </p>
</section> </section>
<section> <section>
<h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3"> <h2 className="text-2xl font-semibold text-gray-900 mb-3">
2. Objet du jeu-concours 2. Objet du jeu-concours
</h2> </h2>
<p> <p>
Thé Tip Top organise un jeu-concours gratuit et sans obligation d'achat Thé Tip Top organise un jeu-concours gratuit et sans obligation d achat
permettant aux participants de gagner des lots en entrant des codes de permettant aux participants de gagner des lots en entrant des codes de
participation fournis lors d'achats en magasin. participation fournis lors d achats en magasin.
</p> </p>
</section> </section>
<section> <section>
<h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3"> <h2 className="text-2xl font-semibold text-gray-900 mb-3">
3. Conditions de participation 3. Conditions de participation
</h2> </h2>
<ul className="list-disc pl-6 space-y-2"> <ul className="list-disc pl-6 space-y-2">
<li>Être âgé de 18 ans ou plus</li> <li>Être âgé de 18 ans ou plus</li>
<li>Résider en France métropolitaine</li> <li>Résider en France métropolitaine</li>
<li>Créer un compte avec une adresse e-mail valide</li> <li>Créer un compte avec une adresse e-mail valide</li>
<li>Accepter les présentes conditions d'utilisation</li> <li>Accepter les présentes conditions d utilisation</li>
<li>Accepter la politique de confidentialité</li> <li>Accepter la politique de confidentialité</li>
</ul> </ul>
</section> </section>
<section> <section>
<h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3"> <h2 className="text-2xl font-semibold text-gray-900 mb-3">
4. Modalités de participation 4. Modalités de participation
</h2> </h2>
<p className="mb-2">Pour participer :</p> <p className="mb-2">Pour participer :</p>
<ol className="list-decimal pl-6 space-y-2"> <ol className="list-decimal pl-6 space-y-2">
<li>Créez un compte sur le site</li> <li>Créez un compte sur le site</li>
<li>Entrez le code unique figurant sur votre ticket d'achat</li> <li>Entrez le code unique figurant sur votre ticket d achat</li>
<li>Découvrez instantanément votre gain</li> <li>Découvrez instantanément votre gain</li>
<li>Suivez les instructions pour récupérer votre lot</li> <li>Suivez les instructions pour récupérer votre lot</li>
</ol> </ol>
</section> </section>
<section> <section>
<h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3"> <h2 className="text-2xl font-semibold text-gray-900 mb-3">
5. Lots à gagner 5. Lots à gagner
</h2> </h2>
<p className="mb-2">Les lots suivants sont disponibles :</p> <p className="mb-2">Les lots suivants sont disponibles :</p>
@ -82,7 +82,7 @@ export default function TermsPage() {
</section> </section>
<section> <section>
<h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3"> <h2 className="text-2xl font-semibold text-gray-900 mb-3">
6. Récupération des lots 6. Récupération des lots
</h2> </h2>
<p> <p>
@ -93,7 +93,7 @@ export default function TermsPage() {
</section> </section>
<section> <section>
<h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3"> <h2 className="text-2xl font-semibold text-gray-900 mb-3">
7. Limitation de responsabilité 7. Limitation de responsabilité
</h2> </h2>
<p> <p>
@ -104,7 +104,7 @@ export default function TermsPage() {
</section> </section>
<section> <section>
<h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3"> <h2 className="text-2xl font-semibold text-gray-900 mb-3">
8. Propriété intellectuelle 8. Propriété intellectuelle
</h2> </h2>
<p> <p>
@ -116,7 +116,7 @@ export default function TermsPage() {
</section> </section>
<section> <section>
<h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3"> <h2 className="text-2xl font-semibold text-gray-900 mb-3">
9. Modification des conditions 9. Modification des conditions
</h2> </h2>
<p> <p>
@ -127,41 +127,38 @@ export default function TermsPage() {
</section> </section>
<section> <section>
<h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3"> <h2 className="text-2xl font-semibold text-gray-900 mb-3">
10. Droit applicable et juridiction 10. Droit applicable et juridiction
</h2> </h2>
<p> <p>
Les présentes conditions sont régies par le droit français. En cas de Les présentes conditions sont régies par le droit français. En cas de
litige, et à défaut d'accord amiable, les tribunaux français seront litige, et à défaut d accord amiable, les tribunaux français seront
seuls compétents. seuls compétents.
</p> </p>
</section> </section>
<section> <section>
<h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3"> <h2 className="text-2xl font-semibold text-gray-900 mb-3">
11. Contact 11. Contact
</h2> </h2>
<p> <p>
Pour toute question concernant ces conditions d'utilisation, vous pouvez Pour toute question concernant ces conditions d utilisation, vous pouvez
nous contacter : nous contacter :
</p> </p>
<ul className="list-none space-y-2 mt-3"> <ul className="list-none space-y-2 mt-3">
<li><strong>Email :</strong> <a href="mailto:contact@thetiptop.fr" className="text-[#d4a574] hover:text-[#c4956a] transition-colors">contact@thetiptop.fr</a></li> <li><strong>Email :</strong> <a href="mailto:contact@thetiptop.fr" className="text-primary-600 hover:underline">contact@thetiptop.fr</a></li>
<li><strong>Adresse :</strong> 18 Avenue Thiers, 06000 Nice, France</li> <li><strong>Adresse :</strong> 18 Avenue Thiers, 06000 Nice, France</li>
<li><strong>Téléphone :</strong> +33 4 93 00 00 00</li> <li><strong>Téléphone :</strong> +33 4 93 00 00 00</li>
</ul> </ul>
</section> </section>
</div> </div>
<div className="mt-8 pt-6 border-t border-[#e5e4dc]"> <div className="mt-8 pt-6 border-t border-gray-200">
<a <a
href="/" href="/"
className="inline-flex items-center gap-2 text-[#d4a574] hover:text-[#c4956a] font-medium transition-colors group" className="text-primary-600 hover:text-primary-700 font-medium"
> >
<svg className="w-5 h-5 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> ← Retour à l accueil
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
</svg>
Retour à l'accueil
</a> </a>
</div> </div>
</div> </div>

51
components/Header.tsx
View File

@ -47,14 +47,14 @@ export default function Header() {
<header className="bg-gradient-to-r from-[#f5f5f0] to-[#faf9f5] sticky top-0 z-50 shadow-lg border-b-2 border-[#e5e4dc]"> <header className="bg-gradient-to-r from-[#f5f5f0] to-[#faf9f5] sticky top-0 z-50 shadow-lg border-b-2 border-[#e5e4dc]">
{/* Main Header */} {/* Main Header */}
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="flex items-center justify-between h-18 gap-4"> <div className="flex items-center justify-between h-18">
{/* Logo */} {/* Logo */}
<Link href={ROUTES.HOME} className="group flex items-center gap-3 flex-shrink-0"> <Link href={ROUTES.HOME} className="group flex items-center gap-3">
<Logo size="md" showText={false} className="group-hover:scale-105 transition-transform" /> <Logo size="md" showText={false} className="group-hover:scale-105 transition-transform" />
</Link> </Link>
{/* Desktop Navigation */} {/* Desktop Navigation */}
<nav className="hidden md:flex items-center gap-6 flex-shrink-0"> <nav className="hidden md:flex items-center gap-6">
<Link <Link
href={ROUTES.HOME} href={ROUTES.HOME}
className="text-[#5a5a4e] hover:text-[#d4a574] font-medium transition-colors" className="text-[#5a5a4e] hover:text-[#d4a574] font-medium transition-colors"
@ -90,7 +90,7 @@ export default function Header() {
{isAuthenticated ? ( {isAuthenticated ? (
<Link <Link
href={ROUTES.GAME} href={ROUTES.GAME}
className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-2 rounded-lg transition-all duration-300 hover:shadow-[0_0_20px_rgba(212,165,116,0.6)] shadow-lg whitespace-nowrap" className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-2 rounded-lg transition-all duration-300 hover:shadow-[0_0_20px_rgba(212,165,116,0.6)] hover:scale-105 shadow-lg"
> >
Participer Participer
</Link> </Link>
@ -98,11 +98,11 @@ export default function Header() {
<div className="relative" ref={dropdownRef}> <div className="relative" ref={dropdownRef}>
<button <button
onClick={() => setIsParticiperDropdownOpen(!isParticiperDropdownOpen)} onClick={() => setIsParticiperDropdownOpen(!isParticiperDropdownOpen)}
className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-2 rounded-lg transition-all duration-300 hover:shadow-[0_0_20px_rgba(212,165,116,0.6)] shadow-lg flex items-center justify-center gap-2 whitespace-nowrap" className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-2 rounded-lg transition-all duration-300 hover:shadow-[0_0_20px_rgba(212,165,116,0.6)] hover:scale-105 shadow-lg flex items-center gap-2"
> >
Participer Participer
<svg <svg
className={`w-4 h-4 flex-shrink-0 transition-transform duration-300 ${isParticiperDropdownOpen ? 'rotate-180' : ''}`} className={`w-4 h-4 transition-transform duration-300 ${isParticiperDropdownOpen ? 'rotate-180' : ''}`}
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -137,40 +137,31 @@ export default function Header() {
</nav> </nav>
{/* Desktop Auth Buttons */} {/* Desktop Auth Buttons */}
<div className="hidden md:flex items-center gap-3 flex-shrink-0"> <div className="hidden md:flex items-center gap-3">
{isAuthenticated && ( {isAuthenticated && (
<> <>
<Link href={getDashboardRoute()}> <Link href={getDashboardRoute()}>
<div className="flex flex-col items-start bg-gradient-to-br from-white to-[#faf9f5] text-[#5a5a4e] hover:shadow-lg px-4 py-2.5 rounded-xl transition-all border-2 border-[#e5e4dc] hover:border-[#d4a574] group min-w-0 flex-shrink-0"> <button className="flex flex-col items-center bg-white text-[#5a5a4e] hover:bg-[#d4a574] hover:text-white font-semibold px-4 py-2 rounded-lg transition-all border border-[#e5e4dc]">
<span className="text-sm font-bold group-hover:text-[#d4a574] transition-colors whitespace-nowrap overflow-hidden text-ellipsis max-w-[200px]">{user?.firstName} {user?.lastName}</span> <span className="text-sm">{user?.firstName} {user?.lastName}</span>
<span className="text-xs text-[#8a8a7a] whitespace-nowrap overflow-hidden text-ellipsis max-w-[200px]">{user?.email}</span> <span className="text-xs font-normal opacity-80">{user?.email}</span>
</div> </button>
</Link> </Link>
<Link href={ROUTES.PROFILE}> <Link href={ROUTES.PROFILE}>
<button className="flex items-center justify-center gap-2 bg-white hover:bg-gradient-to-r hover:from-[#d4a574] hover:to-[#c4956a] text-[#5a5a4e] hover:text-white font-semibold px-5 py-2.5 rounded-xl transition-all duration-300 border-2 border-[#e5e4dc] hover:border-[#d4a574] hover:shadow-lg whitespace-nowrap"> <button className="flex items-center gap-2 bg-white text-[#5a5a4e] hover:bg-[#d4a574] hover:text-white font-semibold px-4 py-2 rounded-lg transition-all border border-[#e5e4dc]">
<svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
Profil Profil
</button> </button>
</Link> </Link>
{user?.role === 'CLIENT' && ( {user?.role === 'CLIENT' && (
<Link href={ROUTES.HISTORY}> <Link href={ROUTES.HISTORY}>
<button className="flex items-center justify-center gap-2 bg-white hover:bg-gradient-to-r hover:from-[#d4a574] hover:to-[#c4956a] text-[#5a5a4e] hover:text-white font-semibold px-5 py-2.5 rounded-xl transition-all duration-300 border-2 border-[#e5e4dc] hover:border-[#d4a574] hover:shadow-lg whitespace-nowrap"> <button className="flex items-center gap-2 bg-white text-[#5a5a4e] hover:bg-[#d4a574] hover:text-white font-semibold px-4 py-2 rounded-lg transition-all border border-[#e5e4dc]">
<svg className="w-5 h-5 flex-shrink-0" 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>
Mes gains Mes gains
</button> </button>
</Link> </Link>
)} )}
<button <button
onClick={logout} onClick={logout}
className="flex items-center justify-center gap-2 bg-white hover:bg-gradient-to-r hover:from-red-500 hover:to-red-600 text-[#5a5a4e] hover:text-white font-semibold px-5 py-2.5 rounded-xl transition-all duration-300 border-2 border-[#e5e4dc] hover:border-red-500 hover:shadow-lg whitespace-nowrap" className="flex items-center gap-2 bg-white text-[#5a5a4e] hover:bg-red-600 hover:text-white font-semibold px-4 py-2 rounded-lg transition-all border border-[#e5e4dc]"
> >
<svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
Déconnexion Déconnexion
</button> </button>
</> </>
@ -259,7 +250,7 @@ export default function Header() {
{isAuthenticated ? ( {isAuthenticated ? (
<Link <Link
href={ROUTES.GAME} href={ROUTES.GAME}
className="bg-green-600 hover:bg-green-700 text-white font-semibold px-4 py-3 rounded-lg transition-all hover:shadow-lg text-center block whitespace-nowrap" className="bg-green-600 hover:bg-green-700 text-white font-semibold px-4 py-3 rounded-lg transition-all hover:shadow-lg text-center block"
onClick={() => setIsMobileMenuOpen(false)} onClick={() => setIsMobileMenuOpen(false)}
> >
🎯 Participer 🎯 Participer
@ -268,11 +259,11 @@ export default function Header() {
<div> <div>
<button <button
onClick={() => setIsParticiperDropdownOpen(!isParticiperDropdownOpen)} onClick={() => setIsParticiperDropdownOpen(!isParticiperDropdownOpen)}
className="bg-green-600 hover:bg-green-700 text-white font-semibold px-4 py-3 rounded-lg transition-all hover:shadow-lg flex items-center justify-center gap-2 w-full whitespace-nowrap" className="bg-green-600 hover:bg-green-700 text-white font-semibold px-4 py-3 rounded-lg transition-all hover:shadow-lg flex items-center justify-center gap-2 w-full"
> >
🎯 Participer 🎯 Participer
<svg <svg
className={`w-4 h-4 flex-shrink-0 transition-transform ${isParticiperDropdownOpen ? 'rotate-180' : ''}`} className={`w-4 h-4 transition-transform ${isParticiperDropdownOpen ? 'rotate-180' : ''}`}
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -314,7 +305,7 @@ export default function Header() {
href={getDashboardRoute()} href={getDashboardRoute()}
onClick={() => setIsMobileMenuOpen(false)} onClick={() => setIsMobileMenuOpen(false)}
> >
<button className="w-full flex flex-col items-center bg-white text-[#1a4d2e] hover:bg-[#f59e0b] hover:text-white font-semibold px-4 py-3 rounded-lg transition-all whitespace-nowrap"> <button className="w-full flex flex-col items-center bg-white text-[#1a4d2e] hover:bg-[#f59e0b] hover:text-white font-semibold px-4 py-3 rounded-lg transition-all">
<span className="text-sm">{user?.firstName} {user?.lastName}</span> <span className="text-sm">{user?.firstName} {user?.lastName}</span>
<span className="text-xs font-normal opacity-80">{user?.email}</span> <span className="text-xs font-normal opacity-80">{user?.email}</span>
</button> </button>
@ -323,7 +314,7 @@ export default function Header() {
href={ROUTES.PROFILE} href={ROUTES.PROFILE}
onClick={() => setIsMobileMenuOpen(false)} onClick={() => setIsMobileMenuOpen(false)}
> >
<button className="w-full flex items-center justify-center gap-2 bg-white text-[#1a4d2e] hover:bg-[#f59e0b] hover:text-white font-semibold px-4 py-3 rounded-lg transition-all whitespace-nowrap"> <button className="w-full flex items-center justify-center gap-2 bg-white text-[#1a4d2e] hover:bg-[#f59e0b] hover:text-white font-semibold px-4 py-3 rounded-lg transition-all">
Profil Profil
</button> </button>
</Link> </Link>
@ -332,7 +323,7 @@ export default function Header() {
href={ROUTES.HISTORY} href={ROUTES.HISTORY}
onClick={() => setIsMobileMenuOpen(false)} onClick={() => setIsMobileMenuOpen(false)}
> >
<button className="w-full flex items-center justify-center gap-2 bg-white text-[#1a4d2e] hover:bg-[#f59e0b] hover:text-white font-semibold px-4 py-3 rounded-lg transition-all whitespace-nowrap"> <button className="w-full flex items-center justify-center gap-2 bg-white text-[#1a4d2e] hover:bg-[#f59e0b] hover:text-white font-semibold px-4 py-3 rounded-lg transition-all">
Mes gains Mes gains
</button> </button>
</Link> </Link>
@ -342,7 +333,7 @@ export default function Header() {
logout(); logout();
setIsMobileMenuOpen(false); setIsMobileMenuOpen(false);
}} }}
className="w-full flex items-center justify-center gap-2 bg-white text-[#1a4d2e] hover:bg-red-600 hover:text-white font-semibold px-4 py-3 rounded-lg transition-all whitespace-nowrap" className="w-full flex items-center justify-center gap-2 bg-white text-[#1a4d2e] hover:bg-red-600 hover:text-white font-semibold px-4 py-3 rounded-lg transition-all"
> >
Déconnexion Déconnexion
</button> </button>

20
package-lock.json generated
View File

@ -531,6 +531,17 @@
"node": ">=14" "node": ">=14"
} }
}, },
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"license": "MIT",
"peer": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@react-oauth/google": { "node_modules/@react-oauth/google": {
"version": "0.12.2", "version": "0.12.2",
"resolved": "https://registry.npmjs.org/@react-oauth/google/-/google-0.12.2.tgz", "resolved": "https://registry.npmjs.org/@react-oauth/google/-/google-0.12.2.tgz",
@ -704,7 +715,7 @@
"version": "19.2.2", "version": "19.2.2",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
"integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==", "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
"dev": true, "devOptional": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"csstype": "^3.0.2" "csstype": "^3.0.2"
@ -5231,6 +5242,13 @@
"react-dom": ">=16" "react-dom": ">=16"
} }
}, },
"node_modules/react-is": {
"version": "19.2.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.0.tgz",
"integrity": "sha512-x3Ax3kNSMIIkyVYhWPyO09bu0uttcAIoecO/um/rKGQ4EltYWVYtyiGkS/3xMynrbVQdS69Jhlv8FXUEZehlzA==",
"license": "MIT",
"peer": true
},
"node_modules/react-redux": { "node_modules/react-redux": {
"version": "9.2.0", "version": "9.2.0",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",

6
utils/constants.ts
View File

@ -33,9 +33,9 @@ export const API_ENDPOINTS = {
DELETE_PRIZE: (id: string) => `/admin/prizes/${id}`, DELETE_PRIZE: (id: string) => `/admin/prizes/${id}`,
}, },
USER: { USER: {
PROFILE: '/users/profile', PROFILE: '/user/profile',
UPDATE_PROFILE: '/users/profile', UPDATE_PROFILE: '/user/profile',
CHANGE_PASSWORD: '/users/change-password', CHANGE_PASSWORD: '/user/change-password',
}, },
} as const; } as const;