Improve onboarding layout and add sidebar mascot

tests/helpers/data-validation.mjs

@@ -85,6 +85,7 @@ export function validateSiteContent(site) {
     "home.onboarding.title",
     "home.onboarding.description",
     "home.onboarding.stepsTitle",
+    "home.onboarding.sliderTitle",
     "home.onboarding.sliderLabel",
     "home.onboarding.slideButtonLabel",
     "home.origin.eyebrow",

tests/static-app.test.mjs

@@ -46,6 +46,7 @@ test("vite entrypoint and app shell are wired", async () => {
   assert.match(shell, /export function Shell/);
   assert.doesNotMatch(shell, /content\.navigation\.library/);
   assert.match(shell, /sidebar-about-link/);
+  assert.match(shell, /dragon-sidebar\.png/);
   assert.match(shell, /ImportButton/);
   assert.match(overlays, /export function AppOverlays/);
   assert.match(overlays, /\.\/ToolboxModals\.jsx/);
@@ -63,9 +64,10 @@ test("vite entrypoint and app shell are wired", async () => {
   assert.match(homePage, /export function HomePage/);
   assert.match(homePage, /HomeOnboardingSection/);
   assert.match(homePage, /import\.meta\.env\.DEV \|\| toolboxes\.length === 0/);
-  assert.match(homePage, /dragon\.png/);
+  assert.match(homePage, /dragon-home\.png/);
   assert.match(homeOnboarding, /export function HomeOnboardingSection/);
   assert.match(homeOnboarding, /prefers-reduced-motion: reduce/);
+  assert.match(homeOnboarding, /content\.sliderTitle/);
   assert.match(homeOnboarding, /home-onboarding-dots/);
   assert.match(aboutPage, /export function AboutPage/);
   assert.match(aboutPage, /HomeOnboardingSection/);
@@ -132,7 +134,8 @@ test("legacy icons and primary images are available", async () => {
   await readFile("website/public/static/icons/trashcan.svg", "utf8");
   await readFile("website/public/static/icons/zoom.svg", "utf8");
   await readFile("website/public/favicon.ico");
-  await readFile("website/public/static/img/dragon.png");
+  await readFile("website/public/static/img/dragon-home.png");
+  await readFile("website/public/static/img/dragon-sidebar.png");
   await readFile("website/public/static/img/dragon-gameguide.png");
   await readFile("website/public/static/img/dragon-toolbox.png");
   await readFile("website/public/static/img/onboarding/toolbox-overview.png");

tests/static-styles.test.mjs

@@ -45,6 +45,7 @@ test("style entrypoint and theme layers are wired", async () => {
   assert.match(styleHome, /\.about-tool-item \.module-icon/);
   assert.match(styleMixins, /@mixin gold-panel-frame/);
   assert.match(styleShell, /\.sidebar-about-link/);
+  assert.match(styleShell, /\.sidebar-mascot/);
   assert.match(styleToolboxes, /\.module-icon-abacus/);
   assert.match(styleToolboxes, /\.module-icon-calculator/);
   assert.match(styleToolboxes, /\.module-icon-columns/);

website/public/data/site.json

@@ -1184,9 +1184,10 @@
     },
     "onboarding": {
       "eyebrow": "Prise en main",
-      "title": "Prise en main",
+      "title": "Votre première toolbox",
       "description": "Une toolbox est votre espace personnel pour garder vos notes, listes, images, liens et outils utiles dans ce navigateur.",
-      "stepsTitle": "Créer votre première toolbox",
+      "stepsTitle": "Les étapes",
+      "sliderTitle": "Aperçu",
       "sliderLabel": "Aperçu de la prise en main",
       "slideButtonLabel": "Afficher l'aperçu",
       "steps": [

website/src/components/Shell.jsx

@@ -22,6 +22,9 @@ export function Shell({ route, content, games, toolboxes, links, actions, childr
           <a className={`nav-item ${route.startsWith("/games") ? "active" : ""}`} href="#/games"><span className="nav-icon nav-icon-controller" aria-hidden="true" /><strong>{content.navigation.games}</strong></a>
           <a className={`nav-item ${route.startsWith("/toolboxes") || route.startsWith("/toolbox") ? "active" : ""}`} href="#/toolboxes"><span className="nav-icon nav-icon-toolbox" aria-hidden="true" /><strong>{content.navigation.toolboxes}</strong></a>
         </nav>
+        <div className="sidebar-mascot" aria-hidden="true">
+          <img src="/static/img/dragon-sidebar.png" alt="" />
+        </div>
         <div className="sidebar-secondary-links">
           <a className={`sidebar-about-link ${route === "/about" ? "active" : ""}`} href="#/about"><span className="sidebar-about-icon" aria-hidden="true">?</span><strong>{content.navigation.about}</strong></a>
           <a className={`sidebar-about-link ${route === "/library" ? "active" : ""}`} href="#/library"><span className="sidebar-about-icon" aria-hidden="true"><Icon name="book" /></span><strong>{content.library.eyebrow}</strong></a>

website/src/pages/HomeOnboardingSection.jsx

@@ -46,36 +46,39 @@ export function HomeOnboardingSection({ content, className = "" }) {
             ))}
           </ol>
         </div>
-        <div
+        <div className="home-onboarding-preview">
-          className="home-onboarding-slider"
+          <h3>{content.sliderTitle}</h3>
-          onMouseEnter={() => setIsPaused(true)}
+          <div
-          onMouseLeave={() => setIsPaused(false)}
+            className="home-onboarding-slider"
-          onFocus={() => setIsPaused(true)}
+            onMouseEnter={() => setIsPaused(true)}
-          onBlur={() => setIsPaused(false)}
+            onMouseLeave={() => setIsPaused(false)}
-        >
+            onFocus={() => setIsPaused(true)}
-          {currentSlide && (
+            onBlur={() => setIsPaused(false)}
-            <figure>
+          >
-              <img src={currentSlide.src} alt={currentSlide.alt} />
+            {currentSlide && (
-              <figcaption>
+              <figure>
-                <strong>{currentSlide.title}</strong>
+                <img src={currentSlide.src} alt={currentSlide.alt} />
-                <span>{currentSlide.text}</span>
+                <figcaption>
-              </figcaption>
+                  <strong>{currentSlide.title}</strong>
-            </figure>
+                  <span>{currentSlide.text}</span>
-          )}
+                </figcaption>
-          {slides.length > 1 && (
+              </figure>
-            <div className="home-onboarding-dots" aria-label={content.sliderLabel}>
+            )}
-              {slides.map((slide, index) => (
+            {slides.length > 1 && (
-                <button
+              <div className="home-onboarding-dots" aria-label={content.sliderLabel}>
-                  className={index === activeSlide ? "active" : ""}
+                {slides.map((slide, index) => (
-                  key={slide.src}
+                  <button
-                  type="button"
+                    className={index === activeSlide ? "active" : ""}
-                  onClick={() => setActiveSlide(index)}
+                    key={slide.src}
-                  aria-label={`${content.slideButtonLabel} ${index + 1}`}
+                    type="button"
-                  aria-pressed={index === activeSlide}
+                    onClick={() => setActiveSlide(index)}
-                />
+                    aria-label={`${content.slideButtonLabel} ${index + 1}`}
-              ))}
+                    aria-pressed={index === activeSlide}
-            </div>
+                  />
-          )}
+                ))}
+              </div>
+            )}
+          </div>
         </div>
       </div>
       <div className="home-onboarding-cards">

website/src/pages/HomePage.jsx

@@ -36,7 +36,7 @@ export function HomePage({ siteContent, toolboxes }) {
           </div>
         </div>
         <div className="home-visual" aria-label="Illustration Sokko G">
-          <img src="/static/img/dragon.png" alt={content.origin.visualAlt} />
+          <img src="/static/img/dragon-home.png" alt={content.origin.visualAlt} />
         </div>
       </section>
       <footer className="home-legal">

website/src/styles/_home.scss

@@ -212,9 +212,10 @@ span {
 
 .home-onboarding-layout {
   display: grid;
-  grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr);
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   align-items: stretch;
-  gap: var(--space-5);
+  column-gap: clamp(var(--space-12), 5vw, 5rem);
+  row-gap: var(--space-6);
 }
 
 .home-onboarding-steps {
@@ -230,9 +231,22 @@ span {
   font-size: var(--font-size-lg);
 }
 
+.home-onboarding-preview {
+  display: grid;
+  align-content: start;
+  gap: var(--space-4);
+  min-width: 0;
+}
+
+.home-onboarding-preview h3 {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-lg);
+}
+
 .home-onboarding-steps ol {
   display: grid;
-  gap: 0;
+  gap: var(--space-6);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -240,22 +254,37 @@ span {
 
 .home-onboarding-steps li {
   display: flex;
+  position: relative;
   min-width: 0;
   gap: var(--space-3);
-  padding: var(--space-3) 0;
+  padding: 0;
-  border-top: 1px solid rgba(150, 165, 205, 0.1);
 }
 
 .home-onboarding-steps li:first-child {
   padding-top: 0;
-  border-top: 0;
 }
 
 .home-onboarding-steps li:last-child {
   padding-bottom: 0;
 }
 
+.home-onboarding-steps li::before {
+  content: "";
+  position: absolute;
+  top: 32px;
+  bottom: calc(-1 * var(--space-6) + 4px);
+  left: 13px;
+  width: 1px;
+  background: rgba(246, 196, 83, 0.18);
+}
+
+.home-onboarding-steps li:last-child::before {
+  display: none;
+}
+
 .home-onboarding-steps li > span {
+  position: relative;
+  z-index: 1;
   display: grid;
   width: 28px;
   min-width: 28px;
@@ -302,7 +331,7 @@ span {
 .home-onboarding-slider figure {
   position: relative;
   display: grid;
-  min-height: 340px;
+  min-height: 320px;
   margin: 0;
 }
 
@@ -310,7 +339,7 @@ span {
   display: block;
   width: 100%;
   height: 100%;
-  min-height: 340px;
+  min-height: 320px;
   object-fit: cover;
 }
 
@@ -320,12 +349,12 @@ span {
   bottom: 0;
   left: 0;
   display: grid;
-  min-height: 4.8em;
+  min-height: 4.1em;
   align-content: center;
-  gap: 2px;
+  gap: 1px;
-  padding: var(--space-3) var(--space-4);
+  padding: 10px var(--space-4);
-  background: rgba(0, 0, 0, 0.56);
+  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(8px);
+  backdrop-filter: blur(6px);
 }
 
 .home-onboarding-slider figcaption strong,
@@ -346,7 +375,7 @@ span {
 .home-onboarding-dots {
   position: absolute;
   right: var(--space-3);
-  bottom: calc(4.8em + var(--space-3));
+  bottom: calc(4.1em + var(--space-3));
   display: flex;
   gap: 7px;
 }

website/src/styles/_responsive.scss

@@ -22,6 +22,7 @@
   .brand span:last-child,
   .nav-item strong,
   .sidebar-about-link strong,
+  .sidebar-mascot,
   .sidebar-note {
     display: none;
   }
@@ -42,6 +43,12 @@
   }
 }
 
+@media (max-height: 760px) and (min-width: 1025px) {
+  .sidebar-mascot {
+    display: none;
+  }
+}
+
 @media (max-width: 760px) {
   .app-shell {
     display: block;

website/src/styles/_shell.scss

@@ -18,7 +18,7 @@
   flex-direction: column;
   gap: var(--space-4);
   padding: var(--space-5);
-  border-right: 1px solid var(--color-border);
+  border-right: 2px solid var(--color-border);
   background: rgba(11, 14, 27, 0.82);
   backdrop-filter: blur(10px);
   box-shadow: var(--shadow-md);
@@ -145,6 +145,27 @@
   color: var(--color-text-primary);
 }
 
+.sidebar-mascot {
+  position: absolute;
+  top: 47%;
+  right: 0;
+  z-index: 0;
+  display: block;
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.sidebar-mascot img {
+  display: block;
+  width: 134px;
+  object-fit: contain;
+  opacity: 0.86;
+  filter:
+    saturate(1.04)
+    brightness(1.02)
+    drop-shadow(0 24px 34px rgba(0, 0, 0, 0.32));
+}
+
 .sidebar-secondary-links {
   display: grid;
   gap: 4px;