@@ -0,0 +1 @@
|
||||
{"reason":"idle timeout","timestamp":1774866020266}
|
||||
@@ -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"}
|
||||
@@ -0,0 +1 @@
|
||||
3712
|
||||
@@ -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 →
|
||||
</a>
|
||||
<span class="hero-micro">No account required · 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 & 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 →
|
||||
</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>
|
||||
@@ -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 · 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 →</a>
|
||||
<span class="hero-micro">100% Free · 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 · NO SPONSORED RANKINGS · 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 →</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>
|
||||
@@ -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 · 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 →</a>
|
||||
<span class="hero-micro">100% Free · 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 · NO SPONSORED RANKINGS · 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 →</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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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 });
|
||||
}
|
||||
+73
-2
@@ -1,6 +1,7 @@
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { NewsletterForm } from "@/components/NewsletterForm";
|
||||
import {
|
||||
WrenchScrewdriverIcon,
|
||||
ShieldExclamationIcon,
|
||||
@@ -76,12 +77,15 @@ export default function HomePage() {
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
href="/login"
|
||||
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>
|
||||
<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
|
||||
@@ -110,6 +114,8 @@ export default function HomePage() {
|
||||
<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 →
|
||||
@@ -300,6 +306,8 @@ export default function HomePage() {
|
||||
</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 →
|
||||
@@ -307,9 +315,72 @@ export default function HomePage() {
|
||||
</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">
|
||||
<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>
|
||||
<span>Free AR-15 build planner</span>
|
||||
<div className="flex gap-4">
|
||||
<Link href="/privacy" className="hover:text-zinc-500">
|
||||
Privacy
|
||||
</Link>
|
||||
<Link href="/tos" className="hover:text-zinc-500">
|
||||
Terms
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -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'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>
|
||||
);
|
||||
}
|
||||
@@ -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 · 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'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 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'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'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 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"
|
||||
```
|
||||
@@ -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`
|
||||
Reference in New Issue
Block a user