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

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

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+
+/** Eyebrow + title + lead heading wrapper shared by every docs content pane. */
+export function DocsSection({
+  id,
+  eyebrow,
+  title,
+  lead,
+  children,
+}: {
+  id: string;
+  eyebrow: string;
+  title: string;
+  lead?: string;
+  children: ReactNode;
+}) {
+  return (
+    <section id={id} className="portal-docs__section">
+      <div className="portal-docs__section-eyebrow">{eyebrow}</div>
+      <h1 className="portal-docs__section-title">{title}</h1>
+      {lead && <p className="portal-docs__section-lead">{lead}</p>}
+      {children}
+    </section>
+  );
+}