Improve about page guidance and onboarding visuals

website/public/data/site.json

@@ -1299,98 +1299,100 @@
   "about": {
     "eyebrow": "À propos",
     "title": "C'est quoi Sokko G ?",
-    "description": "Un espace second écran pour garder vos outils, repères et infos de jeu sous la main pendant une session.",
+    "description": "Sokko G est un espace local pour organiser vos notes, outils et repères de jeu. Il est pensé pour rester ouvert à côté de votre partie, sans compte et sans synchronisation obligatoire.",
+    "sectionsEyebrow": "Concept",
+    "sectionsTitle": "Faciliter vos sessions gaming",
     "sections": [
       {
-        "title": "Le but du site",
-        "text": "Sokko G sert à regrouper les outils utiles pendant une session : notes, suivis, images, liens et repères de jeu. L’objectif est de garder les informations importantes accessibles rapidement sur un second écran."
-      },
-      {
-        "title": "Fonctionnement",
-        "text": "Chaque toolbox est composée d’outils que vous ajoutez selon vos besoins. Elle peut rester indépendante ou être associée à une page jeu pour passer rapidement du guide à vos notes personnelles."
-      },
-      {
-        "title": "Stockage local",
-        "text": "Aucun compte, aucune synchronisation cloud et aucune donnée utilisateur envoyée au serveur. Les toolboxes sont enregistrées localement dans le navigateur que vous utilisez."
-      },
-      {
-        "title": "IndexedDB simplement",
-        "text": "IndexedDB est un espace de stockage intégré au navigateur. Il permet de conserver des données locales plus riches, comme des images ou des annotations. Ces données restent liées au navigateur et au profil utilisé : un nettoyage, un changement d’appareil ou une réinitialisation peut les supprimer."
-      }
-    ],
-    "toolsTitle": "Outils disponibles",
-    "toolsLibraryLink": "Voir la librairie d'outils",
-    "contribute": {
-      "eyebrow": "Contribuer",
-      "title": "Proposer une liste de jeu",
-      "description": "Les listes servent à transformer des données de jeu en checklists prêtes à l’emploi : équipements à fabriquer, créatures à capturer, monstres à battre, objets à suivre, etc. Une bonne liste est structurée par catégories, avec des noms clairs, une courte description utile et une quantité uniquement quand elle a du sens.\n\nExemple :",
-      "example": "{\n  \"titre\": \"Équipements\",\n  \"armures\": [\n    {\n      \"nom\": \"Set d'armure sombre\",\n      \"description\": \"Obtenir en quête\",\n      \"quantite\": 1\n    }\n  ]\n}",
-      "promptTitle": "Prompt utile",
-      "promptIntro": "Ajoutez cette précision à votre demande pour obtenir un JSON directement exploitable :",
-      "promptText": "Génère uniquement un JSON valide.\nLe JSON doit contenir une propriété racine \"titre\", puis une ou plusieurs catégories.\nChaque catégorie doit être un tableau d’objets.\nChaque objet doit contenir la propriété \"nom\".\nLes propriétés \"description\" et \"quantite\" sont facultatives.\nRegroupe les éléments de manière logique.\nNe renvoie aucun texte, aucune explication et aucun Markdown."
-    },
-    "tools": [
-      {
-        "icon": "notepad",
-        "name": "Bloc notes",
-        "description": "Rédigez des notes riches avec titres, listes, mise en forme et repères rapides pour garder vos infos de session au même endroit."
-      },
-      {
-        "icon": "checklist",
-        "name": "Checklist",
-        "description": "Suivez des objectifs en catégories ou hors catégorie, avec cases, quantités et descriptions utiles pour crafts, ressources ou préparatifs."
+        "icon": "controller",
+        "image": "/static/img/dragon-session-tools.png",
+        "title": "Un support pour jouer plus efficacement",
+        "text": "Sokko G garde vos informations utiles à portée de main :",
+        "bullets": ["Objectifs", "Notes", "Images", "Timers", "Liens", "Calculs", "Suivis"],
+        "afterText": "L’idée est simple : limiter les allers-retours et retrouver rapidement ce dont vous avez besoin."
       },
       {
         "icon": "picture",
-        "name": "Images",
-        "description": "Regroupez des captures, cartes ou références visuelles ajoutées par fichier ou collage, consultables sans quitter la toolbox."
+        "image": "/static/img/dragon-dual-monitor.png",
+        "title": "Pensé pour le second écran",
+        "text": "De plus en plus de joueurs utilisent deux écrans.\nSokko G profite de cet espace pour garder l’essentiel visible pendant que le jeu reste au premier plan : un guide, une checklist, une carte annotée ou un timer.\nVous consultez vos repères d’un coup d’œil, sans interrompre la partie."
       },
       {
-        "icon": "map",
-        "name": "Annotation d'images",
-        "description": "Ajoutez marqueurs et dessins sur une image unique pour préparer une carte, un plan de route ou une référence importante."
+        "icon": "toolbox",
+        "image": "/static/img/dragon-game-guides.png",
+        "title": "Guides de jeux et toolboxes",
+        "text": "Le site propose des pages de jeux qui servent de guides ou de références.\nVos toolboxes restent personnelles, mais elles peuvent être associées à un jeu.\nCela permet de garder les informations générales d’un côté, et vos notes, outils ou suivis de session juste à côté."
       },
       {
-        "icon": "link",
-        "name": "Liens",
-        "description": "Gardez vos raccourcis de session vers guides, builds, cartes interactives ou ressources externes, avec titres lisibles."
+        "icon": "export",
+        "image": "/static/img/dragon-local-data.png",
+        "title": "Stockage local : avantages et limites",
+        "text": "Vos toolboxes restent dans le navigateur utilisé :",
+        "bullets": ["Pas de compte", "Pas de configuration serveur", "Pas de synchronisation imposée"],
+        "bulletsColumns": 1,
+        "warning": "En échange, vous risquez de perdre vos données si vous videz le navigateur, changez de profil, changez de machine ou réinstallez le système. Pensez à exporter une sauvegarde avant ces actions."
+      }
+    ],
+    "toolsTitle": "Outils disponibles",
+    "toolsIntro": "Les outils sont là pour gérer différents types d’informations. Vous choisissez seulement les groupes utiles à votre session, puis la librairie détaille chaque outil disponible.",
+    "toolsLibraryLink": "Voir la librairie d'outils",
+    "toolGroups": [
+      {
+        "icon": "notepad",
+        "title": "Notes et suivi",
+        "text": "Écrire des rappels, suivre des objectifs, organiser une routine ou préparer une liste de choses à faire.",
+        "examples": ["Notes", "Checklists", "Tâches"]
       },
       {
-        "icon": "abacus",
-        "name": "Compteurs",
-        "description": "Créez des compteurs ajustables pour suivre essais, ressources, scores, victoires ou stocks sans passer par un tableau."
-      },
-      {
-        "icon": "controller",
-        "name": "Combos",
-        "description": "Documentez des séquences de touches par catégorie, avec supports manette ou clavier/souris et étapes successives lisibles."
-      },
-      {
-        "icon": "calculator",
-        "name": "Calculateur",
-        "description": "Calculez des valeurs, enregistrez des résultats et construisez une arborescence pour comparer coûts, crafts ou conversions."
+        "icon": "picture",
+        "title": "Médias et repères visuels",
+        "text": "Conserver des captures, cartes, images de référence ou annotations visibles pendant la session.",
+        "examples": ["Images", "Annotations", "Cartes"]
       },
       {
         "icon": "table",
-        "name": "Tableau",
-        "description": "Structurez des données en grille avec formules, lignes/colonnes ajustables et copie TSV pour comparer besoins ou valeurs."
+        "title": "Données et calculs",
+        "text": "Comparer des valeurs, compter des ressources, préparer des tableaux ou calculer des besoins de craft.",
+        "examples": ["Compteurs", "Tableaux", "Calculs"]
       },
       {
         "icon": "clock",
-        "name": "Timer",
-        "description": "Préparez chronomètres, étapes, comptes à rebours, alertes et intervalles récurrents pour suivre les temps importants."
-      },
-      {
-        "icon": "tasklist",
-        "name": "Planificateur de tâches",
-        "description": "Organisez des tâches ponctuelles, quotidiennes ou hebdomadaires avec catégories, sous-tâches et dépendances parent/enfant."
-      },
-      {
-        "icon": "chest-armor",
-        "name": "Planificateur d'équipements",
-        "description": "Planifiez un build par types d'équipement, avec pièces actives, statistiques, matériaux de craft, bonus et sertissages."
+        "title": "Temps et actions",
+        "text": "Gérer des timers, routines, rotations, commandes ou séquences à reproduire sans perdre le fil.",
+        "examples": ["Timers", "Combos", "Routines"]
       }
     ],
+    "contribute": {
+      "eyebrow": "Contribuer",
+      "title": "Proposer une liste de données",
+      "image": "/static/img/dragon-contribution-data.png",
+      "imageAlt": "Mascotte dragon préparant une liste de données structurée",
+      "description": "Les contributions attendues sont des listes de données, pas des guides complets. Une liste bien préparée permet de mettre à disposition une checklist complète, prête à être utilisée dans une toolbox.",
+      "blocks": [
+        {
+          "icon": "checklist",
+          "title": "Pourquoi contribuer ?",
+          "text": "Une bonne liste fait gagner du temps aux joueurs : ils peuvent importer une checklist déjà structurée au lieu de tout recopier à la main."
+        },
+        {
+          "icon": "tasklist",
+          "title": "Quels éléments proposer ?",
+          "text": "Tout ce qui se suit facilement en checklist : armures, matériaux, monstres, objets à récupérer, routes de farm ou objectifs de jeu.",
+          "bullets": ["Catégories", "Quantités à compléter", "Noms clairs"],
+          "note": "La propriété description peut servir de renseignement supplémentaire sur une page de liste, mais elle n’est pas affichée dans la checklist importée."
+        },
+        {
+          "icon": "export",
+          "title": "Comment contribuer ?",
+          "text": "Vous pouvez préparer la liste vous-même ou demander à une IA de générer le fichier. Le format final est un JSON : c’est ce qui permet à Sokko G de créer la checklist automatiquement."
+        }
+      ],
+      "exampleIntro": "Exemple de liste exploitable :",
+      "example": "{\n  \"titre\": \"Équipements\",\n  \"armures\": [\n    {\n      \"nom\": \"Set d'armure sombre\",\n      \"description\": \"Obtenir en quête\",\n      \"quantite\": 1\n    }\n  ]\n}",
+      "promptTitle": "Se faire aider par une IA",
+      "promptIntro": "Si vous utilisez une IA pour préparer la liste, vous pouvez lui donner cette consigne afin d’obtenir un fichier JSON directement exploitable :",
+      "promptText": "Génère uniquement un JSON valide.\nLe JSON doit contenir une propriété racine \"titre\", puis une ou plusieurs catégories.\nChaque catégorie doit être un tableau d’objets.\nChaque objet doit contenir la propriété \"nom\".\nLes propriétés \"description\" et \"quantite\" sont facultatives.\nRegroupe les éléments de manière logique.\nNe renvoie aucun texte, aucune explication et aucun Markdown."
+    },
     "limitsTitle": "À retenir",
     "limits": [
       {