Improve home onboarding and table interactions

website/src/pages/HomePage.jsx

@@ -6,6 +6,7 @@ import { RichText } from "../components/RichText.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;
   return (
     <>
       <section className="hero">
@@ -23,6 +24,40 @@ 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>
       <section className="origin-section nebula-panel" aria-labelledby="origin-title">
         <div className="origin-copy">
           <p className="eyebrow">{content.origin.eyebrow}</p>