322 lines
13 KiB
HTML
322 lines
13 KiB
HTML
<!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>
|