> ## Documentation Index
> Fetch the complete documentation index at: https://docs.augmentcode.com/llms.txt
> Use this file to discover all available pages before exploring further.

# A portfolio of software factories: one per team

> A portfolio view of per-team software factories, shared environments, and Cosmos Advisor.

export const html = `
<style>
  .sf-wrap { background: #fff; overflow-x: auto; }
  .sf-canvas {
    --ink: #172044;
    --muted: #68718d;
    --line: #d7dfed;
    --surface: #ffffff;
    --canvas: #f5f7ff;
    --space-a: #7a4cc9;
    --space-a-soft: #f0eafe;
    --space-a-line: #cbb8ec;
    --space-b: #b5477b;
    --space-b-soft: #fbeaf2;
    --space-b-line: #e8b6cd;
    --space-c: #6b5a4a;
    --space-c-soft: #f3eee8;
    --space-c-line: #cdbfaf;
    --green: #19a477;
    --green-soft: #f0fbf6;
    --blue: #4478e8;
    --blue-soft: #f1f5ff;
    --red: #ef5158;
    --red-soft: #fff3f3;
    --yellow: #e99a12;
    --yellow-soft: #fff9e9;
    --env: #f0f8fa;
    --env-bc: #2388b5;
    --shadow: 0 18px 45px rgba(26, 37, 77, 0.11);
    position: relative;
    min-width: 1680px;
    max-width: 1950px;
    margin: 0 auto;
    padding: 24px 32px 22px;
    overflow: hidden;
    color: var(--ink);
    font-family: inherit;
    background: #fff;
  }
  .sf-canvas * { box-sizing: border-box; }
  .sf-canvas .page-header { margin: 0 10px 20px; }
  .sf-canvas .page-header h1 { margin: 0; color: #172044; font-family: sans-serif; font-size: 36px; line-height: 1.05; letter-spacing: -0.5px; }
  .sf-canvas .page-header p { margin: 6px 0 0; color: #5f6987; font-size: 16px; line-height: 1.25; }
  .sf-canvas .spaces-grid,
  .sf-canvas .environments-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .sf-canvas .space { position: relative; overflow: hidden; min-width: 0; padding-bottom: 220px; border: 2px solid var(--space-color); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
  .sf-canvas .space-a { --space-color: var(--space-a-line); --space-accent: var(--space-a); --space-soft: var(--space-a-soft); }
  .sf-canvas .space-b { --space-color: var(--space-b-line); --space-accent: var(--space-b); --space-soft: var(--space-b-soft); }
  .sf-canvas .space-c { --space-color: var(--space-c-line); --space-accent: var(--space-c); --space-soft: var(--space-c-soft); }
  .sf-canvas .space-header { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; background: var(--space-soft); }
  .sf-canvas .space-dot { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--space-accent); }
  .sf-canvas .space-header h2 { margin: 0; font-size: 20px; line-height: 1.05; }
  .sf-canvas .space-header p { margin: 3px 0 0; color: #69728e; font-size: 11px; font-weight: 700; letter-spacing: 0.7px; }
  .sf-canvas .space-body { padding: 10px 12px 14px; }
  .sf-canvas .factory-label { margin: 0 0 7px; color: #404967; font-size: 12.5px; font-weight: 800; letter-spacing: 0.7px; }
  .sf-canvas .factory { padding: 10px; border: 1px solid #d8e0ee; border-radius: 15px; background: #f9fbff; }
  .sf-canvas .top-loops { position: relative; z-index: 2; display: grid; grid-template-columns: 0.95fr 1.1fr 1.2fr; gap: 4px; }
  .sf-canvas .loop { position: relative; min-width: 0; padding: 6px; border: 2px solid var(--loop-color); border-radius: 12px; background: var(--loop-soft); }
  .sf-canvas .loop.spec { --loop-color: #52c79b; --loop-soft: var(--green-soft); --icon-soft: #ddf7ea; --arrow-color: #19a477; }
  .sf-canvas .loop.ticket { --loop-color: #8babff; --loop-soft: var(--blue-soft); --icon-soft: #dfe9ff; --arrow-color: #4478e8; }
  .sf-canvas .loop.incident { --loop-color: #ff8a8d; --loop-soft: var(--red-soft); --icon-soft: #ffe0e1; --arrow-color: #ef5158; }
  .sf-canvas .loop.code { --loop-color: #efa41b; --loop-soft: var(--yellow-soft); --icon-soft: #fff0bd; }
  .sf-canvas .top-loops > .loop::after { position: absolute; top: 100%; left: calc(50% - 1px); height: 22px; border-left: 2px solid var(--arrow-color); content: ""; }
  .sf-canvas .top-loops > .loop::before { position: absolute; top: calc(100% + 15px); left: 50%; border-top: 7px solid var(--arrow-color); border-right: 5px solid transparent; border-left: 5px solid transparent; content: ""; transform: translateX(-50%); }
  .sf-canvas .loop-title { display: flex; align-items: center; gap: 4px; min-height: 22px; margin-bottom: 5px; color: #343d5a; font-size: 9.5px; font-weight: 800; white-space: nowrap; }
  .sf-canvas .loop-icon { display: inline-grid; flex: 0 0 auto; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: var(--icon-soft); font-size: 10px; }
  .sf-canvas .loop.ticket .loop-title::before { display: inline-grid; flex: 0 0 auto; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: #dfe9ff; content: "🔀"; font-size: 10px; }
  .sf-canvas .step { display: grid; min-height: 37px; place-items: center; padding: 5px; border: 1px solid var(--loop-color); border-radius: 8px; background: rgba(255, 255, 255, 0.82); color: #27304d; font-size: 10px; font-weight: 750; line-height: 1.2; text-align: center; }
  .sf-canvas .step + .step { position: relative; margin-top: 7px; }
  .sf-canvas .step + .step::before { position: absolute; top: -8px; left: 50%; color: var(--loop-color); content: "▼"; font-size: 8px; transform: translateX(-50%); }
  .sf-canvas .code-loop { position: relative; z-index: 1; margin-top: 22px; padding: 7px; border: 2px solid #efa41b; border-radius: 12px; background: var(--yellow-soft); }
  .sf-canvas .code-loop .loop-title { margin-bottom: 5px; }
  .sf-canvas .code-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
  .sf-canvas .flow-card { position: relative; display: grid; min-height: 36px; place-items: center; padding: 5px; border: 1px solid #e9a11a; border-radius: 8px; background: rgba(255, 255, 255, 0.88); color: #28314e; font-size: 10px; font-weight: 800; line-height: 1.2; text-align: center; }
  .sf-canvas .arrow-right::after,
  .sf-canvas .arrow-left::before,
  .sf-canvas .arrow-down::after { position: absolute; color: #e69a10; font-size: 20px; font-weight: 800; line-height: 1; }
  .sf-canvas .arrow-right::after { top: 50%; right: -17px; content: "→"; transform: translateY(-50%); }
  .sf-canvas .arrow-left::before { top: 50%; left: -17px; content: "←"; transform: translateY(-50%); }
  .sf-canvas .arrow-down::after { bottom: -19px; left: 50%; content: "↓"; transform: translateX(-50%); }
  .sf-canvas .resources { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
  .sf-canvas .resources::before { position: absolute; top: -10px; bottom: -26px; left: calc(50% - 1px); border-left: 2px dashed var(--space-accent); content: ""; pointer-events: none; }
  .sf-canvas .resources::after { position: absolute; top: calc(100% + 18px); left: 50%; border-top: 8px solid var(--space-accent); border-right: 5px solid transparent; border-left: 5px solid transparent; content: ""; pointer-events: none; transform: translateX(-50%); }
  .sf-canvas .resource-card { min-width: 0; padding: 7px 9px; border: 1px solid #d7dfed; border-top: 3px solid var(--space-accent); border-radius: 4px 4px 11px 11px; background: #fff; }
  .sf-canvas .resource-title { margin-bottom: 5px; color: #53607e; font-size: 9.5px; font-weight: 850; letter-spacing: 0.7px; text-transform: uppercase; }
  .sf-canvas .group-chip { display: flex; align-items: center; gap: 6px; min-height: 23px; padding: 4px 6px; border-radius: 6px; background: var(--space-soft); color: #3c4664; font-size: 9px; font-weight: 750; }
  .sf-canvas .group-chip::before { width: 10px; height: 10px; border: 3px solid var(--space-accent); border-radius: 50%; content: ""; }
  .sf-canvas .small-label { margin: 6px 0 4px; color: #76809a; font-size: 9px; font-weight: 750; }
  .sf-canvas .file-pills,
  .sf-canvas .secret-pills { display: flex; gap: 5px; flex-wrap: wrap; }
  .sf-canvas .file-pills span,
  .sf-canvas .secret-pills span { padding: 4px 8px; border-radius: 999px; background: var(--space-soft); color: #4d5673; font-size: 8.5px; font-weight: 750; }
  .sf-canvas .automation { padding: 5px 7px; border: 1px solid #d8c9ff; border-radius: 7px; background: #f4f0ff; color: #505977; font-size: 9px; font-weight: 700; line-height: 1.3; }
  .sf-canvas .automation strong { color: #5b43d9; }
  .sf-canvas .secrets-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; }
  .sf-canvas .secrets-row .small-label { margin: 0; }
  .sf-canvas .secret-pills span { background: #eef2f8; }
  .sf-canvas .environments-grid { position: relative; z-index: 2; margin-top: -206px; margin-bottom: 16px; }
  .sf-canvas .environment { position: relative; min-height: 190px; margin: 0 10px; padding: 10px; border: 2px dashed var(--env-border); border-radius: 15px; background: var(--env); }
  .sf-canvas .env-a { grid-column: 1; --env-border: #6b7280; --cloud-color: #6b5a8e; }
  .sf-canvas .env-bc { grid-column: 2 / span 2; --env-border: var(--env-bc); --cloud-color: #2778b7; }
  .sf-canvas .environment-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .sf-canvas .environment-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .sf-canvas .cloud-icon { display: grid; flex: 0 0 auto; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: var(--cloud-color); color: white; font-size: 18px; line-height: 1; }
  .sf-canvas .environment h3 { margin: 0; font-size: 17px; line-height: 1.2; white-space: nowrap; }
  .sf-canvas .environment-meta { display: grid; min-width: 165px; gap: 3px; }
  .sf-canvas .env-bc .environment-meta { width: max-content; min-width: 0; margin-left: auto; justify-items: stretch; }
  .sf-canvas .meta-pill { padding: 4px 9px; border-radius: 999px; background: #f6f4f8; color: #6a738f; font-size: 9.5px; line-height: 1.2; }
  .sf-canvas .env-a .meta-pill { background: var(--space-a-soft); }
  .sf-canvas .meta-key { font-weight: 500; }
  .sf-canvas .meta-value { color: #56617d; font-weight: 800; }
  .sf-canvas .can-use { font-weight: 700; }
  .sf-canvas .dependency-graph { margin-top: 8px; }
  .sf-canvas .dep-top { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 28px; }
  .sf-canvas .env-bc .dep-top { gap: 130px; }
  .sf-canvas .dep-top::after { position: absolute; right: calc(25% - 5.5px); bottom: -15px; left: calc(25% - 5.5px); border-bottom: 2px solid #778096; content: ""; }
  .sf-canvas .env-bc .dep-top::after { right: calc(25% - 32.5px); left: calc(25% - 32.5px); }
  .sf-canvas .repo-node { position: relative; min-height: 44px; padding: 7px 9px 6px 32px; border: 1px solid #ccd7e8; border-radius: 9px; background: white; }
  .sf-canvas .repo-node.top::after { position: absolute; top: 100%; left: calc(50% - 1px); height: 15px; border-left: 2px solid #778096; content: ""; }
  .sf-canvas .repo-dot { position: absolute; top: 10px; left: 11px; width: 12px; height: 12px; border-radius: 50%; background: var(--repo-color); }
  .sf-canvas .repo-name { color: #28314e; font-size: 12px; font-weight: 850; }
  .sf-canvas .repo-owner { margin-top: 2px; color: #69738e; font-size: 9px; font-weight: 700; }
  .sf-canvas .dep-bottom { position: relative; display: flex; justify-content: center; }
  .sf-canvas .dep-bottom::before { position: absolute; bottom: 100%; left: calc(50% - 1px); height: 14px; border-left: 2px solid #778096; content: ""; }
  .sf-canvas .dep-bottom::after { position: absolute; top: -7px; left: 50%; border-top: 8px solid #778096; border-right: 5px solid transparent; border-left: 5px solid transparent; content: ""; transform: translateX(-50%); }
  .sf-canvas .dep-bottom .repo-node { width: 48%; }
  .sf-canvas .env-bc .dep-bottom .repo-node { width: 42%; }
  .sf-canvas .advisor-connectors { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; height: 44px; margin-top: -14px; }
  .sf-canvas .advisor-connectors span { position: relative; justify-self: center; height: 44px; border-left: 2px dashed #6c60c9; }
  .sf-canvas .advisor-connectors span::after { position: absolute; bottom: -5px; left: -5px; width: 8px; height: 8px; border-radius: 50%; background: #6c60c9; content: ""; }
  .sf-canvas .advisor { padding: 18px 18px 14px; border-radius: 20px; background: linear-gradient(100deg, #5942dc, #825de8 52%, #4b64d8); color: white; }
  .sf-canvas .advisor-main { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
  .sf-canvas .advisor-identity { display: flex; align-items: center; gap: 14px; }
  .sf-canvas .advisor-star { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, 0.18); font-size: 25px; }
  .sf-canvas .advisor h2 { margin: 0; font-size: 22px; }
  .sf-canvas .advisor-identity p { margin: 4px 0 0; color: #e7e2ff; font-size: 13px; }
  .sf-canvas .advisor-meta { min-width: 390px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #2b334d; font-size: 10.5px; text-align: center; }
  .sf-canvas .advisor-foot { margin: 12px 0 0; color: #e7e2ff; font-size: 12.5px; }
  @media (max-width: 1550px) {
    .sf-canvas { padding-right: 32px; padding-left: 32px; }
    .sf-canvas .spaces-grid, .sf-canvas .environments-grid, .sf-canvas .advisor-connectors { gap: 14px; }
  }
</style>
<div class="sf-wrap">
  <main class="sf-canvas">
    <header class="page-header">
      <h1>A portfolio of software factories: one per team</h1>
      <p>Each Space gives a team its own software factory. Shared environments and Advisor connect work where intended.</p>
    </header>
    <section class="spaces-grid" aria-label="Team Spaces">
      <article class="space space-a">
        <header class="space-header">
          <span class="space-dot" aria-hidden="true"></span>
          <div><h2>space: team-A</h2><p>Dedicated team boundary</p></div>
        </header>
        <div class="space-body">
          <p class="factory-label">Software factory · A</p>
          <section class="factory" aria-label="Software factory A">
            <div class="top-loops">
              <section class="loop spec"><div class="loop-title"><span class="loop-icon">💡</span>Spec-driven dev</div><div class="step">Project Builder<br>Expert</div></section>
              <section class="loop ticket"><div class="loop-title">Ticket + dispatch loop</div><div class="step">Feedback Triager</div><div class="step">Backlog Dispatcher</div></section>
              <section class="loop incident"><div class="loop-title"><span class="loop-icon">🚨</span>Incident response loop</div><div class="step">Incident Investigator</div><div class="step">Incident Responder +<br>Post Mortem Writer</div></section>
            </div>
            <section class="code-loop"><div class="loop-title"><span class="loop-icon">⚙️</span>Code-producing loop</div><div class="code-flow">
              <div class="flow-card arrow-right">PR Author</div><div class="flow-card arrow-right">Deep Code<br>Reviewer</div><div class="flow-card arrow-down">PR Fixer</div>
              <div class="flow-card">Memory Manager</div><div class="flow-card arrow-left">Pair Reviewer</div><div class="flow-card arrow-left">E2E Verifier</div>
            </div></section>
          </section>
          <section class="resources">
            <div class="resource-card"><div class="resource-title">Access + Cosmos files</div><div class="group-chip">user-group-team-A</div><div class="small-label">Cosmos files</div><div class="file-pills"><span>PRD</span><span>Tech spec</span><span>Architecture</span></div></div>
            <div class="resource-card"><div class="resource-title">Automation + secrets</div><div class="automation">PR created on repo1, repo2, repo3<br><strong>&rarr; trigger Deep Code Reviewer</strong></div><div class="secrets-row"><div class="small-label">Secrets</div><div class="secret-pills"><span>S1</span><span>S2</span><span>S3</span></div></div></div>
          </section>
        </div>
      </article>
      <article class="space space-b">
        <header class="space-header"><span class="space-dot" aria-hidden="true"></span><div><h2>space: team-B</h2><p>Dedicated team boundary</p></div></header>
        <div class="space-body">
          <p class="factory-label">Software factory · B</p>
          <section class="factory" aria-label="Software factory B">
            <div class="top-loops">
              <section class="loop spec"><div class="loop-title"><span class="loop-icon">💡</span>Spec-driven dev</div><div class="step">Project Builder<br>Expert</div></section>
              <section class="loop ticket"><div class="loop-title">Ticket + dispatch loop</div><div class="step">Feedback Triager</div><div class="step">Backlog Dispatcher</div></section>
              <section class="loop incident"><div class="loop-title"><span class="loop-icon">🚨</span>Incident response loop</div><div class="step">Incident Investigator</div><div class="step">Incident Responder +<br>Post Mortem Writer</div></section>
            </div>
            <section class="code-loop"><div class="loop-title"><span class="loop-icon">⚙️</span>Code-producing loop</div><div class="code-flow">
              <div class="flow-card arrow-right">PR Author</div><div class="flow-card arrow-right">Deep Code<br>Reviewer</div><div class="flow-card arrow-down">PR Fixer</div>
              <div class="flow-card">Memory Manager</div><div class="flow-card arrow-left">Pair Reviewer</div><div class="flow-card arrow-left">E2E Verifier</div>
            </div></section>
          </section>
          <section class="resources">
            <div class="resource-card"><div class="resource-title">Access + Cosmos files</div><div class="group-chip">user-group-team-B</div><div class="small-label">Cosmos files</div><div class="file-pills"><span>PRD</span><span>Tech spec</span><span>Architecture</span></div></div>
            <div class="resource-card"><div class="resource-title">Automation + secrets</div><div class="automation">PR created on repo1, repo2<br><strong>&rarr; trigger Deep Code Reviewer</strong></div><div class="secrets-row"><div class="small-label">Secrets</div><div class="secret-pills"><span>S1</span><span>S2</span><span>S3</span></div></div></div>
          </section>
        </div>
      </article>
      <article class="space space-c">
        <header class="space-header"><span class="space-dot" aria-hidden="true"></span><div><h2>space: team-C</h2><p>Dedicated team boundary</p></div></header>
        <div class="space-body">
          <p class="factory-label">Software factory · C</p>
          <section class="factory" aria-label="Software factory C">
            <div class="top-loops">
              <section class="loop spec"><div class="loop-title"><span class="loop-icon">💡</span>Spec-driven dev</div><div class="step">Project Builder<br>Expert</div></section>
              <section class="loop ticket"><div class="loop-title">Ticket + dispatch loop</div><div class="step">Feedback Triager</div><div class="step">Backlog Dispatcher</div></section>
              <section class="loop incident"><div class="loop-title"><span class="loop-icon">🚨</span>Incident response loop</div><div class="step">Incident Investigator</div><div class="step">Incident Responder +<br>Post Mortem Writer</div></section>
            </div>
            <section class="code-loop"><div class="loop-title"><span class="loop-icon">⚙️</span>Code-producing loop</div><div class="code-flow">
              <div class="flow-card arrow-right">PR Author</div><div class="flow-card arrow-right">Deep Code<br>Reviewer</div><div class="flow-card arrow-down">PR Fixer</div>
              <div class="flow-card">Memory Manager</div><div class="flow-card arrow-left">Pair Reviewer</div><div class="flow-card arrow-left">E2E Verifier</div>
            </div></section>
          </section>
          <section class="resources">
            <div class="resource-card"><div class="resource-title">Access + Cosmos files</div><div class="group-chip">user-group-team-C</div><div class="small-label">Cosmos files</div><div class="file-pills"><span>PRD</span><span>Tech spec</span><span>Architecture</span></div></div>
            <div class="resource-card"><div class="resource-title">Automation + secrets</div><div class="automation">PR created on repo3<br><strong>&rarr; trigger Deep Code Reviewer</strong></div><div class="secrets-row"><div class="small-label">Secrets</div><div class="secret-pills"><span>S1</span><span>S2</span><span>S3</span></div></div></div>
          </section>
        </div>
      </article>
    </section>
    <section class="environments-grid" aria-label="Cloud environments">
      <article class="environment env-a">
        <header class="environment-header">
          <div class="environment-name"><span class="cloud-icon" aria-hidden="true">&#9729;</span><h3>environment: team-A</h3></div>
          <div class="environment-meta">
            <div class="meta-pill"><span class="meta-key">available-in: </span><span class="meta-value">Space A</span></div>
            <div class="meta-pill can-use">can-use: user-group-team-A</div>
          </div>
        </header>
        <div class="dependency-graph">
          <div class="dep-top">
            <div class="repo-node top" style="--repo-color:#8b5cf6"><span class="repo-dot"></span><div class="repo-name">repo1</div><div class="repo-owner">(managed by team A)</div></div>
            <div class="repo-node top" style="--repo-color:#8b5cf6"><span class="repo-dot"></span><div class="repo-name">repo2</div><div class="repo-owner">(managed by team A)</div></div>
          </div>
          <div class="dep-bottom"><div class="repo-node" style="--repo-color:#8b5cf6"><span class="repo-dot"></span><div class="repo-name">repo3</div><div class="repo-owner">(managed by team A)</div></div></div>
        </div>
      </article>
      <article class="environment env-bc">
        <header class="environment-header">
          <div class="environment-name"><span class="cloud-icon" aria-hidden="true">&#9729;</span><h3>environment: teams-BC</h3></div>
          <div class="environment-meta">
            <div class="meta-pill"><span class="meta-key">available-in: </span><span class="meta-value">Space B and Space C</span></div>
            <div class="meta-pill can-use">can-use: user-group-team-B and user-group-team-C</div>
          </div>
        </header>
        <div class="dependency-graph">
          <div class="dep-top">
            <div class="repo-node top" style="--repo-color:#b5477b"><span class="repo-dot"></span><div class="repo-name">repo1</div><div class="repo-owner">(managed by team B)</div></div>
            <div class="repo-node top" style="--repo-color:#b5477b"><span class="repo-dot"></span><div class="repo-name">repo2</div><div class="repo-owner">(managed by team B)</div></div>
          </div>
          <div class="dep-bottom"><div class="repo-node" style="--repo-color:#6b5a4a"><span class="repo-dot"></span><div class="repo-name">repo3</div><div class="repo-owner">(managed by team C)</div></div></div>
        </div>
      </article>
    </section>
    <div class="advisor-connectors" aria-hidden="true"><span></span><span></span><span></span></div>
    <section class="advisor" aria-label="Cosmos Advisor">
      <div class="advisor-main">
        <div class="advisor-identity"><span class="advisor-star" aria-hidden="true">&#10022;</span><div><h2>Cosmos Advisor</h2><p>Built-in Expert &middot; available across eligible Spaces &middot; works within the selected Space context</p></div></div>
        <div class="advisor-meta"><span class="meta-key">available-in: </span><span class="meta-value">Space A and Space B and Space C</span></div>
      </div>
      <p class="advisor-foot">One Advisor surface helps teams create, tune, and operate their own software factory while Space boundaries keep resources focused.</p>
    </section>
  </main>
</div>
`;

<div dangerouslySetInnerHTML={{ __html: html }} />
