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

feat: apply new content to rules-about page

Browse Source
This commit is contained in:
Lamrini-asmae 2025-11-23 23:24:45 +01:00
parent 7492f6bc7a
commit 51a3875993
3 changed files with 111 additions and 349 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

402
app/about/page.tsx
View File

@ -4,333 +4,109 @@ 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 AboutPage() {
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="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]">
{/* Hero Section */}
<section className="bg-gradient-to-r from-white to-[#faf9f5] py-12 border-b-2 border-[#e5e4dc]">
<div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto text-center">
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
Nos gagnants
<h1 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] mb-4">
À propos de Thé Tip Top à Nice
</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 className="text-lg text-[#8a8a7a]">
Notre passion pour le thé d'exception et nos événements uniques à Nice
</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 !
{/* About Us our story*/}
<section className="py-20 bg-white/50 backdrop-blur-sm">
<div className="container mx-auto px-4">
<div className="max-w-7xl mx-auto">
<div className="grid md:grid-cols-2 gap-16 items-center">
{/* Texte */}
<div className="order-2 md:order-1 space-y-6">
<h2 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] leading-tight">
Notre Histoire
<span className="block text-3xl md:text-4xl text-[#d4a574] mt-2">
Thé Tip Top Nice
</span>
</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 className="space-y-4 text-lg text-gray-700">
<p className="leading-relaxed">
Depuis plus de 15 ans, Thé Tip Top perpétue l'art du thé haut de gamme avec passion et authenticité. Inspirée par l'amour des saveurs authentiques et des traditions séculaires, notre marque s'engage à vous faire découvrir les meilleurs thés du monde dans notre boutique à Nice. Chaque thé de notre collection est soigneusement choisi auprès de producteurs respectueux de l'environnement et du commerce équitable.
</p>
<p className="leading-relaxed">
Nous privilégions les méthodes artisanales et biologiques pour préserver la richesse des arômes naturels de nos thés premium. Aujourd'hui, à l'occasion de l'ouverture de notre 10e boutique à Nice, nous célébrons cette aventure en organisant des événements uniques et des concours afin de partager notre passion du thé </p>
</div>
</div>
{/* Image */}
<div className="order-1 md:order-2">
<div className="relative rounded-2xl overflow-hidden shadow-2xl">
{/* Fallback avec illustration CSS si l'image n'existe pas */}
<div className="aspect-[4/3] bg-gradient-to-br from-[#1a4d2e] via-[#2d5a3d] to-[#1a4d2e] relative">
{/* Motif décoratif */}
<div className="absolute inset-0 opacity-20">
<div className="absolute inset-0" style={{
backgroundImage: 'url("data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.3\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")',
}}></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* notre engagement Section */}
<section className="py-16 bg-white/50 backdrop-blur-sm">
<div className="container mx-auto px-4">
<div className="max-w-5xl mx-auto">
<div className="text-center mb-8">
<h2 className="text-3xl font-bold text-[#5a5a4e] mb-2">Notre Engagement - Thé Tip Top </h2>
<p className="text-[#8a8a7a]">Qualité, Durabilité et Respect au Cœur de Chaque Thé</p>
</div>
<div className="grid md:grid-cols-3 gap-4">
<div className="bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 rounded-lg p-6 text-center border border-[#d4a574]/20 hover:shadow-lg transition-shadow">
<div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-3xl shadow-lg">🍵</div>
<div className="text-2xl font-bold text-[#5a5a4e] mb-2">Thé bio</div>
<p className="text-sm text-[#8a8a7a]">
Tous nos thés sont certifiés biologiques et cultivés dans le respect de l'environnement.
</p>
</div>
<div className="bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 rounded-lg p-6 text-center border border-[#d4a574]/20 hover:shadow-lg transition-shadow">
<div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-3xl shadow-lg">🌍</div>
<div className="text-2xl font-bold text-[#5a5a4e] mb-2">Commerce équitable </div>
<p className="text-sm text-[#8a8a7a]">
Nous soutenons les producteurs locaux en collaborant avec des partenaires engagés dans des pratiques durables et équitables
</p>
</div>
<div className="bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 rounded-lg p-6 text-center border border-[#d4a574]/20 hover:shadow-lg transition-shadow">
<div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-3xl shadow-lg">📦</div>
<div className="text-2xl font-bold text-[#5a5a4e] mb-2">Livraison rapide</div>
<p className="text-sm text-[#8a8a7a]">
Expédition sous 24h pour que vous puissiez savourer rapidement vos thés
</p>
</div>
</div>
</div>
</div>
</section>
{/* notre philosophie Section */}
<section className="py-16 bg-white/50 backdrop-blur-sm">
<div className="container mx-auto px-4">
<div className="max-w-5xl mx-auto">
<div className="text-center mb-8">
<h2 className="text-2xl italic text-[#5a5a4e] mb-4">
"Le thé, un art de vivre, une invitation à la découverte."
</h2>
<p className="text-[#8a8a7a]">Philosophie de Thé Tip Top</p>
</div>
</div>
</div>
</section>
</div>
);

54
app/rules/page.tsx
View File

@ -96,14 +96,7 @@ export default function RulesPage() {
</button>
{openSection === 1 && (
<div className="px-6 pb-6 space-y-4 text-[#5a5a4e]">
<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>La participation au jeu implique l'acceptation pleine et entière du présent règlement.</p>
<p>Le concours est ouvert à toute personne majeure résidant en France métropolitaine ayant effectué un achat d'un montant minimum de 49€ TTC. Pour participer, le participant doit entrer un code unique obtenu lors d'un achat ou d'une opération marketing. </p>
</div>
)}
</div>
@ -133,7 +126,7 @@ export default function RulesPage() {
<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>Se rendre sur notre site </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>
@ -153,8 +146,8 @@ export default function RulesPage() {
className="w-full flex items-center justify-between p-6 text-left hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors"
>
<div className="flex items-center gap-3">
<div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md">📅</div>
<h3 className="text-xl font-bold text-[#5a5a4e]">3. Calendrier et délais</h3>
<div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-xl shadow-md">🎁</div>
<h3 className="text-xl font-bold text-[#5a5a4e]">3. Lots à gagner</h3>
</div>
<svg
className={`w-6 h-6 text-[#8a8a7a] transition-transform ${openSection === 3 ? 'rotate-180' : ''}`}
@ -168,20 +161,16 @@ export default function RulesPage() {
{openSection === 3 && (
<div className="px-6 pb-6 space-y-4 text-[#5a5a4e]">
<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>
<p className="font-semibold mb-2">Voici ce que tu peux gagner :</p>
</div>
<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>
<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-gradient-to-r from-[#d4a574]/10 to-[#c4956a]/10 border-l-4 border-[#d4a574] p-4 mt-4 rounded">
<p className="font-semibold text-[#5a5a4e]">✓ À retenir</p>
<p className="text-[#5a5a4e]">Seules les participations enregistrées pendant la période officielle seront prises en compte.</p>
<ul className="list list-inside space-y-2 ml-4">
<li>Infuseur à thé (60% des tickets)</li>
<li>Boîte de 100g de thé détox ou infusion (20% des tickets)</li>
<li>Boîte de 100g de thé signature (10% des tickets)</li>
<li>Coffret découverte (valeur 39€ - 6% des tickets)</li>
<li>Coffret découverte (valeur 69€ - 4% des tickets)</li>
</ul>
</div>
</div>
)}
@ -213,15 +202,14 @@ export default function RulesPage() {
<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>
</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>
<p>Le gagnant recevra Un an de thé d'une valeur de 360€ !</p>
</div>
<div className="bg-gradient-to-r from-[#d4a574]/10 to-[#c4956a]/10 border-l-4 border-[#d4a574] p-4 mt-4 rounded">
<p className="font-semibold text-[#5a5a4e]">🎁 Information</p>
@ -258,7 +246,7 @@ export default function RulesPage() {
<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>
<li><strong>Grand prix (1 an de thé) :</strong> Livraison à l'adresse de votre choix</li>
</ul>
</div>
<div className="bg-red-50 border-l-4 border-red-500 p-4 mt-4 rounded">
@ -331,9 +319,8 @@ export default function RulesPage() {
</div>
<div className="space-y-2 text-[#5a5a4e]">
<p className="font-semibold">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 text-[#8a8a7a]">SIRET: 12345678901234</p>
<p className="text-sm">18 rue Léon Frot, 75011 Paris</p>
<p className="text-sm text-[#8a8a7a]">SIRET : 901 234 567 00015</p>
</div>
</div>
@ -346,10 +333,9 @@ export default function RulesPage() {
<h3 className="text-xl font-bold text-[#5a5a4e]">Huissier</h3>
</div>
<div className="space-y-2 text-[#5a5a4e]">
<p className="font-semibold">Maître Dupont</p>
<p className="font-semibold">Maître Arnaud Rick</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>
<p className="text-sm">456 Rue de la Justice, 75002 Paris, France</p>
</div>
</div>
</div>
@ -362,7 +348,7 @@ export default function RulesPage() {
</div>
<p className="text-sm text-white/90 leading-relaxed">
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.
Règlement déposé chez Maître Arnaud Rick, huissier de justice à Paris.
</p>
</div>
</div>

4
components/Header.tsx
View File

@ -74,10 +74,10 @@ export default function Header() {
Règlement
</Link>
<Link
href="/faq"
href="/about"
className="text-[#5a5a4e] hover:text-[#d4a574] font-medium transition-colors"
>
FAQ
À propos
</Link>
<Link
href="/contact"