303 lines
12 KiB
TypeScript
303 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from "react";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
|
|
import Button from "@/components/Button";
|
|
|
|
export default function CookiesPage() {
|
|
const [preferences, setPreferences] = useState({
|
|
essential: true,
|
|
analytics: false,
|
|
marketing: false,
|
|
});
|
|
|
|
const handleToggle = (type: 'analytics' | 'marketing') => {
|
|
setPreferences(prev => ({
|
|
...prev,
|
|
[type]: !prev[type]
|
|
}));
|
|
};
|
|
|
|
const handleAcceptAll = () => {
|
|
setPreferences({
|
|
essential: true,
|
|
analytics: true,
|
|
marketing: true,
|
|
});
|
|
alert('Vos préférences ont été enregistrées');
|
|
};
|
|
|
|
const handleRejectAll = () => {
|
|
setPreferences({
|
|
essential: true,
|
|
analytics: false,
|
|
marketing: false,
|
|
});
|
|
alert('Vos préférences ont été enregistrées');
|
|
};
|
|
|
|
const handleSavePreferences = () => {
|
|
alert('Vos préférences ont été enregistrées');
|
|
};
|
|
|
|
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">
|
|
Gestion des cookies
|
|
</h1>
|
|
|
|
<div className="mb-8 text-center text-gray-600">
|
|
<p>Gérez vos préférences en matière de cookies</p>
|
|
</div>
|
|
|
|
{/* Introduction */}
|
|
<Card className="mb-8">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl">Qu'est-ce qu'un cookie ?</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<p className="text-gray-700">
|
|
Un cookie est un petit fichier texte déposé sur votre terminal (ordinateur, tablette,
|
|
smartphone) lors de la visite d'un site internet.
|
|
</p>
|
|
<p className="text-gray-700">
|
|
Les cookies permettent de reconnaître votre navigateur et de mémoriser certaines
|
|
informations concernant votre visite (langue, préférences, etc.).
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Types de cookies */}
|
|
<Card className="mb-8">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl">Les cookies que nous utilisons</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
{/* Cookies essentiels */}
|
|
<div className="border-l-4 border-primary-600 pl-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className="font-semibold text-gray-900">Cookies essentiels</h3>
|
|
<span className="text-sm text-gray-500 bg-gray-100 px-3 py-1 rounded">
|
|
Toujours actifs
|
|
</span>
|
|
</div>
|
|
<p className="text-gray-700 mb-2">
|
|
Ces cookies sont nécessaires au fonctionnement du site et ne peuvent pas être
|
|
désactivés. Ils permettent notamment :
|
|
</p>
|
|
<ul className="list-disc list-inside space-y-1 text-gray-700 ml-4">
|
|
<li>La gestion de votre session de connexion</li>
|
|
<li>La sécurité du site</li>
|
|
<li>Le bon fonctionnement du panier et des formulaires</li>
|
|
</ul>
|
|
<p className="text-sm text-gray-600 mt-2">
|
|
Durée de conservation : Session / 1 an
|
|
</p>
|
|
</div>
|
|
|
|
{/* Cookies analytiques */}
|
|
<div className="border-l-4 border-blue-600 pl-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className="font-semibold text-gray-900">Cookies analytiques</h3>
|
|
<label className="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={preferences.analytics}
|
|
onChange={() => handleToggle('analytics')}
|
|
className="sr-only peer"
|
|
/>
|
|
<div className="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600"></div>
|
|
</label>
|
|
</div>
|
|
<p className="text-gray-700 mb-2">
|
|
Ces cookies nous permettent de mesurer l'audience du site et d'analyser la
|
|
navigation afin d'améliorer nos services :
|
|
</p>
|
|
<ul className="list-disc list-inside space-y-1 text-gray-700 ml-4">
|
|
<li>Nombre de visiteurs et pages consultées</li>
|
|
<li>Durée de visite et parcours utilisateur</li>
|
|
<li>Analyse des performances du site</li>
|
|
</ul>
|
|
<p className="text-sm text-gray-600 mt-2">
|
|
Outils : Google Analytics, Matomo<br />
|
|
Durée de conservation : 13 mois
|
|
</p>
|
|
</div>
|
|
|
|
{/* Cookies marketing */}
|
|
<div className="border-l-4 border-purple-600 pl-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className="font-semibold text-gray-900">Cookies marketing</h3>
|
|
<label className="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={preferences.marketing}
|
|
onChange={() => handleToggle('marketing')}
|
|
className="sr-only peer"
|
|
/>
|
|
<div className="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600"></div>
|
|
</label>
|
|
</div>
|
|
<p className="text-gray-700 mb-2">
|
|
Ces cookies permettent de vous proposer des publicités adaptées à vos centres
|
|
d'intérêt :
|
|
</p>
|
|
<ul className="list-disc list-inside space-y-1 text-gray-700 ml-4">
|
|
<li>Personnalisation des contenus publicitaires</li>
|
|
<li>Mesure de l'efficacité des campagnes</li>
|
|
<li>Partage sur les réseaux sociaux</li>
|
|
</ul>
|
|
<p className="text-sm text-gray-600 mt-2">
|
|
Partenaires : Facebook, Google Ads<br />
|
|
Durée de conservation : 13 mois
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Boutons d'action */}
|
|
<Card className="mb-8">
|
|
<CardContent className="pt-6">
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button
|
|
onClick={handleAcceptAll}
|
|
variant="primary"
|
|
size="lg"
|
|
className="px-8"
|
|
>
|
|
Tout accepter
|
|
</Button>
|
|
<Button
|
|
onClick={handleSavePreferences}
|
|
variant="outline"
|
|
size="lg"
|
|
className="px-8"
|
|
>
|
|
Enregistrer mes choix
|
|
</Button>
|
|
<Button
|
|
onClick={handleRejectAll}
|
|
variant="outline"
|
|
size="lg"
|
|
className="px-8"
|
|
>
|
|
Tout refuser
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Gestion des cookies */}
|
|
<Card className="mb-8">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl">Comment gérer vos cookies ?</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<p className="text-gray-700">
|
|
Vous pouvez à tout moment modifier vos préférences en matière de cookies en
|
|
revenant sur cette page.
|
|
</p>
|
|
<p className="text-gray-700">
|
|
Vous pouvez également gérer les cookies directement depuis votre navigateur :
|
|
</p>
|
|
<ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
|
|
<li>
|
|
<strong>Chrome :</strong>{" "}
|
|
<a
|
|
href="https://support.google.com/chrome/answer/95647"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-primary-600 hover:text-primary-700 underline"
|
|
>
|
|
Gérer les cookies sur Chrome
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<strong>Firefox :</strong>{" "}
|
|
<a
|
|
href="https://support.mozilla.org/fr/kb/activer-desactiver-cookies"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-primary-600 hover:text-primary-700 underline"
|
|
>
|
|
Gérer les cookies sur Firefox
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<strong>Safari :</strong>{" "}
|
|
<a
|
|
href="https://support.apple.com/fr-fr/HT201265"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-primary-600 hover:text-primary-700 underline"
|
|
>
|
|
Gérer les cookies sur Safari
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<strong>Edge :</strong>{" "}
|
|
<a
|
|
href="https://support.microsoft.com/fr-fr/microsoft-edge/supprimer-les-cookies-dans-microsoft-edge-63947406-40ac-c3b8-57b9-2a946a29ae09"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-primary-600 hover:text-primary-700 underline"
|
|
>
|
|
Gérer les cookies sur Edge
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Informations complémentaires */}
|
|
<Card className="mb-8">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl">En savoir plus</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<p className="text-gray-700">
|
|
Pour plus d'informations sur les cookies et la protection de vos données personnelles,
|
|
vous pouvez consulter :
|
|
</p>
|
|
<ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
|
|
<li>
|
|
Notre{" "}
|
|
<a href="/privacy" className="text-primary-600 hover:text-primary-700 underline">
|
|
Politique de confidentialité
|
|
</a>
|
|
</li>
|
|
<li>
|
|
Le site de la CNIL :{" "}
|
|
<a
|
|
href="https://www.cnil.fr/fr/cookies-et-autres-traceurs"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-primary-600 hover:text-primary-700 underline"
|
|
>
|
|
www.cnil.fr
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Contact */}
|
|
<Card className="mb-8">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl">Contact</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-gray-700">
|
|
Pour toute question concernant les cookies :{" "}
|
|
<a href="mailto:contact@thetiptop.fr" className="text-primary-600 hover:text-primary-700 underline">
|
|
contact@thetiptop.fr
|
|
</a>
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|