389 lines
16 KiB
TypeScript
389 lines
16 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { NewsletterForm } from "@/components/NewsletterForm";
|
|
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"
|
|
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
|
|
</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"
|
|
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 →
|
|
</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 gap-[2px] overflow-hidden rounded-xl border border-zinc-900 bg-zinc-900 sm:grid-cols-3"
|
|
>
|
|
{[
|
|
{
|
|
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 gap-[1px] overflow-hidden rounded-xl border border-zinc-900 bg-zinc-900 sm:grid-cols-2 lg:grid-cols-3"
|
|
>
|
|
{(
|
|
[
|
|
{
|
|
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"
|
|
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 →
|
|
</Link>
|
|
</section>
|
|
|
|
{/* ── 8. Footer ── */}
|
|
<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>
|
|
<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>
|
|
);
|
|
}
|