Improve onboarding section across home and about

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>
+  );
+}