313 lines
12 KiB
HTML
313 lines
12 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 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>
|