bug fixes. remove builds page for now

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.superpowers/brainstorm/20960-1774881654/.server-stopped

@@ -0,0 +1 @@
+{"reason":"idle timeout","timestamp":1774884294221}

.superpowers/brainstorm/20960-1774881654/.server.log

@@ -0,0 +1,10 @@
+{"type":"server-started","port":63304,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:63304","screen_dir":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654"}
+{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654/waiting.html"}
+{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654/waiting-2.html"}
+{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654/changelog-layout.html"}
+{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654/roadmap-tab.html"}
+{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654/roadmap-votes.html"}
+{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654/feedback-form.html"}
+{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654/feedback-form-v2.html"}
+{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654/waiting-3.html"}
+{"type":"server-stopped","reason":"idle timeout"}

.superpowers/brainstorm/20960-1774881654/.server.pid

@@ -0,0 +1 @@
+20969

.superpowers/brainstorm/20960-1774881654/changelog-layout.html

@@ -0,0 +1,113 @@
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { background: #09090b; color: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 32px 24px; }
+  .wrap { max-width: 900px; margin: 0 auto; }
+
+  h2 { font-size: 13px; font-weight: 600; color: #a1a1aa; margin-bottom: 20px; letter-spacing: 0.05em; text-transform: uppercase; }
+
+  /* ── Tabs ── */
+  .tabs { display: flex; gap: 0; border-bottom: 1px solid #27272a; margin-bottom: 40px; }
+  .tab { padding: 10px 20px; font-size: 13px; font-weight: 500; color: #71717a; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
+  .tab.active { color: #fbbf24; border-bottom-color: #fbbf24; }
+
+  /* ── Changelog entries ── */
+  .entries { display: flex; flex-direction: column; gap: 0; }
+  .entry { display: grid; grid-template-columns: 120px 1fr; gap: 0 32px; border-bottom: 1px solid #18181b; padding: 32px 0; }
+  .entry:last-child { border-bottom: none; }
+  .entry-meta { padding-top: 4px; }
+  .entry-version { font-size: 12px; font-weight: 700; color: #fbbf24; font-family: monospace; margin-bottom: 4px; }
+  .entry-date { font-size: 11px; color: #3f3f46; }
+  .entry-title { font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 8px; }
+  .entry-body { font-size: 13px; color: #71717a; line-height: 1.7; }
+  .entry-tags { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
+  .tag { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 99px; letter-spacing: 0.05em; text-transform: uppercase; }
+  .tag-feature { background: rgba(251,191,36,0.1); color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); }
+  .tag-fix { background: rgba(74,222,128,0.1); color: #4ade80; border: 1px solid rgba(74,222,128,0.2); }
+  .tag-improvement { background: rgba(147,197,253,0.1); color: #93c5fd; border: 1px solid rgba(147,197,253,0.2); }
+
+  /* ── Roadmap items ── */
+  .roadmap { display: flex; flex-direction: column; gap: 12px; }
+  .roadmap-item { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border: 1px solid #1c1c1f; border-radius: 10px; background: #0d0d0f; }
+  .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
+  .status-planned { background: #3f3f46; }
+  .status-inprogress { background: #fbbf24; box-shadow: 0 0 8px rgba(251,191,36,0.4); }
+  .status-shipped { background: #4ade80; }
+  .roadmap-item-title { font-size: 14px; font-weight: 600; color: #e4e4e7; margin-bottom: 4px; }
+  .roadmap-item-desc { font-size: 12px; color: #52525b; line-height: 1.6; }
+  .status-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; letter-spacing: 0.06em; text-transform: uppercase; margin-left: auto; flex-shrink: 0; }
+  .badge-planned { background: rgba(63,63,70,0.4); color: #71717a; border: 1px solid #27272a; }
+  .badge-inprogress { background: rgba(251,191,36,0.1); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
+  .badge-shipped { background: rgba(74,222,128,0.1); color: #4ade80; border: 1px solid rgba(74,222,128,0.2); }
+
+  .page-header { margin-bottom: 40px; }
+  .page-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #52525b; margin-bottom: 8px; }
+  .page-title { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 6px; }
+  .page-sub { font-size: 14px; color: #52525b; }
+
+  /* ── Section separators for roadmap ── */
+  .roadmap-group-label { font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #3f3f46; margin: 24px 0 10px; }
+  .roadmap-group-label:first-child { margin-top: 0; }
+</style>
+
+<div class="wrap">
+  <div class="page-header">
+    <p class="page-label">Battl Builders</p>
+    <h1 class="page-title">Updates</h1>
+    <p class="page-sub">What we've shipped and what's coming next.</p>
+  </div>
+
+  <div class="tabs">
+    <div class="tab active">What's New</div>
+    <div class="tab">What's Next</div>
+    <div class="tab">Give Feedback</div>
+  </div>
+
+  <!-- WHAT'S NEW -->
+  <div id="whats-new">
+    <div class="entries">
+      <div class="entry">
+        <div class="entry-meta">
+          <div class="entry-version">v0.4</div>
+          <div class="entry-date">Mar 28, 2026</div>
+        </div>
+        <div>
+          <div class="entry-tags">
+            <span class="tag tag-feature">Feature</span>
+            <span class="tag tag-improvement">Improvement</span>
+          </div>
+          <div class="entry-title">Homepage redesign + open access</div>
+          <div class="entry-body">Removed the beta gate. New landing page explains what Battl does without the jargon. Compatibility conflict warnings now surface inline while you build.</div>
+        </div>
+      </div>
+
+      <div class="entry">
+        <div class="entry-meta">
+          <div class="entry-version">v0.3</div>
+          <div class="entry-date">Mar 14, 2026</div>
+        </div>
+        <div>
+          <div class="entry-tags">
+            <span class="tag tag-feature">Feature</span>
+            <span class="tag tag-fix">Fix</span>
+          </div>
+          <div class="entry-title">Shareable build links + vault</div>
+          <div class="entry-body">Save and share builds with a single link. Anyone can view the parts list without an account. Fixed gas system validation that was incorrectly flagging mid-length configs.</div>
+        </div>
+      </div>
+
+      <div class="entry">
+        <div class="entry-meta">
+          <div class="entry-version">v0.2</div>
+          <div class="entry-date">Feb 28, 2026</div>
+        </div>
+        <div>
+          <div class="entry-tags">
+            <span class="tag tag-feature">Feature</span>
+          </div>
+          <div class="entry-title">Live pricing from real retailers</div>
+          <div class="entry-body">AvantLink feed integration. Running total updates as you add parts. Prices are pulled daily — no estimated MSRP, no sponsored rankings.</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

.superpowers/brainstorm/20960-1774881654/feedback-form-v2.html

@@ -0,0 +1,88 @@
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { background: #09090b; color: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 32px 24px; }
+  .wrap { max-width: 900px; margin: 0 auto; }
+
+  .tabs { display: flex; gap: 0; border-bottom: 1px solid #27272a; margin-bottom: 40px; }
+  .tab { padding: 10px 20px; font-size: 13px; font-weight: 500; color: #71717a; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
+  .tab.active { color: #fbbf24; border-bottom-color: #fbbf24; }
+
+  .page-header { margin-bottom: 40px; }
+  .page-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #52525b; margin-bottom: 8px; }
+  .page-title { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 6px; }
+  .page-sub { font-size: 14px; color: #52525b; }
+
+  .feedback-header { margin-bottom: 28px; }
+  .feedback-header h2 { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -0.015em; margin-bottom: 6px; }
+  .feedback-header p { font-size: 13px; color: #52525b; line-height: 1.6; }
+
+  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
+  .form-field { margin-bottom: 20px; }
+  .form-label { font-size: 11px; font-weight: 600; color: #71717a; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; display: block; }
+  .form-input, .form-select, .form-textarea {
+    width: 100%; padding: 10px 14px; font-size: 13px; font-family: inherit;
+    background: #0d0d0f; border: 1px solid #27272a; border-radius: 8px;
+    color: #e4e4e7; outline: none;
+  }
+  .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: rgba(251,191,36,0.4); }
+  .form-textarea { resize: vertical; min-height: 160px; line-height: 1.6; }
+  .form-select { appearance: none; cursor: pointer; }
+  .form-hint { font-size: 11px; color: #3f3f46; margin-top: 6px; }
+  .char-count { font-size: 11px; color: #3f3f46; text-align: right; margin-top: 6px; }
+
+  .form-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
+  .form-footer-note { font-size: 11px; color: #3f3f46; }
+
+  .btn-submit {
+    display: inline-flex; align-items: center; gap: 8px;
+    background: rgba(251,191,36,0.9); color: #000; font-size: 13px; font-weight: 700;
+    padding: 10px 28px; border-radius: 8px; border: none; cursor: pointer;
+    letter-spacing: 0.02em; font-family: inherit;
+  }
+  .btn-submit:hover { background: #fbbf24; }
+</style>
+
+<div class="wrap">
+  <div class="page-header">
+    <p class="page-label">Battl Builders</p>
+    <h1 class="page-title">Updates</h1>
+    <p class="page-sub">What we've shipped and what's coming next.</p>
+  </div>
+
+  <div class="tabs">
+    <div class="tab">What's New</div>
+    <div class="tab">What's Next</div>
+    <div class="tab active">Give Feedback</div>
+  </div>
+
+  <div class="feedback-header">
+    <h2>Tell us what you think.</h2>
+    <p>Bug, feature idea, or general thought — we read everything. Rough language welcome.</p>
+  </div>
+
+  <div class="form-row">
+    <div class="form-field">
+      <label class="form-label">Category</label>
+      <select class="form-select">
+        <option>Bug report</option>
+        <option>Feature request</option>
+        <option>General feedback</option>
+      </select>
+    </div>
+    <div class="form-field">
+      <label class="form-label">Email <span style="color:#3f3f46; font-weight:400; text-transform:none; letter-spacing:0;">(optional — if you want a reply)</span></label>
+      <input class="form-input" type="email" placeholder="you@email.com" />
+    </div>
+  </div>
+
+  <div class="form-field">
+    <label class="form-label">Message</label>
+    <textarea class="form-textarea" placeholder="What's on your mind?"></textarea>
+    <div class="char-count">0 / 1000</div>
+  </div>
+
+  <div class="form-footer">
+    <span class="form-footer-note">We'll only use your email to follow up on your feedback.</span>
+    <button class="btn-submit">Send Feedback →</button>
+  </div>
+</div>

.superpowers/brainstorm/20960-1774881654/feedback-form.html

@@ -0,0 +1,160 @@
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { background: #09090b; color: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 32px 24px; }
+  .wrap { max-width: 900px; margin: 0 auto; }
+
+  .tabs { display: flex; gap: 0; border-bottom: 1px solid #27272a; margin-bottom: 40px; }
+  .tab { padding: 10px 20px; font-size: 13px; font-weight: 500; color: #71717a; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
+  .tab.active { color: #fbbf24; border-bottom-color: #fbbf24; }
+
+  .page-header { margin-bottom: 40px; }
+  .page-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #52525b; margin-bottom: 8px; }
+  .page-title { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 6px; }
+  .page-sub { font-size: 14px; color: #52525b; }
+
+  /* ── Shared form styles ── */
+  .form-label { font-size: 11px; font-weight: 600; color: #71717a; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; display: block; }
+  .form-field { margin-bottom: 20px; }
+  .form-input, .form-select, .form-textarea {
+    width: 100%; padding: 10px 14px; font-size: 13px; font-family: inherit;
+    background: #0d0d0f; border: 1px solid #27272a; border-radius: 8px;
+    color: #e4e4e7; outline: none;
+  }
+  .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: rgba(251,191,36,0.4); }
+  .form-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
+  .form-select { appearance: none; cursor: pointer; }
+  .form-hint { font-size: 11px; color: #3f3f46; margin-top: 6px; }
+  .btn-submit {
+    display: inline-flex; align-items: center; gap-8px; gap: 8px;
+    background: rgba(251,191,36,0.9); color: #000; font-size: 13px; font-weight: 700;
+    padding: 10px 24px; border-radius: 8px; border: none; cursor: pointer;
+    letter-spacing: 0.02em; font-family: inherit;
+  }
+  .btn-submit:hover { background: #fbbf24; }
+
+  /* ── Split view ── */
+  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
+
+  /* ── Page form (tab) ── */
+  .feedback-page { max-width: 560px; }
+  .feedback-page-header { margin-bottom: 28px; }
+  .feedback-page-header h2 { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -0.015em; margin-bottom: 6px; }
+  .feedback-page-header p { font-size: 13px; color: #52525b; line-height: 1.6; }
+
+  /* ── Modal ── */
+  .modal-wrap { position: relative; }
+  .modal-label { font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #52525b; margin-bottom: 12px; text-align: center; }
+  .modal {
+    background: #111113; border: 1px solid #27272a; border-radius: 14px;
+    padding: 28px; width: 100%;
+    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
+  }
+  .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
+  .modal-title { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
+  .modal-close { font-size: 18px; color: #3f3f46; cursor: pointer; background: none; border: none; font-family: inherit; padding: 0; line-height: 1; }
+  .modal-close:hover { color: #71717a; }
+
+  /* Nav trigger button (shown for context) */
+  .nav-context { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #18181b; }
+  .nav-context-label { font-size: 10px; color: #3f3f46; letter-spacing: 0.05em; }
+  .btn-feedback-nav {
+    padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 600;
+    border: 1px solid #27272a; color: #71717a; background: transparent;
+    cursor: pointer; font-family: inherit; letter-spacing: 0.02em;
+  }
+
+  .divider { width: 1px; background: #18181b; align-self: stretch; }
+
+  .char-count { font-size: 11px; color: #3f3f46; text-align: right; margin-top: 6px; }
+</style>
+
+<div class="wrap">
+  <div class="page-header">
+    <p class="page-label">Battl Builders</p>
+    <h1 class="page-title">Updates</h1>
+    <p class="page-sub">What we've shipped and what's coming next.</p>
+  </div>
+
+  <div class="tabs">
+    <div class="tab">What's New</div>
+    <div class="tab">What's Next</div>
+    <div class="tab active">Give Feedback</div>
+  </div>
+
+  <div class="split">
+
+    <!-- LEFT: Tab / page form -->
+    <div>
+      <p class="modal-label" style="text-align:left; margin-bottom: 20px;">Give Feedback tab (full page)</p>
+      <div class="feedback-page">
+        <div class="feedback-page-header">
+          <h2>Tell us what you think.</h2>
+          <p>Bug, feature idea, or general thought — we read everything. Rough language welcome.</p>
+        </div>
+
+        <div class="form-field">
+          <label class="form-label">Category</label>
+          <select class="form-select">
+            <option>Bug report</option>
+            <option>Feature request</option>
+            <option>General feedback</option>
+          </select>
+        </div>
+
+        <div class="form-field">
+          <label class="form-label">Message</label>
+          <textarea class="form-textarea" placeholder="What's on your mind?"></textarea>
+          <div class="char-count">0 / 1000</div>
+        </div>
+
+        <div class="form-field">
+          <label class="form-label">Email <span style="color:#3f3f46; font-weight:400; text-transform:none; letter-spacing:0;">(optional — if you want a reply)</span></label>
+          <input class="form-input" type="email" placeholder="you@email.com" />
+          <p class="form-hint">We'll only use this to follow up on your feedback.</p>
+        </div>
+
+        <button class="btn-submit">Send Feedback →</button>
+      </div>
+    </div>
+
+    <div class="divider"></div>
+
+    <!-- RIGHT: Modal (triggered from nav/footer) -->
+    <div>
+      <div class="nav-context">
+        <span class="nav-context-label">Triggered from nav/footer →</span>
+        <button class="btn-feedback-nav">Send Feedback</button>
+      </div>
+      <p class="modal-label">Modal</p>
+      <div class="modal">
+        <div class="modal-header">
+          <span class="modal-title">Send Feedback</span>
+          <button class="modal-close">✕</button>
+        </div>
+
+        <div class="form-field">
+          <label class="form-label">Category</label>
+          <select class="form-select">
+            <option>Bug report</option>
+            <option>Feature request</option>
+            <option>General feedback</option>
+          </select>
+        </div>
+
+        <div class="form-field">
+          <label class="form-label">Message</label>
+          <textarea class="form-textarea" style="min-height:100px;" placeholder="What's on your mind?"></textarea>
+          <div class="char-count">0 / 1000</div>
+        </div>
+
+        <div class="form-field">
+          <label class="form-label">Email <span style="color:#3f3f46; font-weight:400; text-transform:none; letter-spacing:0;">(optional)</span></label>
+          <input class="form-input" type="email" placeholder="you@email.com" />
+        </div>
+
+        <button class="btn-submit" style="width:100%; justify-content:center;">Send Feedback →</button>
+      </div>
+    </div>
+
+  </div>
+</div>

.superpowers/brainstorm/20960-1774881654/roadmap-tab.html

@@ -0,0 +1,104 @@
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { background: #09090b; color: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 32px 24px; }
+  .wrap { max-width: 900px; margin: 0 auto; }
+
+  .tabs { display: flex; gap: 0; border-bottom: 1px solid #27272a; margin-bottom: 40px; }
+  .tab { padding: 10px 20px; font-size: 13px; font-weight: 500; color: #71717a; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
+  .tab.active { color: #fbbf24; border-bottom-color: #fbbf24; }
+
+  .page-header { margin-bottom: 40px; }
+  .page-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #52525b; margin-bottom: 8px; }
+  .page-title { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 6px; }
+  .page-sub { font-size: 14px; color: #52525b; }
+
+  .roadmap { display: flex; flex-direction: column; gap: 10px; }
+  .roadmap-item { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border: 1px solid #1c1c1f; border-radius: 10px; background: #0d0d0f; }
+  .dot-col { display: flex; flex-direction: column; align-items: center; gap: 0; padding-top: 5px; flex-shrink: 0; }
+  .status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
+  .status-planned .status-dot { background: #3f3f46; }
+  .status-inprogress .status-dot { background: #fbbf24; box-shadow: 0 0 10px rgba(251,191,36,0.5); }
+  .status-shipped .status-dot { background: #4ade80; }
+  .roadmap-body { flex: 1; }
+  .roadmap-item-title { font-size: 14px; font-weight: 600; color: #e4e4e7; margin-bottom: 4px; }
+  .roadmap-item-desc { font-size: 12px; color: #52525b; line-height: 1.65; }
+  .status-badge { font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 99px; letter-spacing: 0.06em; text-transform: uppercase; flex-shrink: 0; margin-top: 2px; }
+  .status-planned .status-badge { background: rgba(63,63,70,0.4); color: #52525b; border: 1px solid #27272a; }
+  .status-inprogress .status-badge { background: rgba(251,191,36,0.08); color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); }
+  .status-shipped .status-badge { background: rgba(74,222,128,0.08); color: #4ade80; border: 1px solid rgba(74,222,128,0.2); }
+
+  .group-label { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #3f3f46; margin: 28px 0 10px; }
+  .group-label:first-child { margin-top: 0; }
+
+  .roadmap-note { margin-top: 32px; padding: 16px 20px; border: 1px solid #18181b; border-radius: 8px; font-size: 12px; color: #3f3f46; line-height: 1.6; }
+  .roadmap-note a { color: #52525b; text-decoration: underline; text-underline-offset: 3px; }
+</style>
+
+<div class="wrap">
+  <div class="page-header">
+    <p class="page-label">Battl Builders</p>
+    <h1 class="page-title">Updates</h1>
+    <p class="page-sub">What we've shipped and what's coming next.</p>
+  </div>
+
+  <div class="tabs">
+    <div class="tab">What's New</div>
+    <div class="tab active">What's Next</div>
+    <div class="tab">Give Feedback</div>
+  </div>
+
+  <div class="roadmap">
+    <div class="group-label">In Progress</div>
+
+    <div class="roadmap-item status-inprogress">
+      <div class="dot-col"><span class="status-dot"></span></div>
+      <div class="roadmap-body">
+        <div class="roadmap-item-title">Compatibility engine — gas system + buffer</div>
+        <div class="roadmap-item-desc">Automatic warnings when barrel length and gas system length don't match, and when buffer weight conflicts with your stock/brace selection.</div>
+      </div>
+      <span class="status-badge">In Progress</span>
+    </div>
+
+    <div class="roadmap-item status-inprogress">
+      <div class="dot-col"><span class="status-dot"></span></div>
+      <div class="roadmap-body">
+        <div class="roadmap-item-title">Mobile builder experience</div>
+        <div class="roadmap-item-desc">Full 375px breakpoint pass on the builder, parts browser, and build summary. Lighthouse score target ≥70.</div>
+      </div>
+      <span class="status-badge">In Progress</span>
+    </div>
+
+    <div class="group-label">Planned</div>
+
+    <div class="roadmap-item status-planned">
+      <div class="dot-col"><span class="status-dot"></span></div>
+      <div class="roadmap-body">
+        <div class="roadmap-item-title">Expanded parts catalog</div>
+        <div class="roadmap-item-desc">50–75 SKUs across all 10 slots, 3–5 options per category, with live AvantLink pricing.</div>
+      </div>
+      <span class="status-badge">Planned</span>
+    </div>
+
+    <div class="roadmap-item status-planned">
+      <div class="dot-col"><span class="status-dot"></span></div>
+      <div class="roadmap-body">
+        <div class="roadmap-item-title">Build guides — first wave</div>
+        <div class="roadmap-item-desc">Three long-form guides targeting "AR-15 build planner" and related keywords. Written for the ICP: experienced shooter, not an expert builder.</div>
+      </div>
+      <span class="status-badge">Planned</span>
+    </div>
+
+    <div class="roadmap-item status-planned">
+      <div class="dot-col"><span class="status-dot"></span></div>
+      <div class="roadmap-body">
+        <div class="roadmap-item-title">Caliber cross-compatibility checks</div>
+        <div class="roadmap-item-desc">Flag mismatches between upper and lower when mixing calibers (e.g., .300 Blackout upper on a 5.56 lower).</div>
+      </div>
+      <span class="status-badge">Planned</span>
+    </div>
+
+    <div class="roadmap-note">
+      Have something you want to see? <a href="#">Give us feedback →</a>
+    </div>
+  </div>
+</div>

.superpowers/brainstorm/20960-1774881654/roadmap-votes.html

@@ -0,0 +1,150 @@
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { background: #09090b; color: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 32px 24px; }
+  .wrap { max-width: 900px; margin: 0 auto; }
+
+  .tabs { display: flex; gap: 0; border-bottom: 1px solid #27272a; margin-bottom: 40px; }
+  .tab { padding: 10px 20px; font-size: 13px; font-weight: 500; color: #71717a; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
+  .tab.active { color: #fbbf24; border-bottom-color: #fbbf24; }
+
+  .page-header { margin-bottom: 40px; }
+  .page-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #52525b; margin-bottom: 8px; }
+  .page-title { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 6px; }
+  .page-sub { font-size: 14px; color: #52525b; }
+
+  .roadmap { display: flex; flex-direction: column; gap: 10px; }
+
+  .roadmap-item {
+    display: grid;
+    grid-template-columns: 52px 1fr auto;
+    gap: 0 16px;
+    align-items: center;
+    padding: 20px;
+    border: 1px solid #1c1c1f;
+    border-radius: 10px;
+    background: #0d0d0f;
+  }
+
+  /* Upvote button */
+  .upvote {
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    gap: 3px; width: 44px; height: 52px;
+    border: 1px solid #27272a; border-radius: 8px; background: transparent;
+    cursor: pointer; color: #52525b; transition: all 0.15s;
+    font-size: 11px; font-weight: 700; font-family: inherit;
+  }
+  .upvote:hover { border-color: #fbbf24; color: #fbbf24; background: rgba(251,191,36,0.06); }
+  .upvote.voted { border-color: rgba(251,191,36,0.4); color: #fbbf24; background: rgba(251,191,36,0.08); }
+  .upvote svg { width: 14px; height: 14px; }
+
+  .roadmap-body { }
+  .roadmap-item-title { font-size: 14px; font-weight: 600; color: #e4e4e7; margin-bottom: 4px; }
+  .roadmap-item-desc { font-size: 12px; color: #52525b; line-height: 1.65; }
+
+  .right-col { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
+  .status-badge { font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 99px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
+  .badge-planned { background: rgba(63,63,70,0.4); color: #52525b; border: 1px solid #27272a; }
+  .badge-inprogress { background: rgba(251,191,36,0.08); color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); }
+
+  .group-label { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #3f3f46; margin: 28px 0 10px; }
+  .group-label:first-child { margin-top: 0; }
+
+  .roadmap-note { margin-top: 32px; padding: 16px 20px; border: 1px solid #18181b; border-radius: 8px; font-size: 12px; color: #3f3f46; line-height: 1.6; }
+  .roadmap-note a { color: #52525b; text-decoration: underline; text-underline-offset: 3px; }
+
+  .auth-hint { font-size: 10px; color: #3f3f46; margin-top: 4px; }
+</style>
+
+<div class="wrap">
+  <div class="page-header">
+    <p class="page-label">Battl Builders</p>
+    <h1 class="page-title">Updates</h1>
+    <p class="page-sub">What we've shipped and what's coming next.</p>
+  </div>
+
+  <div class="tabs">
+    <div class="tab">What's New</div>
+    <div class="tab active">What's Next</div>
+    <div class="tab">Give Feedback</div>
+  </div>
+
+  <div class="roadmap">
+    <div class="group-label">In Progress</div>
+
+    <div class="roadmap-item">
+      <button class="upvote voted" title="Remove vote">
+        <svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 2l5 7H3z"/></svg>
+        24
+      </button>
+      <div class="roadmap-body">
+        <div class="roadmap-item-title">Compatibility engine — gas system + buffer</div>
+        <div class="roadmap-item-desc">Automatic warnings when barrel length and gas system length don't match, and when buffer weight conflicts with your stock or brace selection.</div>
+      </div>
+      <div class="right-col">
+        <span class="status-badge badge-inprogress">In Progress</span>
+      </div>
+    </div>
+
+    <div class="roadmap-item">
+      <button class="upvote" title="Upvote">
+        <svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 2l5 7H3z"/></svg>
+        11
+      </button>
+      <div class="roadmap-body">
+        <div class="roadmap-item-title">Mobile builder experience</div>
+        <div class="roadmap-item-desc">Full 375px breakpoint pass on the builder, parts browser, and build summary. Lighthouse score target ≥70.</div>
+      </div>
+      <div class="right-col">
+        <span class="status-badge badge-inprogress">In Progress</span>
+      </div>
+    </div>
+
+    <div class="group-label">Planned</div>
+
+    <div class="roadmap-item">
+      <button class="upvote" title="Upvote">
+        <svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 2l5 7H3z"/></svg>
+        38
+      </button>
+      <div class="roadmap-body">
+        <div class="roadmap-item-title">Expanded parts catalog</div>
+        <div class="roadmap-item-desc">50–75 SKUs across all 10 slots, 3–5 options per category, with live AvantLink pricing.</div>
+      </div>
+      <div class="right-col">
+        <span class="status-badge badge-planned">Planned</span>
+      </div>
+    </div>
+
+    <div class="roadmap-item">
+      <button class="upvote" title="Upvote">
+        <svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 2l5 7H3z"/></svg>
+        17
+      </button>
+      <div class="roadmap-body">
+        <div class="roadmap-item-title">Caliber cross-compatibility checks</div>
+        <div class="roadmap-item-desc">Flag mismatches between upper and lower when mixing calibers (e.g., .300 Blackout upper on a 5.56 lower).</div>
+      </div>
+      <div class="right-col">
+        <span class="status-badge badge-planned">Planned</span>
+      </div>
+    </div>
+
+    <div class="roadmap-item">
+      <button class="upvote" title="Upvote">
+        <svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 2l5 7H3z"/></svg>
+        9
+      </button>
+      <div class="roadmap-body">
+        <div class="roadmap-item-title">Build guides — first wave</div>
+        <div class="roadmap-item-desc">Three long-form guides targeting "AR-15 build planner" and related keywords. Written for the ICP: experienced shooter, not an expert builder.</div>
+      </div>
+      <div class="right-col">
+        <span class="status-badge badge-planned">Planned</span>
+      </div>
+    </div>
+
+    <div class="roadmap-note">
+      Don't see what you need? <a href="#">Give us feedback →</a>
+    </div>
+  </div>
+</div>

.superpowers/brainstorm/20960-1774881654/waiting-2.html

@@ -0,0 +1,3 @@
+<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
+  <p class="subtitle">Continuing in terminal...</p>
+</div>

.superpowers/brainstorm/20960-1774881654/waiting-3.html

@@ -0,0 +1,3 @@
+<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
+  <p class="subtitle">Continuing in terminal...</p>
+</div>

.superpowers/brainstorm/20960-1774881654/waiting.html

@@ -0,0 +1,3 @@
+<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
+  <p class="subtitle">Continuing in terminal...</p>
+</div>

.superpowers/brainstorm/3703-1774862900/.server-stopped

@@ -0,0 +1 @@
+{"reason":"idle timeout","timestamp":1774866020266}

.superpowers/brainstorm/3703-1774862900/.server.log

@@ -0,0 +1,10 @@
+{"type":"server-started","port":60692,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:60692","screen_dir":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/3703-1774862900"}
+{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/3703-1774862900/hero-layout.html"}
+{"source":"user-event","type":"click","text":"AR-15 Build Planner\n        Build smarter rifles.No spreadsheets.\n        Pick parts by role, catch compatibility issues, compare live prices — all in one place.\n        \n          START A BUILD →\n        \n        \n          ▶ Builder preview video\n        \n      \n    \n    \n      A — Centered / Full-width\n      Headline + tagline centered, single dominant CTA button, product video below. Clean, magazine-style. Works great on mobile.","choice":"centered","id":null,"timestamp":1774863085356}
+{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/3703-1774862900/page-sections.html"}
+{"source":"user-event","type":"click","text":"HERO\n          \"Stop Guessing. Start Building.\" + subhead + CTA\n        \n        ↓\n        \n          HOW IT WORKS\n          3 steps with icons\n        \n        ↓\n        \n          BUILDER PREVIEW VIDEO\n          Tool in action\n        \n        ↓\n        \n          FEATURE CARDS\n          6 capabilities\n        \n        ↓\n        \n          SEO COPY BLOCK\n          Short paragraph: \"What is an AR-15 builder tool?\" — targets search\n        \n        ↓\n        \n          FINAL CTA\n          Second \"Start a Build\" button\n        \n      \n    \n    \n      C — SEO-Optimized (6 sections)\n      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.","choice":"seo","id":null,"timestamp":1774863262165}
+{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/3703-1774862900/waiting-1.html"}
+{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/3703-1774862900/full-design-v1.html"}
+{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/3703-1774862900/full-design-v2.html"}
+{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/3703-1774862900/full-design-v3.html"}
+{"type":"server-stopped","reason":"idle timeout"}

.superpowers/brainstorm/3703-1774862900/.server.pid

@@ -0,0 +1 @@
+3712

.superpowers/brainstorm/3703-1774862900/full-design-v1.html

@@ -0,0 +1,335 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Battl Builders — Homepage Redesign Mockup</title>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { background: #09090b; color: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
+
+  /* ── GRID BACKGROUND ── */
+  .bg-grid {
+    position: fixed; inset: 0; pointer-events: none; z-index: 0;
+    background-image:
+      linear-gradient(rgba(251,191,36,0.07) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(251,191,36,0.07) 1px, transparent 1px);
+    background-size: 60px 60px;
+  }
+
+  .wrap { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; padding: 0 24px; }
+
+  /* ── NAV ── */
+  nav {
+    position: relative; z-index: 10;
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 20px 24px; max-width: 960px; margin: 0 auto;
+  }
+  .logo { height: 32px; display: flex; align-items: center; gap: 8px; }
+  .logo-text { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
+  .logo-text span { color: #fbbf24; }
+  .nav-links { display: flex; gap: 8px; }
+  .btn-ghost {
+    padding: 7px 14px; border-radius: 6px; font-size: 12px; font-weight: 500;
+    border: 1px solid #27272a; color: #d4d4d8; background: transparent;
+    cursor: pointer; text-decoration: none;
+  }
+  .btn-ghost:hover { background: #18181b; color: #fff; }
+  .btn-amber {
+    padding: 7px 16px; border-radius: 6px; font-size: 12px; font-weight: 700;
+    background: #fbbf24; color: #000; border: none; cursor: pointer;
+    text-decoration: none; letter-spacing: 0.02em;
+  }
+  .btn-amber:hover { background: #f59e0b; }
+
+  /* ── HERO ── */
+  .hero {
+    text-align: center; padding: 80px 24px 72px;
+    max-width: 760px; margin: 0 auto;
+  }
+  .hero-badge {
+    display: inline-flex; align-items: center; gap: 6px;
+    border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.4);
+    border-radius: 99px; padding: 4px 12px;
+    font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.6);
+    margin-bottom: 28px;
+  }
+  .hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #fbbf24; }
+  .hero h1 {
+    font-size: clamp(36px, 6vw, 60px); font-weight: 700; line-height: 1.1;
+    letter-spacing: -0.03em; color: #fff; margin-bottom: 8px;
+  }
+  .hero h1 .amber { color: #fbbf24; display: block; }
+  .hero-sub {
+    font-size: 16px; color: #a1a1aa; line-height: 1.6;
+    max-width: 540px; margin: 20px auto 0;
+  }
+  .hero-cta-wrap { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
+  .btn-cta {
+    display: inline-flex; align-items: center; gap: 8px;
+    background: #fbbf24; color: #000; font-size: 15px; font-weight: 800;
+    padding: 14px 36px; border-radius: 8px; border: none; cursor: pointer;
+    letter-spacing: 0.02em; text-decoration: none;
+    box-shadow: 0 0 32px rgba(251,191,36,0.25);
+  }
+  .btn-cta:hover { background: #f59e0b; }
+  .hero-micro { font-size: 11px; color: #52525b; }
+
+  /* ── HOW IT WORKS ── */
+  .how { padding: 64px 24px; }
+  .section-label {
+    text-align: center; font-size: 10px; font-weight: 600;
+    letter-spacing: 0.25em; text-transform: uppercase; color: #fbbf24; margin-bottom: 14px;
+    opacity: 0.85;
+  }
+  .how h2 {
+    text-align: center; font-size: 28px; font-weight: 700;
+    letter-spacing: -0.02em; color: #fff; margin-bottom: 48px;
+  }
+  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 800px; margin: 0 auto; }
+  .step {
+    text-align: center; padding: 32px 20px;
+    background: rgba(255,255,255,0.03); border: 1px solid #1c1c1f; border-radius: 12px;
+  }
+  .step-num {
+    width: 36px; height: 36px; border-radius: 50%;
+    background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3);
+    color: #fbbf24; font-size: 14px; font-weight: 700;
+    display: flex; align-items: center; justify-content: center;
+    margin: 0 auto 16px;
+  }
+  .step h3 { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 8px; }
+  .step p { font-size: 12px; color: #71717a; line-height: 1.5; }
+  .step-connector { display: none; }
+
+  /* ── VIDEO ── */
+  .video-section { padding: 0 24px 64px; }
+  .video-wrap {
+    max-width: 900px; margin: 0 auto;
+    border-radius: 16px; overflow: hidden;
+    border: 1px solid rgba(255,255,255,0.08);
+    background: #000;
+    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
+  }
+  .video-placeholder {
+    aspect-ratio: 16/9; background: #0f0f0f;
+    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
+  }
+  .play-btn {
+    width: 52px; height: 52px; border-radius: 50%;
+    background: rgba(251,191,36,0.15); border: 1px solid rgba(251,191,36,0.35);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 18px;
+  }
+  .video-placeholder p { font-size: 12px; color: #52525b; }
+
+  /* ── FEATURES ── */
+  .features { padding: 64px 24px; }
+  .features h2 {
+    text-align: center; font-size: 28px; font-weight: 700;
+    letter-spacing: -0.02em; color: #fff; margin-bottom: 8px;
+  }
+  .features-sub { text-align: center; font-size: 14px; color: #71717a; margin-bottom: 44px; }
+  .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; margin: 0 auto; }
+  .feature-card {
+    padding: 22px; background: rgba(255,255,255,0.025);
+    border: 1px solid #1c1c1f; border-radius: 12px;
+  }
+  .feature-icon { font-size: 20px; margin-bottom: 12px; }
+  .feature-card h3 { font-size: 13px; font-weight: 600; color: #e4e4e7; margin-bottom: 6px; }
+  .feature-card p { font-size: 11px; color: #71717a; line-height: 1.5; }
+
+  /* ── SEO BLOCK ── */
+  .seo-block {
+    padding: 64px 24px;
+    border-top: 1px solid #1c1c1f;
+  }
+  .seo-inner {
+    max-width: 680px; margin: 0 auto;
+  }
+  .seo-inner h2 { font-size: 20px; font-weight: 700; color: #e4e4e7; margin-bottom: 14px; }
+  .seo-inner p { font-size: 13px; color: #71717a; line-height: 1.7; margin-bottom: 12px; }
+  .seo-inner strong { color: #a1a1aa; }
+
+  /* ── FINAL CTA ── */
+  .final-cta {
+    padding: 80px 24px;
+    text-align: center;
+    border-top: 1px solid #1c1c1f;
+  }
+  .final-cta h2 { font-size: 32px; font-weight: 700; color: #fff; margin-bottom: 12px; letter-spacing: -0.02em; }
+  .final-cta p { font-size: 14px; color: #71717a; margin-bottom: 32px; }
+
+  /* ── FOOTER ── */
+  footer {
+    border-top: 1px solid #18181b; padding: 20px 24px;
+    display: flex; justify-content: space-between; align-items: center;
+    font-size: 11px; color: #3f3f46; max-width: 960px; margin: 0 auto;
+  }
+
+  /* ── ANNOTATION ── */
+  .annotation {
+    position: fixed; bottom: 16px; right: 16px;
+    background: #18181b; border: 1px solid #27272a; border-radius: 8px;
+    padding: 12px 16px; font-size: 11px; color: #a1a1aa; max-width: 260px;
+    z-index: 100;
+  }
+  .annotation strong { color: #fbbf24; display: block; margin-bottom: 4px; }
+
+  /* Selection overlay */
+  #selection-indicator {
+    display: none;
+  }
+</style>
+</head>
+<body>
+
+<div class="bg-grid"></div>
+
+<!-- NAV -->
+<nav>
+  <div class="logo">
+    <div class="logo-text">BATTL<span>.</span>BUILDERS</div>
+  </div>
+  <div class="nav-links">
+    <a href="#" class="btn-ghost">Sign In</a>
+    <a href="#" class="btn-amber">Start a Build</a>
+  </div>
+</nav>
+
+<!-- HERO -->
+<section class="hero">
+  <div class="hero-badge">
+    <span class="hero-badge-dot"></span>
+    AR-15 Build Planner
+    <span style="color:rgba(255,255,255,0.3)">•</span>
+    <span>Free to use</span>
+  </div>
+  <h1>
+    Stop Guessing.
+    <span class="amber">Start Building.</span>
+  </h1>
+  <p class="hero-sub">
+    Pick parts by role, catch compatibility issues before you order, and compare live retailer prices — all without a spreadsheet.
+  </p>
+  <div class="hero-cta-wrap">
+    <a href="#" class="btn-cta">
+      Start a Build &nbsp;→
+    </a>
+    <span class="hero-micro">No account required &nbsp;·&nbsp; Free to use</span>
+  </div>
+</section>
+
+<!-- HOW IT WORKS -->
+<section class="how wrap">
+  <div class="section-label">How it works</div>
+  <h2>Three steps from idea to order</h2>
+  <div class="steps">
+    <div class="step">
+      <div class="step-num">1</div>
+      <h3>Pick your parts</h3>
+      <p>Choose from real parts organized by role — barrel, lower, upper, and more. No part numbers required.</p>
+    </div>
+    <div class="step">
+      <div class="step-num">2</div>
+      <h3>Check compatibility</h3>
+      <p>Catch mismatches before you order. Gas system, buffer weight, caliber — flagged automatically.</p>
+    </div>
+    <div class="step">
+      <div class="step-num">3</div>
+      <h3>Compare prices &amp; buy</h3>
+      <p>See live prices from real retailers. Click through to buy — we never touch your order.</p>
+    </div>
+  </div>
+</section>
+
+<!-- VIDEO -->
+<section class="video-section">
+  <div class="video-wrap">
+    <div class="video-placeholder">
+      <div class="play-btn">▶</div>
+      <p>Builder preview — looping screen recording</p>
+    </div>
+  </div>
+</section>
+
+<!-- FEATURES -->
+<section class="features wrap">
+  <div class="section-label">What's included</div>
+  <h2>Everything you need to plan a build</h2>
+  <p class="features-sub">No fluff. No upsells. Just the tools to plan your AR-15 right.</p>
+  <div class="feature-grid">
+    <div class="feature-card">
+      <div class="feature-icon">🔧</div>
+      <h3>Guided part roles</h3>
+      <p>Pick parts by role so you're never guessing what fits where.</p>
+    </div>
+    <div class="feature-card">
+      <div class="feature-icon">🛡️</div>
+      <h3>Compatibility warnings</h3>
+      <p>Catch obvious mismatches — gas system, buffer, caliber — before you buy.</p>
+    </div>
+    <div class="feature-card">
+      <div class="feature-icon">💰</div>
+      <h3>Live pricing totals</h3>
+      <p>Running total as you build, with real retailer listings updated regularly.</p>
+    </div>
+    <div class="feature-card">
+      <div class="feature-icon">🔖</div>
+      <h3>Save your builds</h3>
+      <p>Create a free account to save builds and pick up where you left off.</p>
+    </div>
+    <div class="feature-card">
+      <div class="feature-icon">🔗</div>
+      <h3>Shareable build links</h3>
+      <p>Share a build URL with your buddy or your gunsmith. No login needed to view.</p>
+    </div>
+    <div class="feature-card">
+      <div class="feature-icon">🚫</div>
+      <h3>No account to browse</h3>
+      <p>Explore parts and build freely. Create an account only when you're ready to save.</p>
+    </div>
+  </div>
+</section>
+
+<!-- SEO COPY BLOCK -->
+<section class="seo-block">
+  <div class="seo-inner">
+    <h2>What is Battl Builders?</h2>
+    <p>
+      Battl Builders is a free <strong>AR-15 build planner</strong> that helps you select compatible parts, compare prices across retailers, and plan your build from start to finish — without juggling spreadsheets or browser tabs.
+    </p>
+    <p>
+      Unlike a generic parts list, Battl Builders understands <strong>AR-15 compatibility rules</strong>: gas system length vs. barrel length, buffer weight vs. stock type, caliber consistency across upper and lower. You get warnings when something doesn't match before you spend money on the wrong part.
+    </p>
+    <p>
+      Whether you're planning your first build or your tenth, Battl Builders gives you a structured, guided way to research parts and <strong>buy with confidence</strong>.
+    </p>
+  </div>
+</section>
+
+<!-- FINAL CTA -->
+<section class="final-cta">
+  <h2>Ready to build?</h2>
+  <p>It's free, no account required, and takes about 5 minutes to start.</p>
+  <a href="#" class="btn-cta">
+    Start a Build &nbsp;→
+  </a>
+</section>
+
+<!-- FOOTER -->
+<footer>
+  <span>© 2026 BATTL BUILDERS™</span>
+  <span>Free AR-15 build planner</span>
+</footer>
+
+<div class="annotation">
+  <strong>📐 Design Mockup</strong>
+  Full homepage redesign preview. Scroll to see all 6 sections. Reply in terminal with feedback.
+</div>
+
+<script>
+// No selection needed for full-page mockup — just viewing
+</script>
+</body>
+</html>

.superpowers/brainstorm/3703-1774862900/full-design-v2.html

@@ -0,0 +1,312 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Battl Builders — Homepage Redesign Mockup v2</title>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { background: #09090b; color: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
+
+  .bg-grid {
+    position: fixed; inset: 0; pointer-events: none; z-index: 0;
+    background-image:
+      linear-gradient(rgba(251,191,36,0.07) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(251,191,36,0.07) 1px, transparent 1px);
+    background-size: 60px 60px;
+  }
+
+  .wrap { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; padding: 0 24px; }
+
+  /* ── NAV ── */
+  nav {
+    position: relative; z-index: 10;
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 20px 24px; max-width: 960px; margin: 0 auto;
+  }
+  .logo-text { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
+  .logo-text span { color: #fbbf24; }
+  .nav-links { display: flex; gap: 8px; }
+  .btn-ghost {
+    padding: 7px 14px; border-radius: 6px; font-size: 12px; font-weight: 500;
+    border: 1px solid #27272a; color: #d4d4d8; background: transparent;
+    cursor: pointer; text-decoration: none;
+  }
+  .btn-ghost:hover { background: #18181b; color: #fff; }
+  .btn-amber {
+    padding: 7px 16px; border-radius: 6px; font-size: 12px; font-weight: 700;
+    background: #fbbf24; color: #000; border: none; cursor: pointer;
+    text-decoration: none; letter-spacing: 0.02em;
+  }
+
+  /* ── HERO ── */
+  .hero {
+    text-align: center; padding: 80px 24px 72px;
+    max-width: 760px; margin: 0 auto; position: relative; z-index: 1;
+  }
+  .hero-badge {
+    display: inline-flex; align-items: center; gap: 6px;
+    border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.4);
+    border-radius: 99px; padding: 5px 14px;
+    font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55);
+    margin-bottom: 28px;
+  }
+  .hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #fbbf24; flex-shrink: 0; }
+  .hero h1 {
+    font-size: clamp(38px, 6.5vw, 64px); font-weight: 700; line-height: 1.05;
+    letter-spacing: -0.035em; color: #fff; margin-bottom: 8px;
+  }
+  .hero h1 .amber { color: #fbbf24; display: block; }
+  .hero-sub {
+    font-size: 17px; color: #a1a1aa; line-height: 1.65;
+    max-width: 520px; margin: 22px auto 0;
+  }
+  .hero-cta-wrap { margin-top: 38px; display: flex; flex-direction: column; align-items: center; gap: 11px; }
+  .btn-cta {
+    display: inline-flex; align-items: center; gap: 8px;
+    background: #fbbf24; color: #000; font-size: 15px; font-weight: 800;
+    padding: 15px 38px; border-radius: 8px; border: none; cursor: pointer;
+    letter-spacing: 0.03em; text-decoration: none;
+    box-shadow: 0 0 40px rgba(251,191,36,0.2);
+  }
+  .btn-cta:hover { background: #f59e0b; }
+  .hero-micro { font-size: 11px; color: #52525b; letter-spacing: 0.05em; }
+
+  /* ── HOW IT WORKS ── */
+  .how { padding: 72px 24px; position: relative; z-index: 1; }
+  .section-label {
+    text-align: center; font-size: 10px; font-weight: 700;
+    letter-spacing: 0.25em; text-transform: uppercase; color: #fbbf24;
+    margin-bottom: 12px; opacity: 0.85;
+  }
+  .how h2 {
+    text-align: center; font-size: 30px; font-weight: 700;
+    letter-spacing: -0.025em; color: #fff; margin-bottom: 6px;
+  }
+  .how-sub { text-align: center; font-size: 14px; color: #71717a; margin-bottom: 48px; }
+  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; max-width: 840px; margin: 0 auto; background: #18181b; border-radius: 12px; overflow: hidden; border: 1px solid #1c1c1f; }
+  .step { padding: 32px 24px; background: #0d0d0f; }
+  .step-num {
+    font-size: 11px; font-weight: 700; letter-spacing: 0.15em;
+    color: #fbbf24; text-transform: uppercase; margin-bottom: 14px;
+    opacity: 0.8;
+  }
+  .step h3 { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 10px; letter-spacing: -0.01em; }
+  .step p { font-size: 13px; color: #71717a; line-height: 1.6; }
+
+  /* ── VIDEO ── */
+  .video-section { padding: 0 24px 72px; position: relative; z-index: 1; }
+  .video-wrap {
+    max-width: 900px; margin: 0 auto;
+    border-radius: 14px; overflow: hidden;
+    border: 1px solid rgba(255,255,255,0.07);
+    background: #000;
+    box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(251,191,36,0.05);
+  }
+  .video-placeholder {
+    aspect-ratio: 16/9; background: #0a0a0a;
+    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
+  }
+  .play-btn {
+    width: 56px; height: 56px; border-radius: 50%;
+    background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3);
+    display: flex; align-items: center; justify-content: center; font-size: 20px;
+  }
+  .video-placeholder p { font-size: 12px; color: #3f3f46; }
+
+  /* ── FEATURES ── */
+  .features { padding: 72px 24px; position: relative; z-index: 1; }
+  .features h2 {
+    text-align: center; font-size: 30px; font-weight: 700;
+    letter-spacing: -0.025em; color: #fff; margin-bottom: 8px;
+  }
+  .features-sub { text-align: center; font-size: 13px; color: #52525b; margin-bottom: 44px; letter-spacing: 0.02em; }
+  .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; max-width: 900px; margin: 0 auto; background: #18181b; border-radius: 12px; overflow: hidden; border: 1px solid #1c1c1f; }
+  .feature-card { padding: 24px; background: #0d0d0f; }
+  .feature-icon { font-size: 18px; margin-bottom: 14px; display: block; }
+  .feature-card h3 { font-size: 13px; font-weight: 700; color: #e4e4e7; margin-bottom: 7px; letter-spacing: -0.01em; }
+  .feature-card p { font-size: 12px; color: #52525b; line-height: 1.6; }
+
+  /* ── SEO BLOCK ── */
+  .seo-block {
+    padding: 72px 24px;
+    border-top: 1px solid #18181b;
+    position: relative; z-index: 1;
+  }
+  .seo-inner { max-width: 680px; margin: 0 auto; }
+  .seo-inner h2 { font-size: 22px; font-weight: 700; color: #d4d4d8; margin-bottom: 18px; letter-spacing: -0.02em; }
+  .seo-inner p { font-size: 14px; color: #71717a; line-height: 1.75; margin-bottom: 14px; }
+  .seo-inner strong { color: #a1a1aa; font-weight: 600; }
+
+  /* ── FINAL CTA ── */
+  .final-cta {
+    padding: 96px 24px;
+    text-align: center;
+    border-top: 1px solid #18181b;
+    position: relative; z-index: 1;
+  }
+  .final-cta h2 { font-size: 36px; font-weight: 700; color: #fff; margin-bottom: 12px; letter-spacing: -0.03em; }
+  .final-cta p { font-size: 14px; color: #52525b; margin-bottom: 32px; }
+
+  /* ── FOOTER ── */
+  footer {
+    border-top: 1px solid #18181b; padding: 20px 24px;
+    display: flex; justify-content: space-between; align-items: center;
+    font-size: 11px; color: #3f3f46; max-width: 960px; margin: 0 auto;
+    position: relative; z-index: 1;
+  }
+
+  /* annotation */
+  .annotation {
+    position: fixed; bottom: 16px; right: 16px;
+    background: #18181b; border: 1px solid #27272a; border-radius: 8px;
+    padding: 12px 16px; font-size: 11px; color: #a1a1aa; max-width: 240px;
+    z-index: 200; line-height: 1.5;
+  }
+  .annotation strong { color: #fbbf24; display: block; margin-bottom: 4px; }
+
+  #selection-indicator { display: none; }
+</style>
+</head>
+<body>
+
+<div class="bg-grid"></div>
+
+<!-- NAV -->
+<nav>
+  <div class="logo-text">BATTL<span>.</span>BUILDERS</div>
+  <div class="nav-links">
+    <a href="#" class="btn-ghost">Sign In</a>
+    <a href="#" class="btn-amber">Start a Build</a>
+  </div>
+</nav>
+
+<!-- HERO -->
+<section class="hero">
+  <div class="hero-badge">
+    <span class="hero-badge-dot"></span>
+    AR-15 Builds &nbsp;·&nbsp; 100% Free
+  </div>
+  <h1>
+    Stop Guessing.
+    <span class="amber">Start Building.</span>
+  </h1>
+  <p class="hero-sub">
+    Choose components by role. Catch incompatibilities before they cost you.
+    Compare prices across real retailers — no spreadsheets, no guesswork.
+  </p>
+  <div class="hero-cta-wrap">
+    <a href="#" class="btn-cta">Start a Build &nbsp;→</a>
+    <span class="hero-micro">100% Free &nbsp;·&nbsp; No account required</span>
+  </div>
+</section>
+
+<!-- HOW IT WORKS -->
+<section class="how wrap">
+  <div class="section-label">The process</div>
+  <h2>Three moves. One solid build.</h2>
+  <p class="how-sub">No prior experience required. No part numbers to memorize.</p>
+  <div class="steps">
+    <div class="step">
+      <div class="step-num">Step 01</div>
+      <h3>Select your components</h3>
+      <p>Real parts, organized by role — barrel, gas system, upper, lower, and more. Pick what fits your build without needing to know SKUs.</p>
+    </div>
+    <div class="step">
+      <div class="step-num">Step 02</div>
+      <h3>Flag the conflicts</h3>
+      <p>Gas length. Buffer weight. Caliber stack. Battl surfaces the clashes before you spend money on the wrong part.</p>
+    </div>
+    <div class="step">
+      <div class="step-num">Step 03</div>
+      <h3>Price it. Pull the trigger.</h3>
+      <p>Live prices from real retailers, side by side. Click through to buy. We never touch your order.</p>
+    </div>
+  </div>
+</section>
+
+<!-- VIDEO -->
+<section class="video-section">
+  <div class="video-wrap">
+    <div class="video-placeholder">
+      <div class="play-btn">▶</div>
+      <p>Builder preview — looping screen recording</p>
+    </div>
+  </div>
+</section>
+
+<!-- FEATURES -->
+<section class="features wrap">
+  <div class="section-label">What you get</div>
+  <h2>Built for builders who do their homework.</h2>
+  <p class="features-sub">NO SUBSCRIPTIONS &nbsp;·&nbsp; NO SPONSORED RANKINGS &nbsp;·&nbsp; NO BULLSHIT</p>
+  <div class="feature-grid">
+    <div class="feature-card">
+      <span class="feature-icon">🔧</span>
+      <h3>Build by role, not part number</h3>
+      <p>Parts organized by function. Know what you need, not what SKU to search for.</p>
+    </div>
+    <div class="feature-card">
+      <span class="feature-icon">⚠️</span>
+      <h3>Conflicts caught early</h3>
+      <p>Gas system, buffer weight, caliber — flagged before checkout, not after the box arrives.</p>
+    </div>
+    <div class="feature-card">
+      <span class="feature-icon">💰</span>
+      <h3>Real prices. Real retailers.</h3>
+      <p>Running total with live prices. No estimated MSRP. What it actually costs, today.</p>
+    </div>
+    <div class="feature-card">
+      <span class="feature-icon">🔖</span>
+      <h3>Save your work</h3>
+      <p>Free account. Save builds, pick up where you left off, run multiple configs in parallel.</p>
+    </div>
+    <div class="feature-card">
+      <span class="feature-icon">🔗</span>
+      <h3>Share the build</h3>
+      <p>One link. Your buddy sees the full parts list — no login, no friction, no excuses.</p>
+    </div>
+    <div class="feature-card">
+      <span class="feature-icon">🚫</span>
+      <h3>No gates. No friction.</h3>
+      <p>Browse and build freely. Create an account only when you're ready to save.</p>
+    </div>
+  </div>
+</section>
+
+<!-- SEO COPY BLOCK -->
+<section class="seo-block">
+  <div class="seo-inner">
+    <h2>What is Battl Builders?</h2>
+    <p>
+      Battl Builders is a free <strong>AR-15 build planner</strong> — the tool you've been doing in spreadsheets, rebuilt for how builders actually work. Select parts by role, validate compatibility as you go, and price your build across multiple retailers without opening a new tab.
+    </p>
+    <p>
+      Most <strong>AR-15 compatibility mistakes</strong> happen at the parts list stage: wrong gas system length for the barrel, buffer weight that fights your stock, caliber mismatches between upper and lower. Battl flags those conflicts automatically, so you catch them before they cost you a return label.
+    </p>
+    <p>
+      Whether you're planning your first rifle or spec'ing a dedicated precision upper, Battl Builders gives you a structured, guided way to research parts and <strong>buy with confidence</strong>.
+    </p>
+  </div>
+</section>
+
+<!-- FINAL CTA -->
+<section class="final-cta">
+  <h2>Your build starts here.</h2>
+  <p>Free. No account required. Takes five minutes to get rolling.</p>
+  <a href="#" class="btn-cta">Start a Build &nbsp;→</a>
+</section>
+
+<!-- FOOTER -->
+<footer>
+  <span>© 2026 BATTL BUILDERS™</span>
+  <span>Free AR-15 build planner</span>
+</footer>
+
+<div class="annotation">
+  <strong>v2 — Copy Rewrite</strong>
+  Field ethos tone throughout. Scroll all sections and share feedback in terminal.
+</div>
+
+</body>
+</html>

.superpowers/brainstorm/3703-1774862900/full-design-v3.html

@@ -0,0 +1,321 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Battl Builders — Homepage Redesign Mockup v3</title>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { background: #09090b; color: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
+
+  .bg-grid {
+    position: fixed; inset: 0; pointer-events: none; z-index: 0;
+    background-image:
+      linear-gradient(rgba(251,191,36,0.07) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(251,191,36,0.07) 1px, transparent 1px);
+    background-size: 60px 60px;
+  }
+
+  .wrap { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; padding: 0 24px; }
+
+  nav {
+    position: relative; z-index: 10;
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 20px 24px; max-width: 960px; margin: 0 auto;
+  }
+  .logo-text { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
+  .logo-text span { color: #fbbf24; }
+  .nav-links { display: flex; gap: 8px; }
+  .btn-ghost {
+    padding: 7px 14px; border-radius: 6px; font-size: 12px; font-weight: 500;
+    border: 1px solid #27272a; color: #d4d4d8; background: transparent;
+    cursor: pointer; text-decoration: none;
+  }
+  .btn-amber {
+    padding: 7px 16px; border-radius: 6px; font-size: 12px; font-weight: 700;
+    background: #fbbf24; color: #000; border: none; cursor: pointer;
+    text-decoration: none; letter-spacing: 0.02em;
+  }
+
+  /* ── HERO ── */
+  .hero {
+    text-align: center; padding: 80px 24px 72px;
+    max-width: 760px; margin: 0 auto; position: relative; z-index: 1;
+  }
+  .hero-badge {
+    display: inline-flex; align-items: center; gap: 6px;
+    border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.4);
+    border-radius: 99px; padding: 5px 14px;
+    font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55);
+    margin-bottom: 28px;
+  }
+  .hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #fbbf24; flex-shrink: 0; }
+  .hero h1 {
+    font-size: clamp(38px, 6.5vw, 64px); font-weight: 700; line-height: 1.05;
+    letter-spacing: -0.035em; color: #fff;
+  }
+  .hero h1 .amber { color: #fbbf24; display: block; }
+  .hero-sub {
+    font-size: 17px; color: #a1a1aa; line-height: 1.65;
+    max-width: 540px; margin: 24px auto 0;
+  }
+  .hero-cta-wrap { margin-top: 38px; display: flex; flex-direction: column; align-items: center; gap: 11px; }
+  .btn-cta {
+    display: inline-flex; align-items: center; gap: 8px;
+    background: #fbbf24; color: #000; font-size: 15px; font-weight: 800;
+    padding: 15px 38px; border-radius: 8px; border: none; cursor: pointer;
+    letter-spacing: 0.03em; text-decoration: none;
+    box-shadow: 0 0 40px rgba(251,191,36,0.2);
+  }
+  .hero-micro { font-size: 11px; color: #52525b; letter-spacing: 0.05em; }
+
+  /* ── HOW IT WORKS ── */
+  .how { padding: 72px 24px; position: relative; z-index: 1; }
+  .section-label {
+    text-align: center; font-size: 10px; font-weight: 700;
+    letter-spacing: 0.25em; text-transform: uppercase; color: #fbbf24;
+    margin-bottom: 12px; opacity: 0.85;
+  }
+  .how h2 {
+    text-align: center; font-size: 30px; font-weight: 700;
+    letter-spacing: -0.025em; color: #fff; margin-bottom: 6px;
+  }
+  .how-sub { text-align: center; font-size: 14px; color: #71717a; margin-bottom: 48px; }
+  .steps {
+    display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
+    max-width: 840px; margin: 0 auto; background: #18181b;
+    border-radius: 12px; overflow: hidden; border: 1px solid #1c1c1f;
+  }
+  .step { padding: 32px 24px; background: #0d0d0f; }
+  .step-num {
+    font-size: 11px; font-weight: 700; letter-spacing: 0.15em;
+    color: #fbbf24; text-transform: uppercase; margin-bottom: 14px; opacity: 0.8;
+  }
+  .step h3 { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 10px; letter-spacing: -0.01em; }
+  .step p { font-size: 13px; color: #71717a; line-height: 1.6; }
+
+  /* ── VIDEO ── */
+  .video-section { padding: 0 24px 72px; position: relative; z-index: 1; }
+  .video-wrap {
+    max-width: 900px; margin: 0 auto; border-radius: 14px; overflow: hidden;
+    border: 1px solid rgba(255,255,255,0.07); background: #000;
+    box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(251,191,36,0.05);
+  }
+  .video-placeholder {
+    aspect-ratio: 16/9; background: #0a0a0a;
+    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
+  }
+  .play-btn {
+    width: 56px; height: 56px; border-radius: 50%;
+    background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3);
+    display: flex; align-items: center; justify-content: center; font-size: 20px;
+  }
+  .video-placeholder p { font-size: 12px; color: #3f3f46; }
+
+  /* ── FEATURES ── */
+  .features { padding: 72px 24px; position: relative; z-index: 1; }
+  .features h2 {
+    text-align: center; font-size: 30px; font-weight: 700;
+    letter-spacing: -0.025em; color: #fff; margin-bottom: 8px;
+  }
+  .features-sub { text-align: center; font-size: 13px; color: #52525b; margin-bottom: 44px; letter-spacing: 0.02em; }
+  .feature-grid {
+    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
+    max-width: 900px; margin: 0 auto; background: #18181b;
+    border-radius: 12px; overflow: hidden; border: 1px solid #1c1c1f;
+  }
+  .feature-card { padding: 24px; background: #0d0d0f; }
+  .feature-icon { font-size: 18px; margin-bottom: 14px; display: block; }
+  .feature-card h3 { font-size: 13px; font-weight: 700; color: #e4e4e7; margin-bottom: 7px; letter-spacing: -0.01em; }
+  .feature-card p { font-size: 12px; color: #52525b; line-height: 1.6; }
+
+  /* ── SEO BLOCK ── */
+  .seo-block { padding: 72px 24px; border-top: 1px solid #18181b; position: relative; z-index: 1; }
+  .seo-inner { max-width: 680px; margin: 0 auto; }
+  .seo-inner h2 { font-size: 22px; font-weight: 700; color: #d4d4d8; margin-bottom: 18px; letter-spacing: -0.02em; }
+  .seo-inner p { font-size: 14px; color: #71717a; line-height: 1.75; margin-bottom: 14px; }
+  .seo-inner strong { color: #a1a1aa; font-weight: 600; }
+
+  /* ── FINAL CTA ── */
+  .final-cta {
+    padding: 96px 24px; text-align: center;
+    border-top: 1px solid #18181b; position: relative; z-index: 1;
+  }
+  .final-cta h2 { font-size: 36px; font-weight: 700; color: #fff; margin-bottom: 12px; letter-spacing: -0.03em; }
+  .final-cta p { font-size: 14px; color: #52525b; margin-bottom: 32px; }
+
+  footer {
+    border-top: 1px solid #18181b; padding: 20px 24px;
+    display: flex; justify-content: space-between; align-items: center;
+    font-size: 11px; color: #3f3f46; max-width: 960px; margin: 0 auto;
+    position: relative; z-index: 1;
+  }
+
+  /* changed copy callouts */
+  .changed {
+    outline: 1px dashed rgba(251,191,36,0.4);
+    outline-offset: 3px;
+    border-radius: 3px;
+  }
+
+  .annotation {
+    position: fixed; bottom: 16px; right: 16px;
+    background: #18181b; border: 1px solid #27272a; border-radius: 8px;
+    padding: 12px 16px; font-size: 11px; color: #a1a1aa; max-width: 240px;
+    z-index: 200; line-height: 1.6;
+  }
+  .annotation strong { color: #fbbf24; display: block; margin-bottom: 4px; }
+  .annotation .legend { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 10px; color: #52525b; }
+  .legend-box { width: 12px; height: 12px; border: 1px dashed rgba(251,191,36,0.5); border-radius: 2px; flex-shrink: 0; }
+
+  #selection-indicator { display: none; }
+</style>
+</head>
+<body>
+
+<div class="bg-grid"></div>
+
+<!-- NAV -->
+<nav>
+  <div class="logo-text">BATTL<span>.</span>BUILDERS</div>
+  <div class="nav-links">
+    <a href="#" class="btn-ghost">Sign In</a>
+    <a href="#" class="btn-amber">Start a Build</a>
+  </div>
+</nav>
+
+<!-- HERO -->
+<section class="hero">
+  <!-- CHANGED: AR-15 Builds → AR-15 Builder -->
+  <div class="hero-badge changed">
+    <span class="hero-badge-dot"></span>
+    AR-15 Builder &nbsp;·&nbsp; 100% Free
+  </div>
+  <h1>
+    Stop Guessing.
+    <span class="amber">Start Building.</span>
+  </h1>
+  <!-- CHANGED: hero subhead — jargon removed, ICP-first language -->
+  <p class="hero-sub changed">
+    Not sure which parts work together? We'll walk you through it. Pick your components, get warned about anything that won't fit, and see real prices from real retailers — all in one place.
+  </p>
+  <div class="hero-cta-wrap">
+    <a href="#" class="btn-cta">Start a Build &nbsp;→</a>
+    <span class="hero-micro">100% Free &nbsp;·&nbsp; No account required</span>
+  </div>
+</section>
+
+<!-- HOW IT WORKS -->
+<section class="how wrap">
+  <div class="section-label">The process</div>
+  <!-- CHANGED: "Three moves. One solid build." → "3 Steps. One Battl-Ready Build." -->
+  <h2 class="changed">3 Steps. One Battl-Ready Build.</h2>
+  <p class="how-sub">No experience required. No part numbers to memorize.</p>
+  <div class="steps">
+    <div class="step">
+      <div class="step-num">Step 01</div>
+      <h3>Pick your parts</h3>
+      <p>Browse real components organized by what they do — barrel, trigger, lower, upper, and more. No prior knowledge required.</p>
+    </div>
+    <div class="step">
+      <div class="step-num">Step 02</div>
+      <h3>Flag the conflicts</h3>
+      <p>Gas length, buffer weight, caliber — Battl catches the mismatches before you spend money on the wrong part.</p>
+    </div>
+    <div class="step">
+      <div class="step-num">Step 03</div>
+      <h3>Price it. Pull the trigger.</h3>
+      <p>Live prices from real retailers, side by side. Click through to buy. We never touch your order.</p>
+    </div>
+  </div>
+</section>
+
+<!-- VIDEO -->
+<section class="video-section">
+  <div class="video-wrap">
+    <div class="video-placeholder">
+      <div class="play-btn">▶</div>
+      <p>Builder preview — looping screen recording</p>
+    </div>
+  </div>
+</section>
+
+<!-- FEATURES -->
+<section class="features wrap">
+  <div class="section-label">What you get</div>
+  <!-- CHANGED: "Built for builders who do their homework." → gun nerd / everyday builder positioning -->
+  <h2 class="changed">Built by gun nerds, for the everyday AR builder.</h2>
+  <p class="features-sub changed">NO SUBSCRIPTIONS &nbsp;·&nbsp; NO SPONSORED RANKINGS &nbsp;·&nbsp; NO BULLSHIT</p>
+  <div class="feature-grid">
+    <div class="feature-card">
+      <span class="feature-icon">🔧</span>
+      <h3>Build by role, not part number</h3>
+      <p>Parts organized by function. Know what you need, not what SKU to search for.</p>
+    </div>
+    <div class="feature-card">
+      <span class="feature-icon">⚠️</span>
+      <h3>Conflicts caught early</h3>
+      <p>Gas system, buffer weight, caliber — flagged before checkout, not after the box arrives.</p>
+    </div>
+    <div class="feature-card">
+      <span class="feature-icon">💰</span>
+      <h3>Real prices. Real retailers.</h3>
+      <p>Running total with live prices. No estimated MSRP. What it actually costs, today.</p>
+    </div>
+    <div class="feature-card">
+      <span class="feature-icon">🔖</span>
+      <h3>Save your work</h3>
+      <p>Free account. Save builds, pick up where you left off, run multiple configs in parallel.</p>
+    </div>
+    <div class="feature-card">
+      <span class="feature-icon">🔗</span>
+      <h3>Share the build</h3>
+      <p>One link. Your buddy sees the full parts list — no login, no friction, no excuses.</p>
+    </div>
+    <div class="feature-card">
+      <span class="feature-icon">🚫</span>
+      <h3>No gates. No friction.</h3>
+      <p>Browse and build freely. Create an account only when you're ready to save.</p>
+    </div>
+  </div>
+</section>
+
+<!-- SEO COPY BLOCK -->
+<section class="seo-block">
+  <div class="seo-inner">
+    <h2>What is Battl Builders?</h2>
+    <p>
+      Battl Builders is a free <strong>AR-15 build planner</strong> — the tool you've been doing in spreadsheets, rebuilt for how builders actually work. Select parts by what they do, validate compatibility as you go, and price your build across multiple retailers without opening a new tab.
+    </p>
+    <p>
+      Most <strong>AR-15 compatibility mistakes</strong> happen at the parts list stage: wrong gas system length for the barrel, buffer weight that fights your stock, caliber mismatches between upper and lower. Battl flags those conflicts automatically, so you catch them before they cost you a return label.
+    </p>
+    <p>
+      Whether you're planning your first rifle or spec'ing a dedicated precision upper, Battl Builders gives you a structured, guided way to research parts and <strong>buy with confidence</strong>.
+    </p>
+  </div>
+</section>
+
+<!-- FINAL CTA -->
+<section class="final-cta">
+  <h2>Your build starts here.</h2>
+  <p>Free. No account required. Takes five minutes to get rolling.</p>
+  <a href="#" class="btn-cta">Start a Build &nbsp;→</a>
+</section>
+
+<footer>
+  <span>© 2026 BATTL BUILDERS™</span>
+  <span>Free AR-15 build planner</span>
+</footer>
+
+<div class="annotation">
+  <strong>v3 — Copy Revision</strong>
+  Updated copy is outlined in amber dashes.
+  <div class="legend">
+    <div class="legend-box"></div>
+    Changed from v2
+  </div>
+</div>
+
+</body>
+</html>

.superpowers/brainstorm/3703-1774862900/hero-layout.html

@@ -0,0 +1,66 @@
+<h2>Hero Layout: What's the main structure?</h2>
+<p class="subtitle">The hero is the first thing visitors see. Which layout best suits a "start your build now" homepage?</p>
+
+<div class="cards">
+
+  <div class="card" data-choice="centered" onclick="toggleSelect(this)">
+    <div class="card-image">
+      <div style="background:#0a0a0a;border-radius:8px;padding:28px 20px;font-family:sans-serif;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:1px solid #27272a;">
+        <div style="font-size:10px;letter-spacing:0.2em;color:#fbbf24;text-transform:uppercase;opacity:0.8;">AR-15 Build Planner</div>
+        <div style="font-size:22px;font-weight:700;color:#fff;text-align:center;line-height:1.2;">Build smarter rifles.<br><span style="color:#fbbf24;">No spreadsheets.</span></div>
+        <div style="font-size:11px;color:#a1a1aa;text-align:center;max-width:280px;">Pick parts by role, catch compatibility issues, compare live prices — all in one place.</div>
+        <div style="display:flex;gap:10px;margin-top:8px;">
+          <div style="background:#fbbf24;color:#000;font-size:11px;font-weight:700;padding:8px 20px;border-radius:6px;letter-spacing:0.05em;">START A BUILD →</div>
+        </div>
+        <div style="margin-top:10px;background:#1a1a1a;border-radius:6px;border:1px solid #27272a;width:100%;height:60px;display:flex;align-items:center;justify-content:center;">
+          <div style="font-size:10px;color:#52525b;">▶ Builder preview video</div>
+        </div>
+      </div>
+    </div>
+    <div class="card-body">
+      <h3>A — Centered / Full-width</h3>
+      <p>Headline + tagline centered, single dominant CTA button, product video below. Clean, magazine-style. Works great on mobile.</p>
+    </div>
+  </div>
+
+  <div class="card" data-choice="split" onclick="toggleSelect(this)">
+    <div class="card-image">
+      <div style="background:#0a0a0a;border-radius:8px;padding:20px;font-family:sans-serif;min-height:220px;display:flex;align-items:stretch;gap:16px;border:1px solid #27272a;">
+        <div style="flex:1.1;display:flex;flex-direction:column;justify-content:center;gap:10px;">
+          <div style="font-size:10px;letter-spacing:0.2em;color:#fbbf24;text-transform:uppercase;opacity:0.8;">AR-15 Build Planner</div>
+          <div style="font-size:18px;font-weight:700;color:#fff;line-height:1.25;">Build smarter rifles.<br><span style="color:#fbbf24;">No spreadsheets.</span></div>
+          <div style="font-size:10px;color:#a1a1aa;line-height:1.5;">Pick parts, catch clashes, compare prices.</div>
+          <div style="background:#fbbf24;color:#000;font-size:11px;font-weight:700;padding:8px 16px;border-radius:6px;letter-spacing:0.05em;align-self:flex-start;margin-top:4px;">START A BUILD →</div>
+        </div>
+        <div style="flex:1;background:#111;border-radius:8px;border:1px solid #27272a;display:flex;align-items:center;justify-content:center;">
+          <div style="font-size:10px;color:#52525b;text-align:center;">App screenshot<br>or animation</div>
+        </div>
+      </div>
+    </div>
+    <div class="card-body">
+      <h3>B — Split (text left, visual right)</h3>
+      <p>Copy on the left, app screenshot or short animation on the right. Shows the product immediately. Strong for conversion, more complex layout.</p>
+    </div>
+  </div>
+
+  <div class="card" data-choice="immersive" onclick="toggleSelect(this)">
+    <div class="card-image">
+      <div style="background:#0a0a0a;border-radius:8px;padding:20px;font-family:sans-serif;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;border:1px solid #27272a;position:relative;overflow:hidden;">
+        <div style="position:absolute;inset:0;background:linear-gradient(135deg,#111 0%,#0a0a0a 100%);opacity:0.9;"></div>
+        <div style="position:absolute;top:16px;left:0;right:0;text-align:center;">
+          <div style="font-size:10px;color:#52525b;letter-spacing:0.1em;">Full-bleed product image or video background</div>
+        </div>
+        <div style="position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:10px;">
+          <div style="font-size:20px;font-weight:700;color:#fff;text-align:center;line-height:1.2;">Build smarter rifles.</div>
+          <div style="font-size:18px;font-weight:700;color:#fbbf24;">No spreadsheets.</div>
+          <div style="background:#fbbf24;color:#000;font-size:11px;font-weight:700;padding:8px 22px;border-radius:6px;letter-spacing:0.05em;margin-top:6px;">START A BUILD →</div>
+        </div>
+      </div>
+    </div>
+    <div class="card-body">
+      <h3>C — Immersive / Full-bleed</h3>
+      <p>Hero image or dark atmospheric background fills the viewport. Copy overlaid with high contrast. Dramatic, brand-forward. Requires great imagery.</p>
+    </div>
+  </div>
+
+</div>

.superpowers/brainstorm/3703-1774862900/page-sections.html

@@ -0,0 +1,111 @@
+<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>

.superpowers/brainstorm/3703-1774862900/waiting-1.html

@@ -0,0 +1,3 @@
+<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
+  <p class="subtitle">Continuing in terminal...</p>
+</div>

CLAUDE.md

@@ -0,0 +1,68 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Commands
+
+```bash
+npm run dev      # Start dev server at localhost:3000
+npm run build    # Production build (TS errors and ESLint are suppressed — see next.config.mjs)
+npm run lint     # ESLint check
+```
+
+No test framework is configured.
+
+## Environment Variables
+
+`.env.local` for development:
+```
+NEXT_PUBLIC_API_BASE_URL=http://localhost:8080
+BACKEND_BASE_URL=http://localhost:8080
+LAUNCH_ONLY_ROOT=false        # Set to "true" to restrict unauthenticated users to root page only
+NEXT_PUBLIC_SHORTLINK_BASE_URL=http://localhost:8080
+```
+
+In Docker, the Spring Boot service is resolved as `http://battlbuilder-api:8080` (the default in `lib/springProxy.ts` when `SPRING_BASE_URL` is unset).
+
+## Architecture
+
+### Two backends
+1. **Spring Boot** — primary data backend. All product catalog, builds, auth, merchant/admin data lives here.
+2. **Sanity CMS** — content only (guides/blog posts). Project `zal102rv`, dataset `production`. Queries in `lib/sanity.ts`.
+
+### API proxy pattern
+Next.js API routes (`app/api/`) act as a thin proxy to Spring Boot. Client code never calls Spring Boot directly. The helper `lib/springProxy.ts` forwards cookies and auth headers to Spring Boot and handles response serialization.
+
+### Authentication
+- **Session cookie**: `session_token` HTTP-only cookie set by Spring Boot, forwarded by the proxy.
+- **Client state**: `AuthContext` (`context/AuthContext.tsx`) hydrates from `localStorage` on mount, then verifies against `/api/auth/me`.
+- **Middleware**: `middleware.ts` enforces route protection. Public paths are whitelisted; `/admin/*` requires login; `/builder`, `/builds`, `/vault` are gated only when `LAUNCH_ONLY_ROOT=true`.
+
+### Route groups
+- `app/(app)/` — main consumer app layout (TopNav + Footer)
+- `app/(app)/(builder)/` — builder + parts browser (BuilderNav layout)
+- `app/(account)/` — account settings pages (AccountChrome sidebar layout)
+- `app/admin/` — internal admin tools (AdminLeftNavigation layout)
+- `app/api/` — 50 server-side route handlers proxying to Spring Boot
+
+### Builder domain model
+The builder is AR-platform-centric. Key concepts:
+
+- **`BuilderSlotKey`** (`types/builderSlots.ts`) — the canonical kebab-case category ID (e.g., `"complete-upper"`, `"barrel"`). This is the source of truth for localStorage keys, URL state, and backend part role mapping.
+- **`CATEGORY_TO_PART_ROLES` / `PART_ROLE_TO_CATEGORY`** (`lib/catalogMappings.ts`) — bidirectional mapping between `BuilderSlotKey` and backend `partRole` strings. Update here when the backend adds new part roles.
+- **`BUILDER_SLOTS`** (`data/builderSlots.ts`) — defines slot groups (LOWER, UPPER, SYSTEM, ACCESSORIES) and satisfaction patterns (e.g., a complete lower satisfies the lower assembly slot).
+- **`BuildState`** — `Partial<Record<BuilderSlotKey, string>>` stored in `localStorage`. Product IDs are the values.
+- **Overlap detection** (`lib/buildOverlaps.ts`) — warns users when they select both a complete assembly and individual sub-parts.
+
+### Legacy key aliases
+`types/builderSlots.ts` exports `normalizeSlotKey()` which maps camelCase legacy keys (e.g., `completeUpper`) to current kebab-case keys. This is needed for backwards-compatible URL/localStorage deserialization.
+
+### API client pattern
+- Client components use `useApi()` hook (`lib/api.ts`) for fetch calls with `credentials: 'include'`.
+- Admin-specific API calls live in `lib/api/` (e.g., `adminCategoryMappings.ts`, `adminMerchantMappings.ts`).
+- Product catalog helpers are in `lib/catalog.ts`.
+
+### Sanity content
+- `lib/sanity.ts` — Sanity client + GROQ queries for posts.
+- `lib/sanityFetch.ts` — low-level HTTPS fetch to Sanity IP (bypasses CDN DNS issues in server/Docker environments).
+- Guides at `/guides/[slug]` are the only public Sanity-driven pages.

app/(app)/(builder)/builder/page.tsx

@@ -28,6 +28,7 @@ import { X, Link2, Square, CheckSquare } from "lucide-react";
 
 import { useApi } from "@/lib/api";
 import { useAuth } from "@/context/AuthContext";
+import { trackBuildStarted, trackPartSelected, trackAffiliateLinkClicked, trackBuildShared, trackBuildSaved } from "@/lib/analytics";
 
 import { CATEGORIES } from "@/data/gunbuilderParts";
 import { BUILDER_SLOTS, isSlotSatisfied } from "@/data/builderSlots";
@@ -295,7 +296,7 @@ function buildAssemblyRows(params: {
     rows.push({
       key: `${groupLabel}-${paths.complete}`,
       kind: "category",
-      label: "Completed Lower (Fastest)",
+      label: `Completed ${groupLabel.split(" ")[0]} (Fastest)`,
       categoryId: paths.complete,
       indent: 0,
       pill: mode === "complete" ? "Selected" : undefined,
@@ -355,6 +356,8 @@ function GunbuilderPageContent() {
   // Parts data state
   // -----------------------------
   const [parts, setParts] = useState<Part[]>([]);
+  const previousPartIdsRef = useRef<Set<string>>(new Set());
+  const isFirstPartsHydrationRef = useRef(true);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -369,20 +372,33 @@ function GunbuilderPageContent() {
   useEffect(() => {
     if (typeof window === "undefined") return;
 
-    // Hydrate persisted build state only. URL actions (platform/select/remove)
-    // are handled by the dedicated useSearchParams effect later in this file.
+    // Intentional: Object.keys(...).length > 0 tightens the original condition.
+    // Previously, an empty {} from localStorage would call setBuild(normalizeBuildState({})),
+    // which is a no-op. The new check skips that call, which is safe and correct.
+    let hasBuild = false;
     const stored = localStorage.getItem(STORAGE_KEY);
     if (stored) {
       try {
         const parsed = JSON.parse(stored);
-        if (parsed && typeof parsed === "object") {
+        if (parsed && typeof parsed === "object" && Object.keys(parsed).length > 0) {
           setBuild(normalizeBuildState(parsed));
+          hasBuild = true;
         }
       } catch {
         // ignore
       }
     }
 
+    // Fire build_started only for genuinely new builds:
+    // - No existing parts in localStorage
+    // - No ?select= param (share-link arrivals have empty localStorage but are not starting fresh)
+    // Use window.location.search directly: this effect runs at mount before any router
+    // processing, making window.location.search the authoritative source of the landing URL.
+    const hasSelectParam = new URLSearchParams(window.location.search).has("select");
+    if (!hasBuild && !hasSelectParam) {
+      trackBuildStarted();
+    }
+
     // Signal that hydration is complete - this allows URL param processing to run
     setIsHydrated(true);
   }, []);
@@ -602,6 +618,7 @@ function GunbuilderPageContent() {
       if (ids.length === 0) {
         lastHydrateKeyRef.current = "";
         setParts([]);
+        previousPartIdsRef.current = new Set(); // keep in sync so re-selecting fires the event
         setError(null);
         setLoading(false);
         return;
@@ -654,6 +671,21 @@ function GunbuilderPageContent() {
 
         setParts(hydrated);
 
+        // Track newly selected parts after API fetch — fires with real name, not a numeric ID.
+        // Skip the first hydration: this covers both localStorage build restoration and ?select=
+        // share-link arrivals. Neither represents a live user interaction in the current session.
+        if (isFirstPartsHydrationRef.current) {
+          isFirstPartsHydrationRef.current = false;
+        } else {
+          const prevIds = previousPartIdsRef.current;
+          for (const p of hydrated) {
+            if (!prevIds.has(String(p.id))) {
+              trackPartSelected(p.categoryId as BuilderSlotKey, p.name, String(p.id));
+            }
+          }
+        }
+        previousPartIdsRef.current = new Set(hydrated.map((p) => String(p.id)));
+
         // ✅ Mark key as hydrated ONLY after success
         lastHydrateKeyRef.current = key;
       } catch (err: any) {
@@ -842,6 +874,7 @@ function GunbuilderPageContent() {
         type: "success",
         message: "Saved to your Vault ✅ ",
       });
+      trackBuildSaved();
 
       // Close modal + reset inputs for next variant
       setSaveAsOpen(false);
@@ -1055,6 +1088,7 @@ function GunbuilderPageContent() {
 
     try {
       await navigator.clipboard.writeText(shareUrl);
+      trackBuildShared();
       setShareStatus("Shareable link copied to clipboard.");
     } catch {
       setShareStatus("Could not copy link to clipboard.");
@@ -1074,6 +1108,7 @@ function GunbuilderPageContent() {
           text: "Check out my Battl Build.",
           url: shareUrl,
         });
+        trackBuildShared(); // fires only on successful share, not on cancel
         setShareStatus("Share dialog opened.");
       } catch {
         setShareStatus(
@@ -1704,6 +1739,14 @@ function GunbuilderPageContent() {
                                             target="_blank"
                                             rel="noopener noreferrer"
                                             className="inline-flex items-center gap-1.5 whitespace-nowrap rounded-md border border-amber-600 bg-amber-500 px-3 py-1.5 text-xs font-semibold text-black hover:bg-amber-400 transition-colors"
+                                            onClick={() => {
+                                              try {
+                                                const retailer = new URL(selectedPart.affiliateUrl).hostname.replace(/^www\./, "");
+                                                trackAffiliateLinkClicked(selectedPart.name, retailer);
+                                              } catch {
+                                                // ignore malformed URLs — if affiliateUrl is malformed, the link href is also broken
+                                              }
+                                            }}
                                           >
                                             Buy
                                           </a>

app/(app)/(builder)/parts/p/[platform]/[partRole]/[productSlug]/page.tsx

@@ -6,6 +6,8 @@ import { useParams, useRouter, useSearchParams } from "next/navigation";
 
 import type { BuilderSlotKey } from "@/types/builderSlots";
 import { PART_ROLE_TO_CATEGORY, normalizePartRole } from "@/lib/catalogMappings";
+import { trackAffiliateLinkClicked } from "@/lib/analytics";
+import { ProductImage } from "@/components/parts/ProductImage";
 
 /**
  * API Shapes
@@ -492,12 +494,10 @@ export default function ProductDetailsPage() {
                         className="h-full w-full"
                         title="Click to enlarge"
                       >
-                        {/* eslint-disable-next-line @next/next/no-img-element */}
-                        <img
+                        <ProductImage
                           src={imageUrl}
                           alt={product.name}
                           className="h-full w-full object-contain p-2"
-                          loading="lazy"
                         />
                       </button>
                     ) : (
@@ -699,6 +699,7 @@ export default function ProductDetailsPage() {
                                     target="_blank"
                                     rel="noreferrer"
                                     className="inline-flex items-center justify-center rounded-md bg-amber-400 px-3 py-1.5 text-xs font-semibold text-black hover:bg-amber-300"
+                                    onClick={() => trackAffiliateLinkClicked(product?.name ?? "", merchantLabel(o))}
                                   >
                                     Buy
                                   </a>
@@ -726,6 +727,7 @@ export default function ProductDetailsPage() {
                         target="_blank"
                         rel="noreferrer"
                         className="rounded-md border border-zinc-700 bg-zinc-900/70 px-4 py-2 text-sm font-semibold text-zinc-200 hover:bg-zinc-800"
+                        onClick={() => trackAffiliateLinkClicked(product?.name ?? "", merchantLabel(bestOffer))}
                       >
                         Buy from {merchantLabel(bestOffer)} →
                       </a>
@@ -768,8 +770,7 @@ export default function ProductDetailsPage() {
                 Close
               </button>
 
-              {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img
+              <ProductImage
                 src={imageUrl}
                 alt={product?.name ?? "Product image"}
                 className="max-h-[90vh] max-w-[90vw] rounded-lg border border-zinc-800 bg-black object-contain"

app/(app)/changelog/page.tsx

@@ -0,0 +1,45 @@
+import type { Metadata } from 'next'
+import { changelogEntriesQuery, roadmapItemsQuery } from '@/lib/sanity'
+import { sanityFetch } from '@/lib/sanityFetch'
+import { ChangelogTabs } from '@/components/ChangelogTabs'
+import type { ChangelogEntry, RoadmapItemData } from '@/types/changelog'
+
+export const revalidate = 60
+
+export const metadata: Metadata = {
+  title: "What's New — Battl Builders",
+  description:
+    'Release notes, upcoming features, and product updates from Battl Builders.',
+}
+
+export default async function ChangelogPage() {
+  let entries: ChangelogEntry[] = []
+  let roadmapItems: RoadmapItemData[] = []
+
+  try {
+    entries = await sanityFetch<ChangelogEntry[]>(changelogEntriesQuery)
+  } catch (err) {
+    console.error('[Changelog] entries fetch failed:', err)
+  }
+
+  try {
+    roadmapItems = await sanityFetch<RoadmapItemData[]>(roadmapItemsQuery)
+  } catch (err) {
+    console.error('[Changelog] roadmap fetch failed:', err)
+  }
+
+  return (
+    <main className="mx-auto max-w-4xl px-4 py-10">
+      <header className="mb-10">
+        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-zinc-500">
+          Battl Builders
+        </p>
+        <h1 className="mt-2 text-3xl font-semibold tracking-tight">Updates</h1>
+        <p className="mt-2 text-sm text-zinc-400">
+          What we&apos;ve shipped and what&apos;s coming next.
+        </p>
+      </header>
+      <ChangelogTabs entries={entries} roadmapItems={roadmapItems} />
+    </main>
+  )
+}

app/(app)/feedback/page.tsx

@@ -0,0 +1,27 @@
+import type { Metadata } from 'next'
+import { FeedbackForm } from '@/components/FeedbackForm'
+
+export const metadata: Metadata = {
+  title: 'Send Feedback — Battl Builders',
+  description:
+    'Report a bug, suggest a feature, or share a thought with the Battl Builders team.',
+}
+
+export default function FeedbackPage() {
+  return (
+    <main className="mx-auto max-w-4xl px-4 py-10">
+      <header className="mb-10">
+        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-zinc-500">
+          Battl Builders
+        </p>
+        <h1 className="mt-2 text-3xl font-semibold tracking-tight">
+          Send Feedback
+        </h1>
+        <p className="mt-2 text-sm text-zinc-400">
+          Bug, feature idea, or general thought — we read everything.
+        </p>
+      </header>
+      <FeedbackForm />
+    </main>
+  )
+}

app/admin/feedback/page.tsx

@@ -0,0 +1,194 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useAuth } from '@/context/AuthContext'
+
+type FeedbackSubmission = {
+  id: string
+  category: 'BUG' | 'FEATURE_REQUEST' | 'GENERAL'
+  message: string
+  email: string | null
+  // ipAddress is returned by the API but not displayed in the table (privacy/noise)
+  reviewed: boolean
+  createdAt: string
+}
+
+const CATEGORY_LABELS: Record<string, string> = {
+  BUG: 'Bug',
+  FEATURE_REQUEST: 'Feature Request',
+  GENERAL: 'General',
+}
+
+const CATEGORY_STYLES: Record<string, string> = {
+  BUG: 'bg-red-500/10 text-red-400 border border-red-500/20',
+  FEATURE_REQUEST: 'bg-amber-500/10 text-amber-400 border border-amber-500/20',
+  GENERAL: 'bg-zinc-800 text-zinc-400 border border-zinc-700',
+}
+
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  })
+}
+
+export default function AdminFeedbackPage() {
+  const { getAuthHeaders } = useAuth()
+  const [items, setItems] = useState<FeedbackSubmission[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [categoryFilter, setCategoryFilter] = useState('ALL')
+  const [reviewedFilter, setReviewedFilter] = useState('ALL')
+
+  async function load() {
+    try {
+      setLoading(true)
+      setError(null)
+      const res = await fetch('/api/admin/feedback', {
+        headers: getAuthHeaders(),
+        credentials: 'include',
+      })
+      if (!res.ok) throw new Error(`Failed to load feedback (${res.status})`)
+      setItems(await res.json())
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Failed to load')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    load()
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  async function toggleReviewed(item: FeedbackSubmission) {
+    const prev = items
+    setItems((cur) =>
+      cur.map((i) => (i.id === item.id ? { ...i, reviewed: !i.reviewed } : i))
+    )
+    try {
+      const res = await fetch(`/api/admin/feedback/${item.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+        credentials: 'include',
+        body: JSON.stringify({ reviewed: !item.reviewed }),
+      })
+      if (!res.ok) setItems(prev)
+    } catch {
+      setItems(prev)
+    }
+  }
+
+  const filtered = items.filter((i) => {
+    if (categoryFilter !== 'ALL' && i.category !== categoryFilter) return false
+    if (reviewedFilter === 'REVIEWED' && !i.reviewed) return false
+    if (reviewedFilter === 'UNREVIEWED' && i.reviewed) return false
+    return true
+  })
+
+  return (
+    <div>
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="text-xl font-semibold tracking-tight">Feedback</h1>
+          <p className="mt-1 text-sm text-zinc-400">
+            User-submitted feedback. Mark items reviewed to track triage.
+          </p>
+        </div>
+        <button
+          onClick={load}
+          className="rounded-md border border-zinc-800 px-3 py-1.5 text-xs text-zinc-400 hover:text-zinc-200"
+        >
+          Refresh
+        </button>
+      </div>
+
+      <div className="mb-6 flex gap-3">
+        <select
+          value={categoryFilter}
+          onChange={(e) => setCategoryFilter(e.target.value)}
+          className="rounded-md border border-zinc-800 bg-zinc-950 px-3 py-1.5 text-xs text-zinc-300"
+        >
+          <option value="ALL">All categories</option>
+          <option value="BUG">Bug</option>
+          <option value="FEATURE_REQUEST">Feature Request</option>
+          <option value="GENERAL">General</option>
+        </select>
+        <select
+          value={reviewedFilter}
+          onChange={(e) => setReviewedFilter(e.target.value)}
+          className="rounded-md border border-zinc-800 bg-zinc-950 px-3 py-1.5 text-xs text-zinc-300"
+        >
+          <option value="ALL">All statuses</option>
+          <option value="UNREVIEWED">Unreviewed</option>
+          <option value="REVIEWED">Reviewed</option>
+        </select>
+        <span className="ml-auto self-center text-xs text-zinc-600">
+          {filtered.length} of {items.length} submissions
+        </span>
+      </div>
+
+      {loading && <p className="text-sm text-zinc-500">Loading…</p>}
+      {error && <p className="text-sm text-red-400">{error}</p>}
+
+      {!loading && !error && filtered.length === 0 && (
+        <p className="text-sm text-zinc-500">No submissions match your filters.</p>
+      )}
+
+      {!loading && !error && filtered.length > 0 && (
+        <div className="overflow-x-auto rounded-xl border border-zinc-800">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-zinc-800 text-left text-[11px] font-semibold uppercase tracking-wider text-zinc-500">
+                <th className="px-4 py-3">Date</th>
+                <th className="px-4 py-3">Category</th>
+                <th className="px-4 py-3">Message</th>
+                <th className="px-4 py-3">Email</th>
+                <th className="px-4 py-3">Reviewed</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-zinc-900">
+              {filtered.map((item) => (
+                <tr key={item.id} className="hover:bg-zinc-950/60">
+                  <td className="whitespace-nowrap px-4 py-3 text-xs text-zinc-500">
+                    {formatDate(item.createdAt)}
+                  </td>
+                  <td className="px-4 py-3">
+                    <span
+                      className={`rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide ${
+                        CATEGORY_STYLES[item.category]
+                      }`}
+                    >
+                      {CATEGORY_LABELS[item.category]}
+                    </span>
+                  </td>
+                  <td className="max-w-sm px-4 py-3 text-xs text-zinc-300">
+                    {item.message.length > 120
+                      ? `${item.message.slice(0, 120)}…`
+                      : item.message}
+                  </td>
+                  <td className="px-4 py-3 text-xs text-zinc-500">
+                    {item.email ?? '—'}
+                  </td>
+                  <td className="px-4 py-3">
+                    <button
+                      onClick={() => toggleReviewed(item)}
+                      className={`rounded px-2 py-0.5 text-[10px] font-semibold transition-colors ${
+                        item.reviewed
+                          ? 'bg-green-500/10 text-green-400 hover:bg-red-500/10 hover:text-red-400'
+                          : 'bg-zinc-800 text-zinc-500 hover:bg-green-500/10 hover:text-green-400'
+                      }`}
+                    >
+                      {item.reviewed ? 'Reviewed' : 'Mark reviewed'}
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}

app/admin/layout.tsx

@@ -19,6 +19,7 @@ import {
   Wand2,
   FolderKanban,
   Shield,
+  MessageSquare,
 } from "lucide-react";
 
 const navGroups: AdminNavGroup[] = [
@@ -89,6 +90,11 @@ const navGroups: AdminNavGroup[] = [
         href: "/admin/email/send",
         icon: <Mail className="h-4 w-4" />,
       },
+      {
+        label: "Feedback",
+        href: "/admin/feedback",
+        icon: <MessageSquare className="h-4 w-4" />,
+      },
     ],
   },
   {

app/api/admin/feedback/[id]/route.ts

@@ -0,0 +1,39 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { cookies } from 'next/headers'
+
+const API_BASE_URL = process.env.API_BASE_URL || process.env.NEXT_PUBLIC_API_BASE_URL
+
+export async function PATCH(
+  req: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const cookieStore = await cookies()
+  const token = cookieStore.get('session_token')?.value
+  if (!token) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  const { id } = await params
+  const body = await req.json()
+
+  try {
+    const res = await fetch(`${API_BASE_URL}/api/v1/admin/feedback/${id}`, {
+      method: 'PATCH',
+      headers: {
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+      body: JSON.stringify(body),
+      cache: 'no-store',
+    })
+    if (!res.ok) {
+      return NextResponse.json({ error: await res.text() }, { status: res.status })
+    }
+    return res.status === 204
+      ? new NextResponse(null, { status: 204 })
+      : NextResponse.json(await res.json())
+  } catch (e) {
+    return NextResponse.json({ error: 'Request failed' }, { status: 500 })
+  }
+}

app/api/admin/feedback/route.ts

@@ -0,0 +1,29 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { cookies } from 'next/headers'
+
+const API_BASE_URL = process.env.API_BASE_URL || process.env.NEXT_PUBLIC_API_BASE_URL
+
+export async function GET(req: NextRequest) {
+  const cookieStore = await cookies()
+  const token = cookieStore.get('session_token')?.value
+  if (!token) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  const params = req.nextUrl.searchParams.toString()
+  try {
+    const res = await fetch(
+      `${API_BASE_URL}/api/v1/admin/feedback${params ? `?${params}` : ''}`,
+      {
+        headers: { Authorization: `Bearer ${token}`, Accept: 'application/json' },
+        cache: 'no-store',
+      }
+    )
+    if (!res.ok) {
+      return NextResponse.json({ error: await res.text() }, { status: res.status })
+    }
+    return NextResponse.json(await res.json())
+  } catch (e) {
+    return NextResponse.json({ error: 'Request failed' }, { status: 500 })
+  }
+}

app/api/feedback/route.ts

@@ -0,0 +1,22 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { springProxy } from '@/lib/springProxy'
+
+export async function POST(req: NextRequest) {
+  let body: unknown
+  try {
+    body = await req.json()
+  } catch {
+    return NextResponse.json({ error: 'Invalid request' }, { status: 400 })
+  }
+
+  const ip =
+    req.headers.get('x-forwarded-for')?.split(',')[0]?.trim() ??
+    req.headers.get('x-real-ip') ??
+    'unknown'
+  const userAgent = req.headers.get('user-agent') ?? 'unknown'
+
+  return springProxy(req, '/api/v1/feedback', {
+    method: 'POST',
+    body: { ...(body as object), ipAddress: ip, userAgent },
+  })
+}

app/api/newsletter/route.ts

@@ -0,0 +1,6 @@
+import { NextResponse } from "next/server";
+
+// TODO: integrate with email service (Resend, ConvertKit, etc.)
+export async function POST() {
+  return NextResponse.json({ ok: true });
+}

app/api/roadmap/[sanityId]/vote/route.ts

@@ -0,0 +1,34 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { cookies } from 'next/headers'
+
+const API_BASE_URL = process.env.API_BASE_URL || process.env.NEXT_PUBLIC_API_BASE_URL
+
+export async function POST(
+  req: NextRequest,
+  { params }: { params: Promise<{ sanityId: string }> }
+) {
+  const cookieStore = await cookies()
+  const token = cookieStore.get('session_token')?.value
+  if (!token) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  const { sanityId } = await params
+
+  try {
+    const res = await fetch(
+      `${API_BASE_URL}/api/v1/roadmap/${encodeURIComponent(sanityId)}/vote`,
+      {
+        method: 'POST',
+        headers: { Authorization: `Bearer ${token}`, Accept: 'application/json' },
+        cache: 'no-store',
+      }
+    )
+    if (!res.ok) {
+      return NextResponse.json({ error: await res.text() }, { status: res.status })
+    }
+    return NextResponse.json(await res.json())
+  } catch (e) {
+    return NextResponse.json({ error: 'Request failed' }, { status: 500 })
+  }
+}

app/api/roadmap/votes/route.ts

@@ -0,0 +1,28 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { cookies } from 'next/headers'
+
+const API_BASE_URL = process.env.API_BASE_URL || process.env.NEXT_PUBLIC_API_BASE_URL
+
+export async function GET(req: NextRequest) {
+  const cookieStore = await cookies()
+  const token = cookieStore.get('session_token')?.value
+
+  const headers: Record<string, string> = { Accept: 'application/json' }
+  if (token) headers['Authorization'] = `Bearer ${token}`
+
+  const ids = req.nextUrl.searchParams.get('ids') ?? ''
+
+  try {
+    const res = await fetch(
+      `${API_BASE_URL}/api/v1/roadmap/votes?ids=${encodeURIComponent(ids)}`,
+      { headers, cache: 'no-store' }
+    )
+    if (!res.ok) {
+      // Degrade gracefully — return empty map so UI shows 0 votes
+      return NextResponse.json({})
+    }
+    return NextResponse.json(await res.json())
+  } catch {
+    return NextResponse.json({})
+  }
+}

app/builds/[buildId]/page.tsx

@@ -1,410 +1,6 @@
-// app/builds/[buildId]/page.tsx
-import Link from "next/link";
-import { notFound } from "next/navigation";
+import { redirect } from "next/navigation";
 
-const API_BASE_URL =
-  process.env.NEXT_PUBLIC_API_BASE_URL ?? "";
-
-function formatMoney(n?: number | null) {
-  if (n == null) return "—";
-  return new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD",
-    maximumFractionDigits: 0,
-  }).format(n);
-}
-
-function timeAgo(iso?: string | null) {
-  if (!iso) return "";
-  const d = new Date(iso);
-  const diff = Math.max(0, Date.now() - d.getTime());
-  const mins = Math.floor(diff / 60000);
-  if (mins < 60) return `${mins}m ago`;
-  const hrs = Math.floor(mins / 60);
-  if (hrs < 24) return `${hrs}h ago`;
-  const days = Math.floor(hrs / 24);
-  return `${days}d ago`;
-}
-
-export default async function BuildBreakdownPage({
-  params,
-}: {
-  params: Promise<{ buildId: string }>;
-}) {
-  const { buildId } = await params;
-
-  // Public detail endpoint - use Next.js API route
-  const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
-  const res = await fetch(`${baseUrl}/api/builds/public/${buildId}`, {
-    cache: "no-store",
-  });
-
-  if (res.status === 404) return notFound();
-
-  const build = await res.json().catch(() => null);
-  if (!build) return notFound();
-
-  const items: any[] = build.items ?? [];
-
-  const total = items.reduce((sum, it) => {
-    const qty = Number(it.quantity ?? 1);
-    const price = it.bestPrice == null ? 0 : Number(it.bestPrice);
-    return sum + qty * price;
-  }, 0);
-
-  const images: any[] = build.images ?? build.photos ?? build.media ?? [];
-
-  return (
-    <main className="mx-auto max-w-6xl px-4 py-8">
-      {/* Header crumb */}
-      <div className="flex items-center justify-between">
-        <Link
-          href="/builds"
-          className="text-sm text-zinc-400 hover:text-zinc-200"
-        >
-          ← Back to Community Builds
-        </Link>
-
-        <div className="flex items-center gap-2 text-[11px] text-zinc-500">
-          <span className="rounded-full border border-zinc-800 bg-zinc-950 px-2 py-0.5">
-            Public Build
-          </span>
-          {build.updatedAt && (
-            <span className="hidden md:inline">
-              updated {timeAgo(build.updatedAt)}
-            </span>
-          )}
-        </div>
-      </div>
-
-      {/* Layout */}
-      <div className="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-[1fr_320px]">
-        {/* Post column */}
-        <div className="space-y-4">
-          {/* “Reddit-ish” Post Card */}
-          <div className="rounded-xl border border-zinc-900 bg-zinc-950/60">
-            <div className="flex">
-              {/* Vote rail */}
-              <div className="flex w-12 flex-col items-center gap-2 border-r border-zinc-900 bg-black/20 py-4 text-zinc-500">
-                <button className="rounded-md px-2 py-1 hover:bg-zinc-900 hover:text-amber-300">
-                  ▲
-                </button>
-                <div className="text-xs font-semibold text-zinc-400">—</div>
-                <button className="rounded-md px-2 py-1 hover:bg-zinc-900 hover:text-amber-300">
-                  ▼
-                </button>
-              </div>
-
-              {/* Post body */}
-              <div className="flex-1 p-5">
-                {/* Meta */}
-                <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-zinc-500">
-                  <span className="rounded-full border border-amber-500/30 bg-amber-500/10 px-2 py-0.5 text-amber-300">
-                    r/BattlBuilders
-                  </span>
-                  <span>•</span>
-                  <span>posted by</span>
-                  <span className="text-zinc-300">u/anonymous</span>
-                  {build.createdAt && (
-                    <>
-                      <span>•</span>
-                      <span>{timeAgo(build.createdAt)}</span>
-                    </>
-                  )}
-                </div>
-
-                {/* Title */}
-                <h1 className="mt-3 text-2xl font-semibold tracking-tight text-zinc-50">
-                  {build.title ?? "Untitled Build"}
-                </h1>
-
-                {/* Description */}
-                {build.description ? (
-                  <p className="mt-2 text-sm text-zinc-300/90">
-                    {build.description}
-                  </p>
-                ) : (
-                  <p className="mt-2 text-sm text-zinc-500">
-                    {/* placeholder copy */}
-                    Field notes coming soon. This build breakdown will include
-                    purpose, tradeoffs, and why each part made the cut.
-                  </p>
-                )}
-
-                {/* Action bar */}
-                <div className="mt-4 flex flex-wrap items-center gap-2 text-xs">
-                  <button className="rounded-md border border-zinc-800 bg-black/30 px-3 py-2 text-zinc-300 hover:border-amber-500/40 hover:text-amber-300">
-                    Comment
-                  </button>
-                  <button className="rounded-md border border-zinc-800 bg-black/30 px-3 py-2 text-zinc-300 hover:border-amber-500/40 hover:text-amber-300">
-                    Share
-                  </button>
-                  <button className="rounded-md border border-zinc-800 bg-black/30 px-3 py-2 text-zinc-300 hover:border-amber-500/40 hover:text-amber-300">
-                    Save
-                  </button>
-
-                  <div className="ml-auto flex items-center gap-2 text-zinc-500">
-                    <span className="hidden sm:inline">Est. Total</span>
-                    <span className="rounded-md border border-zinc-800 bg-black/30 px-2 py-1 text-zinc-200">
-                      {formatMoney(total)}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Parts card */}
-          <div className="rounded-xl border border-zinc-900 bg-zinc-950/60 p-5">
-            <div className="flex items-center justify-between">
-              <h2 className="text-sm font-semibold text-zinc-200">Parts</h2>
-              <div className="text-xs text-zinc-500">{items.length} items</div>
-            </div>
-
-            <div className="mt-4 space-y-2">
-              {items.map((it) => (
-                <div
-                  key={it.uuid ?? it.id}
-                  className="flex items-center gap-3 rounded-lg border border-zinc-900 bg-black/30 px-3 py-3"
-                >
-                  {/* Thumb */}
-                  <div className="h-12 w-12 flex-none overflow-hidden rounded-md border border-zinc-800 bg-zinc-950">
-                    {it.productImageUrl ? (
-                      // eslint-disable-next-line @next/next/no-img-element
-                      <img
-                        src={it.productImageUrl}
-                        alt={it.productName ?? "Part image"}
-                        className="h-full w-full object-cover"
-                      />
-                    ) : (
-                      <div className="flex h-full w-full items-center justify-center text-[10px] text-zinc-600">
-                        IMG
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Info */}
-                  <div className="min-w-0 flex-1">
-                    <div className="truncate text-sm text-zinc-100">
-                      {it.productName ?? "Part"}
-                    </div>
-                    <div className="mt-0.5 flex flex-wrap items-center gap-2 text-[11px] text-zinc-500">
-                      <span className="rounded-md border border-zinc-800 bg-black/20 px-1.5 py-0.5">
-                        {it.slot ?? "slot"}
-                      </span>
-                      {it.productBrand && <span>{it.productBrand}</span>}
-                      <span className="text-zinc-600">•</span>
-                      <span>x{it.quantity ?? 1}</span>
-                    </div>
-                  </div>
-
-                  {/* Price */}
-                  <div className="flex flex-col items-end gap-1">
-                    <div className="text-sm font-medium text-zinc-200">
-                      {formatMoney(it.bestPrice)}
-                    </div>
-                    <button className="text-[11px] text-amber-300/90 hover:text-amber-200">
-                      View part →
-                    </button>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Gallery */}
-          <div className="rounded-xl border border-zinc-900 bg-zinc-950/60 p-5">
-                <div className="flex items-center justify-between">
-                  <h2 className="text-sm font-semibold text-zinc-200">
-                    Gallery
-                  </h2>
-                  <span className="text-xs text-zinc-500">user submitted</span>
-                </div>
-                {images.length === 0 ? (
-                  <div className="mt-4 rounded-lg border border-dashed border-zinc-800 bg-black/20 p-4">
-                    <p className="text-sm text-zinc-400">
-                      No photos yet. Be the first to add a build pic.
-                    </p>
-                    <p className="mt-1 text-[11px] text-zinc-600">
-                      (Upload UI coming soon — we’ll store and moderate images
-                      per build.)
-                    </p>
-
-                    {/* Mock thumbnails */}
-                    <div className="mt-4 grid grid-cols-3 gap-2 sm:grid-cols-4">
-                      {Array.from({ length: 8 }).map((_, i) => (
-                        <div
-                          key={i}
-                          className="aspect-square rounded-md border border-zinc-800 bg-zinc-950 flex items-center justify-center text-[10px] text-zinc-600"
-                        >
-                          IMG
-                        </div>
-                      ))}
-                    </div>
-
-                    <button
-                      className="mt-4 rounded-md border border-zinc-800 bg-black/30 px-3 py-2 text-sm text-zinc-200 hover:border-amber-500/40 hover:text-amber-300"
-                      disabled
-                      title="Upload UI coming soon"
-                    >
-                      Add Photo (coming soon)
-                    </button>
-                  </div>
-                ) : (
-                  <div className="mt-4">
-                    {/* “Hero” preview */}
-                    <div className="aspect-[16/9] overflow-hidden rounded-lg border border-zinc-900 bg-black/30">
-                      {/* eslint-disable-next-line @next/next/no-img-element */}
-                      <img
-                        src={images[0].url ?? images[0]}
-                        alt="Build photo"
-                        className="h-full w-full object-cover"
-                      />
-                    </div>
-
-                    {/* Thumbs */}
-                    <div className="mt-3 grid grid-cols-4 gap-2 sm:grid-cols-6">
-                      {images.slice(0, 12).map((img, idx) => (
-                        <div
-                          key={img.uuid ?? img.id ?? idx}
-                          className="aspect-square overflow-hidden rounded-md border border-zinc-900 bg-black/30"
-                        >
-                          {/* eslint-disable-next-line @next/next/no-img-element */}
-                          <img
-                            src={img.thumbUrl ?? img.url ?? img}
-                            alt={`Build photo ${idx + 1}`}
-                            className="h-full w-full object-cover"
-                          />
-                        </div>
-                      ))}
-                    </div>
-
-                    <div className="mt-4 flex flex-wrap items-center gap-2 text-xs">
-                      <button className="rounded-md border border-zinc-800 bg-black/30 px-3 py-2 text-zinc-200 hover:border-amber-500/40 hover:text-amber-300">
-                        View all
-                      </button>
-                      <button
-                        className="rounded-md border border-zinc-800 bg-black/30 px-3 py-2 text-zinc-200 hover:border-amber-500/40 hover:text-amber-300"
-                        disabled
-                        title="Upload UI coming soon"
-                      >
-                        Add Photo
-                      </button>
-                      <span className="ml-auto text-[11px] text-zinc-600">
-                        {images.length} photos
-                      </span>
-                    </div>
-                  </div>
-                )}
-              </div>
-
-          {/* Comments (placeholder) */}
-          <div className="rounded-xl border border-zinc-900 bg-zinc-950/60 p-5">
-            <div className="flex items-center justify-between">
-              <h2 className="text-sm font-semibold text-zinc-200">Comments</h2>
-              <span className="text-xs text-zinc-500">mocked</span>
-            </div>
-
-            <div className="mt-4 space-y-4">
-              {[
-                {
-                  user: "u/gearhead",
-                  body: "Solid parts list. Any reason you went with that upper over a BCM?",
-                },
-                {
-                  user: "u/OP",
-                  body: "Mostly availability + price. I’ll probably swap once I track deals for a week.",
-                },
-                {
-                  user: "u/boltcarrier",
-                  body: "Would love to see this with a pinned/weld option for 14.5 builds.",
-                },
-              ].map((c, idx) => (
-                <div key={idx} className="flex gap-3">
-                  <div className="mt-1 h-6 w-6 rounded-full bg-zinc-900 text-[10px] text-zinc-300 flex items-center justify-center">
-                    {c.user === "u/OP" ? "OP" : "u"}
-                  </div>
-                  <div className="flex-1">
-                    <div className="text-[11px] text-zinc-500">
-                      <span className="text-zinc-300">{c.user}</span> • 1h ago
-                    </div>
-                    <div className="mt-1 text-sm text-zinc-300/90">
-                      {c.body}
-                    </div>
-                    <div className="mt-2 flex items-center gap-3 text-[11px] text-zinc-500">
-                      <button className="hover:text-amber-300">Reply</button>
-                      <button className="hover:text-amber-300">Share</button>
-                      <button className="hover:text-amber-300">Save</button>
-                    </div>
-                  </div>
-                </div>
-              ))}
-
-              <div className="rounded-lg border border-dashed border-zinc-800 bg-black/20 p-4 text-sm text-zinc-500">
-                Commenting is coming soon. This will become the “breakdown”
-                thread for the build (notes, tradeoffs, deal alerts, revisions).
-              </div>
-              
-            </div>
-          </div>
-        </div>
-
-        {/* Sidebar */}
-        <aside className="space-y-4">
-          {/* Build stats */}
-          <div className="rounded-xl border border-zinc-900 bg-zinc-950/60 p-5">
-            <h3 className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500">
-              Build Summary
-            </h3>
-
-            <div className="mt-3 space-y-2 text-sm">
-              <div className="flex items-center justify-between">
-                <span className="text-zinc-500">Build ID</span>
-                <span className="text-zinc-300">
-                  {(build.uuid ?? buildId).slice(0, 8)}…
-                </span>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-zinc-500">Visibility</span>
-                <span className="text-zinc-300">
-                  {build.isPublic ? "Public" : "Private"}
-                </span>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-zinc-500">Items</span>
-                <span className="text-zinc-300">{items.length}</span>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-zinc-500">Est. Total</span>
-                <span className="text-zinc-50 font-medium">
-                  {formatMoney(total)}
-                </span>
-              </div>
-            </div>
-
-            <div className="mt-4 flex flex-col gap-2">
-              <button className="rounded-md bg-amber-400 px-3 py-2 text-sm font-semibold text-black hover:bg-amber-300 transition">
-                Open in Builder
-              </button>
-              <button className="rounded-md border border-zinc-800 bg-black/30 px-3 py-2 text-sm text-zinc-200 hover:border-amber-500/40 hover:text-amber-300">
-                Copy share link
-              </button>
-            </div>
-          </div>
-
-          {/* Placeholder “OP notes” */}
-          <div className="rounded-xl border border-zinc-900 bg-zinc-950/60 p-5">
-            <h3 className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500">
-              OP Notes
-            </h3>
-            <ul className="mt-3 space-y-2 text-sm text-zinc-400">
-              <li>• Purpose: home defense / range</li>
-              <li>• Priority: reliability first</li>
-              <li>• Next upgrades: optic, sling, light</li>
-            </ul>
-          </div>
-        </aside>
-      </div>
-    </main>
-  );
+// Community Builds is temporarily disabled — redirect to home until ready.
+export default function BuildDetailPage() {
+  redirect("/");
 }

app/builds/page.tsx

@@ -1,481 +1,6 @@
-"use client";
-
-/**
- * app/builds/page.tsx
- * Community Builds feed (public)
- *
- * Dev Notes:
- * - We are moving to Option B:
- *   Build (core) + BuildProfile (meta) + Votes/Comments/Media as separate tables.
- * - This page expects a lightweight "feed card" DTO from the backend, NOT full build items.
- * - Keep UI/filters here client-side for MVP; move to server-side query params later if needed.
- *
- * Backend (target contract):
- *   GET /api/v1/builds?limit=50  -> BuildFeedCardDto[]
- *   (Optional later) POST /api/v1/builds/{uuid}/vote { delta: 1 | -1 }
- */
-
-import { useEffect, useMemo, useState, useCallback } from "react";
-import Link from "next/link";
-
-type BuildClass = "Rifle" | "Pistol" | "NFA";
-
-/**
- * Keep this loose. Backend will control the allowed calibers via BuildProfile.
- * We can tighten once the controlled vocab is finalized.
- */
-type Caliber = string;
-
-/**
- * This matches what the UI needs (card format).
- * It maps cleanly to: builds + build_profiles + aggregated votes (+ optional price).
- */
-type BuildCard = {
-  id: string; // we use uuid here (public identifier)
-  title: string;
-  slug: string; // can be uuid for now; keep property so UI does not change
-  creator: string; // placeholder until user profiles are real
-  caliber: Caliber;
-  buildClass: BuildClass;
-  price: number; // optional server-side later; for now allow 0 fallback
-  votes: number;
-  tags: string[];
-  coverImageUrl?: string | null;
-};
-
-type BuildFeedCardDto = {
-  uuid: string;
-  title?: string | null;
-  slug?: string | null; // optional (we can generate from title later)
-  creator?: string | null; // optional
-  caliber?: string | null;
-  buildClass?: BuildClass | null;
-  price?: number | null;
-  votes?: number | null;
-  tags?: string[] | null;
-  coverImageUrl?: string | null;
-};
-
-const API_BASE_URL =
-  process.env.NEXT_PUBLIC_API_BASE_URL ?? "";
-
-// --- UI Filter Sets (keep; we’ll generate options from data too) ---
-const CLASS_FILTERS: (BuildClass | "all")[] = ["all", "Rifle", "Pistol", "NFA"];
-
-const PRICE_FILTERS = [
-  { id: "all", label: "All", min: 0, max: Infinity },
-  { id: "sub1k", label: "< $1k", min: 0, max: 1000_00 },
-  { id: "1to2k", label: "$1k–$2k", min: 1000_00, max: 2000_00 },
-  { id: "2to3k", label: "$2k–$3k", min: 2000_00, max: 3000_00 },
-  { id: "3kplus", label: "$3k+", min: 3000_00, max: Infinity },
-];
-
-function safeArray(v: unknown): string[] {
-  return Array.isArray(v) ? v.filter(Boolean).map(String) : [];
-}
-
-function fallbackSlug(dto: BuildFeedCardDto) {
-  // MVP: stable route id is uuid. Keep a "slug" field for UI continuity.
-  return dto.slug?.trim() || dto.uuid;
-}
-
-function normalizeCard(dto: BuildFeedCardDto): BuildCard {
-  const title = (dto.title ?? "Untitled Build").trim() || "Untitled Build";
-
-  return {
-    id: dto.uuid,
-    title,
-    slug: fallbackSlug(dto),
-
-    // Until we wire real users: keep a placeholder creator string.
-    creator: (dto.creator ?? "anonymous").trim() || "anonymous",
-
-    caliber: (dto.caliber ?? "—").trim() || "—",
-
-    // Default to Rifle for display if missing; backend should set this via profile.
-    buildClass: (dto.buildClass ?? "Rifle") as BuildClass,
-
-    // Price is optional (we can compute later from BuildItems + offers).
-    price: typeof dto.price === "number" ? dto.price : 0,
-
-    votes: typeof dto.votes === "number" ? dto.votes : 0,
-
-    tags: safeArray(dto.tags),
-
-    coverImageUrl: dto.coverImageUrl ?? null,
-  };
-}
+import { redirect } from "next/navigation";
 
+// Community Builds is temporarily disabled — redirect to home until ready.
 export default function BuildsPage() {
-  // --- Remote data state ---
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [builds, setBuilds] = useState<BuildCard[]>([]);
-
-  // --- UI state (filters/votes) ---
-  const [caliberFilter, setCaliberFilter] = useState<Caliber | "all">("all");
-  const [classFilter, setClassFilter] = useState<BuildClass | "all">("all");
-  const [priceFilterId, setPriceFilterId] = useState<string>("all");
-
-  // Local vote state for optimistic UI
-  const [votes, setVotes] = useState<Record<string, number>>({});
-
-  const activePriceFilter =
-    PRICE_FILTERS.find((p) => p.id === priceFilterId) ?? PRICE_FILTERS[0];
-
-  // --- Fetch public builds feed ---
-  useEffect(() => {
-    let cancelled = false;
-
-    async function run() {
-      try {
-        setLoading(true);
-        setError(null);
-
-        const res = await fetch('/api/builds/public?limit=50', {
-          method: "GET",
-          credentials: "include",
-          headers: { "Content-Type": "application/json" },
-        });
-
-        if (!res.ok) {
-          const txt = await res.text().catch(() => "");
-          throw new Error(txt || `Failed to load builds (${res.status})`);
-        }
-
-        const data = (await res.json()) as BuildFeedCardDto[];
-        const cards = (Array.isArray(data) ? data : []).map(normalizeCard);
-
-        if (cancelled) return;
-
-        setBuilds(cards);
-
-        // Initialize vote UI from payload totals
-        setVotes(Object.fromEntries(cards.map((b) => [b.id, b.votes])));
-      } catch (e: any) {
-        if (!cancelled) setError(e?.message || "Failed to load builds feed");
-      } finally {
-        if (!cancelled) setLoading(false);
-      }
-    }
-
-    run();
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  // Build the caliber filters dynamically from data, but keep "all" first.
-  const CALIBER_FILTERS = useMemo<(Caliber | "all")[]>(() => {
-    const uniq = new Set<string>();
-    for (const b of builds) {
-      const c = (b.caliber ?? "").trim();
-      if (c && c !== "—") uniq.add(c);
-    }
-    return ["all", ...Array.from(uniq).sort()];
-  }, [builds]);
-
-  const filteredBuilds = useMemo(() => {
-    return builds.filter((build) => {
-      const matchesCaliber =
-        caliberFilter === "all" || build.caliber === caliberFilter;
-
-      const matchesClass =
-        classFilter === "all" || build.buildClass === classFilter;
-
-      const matchesPrice =
-        build.price >= activePriceFilter.min &&
-        build.price < activePriceFilter.max;
-
-      return matchesCaliber && matchesClass && matchesPrice;
-    });
-  }, [builds, caliberFilter, classFilter, activePriceFilter]);
-
-  const handleVote = useCallback((id: string, delta: 1 | -1) => {
-    // MVP: optimistic local vote only.
-    // Later: POST /api/v1/builds/{uuid}/vote { delta } and reconcile.
-    setVotes((prev) => ({
-      ...prev,
-      [id]: (prev[id] ?? 0) + delta,
-    }));
-  }, []);
-
-  return (
-    <main className="min-h-screen bg-black text-zinc-50">
-      <div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
-        {/* Header */}
-        <header className="mb-6 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
-          <div>
-            <p className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
-              Battl Builder · Build Book
-            </p>
-            <h1
-              className="mt-2 text-3xl md:text-4xl font-extrabold tracking-tight
-                         bg-gradient-to-r from-amber-400 via-amber-200 to-amber-400
-                         text-transparent bg-clip-text drop-shadow-[0_2px_6px_rgba(255,193,7,0.25)]"
-            >
-              Community Builds
-            </h1>
-            <p className="mt-2 text-sm md:text-base text-zinc-400 max-w-xl">
-              Browse community builds, vote them up or down, and steal good
-              ideas without shame. This feed is backed by public builds
-              (isPublic=true).
-            </p>
-          </div>
-
-          <div className="flex gap-2 md:gap-3">
-            <Link
-              href="/builder"
-              className="inline-flex items-center justify-center rounded-md border border-zinc-700 bg-zinc-900/60 px-4 py-2 text-xs md:text-sm font-medium text-zinc-200 hover:bg-zinc-800 hover:border-zinc-600 transition-colors"
-            >
-              Open Builder
-            </Link>
-
-            {/* Later: route to /vault + choose build to submit, or direct /builder submit flow */}
-            <Link
-              href="/vault"
-              className="inline-flex items-center justify-center rounded-md border border-amber-400/70 bg-amber-400/10 px-4 py-2 text-xs md:text-sm font-medium text-amber-200 hover:bg-amber-400/15 transition-colors"
-            >
-              + Submit Build
-            </Link>
-          </div>
-        </header>
-
-        {/* Loading / Error */}
-        {loading && (
-          <div className="mb-6 rounded-lg border border-zinc-800 bg-zinc-950/70 p-4 text-sm text-zinc-400">
-            Loading community builds…
-          </div>
-        )}
-
-        {error && !loading && (
-          <div className="mb-6 rounded-lg border border-red-500/30 bg-red-500/10 p-4 text-sm text-red-200">
-            {error}
-            <div className="mt-2 text-xs text-red-200/80">
-              Dev tip: confirm backend route{" "}
-              <span className="font-mono">GET /api/v1/builds</span> is
-              implemented + CORS is configured.
-            </div>
-          </div>
-        )}
-
-        {/* Filters */}
-        <section className="mb-6 rounded-lg border border-zinc-800 bg-zinc-950/70 p-4 space-y-4">
-          <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-            <div>
-              <h2 className="text-xs font-semibold tracking-[0.16em] uppercase text-zinc-400">
-                Filter Builds
-              </h2>
-              <p className="text-xs text-zinc-500 mt-1">
-                Filter by caliber, class, and price range. (Client-side for
-                MVP.)
-              </p>
-            </div>
-
-            <div className="text-xs text-zinc-500">
-              Showing{" "}
-              <span className="text-zinc-200 font-medium">
-                {filteredBuilds.length}
-              </span>{" "}
-              of{" "}
-              <span className="text-zinc-200 font-medium">{builds.length}</span>{" "}
-              builds
-            </div>
-          </div>
-
-          <div className="grid gap-3 md:grid-cols-3">
-            {/* Caliber filter */}
-            <div>
-              <div className="text-[0.7rem] uppercase tracking-[0.16em] text-zinc-500 mb-1">
-                Caliber
-              </div>
-              <div className="flex flex-wrap gap-2">
-                {CALIBER_FILTERS.map((caliber) => (
-                  <button
-                    key={caliber}
-                    type="button"
-                    onClick={() =>
-                      setCaliberFilter(caliber === "all" ? "all" : caliber)
-                    }
-                    className={`rounded-full border px-3 py-1 text-xs transition-colors ${
-                      caliberFilter === caliber
-                        ? "border-amber-400/70 bg-amber-400/10 text-amber-200"
-                        : "border-zinc-700 bg-zinc-900/60 text-zinc-300 hover:bg-zinc-800 hover:border-zinc-600"
-                    }`}
-                  >
-                    {caliber === "all" ? "All" : caliber}
-                  </button>
-                ))}
-              </div>
-            </div>
-
-            {/* Class filter */}
-            <div>
-              <div className="text-[0.7rem] uppercase tracking-[0.16em] text-zinc-500 mb-1">
-                Class
-              </div>
-              <div className="flex flex-wrap gap-2">
-                {CLASS_FILTERS.map((cls) => (
-                  <button
-                    key={cls}
-                    type="button"
-                    onClick={() => setClassFilter(cls === "all" ? "all" : cls)}
-                    className={`rounded-full border px-3 py-1 text-xs transition-colors ${
-                      classFilter === cls
-                        ? "border-amber-400/70 bg-amber-400/10 text-amber-200"
-                        : "border-zinc-700 bg-zinc-900/60 text-zinc-300 hover:bg-zinc-800 hover:border-zinc-600"
-                    }`}
-                  >
-                    {cls === "all" ? "All" : cls}
-                  </button>
-                ))}
-              </div>
-            </div>
-
-            {/* Price filter */}
-            <div>
-              <div className="text-[0.7rem] uppercase tracking-[0.16em] text-zinc-500 mb-1">
-                Price Range
-              </div>
-              <div className="flex flex-wrap gap-2">
-                {PRICE_FILTERS.map((range) => (
-                  <button
-                    key={range.id}
-                    type="button"
-                    onClick={() => setPriceFilterId(range.id)}
-                    className={`rounded-full border px-3 py-1 text-xs transition-colors ${
-                      priceFilterId === range.id
-                        ? "border-amber-400/70 bg-amber-400/10 text-amber-200"
-                        : "border-zinc-700 bg-zinc-900/60 text-zinc-300 hover:bg-zinc-800 hover:border-zinc-600"
-                    }`}
-                  >
-                    {range.label}
-                  </button>
-                ))}
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* Build list */}
-        <section>
-          <div className="space-y-4">
-            {filteredBuilds.map((build) => {
-              const dollars = Math.floor((build.price ?? 0) / 100);
-
-              return (
-                <article
-                  key={build.id}
-                  className="flex gap-4 rounded-lg border border-zinc-800 bg-zinc-950/70 p-4"
-                >
-                  {/* Votes column */}
-                  <div className="flex flex-col items-center justify-center gap-1">
-                    <button
-                      type="button"
-                      onClick={() => handleVote(build.id, 1)}
-                      className="flex h-6 w-6 items-center justify-center rounded-full border border-zinc-700 bg-zinc-900/70 text-xs text-zinc-300 hover:bg-zinc-800 hover:border-zinc-500"
-                      aria-label="Upvote"
-                      title="Upvote"
-                    >
-                      ▲
-                    </button>
-                    <div className="text-xs font-semibold text-amber-200">
-                      {votes[build.id] ?? build.votes}
-                    </div>
-                    <button
-                      type="button"
-                      onClick={() => handleVote(build.id, -1)}
-                      className="flex h-6 w-6 items-center justify-center rounded-full border border-zinc-700 bg-zinc-900/70 text-xs text-zinc-300 hover:bg-zinc-800 hover:border-zinc-500"
-                      aria-label="Downvote"
-                      title="Downvote"
-                    >
-                      ▼
-                    </button>
-                  </div>
-
-                  {/* Thumbnail */}
-                  <div className="hidden sm:block">
-                    <div className="overflow-hidden rounded-md border border-zinc-800 bg-zinc-900/80 h-24 w-40">
-                      {/* eslint-disable-next-line @next/next/no-img-element */}
-                      <img
-                        src={
-                          build.coverImageUrl ||
-                          "https://placehold.co/320x200/png?text=Build+Photo"
-                        }
-                        alt={`${build.title} cover`}
-                        className="h-full w-full object-cover"
-                      />
-                    </div>
-                  </div>
-
-                  {/* Main content */}
-                  <div className="flex-1">
-                    <div className="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
-                      <div>
-                        <div className="text-[0.7rem] uppercase tracking-[0.16em] text-zinc-500 mb-1">
-                          {build.buildClass} · {build.caliber}
-                        </div>
-                        <h3 className="text-lg md:text-xl font-semibold text-zinc-50">
-                          <Link
-                            href={`/builds/${build.slug}`}
-                            className="hover:text-amber-200 transition-colors"
-                          >
-                            {build.title}
-                          </Link>
-                        </h3>
-                        <p className="text-xs text-zinc-500 mt-1">
-                          Posted by{" "}
-                          <span className="text-zinc-300">
-                            b/{build.creator}
-                          </span>{" "}
-                          · Build detail page will show the parts list +
-                          comments.
-                        </p>
-                      </div>
-
-                      <div className="text-right mt-1 md:mt-0">
-                        <div className="text-xs uppercase tracking-[0.16em] text-zinc-500">
-                          Est. Build Cost
-                        </div>
-                        <div className="text-lg font-semibold text-amber-300">
-                          {build.price > 0 ? (
-                            <span>
-                              ${Math.floor(build.price / 100).toLocaleString()}
-                            </span>
-                          ) : (
-                            "—"
-                          )}
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className="mt-3 flex flex-wrap items-center gap-2">
-                      {build.tags.map((tag) => (
-                        <span
-                          key={tag}
-                          className="rounded-full border border-zinc-700 bg-zinc-900/60 px-2 py-0.5 text-[0.7rem] text-zinc-400"
-                        >
-                          {tag}
-                        </span>
-                      ))}
-
-                      <span className="ml-auto text-[0.7rem] text-zinc-500">
-                        Comments + save coming soon.
-                      </span>
-                    </div>
-                  </div>
-                </article>
-              );
-            })}
-
-            {!loading && !error && filteredBuilds.length === 0 && (
-              <div className="rounded-lg border border-zinc-800 bg-zinc-950/70 p-6 text-center text-sm text-zinc-500">
-                No builds match those filters yet.
-              </div>
-            )}
-          </div>
-        </section>
-      </div>
-    </main>
-  );
+  redirect("/");
 }

app/page.tsx

@@ -1,119 +1,27 @@
-"use client";
-
-import { FormEvent, useState } from "react";
+import type { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
+import { NewsletterForm } from "@/components/NewsletterForm";
 import {
   WrenchScrewdriverIcon,
   ShieldExclamationIcon,
   CurrencyDollarIcon,
   BookmarkSquareIcon,
-  BuildingStorefrontIcon,
-  ChatBubbleLeftRightIcon,
+  LinkIcon,
+  LockOpenIcon,
 } from "@heroicons/react/20/solid";
 
+export const metadata: Metadata = {
+  title: { absolute: "Battl Builders — Free AR-15 Build Planner" },
+  description:
+    "Pick compatible AR-15 parts, catch mismatches before you order, and compare live prices from real retailers. Free, no account required.",
+};
+
 export default function HomePage() {
-  const [email, setEmail] = useState("");
-  const [useCase, setUseCase] = useState("");
-  const [status, setStatus] = useState<
-    "idle" | "loading" | "success" | "error"
-  >("idle");
-
-  const [message, setMessage] = useState<string | null>(null);
-  const [accepted, setAccepted] = useState(false);
-  const TOS_VERSION = "2025-12-27";
-
-  async function handleSubmit(e: FormEvent) {
-    e.preventDefault();
-
-    if (!email) {
-      setMessage("Drop an email in first, operator.");
-      setStatus("error");
-      return;
-    }
-
-    if (!accepted) {
-      setMessage(
-        "You must accept the Terms and confirm you’re responsible for safe/legal assembly."
-      );
-      setStatus("error");
-      return;
-    }
-
-    try {
-      setStatus("loading");
-      setMessage(null);
-
-      const res = await fetch("/api/beta-signup", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          email,
-          useCase,
-          acceptedTos: accepted,
-          tosVersion: TOS_VERSION,
-        }),
-      });
-
-      if (!res.ok) {
-        const txt = await res.text().catch(() => "");
-        throw new Error(txt || "Failed to save your signup.");
-      }
-
-      setStatus("success");
-      setMessage(
-        "✅ You’re on the list. Invites drop soon — we’ll email your access link when it’s go-time."
-      );
-      setEmail("");
-      setUseCase("");
-    } catch (err) {
-      console.error(err);
-      setStatus("error");
-      setMessage("Something broke. Try again in a minute.");
-    }
-  }
-
-  const features = [
-    {
-      name: "Guided part roles",
-      description: "Pick parts by role so you’re not guessing what fits where.",
-      icon: WrenchScrewdriverIcon,
-    },
-    {
-      name: "Basic compatibility warnings",
-      description:
-        "Early guardrails to catch obvious mismatches before you buy.",
-      icon: ShieldExclamationIcon,
-    },
-    {
-      name: "Live pricing totals",
-      description:
-        "See the running total as you build, with real retailer listings.",
-      icon: CurrencyDollarIcon,
-    },
-    {
-      name: "Save builds",
-      description: "Save a build to your account so you can finish it later.",
-      icon: BookmarkSquareIcon,
-    },
-    {
-      name: "Limited retailers (for now)",
-      description:
-        "We’re starting small with a couple merchants and expanding fast.",
-      icon: BuildingStorefrontIcon,
-    },
-    {
-      name: "Feedback-driven roadmap",
-      description:
-        "Tell us what’s confusing, wrong, or missing — we’ll fix that first.",
-      icon: ChatBubbleLeftRightIcon,
-    },
-  ];
-
   return (
     <main className="min-h-screen bg-black text-zinc-50">
-      {/* Abstract Brand Background */}
-      <div className="pointer-events-none absolute inset-0 overflow-hidden opacity-[0.55]">
+      {/* Grid background — retained from previous implementation */}
+      <div className="pointer-events-none fixed inset-0 z-0 overflow-hidden opacity-[0.55]">
         <svg
           width="100%"
           height="100%"
@@ -137,7 +45,6 @@ export default function HomePage() {
                 strokeOpacity="0.35"
               />
             </pattern>
-
             <pattern
               id="battlHex"
               width="140"
@@ -153,214 +60,133 @@ export default function HomePage() {
               />
             </pattern>
           </defs>
-
           <rect width="100%" height="100%" fill="url(#battlGrid)" />
           <rect width="100%" height="100%" fill="url(#battlHex)" />
         </svg>
       </div>
-      <div className="mx-auto flex min-h-screen max-w-5xl flex-col px-4 py-10">
-        {/* Top Bar / Logo */}
-        <header className="flex items-center justify-between gap-4">
-          <div className="flex items-center gap-3">
-            <Image
-              src="/battl/battl-logo-mark-f.svg"
-              alt="Battl Builders Logo"
-              width={260}
-              height={48}
-              className="block"
-            />
-          </div>
-
-          <nav className="flex items-center gap-2 sm:gap-3">
-            <Link
-              href="/builder"
-              className="rounded-md border border-zinc-800 bg-zinc-950/60 px-3 py-2 text-xs font-medium text-zinc-200 hover:bg-zinc-900 hover:text-white"
-            >
-              Go To Builder
-            </Link>
 
+      <div className="relative z-10">
+        {/* ── 1. Nav ── */}
+        <nav className="mx-auto flex max-w-5xl items-center justify-between px-4 py-5">
+          <Image
+            src="/battl/battl-logo-mark-f.svg"
+            alt="Battl Builders"
+            width={260}
+            height={48}
+          />
+          <div className="flex items-center gap-2">
             <Link
               href="/login"
-              className="rounded-md border border-amber-500/60 bg-amber-500/15 px-3 py-2 text-xs font-medium text-amber-200 hover:bg-amber-500/20"
+              data-umami-event="nav_signin_clicked"
+              className="rounded-md border border-zinc-800 bg-zinc-950/60 px-3 py-2 text-xs font-medium text-zinc-200 hover:bg-zinc-900 hover:text-white"
             >
               Sign In
             </Link>
-          </nav>
-        </header>
+            <Link
+              href="/builder"
+              data-umami-event="cta_start_build_clicked"
+              data-umami-event-location="nav"
+              className="rounded-md border border-amber-500/70 bg-amber-500/90 px-3 py-2 text-xs font-semibold text-black hover:bg-amber-400"
+            >
+              Start a Build
+            </Link>
+          </div>
+        </nav>
 
-        {/* Hero */}
-        <section className="mt-16 grid gap-10 md:grid-cols-[minmax(0,1.25fr)_minmax(0,1fr)] md:items-start">
-          <div>
-            <div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-black/30 px-3 py-1 text-xs uppercase tracking-[0.25em] text-white/70">
-              <span className="h-1.5 w-1.5 rounded-full bg-amber-400" />
-              Private Beta
-              <span className="text-white/40">•</span>
-              <span className="text-white/60">AR-15 focus</span>
-            </div>
-
-            <h1 className="mt-6 text-balance text-3xl font-semibold tracking-tight sm:text-4xl md:text-5xl">
-              Stop Guessing.
-              <span className="block text-amber-300">Start Building.</span>
-            </h1>
-
-            <p className="mt-4 max-w-xl text-sm text-zinc-400 sm:text-base">
-              Battl Builders helps you plan an AR-15 build faster: choose parts
-              by role, get basic compatibility guidance, and compare real
-              listings—without juggling tabs or spreadsheets.
-            </p>
-
-            <ul className="mt-6 space-y-2 text-sm text-zinc-300">
-              <li>• Guided part roles (no “where does this go?”)</li>
-              <li>• Basic compatibility warnings</li>
-              <li>• Live pricing from current retailers</li>
-              <li>• Save builds to your account</li>
-            </ul>
-
-            <p className="mt-4 text-xs text-white/50">
-              Early access beta. Data, pricing, and available parts are still
-              evolving.
-            </p>
+        {/* ── 2. Hero ── */}
+        <section className="mx-auto max-w-[760px] px-4 pb-16 pt-20 text-center">
+          <div className="mb-7 inline-flex items-center gap-2 rounded-full border border-white/10 bg-black/40 px-4 py-[5px] text-[10px] uppercase tracking-[0.2em] text-white/55">
+            <span className="h-1.5 w-1.5 flex-shrink-0 rounded-full bg-amber-400" />
+            AR-15 Builder &nbsp;·&nbsp; 100% Free
           </div>
 
-          {/* Beta Form */}
-          <div
-            id="request-access"
-            className="scroll-mt-24 rounded-lg border border-zinc-800 bg-zinc-950/70 p-5 shadow-[0_0_0_1px_rgba(24,24,27,0.9)]"
-          >
-            <h2 className="text-sm font-semibold uppercase tracking-[0.18em] text-zinc-500">
-              Join the Beta List
-            </h2>
-            <p className="mt-2 text-xs text-zinc-400">
-              Drop your email and we&apos;ll send early access when the Builder
-              goes hot. No spam, just builds.
-            </p>
+          <h1 className="text-[clamp(38px,6.5vw,64px)] font-bold leading-[1.05] tracking-[-0.035em] text-white">
+            Stop Guessing.
+            <span className="block text-amber-300">Start Building.</span>
+          </h1>
 
-            <form onSubmit={handleSubmit} className="mt-4 space-y-3">
-              <div>
-                <label
-                  htmlFor="email"
-                  className="text-xs font-medium text-zinc-300"
-                >
-                  Email
-                </label>
-                <input
-                  id="email"
-                  type="email"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  placeholder="you@gearjunkie.com"
-                  disabled={status === "loading" || status === "success"}
-                  className="mt-1 w-full rounded-md border border-zinc-800 bg-zinc-950 px-3 py-2 text-sm text-zinc-50 outline-none ring-amber-500/30 placeholder:text-zinc-600 focus:border-amber-400/80 focus:ring-2 disabled:cursor-not-allowed disabled:opacity-60"
-                  required
-                />
-              </div>
+          <p className="mx-auto mt-6 max-w-[540px] text-[17px] leading-[1.65] text-zinc-400">
+            Not sure which parts work together? We&apos;ll walk you through it.
+            Pick your components, get warned about anything that won&apos;t fit,
+            and see real prices from real retailers — all in one place.
+          </p>
 
-              <div>
-                <label
-                  htmlFor="useCase"
-                  className="text-xs font-medium text-zinc-300"
-                >
-                  What will you use Battl Builders for?
-                  <span className="text-zinc-500"> (optional)</span>
-                </label>
-                <textarea
-                  id="useCase"
-                  value={useCase}
-                  onChange={(e) => setUseCase(e.target.value)}
-                  rows={3}
-                  disabled={status === "loading" || status === "success"}
-                  placeholder="E.g. Planning a build, comparing costs, sanity-checking compatibility..."
-                  className="mt-1 w-full rounded-md border border-zinc-800 bg-zinc-950 px-3 py-2 text-xs text-zinc-50 outline-none ring-amber-500/30 placeholder:text-zinc-600 focus:border-amber-400/80 focus:ring-2 disabled:cursor-not-allowed disabled:opacity-60"
-                />
-              </div>
-
-              <div className="rounded-md border border-zinc-800 bg-black/30 p-3">
-                <label className="flex items-start gap-2 text-[11px] text-zinc-400">
-                  <input
-                    type="checkbox"
-                    checked={accepted}
-                    onChange={(e) => setAccepted(e.target.checked)}
-                    disabled={status === "loading" || status === "success"}
-                    className="mt-0.5 h-4 w-4 rounded border-zinc-700 bg-zinc-950 text-amber-400 focus:ring-2 focus:ring-amber-500/40"
-                    required
-                  />
-                  <span>
-                    I agree to the{" "}
-                    <Link
-                      href="/tos"
-                      className="text-amber-300 underline hover:text-amber-200"
-                    >
-                      Terms of Service
-                    </Link>{" "}
-                    and{" "}
-                    <Link
-                      href="/privacy"
-                      className="text-amber-300 underline hover:text-amber-200"
-                    >
-                      Privacy Policy
-                    </Link>
-                    . I understand Battl Builders is informational only and I’m
-                    solely responsible for legality, compatibility, and safe
-                    assembly/use of any firearm or components.
-                  </span>
-                </label>
-              </div>
-
-              <button
-                type="submit"
-                disabled={
-                  status === "loading" || status === "success" || !accepted
-                }
-                className="flex w-full items-center justify-center rounded-md border border-amber-500/70 bg-amber-500/90 px-3 py-2 text-sm font-medium text-black transition hover:bg-amber-400 disabled:cursor-not-allowed disabled:opacity-70"
-              >
-                {status === "loading"
-                  ? "Enlisting…"
-                  : status === "success"
-                  ? "On the List ✅"
-                  : "Get Beta Access"}
-              </button>
-
-              {message && (
-                <p
-                  className={`text-xs ${
-                    status === "success"
-                      ? "text-emerald-400"
-                      : status === "error"
-                      ? "text-red-400"
-                      : "text-zinc-400"
-                  }`}
-                >
-                  {message}
-                </p>
-              )}
-
-              <div className="mt-6 text-center text-[11px] text-zinc-500">
-                Already invited?{" "}
-                <a href="/login" className="underline hover:text-zinc-300">
-                  Log in
-                </a>
-              </div>
-            </form>
+          <div className="mt-10 flex flex-col items-center gap-3">
+            <Link
+              href="/builder"
+              data-umami-event="cta_start_build_clicked"
+              data-umami-event-location="hero"
+              className="inline-flex items-center gap-2 rounded-lg bg-amber-500/90 px-[38px] py-[15px] text-[15px] font-extrabold tracking-[0.03em] text-black shadow-[0_0_40px_rgba(251,191,36,0.2)] hover:bg-amber-400"
+            >
+              Start a Build →
+            </Link>
+            <span className="text-[11px] tracking-[0.05em] text-zinc-600">
+              100% Free · No account required
+            </span>
           </div>
         </section>
 
-        {/* Screen Recording Section */}
-        <section className="relative mt-24">
-          <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
-            <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-black shadow-2xl">
-              {/* Screen Recording */}
+        {/* ── 3. How It Works ── */}
+        <section className="mx-auto max-w-5xl px-4 py-[72px]">
+          <p className="mb-3 text-center text-[10px] font-bold uppercase tracking-[0.25em] text-amber-400 opacity-[85%]">
+            THE PROCESS
+          </p>
+          <h2 className="mb-1.5 text-center text-[30px] font-bold tracking-[-0.025em] text-white">
+            3 Steps. One Battl-Ready Build.
+          </h2>
+          <p className="mb-12 text-center text-sm text-zinc-500">
+            No experience required. No part numbers to memorize.
+          </p>
+
+          <div
+            className="mx-auto grid max-w-[840px] grid-cols-1 gap-[2px] overflow-hidden rounded-xl border border-zinc-900 bg-zinc-900 sm:grid-cols-3"
+          >
+            {[
+              {
+                num: "Step 01",
+                title: "Pick your parts",
+                body: "Browse real components organized by what they do — barrel, trigger, lower, upper, and more. No prior knowledge required.",
+              },
+              {
+                num: "Step 02",
+                title: "Flag the conflicts",
+                body: "Gas length, buffer weight, caliber — Battl catches the mismatches before you spend money on the wrong part.",
+              },
+              {
+                num: "Step 03",
+                title: "Price it. Pull the trigger.",
+                body: "Live prices from real retailers, side by side. Click through to buy. We never touch your order.",
+              },
+            ].map((step) => (
+              <div key={step.num} className="bg-[#0d0d0f] px-6 py-8">
+                <p className="mb-3.5 text-[11px] font-bold uppercase tracking-[0.15em] text-amber-400 opacity-80">
+                  {step.num}
+                </p>
+                <h3 className="mb-2.5 text-base font-bold tracking-[-0.01em] text-white">
+                  {step.title}
+                </h3>
+                <p className="text-[13px] leading-[1.6] text-zinc-500">
+                  {step.body}
+                </p>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* ── 4. Builder Preview Video ── */}
+        <section className="px-4 pb-[72px]">
+          <div className="mx-auto max-w-[900px] overflow-hidden rounded-[14px] border border-white/[0.07] bg-black shadow-[0_24px_80px_rgba(0,0,0,0.7),0_0_0_1px_rgba(251,191,36,0.05)]">
+            <div className="relative">
               <video
                 autoPlay
                 loop
                 muted
                 playsInline
+                poster="/builder-preview.png"
                 className="w-full object-cover"
               >
                 <source src="/builder-preview.mp4" type="video/mp4" />
-                Your browser does not support the video tag.
               </video>
-
-              {/* Bottom fade */}
               <div
                 aria-hidden="true"
                 className="pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-black"
@@ -369,69 +195,194 @@ export default function HomePage() {
           </div>
         </section>
 
-        {/* Info Section */}
-        <section className="mt-14 rounded-2xl border border-white/10 bg-white/5 px-6 py-14 sm:px-8">
-          <div className="mx-auto max-w-2xl text-left sm:text-center">
-            <p className="text-xs font-semibold uppercase tracking-[0.25em] text-amber-300/90">
-              Everything you need to test the core
-            </p>
-            <h2 className="mt-3 text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
-              Build smarter rifles — without the spreadsheet lifestyle.
-            </h2>
-            <p className="mt-4 text-sm leading-relaxed text-white/70 sm:text-base">
-              This private beta is focused on one thing: helping you plan an
-              AR-15 build faster and with fewer mistakes. It’s early, it’s
-              evolving, and your feedback will decide what we build next.
-            </p>
-          </div>
+        {/* ── 5. Feature Cards ── */}
+        <section className="mx-auto max-w-5xl px-4 py-[72px]">
+          <p className="mb-3 text-center text-[10px] font-bold uppercase tracking-[0.25em] text-amber-400 opacity-[85%]">
+            WHAT YOU GET
+          </p>
+          <h2 className="mb-2 text-center text-[30px] font-bold tracking-[-0.025em] text-white">
+            Built by gun nerds, for the everyday AR builder.
+          </h2>
+          <p className="mb-11 text-center text-[13px] uppercase tracking-[0.02em] text-zinc-600">
+            NO SUBSCRIPTIONS · NO SPONSORED RANKINGS · NO BULLSHIT
+          </p>
 
-          <dl className="mx-auto mt-10 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-8 text-sm text-white/70 sm:grid-cols-2 lg:max-w-none lg:grid-cols-3">
-            {features.map((feature) => (
-              <div
-                key={feature.name}
-                className="relative rounded-xl border border-white/10 bg-black/30 p-5"
-              >
-                <dt className="flex items-center gap-2 text-sm font-semibold text-white">
-                  <feature.icon
-                    aria-hidden="true"
-                    className="h-5 w-5 text-amber-300"
-                  />
-                  {feature.name}
-                </dt>
-                <dd className="mt-2 text-sm text-white/70">
-                  {feature.description}
-                </dd>
+          <div
+            className="mx-auto grid max-w-[900px] grid-cols-1 gap-[1px] overflow-hidden rounded-xl border border-zinc-900 bg-zinc-900 sm:grid-cols-2 lg:grid-cols-3"
+          >
+            {(
+              [
+                {
+                  Icon: WrenchScrewdriverIcon,
+                  title: "Build by role, not part number",
+                  body: "Parts organized by function. Know what you need, not what SKU to search for.",
+                },
+                {
+                  Icon: ShieldExclamationIcon,
+                  title: "Conflicts caught early",
+                  body: "Gas system, buffer weight, caliber — flagged before checkout, not after the box arrives.",
+                },
+                {
+                  Icon: CurrencyDollarIcon,
+                  title: "Real prices. Real retailers.",
+                  body: "Running total with live prices. No estimated MSRP. What it actually costs, today.",
+                },
+                {
+                  Icon: BookmarkSquareIcon,
+                  title: "Save your work",
+                  body: "Free account. Save builds, pick up where you left off, run multiple configs in parallel.",
+                },
+                {
+                  Icon: LinkIcon,
+                  title: "Share the build",
+                  body: "One link. Your buddy sees the full parts list — no login, no friction, no excuses.",
+                },
+                {
+                  Icon: LockOpenIcon,
+                  title: "No gates. No friction.",
+                  body: "Browse and build freely. Create an account only when you're ready to save.",
+                },
+              ] as const
+            ).map(({ Icon, title, body }) => (
+              <div key={title} className="bg-[#0d0d0f] p-6">
+                <Icon
+                  className="mb-3.5 h-5 w-5 text-amber-400"
+                  aria-hidden="true"
+                />
+                <h3 className="mb-1.5 text-[13px] font-bold tracking-[-0.01em] text-zinc-200">
+                  {title}
+                </h3>
+                <p className="text-xs leading-[1.6] text-zinc-600">{body}</p>
               </div>
             ))}
-          </dl>
+          </div>
+        </section>
 
-          <div className="mx-auto mt-10 max-w-2xl rounded-xl border border-white/10 bg-black/30 p-5">
-            <div className="text-xs font-semibold uppercase tracking-[0.25em] text-white/60">
-              What feedback we want
-            </div>
-            <ul className="mt-3 space-y-2 text-sm text-white/80">
-              <li>• Where you got confused or stuck</li>
-              <li>• Warnings that felt wrong (or missing)</li>
-              <li>• Parts you expected to find but couldn’t</li>
-              <li>• If this beats your current build-planning process</li>
-            </ul>
-            <p className="mt-3 text-xs text-white/50">
-              By joining the private beta, you agree features, data, and pricing
-              may change.
+        {/* ── 6. SEO Copy Block ── */}
+        <section className="border-t border-zinc-900 px-4 py-[72px]">
+          <div className="mx-auto max-w-[680px]">
+            <h2 className="mb-4 text-[22px] font-bold tracking-[-0.02em] text-zinc-300">
+              What is Battl Builders?
+            </h2>
+            <p className="mb-3.5 text-sm leading-[1.75] text-zinc-500">
+              Battl Builders is a free{" "}
+              <strong className="font-semibold text-zinc-300">
+                AR-15 build planner
+              </strong>{" "}
+              — the tool you&apos;ve been doing in spreadsheets, rebuilt for how
+              builders actually work. Select parts by what they do, validate
+              compatibility as you go, and price your build across multiple
+              retailers without opening a new tab.
+            </p>
+            <p className="mb-3.5 text-sm leading-[1.75] text-zinc-500">
+              Most{" "}
+              <strong className="font-semibold text-zinc-300">
+                AR-15 compatibility mistakes
+              </strong>{" "}
+              happen at the parts list stage: wrong gas system length for the
+              barrel, buffer weight that fights your stock, caliber mismatches
+              between upper and lower. Battl flags those conflicts automatically,
+              so you catch them before they cost you a return label.
+            </p>
+            <p className="text-sm leading-[1.75] text-zinc-500">
+              Whether you&apos;re planning your first rifle or spec&apos;ing a
+              dedicated precision upper, Battl Builders gives you a structured,
+              guided way to research parts and{" "}
+              <strong className="font-semibold text-zinc-300">
+                buy with confidence
+              </strong>
+              .
             </p>
           </div>
         </section>
 
-        {/* Footer strip */}
-        <footer className="mt-12 border-t border-zinc-900 pt-4 text-xs text-zinc-500">
-          <div className="flex flex-wrap items-center justify-between gap-3">
-            <span>
-              © {new Date().getFullYear()} BATTL BUILDERS
-              <span className="align-super text-[0.9em] ml-0.5">™</span>
-            </span>
-            <span className="text-zinc-600">
-              v0.1 • Import engine online • Builder UI in progress
-            </span>
+        {/* ── 7. Final CTA ── */}
+        <section className="border-t border-zinc-900 px-4 py-24 text-center">
+          <h2 className="mb-3 text-[36px] font-bold tracking-[-0.03em] text-white">
+            Your build starts here.
+          </h2>
+          <p className="mb-8 text-sm text-zinc-600">
+            Free. No account required. Takes five minutes to get rolling.
+          </p>
+          <Link
+            href="/builder"
+            data-umami-event="cta_start_build_clicked"
+            data-umami-event-location="final_cta"
+            className="inline-flex items-center gap-2 rounded-lg bg-amber-500/90 px-[38px] py-[15px] text-[15px] font-extrabold tracking-[0.03em] text-black shadow-[0_0_40px_rgba(251,191,36,0.2)] hover:bg-amber-400"
+          >
+            Start a Build →
+          </Link>
+        </section>
+
+        {/* ── 8. Footer ── */}
+        <footer className="border-t border-zinc-900">
+          <div className="mx-auto max-w-5xl px-4 py-12">
+            <div className="grid grid-cols-1 gap-10 sm:grid-cols-3">
+              {/* Brand */}
+              <div>
+                <Image
+                  src="/battl/battl-logo-mark-f.svg"
+                  alt="Battl Builders"
+                  width={160}
+                  height={32}
+                  className="mb-3 opacity-70"
+                />
+                <p className="text-xs leading-relaxed text-zinc-600">
+                  Free AR-15 build planner. No subscriptions. No sponsored rankings.
+                </p>
+              </div>
+
+              {/* Product links */}
+              <div>
+                <p className="mb-3 text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-500">
+                  Product
+                </p>
+                <ul className="space-y-2 text-sm text-zinc-500">
+                  <li>
+                    <Link href="/builder" className="hover:text-zinc-300">
+                      Builder
+                    </Link>
+                  </li>
+                  <li>
+                    <Link href="/guides" className="hover:text-zinc-300">
+                      Guides
+                    </Link>
+                  </li>
+                  <li>
+                    <Link href="/about" className="hover:text-zinc-300">
+                      About
+                    </Link>
+                  </li>
+                </ul>
+              </div>
+
+              {/* Newsletter */}
+              <div>
+                <p className="mb-1.5 text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-500">
+                  Stay in the loop
+                </p>
+                <p className="mb-3 text-xs text-zinc-600">
+                  Build tips and new features. No spam.
+                </p>
+                <NewsletterForm />
+              </div>
+            </div>
+          </div>
+
+          {/* Bottom bar */}
+          <div className="mx-auto flex max-w-5xl items-center justify-between border-t border-zinc-900/60 px-4 py-4 text-[11px] text-zinc-700">
+            <span>© {new Date().getFullYear()} BATTL BUILDERS™</span>
+            <div className="flex gap-4">
+              <Link href="/feedback" className="hover:text-zinc-500">
+                Send Feedback
+              </Link>
+              <Link href="/privacy" className="hover:text-zinc-500">
+                Privacy
+              </Link>
+              <Link href="/tos" className="hover:text-zinc-500">
+                Terms
+              </Link>
+            </div>
           </div>
         </footer>
       </div>

components/Banner.tsx

@@ -5,7 +5,7 @@ import { usePathname } from "next/navigation";
 
 export function Banner() {
   const pathname = usePathname();
-  if (pathname?.startsWith("/admin")) return null;
+  if (pathname?.startsWith("/admin") || pathname === "/") return null;
 
   return (
     <div className="w-full">

components/ChangelogTabs.tsx

@@ -0,0 +1,315 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { PortableTextRenderer } from '@/components/PortableTextRenderer'
+import { RoadmapItem } from '@/components/RoadmapItem'
+import { FeedbackForm } from '@/components/FeedbackForm'
+import type { ChangelogEntry, RoadmapItemData, Tab, VoteState } from '@/types/changelog'
+import { useAuth } from '@/context/AuthContext'
+import Link from 'next/link'
+
+const TABS: { id: Tab; label: string }[] = [
+  { id: 'whats-new', label: "What's New" },
+  { id: 'whats-next', label: "What's Next" },
+  { id: 'give-feedback', label: 'Give Feedback' },
+]
+
+const TAG_STYLES: Record<string, string> = {
+  feature: 'bg-amber-500/10 text-amber-400 border border-amber-500/25',
+  fix: 'bg-green-500/10 text-green-400 border border-green-500/20',
+  improvement: 'bg-blue-400/10 text-blue-400 border border-blue-400/20',
+}
+
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+}
+
+export function ChangelogTabs({
+  entries,
+  roadmapItems,
+}: {
+  entries: ChangelogEntry[]
+  roadmapItems: RoadmapItemData[]
+}) {
+  const [activeTab, setActiveTab] = useState<Tab>('whats-new')
+
+  const [voteState, setVoteState] = useState<Record<string, VoteState>>(
+    () =>
+      Object.fromEntries(
+        roadmapItems.map((item) => [
+          item._id,
+          { count: 0, voted: false, loading: false },
+        ])
+      )
+  )
+
+  const { user } = useAuth()
+  const [showSignInPrompt, setShowSignInPrompt] = useState(false)
+  const signInTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const [votesFetched, setVotesFetched] = useState(false)
+
+  // Clear sign-in prompt timer on unmount
+  useEffect(() => () => { if (signInTimerRef.current) clearTimeout(signInTimerRef.current) }, [])
+
+  // Stable key for roadmapItems identity — avoids unstable array reference in deps
+  const roadmapIdKey = roadmapItems.map((i) => i._id).join(',')
+
+  // Fetch vote state when the What's Next tab is first viewed
+  useEffect(() => {
+    if (activeTab !== 'whats-next' || votesFetched || !roadmapIdKey) return
+    setVotesFetched(true)
+
+    fetch(`/api/roadmap/votes?ids=${encodeURIComponent(roadmapIdKey)}`, {
+      credentials: 'include',
+    })
+      .then((r) => (r.ok ? r.json() : {}))
+      .then((data: Record<string, { count: number; voted: boolean }>) => {
+        setVoteState((prev) => {
+          const next = { ...prev }
+          for (const [id, v] of Object.entries(data)) {
+            next[id] = { count: v.count, voted: v.voted, loading: false }
+          }
+          return next
+        })
+      })
+      .catch(() => {
+        // Spring Boot not yet available — silently keep count=0
+      })
+  }, [activeTab, votesFetched, roadmapIdKey]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  async function handleVote(id: string) {
+    if (!user) {
+      if (signInTimerRef.current) clearTimeout(signInTimerRef.current)
+      setShowSignInPrompt(true)
+      signInTimerRef.current = setTimeout(() => setShowSignInPrompt(false), 4000)
+      return
+    }
+
+    const current = voteState[id] ?? { count: 0, voted: false, loading: false }
+
+    // Optimistic update
+    setVoteState((prev) => ({
+      ...prev,
+      [id]: {
+        count: current.voted ? current.count - 1 : current.count + 1,
+        voted: !current.voted,
+        loading: true,
+      },
+    }))
+
+    try {
+      const res = await fetch(`/api/roadmap/${encodeURIComponent(id)}/vote`, {
+        method: 'POST',
+        credentials: 'include',
+      })
+      if (res.ok) {
+        const data: { count: number; voted: boolean } = await res.json()
+        setVoteState((prev) => ({
+          ...prev,
+          [id]: { count: data.count, voted: data.voted, loading: false },
+        }))
+      } else {
+        setVoteState((prev) => ({ ...prev, [id]: { ...current, loading: false } }))
+      }
+    } catch {
+      setVoteState((prev) => ({ ...prev, [id]: { ...current, loading: false } }))
+    }
+  }
+
+  useEffect(() => {
+    const hash = window.location.hash.replace('#', '') as Tab
+    if (TABS.some((t) => t.id === hash)) setActiveTab(hash)
+  }, [])
+
+  function handleTabChange(tab: Tab) {
+    setActiveTab(tab)
+    window.history.replaceState(null, '', `#${tab}`)
+  }
+
+  return (
+    <div>
+      {/* Tab bar */}
+      <div className="mb-10 flex border-b border-zinc-800">
+        {TABS.map(({ id, label }) => (
+          <button
+            key={id}
+            onClick={() => handleTabChange(id)}
+            className={[
+              '-mb-px border-b-2 px-5 py-2.5 text-sm font-medium transition-colors',
+              activeTab === id
+                ? 'border-amber-400 text-amber-400'
+                : 'border-transparent text-zinc-500 hover:text-zinc-300',
+            ].join(' ')}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+
+      {/* ── What's New ── */}
+      {activeTab === 'whats-new' && (
+        <div>
+          {entries.length === 0 ? (
+            <p className="text-sm text-zinc-500">
+              No releases yet — check back soon.
+            </p>
+          ) : (
+            <div className="divide-y divide-zinc-900">
+              {entries.map((entry) => (
+                <div
+                  key={entry._id}
+                  className="grid grid-cols-[120px_1fr] gap-8 py-8"
+                >
+                  <div className="pt-1">
+                    <p className="font-mono text-xs font-bold text-amber-400">
+                      {entry.version}
+                    </p>
+                    <p className="mt-1 text-[11px] text-zinc-600">
+                      {formatDate(entry.publishedAt)}
+                    </p>
+                  </div>
+                  <div>
+                    {(entry.tags?.length ?? 0) > 0 && (
+                      <div className="mb-2.5 flex flex-wrap gap-1.5">
+                        {(entry.tags ?? []).map((tag) => (
+                          <span
+                            key={tag}
+                            className={`rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide ${
+                              TAG_STYLES[tag] ??
+                              'border border-zinc-700 bg-zinc-800 text-zinc-400'
+                            }`}
+                          >
+                            {tag}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                    <h3 className="mb-3 text-[17px] font-semibold text-white">
+                      {entry.title}
+                    </h3>
+                    {entry.body && (
+                      <div className="text-sm text-zinc-400">
+                        <PortableTextRenderer value={entry.body} />
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* ── What's Next ── */}
+      {activeTab === 'whats-next' && (
+        <div>
+          {roadmapItems.length === 0 ? (
+            <p className="text-sm text-zinc-500">
+              No roadmap items yet — check back soon.
+            </p>
+          ) : (
+            <>
+              {(() => {
+                const inProgress = roadmapItems.filter((i) => i.status === 'in-progress')
+                const planned = roadmapItems.filter((i) => i.status === 'planned')
+                return (
+                  <>
+                    {inProgress.length > 0 && (
+                      <div className="mb-8">
+                        <p className="mb-3 text-[10px] font-bold uppercase tracking-[0.18em] text-zinc-600">
+                          In Progress
+                        </p>
+                        <div className="flex flex-col gap-2.5">
+                          {inProgress.map((item) => (
+                            <RoadmapItem
+                              key={item._id}
+                              id={item._id}
+                              title={item.title}
+                              description={item.description}
+                              status={item.status}
+                              vote={
+                                voteState[item._id] ?? {
+                                  count: 0,
+                                  voted: false,
+                                  loading: false,
+                                }
+                              }
+                              onVote={handleVote}
+                            />
+                          ))}
+                        </div>
+                      </div>
+                    )}
+
+                    {planned.length > 0 && (
+                      <div>
+                        <p className="mb-3 text-[10px] font-bold uppercase tracking-[0.18em] text-zinc-600">
+                          Planned
+                        </p>
+                        <div className="flex flex-col gap-2.5">
+                          {planned.map((item) => (
+                            <RoadmapItem
+                              key={item._id}
+                              id={item._id}
+                              title={item.title}
+                              description={item.description}
+                              status={item.status}
+                              vote={
+                                voteState[item._id] ?? {
+                                  count: 0,
+                                  voted: false,
+                                  loading: false,
+                                }
+                              }
+                              onVote={handleVote}
+                            />
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </>
+                )
+              })()}
+
+              <p className="mt-8 text-xs text-zinc-600">
+                Don&apos;t see what you need?{' '}
+                <button
+                  onClick={() => handleTabChange('give-feedback')}
+                  className="underline underline-offset-2 hover:text-zinc-300"
+                >
+                  Give us feedback →
+                </button>
+              </p>
+
+              {showSignInPrompt && (
+                <p className="mt-3 text-xs text-amber-400">
+                  <Link href="/login" className="underline underline-offset-2 hover:text-amber-300">
+                    Sign in
+                  </Link>{' '}
+                  to upvote roadmap items.
+                </p>
+              )}
+            </>
+          )}
+        </div>
+      )}
+
+      {/* ── Give Feedback ── */}
+      {activeTab === 'give-feedback' && (
+        <div>
+          <div className="mb-8">
+            <h2 className="text-xl font-bold text-white">Tell us what you think.</h2>
+            <p className="mt-1.5 text-sm text-zinc-500">
+              Bug, feature idea, or general thought — we read everything.
+            </p>
+          </div>
+          <FeedbackForm />
+        </div>
+      )}
+    </div>
+  )
+}

components/FeedbackForm.tsx

@@ -0,0 +1,133 @@
+'use client'
+
+import { useState } from 'react'
+
+type Status = 'idle' | 'loading' | 'done' | 'error'
+
+const CATEGORIES = [
+  { value: 'BUG', label: 'Bug report' },
+  { value: 'FEATURE_REQUEST', label: 'Feature request' },
+  { value: 'GENERAL', label: 'General feedback' },
+]
+
+export function FeedbackForm({ onSuccess, autoFocus = false }: { onSuccess?: () => void; autoFocus?: boolean }) {
+  const [category, setCategory] = useState('BUG')
+  const [message, setMessage] = useState('')
+  const [email, setEmail] = useState('')
+  const [status, setStatus] = useState<Status>('idle')
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (!message.trim()) return
+    setStatus('loading')
+    try {
+      const res = await fetch('/api/feedback', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          category,
+          message: message.trim(),
+          email: email.trim() || undefined,
+        }),
+      })
+      if (res.ok) {
+        setStatus('done')
+        onSuccess?.()
+      } else {
+        setStatus('error')
+      }
+    } catch {
+      setStatus('error')
+    }
+  }
+
+  if (status === 'done') {
+    return (
+      <div className="py-6 text-center">
+        <p className="text-sm font-semibold text-amber-400">Thanks — we got it.</p>
+        <p className="mt-1 text-xs text-zinc-500">
+          We read everything. If you left an email we&apos;ll follow up.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-5">
+      <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
+        <div>
+          <label htmlFor="feedback-category" className="mb-2 block text-[11px] font-semibold uppercase tracking-wider text-zinc-500">
+            Category
+          </label>
+          <select
+            id="feedback-category"
+            value={category}
+            onChange={(e) => setCategory(e.target.value)}
+            disabled={status === 'loading'}
+            autoFocus={autoFocus}
+            className="w-full appearance-none rounded-lg border border-zinc-800 bg-zinc-950 px-3 py-2.5 text-sm text-zinc-200 focus:border-amber-500/40 focus:outline-none disabled:opacity-50"
+          >
+            {CATEGORIES.map((c) => (
+              <option key={c.value} value={c.value}>
+                {c.label}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div>
+          <label htmlFor="feedback-email" className="mb-2 block text-[11px] font-semibold uppercase tracking-wider text-zinc-500">
+            Email{' '}
+            <span className="font-normal normal-case tracking-normal text-zinc-600">
+              (optional — if you want a reply)
+            </span>
+          </label>
+          <input
+            id="feedback-email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="you@email.com"
+            disabled={status === 'loading'}
+            className="w-full rounded-lg border border-zinc-800 bg-zinc-950 px-3 py-2.5 text-sm text-zinc-200 placeholder-zinc-600 focus:border-amber-500/40 focus:outline-none disabled:opacity-50"
+          />
+        </div>
+      </div>
+
+      <div>
+        <label htmlFor="feedback-message" className="mb-2 block text-[11px] font-semibold uppercase tracking-wider text-zinc-500">
+          Message
+        </label>
+        <textarea
+          id="feedback-message"
+          value={message}
+          onChange={(e) => setMessage(e.target.value.slice(0, 1000))}
+          placeholder="What's on your mind?"
+          rows={5}
+          required
+          disabled={status === 'loading'}
+          className="w-full resize-y rounded-lg border border-zinc-800 bg-zinc-950 px-3 py-2.5 text-sm leading-relaxed text-zinc-200 placeholder-zinc-600 focus:border-amber-500/40 focus:outline-none disabled:opacity-50"
+        />
+        <p className="mt-1.5 text-right text-[11px] text-zinc-600">
+          {message.length} / 1000
+        </p>
+      </div>
+
+      <div className="flex items-center justify-between gap-4">
+        <p className="text-[11px] text-zinc-600">
+          We&apos;ll only use your email to follow up on your feedback.
+        </p>
+        <button
+          type="submit"
+          disabled={status === 'loading' || !message.trim()}
+          className="shrink-0 rounded-lg bg-amber-500/90 px-6 py-2.5 text-sm font-bold text-black hover:bg-amber-400 disabled:opacity-50"
+        >
+          {status === 'loading' ? 'Sending…' : 'Send Feedback →'}
+        </button>
+      </div>
+
+      {status === 'error' && (
+        <p className="text-xs text-red-400">Something went wrong. Try again.</p>
+      )}
+    </form>
+  )
+}

components/FeedbackModal.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { useEffect } from 'react'
+import { XMarkIcon } from '@heroicons/react/20/solid'
+import { FeedbackForm } from '@/components/FeedbackForm'
+
+export function FeedbackModal({
+  open,
+  onClose,
+}: {
+  open: boolean
+  onClose: () => void
+}) {
+  useEffect(() => {
+    if (!open) return
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [open, onClose])
+
+  if (!open) return null
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="feedback-modal-title"
+    >
+      <div
+        className="absolute inset-0 bg-black/70 backdrop-blur-sm"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <div className="relative z-10 w-full max-w-lg rounded-2xl border border-zinc-800 bg-zinc-950 p-7 shadow-2xl">
+        <div className="mb-5 flex items-center justify-between">
+          <h2 id="feedback-modal-title" className="text-base font-bold text-white">Send Feedback</h2>
+          <button
+            onClick={onClose}
+            className="text-zinc-500 hover:text-zinc-300"
+            aria-label="Close"
+          >
+            <XMarkIcon className="h-5 w-5" />
+          </button>
+        </div>
+        <FeedbackForm onSuccess={onClose} autoFocus />
+      </div>
+    </div>
+  )
+}

components/Footer.tsx

@@ -37,11 +37,7 @@ export function Footer() {
                   Builder
                 </Link>
               </li>
-              <li>
-                <Link href="/builds" className={linkClass}>
-                  Community Builds
-                </Link>
-              </li>
+
               <li>
                 <Link href="/vault" className={linkClass}>
                   My Builds

components/NewsletterForm.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useState } from "react";
+
+export function NewsletterForm() {
+  const [email, setEmail] = useState("");
+  const [status, setStatus] = useState<"idle" | "loading" | "done" | "error">(
+    "idle"
+  );
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!email) return;
+    setStatus("loading");
+    try {
+      const res = await fetch("/api/newsletter", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email }),
+      });
+      setStatus(res.ok ? "done" : "error");
+    } catch {
+      setStatus("error");
+    }
+  }
+
+  if (status === "done") {
+    return <p className="text-xs text-amber-400">You&apos;re on the list.</p>;
+  }
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit} className="flex gap-2">
+        <input
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="your@email.com"
+          required
+          disabled={status === "loading"}
+          className="min-w-0 flex-1 rounded-md border border-zinc-800 bg-zinc-950 px-3 py-2 text-xs text-zinc-200 placeholder-zinc-600 focus:border-amber-500/50 focus:outline-none disabled:opacity-50"
+        />
+        <button
+          type="submit"
+          disabled={status === "loading"}
+          className="rounded-md border border-amber-500/50 bg-amber-500/10 px-3 py-2 text-xs font-semibold text-amber-400 hover:bg-amber-500/20 disabled:opacity-50"
+        >
+          {status === "loading" ? "..." : "Subscribe"}
+        </button>
+      </form>
+      {status === "error" && (
+        <p className="mt-2 text-[11px] text-red-400">Something went wrong. Try again.</p>
+      )}
+    </div>
+  );
+}

components/RoadmapItem.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { ChevronUpIcon } from '@heroicons/react/20/solid'
+import type { VoteState } from '@/types/changelog'
+
+export function RoadmapItem({
+  id,
+  title,
+  description,
+  status,
+  vote,
+  onVote,
+}: {
+  id: string
+  title: string
+  description: string
+  status: 'planned' | 'in-progress'
+  vote: VoteState
+  onVote: (id: string) => void
+}) {
+  const statusBadgeClass =
+    status === 'in-progress'
+      ? 'border-amber-500/25 bg-amber-500/10 text-amber-400'
+      : 'border-zinc-700 bg-zinc-800/40 text-zinc-500'
+
+  return (
+    <div className="grid grid-cols-[52px_1fr_auto] items-center gap-4 rounded-xl border border-zinc-800/60 bg-zinc-950/60 p-5">
+      {/* Upvote button */}
+      <button
+        onClick={() => onVote(id)}
+        disabled={vote.loading}
+        title={vote.voted ? 'Remove vote' : 'Upvote'}
+        className={[
+          'flex h-[52px] w-11 flex-col items-center justify-center gap-0.5 rounded-lg border text-xs font-bold transition-colors disabled:opacity-50',
+          vote.voted
+            ? 'border-amber-500/40 bg-amber-500/10 text-amber-400'
+            : 'border-zinc-700 text-zinc-500 hover:border-amber-500/40 hover:text-amber-400',
+        ].join(' ')}
+      >
+        <ChevronUpIcon className="h-4 w-4" />
+        <span>{vote.count}</span>
+      </button>
+
+      {/* Content */}
+      <div>
+        <p className="text-sm font-semibold text-zinc-200">{title}</p>
+        <p className="mt-1 text-xs leading-relaxed text-zinc-500">{description}</p>
+      </div>
+
+      {/* Status badge */}
+      <span
+        className={`rounded-full border px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wider ${statusBadgeClass}`}
+      >
+        {status === 'in-progress' ? 'In Progress' : 'Planned'}
+      </span>
+    </div>
+  )
+}

components/TopNav.tsx

@@ -3,9 +3,11 @@
 
 import Link from "next/link";
 import Image from "next/image";
+import { useState } from "react";
 import { usePathname } from "next/navigation";
 
 import { useAuth } from "@/context/AuthContext";
+import { FeedbackModal } from "@/components/FeedbackModal";
 
 function NavLink({
   href,
@@ -38,8 +40,10 @@ function NavLink({
 export function TopNav() {
   const { user, logout, loading } = useAuth();
   const isAuthenticated = !!user;
+  const [feedbackOpen, setFeedbackOpen] = useState(false);
 
   return (
+    <>
     <header className="border-b border-zinc-200 bg-white/95 dark:border-zinc-800 dark:bg-black/95 backdrop-blur">
       <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-2">
         {/* Left: Brand / Home */}
@@ -60,11 +64,17 @@ export function TopNav() {
         <nav className="hidden sm:flex items-center gap-5">
           <NavLink href="/builder">Builder</NavLink>
           <NavLink href="/guides">Guides</NavLink>
-          <NavLink href="/builds">Community</NavLink>
         </nav>
 
         {/* Right side actions */}
         <div className="flex items-center justify-end gap-3 sm:gap-4">
+          <button
+            type="button"
+            onClick={() => setFeedbackOpen(true)}
+            className="hidden text-xs font-medium text-zinc-500 hover:text-zinc-300 transition-colors sm:inline"
+          >
+            Send Feedback
+          </button>
           {loading ? (
             <span className="text-xs text-zinc-500">Checking session…</span>
           ) : isAuthenticated ? (
@@ -103,6 +113,8 @@ export function TopNav() {
         </div>
       </div>
     </header>
+    <FeedbackModal open={feedbackOpen} onClose={() => setFeedbackOpen(false)} />
+    </>
   );
 }
 export default TopNav;

components/parts/PartsGrid.tsx

@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { Plus } from "lucide-react";
 import type { UiPart } from "@/types/uiPart";
+import { ProductImage } from './ProductImage';
 
 export default function PartsGrid(props: {
   viewMode: "card" | "list";
@@ -130,17 +131,12 @@ export default function PartsGrid(props: {
               >
                 {/* Image */}
                 <div className="hidden md:block justify-self-start">
-                  {part.imageUrl ? (
-                    // eslint-disable-next-line @next/next/no-img-element
-                    <img
-                      src={part.imageUrl}
-                      alt=""
-                      className="h-10 w-10 rounded object-cover border border-zinc-800 bg-zinc-950"
-                      loading="lazy"
-                    />
-                  ) : (
-                    <div className="h-10 w-10 rounded border border-zinc-800 bg-zinc-950" />
-                  )}
+                  <ProductImage
+                    src={part.imageUrl}
+                    alt=""
+                    className="h-10 w-10 rounded object-cover border border-zinc-800 bg-zinc-950"
+                    loading="lazy"
+                  />
                 </div>
 
                 {/* Part */}

components/parts/ProductDetailPageClient.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useState } from "react";
 import Link from "next/link";
+import { ProductImage } from './ProductImage';
 import PlatformSwitcher from "./PlatformSwitcher";
 
 const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL ?? "";
@@ -149,14 +150,11 @@ export default function ProductDetailPageClient(props: {
             <div className="flex flex-col gap-6 md:flex-row">
               <div className="w-full md:w-72">
                 <div className="aspect-square overflow-hidden rounded-lg border border-zinc-800 bg-black/30">
-                  {/* eslint-disable-next-line @next/next/no-img-element */}
-                  {p.imageUrl ? (
-                    <img src={p.imageUrl} alt={p.name} className="h-full w-full object-cover" />
-                  ) : (
-                    <div className="h-full w-full grid place-items-center text-sm text-zinc-600">
-                      No image
-                    </div>
-                  )}
+                  <ProductImage
+                    src={p.imageUrl}
+                    alt={p.name}
+                    className="h-full w-full object-cover"
+                  />
                 </div>
               </div>
 

components/parts/ProductImage.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+const PLACEHOLDER = '/images/product-placeholder.svg';
+
+interface ProductImageProps {
+  src?: string | null;
+  alt: string;
+  className?: string;
+  width?: number;
+  height?: number;
+  loading?: 'lazy' | 'eager';
+}
+
+export function ProductImage({ src, alt, className, width, height, loading }: ProductImageProps) {
+  const hasErrored = useRef(false);
+
+  // Reset the loop guard whenever src changes (e.g. navigating between products)
+  useEffect(() => {
+    hasErrored.current = false;
+  }, [src]);
+
+  function handleError(e: React.SyntheticEvent<HTMLImageElement>) {
+    if (hasErrored.current) return;
+    hasErrored.current = true;
+    e.currentTarget.src = PLACEHOLDER;
+  }
+
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={src ?? PLACEHOLDER}
+      alt={alt}
+      className={className}
+      width={width}
+      height={height}
+      loading={loading}
+      onError={handleError}
+    />
+  );
+}

docs/superpowers/plans/2026-03-30-homepage-redesign.md

@@ -0,0 +1,415 @@
+# Homepage Redesign Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace the beta-gated homepage with an open, conversion-focused landing page that drives users directly into the builder.
+
+**Architecture:** Two files change. `components/Banner.tsx` gets a one-line suppression for `/`. `app/page.tsx` is fully rewritten as a React Server Component with 8 sections and a page-level metadata export. No new files, no new components, no client state.
+
+**Tech Stack:** Next.js 15 App Router, React Server Components, TypeScript, Tailwind CSS, `@heroicons/react/20/solid`, `next/image`, `next/link`
+
+---
+
+## File Map
+
+| File | Change |
+|------|--------|
+| `components/Banner.tsx` | One-line change — add `|| pathname === "/"` to suppression check |
+| `app/page.tsx` | Full rewrite — RSC, metadata export, 8-section layout, new copy |
+
+---
+
+## Task 1: Suppress Banner on the Homepage
+
+**Files:**
+- Modify: `components/Banner.tsx:8`
+
+Context: `Banner` renders an "Early Access Beta" bar on every non-admin route. The new homepage is no longer beta-gated, so it must not show this bar.
+
+- [ ] **Step 1: Edit `components/Banner.tsx`**
+
+  Change line 8 from:
+  ```tsx
+  if (pathname?.startsWith("/admin")) return null;
+  ```
+  To:
+  ```tsx
+  if (pathname?.startsWith("/admin") || pathname === "/") return null;
+  ```
+
+- [ ] **Step 2: Verify manually**
+
+  Run `npm run dev` and open `http://localhost:3000`. Confirm the amber "Early Access Beta" bar is **not** visible. Navigate to `/builder` and confirm the banner **is** visible.
+
+- [ ] **Step 3: Commit**
+
+  ```bash
+  git add components/Banner.tsx
+  git commit -m "feat: suppress Early Access Beta banner on homepage"
+  ```
+
+---
+
+## Task 2: Rewrite `app/page.tsx` as a React Server Component
+
+**Files:**
+- Modify: `app/page.tsx` (full rewrite)
+
+Context: The current file is `"use client"` with a beta signup form. Remove all client state, the form, and the `/api/beta-signup` dependency. Replace with 8 static sections. Add a `metadata` export using `{ absolute: "..." }` to bypass the root layout's `template: "%s — Battl Builders"` pattern.
+
+- [ ] **Step 1: Replace `app/page.tsx` with the following content**
+
+```tsx
+import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import {
+  WrenchScrewdriverIcon,
+  ShieldExclamationIcon,
+  CurrencyDollarIcon,
+  BookmarkSquareIcon,
+  LinkIcon,
+  LockOpenIcon,
+} from "@heroicons/react/20/solid";
+
+export const metadata: Metadata = {
+  title: { absolute: "Battl Builders — Free AR-15 Build Planner" },
+  description:
+    "Pick compatible AR-15 parts, catch mismatches before you order, and compare live prices from real retailers. Free, no account required.",
+};
+
+export default function HomePage() {
+  return (
+    <main className="min-h-screen bg-black text-zinc-50">
+      {/* Grid background — retained from previous implementation */}
+      <div className="pointer-events-none fixed inset-0 z-0 overflow-hidden opacity-[0.55]">
+        <svg
+          width="100%"
+          height="100%"
+          preserveAspectRatio="xMidYMid slice"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <defs>
+            <pattern
+              id="battlGrid"
+              x="0"
+              y="0"
+              width="80"
+              height="80"
+              patternUnits="userSpaceOnUse"
+            >
+              <path
+                d="M 80 0 L 0 0 0 80"
+                fill="none"
+                stroke="#fbbf24"
+                strokeWidth="0.5"
+                strokeOpacity="0.35"
+              />
+            </pattern>
+            <pattern
+              id="battlHex"
+              width="140"
+              height="140"
+              patternUnits="userSpaceOnUse"
+            >
+              <path
+                d="M70 4 L136 40 L136 110 L70 146 L4 110 L4 40 Z"
+                fill="none"
+                stroke="#fbbf24"
+                strokeWidth="0.4"
+                strokeOpacity="0.25"
+              />
+            </pattern>
+          </defs>
+          <rect width="100%" height="100%" fill="url(#battlGrid)" />
+          <rect width="100%" height="100%" fill="url(#battlHex)" />
+        </svg>
+      </div>
+
+      <div className="relative z-10">
+        {/* ── 1. Nav ── */}
+        <nav className="mx-auto flex max-w-5xl items-center justify-between px-4 py-5">
+          <Image
+            src="/battl/battl-logo-mark-f.svg"
+            alt="Battl Builders"
+            width={260}
+            height={48}
+          />
+          <div className="flex items-center gap-2">
+            <Link
+              href="/login"
+              className="rounded-md border border-zinc-800 bg-zinc-950/60 px-3 py-2 text-xs font-medium text-zinc-200 hover:bg-zinc-900 hover:text-white"
+            >
+              Sign In
+            </Link>
+            <Link
+              href="/builder"
+              className="rounded-md border border-amber-500/70 bg-amber-500/90 px-3 py-2 text-xs font-semibold text-black hover:bg-amber-400"
+            >
+              Start a Build
+            </Link>
+          </div>
+        </nav>
+
+        {/* ── 2. Hero ── */}
+        <section className="mx-auto max-w-[760px] px-4 pb-16 pt-20 text-center">
+          <div className="mb-7 inline-flex items-center gap-2 rounded-full border border-white/10 bg-black/40 px-4 py-[5px] text-[10px] uppercase tracking-[0.2em] text-white/55">
+            <span className="h-1.5 w-1.5 flex-shrink-0 rounded-full bg-amber-400" />
+            AR-15 Builder &nbsp;·&nbsp; 100% Free
+          </div>
+
+          <h1 className="text-[clamp(38px,6.5vw,64px)] font-bold leading-[1.05] tracking-[-0.035em] text-white">
+            Stop Guessing.
+            <span className="block text-amber-300">Start Building.</span>
+          </h1>
+
+          <p className="mx-auto mt-6 max-w-[540px] text-[17px] leading-[1.65] text-zinc-400">
+            Not sure which parts work together? We&apos;ll walk you through it.
+            Pick your components, get warned about anything that won&apos;t fit,
+            and see real prices from real retailers — all in one place.
+          </p>
+
+          <div className="mt-10 flex flex-col items-center gap-3">
+            <Link
+              href="/builder"
+              className="inline-flex items-center gap-2 rounded-lg bg-amber-500/90 px-[38px] py-[15px] text-[15px] font-extrabold tracking-[0.03em] text-black shadow-[0_0_40px_rgba(251,191,36,0.2)] hover:bg-amber-400"
+            >
+              Start a Build →
+            </Link>
+            <span className="text-[11px] tracking-[0.05em] text-zinc-600">
+              100% Free · No account required
+            </span>
+          </div>
+        </section>
+
+        {/* ── 3. How It Works ── */}
+        <section className="mx-auto max-w-5xl px-4 py-[72px]">
+          <p className="mb-3 text-center text-[10px] font-bold uppercase tracking-[0.25em] text-amber-400 opacity-85">
+            THE PROCESS
+          </p>
+          <h2 className="mb-1.5 text-center text-[30px] font-bold tracking-[-0.025em] text-white">
+            3 Steps. One Battl-Ready Build.
+          </h2>
+          <p className="mb-12 text-center text-sm text-zinc-500">
+            No experience required. No part numbers to memorize.
+          </p>
+
+          <div
+            className="mx-auto grid max-w-[840px] grid-cols-1 overflow-hidden rounded-xl border border-zinc-900 bg-zinc-900 sm:grid-cols-3"
+            style={{ gap: "2px" }}
+          >
+            {[
+              {
+                num: "Step 01",
+                title: "Pick your parts",
+                body: "Browse real components organized by what they do — barrel, trigger, lower, upper, and more. No prior knowledge required.",
+              },
+              {
+                num: "Step 02",
+                title: "Flag the conflicts",
+                body: "Gas length, buffer weight, caliber — Battl catches the mismatches before you spend money on the wrong part.",
+              },
+              {
+                num: "Step 03",
+                title: "Price it. Pull the trigger.",
+                body: "Live prices from real retailers, side by side. Click through to buy. We never touch your order.",
+              },
+            ].map((step) => (
+              <div key={step.num} className="bg-[#0d0d0f] px-6 py-8">
+                <p className="mb-3.5 text-[11px] font-bold uppercase tracking-[0.15em] text-amber-400 opacity-80">
+                  {step.num}
+                </p>
+                <h3 className="mb-2.5 text-base font-bold tracking-[-0.01em] text-white">
+                  {step.title}
+                </h3>
+                <p className="text-[13px] leading-[1.6] text-zinc-500">
+                  {step.body}
+                </p>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* ── 4. Builder Preview Video ── */}
+        <section className="px-4 pb-[72px]">
+          <div className="mx-auto max-w-[900px] overflow-hidden rounded-[14px] border border-white/[0.07] bg-black shadow-[0_24px_80px_rgba(0,0,0,0.7),0_0_0_1px_rgba(251,191,36,0.05)]">
+            <div className="relative">
+              <video
+                autoPlay
+                loop
+                muted
+                playsInline
+                poster="/builder-preview.png"
+                className="w-full object-cover"
+              >
+                <source src="/builder-preview.mp4" type="video/mp4" />
+              </video>
+              <div
+                aria-hidden="true"
+                className="pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-black"
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* ── 5. Feature Cards ── */}
+        <section className="mx-auto max-w-5xl px-4 py-[72px]">
+          <p className="mb-3 text-center text-[10px] font-bold uppercase tracking-[0.25em] text-amber-400 opacity-85">
+            WHAT YOU GET
+          </p>
+          <h2 className="mb-2 text-center text-[30px] font-bold tracking-[-0.025em] text-white">
+            Built by gun nerds, for the everyday AR builder.
+          </h2>
+          <p className="mb-11 text-center text-[13px] uppercase tracking-[0.02em] text-zinc-600">
+            NO SUBSCRIPTIONS · NO SPONSORED RANKINGS · NO BULLSHIT
+          </p>
+
+          <div
+            className="mx-auto grid max-w-[900px] grid-cols-1 overflow-hidden rounded-xl border border-zinc-900 bg-zinc-900 sm:grid-cols-2 lg:grid-cols-3"
+            style={{ gap: "1px" }}
+          >
+            {(
+              [
+                {
+                  Icon: WrenchScrewdriverIcon,
+                  title: "Build by role, not part number",
+                  body: "Parts organized by function. Know what you need, not what SKU to search for.",
+                },
+                {
+                  Icon: ShieldExclamationIcon,
+                  title: "Conflicts caught early",
+                  body: "Gas system, buffer weight, caliber — flagged before checkout, not after the box arrives.",
+                },
+                {
+                  Icon: CurrencyDollarIcon,
+                  title: "Real prices. Real retailers.",
+                  body: "Running total with live prices. No estimated MSRP. What it actually costs, today.",
+                },
+                {
+                  Icon: BookmarkSquareIcon,
+                  title: "Save your work",
+                  body: "Free account. Save builds, pick up where you left off, run multiple configs in parallel.",
+                },
+                {
+                  Icon: LinkIcon,
+                  title: "Share the build",
+                  body: "One link. Your buddy sees the full parts list — no login, no friction, no excuses.",
+                },
+                {
+                  Icon: LockOpenIcon,
+                  title: "No gates. No friction.",
+                  body: "Browse and build freely. Create an account only when you're ready to save.",
+                },
+              ] as const
+            ).map(({ Icon, title, body }) => (
+              <div key={title} className="bg-[#0d0d0f] p-6">
+                <Icon
+                  className="mb-3.5 h-5 w-5 text-amber-400"
+                  aria-hidden="true"
+                />
+                <h3 className="mb-1.5 text-[13px] font-bold tracking-[-0.01em] text-zinc-200">
+                  {title}
+                </h3>
+                <p className="text-xs leading-[1.6] text-zinc-600">{body}</p>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* ── 6. SEO Copy Block ── */}
+        <section className="border-t border-zinc-900 px-4 py-[72px]">
+          <div className="mx-auto max-w-[680px]">
+            <h2 className="mb-4 text-[22px] font-bold tracking-[-0.02em] text-zinc-300">
+              What is Battl Builders?
+            </h2>
+            <p className="mb-3.5 text-sm leading-[1.75] text-zinc-500">
+              Battl Builders is a free{" "}
+              <strong className="font-semibold text-zinc-300">
+                AR-15 build planner
+              </strong>{" "}
+              — the tool you&apos;ve been doing in spreadsheets, rebuilt for how
+              builders actually work. Select parts by what they do, validate
+              compatibility as you go, and price your build across multiple
+              retailers without opening a new tab.
+            </p>
+            <p className="mb-3.5 text-sm leading-[1.75] text-zinc-500">
+              Most{" "}
+              <strong className="font-semibold text-zinc-300">
+                AR-15 compatibility mistakes
+              </strong>{" "}
+              happen at the parts list stage: wrong gas system length for the
+              barrel, buffer weight that fights your stock, caliber mismatches
+              between upper and lower. Battl flags those conflicts automatically,
+              so you catch them before they cost you a return label.
+            </p>
+            <p className="text-sm leading-[1.75] text-zinc-500">
+              Whether you&apos;re planning your first rifle or spec&apos;ing a
+              dedicated precision upper, Battl Builders gives you a structured,
+              guided way to research parts and{" "}
+              <strong className="font-semibold text-zinc-300">
+                buy with confidence
+              </strong>
+              .
+            </p>
+          </div>
+        </section>
+
+        {/* ── 7. Final CTA ── */}
+        <section className="border-t border-zinc-900 px-4 py-24 text-center">
+          <h2 className="mb-3 text-[36px] font-bold tracking-[-0.03em] text-white">
+            Your build starts here.
+          </h2>
+          <p className="mb-8 text-sm text-zinc-600">
+            Free. No account required. Takes five minutes to get rolling.
+          </p>
+          <Link
+            href="/builder"
+            className="inline-flex items-center gap-2 rounded-lg bg-amber-500/90 px-[38px] py-[15px] text-[15px] font-extrabold tracking-[0.03em] text-black shadow-[0_0_40px_rgba(251,191,36,0.2)] hover:bg-amber-400"
+          >
+            Start a Build →
+          </Link>
+        </section>
+
+        {/* ── 8. Footer ── */}
+        <footer className="mx-auto flex max-w-5xl items-center justify-between border-t border-zinc-900 px-4 py-5 text-[11px] text-zinc-700">
+          <span>© {new Date().getFullYear()} BATTL BUILDERS™</span>
+          <span>Free AR-15 build planner</span>
+        </footer>
+      </div>
+    </main>
+  );
+}
+```
+
+- [ ] **Step 2: Verify the build compiles**
+
+  ```bash
+  npm run build
+  ```
+
+  Expected: no TypeScript or Next.js errors related to `app/page.tsx`. (TS errors and ESLint are suppressed in this project per `next.config.mjs`, but the file should still render without runtime errors.)
+
+- [ ] **Step 3: Verify manually in the dev server**
+
+  Run `npm run dev` and open `http://localhost:3000`. Check all 8 sections are visible:
+  - Nav: logo left, "Sign In" (ghost) + "Start a Build" (amber) right
+  - Hero: badge pill, H1 with amber "Start Building.", subhead, amber CTA button, micro-copy
+  - How It Works: 3-step flush grid (Step 01–03)
+  - Video: rounded container playing `builder-preview.mp4` (or showing poster)
+  - Feature Cards: 6-card 3-col flush grid with Heroicons
+  - SEO Copy: left-aligned prose with bold keyword terms
+  - Final CTA: "Your build starts here." with amber button
+  - Footer: copyright left, "Free AR-15 build planner" right (no version string)
+
+  Also verify:
+  - No "Early Access Beta" banner visible on homepage
+  - Page `<title>` is "Battl Builders — Free AR-15 Build Planner" (not double-suffixed)
+  - Both CTA buttons link to `/builder`
+  - "Sign In" links to `/login`
+
+- [ ] **Step 4: Commit**
+
+  ```bash
+  git add app/page.tsx
+  git commit -m "feat: redesign homepage — RSC, 8 sections, remove beta form"
+  ```

docs/superpowers/specs/2026-03-30-changelog-feedback-design.md

@@ -0,0 +1,235 @@
+# Changelog, Roadmap & Feedback Design Spec
+
+**Date:** 2026-03-30
+**Status:** Approved
+
+---
+
+## Overview
+
+Add a public `/changelog` page with three tabs (What's New, What's Next, Give Feedback), auth-gated upvoting on roadmap items, a shared feedback form available as a standalone page and a modal triggered from the nav/footer, and an admin view for reviewing submissions.
+
+---
+
+## Goals
+
+- Publicly share release notes (changelog) and upcoming work (roadmap)
+- Let authenticated users upvote roadmap items to signal priority
+- Collect structured user feedback (bug / feature / general) with optional email
+- Store feedback in Spring Boot DB, reviewable in the admin panel
+- Add "Send Feedback" entry point to TopNav and homepage footer
+
+---
+
+## Routes
+
+| Route | Description |
+|---|---|
+| `/changelog` | Three-tab page: What's New / What's Next / Give Feedback |
+| `/feedback` | Standalone feedback page — full-width `FeedbackForm` |
+| `/admin/feedback` | Admin table of feedback submissions |
+
+Tab state on `/changelog` is driven by URL hash (`#whats-new`, `#whats-next`, `#give-feedback`) so tabs are deep-linkable. When no hash is present, the default active tab is **What's New**. The "Don't see what you need? Give us feedback →" nudge on the roadmap tab links to `#give-feedback`.
+
+### Middleware
+
+`/changelog` and `/feedback` are public routes — no authentication required. Both must be added to `isPublicPath()` in `middleware.ts` so they remain accessible when `LAUNCH_ONLY_ROOT=true`. The Next.js proxy routes `/api/feedback` (POST) and `/api/roadmap/votes` (GET) require no auth and will pass through middleware as-is since they are not prefixed with `/api/admin` or matched by `isProtectedLaunchPath()`. This is intentional and requires no middleware change for those API routes.
+
+---
+
+## Sanity Schema (two new document types)
+
+### `changelogEntry`
+
+| Field | Type | Notes |
+|---|---|---|
+| `title` | string | Display title of the release |
+| `version` | string | e.g. `v0.4` |
+| `publishedAt` | datetime | Controls ordering and display date |
+| `tags` | array of string | Values: `feature`, `fix`, `improvement` |
+| `body` | Portable Text | Rich text body |
+
+### `roadmapItem`
+
+| Field | Type | Notes |
+|---|---|---|
+| `title` | string | Short item title |
+| `description` | text | Plain-text description |
+| `status` | string enum | `planned` \| `in-progress` \| `shipped` |
+| `order` | number | Manual sort order within each status group |
+
+Both use the existing Sanity project (`zal102rv`, dataset `production`). GROQ query strings are added to `lib/sanity.ts` alongside the existing `postsQuery`. The RSC page **must call `sanityFetch()` from `lib/sanityFetch.ts`** to execute those queries — not `client.fetch()` from the Sanity client directly. This is the same pattern used by the guides page and is required for correct behaviour in Docker/server environments where CDN DNS resolution fails.
+
+Pages use `export const revalidate = 60` ISR, consistent with guides.
+
+The Sanity `_id` of each `roadmapItem` serves as the foreign key in Spring Boot's votes table — no additional ID field required. Sanity `_id` values are stable UUIDs.
+
+### GROQ Query Filters
+
+- `changelogEntriesQuery`: filter `_type == "changelogEntry" && publishedAt <= now()`, order by `publishedAt desc`
+- `roadmapItemsQuery`: filter `_type == "roadmapItem" && status != "shipped"`, order by `order asc` within each status group. **Shipped items are excluded from the roadmap query** — when an item ships, the author changes its status to `shipped` in Sanity and creates a corresponding `changelogEntry`. The roadmap tab never displays shipped items.
+
+---
+
+## Spring Boot Backend
+
+### New Tables
+
+**`feedback`**
+
+| Column | Type | Notes |
+|---|---|---|
+| `id` | UUID, PK | |
+| `category` | enum | `BUG`, `FEATURE_REQUEST`, `GENERAL` |
+| `message` | text | Max 1000 chars, enforced at API level |
+| `email` | varchar, nullable | Optional follow-up email |
+| `ip_address` | varchar | Captured server-side for spam visibility |
+| `user_agent` | varchar | Captured server-side for spam visibility |
+| `reviewed` | boolean, default false | Admin marks reviewed |
+| `created_at` | timestamp | |
+
+Rate limiting on `POST /api/v1/feedback` is deferred — IP and user agent capture provides enough visibility for manual spam review at this scale.
+
+**`roadmap_votes`**
+
+| Column | Type | Notes |
+|---|---|---|
+| `user_id` | UUID, FK → users | Part of composite PK |
+| `sanity_item_id` | varchar | Part of composite PK; Sanity `_id` of the roadmap item |
+| `created_at` | timestamp | |
+| | PRIMARY KEY(user_id, sanity_item_id) | Composite PK — enforces one vote per user per item |
+
+### New API Endpoints (Spring Boot)
+
+| Method | Path | Auth | Notes |
+|---|---|---|---|
+| `POST` | `/api/v1/feedback` | None | Creates feedback record; captures IP + user agent server-side |
+| `GET` | `/api/v1/roadmap/votes?ids=...` | Optional | Returns vote counts + current user's voted state for a list of Sanity IDs. For unauthenticated callers, returns vote counts with `voted: false` for all items — never 401. |
+| `POST` | `/api/v1/roadmap/{sanityId}/vote` | Required | Toggles vote on/off; returns new count and voted state |
+
+### Next.js Proxy Routes
+
+All three endpoints are proxied via `app/api/` — client code never calls Spring Boot directly, consistent with the existing proxy pattern.
+
+| Next.js route | Proxies to |
+|---|---|
+| `POST /api/feedback` | `POST /api/v1/feedback` |
+| `GET /api/roadmap/votes` | `GET /api/v1/roadmap/votes` |
+| `POST /api/roadmap/[sanityId]/vote` | `POST /api/v1/roadmap/:id/vote` |
+
+The Next.js proxy for `POST /api/feedback` captures `x-forwarded-for` and `user-agent` from the incoming request headers and forwards them to Spring Boot — the client form never sends these values.
+
+---
+
+## Frontend Components
+
+### New Files
+
+| File | Type | Responsibility |
+|---|---|---|
+| `app/(app)/changelog/page.tsx` | RSC | Fetches Sanity changelog + roadmap data via `sanityFetch`, renders tab shell + passes data as props |
+| `components/ChangelogTabs.tsx` | `"use client"` | Hash-based tab switcher (default: `#whats-new`), renders all three tab panels |
+| `components/RoadmapItem.tsx` | `"use client"` | Single roadmap item with optimistic upvote toggle |
+| `components/FeedbackForm.tsx` | `"use client"` | Shared form (category + message + email), posts to `/api/feedback` |
+| `components/FeedbackModal.tsx` | `"use client"` | Backdrop + dialog wrapper around `FeedbackForm` |
+| `app/(app)/feedback/page.tsx` | RSC | Standalone page rendering `FeedbackForm` full-width |
+| `app/admin/feedback/page.tsx` | RSC | Admin table of submissions, sortable + filterable |
+| `app/api/feedback/route.ts` | API route | Proxy to Spring Boot; forwards IP + user-agent headers |
+| `app/api/roadmap/votes/route.ts` | API route | Proxy to Spring Boot |
+| `app/api/roadmap/[sanityId]/vote/route.ts` | API route | Proxy to Spring Boot |
+
+### Modified Files
+
+| File | Change |
+|---|---|
+| `lib/sanity.ts` | Add `changelogEntriesQuery` and `roadmapItemsQuery` |
+| `middleware.ts` | Add `/changelog` and `/feedback` to `isPublicPath()` |
+| `components/TopNav.tsx` | Add "Send Feedback" ghost button; modal open state is local to `TopNav` via `useState` |
+| `app/page.tsx` | Add "Send Feedback" link to the homepage's inline footer (homepage-only; this is intentional — TopNav covers all other pages) |
+
+### FeedbackModal State
+
+`FeedbackModal` open/close state is managed locally in `TopNav` with `useState`. No global context or portal is required — the modal renders inside `TopNav`'s JSX and is positioned fixed via CSS. This is sufficient given "Send Feedback" is the only trigger point in the nav.
+
+---
+
+## UI Design
+
+### `/changelog` Page Header
+
+```
+BATTL BUILDERS            (small caps label)
+Updates                   (h1)
+What we've shipped and what's coming next.   (subhead)
+
+[ What's New ] [ What's Next ] [ Give Feedback ]   (tab bar, amber underline on active)
+```
+
+### What's New Tab
+
+Two-column entry layout: left column is version + date (120px fixed), right column is tags + title + body. Entries separated by bottom border, ordered newest first.
+
+Tag values rendered as small pill badges:
+- `feature` → amber
+- `fix` → green
+- `improvement` → blue
+
+### What's Next Tab
+
+Items grouped under "In Progress" and "Planned" headings. Shipped items are never shown here (filtered out in the GROQ query). Each item is a card with:
+- **Left:** upvote button (chevron up + count) — bordered pill, amber when voted
+- **Center:** title + description
+- **Right:** status badge (In Progress = amber, Planned = muted)
+
+Unauthenticated users clicking upvote are prompted to sign in (toast). Voted state is toggled optimistically — rolls back on error.
+
+Footer nudge: *"Don't see what you need? Give us feedback →"* links to `#give-feedback`.
+
+### Give Feedback Tab & `/feedback` Page
+
+Full-width form:
+- Category + email in a two-column row
+- Message textarea (full width, 1000 char limit with counter)
+- Submit button bottom-right, privacy note bottom-left
+
+### Feedback Modal
+
+Triggered by "Send Feedback" in TopNav and homepage inline footer. Same fields as the tab form. Full-width submit button inside the modal.
+
+---
+
+## Admin View (`/admin/feedback`)
+
+Table with columns: Date, Category, Message (truncated to 120 characters), Email, Reviewed. Sortable by date. Filterable by category (Bug / Feature / General) and reviewed status. Follows existing admin page patterns.
+
+---
+
+## Feedback Form Fields
+
+| Field | Required | Validation |
+|---|---|---|
+| Category | Yes | One of: Bug report, Feature request, General feedback |
+| Message | Yes | 1–1000 characters |
+| Email | No | Valid email format if provided |
+
+`ip_address` and `user_agent` are captured server-side in the Next.js proxy route — never sent from the client form.
+
+---
+
+## SEO Metadata
+
+Both `/changelog` and `/feedback` export a `metadata` object following the existing page pattern:
+
+- `/changelog`: `title: "What's New — Battl Builders"`, relevant description
+- `/feedback`: `title: "Send Feedback — Battl Builders"`, relevant description
+
+---
+
+## Out of Scope
+
+- Email notifications when feedback is submitted (separate task)
+- Sorting roadmap items by vote count (manual `order` field only for now)
+- Public display of vote counts on the changelog tab
+- Sanity Studio schema deployment (handled separately via Sanity CLI)
+- Spring Boot entity/migration code (lives in `ballistic-builder-spring` repo, tracked separately)
+- Rate limiting on the feedback endpoint (deferred; IP capture provides visibility at current scale)

docs/superpowers/specs/2026-03-30-homepage-redesign-design.md

@@ -0,0 +1,262 @@
+# Homepage Redesign — Design Spec
+
+**Date:** 2026-03-30
+**Status:** Approved
+
+---
+
+## Overview
+
+Replace the current beta-signup homepage with an open, conversion-focused landing page that drives users directly into the builder. Remove all gated beta content. Add a strong hero, explain the product clearly for the ICP (25–50 yr old male, firearm experience, not an expert builder), and provide two clear CTAs to start a build.
+
+---
+
+## Goals
+
+- Remove the beta signup form entirely
+- Add a strong, centered hero section
+- Explain what Battl Builder does in plain language (no jargon)
+- Drive users to `/builder` with a clear, prominent CTA
+- Add SEO-optimized copy targeting "AR-15 build planner" and "AR-15 compatibility" keywords
+- Convert `page.tsx` from a `"use client"` component to a React Server Component (no client state needed without the form)
+
+---
+
+## ICP
+
+**Primary:** 25–50 yr old male, owns or has shot an AR-15, wants to build one, not an expert builder. Doesn't know gas system lengths or buffer weights off the top of their head. Gets frustrated by forum rabbit holes and spreadsheets.
+
+**Tone:** Field ethos — direct, confident, no fluff. Sounds like a knowledgeable builder talking to someone who wants to learn. Not military cosplay. Respects the reader's intelligence without assuming expertise.
+
+---
+
+## Implementation Approach
+
+**Two files change: `app/page.tsx` (full rewrite) and `components/Banner.tsx` (one line).**
+
+### `app/page.tsx`
+
+- Remove `"use client"` directive — this becomes a React Server Component. There is no need to extract a client component because the form (the only source of client state) is being deleted entirely. The `metadata` export will work correctly once `"use client"` is removed.
+- Remove all beta signup state (`email`, `useCase`, `status`, `message`, `accepted`)
+- Remove `handleSubmit`, `TOS_VERSION`, and the `<form>` block
+- Remove the `/api/beta-signup` dependency from this page
+- Build all 8 sections as pure JSX with no client-side interactivity
+- Keep existing amber/zinc/black design tokens and grid background SVG
+- Keep `/builder-preview.mp4` video (autoplay, loop, muted, playsInline) with `poster="/builder-preview.png"` as fallback
+- Add a page-level `metadata` export (see SEO section below)
+- `new Date().getFullYear()` in the footer is safe in an RSC — evaluated at request time
+
+### `components/Banner.tsx`
+
+The `Banner` component currently renders an "Early Access Beta" bar on every non-admin route. Since the homepage is no longer beta-gated, suppress it on `/` by adding `|| pathname === "/"` to the existing exclusion check:
+
+```tsx
+if (pathname?.startsWith("/admin") || pathname === "/") return null;
+```
+
+No other changes to `Banner.tsx`.
+
+### Route group note
+
+`app/page.tsx` renders under `app/layout.tsx` only — it does **not** belong to the `(app)` route group and does not inherit `TopNav` or `Footer` from `app/(app)/layout.tsx`. The homepage renders its own inline nav and footer directly.
+
+---
+
+## Page-Level Metadata (SEO)
+
+Add the following export to `app/page.tsx`:
+
+```tsx
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: { absolute: "Battl Builders — Free AR-15 Build Planner" },
+  description:
+    "Pick compatible AR-15 parts, catch mismatches before you order, and compare live prices from real retailers. Free, no account required.",
+};
+```
+
+*Use `{ absolute: "..." }` to bypass the root layout's `template: "%s — Battl Builders"` pattern — otherwise the title renders as "Battl Builders — Free AR-15 Build Planner — Battl Builders".*
+
+---
+
+## Page Structure (8 Sections)
+
+### 1. Nav
+
+Inline nav baked into `page.tsx` (same pattern as current page).
+
+- **Left:** Battl Builders logo — `<Image src="/battl/battl-logo-mark-f.svg" alt="Battl Builders" width={260} height={48} />`
+- **Right (left to right):**
+  - "Sign In" — ghost style (`border border-zinc-800 bg-zinc-950/60 text-zinc-200`) → `/login`
+  - "Start a Build" — amber style (`border border-amber-500/70 bg-amber-500/90 text-black font-semibold`) → `/builder`
+  - *Intentional order change from current page: amber weight now goes to "Start a Build", not "Sign In". This is the primary conversion action.*
+
+---
+
+### 2. Hero
+
+**Layout:** Centered, full-width. Max-width ~760px, `text-center`.
+
+**Badge pill:**
+> AR-15 Builder · 100% Free
+
+**H1:**
+> Stop Guessing.
+> **Start Building.** *(amber — `text-amber-300`)*
+
+**Subhead:**
+> Not sure which parts work together? We'll walk you through it. Pick your components, get warned about anything that won't fit, and see real prices from real retailers — all in one place.
+
+**Primary CTA button** (amber, full-shadow glow, links to `/builder`):
+> Start a Build →
+
+**Micro-copy below button:**
+> 100% Free · No account required
+
+---
+
+### 3. How It Works
+
+**Section label (small caps):** THE PROCESS
+
+**H2:**
+> 3 Steps. One Battl-Ready Build.
+
+**Subhead:**
+> No experience required. No part numbers to memorize.
+
+**3 steps in a flush-bordered grid panel (no gap between cards, shared border):**
+
+| Step | Title | Body |
+|------|-------|------|
+| Step 01 | Pick your parts | Browse real components organized by what they do — barrel, trigger, lower, upper, and more. No prior knowledge required. |
+| Step 02 | Flag the conflicts | Gas length, buffer weight, caliber — Battl catches the mismatches before you spend money on the wrong part. |
+| Step 03 | Price it. Pull the trigger. | Live prices from real retailers, side by side. Click through to buy. We never touch your order. |
+
+---
+
+### 4. Builder Preview Video
+
+Full-width rounded container with subtle border glow.
+
+```tsx
+<video
+  autoPlay
+  loop
+  muted
+  playsInline
+  poster="/builder-preview.png"
+  className="w-full object-cover"
+>
+  <source src="/builder-preview.mp4" type="video/mp4" />
+</video>
+```
+
+- `poster="/builder-preview.png"` ensures the section always has visible content if the video hasn't loaded or is missing
+- Bottom fade gradient overlay: `bg-gradient-to-t from-black` (retain from current implementation)
+
+---
+
+### 5. Feature Cards
+
+**Section label:** WHAT YOU GET
+
+**H2:**
+> Built by gun nerds, for the everyday AR builder.
+
+**Subhead (uppercase, muted):**
+> NO SUBSCRIPTIONS · NO SPONSORED RANKINGS · NO BULLSHIT
+
+**6 cards in a 3-column flush-bordered grid panel:**
+
+| Heroicon | Title | Body |
+|----------|-------|------|
+| `WrenchScrewdriverIcon` | Build by role, not part number | Parts organized by function. Know what you need, not what SKU to search for. |
+| `ShieldExclamationIcon` | Conflicts caught early | Gas system, buffer weight, caliber — flagged before checkout, not after the box arrives. |
+| `CurrencyDollarIcon` | Real prices. Real retailers. | Running total with live prices. No estimated MSRP. What it actually costs, today. |
+| `BookmarkSquareIcon` | Save your work | Free account. Save builds, pick up where you left off, run multiple configs in parallel. |
+| `LinkIcon` | Share the build | One link. Your buddy sees the full parts list — no login, no friction, no excuses. |
+| `LockOpenIcon` | No gates. No friction. | Browse and build freely. Create an account only when you're ready to save. |
+
+All icons are from `@heroicons/react/20/solid`. `LinkIcon`, `LockOpenIcon`, and `BookmarkSquareIcon` are confirmed present in the installed version. `LinkIcon` and `LockOpenIcon` replace `BuildingStorefrontIcon` and `ChatBubbleLeftRightIcon` (the two beta-specific cards being removed).
+
+---
+
+### 6. SEO Copy Block
+
+Separated by a top border. Max-width ~680px, left-aligned prose.
+
+**H2:**
+> What is Battl Builders?
+
+**Paragraph 1:**
+> Battl Builders is a free **AR-15 build planner** — the tool you've been doing in spreadsheets, rebuilt for how builders actually work. Select parts by what they do, validate compatibility as you go, and price your build across multiple retailers without opening a new tab.
+
+**Paragraph 2:**
+> Most **AR-15 compatibility mistakes** happen at the parts list stage: wrong gas system length for the barrel, buffer weight that fights your stock, caliber mismatches between upper and lower. Battl flags those conflicts automatically, so you catch them before they cost you a return label.
+
+**Paragraph 3:**
+> Whether you're planning your first rifle or spec'ing a dedicated precision upper, Battl Builders gives you a structured, guided way to research parts and **buy with confidence**.
+
+Use `<strong>` tags (or `font-semibold text-zinc-300`) on the bolded terms above to reinforce keyword signal.
+
+**Target keywords:** "AR-15 build planner", "AR-15 compatibility tool", "AR-15 parts list builder"
+
+---
+
+### 7. Final CTA Section
+
+**H2:**
+> Your build starts here.
+
+**Subhead:**
+> Free. No account required. Takes five minutes to get rolling.
+
+**CTA button** (amber, same style as hero, links to `/builder`):
+> Start a Build →
+
+---
+
+### 8. Footer
+
+Stripped down from current version.
+
+- **Left:** `© {new Date().getFullYear()} BATTL BUILDERS™`
+- **Right:** "Free AR-15 build planner"
+- Remove `v0.1 • Import engine online • Builder UI in progress` version string entirely
+
+---
+
+## Design Tokens (unchanged)
+
+| Token | Value |
+|-------|-------|
+| Background | `bg-black` / `#09090b` |
+| Primary accent | `text-amber-300` / `border-amber-500` |
+| CTA button | `bg-amber-500/90` → `bg-amber-400` on hover |
+| Body text | `text-zinc-50` |
+| Muted text | `text-zinc-400` / `text-zinc-500` |
+| Card background | `bg-zinc-950` / `bg-black/30` |
+| Card border | `border-zinc-800` / `border-white/10` |
+| Grid background SVG | Retain existing pattern from current `page.tsx` lines 116–160 |
+
+---
+
+## Files Changed
+
+| File | Change |
+|------|--------|
+| `app/page.tsx` | Full rewrite — RSC, 8-section layout, new copy, metadata export |
+| `components/Banner.tsx` | One-line change — suppress banner on `/` |
+
+---
+
+## Out of Scope
+
+- Changes to `TopNav`, `Footer`, or any other shared layout component beyond `Banner.tsx`
+- Changes to the builder page, auth flow, or any API routes
+- Removing the `/api/beta-signup` route (separate cleanup task)
+- Mobile-specific breakpoint overrides beyond Tailwind responsive defaults
+- Animation or scroll effects
+- Any changes to `app/(app)/layout.tsx` or `app/layout.tsx`

lib/analytics.ts

@@ -0,0 +1,21 @@
+import type { BuilderSlotKey } from "@/types/builderSlots";
+
+export function trackBuildStarted() {
+  window.umami?.track("build_started");
+}
+
+export function trackPartSelected(slot: BuilderSlotKey, partName: string, partId: string) {
+  window.umami?.track("part_selected", { slot, part_name: partName, part_id: partId });
+}
+
+export function trackAffiliateLinkClicked(partName: string, retailer: string) {
+  window.umami?.track("affiliate_link_clicked", { part_name: partName, retailer });
+}
+
+export function trackBuildShared() {
+  window.umami?.track("build_shared");
+}
+
+export function trackBuildSaved() {
+  window.umami?.track("build_saved");
+}

lib/sanity.ts

@@ -55,3 +55,19 @@ export const postBySlugQuery = `
 export const postSlugsQuery = `
   *[_type == "post" && defined(slug.current)] { "slug": slug.current }
 `
+
+/** All changelog entries — published, newest first */
+export const changelogEntriesQuery = `
+  *[_type == "changelogEntry" && publishedAt <= now()]
+  | order(publishedAt desc) {
+    _id, title, version, publishedAt, tags, body
+  }
+`
+
+/** Roadmap items — excludes shipped, sorted by manual order */
+export const roadmapItemsQuery = `
+  *[_type == "roadmapItem" && status != "shipped"]
+  | order(order asc) {
+    _id, title, description, status, order
+  }
+`

middleware.ts

@@ -25,6 +25,10 @@ function isPublicPath(pathname: string) {
   if (pathname === "/guides") return true;
   if (pathname.startsWith("/guides/")) return true;
 
+  // Changelog and feedback — always public
+  if (pathname === "/changelog") return true;
+  if (pathname === "/feedback") return true;
+
   // Static / framework assets
   if (pathname.startsWith("/_next")) return true;
   if (pathname === "/favicon.ico") return true;

next.config.mjs

@@ -12,6 +12,10 @@ const nextConfig = {
         protocol: 'https',
         hostname: 'cdn.sanity.io',
       },
+      {
+        protocol: 'https',
+        hostname: 'minio.dev.gofwd.group',
+      },
     ],
   },
 

public/images/product-placeholder.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 3" preserveAspectRatio="xMidYMid meet">
+  <rect width="4" height="3" fill="#27272a"/>
+  <text
+    x="2"
+    y="1.35"
+    font-family="system-ui, sans-serif"
+    font-size="0.28"
+    fill="#71717a"
+    text-anchor="middle"
+    dominant-baseline="middle"
+  >Image</text>
+  <text
+    x="2"
+    y="1.75"
+    font-family="system-ui, sans-serif"
+    font-size="0.28"
+    fill="#71717a"
+    text-anchor="middle"
+    dominant-baseline="middle"
+  >Coming Soon</text>
+</svg>

types/changelog.ts

@@ -0,0 +1,24 @@
+export type ChangelogEntry = {
+  _id: string
+  title: string
+  version: string
+  publishedAt: string
+  tags?: string[]
+  body: unknown[]
+}
+
+export type RoadmapItemData = {
+  _id: string
+  title: string
+  description: string
+  status: 'planned' | 'in-progress'
+  order: number
+}
+
+export type Tab = 'whats-new' | 'whats-next' | 'give-feedback'
+
+export type VoteState = {
+  count: number
+  voted: boolean
+  loading: boolean
+}

types/umami.d.ts

@@ -0,0 +1,5 @@
+interface Window {
+  umami?: {
+    track: (eventName: string, properties?: Record<string, string | number | boolean>) => void;
+  };
+}