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

feat: apply golden/beige theme across all pages and fix header layout

Browse Source 
Design Updates:
- Apply consistent golden/beige color scheme to all pages
- Update client dashboard, contact, FAQ, history, game, lots, profile, rules, terms, and privacy pages
- Replace green/orange colors with golden palette (#d4a574, #c4956a)
- Add golden gradient backgrounds and borders throughout

Header Improvements:
- Fix button layout to maintain proper form when page is zoomed
- Remove hover:scale-105 effects that caused deformation
- Add whitespace-nowrap to prevent text wrapping
- Add flex-shrink-0 to prevent element shrinking
- Add gap-4 to main header container for proper spacing
- Fix user info card with text ellipsis for long names/emails
- Improve spacing between "Participer" button and user card

Profile Page Updates:
- Remove "Dernière modification" field
- Update all colors to golden theme

API Endpoints:
- Fix user profile endpoint from /user/profile to /users/profile

Statistics Icons:
- Update dashboard statistics icons with distinct colors
- Total Participations: blue
- Gains réclamés: green
- En attente: yellow
- Rejetés: red

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
soufiane 2025-11-22 23:44:49 +01:00
parent aee6658cd7
commit 0ade13d50d
12 changed files with 450 additions and 421 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-gray-50 py-8"> <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] 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-gray-900 mb-2"> <h1 className="text-4xl font-bold text-[#5a5a4e] mb-2">
Bonjour {user?.firstName} ! 👋 Bonjour {user?.firstName} ! 👋
</h1> </h1>
<p className="text-gray-600"> <p className="text-[#8a8a7a]">
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-[#1a4d2e] to-[#2d5a3d] text-white rounded-xl shadow-md p-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="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-green-50"> <p className="text-white/90">
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-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-8 py-4 rounded-lg transition-all hover:shadow-xl whitespace-nowrap"> <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">
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"> <div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<p className="text-sm font-medium text-gray-600 mb-2"> <p className="text-sm font-medium text-[#8a8a7a] mb-2">
Total Participations Total Participations
</p> </p>
<p className="text-4xl font-bold text-gray-900"> <p className="text-4xl font-bold text-blue-600">
{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"> <div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<p className="text-sm font-medium text-gray-600 mb-2"> <p className="text-sm font-medium text-[#8a8a7a] 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"> <div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<p className="text-sm font-medium text-gray-600 mb-2"> <p className="text-sm font-medium text-[#8a8a7a] 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"> <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
<div className="px-6 py-4 border-b border-gray-200"> <div className="px-6 py-4 border-b border-[#e5e4dc]">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h2 className="text-xl font-bold text-gray-900">Mes derniers tickets</h2> <h2 className="text-xl font-bold text-[#5a5a4e]">Mes derniers tickets</h2>
<Link href={ROUTES.HISTORY}> <Link href={ROUTES.HISTORY}>
<button className="text-[#1a4d2e] hover:text-[#f59e0b] font-semibold text-sm transition-colors"> <button className="text-[#d4a574] hover:text-[#c4956a] 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-gray-600 mb-4"> <p className="text-[#8a8a7a] 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-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-6 py-3 rounded-lg transition-all"> <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">
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-gray-200"> <tr className="border-b border-[#e5e4dc]">
<th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
Code Ticket Code Ticket
</th> </th>
<th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
Gain Gain
</th> </th>
<th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
Statut Statut
</th> </th>
<th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
Date Date
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-200"> <tbody className="divide-y divide-[#e5e4dc]">
{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-gray-50 transition-colors"> <tr key={ticket.id} className="hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 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-gray-900"> <span className="font-mono text-sm font-semibold text-[#5a5a4e]">
{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-gray-900"> <p className="text-sm font-medium text-[#5a5a4e]">
{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-gray-600"> <td className="px-6 py-4 whitespace-nowrap text-sm text-[#8a8a7a]">
{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-gray-50"> <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]">
{/* Hero Section */} {/* Hero Section */}
<section className="bg-white py-12"> <section className="bg-gradient-to-r from-white to-[#faf9f5] py-12 border-b-2 border-[#e5e4dc]">
<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-gray-900 mb-4"> <h1 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] mb-4">
Contactez-nous Contactez-nous
</h1> </h1>
<p className="text-lg text-gray-600"> <p className="text-lg text-[#8a8a7a]">
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"> <div className="bg-white rounded-xl shadow-md p-8 border border-[#e5e4dc]">
<h2 className="text-2xl font-bold text-gray-900 mb-6">Envoyez-nous un message</h2> <h2 className="text-2xl font-bold text-[#5a5a4e] 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-gray-700 mb-2"> <label htmlFor="fullName" className="block text-sm font-semibold text-[#5a5a4e] 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 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent" 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]"
/> />
</div> </div>
{/* Email */} {/* Email */}
<div> <div>
<label htmlFor="email" className="block text-sm font-semibold text-gray-700 mb-2"> <label htmlFor="email" className="block text-sm font-semibold text-[#5a5a4e] 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 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent" 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]"
/> />
</div> </div>
{/* Sujet */} {/* Sujet */}
<div> <div>
<label htmlFor="subject" className="block text-sm font-semibold text-gray-700 mb-2"> <label htmlFor="subject" className="block text-sm font-semibold text-[#5a5a4e] 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 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent bg-white" 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"
> >
<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-gray-700 mb-2"> <label htmlFor="message" className="block text-sm font-semibold text-[#5a5a4e] 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 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent resize-none" 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"
/> />
</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-[#1a4d2e] border-gray-300 rounded focus:ring-2 focus:ring-[#1a4d2e]" className="mt-1 w-5 h-5 text-[#d4a574] border-[#e5e4dc] rounded focus:ring-2 focus:ring-[#d4a574]"
/> />
<label htmlFor="acceptPolicy" className="text-sm text-gray-700 select-none cursor-pointer"> <label htmlFor="acceptPolicy" className="text-sm text-[#5a5a4e] 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-[#1a4d2e] underline hover:text-[#f59e0b]"> <Link href="/privacy" className="text-[#d4a574] underline hover:text-[#c4956a]">
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-[#1a4d2e] hover:bg-[#2d5a3d] disabled:bg-gray-400 text-white font-bold px-8 py-4 rounded-lg transition-all" 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"
> >
{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"> <div className="bg-white rounded-xl shadow-md p-8 border border-[#e5e4dc]">
<h2 className="text-2xl font-bold text-gray-900 mb-6">Nos coordonnées</h2> <h2 className="text-2xl font-bold text-[#5a5a4e] 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="text-2xl flex-shrink-0">📍</div> <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> <div>
<h3 className="font-semibold text-gray-900 mb-1">Siège social</h3> <h3 className="font-semibold text-[#5a5a4e] mb-1">Siège social</h3>
<p className="text-gray-600 text-sm"> <p className="text-[#8a8a7a] 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="text-2xl flex-shrink-0">📞</div> <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> <div>
<h3 className="font-semibold text-gray-900 mb-1">Téléphone</h3> <h3 className="font-semibold text-[#5a5a4e] mb-1">Téléphone</h3>
<p className="text-gray-600 text-sm"> <p className="text-[#8a8a7a] text-sm">
<a href="tel:+33123456789" className="hover:text-[#1a4d2e] transition-colors"> <a href="tel:+33123456789" className="hover:text-[#d4a574] 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="text-2xl flex-shrink-0">✉️</div> <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> <div>
<h3 className="font-semibold text-gray-900 mb-1">Email</h3> <h3 className="font-semibold text-[#5a5a4e] mb-1">Email</h3>
<div className="text-gray-600 text-sm space-y-1"> <div className="text-[#8a8a7a] text-sm space-y-1">
<p> <p>
<a href="mailto:contact@thetiptop.com" className="hover:text-[#1a4d2e] transition-colors"> <a href="mailto:contact@thetiptop.com" className="hover:text-[#d4a574] transition-colors">
contact@thetiptop.com contact@thetiptop.com
</a> </a>
</p> </p>
<p> <p>
<a href="mailto:support@thetiptop.com" className="hover:text-[#1a4d2e] transition-colors"> <a href="mailto:support@thetiptop.com" className="hover:text-[#d4a574] transition-colors">
support@thetiptop.com support@thetiptop.com
</a> </a>
</p> </p>
<p> <p>
<a href="mailto:privacy@thetiptop.com" className="hover:text-[#1a4d2e] transition-colors"> <a href="mailto:privacy@thetiptop.com" className="hover:text-[#d4a574] 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="text-2xl flex-shrink-0">🕐</div> <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> <div>
<h3 className="font-semibold text-gray-900 mb-1">Service client</h3> <h3 className="font-semibold text-[#5a5a4e] mb-1">Service client</h3>
<p className="text-gray-600 text-sm"> <p className="text-[#8a8a7a] 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"> <div className="bg-white rounded-xl shadow-md p-8 border border-[#e5e4dc]">
<h2 className="text-2xl font-bold text-gray-900 mb-6">Nos boutiques</h2> <h2 className="text-2xl font-bold text-[#5a5a4e] 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-gray-200"> <div className="pb-4 border-b border-[#e5e4dc]">
<h3 className="font-semibold text-gray-900 mb-2">Paris Rivoli</h3> <h3 className="font-semibold text-[#5a5a4e] mb-2">Paris Rivoli</h3>
<p className="text-gray-600 text-sm mb-1"> <p className="text-[#8a8a7a] text-sm mb-1">
123 Rue de Rivoli, 75001 Paris 123 Rue de Rivoli, 75001 Paris
</p> </p>
<p className="text-sm text-gray-500">01 23 45 67 89</p> <p className="text-sm text-[#8a8a7a]">01 23 45 67 89</p>
</div> </div>
{/* Boutique 2 */} {/* Boutique 2 */}
<div className="pb-4 border-b border-gray-200"> <div className="pb-4 border-b border-[#e5e4dc]">
<h3 className="font-semibold text-gray-900 mb-2">Paris Saint-Germain</h3> <h3 className="font-semibold text-[#5a5a4e] mb-2">Paris Saint-Germain</h3>
<p className="text-gray-600 text-sm mb-1"> <p className="text-[#8a8a7a] text-sm mb-1">
45 Boulevard Saint-Germain, 75006 Paris 45 Boulevard Saint-Germain, 75006 Paris
</p> </p>
<p className="text-sm text-gray-500">01 23 45 67 90</p> <p className="text-sm text-[#8a8a7a]">01 23 45 67 90</p>
</div> </div>
{/* Boutique 3 */} {/* Boutique 3 */}
<div className="pb-4 border-b border-gray-200"> <div className="pb-4 border-b border-[#e5e4dc]">
<h3 className="font-semibold text-gray-900 mb-2">Lyon République</h3> <h3 className="font-semibold text-[#5a5a4e] mb-2">Lyon République</h3>
<p className="text-gray-600 text-sm mb-1"> <p className="text-[#8a8a7a] 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-gray-500">04 12 34 56 78</p> <p className="text-sm text-[#8a8a7a]">04 12 34 56 78</p>
</div> </div>
{/* Boutique 4 */} {/* Boutique 4 */}
<div> <div>
<h3 className="font-semibold text-gray-900 mb-2">Marseille Canebière</h3> <h3 className="font-semibold text-[#5a5a4e] mb-2">Marseille Canebière</h3>
<p className="text-gray-600 text-sm mb-1"> <p className="text-[#8a8a7a] text-sm mb-1">
32 La Canebière, 13001 Marseille 32 La Canebière, 13001 Marseille
</p> </p>
<p className="text-sm text-gray-500">04 91 23 45 67</p> <p className="text-sm text-[#8a8a7a]">04 91 23 45 67</p>
</div> </div>
</div> </div>
<div className="mt-6 pt-6 border-t border-gray-200"> <div className="mt-6 pt-6 border-t border-[#e5e4dc]">
<p className="text-xs text-gray-500 flex items-start gap-2"> <p className="text-xs text-[#8a8a7a] 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-yellow-50 to-yellow-100 rounded-xl p-8 border-l-4 border-yellow-500"> <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="flex items-start gap-4"> <div className="flex items-start gap-4">
<div className="text-3xl">💡</div> <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="flex-1"> <div className="flex-1">
<h3 className="text-xl font-bold text-gray-900 mb-2">Avant de nous contacter</h3> <h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Avant de nous contacter</h3>
<p className="text-gray-700 mb-4"> <p className="text-[#5a5a4e] 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-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-6 py-3 rounded-lg transition-all" 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"
> >
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-green-100 text-green-700" }, { name: "Participation", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
{ name: "Codes", color: "bg-blue-100 text-blue-700" }, { name: "Codes", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
{ name: "Compte", color: "bg-purple-100 text-purple-700" }, { name: "Compte", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
{ name: "Délais", color: "bg-orange-100 text-orange-700" }, { name: "Délais", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
{ name: "Retrait", color: "bg-teal-100 text-teal-700" }, { name: "Retrait", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
{ name: "Tirage final", color: "bg-yellow-100 text-yellow-700" }, { name: "Tirage final", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
{ name: "Données", color: "bg-pink-100 text-pink-700" }, { name: "Données", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
{ name: "Technique", color: "bg-gray-100 text-gray-700" }, { name: "Technique", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
]; ];
export default function FAQContent() { export default function FAQContent() {
@ -96,15 +96,15 @@ export default function FAQContent() {
}; };
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]">
{/* Hero Section */} {/* Hero Section */}
<section className="bg-white py-12"> <section className="bg-gradient-to-r from-white to-[#faf9f5] py-12 border-b-2 border-[#e5e4dc]">
<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-gray-900 mb-4"> <h1 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] mb-4">
Questions fréquentes Questions fréquentes
</h1> </h1>
<p className="text-lg text-gray-600"> <p className="text-lg text-[#8a8a7a]">
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 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent" 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"
/> />
<svg <svg
className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-[#8a8a7a]"
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-medium transition-all ${ className={`px-4 py-2 rounded-full text-sm font-semibold transition-all ${
selectedCategory === category.name selectedCategory === category.name
? category.color + ' ring-2 ring-offset-2 ring-green-500' ? 'bg-gradient-to-r from-[#d4a574] to-[#c4956a] text-white shadow-lg ring-2 ring-offset-2 ring-[#d4a574]'
: category.color + ' hover:opacity-80' : category.color + ' hover:shadow-md border border-[#d4a574]/30'
}`} }`}
> >
{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-gray-500"> <div className="bg-white rounded-xl shadow-md p-8 text-center text-[#8a8a7a] border border-[#e5e4dc]">
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"> <div key={index} className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
<button <button
onClick={() => toggleQuestion(index)} onClick={() => toggleQuestion(index)}
className="w-full flex items-start justify-between p-6 text-left hover:bg-gray-50 transition-colors" 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"
> >
<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-gray-900">{faq.question}</h3> <h3 className="text-lg font-semibold text-[#5a5a4e]">{faq.question}</h3>
</div> </div>
<svg <svg
className={`w-6 h-6 text-gray-500 flex-shrink-0 transition-transform ${ className={`w-6 h-6 text-[#8a8a7a] 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-gray-700 leading-relaxed"> <div className="px-6 pb-6 text-[#5a5a4e] 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-br from-[#1a4d2e] via-[#2d5a3d] to-[#1a4d2e] rounded-xl p-8 text-center text-white"> <div className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] rounded-2xl shadow-2xl p-12 text-center text-white border-2 border-[#e5e4dc]">
<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-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-8 py-3 rounded-lg transition-all" 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"
> >
✉️ support@thetiptop.com ✉️ support@thetiptop.com
</a> </a>
<Link <Link
href="/contact" href="/contact"
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" 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"
> >
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-gray-50 py-8"> <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] 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-gray-900 mb-2 flex items-center gap-3"> <h1 className="text-4xl font-bold text-[#5a5a4e] mb-2 flex items-center gap-3">
<Calendar className="w-10 h-10 text-[#1a4d2e]" /> <Calendar className="w-10 h-10 text-[#d4a574]" />
Historique de mes participations Historique de mes participations
</h1> </h1>
<p className="text-gray-600"> <p className="text-[#8a8a7a]">
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"> <div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<p className="text-sm font-medium text-gray-600 mb-2">Total</p> <p className="text-sm font-medium text-[#8a8a7a] 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 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" /> <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" />
</svg> </svg>
</div> </div>
</div> </div>
</div> </div>
<div className="bg-white rounded-xl shadow-md p-6"> <div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<p className="text-sm font-medium text-gray-600 mb-2">Réclamés</p> <p className="text-sm font-medium text-[#8a8a7a] 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"> <div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<p className="text-sm font-medium text-gray-600 mb-2">En attente</p> <p className="text-sm font-medium text-[#8a8a7a] 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"> <div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<p className="text-sm font-medium text-gray-600 mb-2">Rejetés</p> <p className="text-sm font-medium text-[#8a8a7a] 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"> <div className="bg-white rounded-xl shadow-md p-6 mb-6 border border-[#e5e4dc]">
<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-gray-400 w-5 h-5" /> <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#8a8a7a] 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 border-gray-300 rounded-lg focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent" 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"
/> />
</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-[#1a4d2e] text-white' ? 'bg-gradient-to-r from-[#d4a574] to-[#c4956a] text-white shadow-lg'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200' : 'bg-[#f5f5f0] text-[#5a5a4e] hover:bg-[#e5e4dc]'
}`} }`}
> >
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' ? 'bg-green-600 text-white shadow-lg'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200' : 'bg-[#f5f5f0] text-[#5a5a4e] hover:bg-[#e5e4dc]'
}`} }`}
> >
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' ? 'bg-yellow-600 text-white shadow-lg'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200' : 'bg-[#f5f5f0] text-[#5a5a4e] hover:bg-[#e5e4dc]'
}`} }`}
> >
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' ? 'bg-red-600 text-white shadow-lg'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200' : 'bg-[#f5f5f0] text-[#5a5a4e] hover:bg-[#e5e4dc]'
}`} }`}
> >
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"> <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
<div className="px-6 py-4 border-b border-gray-200"> <div className="px-6 py-4 border-b border-[#e5e4dc]">
<h2 className="text-xl font-bold text-gray-900">Tous mes tickets ({filteredTickets.length})</h2> <h2 className="text-xl font-bold text-[#5a5a4e]">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-gray-600 mb-4"> <p className="text-[#8a8a7a] 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-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-6 py-3 rounded-lg transition-all" 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"
> >
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-gray-200"> <tr className="border-b border-[#e5e4dc]">
<th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
Code Ticket Code Ticket
</th> </th>
<th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
Gain Gain
</th> </th>
<th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
Statut Statut
</th> </th>
<th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
Date de participation Date de participation
</th> </th>
<th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
Date de réclamation Date de réclamation
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-200"> <tbody className="divide-y divide-[#e5e4dc]">
{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-gray-50 transition-colors"> <tr key={ticket.id} className="hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 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-gray-900"> <span className="font-mono text-sm font-semibold text-[#5a5a4e]">
{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-gray-900"> <p className="text-sm font-medium text-[#5a5a4e]">
{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-gray-600"> <td className="px-6 py-4 whitespace-nowrap text-sm text-[#8a8a7a]">
{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-gray-600"> <td className="px-6 py-4 whitespace-nowrap text-sm text-[#8a8a7a]">
{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-gray-50 py-8"> <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] 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-md overflow-hidden"> <div className="bg-white rounded-xl shadow-2xl overflow-hidden border-2 border-[#e5e4dc]">
<div className="bg-gradient-to-r from-[#1a4d2e] to-[#2d5a3d] px-6 py-6"> <div className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] px-6 py-6 shadow-lg">
<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-gray-700 text-lg"> <p className="text-[#5a5a4e] text-lg">
Bonjour <span className="font-bold text-[#1a4d2e]">{user?.firstName}</span>, Bonjour <span className="font-bold text-[#d4a574]">{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-gray-700 mb-2"> <label htmlFor="ticketCode" className="block text-sm font-semibold text-[#5a5a4e] 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-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent tracking-widest" 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"
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 border-red-200 rounded-lg"> <div className="mt-3 p-4 bg-red-50 border-l-4 border-red-500 rounded-lg shadow-md">
<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-gray-500 text-center"> <p className="mt-2 text-sm text-[#8a8a7a] 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-[#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" 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"
> >
{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-blue-50 border-l-4 border-blue-500 rounded-lg"> <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">
<p className="text-sm text-blue-800 font-semibold mb-2"> <p className="text-sm text-[#5a5a4e] font-semibold mb-2">
💡 Bon à savoir : 💡 Bon à savoir :
</p> </p>
<ul className="text-sm text-blue-700 space-y-1 list-disc list-inside"> <ul className="text-sm text-[#5a5a4e] 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-blue-900">Mes gains</Link></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>
</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-gray-600"> <div className="flex items-center gap-2 text-[#5a5a4e]">
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-[#1a4d2e]"></div> <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-[#d4a574]"></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-gray-300 hover:bg-gray-50 text-gray-700 font-bold px-6 py-3 rounded-lg transition-all" className="border-2 border-[#e5e4dc] hover:bg-[#f5f5f0] text-[#5a5a4e] 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-[#1a4d2e] hover:bg-[#2d5a3d] text-white font-bold px-6 py-3 rounded-lg transition-all" 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)]"
> >
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-gray-50"> <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]">
{/* Hero Section */} {/* Hero Section */}
<section className="bg-white py-12"> <section className="bg-gradient-to-r from-white to-[#faf9f5] py-12 border-b-2 border-[#e5e4dc]">
<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-gray-900 mb-4"> <h1 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] mb-4">
Lots à gagner Lots à gagner
</h1> </h1>
<p className="text-lg text-gray-600"> <p className="text-lg text-[#8a8a7a]">
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-yellow-100 to-yellow-200 rounded-2xl p-8 shadow-lg border-2 border-yellow-300"> <div className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] rounded-2xl p-8 shadow-2xl border-2 border-[#e5e4dc]">
<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-red-500 text-white text-xs font-bold px-3 py-1 rounded-full mb-2"> <div className="inline-block bg-white text-[#d4a574] text-xs font-bold px-3 py-1 rounded-full mb-2 shadow-md">
GRAND PRIX FINAL GRAND PRIX FINAL
</div> </div>
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-2"> <h2 className="text-3xl md:text-4xl font-bold text-white mb-2">
1 an de thé offert 1 an de thé offert
</h2> </h2>
<p className="text-gray-700 mb-3"> <p className="text-white/90 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-orange-600"> <div className="text-2xl font-bold text-white">
Valeur : 360€ <span className="text-sm text-gray-600 font-normal">Tirage sous contrôle d'huissier</span> Valeur : 360€ <span className="text-sm text-white/80 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"> <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc]">
<div className="aspect-square bg-gradient-to-br from-amber-50 to-orange-50 flex items-center justify-center"> <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] 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-red-100 text-red-600 text-sm font-bold px-3 py-1 rounded-full mb-3"> <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">
60% des lots 60% des lots
</div> </div>
<h3 className="text-xl font-bold text-gray-900 mb-2">Infuseur à thé premium</h3> <h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Infuseur à thé premium</h3>
<p className="text-gray-600 text-sm mb-4"> <p className="text-[#8a8a7a] 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-[#1a4d2e]">15€</div> <div className="text-2xl font-bold text-[#d4a574]">15€</div>
<button className="text-[#1a4d2e] hover:text-[#f59e0b] transition-colors"> <button className="text-[#8a8a7a] hover:text-[#d4a574] 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"> <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc]">
<div className="aspect-square bg-gradient-to-br from-green-50 to-emerald-50 flex items-center justify-center"> <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] 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-orange-100 text-orange-600 text-sm font-bold px-3 py-1 rounded-full mb-3"> <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">
20% des lots 20% des lots
</div> </div>
<h3 className="text-xl font-bold text-gray-900 mb-2">Boîte 100g thé détox</h3> <h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Boîte 100g thé détox</h3>
<p className="text-gray-600 text-sm mb-4"> <p className="text-[#8a8a7a] 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-[#1a4d2e]">25€</div> <div className="text-2xl font-bold text-[#d4a574]">25€</div>
<button className="text-[#1a4d2e] hover:text-[#f59e0b] transition-colors"> <button className="text-[#8a8a7a] hover:text-[#d4a574] 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"> <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc]">
<div className="aspect-square bg-gradient-to-br from-blue-50 to-cyan-50 flex items-center justify-center"> <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] 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-green-100 text-green-600 text-sm font-bold px-3 py-1 rounded-full mb-3"> <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">
10% des lots 10% des lots
</div> </div>
<h3 className="text-xl font-bold text-gray-900 mb-2">Boîte 100g thé signature</h3> <h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Boîte 100g thé signature</h3>
<p className="text-gray-600 text-sm mb-4"> <p className="text-[#8a8a7a] 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-[#1a4d2e]">35€</div> <div className="text-2xl font-bold text-[#d4a574]">35€</div>
<button className="text-[#1a4d2e] hover:text-[#f59e0b] transition-colors"> <button className="text-[#8a8a7a] hover:text-[#d4a574] 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"> <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc]">
<div className="aspect-square bg-gradient-to-br from-purple-50 to-pink-50 flex items-center justify-center"> <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] 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-purple-100 text-purple-600 text-sm font-bold px-3 py-1 rounded-full mb-3"> <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">
6% des lots 6% des lots
</div> </div>
<h3 className="text-xl font-bold text-gray-900 mb-2">Coffret découverte 39€</h3> <h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Coffret découverte 39€</h3>
<p className="text-gray-600 text-sm mb-4"> <p className="text-[#8a8a7a] 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-[#1a4d2e]">39€</div> <div className="text-2xl font-bold text-[#d4a574]">39€</div>
<button className="text-[#1a4d2e] hover:text-[#f59e0b] transition-colors"> <button className="text-[#8a8a7a] hover:text-[#d4a574] 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"> <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc]">
<div className="aspect-square bg-gradient-to-br from-amber-50 to-yellow-50 flex items-center justify-center"> <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] 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-amber-100 text-amber-700 text-sm font-bold px-3 py-1 rounded-full mb-3"> <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">
4% des lots 4% des lots
</div> </div>
<h3 className="text-xl font-bold text-gray-900 mb-2">Coffret prestige 69€</h3> <h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Coffret prestige 69€</h3>
<p className="text-gray-600 text-sm mb-4"> <p className="text-[#8a8a7a] 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-[#1a4d2e]">69€</div> <div className="text-2xl font-bold text-[#d4a574]">69€</div>
<button className="text-[#1a4d2e] hover:text-[#f59e0b] transition-colors"> <button className="text-[#8a8a7a] hover:text-[#d4a574] 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-[#f59e0b]"> <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border-2 border-[#d4a574]">
<div className="aspect-square bg-gradient-to-br from-yellow-50 to-amber-50 flex items-center justify-center"> <div className="aspect-square bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 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-yellow-100 text-yellow-700 text-sm font-bold px-3 py-1 rounded-full mb-3"> <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">
1 an de THÉ 1 an de THÉ
</div> </div>
<h3 className="text-xl font-bold text-gray-900 mb-2">Tirage Final</h3> <h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Tirage Final</h3>
<p className="text-gray-600 text-sm mb-4"> <p className="text-[#8a8a7a] 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-[#f59e0b]">360€</div> <div className="text-2xl font-bold text-[#d4a574]">360€</div>
<button className="text-[#1a4d2e] hover:text-[#f59e0b] transition-colors"> <button className="text-[#8a8a7a] hover:text-[#d4a574] 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-[#1a4d2e] to-[#2d5a3d] rounded-2xl shadow-2xl p-12 text-center text-white"> <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]">
<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-[#f59e0b] hover:bg-[#d97706] text-white font-bold text-lg px-12 py-4 rounded-lg shadow-xl transition-all"> <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">
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-b from-primary-50 to-white py-12 px-4"> <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-12 px-4">
<div className="max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-8"> <div className="max-w-4xl mx-auto bg-white rounded-xl shadow-lg border border-[#e5e4dc] p-8">
<h1 className="text-3xl font-bold text-gray-900 mb-6"> <h1 className="text-3xl font-bold text-[#5a5a4e] mb-6">
Politique de confidentialité Politique de confidentialité
</h1> </h1>
<p className="text-sm text-gray-600 mb-8"> <p className="text-sm text-[#8a8a7a] mb-8">
Dernière mise à jour : 17 janvier 2025 Dernière mise à jour : 17 janvier 2025
</p> </p>
<div className="space-y-6 text-gray-700"> <div className="space-y-6 text-[#5a5a4e]">
<section> <section>
<h2 className="text-2xl font-semibold text-gray-900 mb-3"> <h2 className="text-2xl font-semibold text-[#5a5a4e] 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-gray-900 mb-3"> <h2 className="text-2xl font-semibold text-[#5a5a4e] 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-gray-900 mb-3"> <h2 className="text-2xl font-semibold text-[#5a5a4e] 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-gray-900 mb-3"> <h2 className="text-2xl font-semibold text-[#5a5a4e] 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-primary-600 hover:underline">privacy@thetiptop.fr</a> Pour exercer ces droits, contactez-nous à : <a href="mailto:privacy@thetiptop.fr" className="text-[#d4a574] hover:text-[#c4956a] transition-colors">privacy@thetiptop.fr</a>
</p> </p>
</section> </section>
<section> <section>
<h2 className="text-2xl font-semibold text-gray-900 mb-3"> <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
5. Contact 5. Contact
</h2> </h2>
<p> <p>
@ -82,18 +82,21 @@ 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-primary-600 hover:underline">privacy@thetiptop.fr</a></li> <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>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-gray-200"> <div className="mt-8 pt-6 border-t border-[#e5e4dc]">
<a <a
href="/" href="/"
className="text-primary-600 hover:text-primary-700 font-medium" className="inline-flex items-center gap-2 text-[#d4a574] hover:text-[#c4956a] font-medium transition-colors group"
> >
← Retour à l accueil <svg className="w-5 h-5 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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-gray-50 py-8"> <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] 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-gray-900 mb-8">Mon profil</h1> <h1 className="text-4xl font-bold text-[#5a5a4e] 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"> <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
<div className="px-6 py-4 border-b border-gray-200"> <div className="px-6 py-4 border-b border-[#e5e4dc]">
<h2 className="text-xl font-bold text-gray-900">Informations personnelles</h2> <h2 className="text-xl font-bold text-[#5a5a4e]">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-gray-500"> <label className="text-sm font-medium text-[#8a8a7a]">
Prénom Prénom
</label> </label>
<p className="text-lg text-gray-900">{user.firstName}</p> <p className="text-lg text-[#5a5a4e]">{user.firstName}</p>
</div> </div>
<div> <div>
<label className="text-sm font-medium text-gray-500"> <label className="text-sm font-medium text-[#8a8a7a]">
Nom Nom
</label> </label>
<p className="text-lg text-gray-900">{user.lastName}</p> <p className="text-lg text-[#5a5a4e]">{user.lastName}</p>
</div> </div>
<div> <div>
<label className="text-sm font-medium text-gray-500"> <label className="text-sm font-medium text-[#8a8a7a]">
Email Email
</label> </label>
<p className="text-lg text-gray-900">{user.email}</p> <p className="text-lg text-[#5a5a4e]">{user.email}</p>
</div> </div>
<div> <div>
<label className="text-sm font-medium text-gray-500"> <label className="text-sm font-medium text-[#8a8a7a]">
Téléphone Téléphone
</label> </label>
<p className="text-lg text-gray-900"> <p className="text-lg text-[#5a5a4e]">
{user.phone || "Non renseigné"} {user.phone || "Non renseigné"}
</p> </p>
</div> </div>
<div> <div>
<label className="text-sm font-medium text-gray-500"> <label className="text-sm font-medium text-[#8a8a7a]">
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-[#1a4d2e] hover:bg-[#2d5a3d] text-white font-bold px-6 py-3 rounded-lg transition-all" 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"
> >
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-[#1a4d2e] hover:bg-[#2d5a3d] disabled:bg-gray-400 text-white font-bold px-6 py-3 rounded-lg transition-all" 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"
> >
{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-gray-300 hover:bg-gray-50 text-gray-700 font-bold px-6 py-3 rounded-lg transition-all" className="border-2 border-[#e5e4dc] hover:bg-[#f5f5f0] text-[#5a5a4e] 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"> <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
<div className="px-6 py-4 border-b border-gray-200"> <div className="px-6 py-4 border-b border-[#e5e4dc]">
<h2 className="text-xl font-bold text-gray-900">Statut du compte</h2> <h2 className="text-xl font-bold text-[#5a5a4e]">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-gray-500"> <label className="text-sm font-medium text-[#8a8a7a]">
Email vérifié Email vérifié
</label> </label>
<div className="mt-1"> <div className="mt-1">
@ -230,41 +230,33 @@ export default function ProfilePage() {
</div> </div>
</div> </div>
<div> <div>
<label className="text-sm font-medium text-gray-500"> <label className="text-sm font-medium text-[#8a8a7a]">
Membre depuis Membre depuis
</label> </label>
<p className="text-sm text-gray-900 mt-1"> <p className="text-sm text-[#5a5a4e] 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 mt-6"> <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc] mt-6">
<div className="px-6 py-4 border-b border-gray-200"> <div className="px-6 py-4 border-b border-[#e5e4dc]">
<h2 className="text-xl font-bold text-gray-900">Actions rapides</h2> <h2 className="text-xl font-bold text-[#5a5a4e]">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-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-6 py-3 rounded-lg transition-all" 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"
> >
Jouer Jouer
</button> </button>
<button <button
onClick={() => router.push(ROUTES.HISTORY)} onClick={() => router.push(ROUTES.HISTORY)}
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" 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"
> >
Historique Historique
</button> </button>
@ -273,7 +265,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-[#1a4d2e] text-[#1a4d2e] hover:bg-[#1a4d2e] hover:text-white font-bold px-6 py-3 rounded-lg transition-all" 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"
> >
Tableau de bord Tableau de bord
</button> </button>
@ -281,7 +273,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-[#1a4d2e] text-[#1a4d2e] hover:bg-[#1a4d2e] hover:text-white font-bold px-6 py-3 rounded-lg transition-all" 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"
> >
Administration Administration
</button> </button>

190
app/rules/page.tsx
View File

@ -11,15 +11,15 @@ export default function RulesPage() {
}; };
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]">
{/* Hero Section */} {/* Hero Section */}
<section className="bg-white py-12"> <section className="bg-gradient-to-r from-white to-[#faf9f5] py-12 border-b-2 border-[#e5e4dc]">
<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-gray-900 mb-4"> <h1 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] mb-4">
Règlement du jeu-concours Règlement du jeu-concours
</h1> </h1>
<p className="text-lg text-gray-600"> <p className="text-lg text-[#8a8a7a]">
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"> <div className="bg-white rounded-xl shadow-md p-6 mb-8 border border-[#e5e4dc]">
<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-gray-900">Résumé du jeu-concours</h2> <h2 className="text-2xl font-bold text-[#5a5a4e]">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-red-50 rounded-lg p-6 text-center"> <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="text-4xl mb-3">🎯</div> <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-2xl font-bold text-gray-900 mb-2">100% gagnants</div> <div className="text-2xl font-bold text-[#5a5a4e] mb-2">100% gagnants</div>
<p className="text-sm text-gray-600"> <p className="text-sm text-[#8a8a7a]">
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-orange-50 rounded-lg p-6 text-center"> <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="text-4xl mb-3">🔄</div> <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-2xl font-bold text-gray-900 mb-2">30 + 30 jours</div> <div className="text-2xl font-bold text-[#5a5a4e] mb-2">30 + 30 jours</div>
<p className="text-sm text-gray-600"> <p className="text-sm text-[#8a8a7a]">
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-yellow-50 rounded-lg p-6 text-center"> <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="text-4xl mb-3">🏆</div> <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-2xl font-bold text-gray-900 mb-2">Grand prix 360€</div> <div className="text-2xl font-bold text-[#5a5a4e] mb-2">Grand prix 360€</div>
<p className="text-sm text-gray-600"> <p className="text-sm text-[#8a8a7a]">
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"> <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
<button <button
onClick={() => toggleSection(1)} onClick={() => toggleSection(1)}
className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors" 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"
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span className="text-2xl">📋</span> <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>
<h3 className="text-xl font-bold text-gray-900">1. Conditions de participation</h3> <h3 className="text-xl font-bold text-[#5a5a4e]">1. Conditions de participation</h3>
</div> </div>
<svg <svg
className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 1 ? 'rotate-180' : ''}`} className={`w-6 h-6 text-[#8a8a7a] 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-gray-700"> <div className="px-6 pb-6 space-y-4 text-[#5a5a4e]">
<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"> <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
<button <button
onClick={() => toggleSection(2)} onClick={() => toggleSection(2)}
className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors" 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"
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span className="text-2xl">🎫</span> <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>
<h3 className="text-xl font-bold text-gray-900">2. Codes de participation</h3> <h3 className="text-xl font-bold text-[#5a5a4e]">2. Codes de participation</h3>
</div> </div>
<svg <svg
className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 2 ? 'rotate-180' : ''}`} className={`w-6 h-6 text-[#8a8a7a] 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-gray-700"> <div className="px-6 pb-6 space-y-4 text-[#5a5a4e]">
<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-amber-50 border-l-4 border-amber-500 p-4 mt-4"> <div className="bg-gradient-to-r from-[#d4a574]/10 to-[#c4956a]/10 border-l-4 border-[#d4a574] p-4 mt-4 rounded">
<p className="font-semibold text-amber-900">⚠️ Important</p> <p className="font-semibold text-[#5a5a4e]">⚠️ Important</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> <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>
</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"> <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
<button <button
onClick={() => toggleSection(3)} onClick={() => toggleSection(3)}
className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors" 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"
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span className="text-2xl">📅</span> <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>
<h3 className="text-xl font-bold text-gray-900">3. Calendrier et délais</h3> <h3 className="text-xl font-bold text-[#5a5a4e]">3. Calendrier et délais</h3>
</div> </div>
<svg <svg
className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 3 ? 'rotate-180' : ''}`} className={`w-6 h-6 text-[#8a8a7a] 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-gray-700"> <div className="px-6 pb-6 space-y-4 text-[#5a5a4e]">
<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-green-50 border-l-4 border-green-500 p-4 mt-4"> <div className="bg-gradient-to-r from-[#d4a574]/10 to-[#c4956a]/10 border-l-4 border-[#d4a574] p-4 mt-4 rounded">
<p className="font-semibold text-green-900">✓ À retenir</p> <p className="font-semibold text-[#5a5a4e]">✓ À retenir</p>
<p className="text-green-800">Seules les participations enregistrées pendant la période officielle seront prises en compte.</p> <p className="text-[#5a5a4e]">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"> <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
<button <button
onClick={() => toggleSection(4)} onClick={() => toggleSection(4)}
className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors" 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"
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span className="text-2xl">🏆</span> <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>
<h3 className="text-xl font-bold text-gray-900">4. Tirage final - Grand Prix</h3> <h3 className="text-xl font-bold text-[#5a5a4e]">4. Tirage final - Grand Prix</h3>
</div> </div>
<svg <svg
className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 4 ? 'rotate-180' : ''}`} className={`w-6 h-6 text-[#8a8a7a] 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-gray-700"> <div className="px-6 pb-6 space-y-4 text-[#5a5a4e]">
<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-yellow-50 border-l-4 border-yellow-500 p-4 mt-4"> <div className="bg-gradient-to-r from-[#d4a574]/10 to-[#c4956a]/10 border-l-4 border-[#d4a574] p-4 mt-4 rounded">
<p className="font-semibold text-yellow-900">🎁 Information</p> <p className="font-semibold text-[#5a5a4e]">🎁 Information</p>
<p className="text-yellow-800">Le gagnant sera contacté par email et par téléphone dans les 48h suivant le tirage.</p> <p className="text-[#5a5a4e]">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"> <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
<button <button
onClick={() => toggleSection(5)} onClick={() => toggleSection(5)}
className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors" 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"
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span className="text-2xl">🎁</span> <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>
<h3 className="text-xl font-bold text-gray-900">5. Retrait des lots</h3> <h3 className="text-xl font-bold text-[#5a5a4e]">5. Retrait des lots</h3>
</div> </div>
<svg <svg
className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 5 ? 'rotate-180' : ''}`} className={`w-6 h-6 text-[#8a8a7a] 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-gray-700"> <div className="px-6 pb-6 space-y-4 text-[#5a5a4e]">
<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"> <div className="bg-red-50 border-l-4 border-red-500 p-4 mt-4 rounded">
<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"> <div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
<button <button
onClick={() => toggleSection(6)} onClick={() => toggleSection(6)}
className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors" 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"
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span className="text-2xl">🔒</span> <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>
<h3 className="text-xl font-bold text-gray-900">6. Protection des données personnelles</h3> <h3 className="text-xl font-bold text-[#5a5a4e]">6. Protection des données personnelles</h3>
</div> </div>
<svg <svg
className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 6 ? 'rotate-180' : ''}`} className={`w-6 h-6 text-[#8a8a7a] 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-gray-700"> <div className="px-6 pb-6 space-y-4 text-[#5a5a4e]">
<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-[#1a4d2e] underline hover:text-[#f59e0b]">contact@thetiptop.fr</a></p> <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 plus d'informations, consultez notre <a href="/privacy" className="text-[#1a4d2e] underline hover:text-[#f59e0b]">Politique de confidentialité</a>.</p> <p>Pour plus d'informations, consultez notre <a href="/privacy" className="text-[#d4a574] underline hover:text-[#c4956a]">Politique de confidentialité</a>.</p>
</div> </div>
)} )}
</div> </div>
@ -312,39 +312,61 @@ export default function RulesPage() {
</section> </section>
{/* Informations légales Section */} {/* Informations légales Section */}
<section className="py-12 bg-gradient-to-br from-[#1a4d2e] via-[#2d5a3d] to-[#1a4d2e]"> <section className="py-16 bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]">
<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-5xl mx-auto">
<div className="bg-white/10 backdrop-blur-sm rounded-xl p-8 text-white"> <div className="text-center mb-8">
<h2 className="text-2xl font-bold mb-6">Informations légales</h2> <h2 className="text-3xl font-bold text-[#5a5a4e] mb-2">Informations légales</h2>
<p className="text-[#8a8a7a]">Détails officiels du jeu-concours</p>
<div className="grid md:grid-cols-2 gap-8">
<div>
<h3 className="font-semibold mb-3 text-[#f59e0b]">Organisateur</h3>
<p className="text-sm">Thé Tip Top</p>
<p className="text-sm">18 Avenue des Thés</p>
<p className="text-sm">75001 Paris, France</p>
<p className="text-sm">SIRET: 12345678901234</p>
</div> </div>
<div> <div className="grid md:grid-cols-2 gap-6 mb-6">
<h3 className="font-semibold mb-3 text-[#f59e0b]">Huissier</h3> {/* Organisateur */}
<p className="text-sm">Maître Dupont</p> <div className="bg-white rounded-xl shadow-lg p-6 border-2 border-[#e5e4dc] hover:shadow-xl transition-shadow">
<div className="flex items-center gap-3 mb-4">
<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">75001 Paris, France</p>
<p className="text-sm text-[#8a8a7a]">SIRET: 12345678901234</p>
</div>
</div>
{/* Huissier */}
<div className="bg-white rounded-xl shadow-lg p-6 border-2 border-[#e5e4dc] hover:shadow-xl transition-shadow">
<div className="flex items-center gap-3 mb-4">
<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>
<div className="mt-6 pt-6 border-t border-white/20"> {/* Note légale */}
<p className="text-sm text-white/80"> <div className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] rounded-xl shadow-lg p-6 text-white text-center">
<div className="flex items-center justify-center gap-2 mb-3">
<span className="text-2xl">📜</span>
<h3 className="text-lg font-semibold">Note légale</h3>
</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. 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. Règlement déposé chez Maître Dupont, huissier de justice à Paris.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div>
</section> </section>
</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-b from-primary-50 to-white py-12 px-4"> <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-12 px-4">
<div className="max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-8"> <div className="max-w-4xl mx-auto bg-white rounded-xl shadow-lg border border-[#e5e4dc] p-8">
<h1 className="text-3xl font-bold text-gray-900 mb-6"> <h1 className="text-3xl font-bold text-[#5a5a4e] mb-6">
Conditions d utilisation Conditions d'utilisation
</h1> </h1>
<p className="text-sm text-gray-600 mb-8"> <p className="text-sm text-[#8a8a7a] mb-8">
Dernière mise à jour : 17 janvier 2025 Dernière mise à jour : 17 janvier 2025
</p> </p>
<div className="space-y-6 text-gray-700"> <div className="space-y-6 text-[#5a5a4e]">
<section> <section>
<h2 className="text-2xl font-semibold text-gray-900 mb-3"> <h2 className="text-2xl font-semibold text-[#5a5a4e] 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-gray-900 mb-3"> <h2 className="text-2xl font-semibold text-[#5a5a4e] 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-gray-900 mb-3"> <h2 className="text-2xl font-semibold text-[#5a5a4e] 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-gray-900 mb-3"> <h2 className="text-2xl font-semibold text-[#5a5a4e] 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-gray-900 mb-3"> <h2 className="text-2xl font-semibold text-[#5a5a4e] 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-gray-900 mb-3"> <h2 className="text-2xl font-semibold text-[#5a5a4e] 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-gray-900 mb-3"> <h2 className="text-2xl font-semibold text-[#5a5a4e] 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-gray-900 mb-3"> <h2 className="text-2xl font-semibold text-[#5a5a4e] 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-gray-900 mb-3"> <h2 className="text-2xl font-semibold text-[#5a5a4e] mb-3">
9. Modification des conditions 9. Modification des conditions
</h2> </h2>
<p> <p>
@ -127,38 +127,41 @@ export default function TermsPage() {
</section> </section>
<section> <section>
<h2 className="text-2xl font-semibold text-gray-900 mb-3"> <h2 className="text-2xl font-semibold text-[#5a5a4e] 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-gray-900 mb-3"> <h2 className="text-2xl font-semibold text-[#5a5a4e] 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-primary-600 hover:underline">contact@thetiptop.fr</a></li> <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>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-gray-200"> <div className="mt-8 pt-6 border-t border-[#e5e4dc]">
<a <a
href="/" href="/"
className="text-primary-600 hover:text-primary-700 font-medium" className="inline-flex items-center gap-2 text-[#d4a574] hover:text-[#c4956a] font-medium transition-colors group"
> >
← Retour à l accueil <svg className="w-5 h-5 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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"> <div className="flex items-center justify-between h-18 gap-4">
{/* Logo */} {/* Logo */}
<Link href={ROUTES.HOME} className="group flex items-center gap-3"> <Link href={ROUTES.HOME} className="group flex items-center gap-3 flex-shrink-0">
<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"> <nav className="hidden md:flex items-center gap-6 flex-shrink-0">
<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)] hover:scale-105 shadow-lg" 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"
> >
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)] hover:scale-105 shadow-lg flex items-center gap-2" 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"
> >
Participer Participer
<svg <svg
className={`w-4 h-4 transition-transform duration-300 ${isParticiperDropdownOpen ? 'rotate-180' : ''}`} className={`w-4 h-4 flex-shrink-0 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,31 +137,40 @@ export default function Header() {
</nav> </nav>
{/* Desktop Auth Buttons */} {/* Desktop Auth Buttons */}
<div className="hidden md:flex items-center gap-3"> <div className="hidden md:flex items-center gap-3 flex-shrink-0">
{isAuthenticated && ( {isAuthenticated && (
<> <>
<Link href={getDashboardRoute()}> <Link href={getDashboardRoute()}>
<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]"> <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">
<span className="text-sm">{user?.firstName} {user?.lastName}</span> <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-xs font-normal opacity-80">{user?.email}</span> <span className="text-xs text-[#8a8a7a] whitespace-nowrap overflow-hidden text-ellipsis max-w-[200px]">{user?.email}</span>
</button> </div>
</Link> </Link>
<Link href={ROUTES.PROFILE}> <Link href={ROUTES.PROFILE}>
<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]"> <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">
<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 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]"> <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">
<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 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]" 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"
> >
<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>
</> </>
@ -250,7 +259,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" 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"
onClick={() => setIsMobileMenuOpen(false)} onClick={() => setIsMobileMenuOpen(false)}
> >
🎯 Participer 🎯 Participer
@ -259,11 +268,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" 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"
> >
🎯 Participer 🎯 Participer
<svg <svg
className={`w-4 h-4 transition-transform ${isParticiperDropdownOpen ? 'rotate-180' : ''}`} className={`w-4 h-4 flex-shrink-0 transition-transform ${isParticiperDropdownOpen ? 'rotate-180' : ''}`}
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -305,7 +314,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"> <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">
<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>
@ -314,7 +323,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"> <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">
Profil Profil
</button> </button>
</Link> </Link>
@ -323,7 +332,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"> <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">
Mes gains Mes gains
</button> </button>
</Link> </Link>
@ -333,7 +342,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" 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"
> >
Déconnexion Déconnexion
</button> </button>

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: '/user/profile', PROFILE: '/users/profile',
UPDATE_PROFILE: '/user/profile', UPDATE_PROFILE: '/users/profile',
CHANGE_PASSWORD: '/user/change-password', CHANGE_PASSWORD: '/users/change-password',
}, },
} as const; } as const;