soufiane
0ade13d50d
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>
235 lines
13 KiB
TypeScript
235 lines
13 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Lots à gagner - Thé Tip Top",
|
|
description: "Découvrez tous les magnifiques prix de notre jeu-concours. Avec 100% de gagnants garantis, chaque participant repart avec un lot !",
|
|
};
|
|
|
|
export default function LotsPage() {
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]">
|
|
{/* Hero Section */}
|
|
<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="max-w-4xl mx-auto text-center">
|
|
<h1 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] mb-4">
|
|
Lots à gagner
|
|
</h1>
|
|
<p className="text-lg text-[#8a8a7a]">
|
|
Découvrez tous les magnifiques prix de notre jeu-concours. Avec 100% de gagnants garantis,
|
|
chaque participant repart avec un lot !
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Grand Prix Final */}
|
|
<section className="py-8">
|
|
<div className="container mx-auto px-4">
|
|
<div className="max-w-5xl mx-auto">
|
|
<div className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] rounded-2xl p-8 shadow-2xl border-2 border-[#e5e4dc]">
|
|
<div className="flex flex-col md:flex-row items-center gap-6">
|
|
<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>
|
|
</div>
|
|
<div className="flex-1 text-center md:text-left">
|
|
<div className="inline-block bg-white text-[#d4a574] text-xs font-bold px-3 py-1 rounded-full mb-2 shadow-md">
|
|
GRAND PRIX FINAL
|
|
</div>
|
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-2">
|
|
1 an de thé offert
|
|
</h2>
|
|
<p className="text-white/90 mb-3">
|
|
Le grand prix du tirage final : une année complète de thé premium livré chez vous
|
|
</p>
|
|
<div className="text-2xl font-bold text-white">
|
|
Valeur : 360€ <span className="text-sm text-white/80 font-normal">Tirage sous contrôle d'huissier</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Prizes Grid */}
|
|
<section className="py-8 pb-16">
|
|
<div className="container mx-auto px-4">
|
|
<div className="max-w-5xl mx-auto">
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
|
|
{/* Prize 1 - Infuseur */}
|
|
<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-[#faf9f5] to-[#f5f5f0] flex items-center justify-center">
|
|
<div className="text-8xl">🍵</div>
|
|
</div>
|
|
<div className="p-6">
|
|
<div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3">
|
|
60% des lots
|
|
</div>
|
|
<h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Infuseur à thé premium</h3>
|
|
<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
|
|
</p>
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-2xl font-bold text-[#d4a574]">15€</div>
|
|
<button className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors">
|
|
<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" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Prize 2 - Thé détox */}
|
|
<div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc]">
|
|
<div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center">
|
|
<div className="text-8xl">📦</div>
|
|
</div>
|
|
<div className="p-6">
|
|
<div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3">
|
|
20% des lots
|
|
</div>
|
|
<h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Boîte 100g thé détox</h3>
|
|
<p className="text-[#8a8a7a] text-sm mb-4">
|
|
Mélange détox aux plantes bio : menthe, citronnelle, fenouil et gingembre
|
|
</p>
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-2xl font-bold text-[#d4a574]">25€</div>
|
|
<button className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors">
|
|
<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" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Prize 3 - Thé signature */}
|
|
<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-[#faf9f5] to-[#f5f5f0] flex items-center justify-center">
|
|
<div className="text-8xl">🌿</div>
|
|
</div>
|
|
<div className="p-6">
|
|
<div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3">
|
|
10% des lots
|
|
</div>
|
|
<h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Boîte 100g thé signature</h3>
|
|
<p className="text-[#8a8a7a] text-sm mb-4">
|
|
Notre mélange signature exclusif : Earl Grey aux agrumes et pétales de fleurs
|
|
</p>
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-2xl font-bold text-[#d4a574]">35€</div>
|
|
<button className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors">
|
|
<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" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Prize 4 - Coffret 39€ */}
|
|
<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-[#faf9f5] to-[#f5f5f0] flex items-center justify-center">
|
|
<div className="text-8xl">🎁</div>
|
|
</div>
|
|
<div className="p-6">
|
|
<div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3">
|
|
6% des lots
|
|
</div>
|
|
<h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Coffret découverte 39€</h3>
|
|
<p className="text-[#8a8a7a] text-sm mb-4">
|
|
Sélection de nos 3 thés premium dans un élégant coffret cadeau
|
|
</p>
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-2xl font-bold text-[#d4a574]">39€</div>
|
|
<button className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors">
|
|
<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" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Prize 5 - Coffret 69€ */}
|
|
<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-[#faf9f5] to-[#f5f5f0] flex items-center justify-center">
|
|
<div className="text-8xl">🎁</div>
|
|
</div>
|
|
<div className="p-6">
|
|
<div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3">
|
|
4% des lots
|
|
</div>
|
|
<h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Coffret prestige 69€</h3>
|
|
<p className="text-[#8a8a7a] text-sm mb-4">
|
|
Collection premium : 5 thés d'exception avec accessoires dans un coffret luxe
|
|
</p>
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-2xl font-bold text-[#d4a574]">69€</div>
|
|
<button className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors">
|
|
<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" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Prize 6 - Tirage Final */}
|
|
<div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border-2 border-[#d4a574]">
|
|
<div className="aspect-square bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 flex items-center justify-center">
|
|
<div className="text-8xl">🏆</div>
|
|
</div>
|
|
<div className="p-6">
|
|
<div className="inline-block bg-gradient-to-r from-[#d4a574] to-[#c4956a] text-white text-sm font-bold px-3 py-1 rounded-full mb-3 shadow-md">
|
|
1 an de THÉ
|
|
</div>
|
|
<h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Tirage Final</h3>
|
|
<p className="text-[#8a8a7a] text-sm mb-4">
|
|
Valeur 360€ - Livraison mensuelle pendant 12 mois
|
|
</p>
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-2xl font-bold text-[#d4a574]">360€</div>
|
|
<button className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors">
|
|
<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" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="py-16">
|
|
<div className="container mx-auto px-4">
|
|
<div className="max-w-4xl mx-auto bg-gradient-to-r from-[#d4a574] to-[#c4956a] rounded-2xl shadow-2xl p-12 text-center text-white border-2 border-[#e5e4dc]">
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-4">
|
|
Prêt à découvrir votre lot ?
|
|
</h2>
|
|
<p className="text-xl mb-8 text-white/90 max-w-2xl mx-auto">
|
|
Achetez pour 49€ minimum de thé en boutique, récupérez votre code et
|
|
tentez votre chance ! Avec 100% de gagnants, vous ne pouvez que gagner.
|
|
</p>
|
|
<Link href="/register">
|
|
<button className="bg-white text-[#d4a574] hover:bg-[#f5f5f0] font-bold text-lg px-12 py-4 rounded-lg shadow-xl transition-all duration-300 hover:scale-105">
|
|
Participer maintenant
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|