feat: update prize displays and improve layout consistency
- 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:
parent
614116e2ee
commit
3d8d598792
|
|
@ -1,5 +1,6 @@
|
|||
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",
|
||||
|
|
@ -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="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 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">
|
||||
|
|
@ -45,8 +52,8 @@ export default function LotsPage() {
|
|||
<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 className="text-sm text-white/80">
|
||||
Tirage sous contrôle d'huissier
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -62,9 +69,15 @@ export default function LotsPage() {
|
|||
<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 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">
|
||||
|
|
@ -74,21 +87,19 @@ export default function LotsPage() {
|
|||
<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 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">
|
||||
|
|
@ -98,21 +109,19 @@ export default function LotsPage() {
|
|||
<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 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">
|
||||
|
|
@ -122,21 +131,19 @@ export default function LotsPage() {
|
|||
<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 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">
|
||||
|
|
@ -146,21 +153,19 @@ export default function LotsPage() {
|
|||
<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 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">
|
||||
|
|
@ -170,21 +175,19 @@ export default function LotsPage() {
|
|||
<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 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">
|
||||
|
|
@ -192,16 +195,8 @@ export default function LotsPage() {
|
|||
</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
|
||||
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>
|
||||
|
||||
|
|
|
|||
88
app/page.tsx
88
app/page.tsx
|
|
@ -209,11 +209,17 @@ export default function HomePage() {
|
|||
Découvrez nos magnifiques prix, des accessoires premium aux coffrets exclusifs
|
||||
</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 */}
|
||||
<div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border border-gray-100">
|
||||
<div className="aspect-square bg-gradient-to-br from-amber-50 to-orange-50 flex items-center justify-center p-8">
|
||||
<div className="text-7xl">🍵</div>
|
||||
<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-[#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-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>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-2">Infuseur à thé premium</h3>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Prize 2 */}
|
||||
<div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border border-gray-100">
|
||||
<div className="aspect-square bg-gradient-to-br from-green-50 to-emerald-50 flex items-center justify-center p-8">
|
||||
<div className="text-7xl">📦</div>
|
||||
<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-[#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-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>
|
||||
|
||||
{/* Prize 3 */}
|
||||
<div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border border-gray-100">
|
||||
<div className="aspect-square bg-gradient-to-br from-blue-50 to-cyan-50 flex items-center justify-center p-8">
|
||||
<div className="text-7xl">🌿</div>
|
||||
<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-[#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-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>
|
||||
|
||||
{/* Prize 4 */}
|
||||
<div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border border-gray-100">
|
||||
<div className="aspect-square bg-gradient-to-br from-purple-50 to-pink-50 flex items-center justify-center p-8">
|
||||
<div className="text-7xl">🎁</div>
|
||||
<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-[#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-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>
|
||||
|
||||
{/* Prize 5 */}
|
||||
<div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow border-2 border-[#f59e0b]">
|
||||
<div className="aspect-square bg-gradient-to-br from-yellow-50 to-amber-50 flex items-center justify-center p-8">
|
||||
<div className="text-7xl">🏆</div>
|
||||
<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-[#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-yellow-100 text-yellow-700 text-sm font-bold px-3 py-1 rounded-full mb-3">
|
||||
4%
|
||||
</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">
|
||||
Une expérience complète
|
||||
</p>
|
||||
</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 className="text-center mt-12">
|
||||
|
|
|
|||
|
|
@ -69,38 +69,15 @@ export default function AboutContest({
|
|||
{/* Image */}
|
||||
<div className="order-1 md:order-2">
|
||||
<div className="relative rounded-2xl overflow-hidden shadow-2xl">
|
||||
{/* Fallback avec illustration CSS si l'image n'existe pas */}
|
||||
<div className="aspect-[4/3] bg-gradient-to-br from-[#1a4d2e] via-[#2d5a3d] to-[#1a4d2e] relative">
|
||||
{/* Motif décoratif */}
|
||||
<div className="absolute inset-0 opacity-20">
|
||||
<div className="absolute inset-0" style={{
|
||||
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")',
|
||||
}}></div>
|
||||
</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 className="aspect-square relative">
|
||||
<Image
|
||||
src="/images/lots/acceuil.png"
|
||||
alt="Jeu Concours Thé Tip Top - Boutique Premium à Nice"
|
||||
width={800}
|
||||
height={800}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,43 @@
|
|||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Logo from './Logo';
|
||||
import { ROUTES } from '@/utils/constants';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import { newsletterService } from '@/services/newsletter.service';
|
||||
|
||||
export default function Footer() {
|
||||
const currentYear = new Date().getFullYear();
|
||||
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 (
|
||||
<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>
|
||||
</a>
|
||||
<a
|
||||
href="https://pinterest.com"
|
||||
href="https://www.pinterest.com/The_Tip_Top_/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
|
||||
|
|
@ -140,28 +170,42 @@ export default function Footer() {
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Contact */}
|
||||
{/* Newsletter */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[#d4a574] mb-4">CONTACT</h3>
|
||||
<ul className="space-y-3 text-sm text-[#8a8a7a]">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="mt-1">📍</span>
|
||||
<span>
|
||||
18 Avenue Thiers
|
||||
<br />
|
||||
06000 Nice, France
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span>📞</span>
|
||||
<a
|
||||
href="tel:+33123456789"
|
||||
className="hover:text-[#d4a574] transition-colors"
|
||||
<h3 className="text-lg font-semibold text-[#d4a574] mb-4">NEWSLETTER</h3>
|
||||
<p className="text-sm text-[#8a8a7a] mb-4">
|
||||
Inscrivez-vous pour recevoir nos offres exclusives et nouveautés !
|
||||
</p>
|
||||
<form onSubmit={handleNewsletterSubmit} className="space-y-3">
|
||||
<div>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="Votre email"
|
||||
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]"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</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
|
||||
</a>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
{message.text}
|
||||
</p>
|
||||
)}
|
||||
</form>
|
||||
<div className="mt-4 pt-4 border-t border-[#e5e4dc]">
|
||||
<p className="text-xs text-[#8a8a7a] flex items-center gap-1">
|
||||
<span>✉️</span>
|
||||
<a
|
||||
href="mailto:contact@thetiptop.fr"
|
||||
|
|
@ -169,12 +213,17 @@ export default function Footer() {
|
|||
>
|
||||
contact@thetiptop.fr
|
||||
</a>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span>🕐</span>
|
||||
<span>Lun - Sam: 9h - 19h</span>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p className="text-xs text-[#8a8a7a] mt-1 flex items-center gap-1">
|
||||
<span>📞</span>
|
||||
<a
|
||||
href="tel:+33123456789"
|
||||
className="hover:text-[#d4a574] transition-colors"
|
||||
>
|
||||
01 23 45 67 89
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user