soufiane
0ade13d50d
Design Updates: - Apply consistent golden/beige color scheme to all pages - Update client dashboard, contact, FAQ, history, game, lots, profile, rules, terms, and privacy pages - Replace green/orange colors with golden palette (#d4a574, #c4956a) - Add golden gradient backgrounds and borders throughout Header Improvements: - Fix button layout to maintain proper form when page is zoomed - Remove hover:scale-105 effects that caused deformation - Add whitespace-nowrap to prevent text wrapping - Add flex-shrink-0 to prevent element shrinking - Add gap-4 to main header container for proper spacing - Fix user info card with text ellipsis for long names/emails - Improve spacing between "Participer" button and user card Profile Page Updates: - Remove "Dernière modification" field - Update all colors to golden theme API Endpoints: - Fix user profile endpoint from /user/profile to /users/profile Statistics Icons: - Update dashboard statistics icons with distinct colors - Total Participations: blue - Gains réclamés: green - En attente: yellow - Rejetés: red 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
374 lines
21 KiB
TypeScript
374 lines
21 KiB
TypeScript
'use client';
|
||
|
||
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="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-[#5a5a4e] mb-4">
|
||
Règlement du jeu-concours
|
||
</h1>
|
||
<p className="text-lg text-[#8a8a7a]">
|
||
Toutes les conditions de participation à notre grand jeu-concours "Thé Tip Top"
|
||
pour l'ouverture de notre 10e boutique.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 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 border border-[#e5e4dc]">
|
||
<div className="flex items-center gap-2 mb-6">
|
||
<span className="text-2xl">📋</span>
|
||
<h2 className="text-2xl font-bold text-[#5a5a4e]">Résumé du jeu-concours</h2>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-3 gap-4">
|
||
{/* 100% gagnants */}
|
||
<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">100% gagnants</div>
|
||
<p className="text-sm text-[#8a8a7a]">
|
||
Chaque participant repart avec un lot garanti
|
||
</p>
|
||
</div>
|
||
|
||
{/* 30 + 30 jours */}
|
||
<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">30 + 30 jours</div>
|
||
<p className="text-sm text-[#8a8a7a]">
|
||
Période de jeu + délai de réclamation
|
||
</p>
|
||
</div>
|
||
|
||
{/* Grand prix 360€ */}
|
||
<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">Grand prix 360€</div>
|
||
<p className="text-sm text-[#8a8a7a]">
|
||
Tirage final sous contrôle d'huissier
|
||
</p>
|
||
</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 border border-[#e5e4dc]">
|
||
<button
|
||
onClick={() => toggleSection(1)}
|
||
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]">1. Conditions de participation</h3>
|
||
</div>
|
||
<svg
|
||
className={`w-6 h-6 text-[#8a8a7a] 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-[#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>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Section 2 - Codes de participation */}
|
||
<div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
|
||
<button
|
||
onClick={() => toggleSection(2)}
|
||
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]">2. Codes de participation</h3>
|
||
</div>
|
||
<svg
|
||
className={`w-6 h-6 text-[#8a8a7a] 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-[#5a5a4e]">
|
||
<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>
|
||
<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]">⚠️ Important</p>
|
||
<p className="text-[#5a5a4e]">Chaque code ne peut être utilisé qu'une seule fois. Toute tentative de fraude entraînera l'exclusion du participant.</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Section 3 - Calendrier et délais */}
|
||
<div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
|
||
<button
|
||
onClick={() => toggleSection(3)}
|
||
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>
|
||
<svg
|
||
className={`w-6 h-6 text-[#8a8a7a] 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-[#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>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Section 4 - Tirage final Grand Prix */}
|
||
<div className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
|
||
<button
|
||
onClick={() => toggleSection(4)}
|
||
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]">4. Tirage final - Grand Prix</h3>
|
||
</div>
|
||
<svg
|
||
className={`w-6 h-6 text-[#8a8a7a] 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-[#5a5a4e]">
|
||
<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>
|
||
</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-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>
|
||
<p className="text-[#5a5a4e]">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 border border-[#e5e4dc]">
|
||
<button
|
||
onClick={() => toggleSection(5)}
|
||
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]">5. Retrait des lots</h3>
|
||
</div>
|
||
<svg
|
||
className={`w-6 h-6 text-[#8a8a7a] 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-[#5a5a4e]">
|
||
<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 rounded">
|
||
<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 border border-[#e5e4dc]">
|
||
<button
|
||
onClick={() => toggleSection(6)}
|
||
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]">6. Protection des données personnelles</h3>
|
||
</div>
|
||
<svg
|
||
className={`w-6 h-6 text-[#8a8a7a] 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-[#5a5a4e]">
|
||
<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-[#d4a574] underline hover:text-[#c4956a]">contact@thetiptop.fr</a></p>
|
||
<p>Pour plus d'informations, consultez notre <a href="/privacy" className="text-[#d4a574] underline hover:text-[#c4956a]">Politique de confidentialité</a>.</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Informations légales Section */}
|
||
<section className="py-16 bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]">
|
||
<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">Informations légales</h2>
|
||
<p className="text-[#8a8a7a]">Détails officiels du jeu-concours</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 gap-6 mb-6">
|
||
{/* Organisateur */}
|
||
<div className="bg-white rounded-xl shadow-lg p-6 border-2 border-[#e5e4dc] hover:shadow-xl transition-shadow">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center shadow-md">
|
||
<span className="text-xl">🏢</span>
|
||
</div>
|
||
<h3 className="text-xl font-bold text-[#5a5a4e]">Organisateur</h3>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Huissier */}
|
||
<div className="bg-white rounded-xl shadow-lg p-6 border-2 border-[#e5e4dc] hover:shadow-xl transition-shadow">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="w-12 h-12 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center shadow-md">
|
||
<span className="text-xl">⚖️</span>
|
||
</div>
|
||
<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="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>
|
||
|
||
{/* Note légale */}
|
||
<div className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] rounded-xl shadow-lg p-6 text-white text-center">
|
||
<div className="flex items-center justify-center gap-2 mb-3">
|
||
<span className="text-2xl">📜</span>
|
||
<h3 className="text-lg font-semibold">Note légale</h3>
|
||
</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.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|