Portal: full mock-driven surfaces, demonolithed components, backend-ready mocks (#6686)

frontend/portal/src/components/docs/GettingStartedSection.tsx

@@ -0,0 +1,66 @@
+import { Card, CodeBlock } from "@shared/components";
+import type { CodeSample } from "@portal/api/docs";
+import { DocsSection } from "@portal/components/docs/DocsSection";
+import { LangSnippet } from "@portal/components/docs/LangSnippet";
+
+export function GettingStartedSection({
+  samples,
+  response,
+}: {
+  samples: CodeSample[];
+  response: string;
+}) {
+  return (
+    <DocsSection
+      id="quickstart"
+      eyebrow="GETTING STARTED"
+      title="Quickstart"
+      lead="Send your first document to a typed endpoint and get structured JSON back in three steps. No model training, no prompt engineering."
+    >
+      <ol className="portal-docs__steps">
+        <li className="portal-docs__step">
+          <span className="portal-docs__step-mark">1</span>
+          <div className="portal-docs__step-body">
+            <h3>Issue an API key</h3>
+            <p>
+              Create a scoped key from the Infrastructure tab. Keys carry rate
+              limits and an optional IP allowlist. Export it into your shell:
+            </p>
+            <CodeBlock
+              lang="bash"
+              code={`export STIRLING_API_KEY="sk_live_8f2c...e10"`}
+            />
+          </div>
+        </li>
+        <li className="portal-docs__step">
+          <span className="portal-docs__step-mark">2</span>
+          <div className="portal-docs__step-body">
+            <h3>Send a document</h3>
+            <p>
+              POST a file to any typed endpoint. The endpoint determines the
+              schema you get back — here, the invoice extractor.
+            </p>
+            <LangSnippet samples={samples} caption="extract an invoice" />
+          </div>
+        </li>
+        <li className="portal-docs__step">
+          <span className="portal-docs__step-mark">3</span>
+          <div className="portal-docs__step-body">
+            <h3>Read the structured result</h3>
+            <p>
+              Every response is validated against the endpoint schema, with a
+              confidence score and per-field provenance.
+            </p>
+            <CodeBlock lang="json" code={response} caption="200 OK" />
+          </div>
+        </li>
+      </ol>
+
+      <Card className="portal-docs__callout" accent="blue" padding="loose">
+        <strong>Next:</strong> wire the same call into a pipeline to chain
+        validation, redaction, and delivery — or expose it to an agent over MCP.
+        See <em>Playbooks</em> for copy-paste recipes.
+      </Card>
+    </DocsSection>
+  );
+}