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