feat: update client dashboard page with new color palette
- Replace hex colors with primary/secondary/beige Tailwind classes - Update background gradient to use beige colors - Update buttons to use primary green theme - Update statistics cards with primary/secondary colors - Update table headers and borders 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
98b23fe12e
commit
0efd921bbf
|
|
@ -64,21 +64,21 @@ export default function ClientPage() {
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-8">
|
<div className="min-h-screen bg-gradient-to-br from-beige-100 via-beige-50 to-beige-100 py-8">
|
||||||
<div className="container mx-auto px-4">
|
<div className="container mx-auto px-4">
|
||||||
{/* Welcome Section */}
|
{/* Welcome Section */}
|
||||||
<div className="mb-8">
|
<div className="mb-8">
|
||||||
<h1 className="text-4xl font-bold text-[#5a5a4e] mb-2">
|
<h1 className="text-4xl font-bold text-primary-500 mb-2">
|
||||||
Bonjour {user?.firstName} ! 👋
|
Bonjour {user?.firstName} !
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-[#8a8a7a]">
|
<p className="text-gray-600">
|
||||||
Bienvenue dans votre espace client
|
Bienvenue dans votre espace client
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Quick Action */}
|
{/* Quick Action */}
|
||||||
<div className="mb-8">
|
<div className="mb-8">
|
||||||
<div className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] text-white rounded-xl shadow-md p-8 border-2 border-[#e5e4dc]">
|
<div className="bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-xl shadow-md p-8 border-2 border-primary-400">
|
||||||
<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">
|
||||||
|
|
@ -89,8 +89,8 @@ export default function ClientPage() {
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<Link href={ROUTES.GAME}>
|
<Link href={ROUTES.GAME}>
|
||||||
<button className="bg-white text-[#d4a574] hover:bg-[#f5f5f0] font-bold px-8 py-4 rounded-lg transition-all shadow-lg hover:scale-105 duration-300 whitespace-nowrap">
|
<button className="bg-white text-primary-500 hover:bg-beige-50 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>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -99,54 +99,54 @@ export default function ClientPage() {
|
||||||
|
|
||||||
{/* Statistics Cards */}
|
{/* Statistics Cards */}
|
||||||
<div className="grid md:grid-cols-3 gap-6 mb-8">
|
<div className="grid md:grid-cols-3 gap-6 mb-8">
|
||||||
<div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]">
|
<div className="bg-white rounded-xl shadow-md p-6 border border-beige-300">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm font-medium text-[#8a8a7a] mb-2">
|
<p className="text-sm font-medium text-gray-600 mb-2">
|
||||||
Total Participations
|
Total Participations
|
||||||
</p>
|
</p>
|
||||||
<p className="text-4xl font-bold text-blue-600">
|
<p className="text-4xl font-bold text-primary-600">
|
||||||
{stats.total}
|
{stats.total}
|
||||||
</p>
|
</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-primary-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-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 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 border border-[#e5e4dc]">
|
<div className="bg-white rounded-xl shadow-md p-6 border border-beige-300">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm font-medium text-[#8a8a7a] mb-2">
|
<p className="text-sm font-medium text-gray-600 mb-2">
|
||||||
Gains réclamés
|
Gains réclamés
|
||||||
</p>
|
</p>
|
||||||
<p className="text-4xl font-bold text-green-600">
|
<p className="text-4xl font-bold text-primary-500">
|
||||||
{stats.claimed}
|
{stats.claimed}
|
||||||
</p>
|
</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-primary-100 rounded-full flex items-center justify-center">
|
||||||
<svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-8 h-8 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-white rounded-xl shadow-md p-6 border border-[#e5e4dc]">
|
<div className="bg-white rounded-xl shadow-md p-6 border border-beige-300">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm font-medium text-[#8a8a7a] mb-2">
|
<p className="text-sm font-medium text-gray-600 mb-2">
|
||||||
En attente
|
En attente
|
||||||
</p>
|
</p>
|
||||||
<p className="text-4xl font-bold text-yellow-600">
|
<p className="text-4xl font-bold text-secondary-600">
|
||||||
{stats.pending}
|
{stats.pending}
|
||||||
</p>
|
</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-secondary-100 rounded-full flex items-center justify-center">
|
||||||
<svg className="w-8 h-8 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-8 h-8 text-secondary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -155,12 +155,12 @@ export default function ClientPage() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Recent Tickets */}
|
{/* Recent Tickets */}
|
||||||
<div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
|
<div className="bg-white rounded-xl shadow-md overflow-hidden border border-beige-300">
|
||||||
<div className="px-6 py-4 border-b border-[#e5e4dc]">
|
<div className="px-6 py-4 border-b border-beige-300">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<h2 className="text-xl font-bold text-[#5a5a4e]">Mes derniers tickets</h2>
|
<h2 className="text-xl font-bold text-primary-500">Mes derniers tickets</h2>
|
||||||
<Link href={ROUTES.HISTORY}>
|
<Link href={ROUTES.HISTORY}>
|
||||||
<button className="text-[#d4a574] hover:text-[#c4956a] font-semibold text-sm transition-colors">
|
<button className="text-primary-500 hover:text-primary-600 font-semibold text-sm transition-colors">
|
||||||
Voir tout l'historique
|
Voir tout l'historique
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
@ -170,11 +170,11 @@ export default function ClientPage() {
|
||||||
{tickets.length === 0 ? (
|
{tickets.length === 0 ? (
|
||||||
<div className="text-center py-12">
|
<div className="text-center py-12">
|
||||||
<div className="text-6xl mb-4">🎲</div>
|
<div className="text-6xl mb-4">🎲</div>
|
||||||
<p className="text-[#8a8a7a] mb-4">
|
<p className="text-gray-600 mb-4">
|
||||||
Vous n'avez pas encore participé au jeu
|
Vous n'avez pas encore participé au jeu
|
||||||
</p>
|
</p>
|
||||||
<Link href={ROUTES.GAME}>
|
<Link href={ROUTES.GAME}>
|
||||||
<button className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300">
|
<button className="bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-400 hover:to-primary-500 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>
|
||||||
|
|
@ -183,22 +183,22 @@ export default function ClientPage() {
|
||||||
<div className="overflow-x-auto">
|
<div className="overflow-x-auto">
|
||||||
<table className="min-w-full">
|
<table className="min-w-full">
|
||||||
<thead>
|
<thead>
|
||||||
<tr className="border-b border-[#e5e4dc]">
|
<tr className="border-b border-beige-300">
|
||||||
<th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
|
<th className="px-6 py-3 text-left text-xs font-semibold text-primary-500 uppercase tracking-wider">
|
||||||
Code Ticket
|
Code Ticket
|
||||||
</th>
|
</th>
|
||||||
<th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
|
<th className="px-6 py-3 text-left text-xs font-semibold text-primary-500 uppercase tracking-wider">
|
||||||
Gain
|
Gain
|
||||||
</th>
|
</th>
|
||||||
<th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
|
<th className="px-6 py-3 text-left text-xs font-semibold text-primary-500 uppercase tracking-wider">
|
||||||
Statut
|
Statut
|
||||||
</th>
|
</th>
|
||||||
<th className="px-6 py-3 text-left text-xs font-semibold text-[#5a5a4e] uppercase tracking-wider">
|
<th className="px-6 py-3 text-left text-xs font-semibold text-primary-500 uppercase tracking-wider">
|
||||||
Date
|
Date
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody className="divide-y divide-[#e5e4dc]">
|
<tbody className="divide-y divide-beige-200">
|
||||||
{tickets.slice(0, 5).map((ticket) => (
|
{tickets.slice(0, 5).map((ticket) => (
|
||||||
<TicketTableRow key={ticket.id} ticket={ticket} />
|
<TicketTableRow key={ticket.id} ticket={ticket} />
|
||||||
))}
|
))}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user