GearBox/.superpowers/brainstorm/1268660-1775403447/content/catalog-search.html

<h2>Catalog Browse & Search Experience</h2>
<p class="subtitle">How should users find gear in the global catalog?</p>

<div class="options">
  <div class="option" data-choice="a" onclick="toggleSelect(this)">
    <div class="letter">A</div>
    <div class="content">
      <h3>Search-First</h3>
      <div class="mockup" style="margin-top: 12px;">
        <div class="mockup-header">Global Catalog</div>
        <div class="mockup-body" style="padding: 20px;">
          <div style="display:flex; gap:8px; margin-bottom:16px;">
            <input class="mock-input" placeholder="Search gear... e.g. 'waterproof handlebar bag under 200g'" style="flex:1; font-size:15px; padding:10px 14px;">
          </div>
          <div style="display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;">
            <span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280;">Bikepacking</span>
            <span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280;">Bags</span>
            <span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280;">Waterproof</span>
            <span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280;">Ultralight</span>
            <span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280;">Sim Racing</span>
            <span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280;">Wheels</span>
          </div>
          <div style="color:#9ca3af; font-size:13px; margin-bottom:12px;">Type to search or click tags to filter</div>
          <div style="display:grid; grid-template-columns: 1fr 1fr; gap:12px;">
            <div style="border:1px solid #e5e7eb; border-radius:12px; padding:14px;">
              <div style="display:flex; justify-content:space-between; align-items:start;">
                <div>
                  <div style="font-weight:600; font-size:14px;">Revelate Designs Pika</div>
                  <div style="color:#6b7280; font-size:12px;">Handlebar Bag</div>
                </div>
                <div style="background:#fef3c7; color:#92400e; font-size:11px; padding:2px 8px; border-radius:99px;">★ 4.6</div>
              </div>
              <div style="display:flex; gap:16px; margin-top:10px; font-size:12px; color:#6b7280;">
                <span>128g</span>
                <span>$85</span>
                <span>24 owners</span>
              </div>
              <div style="display:flex; gap:4px; margin-top:8px; flex-wrap:wrap;">
                <span style="padding:2px 8px; border-radius:99px; background:#eff6ff; font-size:11px; color:#3b82f6;">bikepacking</span>
                <span style="padding:2px 8px; border-radius:99px; background:#eff6ff; font-size:11px; color:#3b82f6;">handlebar</span>
                <span style="padding:2px 8px; border-radius:99px; background:#eff6ff; font-size:11px; color:#3b82f6;">waterproof</span>
              </div>
            </div>
            <div style="border:1px solid #e5e7eb; border-radius:12px; padding:14px;">
              <div style="display:flex; justify-content:space-between; align-items:start;">
                <div>
                  <div style="font-weight:600; font-size:14px;">Apidura Racing HB Pack</div>
                  <div style="color:#6b7280; font-size:12px;">Handlebar Bag</div>
                </div>
                <div style="background:#fef3c7; color:#92400e; font-size:11px; padding:2px 8px; border-radius:99px;">★ 4.4</div>
              </div>
              <div style="display:flex; gap:16px; margin-top:10px; font-size:12px; color:#6b7280;">
                <span>105g</span>
                <span>$72</span>
                <span>18 owners</span>
              </div>
              <div style="display:flex; gap:4px; margin-top:8px; flex-wrap:wrap;">
                <span style="padding:2px 8px; border-radius:99px; background:#eff6ff; font-size:11px; color:#3b82f6;">bikepacking</span>
                <span style="padding:2px 8px; border-radius:99px; background:#eff6ff; font-size:11px; color:#3b82f6;">handlebar</span>
                <span style="padding:2px 8px; border-radius:99px; background:#eff6ff; font-size:11px; color:#3b82f6;">ultralight</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pros-cons" style="margin-top:12px;">
        <div class="pros"><h4>Pros</h4><ul><li>Natural language friendly</li><li>Fast for users who know what they want</li><li>Tags as quick filters below search</li></ul></div>
        <div class="cons"><h4>Cons</h4><ul><li>Empty state can feel blank</li><li>Browsing requires typing first</li></ul></div>
      </div>
    </div>
  </div>

  <div class="option" data-choice="b" onclick="toggleSelect(this)">
    <div class="letter">B</div>
    <div class="content">
      <h3>Browse-First with Search</h3>
      <div class="mockup" style="margin-top: 12px;">
        <div class="mockup-header">Global Catalog</div>
        <div class="mockup-body" style="padding: 20px;">
          <div style="display:flex; gap:8px; margin-bottom:16px;">
            <input class="mock-input" placeholder="Search gear..." style="flex:1; font-size:15px; padding:10px 14px;">
          </div>
          <div style="margin-bottom:20px;">
            <div style="font-size:13px; font-weight:600; color:#374151; margin-bottom:8px;">Popular Categories</div>
            <div style="display:grid; grid-template-columns: repeat(3, 1fr); gap:8px;">
              <div style="border:1px solid #e5e7eb; border-radius:10px; padding:12px; text-align:center; cursor:pointer;">
                <div style="font-size:20px; margin-bottom:4px;">🎒</div>
                <div style="font-size:13px; font-weight:500;">Bags</div>
                <div style="font-size:11px; color:#9ca3af;">342 items</div>
              </div>
              <div style="border:1px solid #e5e7eb; border-radius:10px; padding:12px; text-align:center; cursor:pointer;">
                <div style="font-size:20px; margin-bottom:4px;">🏕️</div>
                <div style="font-size:13px; font-weight:500;">Shelter</div>
                <div style="font-size:11px; color:#9ca3af;">128 items</div>
              </div>
              <div style="border:1px solid #e5e7eb; border-radius:10px; padding:12px; text-align:center; cursor:pointer;">
                <div style="font-size:20px; margin-bottom:4px;">🎮</div>
                <div style="font-size:13px; font-weight:500;">Sim Gear</div>
                <div style="font-size:11px; color:#9ca3af;">89 items</div>
              </div>
            </div>
          </div>
          <div>
            <div style="font-size:13px; font-weight:600; color:#374151; margin-bottom:8px;">Trending</div>
            <div style="border:1px solid #e5e7eb; border-radius:12px; padding:12px; display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;">
              <div>
                <div style="font-weight:600; font-size:14px;">Revelate Designs Pika</div>
                <div style="font-size:12px; color:#6b7280;">128g · $85 · ★ 4.6</div>
              </div>
              <div style="font-size:12px; color:#6b7280;">24 owners</div>
            </div>
            <div style="border:1px solid #e5e7eb; border-radius:12px; padding:12px; display:flex; justify-content:space-between; align-items:center;">
              <div>
                <div style="font-weight:600; font-size:14px;">Fanatec DD Pro</div>
                <div style="font-size:12px; color:#6b7280;">2.4kg · $350 · ★ 4.8</div>
              </div>
              <div style="font-size:12px; color:#6b7280;">31 owners</div>
            </div>
          </div>
        </div>
      </div>
      <div class="pros-cons" style="margin-top:12px;">
        <div class="pros"><h4>Pros</h4><ul><li>Great for discovery — see what's popular</li><li>Categories give structure without complexity</li><li>Never an empty state</li></ul></div>
        <div class="cons"><h4>Cons</h4><ul><li>More complex landing page</li><li>Categories need curation</li></ul></div>
      </div>
    </div>
  </div>
</div>