style: apply modern design to remaining pages
- Update about, contact, FAQ, forgot-password, lots, register, rules pages - Apply consistent styling with bg-gray-50 and modern cards - Update footer and layout with new design - Add gagnants (winners) page All pages now have consistent modern design matching homepage and dashboard 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
5d5375ff6b
commit
d0ef196c0d
|
|
@ -1,233 +1,337 @@
|
|||
'use client';
|
||||
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
|
||||
import Button from "@/components/Button";
|
||||
import { ROUTES } from "@/utils/constants";
|
||||
import { useState } from "react";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "À propos - Thé Tip Top",
|
||||
description: "Découvrez l'histoire et les engagements de notre maison de thé niçoise",
|
||||
interface Winner {
|
||||
date: string;
|
||||
name: string;
|
||||
prize: string;
|
||||
prizeType: 'coffret-prestige' | 'boite-signature' | 'infuseur' | 'coffret-decouverte' | 'boite-detox';
|
||||
boutique: string;
|
||||
city: string;
|
||||
testimonial?: {
|
||||
initials: string;
|
||||
text: string;
|
||||
stars: number;
|
||||
};
|
||||
}
|
||||
|
||||
const winners: Winner[] = [
|
||||
{
|
||||
date: "15 janvier 2024",
|
||||
name: "Marie L.",
|
||||
prize: "Coffret prestige 69€",
|
||||
prizeType: "coffret-prestige",
|
||||
boutique: "Boutique Rivoli",
|
||||
city: "Paris 1er"
|
||||
},
|
||||
{
|
||||
date: "15 janvier 2024",
|
||||
name: "Pierre L.",
|
||||
prize: "Boîte 100g thé signature",
|
||||
prizeType: "boite-signature",
|
||||
boutique: "Boutique République",
|
||||
city: "Lyon"
|
||||
},
|
||||
{
|
||||
date: "14 janvier 2024",
|
||||
name: "Sophie L.",
|
||||
prize: "Infuseur à thé premium",
|
||||
prizeType: "infuseur",
|
||||
boutique: "Boutique Canebière",
|
||||
city: "Marseille"
|
||||
},
|
||||
{
|
||||
date: "14 janvier 2024",
|
||||
name: "Thomas L.",
|
||||
prize: "Coffret découverte 39€",
|
||||
prizeType: "coffret-decouverte",
|
||||
boutique: "Boutique Saint-Germain",
|
||||
city: "Paris 6e"
|
||||
},
|
||||
{
|
||||
date: "13 janvier 2024",
|
||||
name: "Julie L.",
|
||||
prize: "Boîte 100g thé détox",
|
||||
prizeType: "boite-detox",
|
||||
boutique: "Boutique Capitole",
|
||||
city: "Toulouse"
|
||||
},
|
||||
{
|
||||
date: "13 janvier 2024",
|
||||
name: "Antoine L.",
|
||||
prize: "Infuseur à thé premium",
|
||||
prizeType: "infuseur",
|
||||
boutique: "Boutique Promenade",
|
||||
city: "Nice"
|
||||
},
|
||||
{
|
||||
date: "12 janvier 2024",
|
||||
name: "Camille L.",
|
||||
prize: "Boîte 100g thé signature",
|
||||
prizeType: "boite-signature",
|
||||
boutique: "Boutique Sainte-Catherine",
|
||||
city: "Bordeaux"
|
||||
},
|
||||
{
|
||||
date: "12 janvier 2024",
|
||||
name: "Maxime L.",
|
||||
prize: "Infuseur à thé premium",
|
||||
prizeType: "infuseur",
|
||||
boutique: "Boutique Kléber",
|
||||
city: "Strasbourg"
|
||||
},
|
||||
{
|
||||
date: "11 janvier 2024",
|
||||
name: "Emma L.",
|
||||
prize: "Coffret prestige 69€",
|
||||
prizeType: "coffret-prestige",
|
||||
boutique: "Boutique Vieux-Lille",
|
||||
city: "Lille"
|
||||
},
|
||||
{
|
||||
date: "11 janvier 2024",
|
||||
name: "Lucas L.",
|
||||
prize: "Boîte 100g thé détox",
|
||||
prizeType: "boite-detox",
|
||||
boutique: "Boutique Commerce",
|
||||
city: "Nantes"
|
||||
},
|
||||
];
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
initials: "ML",
|
||||
name: "Marie L.",
|
||||
city: "Paris 9e",
|
||||
text: "J'ai gagné le coffret prestige ! Les thés sont délicieux, merci Thé Tip Top pour cette belle surprise !",
|
||||
stars: 5
|
||||
},
|
||||
{
|
||||
initials: "PD",
|
||||
name: "Pierre D.",
|
||||
city: "Lyon",
|
||||
text: "Le thé signature est exceptionnel ! Je recommande vivement cette boutique, et le jeu est super !",
|
||||
stars: 5
|
||||
},
|
||||
{
|
||||
initials: "SB",
|
||||
name: "Sophie B.",
|
||||
city: "Marseille",
|
||||
text: "Mon infuseur est magnifique ! Parfait pour mes thés du matin. Merci pour ce jeu génial !",
|
||||
stars: 5
|
||||
}
|
||||
];
|
||||
|
||||
const getPrizeIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case 'coffret-prestige':
|
||||
return '🎁';
|
||||
case 'boite-signature':
|
||||
return '🌿';
|
||||
case 'infuseur':
|
||||
return '🍵';
|
||||
case 'coffret-decouverte':
|
||||
return '🎁';
|
||||
case 'boite-detox':
|
||||
return '📦';
|
||||
default:
|
||||
return '🎁';
|
||||
}
|
||||
};
|
||||
|
||||
const getPrizeColor = (type: string) => {
|
||||
switch (type) {
|
||||
case 'coffret-prestige':
|
||||
return 'bg-pink-100 text-pink-700';
|
||||
case 'boite-signature':
|
||||
return 'bg-yellow-100 text-yellow-700';
|
||||
case 'infuseur':
|
||||
return 'bg-blue-100 text-blue-700';
|
||||
case 'coffret-decouverte':
|
||||
return 'bg-orange-100 text-orange-700';
|
||||
case 'boite-detox':
|
||||
return 'bg-green-100 text-green-700';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-700';
|
||||
}
|
||||
};
|
||||
|
||||
export default function AboutPage() {
|
||||
const [periodFilter, setPeriodFilter] = useState("Toutes les dates");
|
||||
const [typeFilter, setTypeFilter] = useState("Tous les lots");
|
||||
|
||||
return (
|
||||
<div className="py-12">
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Hero Section */}
|
||||
<section className="text-center mb-16">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
||||
À propos de Thé Tip Top Nice
|
||||
<section className="bg-white py-12">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||||
Nos gagnants
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto mb-8">
|
||||
Depuis Nice, nous célébrons les thés d'exception et les moments à partager.
|
||||
Découvrez notre histoire et ce qui guide notre maison au quotidien.
|
||||
<p className="text-lg text-gray-600">
|
||||
Découvrez les heureux gagnants de notre jeu-concours Thé Tip Top.
|
||||
Félicitations à tous les participants !
|
||||
</p>
|
||||
<Link href="#histoire">
|
||||
<Button size="lg" className="px-8">
|
||||
Explorer notre univers
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Histoire Section */}
|
||||
<section id="histoire" className="mb-16">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
{/* Stats Section */}
|
||||
<section className="py-8">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{/* Stat 1 */}
|
||||
<div className="bg-white rounded-xl shadow-md p-6 text-center">
|
||||
<div className="text-4xl font-bold text-[#1a4d2e] mb-2">10</div>
|
||||
<div className="text-gray-900 font-semibold mb-1">Gagnants au total</div>
|
||||
<div className="text-sm text-gray-500">Depuis le début du jeu</div>
|
||||
</div>
|
||||
|
||||
{/* Stat 2 */}
|
||||
<div className="bg-white rounded-xl shadow-md p-6 text-center">
|
||||
<div className="text-4xl font-bold text-[#1a4d2e] mb-2">5</div>
|
||||
<div className="text-gray-900 font-semibold mb-1">Jours d'activité</div>
|
||||
<div className="text-sm text-gray-500">Jours avec des gagnants</div>
|
||||
</div>
|
||||
|
||||
{/* Stat 3 */}
|
||||
<div className="bg-white rounded-xl shadow-md p-6 text-center">
|
||||
<div className="text-4xl font-bold text-[#1a4d2e] mb-2">10</div>
|
||||
<div className="text-gray-900 font-semibold mb-1">Villes représentées</div>
|
||||
<div className="text-sm text-gray-500">Dans toute la France</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Winners List */}
|
||||
<section className="py-8 pb-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="bg-white rounded-xl shadow-md overflow-hidden">
|
||||
<div className="p-6 border-b border-gray-200">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xl">🏆</span>
|
||||
<h2 className="text-xl font-bold text-gray-900">Liste des gagnants ({winners.length})</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table Header */}
|
||||
<div className="hidden md:grid md:grid-cols-4 gap-4 px-6 py-4 bg-gray-50 border-b border-gray-200 text-sm font-semibold text-gray-700">
|
||||
<div>DATE</div>
|
||||
<div>GAGNANT</div>
|
||||
<div>LOT REMPORTÉ</div>
|
||||
<div>BOUTIQUE</div>
|
||||
</div>
|
||||
|
||||
{/* Table Rows */}
|
||||
<div className="divide-y divide-gray-200">
|
||||
{winners.map((winner, index) => (
|
||||
<div key={index} className="px-6 py-4 hover:bg-gray-50 transition-colors">
|
||||
<div className="grid md:grid-cols-4 gap-4 items-center">
|
||||
{/* Date */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-gray-400 md:hidden font-semibold">📅</span>
|
||||
<span className="text-gray-600">{winner.date}</span>
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-gray-400 md:hidden font-semibold">👤</span>
|
||||
<span className="font-medium text-gray-900">{winner.name}</span>
|
||||
</div>
|
||||
|
||||
{/* Prize */}
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-6">
|
||||
Notre histoire
|
||||
</h2>
|
||||
<p className="text-lg text-gray-700 mb-4 font-semibold">
|
||||
Quinze ans de passion infusée.
|
||||
</p>
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
Née d'une envie simple — faire (re)découvrir le vrai goût du thé — notre maison
|
||||
sélectionne des feuilles remarquables auprès de producteurs engagés. Au fil des années,
|
||||
nous avons grandi sans rien céder à nos exigences : traçabilité, fraîcheur, respect des savoir-faire.
|
||||
</p>
|
||||
<p className="text-gray-600 leading-relaxed">
|
||||
Aujourd'hui, notre boutique niçoise est le point de rencontre entre curieux et connaisseurs :
|
||||
dégustations, conseils personnalisés et une carte qui évolue au rythme des récoltes.
|
||||
</p>
|
||||
<span className={`inline-flex items-center gap-2 px-3 py-1 rounded-full text-sm font-medium ${getPrizeColor(winner.prizeType)}`}>
|
||||
<span>{getPrizeIcon(winner.prizeType)}</span>
|
||||
<span>{winner.prize}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Image Placeholder */}
|
||||
<div className="relative">
|
||||
<div className="bg-gradient-to-br from-primary-100 to-green-100 rounded-2xl overflow-hidden aspect-square flex items-center justify-center">
|
||||
<div className="text-center p-8">
|
||||
<div className="mb-4 flex justify-center">
|
||||
<Image
|
||||
src="/logos/logo.svg"
|
||||
alt="Logo Thé Tip Top"
|
||||
width={200}
|
||||
height={200}
|
||||
className="object-contain"
|
||||
/>
|
||||
{/* Boutique */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-gray-400 md:hidden font-semibold">🏪</span>
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">{winner.boutique}</div>
|
||||
<div className="text-sm text-gray-500">{winner.city}</div>
|
||||
</div>
|
||||
<p className="text-gray-600 font-medium">Notre boutique à Nice</p>
|
||||
<p className="text-sm text-gray-500 mt-2">Image à venir</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Engagements Section */}
|
||||
<section className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-center text-gray-900 mb-12">
|
||||
Nos engagements
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{/* Engagement 1 */}
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardContent className="pt-8">
|
||||
<div className="text-5xl mb-4">🌱</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-gray-900">
|
||||
Agriculture responsable
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Des jardins certifiés et des pratiques respectueuses de la biodiversité,
|
||||
pour des thés propres et expressifs.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Engagement 2 */}
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardContent className="pt-8">
|
||||
<div className="text-5xl mb-4">🤝</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-gray-900">
|
||||
Filière équitable
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Des partenariats durables et rémunérateurs pour les fermes qui nous
|
||||
confient leurs récoltes.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Engagement 3 */}
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardContent className="pt-8">
|
||||
<div className="text-5xl mb-4">❄️</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-gray-900">
|
||||
Fraîcheur & préparation
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Conditionnement soigné et rotations courtes pour préserver les arômes.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Engagement 4 */}
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardContent className="pt-8">
|
||||
<div className="text-5xl mb-4">📚</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-gray-900">
|
||||
Conseil & transmission
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Ateliers, initiations et fiches pratiques : nous aimons partager nos
|
||||
méthodes d'infusion.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* Testimonials Section */}
|
||||
<section className="pb-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-8 text-center">Témoignages de nos gagnants</h2>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{testimonials.map((testimonial, index) => (
|
||||
<div key={index} className="bg-white rounded-xl shadow-md p-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 bg-[#1a4d2e] text-white rounded-full flex items-center justify-center font-bold">
|
||||
{testimonial.initials}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">{testimonial.name}</div>
|
||||
<div className="text-sm text-gray-500">{testimonial.city}</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-600 text-sm mb-3 italic">"{testimonial.text}"</p>
|
||||
<div className="flex gap-1">
|
||||
{[...Array(testimonial.stars)].map((_, i) => (
|
||||
<span key={i} className="text-yellow-400">⭐</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="mb-16">
|
||||
<Card className="max-w-4xl mx-auto bg-gradient-to-r from-primary-600 to-primary-700 text-white">
|
||||
<CardContent className="py-12 text-center">
|
||||
<h2 className="text-3xl font-bold mb-4 text-white">
|
||||
Participez à notre grand jeu autour du thé !
|
||||
<section className="pb-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="bg-gradient-to-br from-[#1a4d2e] via-[#2d5a3d] to-[#1a4d2e] rounded-xl p-12 text-center text-white">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">
|
||||
Vous aussi, rejoignez nos gagnants !
|
||||
</h2>
|
||||
<p className="text-lg mb-8 text-white">
|
||||
À gagner : sélections premium, accessoires de dégustation et surprises maison.
|
||||
Chaque achat vous donne une chance supplémentaire.
|
||||
<p className="text-xl mb-8 text-white/90 max-w-2xl mx-auto">
|
||||
Avec 100% de gagnants garantis, c'est votre tour de remporter un magnifique lot.
|
||||
Rendez-vous en boutique et tentez votre chance !
|
||||
</p>
|
||||
<Link href={ROUTES.GAME}>
|
||||
<Button variant="outline" size="lg" className="bg-white text-primary-600 hover:bg-primary-50 border-white">
|
||||
Découvrir le jeu
|
||||
</Button>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link
|
||||
href="/register"
|
||||
className="inline-flex items-center justify-center bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-8 py-4 rounded-lg transition-all shadow-xl"
|
||||
>
|
||||
⭐ Participer maintenant
|
||||
</Link>
|
||||
<Link
|
||||
href="/lots"
|
||||
className="inline-flex items-center justify-center bg-white hover:bg-gray-100 text-[#1a4d2e] font-bold px-8 py-4 rounded-lg transition-all"
|
||||
>
|
||||
Voir les lots
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
|
||||
{/* Quote Section */}
|
||||
<section className="mb-16">
|
||||
<div className="max-w-3xl mx-auto text-center">
|
||||
<blockquote className="text-2xl md:text-3xl font-light text-gray-700 italic mb-4">
|
||||
« Un thé bien infusé, c'est une minute pour soi et un souvenir à partager. »
|
||||
</blockquote>
|
||||
<p className="text-gray-600 font-medium">— L'équipe Thé Tip Top</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Info Section */}
|
||||
<section className="bg-gradient-to-r from-primary-50 to-green-50 py-12 -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="grid md:grid-cols-3 gap-8 text-center">
|
||||
{/* Localisation */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="text-4xl mb-2">📍</div>
|
||||
<CardTitle className="text-xl">Où nous trouver</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600">
|
||||
18 Avenue Thiers<br />
|
||||
06000 Nice, France
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 mt-2">
|
||||
Au cœur de Nice, proches des transports.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Horaires */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="text-4xl mb-2">🕐</div>
|
||||
<CardTitle className="text-xl">Horaires</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600">
|
||||
Du mardi au samedi<br />
|
||||
10h – 19h
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 mt-2">
|
||||
Fermé dimanche et lundi
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Contact */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="text-4xl mb-2">✉️</div>
|
||||
<CardTitle className="text-xl">Contact</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-2">
|
||||
<a href="mailto:contact@thetiptop.fr" className="hover:text-primary-600 transition-colors">
|
||||
contact@thetiptop.fr
|
||||
</a>
|
||||
</p>
|
||||
<p className="text-gray-600 mb-2">
|
||||
<a href="tel:+33123456789" className="hover:text-primary-600 transition-colors">
|
||||
01 23 45 67 89
|
||||
</a>
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 mt-2">
|
||||
Conseils personnalisés par e-mail ou en boutique.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,7 @@
|
|||
|
||||
import { useState } from "react";
|
||||
import type { Metadata } from "next";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
|
||||
import Button from "@/components/Button";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function ContactPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
|
|
@ -11,17 +10,17 @@ export default function ContactPage() {
|
|||
email: '',
|
||||
subject: '',
|
||||
message: '',
|
||||
notRobot: false,
|
||||
acceptPolicy: false,
|
||||
});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setFormData(prev => ({ ...prev, notRobot: e.target.checked }));
|
||||
setFormData(prev => ({ ...prev, acceptPolicy: e.target.checked }));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
|
|
@ -40,37 +39,42 @@ export default function ContactPage() {
|
|||
email: '',
|
||||
subject: '',
|
||||
message: '',
|
||||
notRobot: false,
|
||||
acceptPolicy: false,
|
||||
});
|
||||
setIsSubmitting(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="py-12">
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Hero Section */}
|
||||
<section className="text-center mb-16">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
||||
<section className="bg-white py-12">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||||
Contactez-nous
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
Une question, une suggestion ? Notre équipe est là pour vous accompagner.
|
||||
<p className="text-lg text-gray-600">
|
||||
Une question sur le jeu-concours ? Besoin d'aide ? Notre équipe est là pour vous accompagner !
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-12 mb-16">
|
||||
{/* Main Content */}
|
||||
<section className="py-12">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-12">
|
||||
|
||||
{/* Contact Form */}
|
||||
<div>
|
||||
<Card className="shadow-xl">
|
||||
<CardHeader className="bg-gradient-to-r from-primary-50 to-green-50">
|
||||
<CardTitle className="text-2xl text-primary-800">
|
||||
Envoyez-nous un message
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-6">
|
||||
<div className="bg-white rounded-xl shadow-md p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">Envoyez-nous un message</h2>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Nom complet */}
|
||||
<div>
|
||||
<label htmlFor="fullName" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
<label htmlFor="fullName" className="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Nom complet <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
|
|
@ -81,13 +85,13 @@ export default function ContactPage() {
|
|||
value={formData.fullName}
|
||||
onChange={handleChange}
|
||||
placeholder="Votre nom et prénom"
|
||||
className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
<label htmlFor="email" className="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Email <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
|
|
@ -98,30 +102,35 @@ export default function ContactPage() {
|
|||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
placeholder="votre@email.com"
|
||||
className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Sujet */}
|
||||
<div>
|
||||
<label htmlFor="subject" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
<label htmlFor="subject" className="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Sujet <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
<select
|
||||
id="subject"
|
||||
name="subject"
|
||||
type="text"
|
||||
required
|
||||
value={formData.subject}
|
||||
onChange={handleChange}
|
||||
placeholder="L'objet de votre message"
|
||||
className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
|
||||
/>
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent bg-white"
|
||||
>
|
||||
<option value="">Sélectionnez un sujet</option>
|
||||
<option value="jeu-concours">Question sur le jeu-concours</option>
|
||||
<option value="code">Problème avec mon code</option>
|
||||
<option value="lot">Réclamation de lot</option>
|
||||
<option value="compte">Gestion de compte</option>
|
||||
<option value="autre">Autre demande</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Message */}
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
<label htmlFor="message" className="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Message <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
|
|
@ -130,210 +139,198 @@ export default function ContactPage() {
|
|||
required
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
placeholder="Décrivez votre demande..."
|
||||
placeholder="Décrivez votre demande en détail..."
|
||||
rows={6}
|
||||
className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent resize-none"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Checkbox Robot */}
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Checkbox RGPD */}
|
||||
<div className="flex items-start gap-3">
|
||||
<input
|
||||
id="notRobot"
|
||||
name="notRobot"
|
||||
id="acceptPolicy"
|
||||
name="acceptPolicy"
|
||||
type="checkbox"
|
||||
required
|
||||
checked={formData.notRobot}
|
||||
checked={formData.acceptPolicy}
|
||||
onChange={handleCheckboxChange}
|
||||
className="w-5 h-5 text-primary-600 border-gray-300 rounded focus:ring-2 focus:ring-primary-500"
|
||||
className="mt-1 w-5 h-5 text-[#1a4d2e] border-gray-300 rounded focus:ring-2 focus:ring-[#1a4d2e]"
|
||||
/>
|
||||
<label htmlFor="notRobot" className="text-gray-700 select-none cursor-pointer">
|
||||
Je ne suis pas un robot 🤖
|
||||
<label htmlFor="acceptPolicy" className="text-sm text-gray-700 select-none cursor-pointer">
|
||||
J'accepte que mes données soient collectées et traitées conformément à la{' '}
|
||||
<Link href="/privacy" className="text-[#1a4d2e] underline hover:text-[#f59e0b]">
|
||||
politique de confidentialité
|
||||
</Link>{' '}
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<div>
|
||||
<Button
|
||||
<button
|
||||
type="submit"
|
||||
isLoading={isSubmitting}
|
||||
disabled={isSubmitting}
|
||||
size="lg"
|
||||
className="w-full"
|
||||
className="w-full bg-[#1a4d2e] hover:bg-[#2d5a3d] disabled:bg-gray-400 text-white font-bold px-8 py-4 rounded-lg transition-all"
|
||||
>
|
||||
{isSubmitting ? "Envoi en cours..." : "Envoyer le message"}
|
||||
</Button>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<div className="space-y-6">
|
||||
<Card className="shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl">Nos coordonnées</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Adresse */}
|
||||
|
||||
{/* Nos coordonnées */}
|
||||
<div className="bg-white rounded-xl shadow-md p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">Nos coordonnées</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Siège social */}
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="text-3xl">📍</div>
|
||||
<div className="text-2xl flex-shrink-0">📍</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 mb-1">Adresse</h3>
|
||||
<p className="text-gray-600">
|
||||
<h3 className="font-semibold text-gray-900 mb-1">Siège social</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Thé Tip Top<br />
|
||||
123 Avenue des Thés<br />
|
||||
06000 Nice, France
|
||||
75001 Paris, France
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Téléphone */}
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="text-3xl">📞</div>
|
||||
<div className="text-2xl flex-shrink-0">📞</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 mb-1">Téléphone</h3>
|
||||
<p className="text-gray-600">
|
||||
<a href="tel:+33187673218" className="hover:text-primary-600 transition-colors">
|
||||
+33 1 87 67 32 18
|
||||
</a>
|
||||
<p className="text-gray-600 text-sm">
|
||||
<a href="tel:+33123456789" className="hover:text-[#1a4d2e] transition-colors">
|
||||
+33 1 23 45 67 89
|
||||
</a><br />
|
||||
<span className="text-xs">Du lundi au vendredi<br />9h00 - 18h00</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="text-3xl">✉️</div>
|
||||
<div className="text-2xl flex-shrink-0">✉️</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 mb-1">Email</h3>
|
||||
<p className="text-gray-600">
|
||||
<a href="mailto:contact@the-tip-top.com" className="hover:text-primary-600 transition-colors">
|
||||
contact@the-tip-top.com
|
||||
<div className="text-gray-600 text-sm space-y-1">
|
||||
<p>
|
||||
<a href="mailto:contact@thetiptop.com" className="hover:text-[#1a4d2e] transition-colors">
|
||||
contact@thetiptop.com
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="mailto:support@thetiptop.com" className="hover:text-[#1a4d2e] transition-colors">
|
||||
support@thetiptop.com
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="mailto:privacy@thetiptop.com" className="hover:text-[#1a4d2e] transition-colors">
|
||||
privacy@thetiptop.com
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Horaires */}
|
||||
{/* Service client */}
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="text-3xl">🕐</div>
|
||||
<div className="text-2xl flex-shrink-0">🕐</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 mb-1">Horaires d'ouverture</h3>
|
||||
<h3 className="font-semibold text-gray-900 mb-1">Service client</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Lundi - Vendredi : 9h - 19h<br />
|
||||
Samedi : 9h - 18h<br />
|
||||
Dimanche : 10h - 17h
|
||||
Réponse sous 24h<br />
|
||||
Support multilingue<br />
|
||||
Du lundi au samedi
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Localisation */}
|
||||
<Card className="shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl">Localisation</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="rounded-lg overflow-hidden h-64">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2885.2563866557893!2d7.261953!1d43.7031922!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12cdd0106a852d31%3A0x40819a5fd970220!2sNice%2C%20France!5e0!3m2!1sfr!2sfr!4v1234567890123"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
title="Localisation Thé Tip Top Nice"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Boutiques Section */}
|
||||
<section className="bg-gradient-to-r from-primary-50 to-green-50 py-12 -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center text-gray-900 mb-4">
|
||||
Nos boutiques
|
||||
</h2>
|
||||
<p className="text-center text-gray-600 mb-12">
|
||||
Retrouvez-nous dans nos points de vente niçois
|
||||
</p>
|
||||
{/* Nos boutiques */}
|
||||
<div className="bg-white rounded-xl shadow-md p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">Nos boutiques</h2>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{/* Boutique Centre-Ville */}
|
||||
<Card className="bg-white hover:shadow-xl transition-shadow">
|
||||
<CardHeader>
|
||||
<div className="text-4xl text-center mb-2">🏪</div>
|
||||
<CardTitle className="text-center text-xl">Boutique Centre-Ville</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="text-center">
|
||||
<p className="text-gray-700 font-medium">15 rue de la Paix</p>
|
||||
<p className="text-gray-600 text-sm">06000 Nice</p>
|
||||
</div>
|
||||
<div className="text-center pt-3 border-t border-gray-200">
|
||||
<p className="text-primary-600 font-semibold mb-1">
|
||||
<a href="tel:+33493123456" className="hover:text-primary-700">
|
||||
04 93 12 34 56
|
||||
</a>
|
||||
</p>
|
||||
<p className="text-gray-600 text-sm">
|
||||
9h-19h du lundi au samedi
|
||||
<div className="space-y-4">
|
||||
{/* Boutique 1 */}
|
||||
<div className="pb-4 border-b border-gray-200">
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Paris Rivoli</h3>
|
||||
<p className="text-gray-600 text-sm mb-1">
|
||||
123 Rue de Rivoli, 75001 Paris
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">01 23 45 67 89</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Boutique Vieux-Nice */}
|
||||
<Card className="bg-white hover:shadow-xl transition-shadow">
|
||||
<CardHeader>
|
||||
<div className="text-4xl text-center mb-2">🏪</div>
|
||||
<CardTitle className="text-center text-xl">Boutique Vieux-Nice</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="text-center">
|
||||
<p className="text-gray-700 font-medium">28 rue des Rosiers</p>
|
||||
<p className="text-gray-600 text-sm">06300 Nice</p>
|
||||
</div>
|
||||
<div className="text-center pt-3 border-t border-gray-200">
|
||||
<p className="text-primary-600 font-semibold mb-1">
|
||||
<a href="tel:+33494872416" className="hover:text-primary-700">
|
||||
04 94 87 24 16
|
||||
</a>
|
||||
</p>
|
||||
<p className="text-gray-600 text-sm">
|
||||
10h-20h du lundi au dimanche
|
||||
{/* Boutique 2 */}
|
||||
<div className="pb-4 border-b border-gray-200">
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Paris Saint-Germain</h3>
|
||||
<p className="text-gray-600 text-sm mb-1">
|
||||
45 Boulevard Saint-Germain, 75006 Paris
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">01 23 45 67 90</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Boutique Promenade */}
|
||||
<Card className="bg-white hover:shadow-xl transition-shadow">
|
||||
<CardHeader>
|
||||
<div className="text-4xl text-center mb-2">🏪</div>
|
||||
<CardTitle className="text-center text-xl">Boutique Promenade</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="text-center">
|
||||
<p className="text-gray-700 font-medium">42 Promenade des Anglais</p>
|
||||
<p className="text-gray-600 text-sm">06000 Nice</p>
|
||||
</div>
|
||||
<div className="text-center pt-3 border-t border-gray-200">
|
||||
<p className="text-primary-600 font-semibold mb-1">
|
||||
<a href="tel:+33493296714" className="hover:text-primary-700">
|
||||
04 93 29 67 14
|
||||
</a>
|
||||
{/* Boutique 3 */}
|
||||
<div className="pb-4 border-b border-gray-200">
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Lyon République</h3>
|
||||
<p className="text-gray-600 text-sm mb-1">
|
||||
78 Rue de la République, 69002 Lyon
|
||||
</p>
|
||||
<p className="text-gray-600 text-sm">
|
||||
9h30-19h30 du mardi au samedi
|
||||
<p className="text-sm text-gray-500">04 12 34 56 78</p>
|
||||
</div>
|
||||
|
||||
{/* Boutique 4 */}
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Marseille Canebière</h3>
|
||||
<p className="text-gray-600 text-sm mb-1">
|
||||
32 La Canebière, 13001 Marseille
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">04 91 23 45 67</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 pt-6 border-t border-gray-200">
|
||||
<p className="text-xs text-gray-500 flex items-start gap-2">
|
||||
<span>💡</span>
|
||||
<span>Retrouvez toutes nos boutiques et leurs horaires sur notre site principal</span>
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA FAQ Section */}
|
||||
<section className="py-12">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="bg-gradient-to-r from-yellow-50 to-yellow-100 rounded-xl p-8 border-l-4 border-yellow-500">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="text-3xl">💡</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-2">Avant de nous contacter</h3>
|
||||
<p className="text-gray-700 mb-4">
|
||||
Consultez notre FAQ, vous y trouverez peut-être la réponse à votre question !
|
||||
</p>
|
||||
<Link
|
||||
href="/faq"
|
||||
className="inline-flex items-center justify-center bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-6 py-3 rounded-lg transition-all"
|
||||
>
|
||||
Voir la FAQ
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -2,284 +2,245 @@
|
|||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
|
||||
import Button from "@/components/Button";
|
||||
import { ROUTES } from "@/utils/constants";
|
||||
|
||||
interface FAQ {
|
||||
category: string;
|
||||
question: string;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
interface FAQCategory {
|
||||
category: string;
|
||||
icon: string;
|
||||
faqs: FAQ[];
|
||||
}
|
||||
|
||||
const faqData: FAQCategory[] = [
|
||||
const faqData: FAQ[] = [
|
||||
{
|
||||
category: "Participation au Jeu",
|
||||
icon: "🎮",
|
||||
faqs: [
|
||||
{
|
||||
question: "Comment participer au jeu-concours Thé Tip Top ?",
|
||||
answer: "Pour participer, vous devez d'abord créer un compte sur notre plateforme. Ensuite, connectez-vous et saisissez le code unique présent sur votre ticket de caisse. Chaque achat en magasin vous donne droit à un code pour tenter votre chance !",
|
||||
},
|
||||
{
|
||||
question: "Qui peut participer au jeu-concours ?",
|
||||
answer: "Le jeu-concours est ouvert à toute personne majeure résidant en France métropolitaine. Les employés de Thé Tip Top et leurs familles directes ne sont pas éligibles.",
|
||||
},
|
||||
{
|
||||
question: "Combien de fois puis-je participer ?",
|
||||
answer: "Vous pouvez participer autant de fois que vous le souhaitez ! Chaque achat en magasin vous donne un nouveau code à jouer. Il n'y a pas de limite au nombre de participations.",
|
||||
category: "Participation",
|
||||
question: "Comment participer au jeu-concours ?",
|
||||
answer: "Pour participer, vous devez effectuer un achat de minimum 49€ dans une boutique Thé Tip Top participante, récupérer votre ticket de caisse avec le code unique, créer un compte sur notre site www.thetiptop.fr, vous connecter et saisir votre code pour découvrir instantanément votre gain.",
|
||||
},
|
||||
{
|
||||
category: "Codes",
|
||||
question: "Où trouver mon code de participation ?",
|
||||
answer: "Votre code de participation se trouve sur votre ticket de caisse après chaque achat en magasin Thé Tip Top. Il est clairement indiqué dans une zone dédiée du ticket.",
|
||||
answer: "Votre code de participation se trouve sur votre ticket de caisse après chaque achat de minimum 49€ en magasin Thé Tip Top. Il est clairement indiqué et composé de 10 caractères alphanumériques.",
|
||||
},
|
||||
{
|
||||
category: "Codes",
|
||||
question: "Mon code ne fonctionne pas, que faire ?",
|
||||
answer: "Vérifiez d'abord que vous avez bien saisi le code sans erreur (attention aux caractères similaires comme 0/O ou 1/I). Si le problème persiste, contactez notre service client via la page Contact avec une photo de votre ticket.",
|
||||
},
|
||||
],
|
||||
answer: "Vérifiez d'abord que vous avez bien saisi le code sans erreur (attention aux caractères similaires comme 0/O ou 1/I). Assurez-vous que le code n'a pas déjà été utilisé. Si le problème persiste, contactez notre service client via la page Contact avec une photo de votre ticket.",
|
||||
},
|
||||
{
|
||||
category: "Lots et Gains",
|
||||
icon: "🎁",
|
||||
faqs: [
|
||||
{
|
||||
question: "Quels sont les lots à gagner ?",
|
||||
answer: "Vous pouvez gagner une variété de lots : des infuseurs à thé, des boîtes de thé signature (100g ou 200g), des coffrets découverte, et même un an de thé d'une valeur de 360€ ! Consultez notre page Lots pour voir tous les prix disponibles.",
|
||||
category: "Compte",
|
||||
question: "Puis-je créer un compte avec mes réseaux sociaux ?",
|
||||
answer: "Oui, vous pouvez créer un compte et vous connecter rapidement en utilisant votre compte Google ou Facebook. Cela permet une inscription plus rapide et sécurisée.",
|
||||
},
|
||||
{
|
||||
question: "Comment savoir si j'ai gagné ?",
|
||||
answer: "Vous saurez immédiatement si vous avez gagné après avoir saisi votre code. Un message s'affichera à l'écran vous indiquant votre lot. Vous recevrez également une confirmation par email avec les détails de votre gain.",
|
||||
category: "Délais",
|
||||
question: "Jusqu'à quand puis-je saisir mon code ?",
|
||||
answer: "Vous pouvez saisir votre code pendant toute la durée du jeu-concours, soit du 1er janvier 2025 au 31 janvier 2025 à 23h59. Après cette date, les codes ne seront plus acceptés.",
|
||||
},
|
||||
{
|
||||
category: "Retrait",
|
||||
question: "Comment récupérer mon lot ?",
|
||||
answer: "Pour les petits lots (infuseurs, boîtes de thé), vous pouvez les récupérer directement en magasin en présentant votre confirmation de gain. Pour les lots plus importants, nous vous contacterons pour organiser la livraison.",
|
||||
answer: "Pour les petits lots (infuseurs, boîtes de thé), vous pouvez les récupérer directement en magasin en présentant votre confirmation de gain. Pour les coffrets, vous avez le choix entre le retrait en boutique ou la livraison à domicile offerte. Pour le grand prix, une livraison mensuelle sera organisée à l'adresse de votre choix.",
|
||||
},
|
||||
{
|
||||
question: "Combien de temps ai-je pour récupérer mon lot ?",
|
||||
answer: "Vous avez 30 jours à compter de la date de gain pour récupérer votre lot. Passé ce délai, le lot ne pourra plus être réclamé.",
|
||||
category: "Retrait",
|
||||
question: "Dans quelles boutiques puis-je récupérer mon lot ?",
|
||||
answer: "Vous pouvez récupérer votre lot dans n'importe quelle boutique Thé Tip Top en France métropolitaine. Présentez simplement votre confirmation de gain (email ou capture d'écran) et une pièce d'identité.",
|
||||
},
|
||||
{
|
||||
question: "Puis-je échanger mon lot contre un autre ?",
|
||||
answer: "Les lots ne sont pas échangeables ni remboursables. Cependant, pour les coffrets et boîtes de thé, vous pourrez choisir parmi plusieurs variétés lors de la récupération.",
|
||||
category: "Tirage final",
|
||||
question: "Comment fonctionne le tirage final pour le grand prix ?",
|
||||
answer: "À l'issue de la période de participation, un tirage au sort sera organisé le 15 février 2025 sous contrôle d'huissier de justice (Maître Dupont, Office Notarial de Paris) pour désigner le grand gagnant du prix principal : 1 an de thé offert d'une valeur de 360€. Tous les participants ayant validé au moins un code sont automatiquement inscrits au tirage.",
|
||||
},
|
||||
{
|
||||
question: "Y a-t-il des frais pour recevoir mon lot ?",
|
||||
answer: "Non, tous les lots sont entièrement gratuits, sans frais de livraison ni frais cachés.",
|
||||
},
|
||||
],
|
||||
category: "Données",
|
||||
question: "Mes données personnelles sont-elles protégées ?",
|
||||
answer: "Absolument. Nous prenons la protection de vos données très au sérieux conformément au RGPD. Toutes les informations sont cryptées et stockées de manière sécurisée. Vous disposez d'un droit d'accès, de rectification et d'effacement de vos données. Consultez notre Politique de Confidentialité pour plus de détails.",
|
||||
},
|
||||
{
|
||||
category: "Compte et Profil",
|
||||
icon: "👤",
|
||||
faqs: [
|
||||
{
|
||||
question: "Comment créer un compte ?",
|
||||
answer: "Cliquez sur le bouton 'S'inscrire' en haut de la page, remplissez le formulaire avec vos informations (nom, prénom, email, mot de passe) et validez. Vous recevrez un email de confirmation pour activer votre compte.",
|
||||
},
|
||||
{
|
||||
question: "J'ai oublié mon mot de passe, que faire ?",
|
||||
answer: "Sur la page de connexion, cliquez sur 'Mot de passe oublié'. Saisissez votre adresse email et vous recevrez un lien pour réinitialiser votre mot de passe.",
|
||||
},
|
||||
{
|
||||
question: "Comment modifier mes informations personnelles ?",
|
||||
answer: "Connectez-vous à votre compte et accédez à la page 'Mon Profil'. Vous pourrez y modifier vos informations personnelles, votre adresse email et votre mot de passe.",
|
||||
},
|
||||
{
|
||||
question: "Puis-je supprimer mon compte ?",
|
||||
answer: "Oui, vous pouvez demander la suppression de votre compte en contactant notre service client via la page Contact. Notez que cette action est irréversible et que vous perdrez l'accès à vos lots non récupérés.",
|
||||
},
|
||||
{
|
||||
question: "Mes données personnelles sont-elles sécurisées ?",
|
||||
answer: "Absolument. Nous prenons la protection de vos données très au sérieux. Toutes les informations sont cryptées et stockées de manière sécurisée. Consultez notre Politique de Confidentialité pour plus de détails.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: "Problèmes Techniques",
|
||||
icon: "🔧",
|
||||
faqs: [
|
||||
{
|
||||
question: "Le site ne s'affiche pas correctement, que faire ?",
|
||||
answer: "Essayez de vider le cache de votre navigateur et de rafraîchir la page. Assurez-vous également d'utiliser un navigateur récent (Chrome, Firefox, Safari, Edge). Si le problème persiste, contactez-nous.",
|
||||
},
|
||||
{
|
||||
question: "Je n'arrive pas à me connecter",
|
||||
answer: "Vérifiez que vous utilisez la bonne adresse email et le bon mot de passe. Si vous avez oublié votre mot de passe, utilisez la fonction 'Mot de passe oublié'. Assurez-vous également que les cookies sont activés dans votre navigateur.",
|
||||
},
|
||||
{
|
||||
question: "Je n'ai pas reçu l'email de confirmation",
|
||||
answer: "Vérifiez votre dossier spam ou courrier indésirable. Si vous ne trouvez toujours pas l'email après quelques minutes, vous pouvez demander un nouvel envoi depuis la page de connexion.",
|
||||
},
|
||||
{
|
||||
question: "Le site est-il compatible avec les mobiles ?",
|
||||
answer: "Oui, notre site est entièrement responsive et optimisé pour tous les appareils (smartphones, tablettes, ordinateurs). Vous pouvez participer depuis n'importe quel appareil.",
|
||||
},
|
||||
{
|
||||
question: "Puis-je utiliser le site depuis l'étranger ?",
|
||||
answer: "Vous pouvez accéder au site depuis l'étranger, mais seules les personnes résidant en France métropolitaine peuvent participer au jeu-concours et récupérer des lots.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: "Informations Générales",
|
||||
icon: "ℹ️",
|
||||
faqs: [
|
||||
{
|
||||
question: "Quelle est la durée du jeu-concours ?",
|
||||
answer: "Le jeu-concours se déroule du [date de début] au [date de fin]. Consultez notre page d'accueil pour les dates exactes et le temps restant.",
|
||||
},
|
||||
{
|
||||
question: "Comment contacter le service client ?",
|
||||
answer: "Vous pouvez nous contacter via notre page Contact, par email à contact@thetiptop.fr, ou par téléphone au [numéro]. Notre équipe est disponible du lundi au vendredi de 9h à 18h.",
|
||||
},
|
||||
{
|
||||
question: "Où se trouvent les magasins Thé Tip Top ?",
|
||||
answer: "Nous avons des magasins dans toute la France. Consultez notre page À Propos ou contactez-nous pour trouver le magasin le plus proche de chez vous.",
|
||||
},
|
||||
{
|
||||
question: "Puis-je offrir mon lot à quelqu'un d'autre ?",
|
||||
answer: "Oui, les lots sont cessibles. Vous pouvez offrir votre lot à un tiers, mais la personne devra présenter votre confirmation de gain pour le récupérer.",
|
||||
},
|
||||
{
|
||||
question: "Le jeu-concours est-il gratuit ?",
|
||||
answer: "Oui, la participation au jeu-concours est entièrement gratuite. Vous devez simplement effectuer un achat en magasin pour obtenir un code de participation.",
|
||||
},
|
||||
{
|
||||
question: "Où puis-je consulter le règlement du jeu ?",
|
||||
answer: "Le règlement complet du jeu-concours est disponible sur notre page Règlement du Jeu. Nous vous recommandons de le lire attentivement avant de participer.",
|
||||
},
|
||||
],
|
||||
category: "Technique",
|
||||
question: "Le site ne fonctionne pas, que faire ?",
|
||||
answer: "Essayez de vider le cache de votre navigateur et de rafraîchir la page (Ctrl+F5 ou Cmd+Shift+R). Assurez-vous d'utiliser un navigateur récent (Chrome, Firefox, Safari, Edge). Vérifiez que JavaScript et les cookies sont activés. Si le problème persiste, contactez notre support technique à support@thetiptop.com.",
|
||||
},
|
||||
];
|
||||
|
||||
function FAQItem({ faq, isOpen, onClick }: { faq: FAQ; isOpen: boolean; onClick: () => void }) {
|
||||
const categories = [
|
||||
{ name: "Participation", color: "bg-green-100 text-green-700" },
|
||||
{ name: "Codes", color: "bg-blue-100 text-blue-700" },
|
||||
{ name: "Compte", color: "bg-purple-100 text-purple-700" },
|
||||
{ name: "Délais", color: "bg-orange-100 text-orange-700" },
|
||||
{ name: "Retrait", color: "bg-teal-100 text-teal-700" },
|
||||
{ name: "Tirage final", color: "bg-yellow-100 text-yellow-700" },
|
||||
{ name: "Données", color: "bg-pink-100 text-pink-700" },
|
||||
{ name: "Technique", color: "bg-gray-100 text-gray-700" },
|
||||
];
|
||||
|
||||
export default function FAQContent() {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
||||
const [openQuestion, setOpenQuestion] = useState<number | null>(null);
|
||||
|
||||
const toggleQuestion = (index: number) => {
|
||||
setOpenQuestion(openQuestion === index ? null : index);
|
||||
};
|
||||
|
||||
const filteredFAQs = faqData.filter((faq) => {
|
||||
const matchesSearch =
|
||||
faq.question.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
faq.answer.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
const matchesCategory = !selectedCategory || faq.category === selectedCategory;
|
||||
return matchesSearch && matchesCategory;
|
||||
});
|
||||
|
||||
const getCategoryColor = (category: string) => {
|
||||
const cat = categories.find(c => c.name === category);
|
||||
return cat?.color || "bg-gray-100 text-gray-700";
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="border-b border-gray-200 last:border-b-0">
|
||||
<button
|
||||
className="w-full py-4 px-6 text-left flex justify-between items-center hover:bg-gray-50 transition-colors"
|
||||
onClick={onClick}
|
||||
aria-expanded={isOpen}
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-white py-12">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||||
Questions fréquentes
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600">
|
||||
Trouvez rapidement les réponses à vos questions sur notre jeu-concours Thé Tip Top.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Search Bar */}
|
||||
<section className="py-8">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Rechercher une question..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full px-4 py-3 pl-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent"
|
||||
/>
|
||||
<svg
|
||||
className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<span className="font-medium text-gray-900 pr-8">{faq.question}</span>
|
||||
<span className={`text-primary-600 text-xl flex-shrink-0 transition-transform ${isOpen ? 'rotate-45' : ''}`}>
|
||||
+
|
||||
</span>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Category Filters */}
|
||||
<section className="pb-8">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{categories.map((category) => (
|
||||
<button
|
||||
key={category.name}
|
||||
onClick={() => setSelectedCategory(
|
||||
selectedCategory === category.name ? null : category.name
|
||||
)}
|
||||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||||
selectedCategory === category.name
|
||||
? category.color + ' ring-2 ring-offset-2 ring-green-500'
|
||||
: category.color + ' hover:opacity-80'
|
||||
}`}
|
||||
>
|
||||
{category.name}
|
||||
</button>
|
||||
{isOpen && (
|
||||
<div className="px-6 pb-4 text-gray-600 leading-relaxed">
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ Questions */}
|
||||
<section className="pb-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto space-y-3">
|
||||
{filteredFAQs.length === 0 ? (
|
||||
<div className="bg-white rounded-xl shadow-md p-8 text-center text-gray-500">
|
||||
Aucune question ne correspond à votre recherche.
|
||||
</div>
|
||||
) : (
|
||||
filteredFAQs.map((faq, index) => (
|
||||
<div key={index} className="bg-white rounded-xl shadow-md overflow-hidden">
|
||||
<button
|
||||
onClick={() => toggleQuestion(index)}
|
||||
className="w-full flex items-start justify-between p-6 text-left hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="flex-1 pr-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className={`text-xs font-bold px-2 py-1 rounded ${getCategoryColor(faq.category)}`}>
|
||||
{faq.category}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-900">{faq.question}</h3>
|
||||
</div>
|
||||
<svg
|
||||
className={`w-6 h-6 text-gray-500 flex-shrink-0 transition-transform ${
|
||||
openQuestion === index ? 'rotate-180' : ''
|
||||
}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
{openQuestion === index && (
|
||||
<div className="px-6 pb-6 text-gray-700 leading-relaxed">
|
||||
{faq.answer}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function FAQContent() {
|
||||
const [openItems, setOpenItems] = useState<{ [key: string]: boolean }>({});
|
||||
|
||||
const toggleItem = (categoryIndex: number, faqIndex: number) => {
|
||||
const key = `${categoryIndex}-${faqIndex}`;
|
||||
setOpenItems((prev) => ({
|
||||
...prev,
|
||||
[key]: !prev[key],
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 py-12">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
{/* Hero Section */}
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||||
Questions Fréquentes
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
||||
Trouvez rapidement les réponses à vos questions sur le jeu-concours Thé Tip Top.
|
||||
Si vous ne trouvez pas la réponse que vous cherchez, n'hésitez pas à nous contacter.
|
||||
</p>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Search Hint */}
|
||||
<div className="mb-8 p-4 bg-blue-50 border border-blue-200 rounded-lg text-center">
|
||||
<p className="text-sm text-blue-800">
|
||||
💡 <strong>Astuce :</strong> Utilisez Ctrl+F (Cmd+F sur Mac) pour rechercher un mot-clé dans cette page
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* FAQ Categories */}
|
||||
<div className="space-y-8">
|
||||
{faqData.map((category, categoryIndex) => (
|
||||
<Card key={categoryIndex} className="overflow-hidden">
|
||||
<CardHeader className="bg-gradient-to-r from-primary-50 to-primary-100">
|
||||
<CardTitle className="flex items-center gap-3 text-primary-900">
|
||||
<span className="text-2xl">{category.icon}</span>
|
||||
<span>{category.category}</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{category.faqs.map((faq, faqIndex) => (
|
||||
<FAQItem
|
||||
key={faqIndex}
|
||||
faq={faq}
|
||||
isOpen={openItems[`${categoryIndex}-${faqIndex}`] || false}
|
||||
onClick={() => toggleItem(categoryIndex, faqIndex)}
|
||||
/>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<div className="mt-12 text-center bg-white rounded-lg shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-4">
|
||||
Vous n'avez pas trouvé votre réponse ?
|
||||
<section className="pb-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="bg-gradient-to-br from-[#1a4d2e] via-[#2d5a3d] to-[#1a4d2e] rounded-xl p-8 text-center text-white">
|
||||
<h2 className="text-2xl md:text-3xl font-bold mb-4">
|
||||
Vous ne trouvez pas votre réponse ?
|
||||
</h2>
|
||||
<p className="text-gray-600 mb-6">
|
||||
<p className="text-white/90 mb-6 max-w-2xl mx-auto">
|
||||
Notre équipe est là pour vous aider ! Contactez-nous et nous vous répondrons dans les plus brefs délais.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link href="/contact">
|
||||
<Button variant="primary" className="w-full sm:w-auto">
|
||||
Nous Contacter
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={ROUTES.HOME}>
|
||||
<Button variant="outline" className="w-full sm:w-auto">
|
||||
Retour à l'Accueil
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div className="mt-8 text-center text-sm text-gray-600">
|
||||
<p className="mb-2">Pages utiles :</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
<Link href="/rules" className="text-primary-600 hover:text-primary-700 underline">
|
||||
Règlement du Jeu
|
||||
</Link>
|
||||
<span className="text-gray-400">•</span>
|
||||
<Link href={ROUTES.LOTS} className="text-primary-600 hover:text-primary-700 underline">
|
||||
Lots à Gagner
|
||||
</Link>
|
||||
<span className="text-gray-400">•</span>
|
||||
<Link href="/about" className="text-primary-600 hover:text-primary-700 underline">
|
||||
À Propos
|
||||
</Link>
|
||||
<span className="text-gray-400">•</span>
|
||||
<Link href="/privacy" className="text-primary-600 hover:text-primary-700 underline">
|
||||
Confidentialité
|
||||
<a
|
||||
href="mailto:support@thetiptop.com"
|
||||
className="inline-flex items-center justify-center gap-2 bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-8 py-3 rounded-lg transition-all"
|
||||
>
|
||||
✉️ support@thetiptop.com
|
||||
</a>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="inline-flex items-center justify-center bg-white hover:bg-gray-100 text-[#1a4d2e] font-bold px-8 py-3 rounded-lg transition-all"
|
||||
>
|
||||
Formulaire de contact
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,113 +1,137 @@
|
|||
"use client";
|
||||
import { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import { Input } from "@/components/ui/Input";
|
||||
import Button from "@/components/Button";
|
||||
import { Card } from "@/components/ui/Card";
|
||||
import Link from "next/link";
|
||||
import { ROUTES } from "@/utils/constants";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
const forgotPasswordSchema = z.object({
|
||||
email: z.string().email("Email invalide"),
|
||||
});
|
||||
|
||||
type ForgotPasswordFormData = z.infer<typeof forgotPasswordSchema>;
|
||||
|
||||
export default function ForgotPasswordPage() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [emailSent, setEmailSent] = useState(false);
|
||||
const [isSuccess, setIsSuccess] = useState(false);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<ForgotPasswordFormData>({
|
||||
resolver: zodResolver(forgotPasswordSchema),
|
||||
});
|
||||
|
||||
const onSubmit = async (data: ForgotPasswordFormData) => {
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
// TODO: Implement password reset API call
|
||||
console.log("Password reset requested for:", data.email);
|
||||
|
||||
// Simulate API call
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
// Simulation d'envoi
|
||||
await new Promise(resolve => setTimeout(resolve, 1500));
|
||||
|
||||
setEmailSent(true);
|
||||
toast.success("Email de réinitialisation envoyé !");
|
||||
} catch (error) {
|
||||
console.error("Password reset error:", error);
|
||||
toast.error("Erreur lors de l'envoi de l'email");
|
||||
} finally {
|
||||
console.log('Password reset email sent to:', email);
|
||||
setIsSuccess(true);
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isSuccess) {
|
||||
return (
|
||||
<div className="min-h-[calc(100vh-4rem)] flex items-center justify-center py-12 px-4">
|
||||
<Card className="w-full max-w-md p-8">
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4">
|
||||
<div className="w-full max-w-md">
|
||||
|
||||
{/* Title */}
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">
|
||||
Mot de passe oublié
|
||||
</h1>
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-2">Email envoyé !</h1>
|
||||
<p className="text-gray-600">
|
||||
Vérifiez votre boîte de réception
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Success Card */}
|
||||
<div className="bg-white rounded-xl shadow-md p-8">
|
||||
<div className="text-center">
|
||||
<div className="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
|
||||
<svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-2">
|
||||
Lien de réinitialisation envoyé
|
||||
</h2>
|
||||
|
||||
<p className="text-gray-600 mb-6">
|
||||
Nous avons envoyé un lien de réinitialisation à <strong>{email}</strong>
|
||||
</p>
|
||||
|
||||
<div className="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6 text-left">
|
||||
<p className="text-sm text-blue-800">
|
||||
<strong>💡 Conseil :</strong> Si vous ne recevez pas l'email dans quelques minutes, vérifiez votre dossier spam.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href={ROUTES.LOGIN}
|
||||
className="inline-flex items-center justify-center w-full bg-[#1a4d2e] hover:bg-[#2d5a3d] text-white font-bold px-8 py-4 rounded-lg transition-all"
|
||||
>
|
||||
Retour à la connexion
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4">
|
||||
<div className="w-full max-w-md">
|
||||
|
||||
{/* Title */}
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-2">Mot de passe oublié</h1>
|
||||
<p className="text-gray-600">
|
||||
Entrez votre email pour recevoir un lien de réinitialisation
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{!emailSent ? (
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||||
<Input
|
||||
{/* Main Card */}
|
||||
<div className="bg-white rounded-xl shadow-md overflow-hidden">
|
||||
|
||||
{/* Form Container */}
|
||||
<div className="p-8">
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
|
||||
{/* Email */}
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Email <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
label="Email"
|
||||
placeholder="votre.email@example.com"
|
||||
error={errors.email?.message}
|
||||
{...register("email")}
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="votre.email@example.com"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent"
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
isLoading={isSubmitting}
|
||||
disabled={isSubmitting}
|
||||
fullWidth
|
||||
size="lg"
|
||||
>
|
||||
Envoyer le lien de réinitialisation
|
||||
</Button>
|
||||
</form>
|
||||
) : (
|
||||
<div className="text-center py-6">
|
||||
<div className="text-6xl mb-4">✅</div>
|
||||
<h2 className="text-xl font-semibold text-gray-900 mb-2">
|
||||
Email envoyé !
|
||||
</h2>
|
||||
<p className="text-gray-600 mb-6">
|
||||
Vérifiez votre boîte mail et suivez les instructions pour réinitialiser votre mot de passe.
|
||||
</p>
|
||||
<Link href={ROUTES.LOGIN}>
|
||||
<Button variant="outline" fullWidth>
|
||||
Retour à la connexion
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="mt-6 text-center text-sm text-gray-600">
|
||||
Vous vous souvenez de votre mot de passe ?{" "}
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="w-full bg-[#1a4d2e] hover:bg-[#2d5a3d] disabled:bg-gray-400 text-white font-bold px-8 py-4 rounded-lg transition-all"
|
||||
>
|
||||
{isSubmitting ? "Envoi en cours..." : "Envoyer le lien de réinitialisation"}
|
||||
</button>
|
||||
|
||||
{/* Back to Login */}
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-gray-600">
|
||||
Vous vous souvenez de votre mot de passe ?{' '}
|
||||
<Link
|
||||
href={ROUTES.LOGIN}
|
||||
className="font-medium text-blue-600 hover:text-blue-700 hover:underline"
|
||||
className="text-[#1a4d2e] hover:text-[#f59e0b] hover:underline font-semibold transition-colors"
|
||||
>
|
||||
Se connecter
|
||||
</Link>
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
337
app/gagnants/page.tsx
Normal file
337
app/gagnants/page.tsx
Normal file
|
|
@ -0,0 +1,337 @@
|
|||
'use client';
|
||||
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
|
||||
interface Winner {
|
||||
date: string;
|
||||
name: string;
|
||||
prize: string;
|
||||
prizeType: 'coffret-prestige' | 'boite-signature' | 'infuseur' | 'coffret-decouverte' | 'boite-detox';
|
||||
boutique: string;
|
||||
city: string;
|
||||
testimonial?: {
|
||||
initials: string;
|
||||
text: string;
|
||||
stars: number;
|
||||
};
|
||||
}
|
||||
|
||||
const winners: Winner[] = [
|
||||
{
|
||||
date: "15 janvier 2024",
|
||||
name: "Marie L.",
|
||||
prize: "Coffret prestige 69€",
|
||||
prizeType: "coffret-prestige",
|
||||
boutique: "Boutique Rivoli",
|
||||
city: "Paris 1er"
|
||||
},
|
||||
{
|
||||
date: "15 janvier 2024",
|
||||
name: "Pierre L.",
|
||||
prize: "Boîte 100g thé signature",
|
||||
prizeType: "boite-signature",
|
||||
boutique: "Boutique République",
|
||||
city: "Lyon"
|
||||
},
|
||||
{
|
||||
date: "14 janvier 2024",
|
||||
name: "Sophie L.",
|
||||
prize: "Infuseur à thé premium",
|
||||
prizeType: "infuseur",
|
||||
boutique: "Boutique Canebière",
|
||||
city: "Marseille"
|
||||
},
|
||||
{
|
||||
date: "14 janvier 2024",
|
||||
name: "Thomas L.",
|
||||
prize: "Coffret découverte 39€",
|
||||
prizeType: "coffret-decouverte",
|
||||
boutique: "Boutique Saint-Germain",
|
||||
city: "Paris 6e"
|
||||
},
|
||||
{
|
||||
date: "13 janvier 2024",
|
||||
name: "Julie L.",
|
||||
prize: "Boîte 100g thé détox",
|
||||
prizeType: "boite-detox",
|
||||
boutique: "Boutique Capitole",
|
||||
city: "Toulouse"
|
||||
},
|
||||
{
|
||||
date: "13 janvier 2024",
|
||||
name: "Antoine L.",
|
||||
prize: "Infuseur à thé premium",
|
||||
prizeType: "infuseur",
|
||||
boutique: "Boutique Promenade",
|
||||
city: "Nice"
|
||||
},
|
||||
{
|
||||
date: "12 janvier 2024",
|
||||
name: "Camille L.",
|
||||
prize: "Boîte 100g thé signature",
|
||||
prizeType: "boite-signature",
|
||||
boutique: "Boutique Sainte-Catherine",
|
||||
city: "Bordeaux"
|
||||
},
|
||||
{
|
||||
date: "12 janvier 2024",
|
||||
name: "Maxime L.",
|
||||
prize: "Infuseur à thé premium",
|
||||
prizeType: "infuseur",
|
||||
boutique: "Boutique Kléber",
|
||||
city: "Strasbourg"
|
||||
},
|
||||
{
|
||||
date: "11 janvier 2024",
|
||||
name: "Emma L.",
|
||||
prize: "Coffret prestige 69€",
|
||||
prizeType: "coffret-prestige",
|
||||
boutique: "Boutique Vieux-Lille",
|
||||
city: "Lille"
|
||||
},
|
||||
{
|
||||
date: "11 janvier 2024",
|
||||
name: "Lucas L.",
|
||||
prize: "Boîte 100g thé détox",
|
||||
prizeType: "boite-detox",
|
||||
boutique: "Boutique Commerce",
|
||||
city: "Nantes"
|
||||
},
|
||||
];
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
initials: "ML",
|
||||
name: "Marie L.",
|
||||
city: "Paris 9e",
|
||||
text: "J'ai gagné le coffret prestige ! Les thés sont délicieux, merci Thé Tip Top pour cette belle surprise !",
|
||||
stars: 5
|
||||
},
|
||||
{
|
||||
initials: "PD",
|
||||
name: "Pierre D.",
|
||||
city: "Lyon",
|
||||
text: "Le thé signature est exceptionnel ! Je recommande vivement cette boutique, et le jeu est super !",
|
||||
stars: 5
|
||||
},
|
||||
{
|
||||
initials: "SB",
|
||||
name: "Sophie B.",
|
||||
city: "Marseille",
|
||||
text: "Mon infuseur est magnifique ! Parfait pour mes thés du matin. Merci pour ce jeu génial !",
|
||||
stars: 5
|
||||
}
|
||||
];
|
||||
|
||||
const getPrizeIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case 'coffret-prestige':
|
||||
return '🎁';
|
||||
case 'boite-signature':
|
||||
return '🌿';
|
||||
case 'infuseur':
|
||||
return '🍵';
|
||||
case 'coffret-decouverte':
|
||||
return '🎁';
|
||||
case 'boite-detox':
|
||||
return '📦';
|
||||
default:
|
||||
return '🎁';
|
||||
}
|
||||
};
|
||||
|
||||
const getPrizeColor = (type: string) => {
|
||||
switch (type) {
|
||||
case 'coffret-prestige':
|
||||
return 'bg-pink-100 text-pink-700';
|
||||
case 'boite-signature':
|
||||
return 'bg-yellow-100 text-yellow-700';
|
||||
case 'infuseur':
|
||||
return 'bg-blue-100 text-blue-700';
|
||||
case 'coffret-decouverte':
|
||||
return 'bg-orange-100 text-orange-700';
|
||||
case 'boite-detox':
|
||||
return 'bg-green-100 text-green-700';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-700';
|
||||
}
|
||||
};
|
||||
|
||||
export default function GagnantsPage() {
|
||||
const [periodFilter, setPeriodFilter] = useState("Toutes les dates");
|
||||
const [typeFilter, setTypeFilter] = useState("Tous les lots");
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-white py-12">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||||
Nos gagnants
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600">
|
||||
Découvrez les heureux gagnants de notre jeu-concours Thé Tip Top.
|
||||
Félicitations à tous les participants !
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats Section */}
|
||||
<section className="py-8">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{/* Stat 1 */}
|
||||
<div className="bg-white rounded-xl shadow-md p-6 text-center">
|
||||
<div className="text-4xl font-bold text-[#1a4d2e] mb-2">10</div>
|
||||
<div className="text-gray-900 font-semibold mb-1">Gagnants au total</div>
|
||||
<div className="text-sm text-gray-500">Depuis le début du jeu</div>
|
||||
</div>
|
||||
|
||||
{/* Stat 2 */}
|
||||
<div className="bg-white rounded-xl shadow-md p-6 text-center">
|
||||
<div className="text-4xl font-bold text-[#1a4d2e] mb-2">5</div>
|
||||
<div className="text-gray-900 font-semibold mb-1">Jours d'activité</div>
|
||||
<div className="text-sm text-gray-500">Jours avec des gagnants</div>
|
||||
</div>
|
||||
|
||||
{/* Stat 3 */}
|
||||
<div className="bg-white rounded-xl shadow-md p-6 text-center">
|
||||
<div className="text-4xl font-bold text-[#1a4d2e] mb-2">10</div>
|
||||
<div className="text-gray-900 font-semibold mb-1">Villes représentées</div>
|
||||
<div className="text-sm text-gray-500">Dans toute la France</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Winners List */}
|
||||
<section className="py-8 pb-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="bg-white rounded-xl shadow-md overflow-hidden">
|
||||
<div className="p-6 border-b border-gray-200">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xl">🏆</span>
|
||||
<h2 className="text-xl font-bold text-gray-900">Liste des gagnants ({winners.length})</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table Header */}
|
||||
<div className="hidden md:grid md:grid-cols-4 gap-4 px-6 py-4 bg-gray-50 border-b border-gray-200 text-sm font-semibold text-gray-700">
|
||||
<div>DATE</div>
|
||||
<div>GAGNANT</div>
|
||||
<div>LOT REMPORTÉ</div>
|
||||
<div>BOUTIQUE</div>
|
||||
</div>
|
||||
|
||||
{/* Table Rows */}
|
||||
<div className="divide-y divide-gray-200">
|
||||
{winners.map((winner, index) => (
|
||||
<div key={index} className="px-6 py-4 hover:bg-gray-50 transition-colors">
|
||||
<div className="grid md:grid-cols-4 gap-4 items-center">
|
||||
{/* Date */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-gray-400 md:hidden font-semibold">📅</span>
|
||||
<span className="text-gray-600">{winner.date}</span>
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-gray-400 md:hidden font-semibold">👤</span>
|
||||
<span className="font-medium text-gray-900">{winner.name}</span>
|
||||
</div>
|
||||
|
||||
{/* Prize */}
|
||||
<div>
|
||||
<span className={`inline-flex items-center gap-2 px-3 py-1 rounded-full text-sm font-medium ${getPrizeColor(winner.prizeType)}`}>
|
||||
<span>{getPrizeIcon(winner.prizeType)}</span>
|
||||
<span>{winner.prize}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Boutique */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-gray-400 md:hidden font-semibold">🏪</span>
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">{winner.boutique}</div>
|
||||
<div className="text-sm text-gray-500">{winner.city}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<section className="pb-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-8 text-center">Témoignages de nos gagnants</h2>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{testimonials.map((testimonial, index) => (
|
||||
<div key={index} className="bg-white rounded-xl shadow-md p-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 bg-[#1a4d2e] text-white rounded-full flex items-center justify-center font-bold">
|
||||
{testimonial.initials}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">{testimonial.name}</div>
|
||||
<div className="text-sm text-gray-500">{testimonial.city}</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-600 text-sm mb-3 italic">"{testimonial.text}"</p>
|
||||
<div className="flex gap-1">
|
||||
{[...Array(testimonial.stars)].map((_, i) => (
|
||||
<span key={i} className="text-yellow-400">⭐</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="pb-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="bg-gradient-to-br from-[#1a4d2e] via-[#2d5a3d] to-[#1a4d2e] rounded-xl p-12 text-center text-white">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">
|
||||
Vous aussi, rejoignez nos gagnants !
|
||||
</h2>
|
||||
<p className="text-xl mb-8 text-white/90 max-w-2xl mx-auto">
|
||||
Avec 100% de gagnants garantis, c'est votre tour de remporter un magnifique lot.
|
||||
Rendez-vous en boutique et tentez votre chance !
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link
|
||||
href="/register"
|
||||
className="inline-flex items-center justify-center bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-8 py-4 rounded-lg transition-all shadow-xl"
|
||||
>
|
||||
⭐ Participer maintenant
|
||||
</Link>
|
||||
<Link
|
||||
href="/lots"
|
||||
className="inline-flex items-center justify-center bg-white hover:bg-gray-100 text-[#1a4d2e] font-bold px-8 py-4 rounded-lg transition-all"
|
||||
>
|
||||
Voir les lots
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -10,6 +10,7 @@ export default function LayoutClient({ children }: { children: React.ReactNode }
|
|||
// Ne pas afficher Header/Footer dans l'espace admin et employé
|
||||
const isAdminRoute = pathname?.startsWith("/admin");
|
||||
const isEmployeRoute = pathname?.startsWith("/employe");
|
||||
const isHomePage = pathname === "/";
|
||||
|
||||
if (isAdminRoute || isEmployeRoute) {
|
||||
return <>{children}</>;
|
||||
|
|
@ -18,7 +19,7 @@ export default function LayoutClient({ children }: { children: React.ReactNode }
|
|||
return (
|
||||
<>
|
||||
<Header />
|
||||
<main className="flex-1 container mx-auto px-4 py-6 sm:px-6 lg:px-8">
|
||||
<main className={isHomePage ? "flex-1" : "flex-1 container mx-auto px-4 py-6 sm:px-6 lg:px-8"}>
|
||||
{children}
|
||||
</main>
|
||||
<Footer />
|
||||
|
|
|
|||
|
|
@ -1,257 +1,233 @@
|
|||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
|
||||
import Button from "@/components/Button";
|
||||
import { ROUTES } from "@/utils/constants";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Nos Gains - Thé Tip Top",
|
||||
description: "Découvrez nos gains d'exception d'une valeur pouvant atteindre 100€",
|
||||
title: "Lots à gagner - Thé Tip Top",
|
||||
description: "Découvrez tous les magnifiques prix de notre jeu-concours. Avec 100% de gagnants garantis, chaque participant repart avec un lot !",
|
||||
};
|
||||
|
||||
export default function LotsPage() {
|
||||
return (
|
||||
<div className="py-12">
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Hero Section */}
|
||||
<section className="text-center mb-16">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
||||
Nos gains d'exception
|
||||
<section className="bg-white py-12">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||||
Lots à gagner
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
Des récompenses d'une valeur pouvant atteindre 100€ vous attendent !
|
||||
Explorez notre sélection de thés premium et d'accessoires exclusifs.
|
||||
<p className="text-lg text-gray-600">
|
||||
Découvrez tous les magnifiques prix de notre jeu-concours. Avec 100% de gagnants garantis,
|
||||
chaque participant repart avec un lot !
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Grand Prix Final */}
|
||||
<section className="py-8">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="bg-gradient-to-r from-yellow-100 to-yellow-200 rounded-2xl p-8 shadow-lg border-2 border-yellow-300">
|
||||
<div className="flex flex-col md:flex-row items-center gap-6">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-32 h-32 bg-white rounded-lg flex items-center justify-center text-6xl shadow-md">
|
||||
🏆
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 text-center md:text-left">
|
||||
<div className="inline-block bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full mb-2">
|
||||
GRAND PRIX FINAL
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-2">
|
||||
1 an de thé offert
|
||||
</h2>
|
||||
<p className="text-gray-700 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-orange-600">
|
||||
Valeur : 360€ <span className="text-sm text-gray-600 font-normal">Tirage sous contrôle d'huissier</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Prizes Grid */}
|
||||
<section className="mb-16">
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
||||
{/* Infuseur */}
|
||||
<Card className="hover:shadow-xl transition-shadow">
|
||||
<CardHeader>
|
||||
<div className="text-5xl text-center mb-3">🍵</div>
|
||||
<CardTitle className="text-center text-xl">Infuseur de thé</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-center">
|
||||
<p className="text-gray-600 leading-relaxed">
|
||||
Un infuseur en acier inoxydable de qualité supérieure pour révéler
|
||||
tous les arômes de vos thés.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Thé détox */}
|
||||
<Card className="hover:shadow-xl transition-shadow">
|
||||
<CardHeader>
|
||||
<div className="text-5xl text-center mb-3">🌿</div>
|
||||
<CardTitle className="text-center text-xl">Boite de 100g d'un thé détox</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-center">
|
||||
<p className="text-gray-600 leading-relaxed">
|
||||
Un mélange exclusif de plantes biologiques pour purifier votre
|
||||
organisme en douceur.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Coffret 39€ */}
|
||||
<Card className="hover:shadow-xl transition-shadow">
|
||||
<CardHeader>
|
||||
<div className="text-5xl text-center mb-3">🎁</div>
|
||||
<CardTitle className="text-center text-xl">Coffret Découverte de 39€</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-center">
|
||||
<p className="text-gray-600 leading-relaxed">
|
||||
Une sélection de 6 thés d'exception du monde entier dans un élégant
|
||||
coffret cadeau.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Thé signature */}
|
||||
<Card className="hover:shadow-xl transition-shadow">
|
||||
<CardHeader>
|
||||
<div className="text-5xl text-center mb-3">☕</div>
|
||||
<CardTitle className="text-center text-xl">Thé signature</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-center">
|
||||
<p className="text-gray-600 leading-relaxed">
|
||||
Un mélange de thé exclusif, soigneusement élaboré par nos maîtres artisans,
|
||||
offrant des arômes uniques et une expérience authentique à chaque tasse.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Coffret 69€ */}
|
||||
<Card className="hover:shadow-xl transition-shadow">
|
||||
<CardHeader>
|
||||
<div className="text-5xl text-center mb-3">🏆</div>
|
||||
<CardTitle className="text-center text-xl">Coffret Découverte de 69€</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-center">
|
||||
<p className="text-gray-600 leading-relaxed">
|
||||
Un coffret premium contenant une sélection de nos meilleurs thés
|
||||
d'exception avec accessoires assortis.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* CTA Card */}
|
||||
<Card className="bg-gradient-to-br from-primary-600 to-primary-700 text-white hover:shadow-xl transition-shadow flex items-center justify-center">
|
||||
<CardContent className="text-center py-8">
|
||||
<div className="text-5xl mb-4">🎮</div>
|
||||
<h3 className="text-2xl font-bold mb-4">Participer maintenant</h3>
|
||||
<Link href={ROUTES.GAME}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="bg-white text-primary-600 hover:bg-primary-50 border-white"
|
||||
>
|
||||
Jouer
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Comment participer Section */}
|
||||
<section className="mb-16 bg-gradient-to-r from-primary-50 to-green-50 py-12 -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
|
||||
<section className="py-8 pb-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center text-gray-900 mb-4">
|
||||
Comment participer ?
|
||||
</h2>
|
||||
<p className="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
|
||||
Trois étapes simples pour tenter votre chance et repartir avec nos gains d'exception.
|
||||
</p>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{/* Étape 1 */}
|
||||
<Card className="bg-white text-center hover:shadow-lg transition-shadow">
|
||||
<CardContent className="pt-8">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary-600 text-white text-3xl font-bold mb-4">
|
||||
1
|
||||
{/* Prize 1 - Infuseur */}
|
||||
<div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden">
|
||||
<div className="aspect-square bg-gradient-to-br from-amber-50 to-orange-50 flex items-center justify-center">
|
||||
<div className="text-8xl">🍵</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-gray-900">
|
||||
Créez votre compte
|
||||
</h3>
|
||||
<p className="text-gray-600">
|
||||
Ouvrez gratuitement votre espace et rejoignez notre communauté de passionnés.
|
||||
<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">
|
||||
60% des lots
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-2">Infuseur à thé premium</h3>
|
||||
<p className="text-gray-600 text-sm mb-4">
|
||||
Un infuseur en acier inoxydable de haute qualité pour ressortir les arômes de vos thés en vrac
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-2xl font-bold text-[#1a4d2e]">15€</div>
|
||||
<button className="text-[#1a4d2e] hover:text-[#f59e0b] 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>
|
||||
|
||||
{/* Étape 2 */}
|
||||
<Card className="bg-white text-center hover:shadow-lg transition-shadow">
|
||||
<CardContent className="pt-8">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary-600 text-white text-3xl font-bold mb-4">
|
||||
2
|
||||
{/* Prize 2 - Thé détox */}
|
||||
<div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden">
|
||||
<div className="aspect-square bg-gradient-to-br from-green-50 to-emerald-50 flex items-center justify-center">
|
||||
<div className="text-8xl">📦</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-gray-900">
|
||||
Participez
|
||||
</h3>
|
||||
<p className="text-gray-600">
|
||||
Prenez part au jeu-concours et validez votre participation chaque jour.
|
||||
<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">
|
||||
20% des lots
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-2">Boîte 100g thé détox</h3>
|
||||
<p className="text-gray-600 text-sm mb-4">
|
||||
Mélange détox aux plantes bio : menthe, citronnelle, fenouil et gingembre
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-2xl font-bold text-[#1a4d2e]">25€</div>
|
||||
<button className="text-[#1a4d2e] hover:text-[#f59e0b] 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>
|
||||
|
||||
{/* Étape 3 */}
|
||||
<Card className="bg-white text-center hover:shadow-lg transition-shadow">
|
||||
<CardContent className="pt-8">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary-600 text-white text-3xl font-bold mb-4">
|
||||
3
|
||||
{/* Prize 3 - Thé signature */}
|
||||
<div className="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden">
|
||||
<div className="aspect-square bg-gradient-to-br from-blue-50 to-cyan-50 flex items-center justify-center">
|
||||
<div className="text-8xl">🌿</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-gray-900">
|
||||
Remportez des gains
|
||||
</h3>
|
||||
<p className="text-gray-600">
|
||||
Gagnez des récompenses d'exception et découvrez l'univers premium de Thé Tip Top.
|
||||
<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">
|
||||
10% des lots
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-2">Boîte 100g thé signature</h3>
|
||||
<p className="text-gray-600 text-sm mb-4">
|
||||
Notre mélange signature exclusif : Earl Grey aux agrumes et pétales de fleurs
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-2xl font-bold text-[#1a4d2e]">35€</div>
|
||||
<button className="text-[#1a4d2e] hover:text-[#f59e0b] 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">
|
||||
<div className="aspect-square bg-gradient-to-br from-purple-50 to-pink-50 flex items-center justify-center">
|
||||
<div className="text-8xl">🎁</div>
|
||||
</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">
|
||||
6% des lots
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-2">Coffret découverte 39€</h3>
|
||||
<p className="text-gray-600 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-[#1a4d2e]">39€</div>
|
||||
<button className="text-[#1a4d2e] hover:text-[#f59e0b] 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">
|
||||
<div className="aspect-square bg-gradient-to-br from-amber-50 to-yellow-50 flex items-center justify-center">
|
||||
<div className="text-8xl">🎁</div>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<div className="inline-block bg-amber-100 text-amber-700 text-sm font-bold px-3 py-1 rounded-full mb-3">
|
||||
4% des lots
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-2">Coffret prestige 69€</h3>
|
||||
<p className="text-gray-600 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-[#1a4d2e]">69€</div>
|
||||
<button className="text-[#1a4d2e] hover:text-[#f59e0b] 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-[#f59e0b]">
|
||||
<div className="aspect-square bg-gradient-to-br from-yellow-50 to-amber-50 flex items-center justify-center">
|
||||
<div className="text-8xl">🏆</div>
|
||||
</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">
|
||||
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 mb-4">
|
||||
Valeur 360€ - Livraison mensuelle pendant 12 mois
|
||||
</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-2xl font-bold text-[#f59e0b]">360€</div>
|
||||
<button className="text-[#1a4d2e] hover:text-[#f59e0b] transition-colors">
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats & Features Section */}
|
||||
<section className="mb-16">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
{/* Main Stat */}
|
||||
<div className="text-center mb-12">
|
||||
<div className="text-6xl mb-4">🎉</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-3">
|
||||
Déjà plus de 1000 gains remis !
|
||||
{/* CTA Section */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto bg-gradient-to-r from-[#1a4d2e] to-[#2d5a3d] rounded-2xl shadow-2xl p-12 text-center text-white">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">
|
||||
Prêt à découvrir votre lot ?
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
Rejoignez les milliers de participants qui ont déjà découvert nos thés d'exception.
|
||||
<p className="text-xl mb-8 text-white/90 max-w-2xl mx-auto">
|
||||
Achetez pour 49€ minimum de thé en boutique, récupérez votre code et
|
||||
tentez votre chance ! Avec 100% de gagnants, vous ne pouvez que gagner.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Features Grid */}
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{/* Feature 1 */}
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardContent className="pt-8">
|
||||
<div className="text-5xl mb-4">🏆</div>
|
||||
<h3 className="text-xl font-bold mb-2 text-gray-900">
|
||||
Gagnant à tous les coups
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Chaque participant repart avec une récompense.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Feature 2 */}
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardContent className="pt-8">
|
||||
<div className="text-5xl mb-4">🌱</div>
|
||||
<h3 className="text-xl font-bold mb-2 text-gray-900">
|
||||
Thés bio certifiés
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Une qualité contrôlée et garantie.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Feature 3 */}
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardContent className="pt-8">
|
||||
<div className="text-5xl mb-4">✅</div>
|
||||
<h3 className="text-xl font-bold mb-2 text-gray-900">
|
||||
Satisfait ou remboursé
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Une expérience 100% sereine.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Final CTA */}
|
||||
<section className="text-center">
|
||||
<Card className="max-w-2xl mx-auto bg-gradient-to-r from-primary-600 to-primary-700 text-white">
|
||||
<CardContent className="py-12">
|
||||
<h2 className="text-3xl font-bold mb-4">
|
||||
Prêt à tenter votre chance ?
|
||||
</h2>
|
||||
<p className="text-lg mb-8 text-primary-50">
|
||||
Inscrivez-vous gratuitement et participez au jeu-concours dès maintenant
|
||||
</p>
|
||||
<Link href={ROUTES.REGISTER}>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="bg-white text-primary-600 hover:bg-primary-50 border-white px-10"
|
||||
>
|
||||
Créer mon compte
|
||||
</Button>
|
||||
<Link href="/register">
|
||||
<button className="bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold text-lg px-12 py-4 rounded-lg shadow-xl transition-all">
|
||||
Participer maintenant
|
||||
</button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -4,16 +4,14 @@ import { useForm } from "react-hook-form";
|
|||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useAuth } from "@/contexts/AuthContext";
|
||||
import { registerSchema, RegisterFormData } from "@/lib/validations";
|
||||
import { Input } from "@/components/ui/Input";
|
||||
import Button from "@/components/Button";
|
||||
import { Card } from "@/components/ui/Card";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { ROUTES } from "@/utils/constants";
|
||||
|
||||
export default function RegisterPage() {
|
||||
const { register: registerUser } = useAuth();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
||||
|
||||
const {
|
||||
register,
|
||||
|
|
@ -35,136 +33,214 @@ export default function RegisterPage() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-[calc(100vh-4rem)] flex items-center justify-center py-12">
|
||||
<Card className="w-full max-w-md p-8">
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4">
|
||||
<div className="w-full max-w-md">
|
||||
|
||||
{/* Title */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex justify-center mb-6">
|
||||
<Image
|
||||
src="/logos/logo.svg"
|
||||
alt="Thé Tip Top"
|
||||
width={120}
|
||||
height={120}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">Inscription</h1>
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-2">Inscription</h1>
|
||||
<p className="text-gray-600">
|
||||
Créez un compte pour participer au jeu-concours
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Input
|
||||
id="firstName"
|
||||
type="text"
|
||||
label="Prénom"
|
||||
placeholder="Jean"
|
||||
error={errors.firstName?.message}
|
||||
{...register("firstName")}
|
||||
required
|
||||
/>
|
||||
{/* Main Card */}
|
||||
<div className="bg-white rounded-xl shadow-md overflow-hidden">
|
||||
|
||||
<Input
|
||||
id="lastName"
|
||||
type="text"
|
||||
label="Nom"
|
||||
placeholder="Dupont"
|
||||
error={errors.lastName?.message}
|
||||
{...register("lastName")}
|
||||
required
|
||||
/>
|
||||
{/* Tabs */}
|
||||
<div className="flex border-b border-gray-200">
|
||||
<Link
|
||||
href={ROUTES.LOGIN}
|
||||
className="flex-1 py-4 px-6 text-center font-semibold text-gray-500 bg-gray-50 hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
Connexion
|
||||
</Link>
|
||||
<button className="flex-1 py-4 px-6 text-center font-semibold text-gray-900 bg-white border-b-2 border-[#1a4d2e]">
|
||||
Inscription
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
{/* Form Container */}
|
||||
<div className="p-8">
|
||||
|
||||
{/* Registration Form */}
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
|
||||
|
||||
{/* Prénom et Nom */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="firstName" className="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Prénom <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="firstName"
|
||||
type="text"
|
||||
placeholder="Jean"
|
||||
{...register("firstName")}
|
||||
className={`w-full px-4 py-3 border ${errors.firstName ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent`}
|
||||
/>
|
||||
{errors.firstName && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.firstName.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="lastName" className="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Nom <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="lastName"
|
||||
type="text"
|
||||
placeholder="Dupont"
|
||||
{...register("lastName")}
|
||||
className={`w-full px-4 py-3 border ${errors.lastName ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent`}
|
||||
/>
|
||||
{errors.lastName && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.lastName.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Email <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
label="Email"
|
||||
placeholder="votre.email@example.com"
|
||||
error={errors.email?.message}
|
||||
{...register("email")}
|
||||
required
|
||||
className={`w-full px-4 py-3 border ${errors.email ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent`}
|
||||
/>
|
||||
{errors.email && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.email.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Input
|
||||
{/* Téléphone */}
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Téléphone
|
||||
</label>
|
||||
<input
|
||||
id="phone"
|
||||
type="tel"
|
||||
label="Téléphone"
|
||||
placeholder="0612345678"
|
||||
error={errors.phone?.message}
|
||||
helperText="Optionnel - Format: 06 12 34 56 78"
|
||||
{...register("phone")}
|
||||
className={`w-full px-4 py-3 border ${errors.phone ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent`}
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500">Optionnel - Format: 06 12 34 56 78</p>
|
||||
{errors.phone && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.phone.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Input
|
||||
{/* Mot de passe */}
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Mot de passe <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
label="Mot de passe"
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="••••••••"
|
||||
error={errors.password?.message}
|
||||
helperText="Min. 8 caractères, 1 majuscule, 1 minuscule, 1 chiffre"
|
||||
{...register("password")}
|
||||
required
|
||||
className={`w-full px-4 py-3 border ${errors.password ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent pr-12`}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
{showPassword ? (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-gray-500">Min. 8 caractères, 1 majuscule, 1 minuscule, 1 chiffre</p>
|
||||
{errors.password && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.password.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Input
|
||||
{/* Confirmer mot de passe */}
|
||||
<div>
|
||||
<label htmlFor="confirmPassword" className="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Confirmer le mot de passe <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
id="confirmPassword"
|
||||
type="password"
|
||||
label="Confirmer le mot de passe"
|
||||
type={showConfirmPassword ? "text" : "password"}
|
||||
placeholder="••••••••"
|
||||
error={errors.confirmPassword?.message}
|
||||
{...register("confirmPassword")}
|
||||
required
|
||||
className={`w-full px-4 py-3 border ${errors.confirmPassword ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent pr-12`}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
{showConfirmPassword ? (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{errors.confirmPassword && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.confirmPassword.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="flex items-center h-5">
|
||||
{/* Checkbox CGU */}
|
||||
<div className="flex items-start gap-3">
|
||||
<input
|
||||
id="terms"
|
||||
type="checkbox"
|
||||
required
|
||||
className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300"
|
||||
className="mt-1 w-5 h-5 text-[#1a4d2e] border-gray-300 rounded focus:ring-2 focus:ring-[#1a4d2e]"
|
||||
/>
|
||||
</div>
|
||||
<label htmlFor="terms" className="ml-2 text-sm text-gray-700">
|
||||
J'accepte les{" "}
|
||||
<Link
|
||||
href="/terms"
|
||||
className="text-blue-600 hover:text-blue-700 hover:underline"
|
||||
>
|
||||
<label htmlFor="terms" className="text-sm text-gray-700 select-none cursor-pointer">
|
||||
J'accepte les{' '}
|
||||
<Link href="/terms" className="text-[#1a4d2e] underline hover:text-[#f59e0b]">
|
||||
conditions d'utilisation
|
||||
</Link>{" "}
|
||||
et la{" "}
|
||||
<Link
|
||||
href="/privacy"
|
||||
className="text-blue-600 hover:text-blue-700 hover:underline"
|
||||
>
|
||||
</Link>{' '}
|
||||
et la{' '}
|
||||
<Link href="/privacy" className="text-[#1a4d2e] underline hover:text-[#f59e0b]">
|
||||
politique de confidentialité
|
||||
</Link>
|
||||
</Link>{' '}
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
type="submit"
|
||||
isLoading={isSubmitting}
|
||||
disabled={isSubmitting}
|
||||
fullWidth
|
||||
size="lg"
|
||||
className="w-full bg-[#1a4d2e] hover:bg-[#2d5a3d] disabled:bg-gray-400 text-white font-bold px-8 py-4 rounded-lg transition-all"
|
||||
>
|
||||
S'inscrire
|
||||
</Button>
|
||||
{isSubmitting ? "Inscription..." : "S'inscrire"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p className="mt-8 text-center text-sm text-gray-600">
|
||||
Vous avez déjà un compte ?{" "}
|
||||
<Link
|
||||
href={ROUTES.LOGIN}
|
||||
className="font-medium text-blue-600 hover:text-blue-700 hover:underline"
|
||||
>
|
||||
Se connecter
|
||||
</Link>
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,289 +1,351 @@
|
|||
import type { Metadata } from "next";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
|
||||
'use client';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Règlement du jeu - Thé Tip Top",
|
||||
description: "Règlement officiel du jeu-concours Thé Tip Top",
|
||||
};
|
||||
import type { Metadata } from "next";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function RulesPage() {
|
||||
const [openSection, setOpenSection] = useState<number | null>(null);
|
||||
|
||||
const toggleSection = (index: number) => {
|
||||
setOpenSection(openSection === index ? null : index);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="py-12">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-8 text-center">
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-white py-12">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||||
Règlement du jeu-concours
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600">
|
||||
Toutes les conditions de participation à notre grand jeu-concours "Thé Tip Top"
|
||||
pour l'ouverture de notre 10e boutique.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="mb-6 text-center text-gray-600">
|
||||
<p className="mb-2">Jeu-concours Thé Tip Top 2025</p>
|
||||
<p>Du 01/01/2025 au 31/12/2025</p>
|
||||
{/* Résumé Section */}
|
||||
<section className="py-8">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="bg-white rounded-xl shadow-md p-6 mb-8">
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<span className="text-2xl">📋</span>
|
||||
<h2 className="text-2xl font-bold text-gray-900">Résumé du jeu-concours</h2>
|
||||
</div>
|
||||
|
||||
{/* Article 1 */}
|
||||
<Card className="mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl">Article 1 - Société organisatrice</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<p className="text-gray-700">
|
||||
Le jeu-concours « Thé Tip Top 2025 » est organisé par :
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
{/* 100% gagnants */}
|
||||
<div className="bg-red-50 rounded-lg p-6 text-center">
|
||||
<div className="text-4xl mb-3">🎯</div>
|
||||
<div className="text-2xl font-bold text-gray-900 mb-2">100% gagnants</div>
|
||||
<p className="text-sm text-gray-600">
|
||||
Chaque participant repart avec un lot garanti
|
||||
</p>
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
<p className="text-gray-700"><strong>Thé Tip Top SA</strong></p>
|
||||
<p className="text-gray-700">Société Anonyme au capital de 150 000 €</p>
|
||||
<p className="text-gray-700">Siège social : 18 rue Léon Frot, 75011 Paris</p>
|
||||
<p className="text-gray-700">RCS Paris B 812 456 789</p>
|
||||
<p className="text-gray-700">Email : contact@thetiptop.fr</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Article 2 */}
|
||||
<Card className="mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl">Article 2 - Durée du jeu</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<p className="text-gray-700">
|
||||
Le jeu-concours se déroule du <strong>1er janvier 2025 à 00h00</strong> au{" "}
|
||||
<strong>31 décembre 2025 à 23h59</strong> (heure de Paris).
|
||||
{/* 30 + 30 jours */}
|
||||
<div className="bg-orange-50 rounded-lg p-6 text-center">
|
||||
<div className="text-4xl mb-3">🔄</div>
|
||||
<div className="text-2xl font-bold text-gray-900 mb-2">30 + 30 jours</div>
|
||||
<p className="text-sm text-gray-600">
|
||||
Période de jeu + délai de réclamation
|
||||
</p>
|
||||
<p className="text-gray-700">
|
||||
Seules les participations enregistrées pendant cette période seront prises en compte.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Article 3 */}
|
||||
<Card className="mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl">Article 3 - Conditions de participation</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<p className="text-gray-700">
|
||||
Le jeu est ouvert à toute personne physique majeure résidant en France métropolitaine.
|
||||
{/* Grand prix 360€ */}
|
||||
<div className="bg-yellow-50 rounded-lg p-6 text-center">
|
||||
<div className="text-4xl mb-3">🏆</div>
|
||||
<div className="text-2xl font-bold text-gray-900 mb-2">Grand prix 360€</div>
|
||||
<p className="text-sm text-gray-600">
|
||||
Tirage final sous contrôle d'huissier
|
||||
</p>
|
||||
<p className="text-gray-700">
|
||||
Sont exclus de la participation :
|
||||
</p>
|
||||
<ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
|
||||
<li>Les membres du personnel de Thé Tip Top SA et de ses prestataires</li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Accordion Sections */}
|
||||
<section className="py-8 pb-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto space-y-4">
|
||||
|
||||
{/* Section 1 - Conditions de participation */}
|
||||
<div className="bg-white rounded-xl shadow-md overflow-hidden">
|
||||
<button
|
||||
onClick={() => toggleSection(1)}
|
||||
className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">📋</span>
|
||||
<h3 className="text-xl font-bold text-gray-900">1. Conditions de participation</h3>
|
||||
</div>
|
||||
<svg
|
||||
className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 1 ? 'rotate-180' : ''}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
{openSection === 1 && (
|
||||
<div className="px-6 pb-6 space-y-4 text-gray-700">
|
||||
<p>Le jeu est ouvert à toute personne physique majeure résidant en France métropolitaine.</p>
|
||||
<p className="font-semibold">Sont exclus de la participation :</p>
|
||||
<ul className="list-disc list-inside space-y-2 ml-4">
|
||||
<li>Les membres du personnel de Thé Tip Top et de ses prestataires</li>
|
||||
<li>Les membres de leur famille (conjoint, ascendants, descendants)</li>
|
||||
<li>Toute personne ayant participé à l'élaboration du jeu</li>
|
||||
</ul>
|
||||
<p className="text-gray-700">
|
||||
La participation au jeu implique l'acceptation pleine et entière du présent règlement.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<p>La participation au jeu implique l'acceptation pleine et entière du présent règlement.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Article 4 */}
|
||||
<Card className="mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl">Article 4 - Modalités de participation</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<p className="text-gray-700">
|
||||
Pour participer au jeu, le participant doit :
|
||||
</p>
|
||||
<ol className="list-decimal list-inside space-y-2 text-gray-700 ml-4">
|
||||
<li>Effectuer un achat dans l'une des boutiques Thé Tip Top participantes</li>
|
||||
{/* Section 2 - Codes de participation */}
|
||||
<div className="bg-white rounded-xl shadow-md overflow-hidden">
|
||||
<button
|
||||
onClick={() => toggleSection(2)}
|
||||
className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">🎫</span>
|
||||
<h3 className="text-xl font-bold text-gray-900">2. Codes de participation</h3>
|
||||
</div>
|
||||
<svg
|
||||
className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 2 ? 'rotate-180' : ''}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
{openSection === 2 && (
|
||||
<div className="px-6 pb-6 space-y-4 text-gray-700">
|
||||
<p>Pour participer au jeu, le participant doit :</p>
|
||||
<ol className="list-decimal list-inside space-y-2 ml-4">
|
||||
<li>Effectuer un achat de minimum 49€ dans une boutique Thé Tip Top participante</li>
|
||||
<li>Récupérer son ticket de caisse comportant un code unique à 10 caractères</li>
|
||||
<li>Se rendre sur le site www.thetiptop.fr</li>
|
||||
<li>Créer un compte ou se connecter à son compte existant</li>
|
||||
<li>Saisir le code figurant sur son ticket dans l'espace dédié</li>
|
||||
<li>Découvrir instantanément son gain</li>
|
||||
</ol>
|
||||
<p className="text-gray-700 mt-4">
|
||||
<strong>Important :</strong> Chaque code ne peut être utilisé qu'une seule fois.
|
||||
Toute tentative de fraude entraînera l'exclusion du participant.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="bg-amber-50 border-l-4 border-amber-500 p-4 mt-4">
|
||||
<p className="font-semibold text-amber-900">⚠️ Important</p>
|
||||
<p className="text-amber-800">Chaque code ne peut être utilisé qu'une seule fois. Toute tentative de fraude entraînera l'exclusion du participant.</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Article 5 */}
|
||||
<Card className="mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl">Article 5 - Dotations</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<p className="text-gray-700">
|
||||
Les dotations suivantes sont mises en jeu :
|
||||
</p>
|
||||
<div className="space-y-4 mt-4">
|
||||
<div className="bg-primary-50 p-4 rounded-lg">
|
||||
<p className="font-semibold text-gray-900">🍵 Infuseur à thé</p>
|
||||
<p className="text-gray-700">Un infuseur en acier inoxydable de qualité supérieure</p>
|
||||
<p className="text-sm text-gray-600">Probabilité : 1 ticket sur 4</p>
|
||||
{/* Section 3 - Calendrier et délais */}
|
||||
<div className="bg-white rounded-xl shadow-md overflow-hidden">
|
||||
<button
|
||||
onClick={() => toggleSection(3)}
|
||||
className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">📅</span>
|
||||
<h3 className="text-xl font-bold text-gray-900">3. Calendrier et délais</h3>
|
||||
</div>
|
||||
<div className="bg-primary-50 p-4 rounded-lg">
|
||||
<p className="font-semibold text-gray-900">🌿 Boîte de 100g de thé détox ou signature</p>
|
||||
<p className="text-gray-700">Un mélange exclusif de plantes biologiques</p>
|
||||
<p className="text-sm text-gray-600">Probabilité : 1 ticket sur 5</p>
|
||||
<svg
|
||||
className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 3 ? 'rotate-180' : ''}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
{openSection === 3 && (
|
||||
<div className="px-6 pb-6 space-y-4 text-gray-700">
|
||||
<div>
|
||||
<p className="font-semibold mb-2">📍 Période de participation</p>
|
||||
<p>Du 1er janvier 2025 à 00h00 au 31 janvier 2025 à 23h59 (heure de Paris)</p>
|
||||
</div>
|
||||
<div className="bg-primary-50 p-4 rounded-lg">
|
||||
<p className="font-semibold text-gray-900">☕ Thé gratuit en magasin</p>
|
||||
<p className="text-gray-700">Une boisson offerte lors de votre prochaine visite</p>
|
||||
<p className="text-sm text-gray-600">Probabilité : 1 ticket sur 2</p>
|
||||
<div>
|
||||
<p className="font-semibold mb-2">📍 Délai de réclamation des lots</p>
|
||||
<p>30 jours après la date de participation pour réclamer votre lot</p>
|
||||
</div>
|
||||
<div className="bg-primary-50 p-4 rounded-lg">
|
||||
<p className="font-semibold text-gray-900">🎁 Coffret Découverte 39€</p>
|
||||
<p className="text-gray-700">Une sélection de 6 thés d'exception</p>
|
||||
<p className="text-sm text-gray-600">Probabilité : 1 ticket sur 10</p>
|
||||
<div>
|
||||
<p className="font-semibold mb-2">📍 Tirage final</p>
|
||||
<p>Le tirage au sort pour le grand prix (1 an de thé - 360€) aura lieu le 15 février 2025 sous contrôle d'huissier de justice</p>
|
||||
</div>
|
||||
<div className="bg-primary-50 p-4 rounded-lg">
|
||||
<p className="font-semibold text-gray-900">🏆 Coffret Prestige 69€</p>
|
||||
<p className="text-gray-700">Notre coffret premium avec accessoires</p>
|
||||
<p className="text-sm text-gray-600">Probabilité : très rare</p>
|
||||
<div className="bg-green-50 border-l-4 border-green-500 p-4 mt-4">
|
||||
<p className="font-semibold text-green-900">✓ À retenir</p>
|
||||
<p className="text-green-800">Seules les participations enregistrées pendant la période officielle seront prises en compte.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-700 mt-4">
|
||||
<strong>100% des tickets sont gagnants !</strong> Chaque participant repart avec au
|
||||
minimum une récompense.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Article 6 */}
|
||||
<Card className="mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl">Article 6 - Désignation des gagnants</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<p className="text-gray-700">
|
||||
Le gain est attribué de manière instantanée et aléatoire au moment de la saisie du code,
|
||||
selon les probabilités définies à l'article 5.
|
||||
</p>
|
||||
<p className="text-gray-700">
|
||||
Le participant est immédiatement informé de son gain sur le site.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Article 7 */}
|
||||
<Card className="mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl">Article 7 - Remise des lots</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<p className="text-gray-700">
|
||||
Les lots doivent être réclamés dans un délai de <strong>60 jours</strong> à compter
|
||||
de la date de participation.
|
||||
</p>
|
||||
<p className="text-gray-700">
|
||||
La remise des lots s'effectue selon les modalités suivantes :
|
||||
</p>
|
||||
<ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
|
||||
<li><strong>Thé gratuit :</strong> À retirer en boutique sur présentation du justificatif</li>
|
||||
<li><strong>Autres lots :</strong> Retrait en boutique ou envoi par courrier (frais de port offerts)</li>
|
||||
{/* Section 4 - Tirage final Grand Prix */}
|
||||
<div className="bg-white rounded-xl shadow-md overflow-hidden">
|
||||
<button
|
||||
onClick={() => toggleSection(4)}
|
||||
className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">🏆</span>
|
||||
<h3 className="text-xl font-bold text-gray-900">4. Tirage final - Grand Prix</h3>
|
||||
</div>
|
||||
<svg
|
||||
className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 4 ? 'rotate-180' : ''}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
{openSection === 4 && (
|
||||
<div className="px-6 pb-6 space-y-4 text-gray-700">
|
||||
<p className="font-semibold text-xl">Grand Prix : 1 an de thé offert (valeur 360€)</p>
|
||||
<p>À l'issue de la période de participation, un tirage au sort sera organisé pour désigner le grand gagnant du prix principal.</p>
|
||||
<div>
|
||||
<p className="font-semibold mb-2">Conditions du tirage :</p>
|
||||
<ul className="list-disc list-inside space-y-2 ml-4">
|
||||
<li>Date : 15 février 2025</li>
|
||||
<li>Lieu : Siège social de Thé Tip Top, Paris</li>
|
||||
<li>Sous contrôle d'huissier de justice : Maître Dupont, Office Notarial de Paris</li>
|
||||
<li>Tous les participants ayant validé au moins un code sont automatiquement inscrits</li>
|
||||
</ul>
|
||||
<p className="text-gray-700">
|
||||
Les lots ne peuvent être ni échangés, ni remboursés, ni convertis en espèces.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Article 8 */}
|
||||
<Card className="mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl">Article 8 - Données personnelles</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<p className="text-gray-700">
|
||||
Les données personnelles collectées dans le cadre du jeu font l'objet d'un traitement
|
||||
informatique destiné à gérer la participation au jeu et l'attribution des lots.
|
||||
</p>
|
||||
<p className="text-gray-700">
|
||||
Pour plus d'informations, consultez notre{" "}
|
||||
<a href="/privacy" className="text-primary-600 hover:text-primary-700 underline">
|
||||
Politique de confidentialité
|
||||
</a>.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Article 9 */}
|
||||
<Card className="mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl">Article 9 - Responsabilité</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<p className="text-gray-700">
|
||||
La responsabilité de Thé Tip Top SA ne saurait être engagée en cas de :
|
||||
</p>
|
||||
<ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
|
||||
<li>Force majeure ou événement indépendant de sa volonté</li>
|
||||
<li>Défaillance technique du réseau Internet</li>
|
||||
<li>Utilisation frauduleuse des codes</li>
|
||||
<li>Mauvaise utilisation des lots par les gagnants</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Article 10 */}
|
||||
<Card className="mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl">Article 10 - Modification et annulation</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<p className="text-gray-700">
|
||||
Thé Tip Top SA se réserve le droit d'annuler, de reporter, de prolonger, d'écourter
|
||||
ou de modifier tout ou partie du jeu en cas de force majeure.
|
||||
</p>
|
||||
<p className="text-gray-700">
|
||||
Toute modification fera l'objet d'une information sur le site www.thetiptop.fr.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Article 11 */}
|
||||
<Card className="mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl">Article 11 - Dépôt du règlement</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<p className="text-gray-700">
|
||||
Le présent règlement est déposé auprès d'un huissier de justice et peut être consulté
|
||||
sur le site www.thetiptop.fr.
|
||||
</p>
|
||||
<p className="text-gray-700">
|
||||
Un exemplaire peut être adressé gratuitement à toute personne qui en fait la demande
|
||||
à l'adresse : contact@thetiptop.fr
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Article 12 */}
|
||||
<Card className="mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl">Article 12 - Litiges</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<p className="text-gray-700">
|
||||
Le présent règlement est régi par le droit français.
|
||||
</p>
|
||||
<p className="text-gray-700">
|
||||
Tout litige relatif à l'interprétation ou à l'exécution du présent règlement sera
|
||||
de la compétence exclusive des tribunaux français.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Contact */}
|
||||
<Card className="mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl">Contact</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-700">
|
||||
Pour toute question relative au jeu-concours :{" "}
|
||||
<a href="mailto:contact@thetiptop.fr" className="text-primary-600 hover:text-primary-700 underline">
|
||||
contact@thetiptop.fr
|
||||
</a>
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold mb-2">Le lot :</p>
|
||||
<p>Le gagnant recevra pendant 12 mois consécutifs une livraison mensuelle de thé d'une valeur de 30€, soit un total de 360€.</p>
|
||||
</div>
|
||||
<div className="bg-yellow-50 border-l-4 border-yellow-500 p-4 mt-4">
|
||||
<p className="font-semibold text-yellow-900">🎁 Information</p>
|
||||
<p className="text-yellow-800">Le gagnant sera contacté par email et par téléphone dans les 48h suivant le tirage.</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Section 5 - Retrait des lots */}
|
||||
<div className="bg-white rounded-xl shadow-md overflow-hidden">
|
||||
<button
|
||||
onClick={() => toggleSection(5)}
|
||||
className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">🎁</span>
|
||||
<h3 className="text-xl font-bold text-gray-900">5. Retrait des lots</h3>
|
||||
</div>
|
||||
<svg
|
||||
className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 5 ? 'rotate-180' : ''}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
{openSection === 5 && (
|
||||
<div className="px-6 pb-6 space-y-4 text-gray-700">
|
||||
<p>Les lots doivent être réclamés dans un délai de <strong>30 jours</strong> à compter de la date de participation.</p>
|
||||
<div>
|
||||
<p className="font-semibold mb-2">Modalités de remise :</p>
|
||||
<ul className="list-disc list-inside space-y-2 ml-4">
|
||||
<li><strong>Infuseur, thé détox/signature :</strong> Retrait en boutique ou envoi postal (frais de port offerts)</li>
|
||||
<li><strong>Coffrets découverte et prestige :</strong> Retrait en boutique ou livraison à domicile offerte</li>
|
||||
<li><strong>Grand prix (1 an de thé) :</strong> Livraison mensuelle à l'adresse de votre choix</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-red-50 border-l-4 border-red-500 p-4 mt-4">
|
||||
<p className="font-semibold text-red-900">⚠️ Attention</p>
|
||||
<p className="text-red-800">Les lots non réclamés dans le délai imparti seront considérés comme abandonnés. Aucun lot ne peut être échangé, remboursé ou converti en espèces.</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Section 6 - Protection des données */}
|
||||
<div className="bg-white rounded-xl shadow-md overflow-hidden">
|
||||
<button
|
||||
onClick={() => toggleSection(6)}
|
||||
className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">🔒</span>
|
||||
<h3 className="text-xl font-bold text-gray-900">6. Protection des données personnelles</h3>
|
||||
</div>
|
||||
<svg
|
||||
className={`w-6 h-6 text-gray-500 transition-transform ${openSection === 6 ? 'rotate-180' : ''}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
{openSection === 6 && (
|
||||
<div className="px-6 pb-6 space-y-4 text-gray-700">
|
||||
<p>Les données personnelles collectées dans le cadre du jeu font l'objet d'un traitement informatique destiné à gérer la participation au jeu et l'attribution des lots.</p>
|
||||
<div>
|
||||
<p className="font-semibold mb-2">Vos droits :</p>
|
||||
<ul className="list-disc list-inside space-y-2 ml-4">
|
||||
<li>Droit d'accès à vos données personnelles</li>
|
||||
<li>Droit de rectification de vos données</li>
|
||||
<li>Droit à l'effacement de vos données</li>
|
||||
<li>Droit d'opposition au traitement</li>
|
||||
<li>Droit à la portabilité des données</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p>Pour exercer vos droits, contactez-nous à : <a href="mailto:contact@thetiptop.fr" className="text-[#1a4d2e] underline hover:text-[#f59e0b]">contact@thetiptop.fr</a></p>
|
||||
<p>Pour plus d'informations, consultez notre <a href="/privacy" className="text-[#1a4d2e] underline hover:text-[#f59e0b]">Politique de confidentialité</a>.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Informations légales Section */}
|
||||
<section className="py-12 bg-gradient-to-br from-[#1a4d2e] via-[#2d5a3d] to-[#1a4d2e]">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-xl p-8 text-white">
|
||||
<h2 className="text-2xl font-bold mb-6">Informations légales</h2>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h3 className="font-semibold mb-3 text-[#f59e0b]">Organisateur</h3>
|
||||
<p className="text-sm">Thé Tip Top</p>
|
||||
<p className="text-sm">18 Avenue des Thés</p>
|
||||
<p className="text-sm">75001 Paris, France</p>
|
||||
<p className="text-sm">SIRET: 12345678901234</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold mb-3 text-[#f59e0b]">Huissier</h3>
|
||||
<p className="text-sm">Maître Dupont</p>
|
||||
<p className="text-sm">Office Notarial de Paris</p>
|
||||
<p className="text-sm">456 Rue de la Justice</p>
|
||||
<p className="text-sm">75002 Paris, France</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 pt-6 border-t border-white/20">
|
||||
<p className="text-sm text-white/80">
|
||||
Jeu-concours gratuit sans obligation d'achat, sauf pour l'acquisition du ticket donnant droit à participation.
|
||||
Règlement déposé chez Maître Dupont, huissier de justice à Paris.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -184,7 +184,7 @@ export default function Footer() {
|
|||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="border-t border-white/10 bg-[#1a4d2e]/50">
|
||||
<div className="border-t border-white/10">
|
||||
<div className="container mx-auto px-4 py-6">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-4 text-sm">
|
||||
<p className="text-white/80">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user