Merge Alexis : ajout Layout, Accueil, ReglesJeu et pages légales
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Emma781227
@@ -1,13 +1,19 @@
|
||||
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
|
||||
import Layout from './components/Layout.jsx'
|
||||
import Connexion from './pages/Connexion'
|
||||
import Inscription from './pages/Inscription'
|
||||
//import Participation from './pages/Participation'
|
||||
import Accueil from './pages/Accueil'
|
||||
import ReglesJeu from './pages/ReglesJeu'
|
||||
import Participation from './pages/Participation'
|
||||
import MesGains from './pages/MesGains'
|
||||
import Employe from './pages/Employe'
|
||||
import Admin from './pages/Admin'
|
||||
import Profile from './pages/Profile'
|
||||
import SaisirCodeUnique from './pages/SaisirCodeUnique.jsx'
|
||||
import Perdu from './pages/Perdu'
|
||||
import MentionsLegales from './pages/MentionsLegales'
|
||||
import Confidentialite from './pages/Confidentialite'
|
||||
import Contact from './pages/Contact.jsx'
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
@@ -16,13 +22,18 @@ export default function App() {
|
||||
<Route path="/" element={<Navigate to="/connexion" replace />} />
|
||||
<Route path="/connexion" element={<Connexion />} />
|
||||
<Route path="/inscription" element={<Inscription />} />
|
||||
{/* <Route path="/participation" element={<Participation />} /> */}
|
||||
<Route path="/mes-gains" element={<MesGains />} />
|
||||
<Route path="/employe" element={<Employe />} />
|
||||
<Route path="/admin" element={<Admin />} />
|
||||
<Route path="/profile" element={<Profile />} />
|
||||
<Route path="/saisir-code-unique" element={<SaisirCodeUnique />} />
|
||||
<Route path="/perdu" element={<Perdu />} />
|
||||
<Route path="/accueil" element={<Layout><Accueil /></Layout>} />
|
||||
<Route path="/regles-jeu" element={<Layout><ReglesJeu /></Layout>} />
|
||||
<Route path="/participation" element={<Layout><Participation /></Layout>} />
|
||||
<Route path="/mes-gains" element={<Layout><MesGains /></Layout>} />
|
||||
<Route path="/employe" element={<Layout><Employe /></Layout>} />
|
||||
<Route path="/admin" element={<Layout><Admin /></Layout>} />
|
||||
<Route path="/profile" element={<Layout><Profile /></Layout>} />
|
||||
<Route path="/saisir-code-unique" element={<Layout><SaisirCodeUnique /></Layout>} />
|
||||
<Route path="/perdu" element={<Layout><Perdu /></Layout>} />
|
||||
<Route path="/mentions-legales" element={<Layout><MentionsLegales /></Layout>} />
|
||||
<Route path="/confidentialite" element={<Layout><Confidentialite /></Layout>} />
|
||||
<Route path="/contact" element={<Layout><Contact /></Layout>} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
)
|
||||
|
||||
BIN
frontend/src/assets/img/logo.png
Normal file
BIN
frontend/src/assets/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
217
frontend/src/components/Footer.jsx
Normal file
217
frontend/src/components/Footer.jsx
Normal file
@@ -0,0 +1,217 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="bg-green-900 text-white">
|
||||
|
||||
|
||||
{/* Partie principale */}
|
||||
<div className="max-w-7xl mx-auto px-6 py-12 grid md:grid-cols-4 gap-10">
|
||||
|
||||
|
||||
{/* Logo */}
|
||||
<div>
|
||||
|
||||
<Link to="/accueil">
|
||||
<h3 className="text-xl font-bold mb-3">
|
||||
Thé Tip Top
|
||||
</h3>
|
||||
</Link>
|
||||
|
||||
|
||||
<p className="text-green-100 text-sm leading-relaxed">
|
||||
Participez au jeu-concours Thé Tip Top et tentez de gagner
|
||||
des lots gourmands autour du thé.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* Navigation */}
|
||||
<div>
|
||||
|
||||
<h3 className="text-lg font-semibold mb-5">
|
||||
Navigation
|
||||
</h3>
|
||||
|
||||
|
||||
<ul className="space-y-3 text-green-100">
|
||||
|
||||
<li>
|
||||
<Link
|
||||
to="/accueil"
|
||||
className="hover:text-white transition"
|
||||
>
|
||||
Accueil
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<Link
|
||||
to="/regles-jeu"
|
||||
className="hover:text-white transition"
|
||||
>
|
||||
Règles du jeu
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<Link
|
||||
to="/saisir-code-unique"
|
||||
className="hover:text-white transition"
|
||||
>
|
||||
Tester mon code
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<Link
|
||||
to="/inscription"
|
||||
className="hover:text-white transition"
|
||||
>
|
||||
Créer un compte
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
{/* Informations légales */}
|
||||
<div>
|
||||
|
||||
<h3 className="text-lg font-semibold mb-5">
|
||||
Informations
|
||||
</h3>
|
||||
|
||||
|
||||
<ul className="space-y-3 text-green-100">
|
||||
|
||||
<li>
|
||||
<Link
|
||||
to="/mentions-legales"
|
||||
className="hover:text-white transition"
|
||||
>
|
||||
Mentions légales
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<Link
|
||||
to="/confidentialite"
|
||||
className="hover:text-white transition"
|
||||
>
|
||||
Politique de confidentialité
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<Link
|
||||
to="/contact"
|
||||
className="hover:text-white transition"
|
||||
>
|
||||
Contact
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
{/* Contact */}
|
||||
<div>
|
||||
|
||||
<h3 className="text-lg font-semibold mb-5">
|
||||
Contact
|
||||
</h3>
|
||||
|
||||
<p className="text-green-100 text-sm mb-3">
|
||||
Une question sur le jeu ?
|
||||
</p>
|
||||
|
||||
<a href="tel:+33184802034" className="block mt-2 font-medium hover:text-green-300">
|
||||
01 84 80 20 34
|
||||
</a>
|
||||
|
||||
<a href="mailto:contact@thetiptop.fr" className="inline-block mt-3 font-medium hover:text-green-300">
|
||||
contact@thetiptop.fr
|
||||
</a>
|
||||
|
||||
<p className="text-green-100 text-sm mt-2">
|
||||
18 rue Léon Frot
|
||||
<br />
|
||||
75011 Paris, France
|
||||
</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* Barre basse */}
|
||||
|
||||
<div className="border-t border-green-800">
|
||||
|
||||
<div className="max-w-7xl mx-auto px-6 py-5 flex flex-col md:flex-row justify-between items-center gap-3">
|
||||
|
||||
|
||||
<p className="text-green-200 text-sm">
|
||||
© {new Date().getFullYear()} Thé Tip Top. Tous droits réservés.
|
||||
</p>
|
||||
|
||||
<div className="flex gap-5 text-sm text-green-200">
|
||||
<a
|
||||
href="https://www.facebook.com/profile.php?id=61590449280854"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:text-white transition"
|
||||
>
|
||||
Facebook
|
||||
</a>
|
||||
|
||||
|
||||
<a
|
||||
href="https://www.instagram.com/thetiptop.gp4?igsh=MXZ3YzZ0d3dkazBpeg%3D%3D&utm_source=qr"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:text-white transition"
|
||||
>
|
||||
Instagram
|
||||
</a>
|
||||
|
||||
|
||||
<a
|
||||
href="https://www.tiktok.com/@thetiptop4"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:text-white transition"
|
||||
>
|
||||
TikTok
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
58
frontend/src/components/Header.jsx
Normal file
58
frontend/src/components/Header.jsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import logo from '../assets/img/logo.png'
|
||||
|
||||
export default function Header() {
|
||||
return (
|
||||
<header className="bg-white shadow-sm">
|
||||
<div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||
|
||||
<Link to="/accueil" className="flex items-center">
|
||||
|
||||
<img
|
||||
|
||||
src={logo}
|
||||
|
||||
alt="Thé Tip Top"
|
||||
|
||||
className="h-12 w-auto"
|
||||
|
||||
/>
|
||||
|
||||
</Link>
|
||||
|
||||
<nav className="flex items-center gap-6">
|
||||
<Link
|
||||
to="/accueil"
|
||||
className="text-gray-700 hover:text-green-700 font-medium"
|
||||
>
|
||||
Accueil
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/regles-jeu"
|
||||
className="text-gray-700 hover:text-green-700 font-medium"
|
||||
>
|
||||
Règles du jeu
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
to="/connexion"
|
||||
className="bg-green-700 text-white px-4 py-2 rounded-lg hover:bg-green-800 transition-colors"
|
||||
>
|
||||
Connexion
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/inscription"
|
||||
className="bg-green-700 text-white px-4 py-2 rounded-lg hover:bg-green-800 transition-colors"
|
||||
>
|
||||
Inscription
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
16
frontend/src/components/Layout.jsx
Normal file
16
frontend/src/components/Layout.jsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import Header from './Header'
|
||||
import Footer from './Footer'
|
||||
|
||||
export default function Layout({ children }) {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col">
|
||||
<Header />
|
||||
|
||||
<main className="flex-1">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
78
frontend/src/pages/Accueil.jsx
Normal file
78
frontend/src/pages/Accueil.jsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
export default function Accueil() {
|
||||
return (
|
||||
<div className="bg-green-50">
|
||||
|
||||
{/* Hero */}
|
||||
<section className="max-w-7xl mx-auto px-6 py-24">
|
||||
|
||||
<div className="text-center max-w-3xl mx-auto">
|
||||
|
||||
<h1 className="text-5xl md:text-6xl font-bold text-green-800 mb-6">
|
||||
Bienvenue au jeu-concours Thé Tip Top
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-gray-600 mb-10">
|
||||
À l'occasion de l'ouverture de notre 10ᵉ boutique à Nice, participez à notre jeu-concours et tentez de gagner des lots exceptionnels ! Tous les tickets sont gagnants, alors n'attendez plus pour découvrir votre lot.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-4">
|
||||
|
||||
<Link
|
||||
to="/saisir-code-unique"
|
||||
className="bg-green-700 hover:bg-green-800 text-white font-semibold px-8 py-4 rounded-xl transition-colors"
|
||||
>
|
||||
Tester mon code
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/regles-jeu"
|
||||
className="border border-green-700 text-green-700 hover:bg-green-100 font-semibold px-8 py-4 rounded-xl transition-colors"
|
||||
>
|
||||
Découvrir les règles
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
{/* Comment participer */}
|
||||
<section className="max-w-5xl mx-auto px-6 pb-20">
|
||||
|
||||
<h2 className="text-3xl font-bold text-green-800 mb-8 text-center">
|
||||
Comment participer ?
|
||||
</h2>
|
||||
|
||||
<div className="grid md:grid-cols-4 gap-6">
|
||||
|
||||
<div className="bg-white rounded-2xl shadow p-6 text-center">
|
||||
<div className="text-3xl font-bold text-green-700 mb-3">1</div>
|
||||
<p>Achat de 49 € minimum</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-2xl shadow p-6 text-center">
|
||||
<div className="text-3xl font-bold text-green-700 mb-3">2</div>
|
||||
<p>Recevez votre code unique</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-2xl shadow p-6 text-center">
|
||||
<div className="text-3xl font-bold text-green-700 mb-3">3</div>
|
||||
<p>Saisissez le code sur le site</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-2xl shadow p-6 text-center">
|
||||
<div className="text-3xl font-bold text-green-700 mb-3">4</div>
|
||||
<p>Découvrez votre lot</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
183
frontend/src/pages/Confidentialite.jsx
Normal file
183
frontend/src/pages/Confidentialite.jsx
Normal file
@@ -0,0 +1,183 @@
|
||||
export default function Confidentialite() {
|
||||
return (
|
||||
<main className="bg-green-50 min-h-screen px-6 py-16">
|
||||
|
||||
<div className="max-w-5xl mx-auto bg-white rounded-2xl shadow p-10">
|
||||
|
||||
<h1 className="text-4xl font-bold text-green-800 mb-6">
|
||||
Politique de confidentialité
|
||||
</h1>
|
||||
|
||||
|
||||
<p className="text-gray-600 mb-10 leading-relaxed">
|
||||
Thé Tip Top accorde une grande importance à la protection de vos
|
||||
données personnelles. Cette politique explique quelles informations
|
||||
sont collectées, comment elles sont utilisées et quels sont vos droits.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
{/* Article 1 */}
|
||||
<section className="mb-8">
|
||||
|
||||
<h2 className="text-2xl font-bold text-green-700 mb-3">
|
||||
Article 1 – Responsable du traitement
|
||||
</h2>
|
||||
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
|
||||
Le responsable du traitement des données collectées via le site
|
||||
du jeu-concours « 100% Gagnant » est la société Thé Tip Top,
|
||||
située au 18 rue Léon Frot, 75011 Paris.
|
||||
|
||||
</p>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{/* Article 2 */}
|
||||
<section className="mb-8">
|
||||
|
||||
<h2 className="text-2xl font-bold text-green-700 mb-3">
|
||||
Article 2 – Données collectées
|
||||
</h2>
|
||||
|
||||
<p className="text-gray-700 mb-3">
|
||||
Dans le cadre de votre participation, nous pouvons collecter :
|
||||
</p>
|
||||
|
||||
|
||||
<ul className="list-disc list-inside text-gray-700 space-y-2">
|
||||
|
||||
<li>Nom et prénom</li>
|
||||
|
||||
<li>Adresse email</li>
|
||||
|
||||
<li>Informations du compte utilisateur</li>
|
||||
|
||||
<li>Code de participation au jeu</li>
|
||||
|
||||
<li>Informations liées aux gains obtenus</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{/* Article 3 */}
|
||||
<section className="mb-8">
|
||||
|
||||
<h2 className="text-2xl font-bold text-green-700 mb-3">
|
||||
Article 3 – Utilisation des données
|
||||
</h2>
|
||||
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
|
||||
Les données collectées sont utilisées uniquement pour :
|
||||
gérer votre participation au jeu-concours, vérifier les codes,
|
||||
attribuer les lots, vous contacter en cas de gain et améliorer
|
||||
l'expérience utilisateur.
|
||||
|
||||
</p>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{/* Article 4 */}
|
||||
<section className="mb-8">
|
||||
|
||||
<h2 className="text-2xl font-bold text-green-700 mb-3">
|
||||
Article 4 – Conservation des données
|
||||
</h2>
|
||||
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
|
||||
Vos données sont conservées uniquement pendant la durée nécessaire
|
||||
au fonctionnement du jeu-concours et au respect des obligations
|
||||
légales de Thé Tip Top.
|
||||
|
||||
</p>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{/* Article 5 */}
|
||||
<section className="mb-8">
|
||||
|
||||
<h2 className="text-2xl font-bold text-green-700 mb-3">
|
||||
Article 5 – Cookies
|
||||
</h2>
|
||||
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
|
||||
Le site utilise des cookies nécessaires au fonctionnement du site
|
||||
ainsi que des cookies statistiques permettant d'améliorer les
|
||||
services proposés. Vous pouvez gérer vos préférences à tout moment.
|
||||
|
||||
</p>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{/* Article 6 */}
|
||||
<section className="mb-8">
|
||||
|
||||
<h2 className="text-2xl font-bold text-green-700 mb-3">
|
||||
Article 6 – Vos droits
|
||||
</h2>
|
||||
|
||||
<p className="text-gray-700 mb-3">
|
||||
Conformément au RGPD, vous disposez des droits suivants :
|
||||
</p>
|
||||
|
||||
|
||||
<ul className="list-disc list-inside text-gray-700 space-y-2">
|
||||
|
||||
<li>Droit d'accès à vos données</li>
|
||||
|
||||
<li>Droit de rectification</li>
|
||||
|
||||
<li>Droit de suppression</li>
|
||||
|
||||
<li>Droit d'opposition</li>
|
||||
|
||||
<li>Droit à la limitation du traitement</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{/* Article 7 */}
|
||||
<section>
|
||||
|
||||
<h2 className="text-2xl font-bold text-green-700 mb-3">
|
||||
Article 7 – Contact
|
||||
</h2>
|
||||
|
||||
|
||||
<p className="text-gray-700">
|
||||
|
||||
Pour toute question concernant vos données personnelles :
|
||||
<br />
|
||||
|
||||
<strong>Email :</strong> contact@thetiptop.fr
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
)
|
||||
}
|
||||
174
frontend/src/pages/Contact.jsx
Normal file
174
frontend/src/pages/Contact.jsx
Normal file
@@ -0,0 +1,174 @@
|
||||
export default function Contact() {
|
||||
return (
|
||||
<main className="bg-green-50 min-h-screen px-6 py-16">
|
||||
|
||||
<div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-8">
|
||||
|
||||
|
||||
{/* Informations */}
|
||||
<section className="bg-white rounded-2xl shadow p-10">
|
||||
|
||||
<h1 className="text-4xl font-bold text-green-800 mb-6">
|
||||
Contact
|
||||
</h1>
|
||||
|
||||
|
||||
<p className="text-gray-600 leading-relaxed mb-8">
|
||||
Une question concernant le jeu-concours, votre participation
|
||||
ou votre lot ? Notre équipe ThéTipTop est à votre écoute.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<div className="space-y-6 text-gray-700">
|
||||
|
||||
|
||||
<div>
|
||||
<h2 className="font-semibold text-green-700">
|
||||
Adresse
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
ThéTipTop
|
||||
<br />
|
||||
18 rue Léon Frot
|
||||
<br />
|
||||
75011 Paris, France
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
<h2 className="font-semibold text-green-700">
|
||||
Email
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
contact@thetiptop.fr
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
<h2 className="font-semibold text-green-700">
|
||||
Téléphone
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
01 84 80 20 34
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
{/* Formulaire */}
|
||||
|
||||
<section className="bg-white rounded-2xl shadow p-10">
|
||||
|
||||
|
||||
<h2 className="text-2xl font-bold text-green-800 mb-6">
|
||||
Envoyez-nous un message
|
||||
</h2>
|
||||
|
||||
|
||||
|
||||
<form className="space-y-5">
|
||||
|
||||
|
||||
<div>
|
||||
|
||||
<label className="block text-gray-700 mb-2">
|
||||
Nom
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Votre nom"
|
||||
className="w-full border border-gray-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-green-600"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
|
||||
<label className="block text-gray-700 mb-2">
|
||||
Email
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Votre email"
|
||||
className="w-full border border-gray-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-green-600"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
|
||||
<label className="block text-gray-700 mb-2">
|
||||
Sujet
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Sujet de votre demande"
|
||||
className="w-full border border-gray-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-green-600"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
|
||||
<label className="block text-gray-700 mb-2">
|
||||
Message
|
||||
</label>
|
||||
|
||||
<textarea
|
||||
rows="5"
|
||||
placeholder="Votre message..."
|
||||
className="w-full border border-gray-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-green-600"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-green-700 hover:bg-green-800 text-white font-semibold py-3 rounded-xl transition"
|
||||
>
|
||||
Envoyer le message
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</main>
|
||||
)
|
||||
}
|
||||
202
frontend/src/pages/MentionsLegales.jsx
Normal file
202
frontend/src/pages/MentionsLegales.jsx
Normal file
@@ -0,0 +1,202 @@
|
||||
export default function MentionsLegales() {
|
||||
return (
|
||||
<main className="bg-green-50 min-h-screen px-6 py-16">
|
||||
|
||||
<div className="max-w-5xl mx-auto bg-white rounded-2xl shadow p-10">
|
||||
|
||||
<h1 className="text-4xl font-bold text-green-800 mb-6">
|
||||
Mentions légales
|
||||
</h1>
|
||||
|
||||
<p className="text-gray-600 mb-10">
|
||||
Conformément à la loi n°2004-575 du 21 juin 2004 pour la Confiance
|
||||
dans l'Économie Numérique (LCEN), les présentes mentions légales
|
||||
précisent les informations relatives au site du jeu-concours
|
||||
« 100% Gagnant » de Thé Tip Top.
|
||||
</p>
|
||||
|
||||
|
||||
{/* Article 1 */}
|
||||
<section className="mb-8">
|
||||
|
||||
<h2 className="text-2xl font-bold text-green-700 mb-3">
|
||||
Article 1 – Société éditrice du site
|
||||
</h2>
|
||||
|
||||
<div className="text-gray-700 space-y-2">
|
||||
|
||||
<p>
|
||||
<strong>Dénomination sociale :</strong> Thé Tip Top
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>Forme juridique :</strong> Société à Responsabilité Limitée (SARL)
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>Capital social :</strong> 150 000 €
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>Siège social :</strong> 18 rue Léon Frot, 75011 Paris, France
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>Représentant légal :</strong> Eric Bourdon, Gérant
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>SIRET :</strong> 362 521 879 00054
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>TVA intracommunautaire :</strong> FR12 948140589
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>Email :</strong> contact@thetiptop.fr
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>Téléphone :</strong> 01 84 80 20 34
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{/* Article 2 */}
|
||||
<section className="mb-8">
|
||||
|
||||
<h2 className="text-2xl font-bold text-green-700 mb-3">
|
||||
Article 2 – Développement du site
|
||||
</h2>
|
||||
|
||||
<p className="text-gray-700">
|
||||
Le site du jeu-concours « 100% Gagnant » a été conçu et développé
|
||||
par Furious Ducks, responsable de la conception technique,
|
||||
de l'application web, de l'API et de l'infrastructure.
|
||||
</p>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{/* Article 3 */}
|
||||
<section className="mb-8">
|
||||
|
||||
<h2 className="text-2xl font-bold text-green-700 mb-3">
|
||||
Article 3 – Hébergement
|
||||
</h2>
|
||||
|
||||
<p className="text-gray-700">
|
||||
Le site est hébergé par HexaCloud Hostinger.
|
||||
</p>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{/* Article 4 */}
|
||||
<section className="mb-8">
|
||||
|
||||
<h2 className="text-2xl font-bold text-green-700 mb-3">
|
||||
Article 4 – Propriété intellectuelle
|
||||
</h2>
|
||||
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
|
||||
L'ensemble des éléments présents sur le site (textes, images,
|
||||
logos, graphismes, logiciels, marques et contenus) appartient
|
||||
à Thé Tip Top ou à ses partenaires.
|
||||
|
||||
Toute reproduction ou utilisation sans autorisation préalable
|
||||
est interdite.
|
||||
|
||||
</p>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{/* Article 5 */}
|
||||
<section className="mb-8">
|
||||
|
||||
<h2 className="text-2xl font-bold text-green-700 mb-3">
|
||||
Article 5 – Cookies
|
||||
</h2>
|
||||
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
|
||||
Le site peut utiliser des cookies nécessaires à son fonctionnement
|
||||
ainsi que des cookies d'analyse et de mesure d'audience.
|
||||
L'utilisateur peut gérer ses préférences à tout moment.
|
||||
|
||||
</p>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{/* Article 6 */}
|
||||
<section className="mb-8">
|
||||
|
||||
<h2 className="text-2xl font-bold text-green-700 mb-3">
|
||||
Article 6 – Responsabilité
|
||||
</h2>
|
||||
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
|
||||
Thé Tip Top s'efforce de fournir des informations exactes.
|
||||
Toutefois, la société ne peut être tenue responsable des erreurs,
|
||||
interruptions de service ou dommages liés à l'utilisation d'Internet.
|
||||
|
||||
</p>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{/* Article 7 */}
|
||||
<section className="mb-8">
|
||||
|
||||
<h2 className="text-2xl font-bold text-green-700 mb-3">
|
||||
Article 7 – Droit applicable
|
||||
</h2>
|
||||
|
||||
<p className="text-gray-700">
|
||||
|
||||
Le présent site est soumis au droit français.
|
||||
Tout litige relève des juridictions françaises compétentes.
|
||||
|
||||
</p>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{/* Article 8 */}
|
||||
<section>
|
||||
|
||||
<h2 className="text-2xl font-bold text-green-700 mb-3">
|
||||
Article 8 – Engagement responsable
|
||||
</h2>
|
||||
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
|
||||
Thé Tip Top s'engage dans une démarche responsable :
|
||||
optimisation des ressources numériques, limitation de la collecte
|
||||
des données personnelles et utilisation de technologies adaptées.
|
||||
|
||||
</p>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
)
|
||||
}
|
||||
182
frontend/src/pages/ReglesJeu.jsx
Normal file
182
frontend/src/pages/ReglesJeu.jsx
Normal file
@@ -0,0 +1,182 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
export default function ReglesJeu() {
|
||||
return (
|
||||
<div className="bg-green-50 min-h-screen">
|
||||
|
||||
|
||||
{/* Hero */}
|
||||
<section className="max-w-7xl mx-auto px-6 py-20">
|
||||
|
||||
<div className="text-center max-w-3xl mx-auto">
|
||||
|
||||
<h1 className="text-5xl font-bold text-green-800 mb-6">
|
||||
Règles du jeu
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-gray-600">
|
||||
Participez au jeu-concours ThéTipTop et découvrez immédiatement
|
||||
le lot que vous avez gagné.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{/* Comment participer */}
|
||||
<section className="max-w-6xl mx-auto px-6 pb-16">
|
||||
|
||||
<h2 className="text-3xl font-bold text-green-800 text-center mb-10">
|
||||
Comment participer ?
|
||||
</h2>
|
||||
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
|
||||
|
||||
<div className="bg-white rounded-2xl shadow p-8 text-center">
|
||||
|
||||
<div className="text-4xl font-bold text-green-700 mb-4">
|
||||
1
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3">
|
||||
Obtenez un code
|
||||
</h3>
|
||||
|
||||
<p className="text-gray-600">
|
||||
Achetez un produit ThéTipTop d'une valeur supérieure à 49€
|
||||
en ligne ou en magasin pour recevoir un code unique à 10 chiffres.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="bg-white rounded-2xl shadow p-8 text-center">
|
||||
|
||||
<div className="text-4xl font-bold text-green-700 mb-4">
|
||||
2
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3">
|
||||
Créez votre compte
|
||||
</h3>
|
||||
|
||||
<p className="text-gray-600">
|
||||
Inscrivez-vous sur le site du jeu-concours afin d'accéder
|
||||
à votre espace participant.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="bg-white rounded-2xl shadow p-8 text-center">
|
||||
|
||||
<div className="text-4xl font-bold text-green-700 mb-4">
|
||||
3
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3">
|
||||
Découvrez votre lot
|
||||
</h3>
|
||||
|
||||
<p className="text-gray-600">
|
||||
Entrez votre code dans votre espace client et découvrez
|
||||
immédiatement votre récompense.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{/* Lots */}
|
||||
<section className="max-w-5xl mx-auto px-6 pb-16">
|
||||
|
||||
<div className="bg-white rounded-2xl shadow p-10">
|
||||
|
||||
<h2 className="text-3xl font-bold text-green-800 mb-6 text-center">
|
||||
Que pouvez-vous gagner ?
|
||||
</h2>
|
||||
|
||||
|
||||
<p className="text-gray-600 text-lg text-center leading-relaxed mb-8">
|
||||
|
||||
Tous les billets sont gagnants ! Les récompenses peuvent aller
|
||||
d'un infuseur à thé à un coffret découverte d'une valeur de 69€,
|
||||
en passant par des thés détox et des thés signatures.
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
<div className="bg-green-50 rounded-xl p-6 text-center">
|
||||
|
||||
<h3 className="text-2xl font-bold text-green-700 mb-2">
|
||||
Grand gagnant
|
||||
</h3>
|
||||
|
||||
<p className="text-gray-700">
|
||||
Le participant tiré au sort remportera une année de thé
|
||||
d'une valeur de 360€ !
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{/* CTA */}
|
||||
<section className="max-w-5xl mx-auto px-6 pb-20">
|
||||
|
||||
<div className="bg-green-700 rounded-2xl p-10 text-center text-white">
|
||||
|
||||
<h2 className="text-3xl font-bold mb-4">
|
||||
Ne manquez pas votre chance !
|
||||
</h2>
|
||||
|
||||
<p className="mb-8 text-lg">
|
||||
Inscrivez-vous, entrez votre code de ticket et retirez votre lot
|
||||
en magasin ou en ligne.
|
||||
</p>
|
||||
|
||||
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-4">
|
||||
|
||||
<Link
|
||||
to="/inscription"
|
||||
className="bg-white text-green-700 px-8 py-3 rounded-xl font-semibold hover:bg-green-50"
|
||||
>
|
||||
Inscrivez-vous
|
||||
</Link>
|
||||
|
||||
|
||||
<Link
|
||||
to="/saisir-code-unique"
|
||||
className="border border-white px-8 py-3 rounded-xl font-semibold hover:bg-green-800"
|
||||
>
|
||||
Entrer mon code de ticket
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user