sean/shadow-gunbuilder-ai-proto
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

new homepage and event tracking
CI / deploy (push) Failing after 6s
Details

Browse Source
This commit is contained in:
Sean Strawsburg
2026-03-30 10:40:24 -04:00
parent a1bb9e97e1
commit 2a97ae4190
14 changed files with 1973 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.superpowers/brainstorm/3703-1774862900/.server-stopped
+1
View File
@@ -0,0 +1 @@
{"reason":"idle timeout","timestamp":1774866020266}
.superpowers/brainstorm/3703-1774862900/.server.log
+10
View File
@@ -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
+1
View File
@@ -0,0 +1 @@
3712
.superpowers/brainstorm/3703-1774862900/full-design-v1.html
+335
View File
@@ -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
+312
View File
@@ -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
+321
View File
@@ -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
+66
View File
@@ -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
+111
View File
@@ -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
+3
View File
@@ -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>