Improve onboarding section across home and about

website/src/pages/AboutPage.jsx

@@ -2,6 +2,7 @@
 import React, { useEffect } from "react";
 import { Icon } from "../components/Icon.jsx";
 import { RichText } from "../components/RichText.jsx";
+import { HomeOnboardingSection } from "./HomeOnboardingSection.jsx";
 
 export function AboutPage({ siteContent }) {
   const content = siteContent.about;
@@ -60,6 +61,7 @@ export function AboutPage({ siteContent }) {
           ))}
         </div>
       </section>
+      <HomeOnboardingSection content={siteContent.home.onboarding} className="about-onboarding-section" />
       <section className="about-tools-section nebula-panel">
         <div className="page-heading">
           <div>

website/src/pages/HomeOnboardingSection.jsx

@@ -0,0 +1,100 @@
+// Rôle : affiche la section de prise en main de la home avec étapes, slider et accès rapides.
+import React, { useEffect, useMemo, useState } from "react";
+
+const SLIDE_INTERVAL_MS = 4500;
+
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+
+export function HomeOnboardingSection({ content, className = "" }) {
+  const slides = useMemo(() => content?.slides || [], [content]);
+  const [activeSlide, setActiveSlide] = useState(0);
+  const [isPaused, setIsPaused] = useState(false);
+
+  useEffect(() => {
+    if (slides.length <= 1 || isPaused || prefersReducedMotion()) return undefined;
+    const intervalId = window.setInterval(() => {
+      setActiveSlide((current) => (current + 1) % slides.length);
+    }, SLIDE_INTERVAL_MS);
+    return () => window.clearInterval(intervalId);
+  }, [isPaused, slides.length]);
+
+  if (!content) return null;
+
+  const currentSlide = slides[activeSlide] || slides[0];
+
+  return (
+    <section className={["home-onboarding nebula-panel", className].filter(Boolean).join(" ")} aria-labelledby="home-onboarding-title">
+      <div className="home-section-heading home-onboarding-heading">
+        <p className="eyebrow">{content.eyebrow}</p>
+        <h2 id="home-onboarding-title">{content.title}</h2>
+        <p>{content.description}</p>
+      </div>
+      <div className="home-onboarding-layout">
+        <div className="home-onboarding-steps">
+          <h3>{content.stepsTitle}</h3>
+          <ol>
+            {content.steps.map((step, index) => (
+              <li key={step.title}>
+                <span>{index + 1}</span>
+                <div>
+                  <strong>{step.title}</strong>
+                  <p>{step.text}</p>
+                </div>
+              </li>
+            ))}
+          </ol>
+        </div>
+        <div
+          className="home-onboarding-slider"
+          onMouseEnter={() => setIsPaused(true)}
+          onMouseLeave={() => setIsPaused(false)}
+          onFocus={() => setIsPaused(true)}
+          onBlur={() => setIsPaused(false)}
+        >
+          {currentSlide && (
+            <figure>
+              <img src={currentSlide.src} alt={currentSlide.alt} />
+              <figcaption>
+                <strong>{currentSlide.title}</strong>
+                <span>{currentSlide.text}</span>
+              </figcaption>
+            </figure>
+          )}
+          {slides.length > 1 && (
+            <div className="home-onboarding-dots" aria-label={content.sliderLabel}>
+              {slides.map((slide, index) => (
+                <button
+                  className={index === activeSlide ? "active" : ""}
+                  key={slide.src}
+                  type="button"
+                  onClick={() => setActiveSlide(index)}
+                  aria-label={`${content.slideButtonLabel} ${index + 1}`}
+                  aria-pressed={index === activeSlide}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="home-onboarding-cards">
+        {content.cards.map((card) => (
+          <a className="home-onboarding-card" href={card.href} key={card.href}>
+            <span className="home-onboarding-card-visual">
+              <img src={card.image} alt="" aria-hidden="true" />
+            </span>
+            <span className="home-onboarding-card-body">
+              <span className="home-onboarding-card-title">
+                <span className={`module-icon-svg module-icon-${card.icon}`} aria-hidden="true" />
+                <strong>{card.title}</strong>
+              </span>
+              <span className="home-onboarding-card-text">{card.text}</span>
+              <em>{card.action}</em>
+            </span>
+          </a>
+        ))}
+      </div>
+    </section>
+  );
+}

website/src/pages/HomePage.jsx

@@ -2,11 +2,12 @@
 import React from "react";
 import { TOOLBOX_MODULES } from "../features/toolboxes/modules/index.jsx";
 import { RichText } from "../components/RichText.jsx";
+import { HomeOnboardingSection } from "./HomeOnboardingSection.jsx";
 
 export function HomePage({ siteContent, toolboxes }) {
   const content = siteContent.home;
   const toolCount = Object.keys(TOOLBOX_MODULES).length;
-  const showStartMap = import.meta.env.DEV || toolboxes.length === 0;
+  const showOnboarding = import.meta.env.DEV || toolboxes.length === 0;
   return (
     <>
       <section className="hero">
@@ -24,40 +25,7 @@ export function HomePage({ siteContent, toolboxes }) {
           <article><strong>{toolCount}</strong><span>{toolCount > 1 ? content.stats.toolPlural : content.stats.toolSingular}</span></article>
         </div>
       </section>
-      <section className="home-orientation nebula-panel" aria-label={content.orientation.ariaLabel}>
-        {showStartMap && (
-          <div className="home-start-map" aria-labelledby="home-start-map-title">
-            <div className="home-section-heading">
-              <p className="eyebrow">{content.startMap.eyebrow}</p>
-              <h2 id="home-start-map-title">{content.startMap.title}</h2>
-              <p>{content.startMap.description}</p>
-            </div>
-            <ol className="home-start-steps">
-              {content.startMap.steps.map((step, index) => (
-                <li key={step.title}>
-                  <span>{index + 1}</span>
-                  <div>
-                    <strong>{step.title}</strong>
-                    <p>{step.text}</p>
-                  </div>
-                </li>
-              ))}
-            </ol>
-          </div>
-        )}
-        <div className={showStartMap ? "home-orientation-main has-start-map" : "home-orientation-main"}>
-          <div className="home-orientation-grid">
-            {content.orientation.cards.map((card) => (
-              <a className="home-orientation-card" href={card.href} key={card.href}>
-                <span className={`module-icon-svg module-icon-${card.icon}`} aria-hidden="true" />
-                <strong>{card.title}</strong>
-                <span>{card.text}</span>
-                <em>{card.action}</em>
-              </a>
-            ))}
-          </div>
-        </div>
-      </section>
+      {showOnboarding && <HomeOnboardingSection content={content.onboarding} />}
       <section className="origin-section nebula-panel" aria-labelledby="origin-title">
         <div className="origin-copy">
           <p className="eyebrow">{content.origin.eyebrow}</p>