17 KiB
17 KiB
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 ` |
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.tsxChange line 8 from:
if (pathname?.startsWith("/admin")) return null;To:
if (pathname?.startsWith("/admin") || pathname === "/") return null; -
Step 2: Verify manually
Run
npm run devand openhttp://localhost:3000. Confirm the amber "Early Access Beta" bar is not visible. Navigate to/builderand confirm the banner is visible. -
Step 3: Commit
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.tsxwith the following content
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
npm run buildExpected: no TypeScript or Next.js errors related to
app/page.tsx. (TS errors and ESLint are suppressed in this project pernext.config.mjs, but the file should still render without runtime errors.) -
Step 3: Verify manually in the dev server
Run
npm run devand openhttp://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
git add app/page.tsx git commit -m "feat: redesign homepage — RSC, 8 sections, remove beta form"