shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve onboarding layout and add sidebar mascot
All checks were successful
Deploy Sokko G / deploy (push) Successful in 7s
Details

Browse source
This commit is contained in:
Shinuwa 2026-08-12 23:53:50 +02:00
parent 2f1526b86b
commit 48dcc8182c
12 changed files with 119 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

63
website/src/pages/HomeOnboardingSection.jsx
View file

@ -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">

2
website/src/pages/HomePage.jsx
View file

@ -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">