shadow-gunbuilder-ai-proto/.superpowers/brainstorm/3703-1774862900/page-sections.html

<h2>Below the Hero: Page Section Flow</h2>
<p class="subtitle">What content comes after the hero + CTA? Pick the flow that best supports "I just landed here, convince me to start a build."</p>

<div class="cards">

  <div class="card" data-choice="lean" onclick="toggleSelect(this)">
    <div class="card-image">
      <div style="background:#0a0a0a;border-radius:8px;padding:20px;font-family:sans-serif;border:1px solid #27272a;display:flex;flex-direction:column;gap:8px;">
        <div style="background:#1a1a1a;border:1px solid #fbbf24;border-radius:6px;padding:12px;text-align:center;">
          <div style="font-size:11px;font-weight:700;color:#fff;">HERO</div>
          <div style="font-size:9px;color:#a1a1aa;">"Stop Guessing. Start Building." + subhead + CTA</div>
        </div>
        <div style="text-align:center;font-size:10px;color:#52525b;">↓</div>
        <div style="background:#111;border:1px solid #27272a;border-radius:6px;padding:12px;text-align:center;">
          <div style="font-size:11px;font-weight:700;color:#fff;">BUILDER PREVIEW</div>
          <div style="font-size:9px;color:#a1a1aa;">Looping video / animated screenshot of the tool</div>
        </div>
        <div style="text-align:center;font-size:10px;color:#52525b;">↓</div>
        <div style="background:#111;border:1px solid #27272a;border-radius:6px;padding:12px;text-align:center;">
          <div style="font-size:11px;font-weight:700;color:#fff;">3 FEATURE PILLARS</div>
          <div style="font-size:9px;color:#a1a1aa;">Guided roles · Compat warnings · Live prices</div>
        </div>
        <div style="text-align:center;font-size:10px;color:#52525b;">↓</div>
        <div style="background:#1a1a1a;border:1px solid #fbbf24;border-radius:6px;padding:10px;text-align:center;">
          <div style="font-size:11px;font-weight:700;color:#fbbf24;">FINAL CTA</div>
          <div style="font-size:9px;color:#a1a1aa;">Second "Start a Build" button</div>
        </div>
      </div>
    </div>
    <div class="card-body">
      <h3>A — Lean (4 sections)</h3>
      <p>Hero → video preview → 3 feature pillars → closing CTA. Fast to read, zero fluff. Gets users to the builder quickly.</p>
    </div>
  </div>

  <div class="card" data-choice="howitworks" onclick="toggleSelect(this)">
    <div class="card-image">
      <div style="background:#0a0a0a;border-radius:8px;padding:20px;font-family:sans-serif;border:1px solid #27272a;display:flex;flex-direction:column;gap:8px;">
        <div style="background:#1a1a1a;border:1px solid #fbbf24;border-radius:6px;padding:12px;text-align:center;">
          <div style="font-size:11px;font-weight:700;color:#fff;">HERO</div>
          <div style="font-size:9px;color:#a1a1aa;">"Stop Guessing. Start Building." + subhead + CTA</div>
        </div>
        <div style="text-align:center;font-size:10px;color:#52525b;">↓</div>
        <div style="background:#111;border:1px solid #27272a;border-radius:6px;padding:12px;text-align:center;">
          <div style="font-size:11px;font-weight:700;color:#fff;">HOW IT WORKS</div>
          <div style="font-size:9px;color:#a1a1aa;">3 steps: Pick parts → See warnings → Buy with confidence</div>
        </div>
        <div style="text-align:center;font-size:10px;color:#52525b;">↓</div>
        <div style="background:#111;border:1px solid #27272a;border-radius:6px;padding:12px;text-align:center;">
          <div style="font-size:11px;font-weight:700;color:#fff;">BUILDER PREVIEW VIDEO</div>
          <div style="font-size:9px;color:#a1a1aa;">Show the tool in action</div>
        </div>
        <div style="text-align:center;font-size:10px;color:#52525b;">↓</div>
        <div style="background:#111;border:1px solid #27272a;border-radius:6px;padding:12px;text-align:center;">
          <div style="font-size:11px;font-weight:700;color:#fff;">FEATURE CARDS</div>
          <div style="font-size:9px;color:#a1a1aa;">6 capabilities at a glance</div>
        </div>
        <div style="text-align:center;font-size:10px;color:#52525b;">↓</div>
        <div style="background:#1a1a1a;border:1px solid #fbbf24;border-radius:6px;padding:10px;text-align:center;">
          <div style="font-size:11px;font-weight:700;color:#fbbf24;">FINAL CTA</div>
          <div style="font-size:9px;color:#a1a1aa;">Second "Start a Build" button</div>
        </div>
      </div>
    </div>
    <div class="card-body">
      <h3>B — Explain + Show (5 sections)</h3>
      <p>Adds a "How it Works" 3-step strip between hero and video. Answers "but what does it actually do?" before showing it. Better for first-time visitors unfamiliar with PCPartPicker-style tools.</p>
    </div>
  </div>

  <div class="card" data-choice="seo" onclick="toggleSelect(this)">
    <div class="card-image">
      <div style="background:#0a0a0a;border-radius:8px;padding:20px;font-family:sans-serif;border:1px solid #27272a;display:flex;flex-direction:column;gap:8px;">
        <div style="background:#1a1a1a;border:1px solid #fbbf24;border-radius:6px;padding:12px;text-align:center;">
          <div style="font-size:11px;font-weight:700;color:#fff;">HERO</div>
          <div style="font-size:9px;color:#a1a1aa;">"Stop Guessing. Start Building." + subhead + CTA</div>
        </div>
        <div style="text-align:center;font-size:10px;color:#52525b;">↓</div>
        <div style="background:#111;border:1px solid #27272a;border-radius:6px;padding:12px;text-align:center;">
          <div style="font-size:11px;font-weight:700;color:#fff;">HOW IT WORKS</div>
          <div style="font-size:9px;color:#a1a1aa;">3 steps with icons</div>
        </div>
        <div style="text-align:center;font-size:10px;color:#52525b;">↓</div>
        <div style="background:#111;border:1px solid #27272a;border-radius:6px;padding:12px;text-align:center;">
          <div style="font-size:11px;font-weight:700;color:#fff;">BUILDER PREVIEW VIDEO</div>
          <div style="font-size:9px;color:#a1a1aa;">Tool in action</div>
        </div>
        <div style="text-align:center;font-size:10px;color:#52525b;">↓</div>
        <div style="background:#111;border:1px solid #27272a;border-radius:6px;padding:12px;text-align:center;">
          <div style="font-size:11px;font-weight:700;color:#fff;">FEATURE CARDS</div>
          <div style="font-size:9px;color:#a1a1aa;">6 capabilities</div>
        </div>
        <div style="text-align:center;font-size:10px;color:#52525b;">↓</div>
        <div style="background:#111;border:1px solid #27272a;border-radius:6px;padding:12px;text-align:center;">
          <div style="font-size:11px;font-weight:700;color:#fff;">SEO COPY BLOCK</div>
          <div style="font-size:9px;color:#a1a1aa;">Short paragraph: "What is an AR-15 builder tool?" — targets search</div>
        </div>
        <div style="text-align:center;font-size:10px;color:#52525b;">↓</div>
        <div style="background:#1a1a1a;border:1px solid #fbbf24;border-radius:6px;padding:10px;text-align:center;">
          <div style="font-size:11px;font-weight:700;color:#fbbf24;">FINAL CTA</div>
          <div style="font-size:9px;color:#a1a1aa;">Second "Start a Build" button</div>
        </div>
      </div>
    </div>
    <div class="card-body">
      <h3>C — SEO-Optimized (6 sections)</h3>
      <p>Same as B but adds a short prose block at the bottom targeting search keywords ("AR-15 parts compatibility tool", "AR-15 build planner"). Best for organic discovery over time.</p>
    </div>
  </div>

</div>