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

feat: update prize displays and improve layout consistency

Browse Source 
- 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>
This commit is contained in:
soufiane 2025-11-23 23:50:33 +01:00
parent 614116e2ee
commit 3d8d598792
4 changed files with 220 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
app/lots/page.tsx
View File

@ -1,5 +1,6 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import Link from "next/link"; import Link from "next/link";
import Image from "next/image";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Lots à gagner - Thé Tip Top", title: "Lots à gagner - Thé Tip Top",
@ -31,8 +32,14 @@ export default function LotsPage() {
<div className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] rounded-2xl p-8 shadow-2xl border-2 border-[#e5e4dc]"> <div className="bg-gradient-to-r from-[#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 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> </div>
<div className="flex-1 text-center md:text-left"> <div className="flex-1 text-center md:text-left">
@ -45,8 +52,8 @@ export default function LotsPage() {
<p className="text-white/90 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-white"> <div className="text-sm text-white/80">
Valeur : 360€ <span className="text-sm text-white/80 font-normal">Tirage sous contrôle d'huissier</span> Tirage sous contrôle d'huissier
</div> </div>
</div> </div>
</div> </div>
@ -62,9 +69,15 @@ export default function LotsPage() {
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{/* Prize 1 - Infuseur */} {/* Prize 1 - Infuseur */}
<div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden 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"> <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center p-2">
<div className="text-8xl">🍵</div> <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>
<div className="p-6"> <div className="p-6">
<div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3"> <div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3">
@ -74,21 +87,19 @@ export default function LotsPage() {
<p className="text-[#8a8a7a] 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="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>
</div> </div>
{/* Prize 2 - Thé détox */} {/* Prize 2 - Thé détox */}
<div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden 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"> <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center p-2">
<div className="text-8xl">📦</div> <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>
<div className="p-6"> <div className="p-6">
<div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3"> <div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3">
@ -98,21 +109,19 @@ export default function LotsPage() {
<p className="text-[#8a8a7a] 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="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>
</div> </div>
{/* Prize 3 - Thé signature */} {/* Prize 3 - Thé signature */}
<div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden 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"> <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center p-2">
<div className="text-8xl">🌿</div> <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>
<div className="p-6"> <div className="p-6">
<div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3"> <div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3">
@ -122,21 +131,19 @@ export default function LotsPage() {
<p className="text-[#8a8a7a] 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="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>
</div> </div>
{/* Prize 4 - Coffret 39€ */} {/* Prize 4 - Coffret 39€ */}
<div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden 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"> <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center p-2">
<div className="text-8xl">🎁</div> <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>
<div className="p-6"> <div className="p-6">
<div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3"> <div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3">
@ -146,21 +153,19 @@ export default function LotsPage() {
<p className="text-[#8a8a7a] 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="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>
</div> </div>
{/* Prize 5 - Coffret 69€ */} {/* Prize 5 - Coffret 69€ */}
<div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border border-[#e5e4dc]"> <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden 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"> <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center p-2">
<div className="text-8xl">🎁</div> <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>
<div className="p-6"> <div className="p-6">
<div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3"> <div className="inline-block bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a] text-sm font-bold px-3 py-1 rounded-full mb-3">
@ -170,21 +175,19 @@ export default function LotsPage() {
<p className="text-[#8a8a7a] 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="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>
</div> </div>
{/* Prize 6 - Tirage Final */} {/* Prize 6 - Tirage Final */}
<div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border-2 border-[#d4a574]"> <div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden border-2 border-[#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"> <div className="aspect-square bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 flex items-center justify-center p-2">
<div className="text-8xl">🏆</div> <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>
<div className="p-6"> <div className="p-6">
<div className="inline-block bg-gradient-to-r from-[#d4a574] to-[#c4956a] text-white text-sm font-bold px-3 py-1 rounded-full mb-3 shadow-md"> <div className="inline-block bg-gradient-to-r from-[#d4a574] to-[#c4956a] text-white text-sm font-bold px-3 py-1 rounded-full mb-3 shadow-md">
@ -192,16 +195,8 @@ export default function LotsPage() {
</div> </div>
<h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Tirage Final</h3> <h3 className="text-xl font-bold text-[#5a5a4e] mb-2">Tirage Final</h3>
<p className="text-[#8a8a7a] text-sm mb-4"> <p className="text-[#8a8a7a] text-sm mb-4">
Valeur 360€ - Livraison mensuelle pendant 12 mois Livraison mensuelle pendant 12 mois
</p> </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>

88
app/page.tsx
View File

@ -209,11 +209,17 @@ export default function HomePage() {
Découvrez nos magnifiques prix, des accessoires premium aux coffrets exclusifs Découvrez nos magnifiques prix, des accessoires premium aux coffrets exclusifs
</p> </p>
<div className="grid md:grid-cols-2 lg:grid-cols-5 gap-6"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{/* Prize 1 */} {/* Prize 1 */}
<div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border border-gray-100"> <div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border border-gray-100 h-full flex flex-col">
<div className="aspect-square bg-gradient-to-br from-amber-50 to-orange-50 flex items-center justify-center p-8"> <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center p-2">
<div className="text-7xl">🍵</div> <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>
<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-red-100 text-red-600 text-sm font-bold px-3 py-1 rounded-full mb-3">
@ -221,15 +227,21 @@ export default function HomePage() {
</div> </div>
<h3 className="text-xl font-bold text-gray-900 mb-2">Infuseur à thé premium</h3> <h3 className="text-xl font-bold text-gray-900 mb-2">Infuseur à thé premium</h3>
<p className="text-gray-600 text-sm"> <p className="text-gray-600 text-sm">
Un infuseur élégant pour 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> </div>
</div> </div>
{/* Prize 2 */} {/* Prize 2 */}
<div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border border-gray-100"> <div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border border-gray-100 h-full flex flex-col">
<div className="aspect-square bg-gradient-to-br from-green-50 to-emerald-50 flex items-center justify-center p-8"> <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center p-2">
<div className="text-7xl">📦</div> <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>
<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-orange-100 text-orange-600 text-sm font-bold px-3 py-1 rounded-full mb-3">
@ -243,9 +255,15 @@ export default function HomePage() {
</div> </div>
{/* Prize 3 */} {/* Prize 3 */}
<div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border border-gray-100"> <div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border border-gray-100 h-full flex flex-col">
<div className="aspect-square bg-gradient-to-br from-blue-50 to-cyan-50 flex items-center justify-center p-8"> <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center p-2">
<div className="text-7xl">🌿</div> <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>
<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-green-100 text-green-600 text-sm font-bold px-3 py-1 rounded-full mb-3">
@ -259,9 +277,15 @@ export default function HomePage() {
</div> </div>
{/* Prize 4 */} {/* Prize 4 */}
<div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border border-gray-100"> <div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border border-gray-100 h-full flex flex-col">
<div className="aspect-square bg-gradient-to-br from-purple-50 to-pink-50 flex items-center justify-center p-8"> <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center p-2">
<div className="text-7xl">🎁</div> <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>
<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-purple-100 text-purple-600 text-sm font-bold px-3 py-1 rounded-full mb-3">
@ -275,20 +299,48 @@ export default function HomePage() {
</div> </div>
{/* Prize 5 */} {/* Prize 5 */}
<div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border-2 border-[#f59e0b]"> <div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border border-gray-100 h-full flex flex-col">
<div className="aspect-square bg-gradient-to-br from-yellow-50 to-amber-50 flex items-center justify-center p-8"> <div className="aspect-square bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0] flex items-center justify-center p-2">
<div className="text-7xl">🏆</div> <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>
<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-yellow-100 text-yellow-700 text-sm font-bold px-3 py-1 rounded-full mb-3">
4% 4%
</div> </div>
<h3 className="text-xl font-bold text-gray-900 mb-2">Coffret découverte 69€</h3> <h3 className="text-xl font-bold text-gray-900 mb-2">Coffret prestige 69€</h3>
<p className="text-gray-600 text-sm"> <p className="text-gray-600 text-sm">
Une expérience complète Une expérience complète
</p> </p>
</div> </div>
</div> </div>
{/* Prize 6 - Tirage Final */}
<div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow 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-gray-900 mb-2">Tirage Final</h3>
<p className="text-gray-600 text-sm">
Livraison mensuelle pendant 12 mois
</p>
</div>
</div>
</div> </div>
<div className="text-center mt-12"> <div className="text-center mt-12">

39
components/AboutContest.tsx
View File

@ -69,38 +69,15 @@ export default function AboutContest({
{/* Image */} {/* Image */}
<div className="order-1 md:order-2"> <div className="order-1 md:order-2">
<div className="relative rounded-2xl overflow-hidden shadow-2xl"> <div className="relative rounded-2xl overflow-hidden shadow-2xl">
{/* Fallback avec illustration CSS si l'image n'existe pas */} <div className="aspect-square relative">
<div className="aspect-[4/3] bg-gradient-to-br from-[#1a4d2e] via-[#2d5a3d] to-[#1a4d2e] relative"> <Image
{/* Motif décoratif */} src="/images/lots/acceuil.png"
<div className="absolute inset-0 opacity-20"> alt="Jeu Concours Thé Tip Top - Boutique Premium à Nice"
<div className="absolute inset-0" style={{ width={800}
backgroundImage: 'url("data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.3\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")', height={800}
}}></div> className="w-full h-full object-cover"
</div> />
{/* Icône de thé */}
<div className="absolute inset-0 flex items-center justify-center">
<div className="text-9xl opacity-40">🍵</div>
</div>
{/* Badges décoratifs */}
<div className="absolute top-4 right-4 bg-[#f59e0b] text-white px-4 py-2 rounded-full font-bold shadow-lg">
10 ans
</div>
<div className="absolute bottom-4 left-4 bg-white/90 backdrop-blur-sm text-[#1a4d2e] px-4 py-2 rounded-full font-bold shadow-lg">
Premium Bio
</div>
</div> </div>
{/* Note: Vous pouvez remplacer le div ci-dessus par une vraie image :
<Image
src={imageUrl}
alt="Collection de thés Thé Tip Top"
width={600}
height={450}
className="w-full h-full object-cover"
/>
*/}
</div> </div>
</div> </div>
</div> </div>

103
components/Footer.tsx
View File

@ -1,13 +1,43 @@
'use client'; 'use client';
import { useState } from 'react';
import Link from 'next/link'; import Link from 'next/link';
import Logo from './Logo'; import Logo from './Logo';
import { ROUTES } from '@/utils/constants'; import { ROUTES } from '@/utils/constants';
import { useAuth } from '@/contexts/AuthContext'; import { useAuth } from '@/contexts/AuthContext';
import { newsletterService } from '@/services/newsletter.service';
export default function Footer() { export default function Footer() {
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
const { isAuthenticated } = useAuth(); const { isAuthenticated } = useAuth();
const [email, setEmail] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
const handleNewsletterSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!email) {
setMessage({ type: 'error', text: 'Veuillez entrer votre email' });
return;
}
setIsLoading(true);
setMessage(null);
try {
const response = await newsletterService.subscribe({ email });
setMessage({ type: 'success', text: response.message || 'Inscription réussie !' });
setEmail('');
} catch (error: any) {
setMessage({
type: 'error',
text: error.message || 'Une erreur est survenue. Veuillez réessayer.'
});
} finally {
setIsLoading(false);
}
};
return ( return (
<footer className="bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] text-[#5a5a4e] border-t-2 border-[#e5e4dc]"> <footer className="bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] text-[#5a5a4e] border-t-2 border-[#e5e4dc]">
@ -47,7 +77,7 @@ export default function Footer() {
</svg> </svg>
</a> </a>
<a <a
href="https://pinterest.com" href="https://www.pinterest.com/The_Tip_Top_/"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors" className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
@ -140,28 +170,42 @@ export default function Footer() {
</ul> </ul>
</div> </div>
{/* Contact */} {/* Newsletter */}
<div> <div>
<h3 className="text-lg font-semibold text-[#d4a574] mb-4">CONTACT</h3> <h3 className="text-lg font-semibold text-[#d4a574] mb-4">NEWSLETTER</h3>
<ul className="space-y-3 text-sm text-[#8a8a7a]"> <p className="text-sm text-[#8a8a7a] mb-4">
<li className="flex items-start gap-2"> Inscrivez-vous pour recevoir nos offres exclusives et nouveautés !
<span className="mt-1">📍</span> </p>
<span> <form onSubmit={handleNewsletterSubmit} className="space-y-3">
18 Avenue Thiers <div>
<br /> <input
06000 Nice, France type="email"
</span> value={email}
</li> onChange={(e) => setEmail(e.target.value)}
<li className="flex items-center gap-2"> placeholder="Votre email"
<span>📞</span> className="w-full px-4 py-2 text-sm border border-[#e5e4dc] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent bg-white text-[#5a5a4e] placeholder-[#a0a098]"
<a disabled={isLoading}
href="tel:+33123456789" />
className="hover:text-[#d4a574] transition-colors" </div>
<button
type="submit"
disabled={isLoading}
className="w-full px-4 py-2 text-sm font-medium text-white bg-[#d4a574] rounded-lg hover:bg-[#c49563] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{isLoading ? 'Inscription...' : "S'inscrire"}
</button>
{message && (
<p
className={`text-xs ${
message.type === 'success' ? 'text-green-600' : 'text-red-600'
}`}
> >
01 23 45 67 89 {message.text}
</a> </p>
</li> )}
<li className="flex items-center gap-2"> </form>
<div className="mt-4 pt-4 border-t border-[#e5e4dc]">
<p className="text-xs text-[#8a8a7a] flex items-center gap-1">
<span>✉️</span> <span>✉️</span>
<a <a
href="mailto:contact@thetiptop.fr" href="mailto:contact@thetiptop.fr"
@ -169,12 +213,17 @@ export default function Footer() {
> >
contact@thetiptop.fr contact@thetiptop.fr
</a> </a>
</li> </p>
<li className="flex items-center gap-2"> <p className="text-xs text-[#8a8a7a] mt-1 flex items-center gap-1">
<span>🕐</span> <span>📞</span>
<span>Lun - Sam: 9h - 19h</span> <a
</li> href="tel:+33123456789"
</ul> className="hover:text-[#d4a574] transition-colors"
>
01 23 45 67 89
</a>
</p>
</div>
</div> </div>
</div> </div>
</div> </div>