soufiane
3d8d598792
- Update prize titles to include prices (39€, 69€) on lots page - Replace emoji icons with actual product images on homepage - Add Grand Prize (1 an de thé) to homepage prize grid - Standardize image padding and alignment across all prize cards - Ensure all prize cards have equal heights for better visual alignment - Update AboutContest component to use real image (acceuil.png) - Add official Pinterest link to footer 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
230 lines
11 KiB
TypeScript
230 lines
11 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
|
|
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 p-3 shadow-md">
|
|
<Image
|
|
src="/images/lots/grand-prix.png"
|
|
alt="Grand prix"
|
|
width={128}
|
|
height={128}
|
|
className="w-full h-full object-contain object-center"
|
|
/>
|
|
</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-sm text-white/80">
|
|
Tirage sous contrôle d'huissier
|
|
</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] h-full flex flex-col">
|
|
<div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center p-2">
|
|
<Image
|
|
src="/images/lots/infuseur.png"
|
|
alt="Infuseur à thé premium"
|
|
width={400}
|
|
height={400}
|
|
className="w-full h-full object-contain object-center"
|
|
/>
|
|
</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>
|
|
</div>
|
|
|
|
{/* Prize 2 - Thé détox */}
|
|
<div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc] h-full flex flex-col">
|
|
<div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center p-2">
|
|
<Image
|
|
src="/images/lots/the-detox.png"
|
|
alt="Boîte 100g thé détox"
|
|
width={400}
|
|
height={400}
|
|
className="w-full h-full object-contain object-center"
|
|
/>
|
|
</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>
|
|
</div>
|
|
|
|
{/* Prize 3 - Thé signature */}
|
|
<div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc] h-full flex flex-col">
|
|
<div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center p-2">
|
|
<Image
|
|
src="/images/lots/the-signature.png"
|
|
alt="Boîte 100g thé signature"
|
|
width={400}
|
|
height={400}
|
|
className="w-full h-full object-contain object-center"
|
|
/>
|
|
</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>
|
|
</div>
|
|
|
|
{/* Prize 4 - Coffret 39€ */}
|
|
<div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc] h-full flex flex-col">
|
|
<div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center p-2">
|
|
<Image
|
|
src="/images/lots/coffret-39.png"
|
|
alt="Coffret découverte 39€"
|
|
width={400}
|
|
height={400}
|
|
className="w-full h-full object-contain object-center"
|
|
/>
|
|
</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>
|
|
</div>
|
|
|
|
{/* Prize 5 - Coffret 69€ */}
|
|
<div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc] h-full flex flex-col">
|
|
<div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center p-2">
|
|
<Image
|
|
src="/images/lots/coffret-69.jpg"
|
|
alt="Coffret prestige 69€"
|
|
width={400}
|
|
height={400}
|
|
className="w-full h-full object-contain object-center"
|
|
/>
|
|
</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>
|
|
</div>
|
|
|
|
{/* Prize 6 - Tirage Final */}
|
|
<div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border-2 border-[#d4a574] h-full flex flex-col">
|
|
<div className="aspect-square bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 flex items-center justify-center p-2">
|
|
<Image
|
|
src="/images/lots/grand-prix.png"
|
|
alt="Grand prix - 1 an de thé"
|
|
width={400}
|
|
height={400}
|
|
className="w-full h-full object-contain object-center"
|
|
/>
|
|
</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">
|
|
Livraison mensuelle pendant 12 mois
|
|
</p>
|
|
</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>
|
|
);
|
|
}
|