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

Improve onboarding section across home and about
All checks were successful
Deploy Sokko G / deploy (push) Successful in 8s
Details

Browse source
This commit is contained in:
Shinuwa 2026-08-12 21:45:09 +02:00
parent 53ecde8d2b
commit 2f1526b86b
17 changed files with 440 additions and 187 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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