feat: enhance homepage with animated tea icons and improve branding
Add animated tea icons background with 35 falling icons, update styling to match theme, and streamline branding across header and footer. Changes: - Add 35 animated tea icons with falling animation (no rotation) - Create fallDown animation with gentle horizontal oscillation - Add new homepage components (CountdownTimer, GamePeriod, GrandPrize, AboutContest) - Include tea icon images (teapot-green, tea-cup, gift-box, tea-leaves, teapot-pink) - Remove "Thé Tip Top" text branding from header and footer (keep logo only) - Add Pinterest social media icon to footer - Update button color scheme to match golden/beige theme (#d4a574, #c4956a) - Increase icon opacity to 50% for better visibility 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
99b5db71ab
commit
510eab7794
|
|
@ -61,4 +61,90 @@
|
|||
.animate-fadeIn {
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
/* Animations pour le Hero Section */
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
||||
25% { transform: translateY(-20px) rotate(5deg); }
|
||||
50% { transform: translateY(-10px) rotate(-5deg); }
|
||||
75% { transform: translateY(-15px) rotate(3deg); }
|
||||
}
|
||||
|
||||
@keyframes floatSlow {
|
||||
0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
|
||||
33% { transform: translateY(-30px) translateX(10px) rotate(10deg); }
|
||||
66% { transform: translateY(-15px) translateX(-10px) rotate(-10deg); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 0.3; transform: scale(1); }
|
||||
50% { opacity: 0.5; transform: scale(1.05); }
|
||||
}
|
||||
|
||||
@keyframes steam {
|
||||
0% { opacity: 0.6; transform: translateY(0px) translateX(0px) scale(1); }
|
||||
50% { opacity: 0.3; transform: translateY(-30px) translateX(10px) scale(1.2); }
|
||||
100% { opacity: 0; transform: translateY(-60px) translateX(-10px) scale(1.5); }
|
||||
}
|
||||
|
||||
.float-animation {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.float-slow {
|
||||
animation: floatSlow 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.pulse-animation {
|
||||
animation: pulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.steam-1 {
|
||||
animation: steam 3s ease-out infinite;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.steam-2 {
|
||||
animation: steam 3s ease-out infinite;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.steam-3 {
|
||||
animation: steam 3s ease-out infinite;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
/* Animation de descente douce du haut vers le bas sans rotation */
|
||||
@keyframes fallDown {
|
||||
0% {
|
||||
transform: translateY(-100vh) translateX(0px);
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
20% {
|
||||
transform: translateY(-60vh) translateX(15px);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-20vh) translateX(-10px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(20vh) translateX(20px);
|
||||
}
|
||||
80% {
|
||||
transform: translateY(60vh) translateX(-15px);
|
||||
}
|
||||
90% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100vh) translateX(0px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-float-gentle {
|
||||
animation: fallDown 15s linear infinite;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
201
app/page.tsx
201
app/page.tsx
|
|
@ -1,76 +1,135 @@
|
|||
import type { Metadata } from "next";
|
||||
'use client';
|
||||
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import Button from "@/components/Button";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Thé Tip Top - Grand Jeu Concours 10ème Anniversaire",
|
||||
description: "Célébrez nos 10 ans ! 100% de tickets gagnants. Participez au jeu-concours et gagnez des lots exceptionnels.",
|
||||
};
|
||||
import CountdownTimer from "@/components/CountdownTimer";
|
||||
import GamePeriod from "@/components/GamePeriod";
|
||||
import GrandPrize from "@/components/GrandPrize";
|
||||
import AboutContest from "@/components/AboutContest";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="min-h-screen -mt-[4.5rem]">
|
||||
{/* Hero Section - Bannière principale */}
|
||||
<section className="relative bg-gradient-to-br from-[#1a4d2e] via-[#2d5a3d] to-[#1a4d2e] pt-32 pb-24 overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<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.4\'%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 className="min-h-screen -mt-[4.5rem] relative">
|
||||
{/* Background avec icônes de thé */}
|
||||
<div className="fixed inset-0 -z-10 overflow-hidden">
|
||||
{/* Fond dégradé beige clair */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#fdfcf8] via-[#f8f6f0] to-[#f0ede5]"></div>
|
||||
|
||||
{/* Icônes de thé dispersées avec animation de descente - 35 icônes */}
|
||||
<div className="absolute inset-0 opacity-[0.5]">
|
||||
{/* Ligne 1 - 5 icons */}
|
||||
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[5%] left-[10%] animate-float-gentle" style={{animationDelay: '0s', animationDuration: '28s'}} />
|
||||
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[7%] left-[30%] animate-float-gentle" style={{animationDelay: '3s', animationDuration: '32s'}} />
|
||||
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[6%] left-[50%] animate-float-gentle" style={{animationDelay: '6s', animationDuration: '30s'}} />
|
||||
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[8%] left-[70%] animate-float-gentle" style={{animationDelay: '9s', animationDuration: '27s'}} />
|
||||
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[5%] left-[90%] animate-float-gentle" style={{animationDelay: '2s', animationDuration: '31s'}} />
|
||||
|
||||
{/* Ligne 2 - 5 icons */}
|
||||
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[18%] left-[15%] animate-float-gentle" style={{animationDelay: '4s', animationDuration: '29s'}} />
|
||||
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[20%] left-[35%] animate-float-gentle" style={{animationDelay: '7s', animationDuration: '26s'}} />
|
||||
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[19%] left-[55%] animate-float-gentle" style={{animationDelay: '1s', animationDuration: '33s'}} />
|
||||
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[21%] left-[75%] animate-float-gentle" style={{animationDelay: '10s', animationDuration: '28s'}} />
|
||||
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[18%] left-[95%] animate-float-gentle" style={{animationDelay: '5s', animationDuration: '30s'}} />
|
||||
|
||||
{/* Ligne 3 - 5 icons */}
|
||||
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[31%] left-[10%] animate-float-gentle" style={{animationDelay: '8s', animationDuration: '27s'}} />
|
||||
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[33%] left-[30%] animate-float-gentle" style={{animationDelay: '11s', animationDuration: '31s'}} />
|
||||
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[32%] left-[50%] animate-float-gentle" style={{animationDelay: '3s', animationDuration: '29s'}} />
|
||||
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[34%] left-[70%] animate-float-gentle" style={{animationDelay: '6s', animationDuration: '26s'}} />
|
||||
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[31%] left-[90%] animate-float-gentle" style={{animationDelay: '12s', animationDuration: '32s'}} />
|
||||
|
||||
{/* Ligne 4 - 5 icons */}
|
||||
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[44%] left-[15%] animate-float-gentle" style={{animationDelay: '2s', animationDuration: '28s'}} />
|
||||
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[46%] left-[35%] animate-float-gentle" style={{animationDelay: '9s', animationDuration: '30s'}} />
|
||||
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[45%] left-[55%] animate-float-gentle" style={{animationDelay: '4s', animationDuration: '33s'}} />
|
||||
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[47%] left-[75%] animate-float-gentle" style={{animationDelay: '7s', animationDuration: '27s'}} />
|
||||
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[44%] left-[95%] animate-float-gentle" style={{animationDelay: '1s', animationDuration: '29s'}} />
|
||||
|
||||
{/* Ligne 5 - 5 icons */}
|
||||
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[57%] left-[10%] animate-float-gentle" style={{animationDelay: '10s', animationDuration: '31s'}} />
|
||||
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[59%] left-[30%] animate-float-gentle" style={{animationDelay: '5s', animationDuration: '26s'}} />
|
||||
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[58%] left-[50%] animate-float-gentle" style={{animationDelay: '8s', animationDuration: '30s'}} />
|
||||
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[60%] left-[70%] animate-float-gentle" style={{animationDelay: '11s', animationDuration: '28s'}} />
|
||||
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[57%] left-[90%] animate-float-gentle" style={{animationDelay: '3s', animationDuration: '32s'}} />
|
||||
|
||||
{/* Ligne 6 - 5 icons */}
|
||||
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[70%] left-[15%] animate-float-gentle" style={{animationDelay: '6s', animationDuration: '29s'}} />
|
||||
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[72%] left-[35%] animate-float-gentle" style={{animationDelay: '9s', animationDuration: '27s'}} />
|
||||
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[71%] left-[55%] animate-float-gentle" style={{animationDelay: '2s', animationDuration: '31s'}} />
|
||||
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[73%] left-[75%] animate-float-gentle" style={{animationDelay: '12s', animationDuration: '28s'}} />
|
||||
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[70%] left-[95%] animate-float-gentle" style={{animationDelay: '4s', animationDuration: '30s'}} />
|
||||
|
||||
{/* Ligne 7 - 5 icons */}
|
||||
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[83%] left-[10%] animate-float-gentle" style={{animationDelay: '7s', animationDuration: '26s'}} />
|
||||
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[85%] left-[30%] animate-float-gentle" style={{animationDelay: '1s', animationDuration: '32s'}} />
|
||||
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[84%] left-[50%] animate-float-gentle" style={{animationDelay: '10s', animationDuration: '29s'}} />
|
||||
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[86%] left-[70%] animate-float-gentle" style={{animationDelay: '5s', animationDuration: '27s'}} />
|
||||
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[83%] left-[90%] animate-float-gentle" style={{animationDelay: '8s', animationDuration: '31s'}} />
|
||||
</div>
|
||||
|
||||
{/* Overlay lumineux pour harmoniser */}
|
||||
<div className="absolute inset-0 bg-gradient-radial from-white/30 via-transparent to-transparent"></div>
|
||||
</div>
|
||||
|
||||
{/* Hero Section - Bannière principale */}
|
||||
<section className="relative min-h-[600px] pt-32 pb-24 overflow-hidden">
|
||||
|
||||
<div className="w-full relative z-10">
|
||||
<div className="w-full text-center px-4">
|
||||
<h1 className="text-5xl md:text-6xl font-bold text-white mb-6 leading-tight">
|
||||
Un code, <span className="text-[#f59e0b]">un gain garanti !</span>
|
||||
<h1 className="text-5xl md:text-7xl font-bold text-[#5a5a4e] mb-6 leading-tight drop-shadow-sm">
|
||||
Jeu Concours Thé Tip Top<br />
|
||||
<span className="text-[#d4a574]">Nice</span>
|
||||
</h1>
|
||||
<p className="text-xl text-white/90 mb-8 leading-relaxed">
|
||||
Célébrez l'ouverture de notre 10<sup>e</sup> boutique avec notre grand jeu-concours.
|
||||
<br />
|
||||
<span className="font-semibold text-[#f59e0b]">100% des participants gagnent un magnifique lot !</span>
|
||||
<p className="text-xl md:text-2xl text-[#6a6a5e] mb-8 leading-relaxed max-w-4xl mx-auto">
|
||||
À l'occasion de l'ouverture de notre 10<sup>ème</sup> boutique de thé premium à Nice,<br />
|
||||
participez à notre concours et gagnez des thés et accessoires exclusifs !
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-12 px-4">
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center px-4">
|
||||
<Link href="/register">
|
||||
<button className="bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold text-lg px-10 py-4 rounded-lg shadow-xl transition-all w-full sm:w-auto">
|
||||
Participer maintenant
|
||||
<button className="bg-[#d4a574] hover:bg-[#c4956a] text-white font-bold text-lg px-12 py-5 rounded-full shadow-2xl transition-all w-full sm:w-auto hover:scale-105">
|
||||
Jouer maintenant
|
||||
</button>
|
||||
</Link>
|
||||
<Link href="/lots">
|
||||
<button className="bg-[#1a4d2e] hover:bg-[#2d5a3d] text-white font-bold text-lg px-10 py-4 rounded-lg shadow-xl transition-all w-full sm:w-auto">
|
||||
Voir les lots
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Stats badges */}
|
||||
<div className="flex flex-wrap justify-center gap-6 text-white px-4">
|
||||
<div className="flex items-center gap-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full">
|
||||
<svg className="w-5 h-5 text-[#f59e0b]" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span className="font-semibold">100% sécurisé</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full">
|
||||
<svg className="w-5 h-5 text-[#f59e0b]" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
<span className="font-semibold">100% gagnants</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full">
|
||||
<svg className="w-5 h-5 text-[#f59e0b]" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z" />
|
||||
<path fillRule="evenodd" d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span className="font-semibold">500 000 codes</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Game Period & Countdown Section */}
|
||||
<section className="py-20 bg-transparent">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{/* Countdown Timer */}
|
||||
<CountdownTimer
|
||||
endDate={new Date('2025-12-31T23:59:59')}
|
||||
title="Fin du concours dans"
|
||||
/>
|
||||
|
||||
{/* Game Period Cards */}
|
||||
<GamePeriod
|
||||
purchaseStartDate={new Date('2025-01-01')}
|
||||
purchaseEndDate={new Date('2025-12-31')}
|
||||
gameStartDate={new Date('2025-01-01')}
|
||||
gameEndDate={new Date('2025-12-31')}
|
||||
/>
|
||||
|
||||
{/* Grand Prize Banner */}
|
||||
<GrandPrize
|
||||
prizeAmount="360€"
|
||||
drawDate={new Date('2026-01-15')}
|
||||
participantsCount={15420}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* About Contest Section */}
|
||||
<AboutContest />
|
||||
|
||||
{/* How to Participate Section */}
|
||||
<section className="py-20 bg-white">
|
||||
<section className="py-20 bg-white/60 backdrop-blur-sm">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-center text-gray-900 mb-4">
|
||||
|
|
@ -134,7 +193,7 @@ export default function HomePage() {
|
|||
</section>
|
||||
|
||||
{/* Prizes Section */}
|
||||
<section className="py-20 bg-gradient-to-b from-gray-50 to-white">
|
||||
<section className="py-20 bg-transparent">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-center text-gray-900 mb-4">
|
||||
|
|
@ -244,44 +303,6 @@ export default function HomePage() {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats Section */}
|
||||
<section className="py-20 pb-0 bg-gradient-to-br from-[#1a4d2e] via-[#2d5a3d] to-[#1a4d2e] text-white">
|
||||
<div className="w-full px-0">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<div className="grid md:grid-cols-4 gap-8 text-center">
|
||||
<div>
|
||||
<div className="text-5xl font-bold text-[#f59e0b] mb-2">100%</div>
|
||||
<div className="text-lg text-white/90">Gagnants garantis</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-5xl font-bold text-[#f59e0b] mb-2">500k</div>
|
||||
<div className="text-lg text-white/90">Codes disponibles</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-5xl font-bold text-[#f59e0b] mb-2">10</div>
|
||||
<div className="text-lg text-white/90">Boutiques en France</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-5xl font-bold text-[#f59e0b] mb-2">360€</div>
|
||||
<div className="text-lg text-white/90">Gain en jeu</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 pb-20 text-center">
|
||||
<div className="inline-flex items-center gap-2 text-white/80 text-sm bg-white/10 px-6 py-3 rounded-full">
|
||||
<svg className="w-5 h-5 text-[#f59e0b]" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Jeu-concours certifié et contrôlé par un huissier de justice. Vos données sont protégées conformément au RGPD.</span>
|
||||
</div>
|
||||
<p className="mt-4 text-white/60 text-sm">
|
||||
Thés 100% bio et artisanaux.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
130
components/AboutContest.tsx
Normal file
130
components/AboutContest.tsx
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
'use client';
|
||||
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import Button from './Button';
|
||||
|
||||
interface AboutContestProps {
|
||||
title?: string;
|
||||
description?: string;
|
||||
imageUrl?: string;
|
||||
}
|
||||
|
||||
export default function AboutContest({
|
||||
title = "Jeu Concours Thé Tip Top - Boutique de Thé Premium à Nice",
|
||||
description,
|
||||
imageUrl = "/images/tea-collection.jpg",
|
||||
}: AboutContestProps) {
|
||||
const defaultDescription = `
|
||||
Bienvenue dans notre grand jeu-concours Thé Tip Top organisé à l'occasion de l'ouverture de notre 10ème boutique de thé premium à Nice.
|
||||
Nous vous offrons la chance de gagner des produits exceptionnels : thés bio, accessoires exclusifs et bien plus encore.
|
||||
|
||||
Participez facilement en quelques clics et tentez votre chance parmi nos lots prestigieux.
|
||||
Avec 100% de tickets gagnants, chaque participation vous offre la garantie de repartir avec un cadeau !
|
||||
`;
|
||||
|
||||
return (
|
||||
<section className="py-20 bg-transparent">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="grid md:grid-cols-2 gap-12 items-center">
|
||||
{/* Texte */}
|
||||
<div className="order-2 md:order-1">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6 leading-tight">
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
<div className="prose prose-lg text-gray-700 mb-8 space-y-4">
|
||||
{(description || defaultDescription).split('\n').filter(p => p.trim()).map((paragraph, index) => (
|
||||
<p key={index} className="leading-relaxed">
|
||||
{paragraph.trim()}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Points clés */}
|
||||
<div className="space-y-3 mb-8">
|
||||
<div className="flex items-start gap-3">
|
||||
<svg className="w-6 h-6 text-[#1a4d2e] flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span className="text-gray-800">
|
||||
<span className="font-semibold">100% de gagnants :</span> Chaque ticket acheté à 49€ vous fait gagner un lot
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3">
|
||||
<svg className="w-6 h-6 text-[#1a4d2e] flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span className="text-gray-800">
|
||||
<span className="font-semibold">Résultat immédiat :</span> Découvrez instantanément votre lot en ligne
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3">
|
||||
<svg className="w-6 h-6 text-[#1a4d2e] flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span className="text-gray-800">
|
||||
<span className="font-semibold">Thés bio et artisanaux :</span> Tous nos produits sont de qualité premium
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link href="/register">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#1a4d2e] hover:bg-[#2d5a3d] text-white font-bold shadow-xl"
|
||||
>
|
||||
En savoir plus
|
||||
<svg className="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||||
</svg>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* 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>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -27,15 +27,15 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|||
|
||||
const variants = {
|
||||
primary:
|
||||
"bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500",
|
||||
"bg-[#d4a574] text-white hover:bg-[#c4956a] focus:ring-[#d4a574] shadow-md hover:shadow-lg",
|
||||
secondary:
|
||||
"bg-secondary-500 text-white hover:bg-secondary-600 focus:ring-secondary-500",
|
||||
"bg-white text-[#5a5a4e] hover:bg-[#d4a574] hover:text-white focus:ring-[#d4a574] border border-[#e5e4dc] shadow-sm",
|
||||
outline:
|
||||
"border-2 border-primary-600 text-primary-600 hover:bg-primary-50 focus:ring-primary-500",
|
||||
"border-2 border-[#d4a574] text-[#d4a574] hover:bg-[#d4a574] hover:text-white focus:ring-[#d4a574] shadow-sm",
|
||||
danger:
|
||||
"bg-red-600 text-white hover:bg-red-700 focus:ring-red-500",
|
||||
"bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 shadow-md",
|
||||
success:
|
||||
"bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500",
|
||||
"bg-[#1a4d2e] text-white hover:bg-[#2d5a3d] focus:ring-[#1a4d2e] shadow-md hover:shadow-lg",
|
||||
};
|
||||
|
||||
const sizes = {
|
||||
|
|
|
|||
111
components/CountdownTimer.tsx
Normal file
111
components/CountdownTimer.tsx
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
interface CountdownTimerProps {
|
||||
endDate: Date;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
export default function CountdownTimer({ endDate, title = "Période de jeu" }: CountdownTimerProps) {
|
||||
const [timeLeft, setTimeLeft] = useState({
|
||||
days: 0,
|
||||
hours: 0,
|
||||
minutes: 0,
|
||||
seconds: 0,
|
||||
});
|
||||
const [progress, setProgress] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const calculateTimeLeft = () => {
|
||||
const now = new Date().getTime();
|
||||
const end = endDate.getTime();
|
||||
const difference = end - now;
|
||||
|
||||
if (difference > 0) {
|
||||
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
|
||||
const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
|
||||
const seconds = Math.floor((difference % (1000 * 60)) / 1000);
|
||||
|
||||
setTimeLeft({ days, hours, minutes, seconds });
|
||||
|
||||
// Calcul du pourcentage écoulé (exemple: 30 jours de concours)
|
||||
const totalDuration = 30 * 24 * 60 * 60 * 1000; // 30 jours en ms
|
||||
const elapsed = totalDuration - difference;
|
||||
const progressPercent = Math.min(Math.max((elapsed / totalDuration) * 100, 0), 100);
|
||||
setProgress(progressPercent);
|
||||
} else {
|
||||
setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
|
||||
setProgress(100);
|
||||
}
|
||||
};
|
||||
|
||||
calculateTimeLeft();
|
||||
const timer = setInterval(calculateTimeLeft, 1000);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, [endDate]);
|
||||
|
||||
return (
|
||||
<div className="bg-gradient-to-br from-[#f5f5f0] to-[#faf9f5] rounded-2xl shadow-lg p-8 border border-[#e5e4dc]">
|
||||
<div className="text-center mb-6">
|
||||
<h3 className="text-2xl font-bold text-[#5a5a4e] mb-2">{title}</h3>
|
||||
<p className="text-[#8a8a7a]">Utilisez vos tickets pour jouer et gagner des lots !</p>
|
||||
</div>
|
||||
|
||||
{/* Compteur principal */}
|
||||
<div className="mb-6">
|
||||
<div className="text-center mb-4">
|
||||
<div className="inline-flex items-baseline gap-2">
|
||||
<span className="text-6xl font-bold text-[#d4a574]">
|
||||
{timeLeft.days}
|
||||
</span>
|
||||
<span className="text-2xl font-semibold text-[#8a8a7a]">
|
||||
jour{timeLeft.days !== 1 ? 's' : ''}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm text-[#a0a098] mt-2">restants</div>
|
||||
</div>
|
||||
|
||||
{/* Détails temps */}
|
||||
<div className="flex justify-center gap-4 mb-4">
|
||||
<div className="text-center">
|
||||
<div className="bg-white/60 rounded-lg px-4 py-2 border border-[#e5e4dc]">
|
||||
<div className="text-2xl font-bold text-[#5a5a4e]">{String(timeLeft.hours).padStart(2, '0')}</div>
|
||||
<div className="text-xs text-[#8a8a7a]">heures</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center text-[#c4c4b8]">:</div>
|
||||
<div className="text-center">
|
||||
<div className="bg-white/60 rounded-lg px-4 py-2 border border-[#e5e4dc]">
|
||||
<div className="text-2xl font-bold text-[#5a5a4e]">{String(timeLeft.minutes).padStart(2, '0')}</div>
|
||||
<div className="text-xs text-[#8a8a7a]">minutes</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center text-[#c4c4b8]">:</div>
|
||||
<div className="text-center">
|
||||
<div className="bg-white/60 rounded-lg px-4 py-2 border border-[#e5e4dc]">
|
||||
<div className="text-2xl font-bold text-[#5a5a4e]">{String(timeLeft.seconds).padStart(2, '0')}</div>
|
||||
<div className="text-xs text-[#8a8a7a]">secondes</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Barre de progression */}
|
||||
<div className="relative">
|
||||
<div className="w-full bg-[#e5e4dc] rounded-full h-3 overflow-hidden">
|
||||
<div
|
||||
className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] h-3 rounded-full transition-all duration-1000 ease-out"
|
||||
style={{ width: `${progress}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<div className="flex justify-between mt-2 text-sm text-[#8a8a7a]">
|
||||
<span>Début du concours</span>
|
||||
<span className="font-semibold">{Math.round(progress)}% écoulé</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -8,17 +8,16 @@ export default function Footer() {
|
|||
const currentYear = new Date().getFullYear();
|
||||
|
||||
return (
|
||||
<footer className="bg-gradient-to-br from-[#1a4d2e] via-[#2d5a3d] to-[#1a4d2e] text-white">
|
||||
<footer className="bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] text-[#5a5a4e] border-t-2 border-[#e5e4dc]">
|
||||
{/* Main Footer */}
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{/* Company Info */}
|
||||
<div>
|
||||
<div className="mb-4">
|
||||
<Logo variant="white" size="md" showText={true} />
|
||||
<Logo variant="default" size="md" showText={true} />
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-[#f59e0b] mb-3">Thé Tip Top</h3>
|
||||
<p className="text-sm text-white/80 mb-4">
|
||||
<p className="text-sm text-[#8a8a7a] mb-4">
|
||||
Découvrez nos thés premium bio et artisanaux. Participez à notre grand
|
||||
jeu-concours 100% gagnant et tentez de remporter nos magnifiques lots !
|
||||
</p>
|
||||
|
|
@ -27,7 +26,7 @@ export default function Footer() {
|
|||
href="https://facebook.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-white/80 hover:text-white transition-colors"
|
||||
className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
|
||||
aria-label="Facebook"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
|
|
@ -38,26 +37,37 @@ export default function Footer() {
|
|||
href="https://instagram.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-white/80 hover:text-white transition-colors"
|
||||
className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
|
||||
aria-label="Instagram"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href="https://pinterest.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
|
||||
aria-label="Pinterest"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[#f59e0b] mb-4">
|
||||
<h3 className="text-lg font-semibold text-[#d4a574] mb-4">
|
||||
NAVIGATION
|
||||
</h3>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<Link
|
||||
href={ROUTES.HOME}
|
||||
className="text-sm text-white/80 hover:text-white transition-colors"
|
||||
className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
|
||||
>
|
||||
Accueil
|
||||
</Link>
|
||||
|
|
@ -65,7 +75,7 @@ export default function Footer() {
|
|||
<li>
|
||||
<Link
|
||||
href={ROUTES.GAME}
|
||||
className="text-sm text-white/80 hover:text-white transition-colors"
|
||||
className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
|
||||
>
|
||||
Participer au jeu
|
||||
</Link>
|
||||
|
|
@ -73,7 +83,7 @@ export default function Footer() {
|
|||
<li>
|
||||
<Link
|
||||
href="/about"
|
||||
className="text-sm text-white/80 hover:text-white transition-colors"
|
||||
className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
|
||||
>
|
||||
À propos
|
||||
</Link>
|
||||
|
|
@ -81,7 +91,7 @@ export default function Footer() {
|
|||
<li>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="text-sm text-white/80 hover:text-white transition-colors"
|
||||
className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
|
||||
>
|
||||
Contact
|
||||
</Link>
|
||||
|
|
@ -89,7 +99,7 @@ export default function Footer() {
|
|||
<li>
|
||||
<Link
|
||||
href="/faq"
|
||||
className="text-sm text-white/80 hover:text-white transition-colors"
|
||||
className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
|
||||
>
|
||||
FAQ
|
||||
</Link>
|
||||
|
|
@ -99,12 +109,12 @@ export default function Footer() {
|
|||
|
||||
{/* Legal */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[#f59e0b] mb-4">LÉGAL</h3>
|
||||
<h3 className="text-lg font-semibold text-[#d4a574] mb-4">LÉGAL</h3>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<Link
|
||||
href="/terms"
|
||||
className="text-sm text-white/80 hover:text-white transition-colors"
|
||||
className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
|
||||
>
|
||||
Conditions d'utilisation
|
||||
</Link>
|
||||
|
|
@ -112,7 +122,7 @@ export default function Footer() {
|
|||
<li>
|
||||
<Link
|
||||
href="/privacy"
|
||||
className="text-sm text-white/80 hover:text-white transition-colors"
|
||||
className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
|
||||
>
|
||||
Politique de confidentialité
|
||||
</Link>
|
||||
|
|
@ -120,7 +130,7 @@ export default function Footer() {
|
|||
<li>
|
||||
<Link
|
||||
href="/rules"
|
||||
className="text-sm text-white/80 hover:text-white transition-colors"
|
||||
className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
|
||||
>
|
||||
Règlement du jeu
|
||||
</Link>
|
||||
|
|
@ -128,7 +138,7 @@ export default function Footer() {
|
|||
<li>
|
||||
<Link
|
||||
href="/cookies"
|
||||
className="text-sm text-white/80 hover:text-white transition-colors"
|
||||
className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
|
||||
>
|
||||
Gestion des cookies
|
||||
</Link>
|
||||
|
|
@ -136,7 +146,7 @@ export default function Footer() {
|
|||
<li>
|
||||
<Link
|
||||
href="/legal"
|
||||
className="text-sm text-white/80 hover:text-white transition-colors"
|
||||
className="text-sm text-[#8a8a7a] hover:text-[#d4a574] transition-colors"
|
||||
>
|
||||
Mentions légales
|
||||
</Link>
|
||||
|
|
@ -146,8 +156,8 @@ export default function Footer() {
|
|||
|
||||
{/* Contact */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[#f59e0b] mb-4">CONTACT</h3>
|
||||
<ul className="space-y-3 text-sm text-white/80">
|
||||
<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>
|
||||
|
|
@ -160,7 +170,7 @@ export default function Footer() {
|
|||
<span>📞</span>
|
||||
<a
|
||||
href="tel:+33123456789"
|
||||
className="hover:text-white transition-colors"
|
||||
className="hover:text-[#d4a574] transition-colors"
|
||||
>
|
||||
01 23 45 67 89
|
||||
</a>
|
||||
|
|
@ -169,7 +179,7 @@ export default function Footer() {
|
|||
<span>✉️</span>
|
||||
<a
|
||||
href="mailto:contact@thetiptop.fr"
|
||||
className="hover:text-white transition-colors"
|
||||
className="hover:text-[#d4a574] transition-colors"
|
||||
>
|
||||
contact@thetiptop.fr
|
||||
</a>
|
||||
|
|
@ -184,11 +194,11 @@ export default function Footer() {
|
|||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="border-t border-white/10">
|
||||
<div className="border-t border-[#e5e4dc]">
|
||||
<div className="container mx-auto px-4 py-6">
|
||||
<div className="flex items-center justify-center text-sm">
|
||||
<p className="text-white/80">
|
||||
© {currentYear} Thé Tip Top. Tous droits réservés. <span className="text-white/60 text-xs">Site étudiant</span>
|
||||
<p className="text-[#8a8a7a]">
|
||||
© {currentYear} Tous droits réservés. <span className="text-[#a0a098] text-xs">Site étudiant</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
97
components/GamePeriod.tsx
Normal file
97
components/GamePeriod.tsx
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
'use client';
|
||||
|
||||
interface GamePeriodProps {
|
||||
purchaseStartDate: Date;
|
||||
purchaseEndDate: Date;
|
||||
gameStartDate: Date;
|
||||
gameEndDate: Date;
|
||||
}
|
||||
|
||||
export default function GamePeriod({
|
||||
purchaseStartDate,
|
||||
purchaseEndDate,
|
||||
gameStartDate,
|
||||
gameEndDate,
|
||||
}: GamePeriodProps) {
|
||||
const formatDate = (date: Date) => {
|
||||
return date.toLocaleDateString('fr-FR', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid md:grid-cols-2 gap-6 mt-8">
|
||||
{/* Période d'achat */}
|
||||
<div className="bg-white rounded-2xl shadow-lg p-8 border-2 border-[#f59e0b] hover:shadow-xl transition-shadow">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="bg-gradient-to-br from-[#fef3c7] to-[#fde68a] rounded-full p-4 flex-shrink-0">
|
||||
<svg className="w-8 h-8 text-[#f59e0b]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-3">Période d'achat</h3>
|
||||
<p className="text-gray-600 mb-4">
|
||||
Achetez vos tickets de 49€ en boutique et obtenez votre code de participation
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<svg className="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span className="text-gray-700">
|
||||
<span className="font-semibold">Du</span> {formatDate(purchaseStartDate)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<svg className="w-5 h-5 text-red-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span className="text-gray-700">
|
||||
<span className="font-semibold">Au</span> {formatDate(purchaseEndDate)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Période de jeu */}
|
||||
<div className="bg-white rounded-2xl shadow-lg p-8 border-2 border-[#1a4d2e] hover:shadow-xl transition-shadow">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="bg-gradient-to-br from-[#d1fae5] to-[#a7f3d0] rounded-full p-4 flex-shrink-0">
|
||||
<svg className="w-8 h-8 text-[#1a4d2e]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-3">Période de jeu</h3>
|
||||
<p className="text-gray-600 mb-4">
|
||||
Utilisez vos tickets pour jouer et découvrir vos lots instantanément
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<svg className="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span className="text-gray-700">
|
||||
<span className="font-semibold">Du</span> {formatDate(gameStartDate)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<svg className="w-5 h-5 text-red-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span className="text-gray-700">
|
||||
<span className="font-semibold">Au</span> {formatDate(gameEndDate)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
90
components/GrandPrize.tsx
Normal file
90
components/GrandPrize.tsx
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
'use client';
|
||||
|
||||
interface GrandPrizeProps {
|
||||
prizeAmount?: string;
|
||||
drawDate?: Date;
|
||||
participantsCount?: number;
|
||||
}
|
||||
|
||||
export default function GrandPrize({
|
||||
prizeAmount = "360€",
|
||||
drawDate,
|
||||
participantsCount,
|
||||
}: GrandPrizeProps) {
|
||||
const formatDate = (date: Date) => {
|
||||
return date.toLocaleDateString('fr-FR', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-gradient-to-br from-[#fff8e8] via-[#fff4d9] to-[#ffefc4] rounded-2xl shadow-xl p-8 border-2 border-[#d4a574] mt-8">
|
||||
<div className="flex items-start gap-6">
|
||||
{/* Icône trophée */}
|
||||
<div className="flex-shrink-0">
|
||||
<div className="bg-white rounded-full p-4 shadow-lg">
|
||||
<svg className="w-12 h-12 text-[#d4a574]" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contenu */}
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<h3 className="text-3xl font-bold text-gray-900">
|
||||
🎉 Grand Prix à gagner !
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<p className="text-lg text-[#5a5a4e] mb-4 leading-relaxed">
|
||||
À la fin du concours, un grand gagnant sera tiré au sort parmi les participants et remportera un{' '}
|
||||
<span className="font-bold text-[#8b6f47] text-xl">lot d'une valeur de {prizeAmount}</span> !
|
||||
</p>
|
||||
|
||||
<div className="bg-white/70 backdrop-blur-sm rounded-xl p-4 space-y-2">
|
||||
{drawDate && (
|
||||
<div className="flex items-center gap-3">
|
||||
<svg className="w-5 h-5 text-[#d4a574]" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span className="text-[#5a5a4e]">
|
||||
<span className="font-semibold">Tirage au sort :</span> {formatDate(drawDate)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{participantsCount && (
|
||||
<div className="flex items-center gap-3">
|
||||
<svg className="w-5 h-5 text-[#d4a574]" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
|
||||
</svg>
|
||||
<span className="text-[#5a5a4e]">
|
||||
<span className="font-semibold">{participantsCount.toLocaleString('fr-FR')}</span> participants déjà inscrits
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<svg className="w-5 h-5 text-[#d4a574]" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span className="text-[#5a5a4e]">
|
||||
Tirage certifié par un huissier de justice
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex items-center gap-2 text-sm text-[#8a8a7a]">
|
||||
<svg className="w-4 h-4 text-[#d4a574]" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span className="italic">Plus vous jouez, plus vous avez de chances de gagner !</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -44,54 +44,53 @@ export default function Header() {
|
|||
};
|
||||
|
||||
return (
|
||||
<header className="bg-gradient-to-r from-[#1a4d2e] to-[#2d5a3d] sticky top-0 z-50 shadow-lg">
|
||||
<header className="bg-gradient-to-r from-[#f5f5f0] to-[#faf9f5] sticky top-0 z-50 shadow-lg border-b-2 border-[#e5e4dc]">
|
||||
{/* Main Header */}
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex items-center justify-between h-18">
|
||||
{/* Logo */}
|
||||
<Link href={ROUTES.HOME} className="group flex items-center gap-3">
|
||||
<Logo size="md" showText={false} className="group-hover:scale-105 transition-transform" />
|
||||
<span className="text-2xl font-bold text-[#f59e0b]">Thé Tip Top</span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:flex items-center gap-6">
|
||||
<Link
|
||||
href={ROUTES.HOME}
|
||||
className="text-white hover:text-[#f59e0b] font-medium transition-colors"
|
||||
className="text-[#5a5a4e] hover:text-[#d4a574] font-medium transition-colors"
|
||||
>
|
||||
Accueil
|
||||
</Link>
|
||||
<Link
|
||||
href={ROUTES.LOTS}
|
||||
className="text-white hover:text-[#f59e0b] font-medium transition-colors"
|
||||
className="text-[#5a5a4e] hover:text-[#d4a574] font-medium transition-colors"
|
||||
>
|
||||
Loto à gagner
|
||||
</Link>
|
||||
<Link
|
||||
href="/rules"
|
||||
className="text-white hover:text-[#f59e0b] font-medium transition-colors"
|
||||
className="text-[#5a5a4e] hover:text-[#d4a574] font-medium transition-colors"
|
||||
>
|
||||
Règlement
|
||||
</Link>
|
||||
<Link
|
||||
href="/faq"
|
||||
className="text-white hover:text-[#f59e0b] font-medium transition-colors"
|
||||
className="text-[#5a5a4e] hover:text-[#d4a574] font-medium transition-colors"
|
||||
>
|
||||
FAQ
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="text-white hover:text-[#f59e0b] font-medium transition-colors"
|
||||
className="text-[#5a5a4e] hover:text-[#d4a574] font-medium transition-colors"
|
||||
>
|
||||
Contact
|
||||
</Link>
|
||||
|
||||
{/* Participer with Dropdown - Orange Button */}
|
||||
{/* Participer with Dropdown - Doré Button */}
|
||||
{isAuthenticated ? (
|
||||
<Link
|
||||
href={ROUTES.GAME}
|
||||
className="bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-6 py-2 rounded-lg transition-all hover:shadow-xl"
|
||||
className="bg-[#d4a574] hover:bg-[#c4956a] text-white font-bold px-6 py-2 rounded-lg transition-all hover:shadow-xl"
|
||||
>
|
||||
Participer
|
||||
</Link>
|
||||
|
|
@ -99,7 +98,7 @@ export default function Header() {
|
|||
<div className="relative" ref={dropdownRef}>
|
||||
<button
|
||||
onClick={() => setIsParticiperDropdownOpen(!isParticiperDropdownOpen)}
|
||||
className="bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-6 py-2 rounded-lg transition-all hover:shadow-xl flex items-center gap-2"
|
||||
className="bg-[#d4a574] hover:bg-[#c4956a] text-white font-bold px-6 py-2 rounded-lg transition-all hover:shadow-xl flex items-center gap-2"
|
||||
>
|
||||
Participer
|
||||
<svg
|
||||
|
|
@ -142,26 +141,26 @@ export default function Header() {
|
|||
{isAuthenticated && (
|
||||
<>
|
||||
<Link href={getDashboardRoute()}>
|
||||
<button className="flex flex-col items-center bg-white text-[#1a4d2e] hover:bg-[#f59e0b] hover:text-white font-semibold px-4 py-2 rounded-lg transition-all">
|
||||
<button className="flex flex-col items-center bg-white text-[#5a5a4e] hover:bg-[#d4a574] hover:text-white font-semibold px-4 py-2 rounded-lg transition-all border border-[#e5e4dc]">
|
||||
<span className="text-sm">{user?.firstName} {user?.lastName}</span>
|
||||
<span className="text-xs font-normal opacity-80">{user?.email}</span>
|
||||
</button>
|
||||
</Link>
|
||||
<Link href={ROUTES.PROFILE}>
|
||||
<button className="flex items-center gap-2 bg-white text-[#1a4d2e] hover:bg-[#f59e0b] hover:text-white font-semibold px-4 py-2 rounded-lg transition-all">
|
||||
<button className="flex items-center gap-2 bg-white text-[#5a5a4e] hover:bg-[#d4a574] hover:text-white font-semibold px-4 py-2 rounded-lg transition-all border border-[#e5e4dc]">
|
||||
Profil
|
||||
</button>
|
||||
</Link>
|
||||
{user?.role === 'CLIENT' && (
|
||||
<Link href={ROUTES.HISTORY}>
|
||||
<button className="flex items-center gap-2 bg-white text-[#1a4d2e] hover:bg-[#f59e0b] hover:text-white font-semibold px-4 py-2 rounded-lg transition-all">
|
||||
<button className="flex items-center gap-2 bg-white text-[#5a5a4e] hover:bg-[#d4a574] hover:text-white font-semibold px-4 py-2 rounded-lg transition-all border border-[#e5e4dc]">
|
||||
Mes gains
|
||||
</button>
|
||||
</Link>
|
||||
)}
|
||||
<button
|
||||
onClick={logout}
|
||||
className="flex items-center gap-2 bg-white text-[#1a4d2e] hover:bg-red-600 hover:text-white font-semibold px-4 py-2 rounded-lg transition-all"
|
||||
className="flex items-center gap-2 bg-white text-[#5a5a4e] hover:bg-red-600 hover:text-white font-semibold px-4 py-2 rounded-lg transition-all border border-[#e5e4dc]"
|
||||
>
|
||||
Déconnexion
|
||||
</button>
|
||||
|
|
@ -172,7 +171,7 @@ export default function Header() {
|
|||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
onClick={toggleMobileMenu}
|
||||
className="md:hidden p-2 text-gray-600 hover:text-gray-900 focus:outline-none"
|
||||
className="md:hidden p-2 text-[#5a5a4e] hover:text-[#d4a574] focus:outline-none"
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
{isMobileMenuOpen ? (
|
||||
|
|
|
|||
BIN
public/images/tea-icons/gift-box.png
Normal file
BIN
public/images/tea-icons/gift-box.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
BIN
public/images/tea-icons/tea-cup.png
Normal file
BIN
public/images/tea-icons/tea-cup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
public/images/tea-icons/tea-leaves.png
Normal file
BIN
public/images/tea-icons/tea-leaves.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
BIN
public/images/tea-icons/teapot-green.png
Normal file
BIN
public/images/tea-icons/teapot-green.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
BIN
public/images/tea-icons/teapot-pink.png
Normal file
BIN
public/images/tea-icons/teapot-pink.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Loading…
Reference in New Issue
Block a user