structure refacto & file documentation

website/src/pages/HomePage.jsx

@@ -0,0 +1,49 @@
+// Rôle : affiche la page d'accueil et les contenus éditoriaux principaux.
+import React from "react";
+import { TOOLBOX_MODULES } from "../features/toolboxes/modules/index.jsx";
+import { RichText } from "../components/RichText.jsx";
+
+export function HomePage({ siteContent, toolboxes }) {
+  const content = siteContent.home;
+  const toolCount = Object.keys(TOOLBOX_MODULES).length;
+  return (
+    <>
+      <section className="hero">
+        <div>
+          <p className="eyebrow">{content.hero.eyebrow}</p>
+          <h1>{content.hero.title}</h1>
+          <p>{content.hero.description}</p>
+          <div className="actions">
+            <a className="button primary" href="#/toolboxes">{content.hero.primaryAction}</a>
+            <a className="button" href="#/games">{content.hero.secondaryAction}</a>
+          </div>
+        </div>
+        <div className="home-stats hero-stats" aria-label="Statistiques locales du site">
+          <article><strong>{toolboxes.length}</strong><span>{toolboxes.length > 1 ? content.stats.toolboxPlural : content.stats.toolboxSingular}</span></article>
+          <article><strong>{toolCount}</strong><span>{toolCount > 1 ? content.stats.toolPlural : content.stats.toolSingular}</span></article>
+        </div>
+      </section>
+      <section className="origin-section nebula-panel" aria-labelledby="origin-title">
+        <div className="origin-copy">
+          <p className="eyebrow">{content.origin.eyebrow}</p>
+          <h2 id="origin-title">{content.origin.title}</h2>
+          <div className="home-dialogue" aria-label={content.origin.dialogueAriaLabel}>
+            {content.origin.lines.map((line, index) => <DialogueLine key={index} line={line} />)}
+            <small className="dialogue-caption">{content.origin.caption}</small>
+          </div>
+        </div>
+        <div className="home-visual" aria-label="Illustration Sokko G">
+          <img src="/static/img/dragon.png" alt={content.origin.visualAlt} />
+        </div>
+      </section>
+      <footer className="home-legal">
+        <p>{content.legal.copyright}</p>
+        <p>{content.legal.disclaimer}</p>
+      </footer>
+    </>
+  );
+}
+
+function DialogueLine({ line }) {
+  return <p className={`dialogue-line dialogue-line-${line.speaker === "app" ? "app" : "user"}`}><RichText text={line.text || ""} /></p>;
+}