From 127d66e250fd94ec72b9597fe4cc55173a9db5cc Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Fri, 18 Apr 2025 16:25:35 +0200
Subject: [PATCH] feat: Add cookie management section and button

---
 .../politique-de-confidentialite/+Page.tsx    | 93 ++++++++++++++++++-
 1 file changed, 88 insertions(+), 5 deletions(-)

diff --git a/app/pages/politique-de-confidentialite/+Page.tsx b/app/pages/politique-de-confidentialite/+Page.tsx
index 050e3a1..d6e71a7 100644
--- a/app/pages/politique-de-confidentialite/+Page.tsx
+++ b/app/pages/politique-de-confidentialite/+Page.tsx
@@ -1,4 +1,5 @@
 import { Link } from "@/components/common/Link";
+import { Button } from "@/components/syntax/Button";
 import React from "react";
 
 export function Page() {
@@ -31,7 +32,7 @@ export function Page() {
         </p>
 
         <section>
-          <h3 className="font-display text-lg text-slate-900 dark:text-slate-100">Google Analytics</h3>
+          <h3 className="font-display text-lg text-slate-900 dark:text-slate-100">a. Google Analytics</h3>
           <p>
             J'utilise <strong>Google Analytics</strong> pour analyser le trafic et l'utilisation de mon site. Les
             données collectées par Google Analytics sont anonymisées et ne sont pas partagées avec des tiers.
@@ -39,7 +40,7 @@ export function Page() {
         </section>
 
         <section>
-          <h3 className="font-display text-lg text-slate-900 dark:text-slate-100">Umami</h3>
+          <h3 className="font-display text-lg text-slate-900 dark:text-slate-100">b. Umami</h3>
           <p>
             <strong>Umami</strong> est un autre outil d'analyse que j'utilise pour comprendre comment les visiteurs
             interagissent avec mon site. Comme <strong>Google Analytics</strong>, les données collectées sont
@@ -48,7 +49,7 @@ export function Page() {
         </section>
 
         <section>
-          <h3 className="font-display text-lg text-slate-900 dark:text-slate-100">Cookie "theme"</h3>
+          <h3 className="font-display text-lg text-slate-900 dark:text-slate-100">c. Cookie "theme"</h3>
           <p>
             J'utilise et dépose un cookie nommé "theme" pour mémoriser votre préférence de thème (clair ou sombre). Ce
             cookie est utilisé uniquement pour personnaliser votre expérience utilisateur et n'est pas utilisé à des
@@ -58,7 +59,78 @@ export function Page() {
       </section>
 
       <section>
-        <h2 className="font-display text-xl text-slate-900 dark:text-slate-100">3. Utilisation des données</h2>
+        <h2 className="font-display text-xl text-slate-900 dark:text-slate-100">3. Cookies</h2>
+
+        <p>
+          Ce site utilise des cookies pour améliorer votre expérience utilisateur et analyser l'utilisation du site. Les
+          cookies sont de petits fichiers texte stockés sur votre appareil lorsque vous visitez un site web. Ils
+          permettent de mémoriser vos préférences et d'analyser le trafic du site.
+        </p>
+
+        <p>
+          Vous pouvez gérer vos préférences de cookies directement via les paramètres de votre navigateur. La plupart
+          des navigateurs vous permettent de refuser ou de supprimer les cookies. Cependant, cela peut affecter votre
+          expérience sur le site et certaines fonctionnalités peuvent ne pas fonctionner correctement (comme la
+          personnalisation du thème par exemple).
+        </p>
+
+        <p>
+          Pour reconfigurer les cookies, vous pouvez appuyer sur le bouton "Paramétrer les cookies" à la suite de ce
+          paragraphe.
+        </p>
+
+        <Button
+          variant="secondary"
+          className="mt-2"
+          onClick={() => {
+            // TODO
+          }}
+        >
+          Paramétrer les cookies
+        </Button>
+
+        <p>
+          Pour plus d'informations sur la gestion des cookies, vous pouvez consulter la documentation de votre
+          navigateur. Voici quelques liens utiles :
+        </p>
+
+        <ul className="list-disc pl-4">
+          <li>
+            <Link href="https://support.google.com/chrome/answer/95647?hl=fr" className="text-violet-500">
+              Google Chrome
+            </Link>
+          </li>
+          <li>
+            <Link href="https://support.mozilla.org/fr/kb/activer-desactiver-cookies" className="text-violet-500">
+              Mozilla Firefox
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="https://support.microsoft.com/fr-fr/help/278835/how-to-delete-cookie-files-in-internet-explorer"
+              className="text-violet-500"
+            >
+              Internet Explorer
+            </Link>
+          </li>
+          <li>
+            <Link href="https://support.apple.com/fr-fr/HT201265" className="text-violet-500">
+              Safari
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="https://support.microsoft.com/fr-fr/help/278835/how-to-delete-cookie-files-in-internet-explorer"
+              className="text-violet-500"
+            >
+              Microsoft Edge
+            </Link>
+          </li>
+        </ul>
+      </section>
+
+      <section>
+        <h2 className="font-display text-xl text-slate-900 dark:text-slate-100">4. Utilisation des données</h2>
 
         <p>
           Les données collectées par les outils d'analyse sont utilisées uniquement pour améliorer le site Memento Dev
@@ -68,7 +140,7 @@ export function Page() {
       </section>
 
       <section>
-        <h2 className="font-display text-xl text-slate-900 dark:text-slate-100">4. Protection des données</h2>
+        <h2 className="font-display text-xl text-slate-900 dark:text-slate-100">5. Protection des données</h2>
 
         <p>
           Les données collectées par Google Analytics et Umami sont anonymisées et stockées de manière sécurisée par ces
@@ -77,6 +149,17 @@ export function Page() {
           respectives.
         </p>
       </section>
+
+      <section>
+        <h2 className="font-display text-xl text-slate-900 dark:text-slate-100">6. Vos droits</h2>
+
+        <p>
+          Étant donné que je ne stocke aucune donnée personnelle, je ne suis pas en mesure de répondre aux demandes
+          d'accès, de rectification ou de suppression de données personnelles. Cependant, vous pouvez gérer vos
+          préférences de cookies directement via les paramètres de votre navigateur. Pour toute question concernant vos
+          droits, veuillez me contacter à <strong>gauthier@gauthierdaniels.fr</strong>.
+        </p>
+      </section>
     </div>
   );
 }