feat(website): quickstart guide with hero hint and bottom CTA

website/i18n/es/code.json

@@ -23,6 +23,30 @@
     "message": "Leer la bitácora",
     "description": "Hero CTA — read the blog"
   },
+  "hero.installLabel": {
+    "message": "Instala el CLI en una línea",
+    "description": "Eyebrow label above the install command in the hero"
+  },
+  "hero.quickstartHint": {
+    "message": "…luego sigue nuestra breve {link} →",
+    "description": "Subtle link under the install command pointing to the quickstart guide"
+  },
+  "hero.quickstartHint.link": {
+    "message": "guía de primeros pasos",
+    "description": "Link text in the quickstart hint"
+  },
+  "gettingStarted.title": {
+    "message": "¿Listo para probarla?",
+    "description": "Bottom getting-started section title"
+  },
+  "gettingStarted.body": {
+    "message": "La guía de primeros pasos te lleva desde una terminal vacía hasta un Charter cerrado, con un ciclo de auditoría externa encima — seis secciones breves, comandos listos para copiar y pegar, unos diez minutos de lectura. Si llegaste hasta aquí, ese es el siguiente paso.",
+    "description": "Bottom getting-started section body paragraph"
+  },
+  "gettingStarted.cta": {
+    "message": "Leer los primeros pasos →",
+    "description": "Bottom getting-started CTA button"
+  },
   "why.eyebrow": {
     "message": "Por qué existe esto",
     "description": "Why this exists eyebrow"

website/i18n/zh-CN/code.json

@@ -75,6 +75,30 @@
     "message": "阅读编年史",
     "description": "Hero CTA — read the blog"
   },
+  "hero.installLabel": {
+    "message": "用一行命令安装 CLI",
+    "description": "Eyebrow label above the install command in the hero"
+  },
+  "hero.quickstartHint": {
+    "message": "……然后看看我们的简短{link} →",
+    "description": "Subtle link under the install command pointing to the quickstart guide"
+  },
+  "hero.quickstartHint.link": {
+    "message": "快速上手指南",
+    "description": "Link text in the quickstart hint"
+  },
+  "gettingStarted.title": {
+    "message": "准备好动手了吗？",
+    "description": "Bottom getting-started section title"
+  },
+  "gettingStarted.body": {
+    "message": "快速上手指南会带你从一个空终端走到一个已关闭的 Charter，外加一次外部审计循环——六个小节，可直接复制粘贴的命令，大约十分钟的阅读量。如果你已经读到这里，那就是下一站。",
+    "description": "Bottom getting-started section body paragraph"
+  },
+  "gettingStarted.cta": {
+    "message": "阅读快速上手指南 →",
+    "description": "Bottom getting-started CTA button"
+  },
   "why.eyebrow": {
     "message": "为什么需要 StrayMark",
     "description": "Why this exists eyebrow"

website/src/components/GettingStarted/index.tsx

@@ -0,0 +1,31 @@
+import type {ReactNode} from 'react';
+import Link from '@docusaurus/Link';
+import Translate from '@docusaurus/Translate';
+import styles from './styles.module.css';
+
+export default function GettingStarted(): ReactNode {
+  return (
+    <section className={styles.section}>
+      <div className={styles.inner}>
+        <h2 className={styles.title}>
+          <Translate id="gettingStarted.title" description="Bottom getting-started section title">
+            Ready to try it?
+          </Translate>
+        </h2>
+        <p className={styles.body}>
+          <Translate
+            id="gettingStarted.body"
+            description="Bottom getting-started section body paragraph"
+          >
+            The quickstart guide walks you from a fresh terminal to a closed Charter with one external-audit cycle on top — six short sections, plain copy-paste-able commands, about ten minutes of reading. If you've read this far, that's where to go next.
+          </Translate>
+        </p>
+        <Link className={`button button--primary button--lg ${styles.cta}`} to="/quickstart">
+          <Translate id="gettingStarted.cta" description="Bottom getting-started CTA button">
+            Read the quickstart →
+          </Translate>
+        </Link>
+      </div>
+    </section>
+  );
+}

website/src/components/GettingStarted/styles.module.css

@@ -0,0 +1,30 @@
+.section {
+  padding: 5rem 1rem;
+  background: var(--ifm-background-surface-color);
+  border-top: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.inner {
+  max-width: 720px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.title {
+  font-size: 2rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  margin: 0 0 1rem;
+}
+
+.body {
+  font-size: 1.05rem;
+  line-height: 1.65;
+  color: var(--ifm-color-emphasis-700);
+  margin: 0 0 2rem;
+}
+
+.cta {
+  /* Inherits .button.button--primary.button--lg from Infima — minimal overrides. */
+  padding: 0.85rem 1.75rem;
+}

website/src/components/Hero/index.tsx

@@ -42,9 +42,34 @@ export default function Hero(): ReactNode {
           </li>
         </ul>
         <div className={styles.cta}>
+          <p className={styles.installLabel}>
+            <Translate
+              id="hero.installLabel"
+              description="Eyebrow label above the install command in the hero"
+            >
+              Install the CLI in one line
+            </Translate>
+          </p>
           <CodeBlock language="bash" className={styles.install}>
             {INSTALL}
           </CodeBlock>
+          <p className={styles.quickstartHint}>
+            <Translate
+              id="hero.quickstartHint"
+              description="Subtle link under the install command pointing to the quickstart guide"
+              values={{
+                link: (
+                  <Link to="/quickstart" className={styles.quickstartLink}>
+                    <Translate id="hero.quickstartHint.link" description="Link text in the quickstart hint">
+                      quickstart guide
+                    </Translate>
+                  </Link>
+                ),
+              }}
+            >
+              {'…then follow our short {link} →'}
+            </Translate>
+          </p>
           <div className={styles.buttons}>
             <Link className="button button--primary button--lg" to="/docs/">
               <Translate id="hero.cta.docs" description="Hero CTA — read the docs">

website/src/components/Hero/styles.module.css

@@ -61,11 +61,38 @@
   gap: 1.25rem;
 }
 
+.installLabel {
+  margin: 0 0 -0.5rem;
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--ifm-color-emphasis-600);
+  text-align: center;
+}
+
 .install {
   text-align: left;
   font-size: 0.95rem;
 }
 
+.quickstartHint {
+  margin: -0.4rem 0 1rem;
+  font-size: 0.9rem;
+  color: var(--ifm-color-emphasis-600);
+  text-align: center;
+}
+
+.quickstartLink {
+  color: var(--ifm-color-primary);
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.quickstartLink:hover {
+  text-decoration: underline;
+}
+
 .buttons {
   display: flex;
   flex-wrap: wrap;

website/src/pages/index.tsx

@@ -5,6 +5,7 @@ import Hero from '@site/src/components/Hero';
 import WorkflowDiagram from '@site/src/components/WorkflowDiagram';
 import WhyExists from '@site/src/components/WhyExists';
 import FeatureGrid from '@site/src/components/FeatureGrid';
+import GettingStarted from '@site/src/components/GettingStarted';
 
 export default function Home(): ReactNode {
   const description = translate({
@@ -18,6 +19,7 @@ export default function Home(): ReactNode {
       <WorkflowDiagram />
       <WhyExists />
       <FeatureGrid />
+      <GettingStarted />
     </Layout>
   );
 }