Improve onboarding layout and add sidebar mascot

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
-          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 className="home-onboarding-preview">
+          <h3>{content.sliderTitle}</h3>
+          <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>
       <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;
-  border-top: 1px solid rgba(150, 165, 205, 0.1);
+  padding: 0;
 }
 
 .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;
-  padding: var(--space-3) var(--space-4);
-  background: rgba(0, 0, 0, 0.56);
-  backdrop-filter: blur(8px);
+  gap: 1px;
+  padding: 10px var(--space-4);
+  background: rgba(0, 0, 0, 0.5);
+  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;