shadow-gunbuilder-ai-proto/docs/superpowers/specs/2026-03-30-homepage-redesign-design.md

Homepage Redesign — Design Spec

Date: 2026-03-30 Status: Approved

---

Overview

Replace the current beta-signup homepage with an open, conversion-focused landing page that drives users directly into the builder. Remove all gated beta content. Add a strong hero, explain the product clearly for the ICP (25–50 yr old male, firearm experience, not an expert builder), and provide two clear CTAs to start a build.

---

Goals

• Remove the beta signup form entirely
• Add a strong, centered hero section
• Explain what Battl Builder does in plain language (no jargon)
• Drive users to /builder with a clear, prominent CTA
• Add SEO-optimized copy targeting "AR-15 build planner" and "AR-15 compatibility" keywords
• Convert page.tsx from a "use client" component to a React Server Component (no client state needed without the form)

---

ICP

Primary: 25–50 yr old male, owns or has shot an AR-15, wants to build one, not an expert builder. Doesn't know gas system lengths or buffer weights off the top of their head. Gets frustrated by forum rabbit holes and spreadsheets.

Tone: Field ethos — direct, confident, no fluff. Sounds like a knowledgeable builder talking to someone who wants to learn. Not military cosplay. Respects the reader's intelligence without assuming expertise.

---

Implementation Approach

Two files change: app/page.tsx (full rewrite) and components/Banner.tsx (one line).

app/page.tsx

• Remove "use client" directive — this becomes a React Server Component. There is no need to extract a client component because the form (the only source of client state) is being deleted entirely. The metadata export will work correctly once "use client" is removed.
• Remove all beta signup state (email, useCase, status, message, accepted)
• Remove handleSubmit, TOS_VERSION, and the <form> block
• Remove the /api/beta-signup dependency from this page
• Build all 8 sections as pure JSX with no client-side interactivity
• Keep existing amber/zinc/black design tokens and grid background SVG
• Keep /builder-preview.mp4 video (autoplay, loop, muted, playsInline) with poster="/builder-preview.png" as fallback
• Add a page-level metadata export (see SEO section below)
• new Date().getFullYear() in the footer is safe in an RSC — evaluated at request time

components/Banner.tsx

The Banner component currently renders an "Early Access Beta" bar on every non-admin route. Since the homepage is no longer beta-gated, suppress it on / by adding || pathname === "/" to the existing exclusion check:

if (pathname?.startsWith("/admin") || pathname === "/") return null;

No other changes to Banner.tsx.

Route group note

app/page.tsx renders under app/layout.tsx only — it does not belong to the (app) route group and does not inherit TopNav or Footer from app/(app)/layout.tsx. The homepage renders its own inline nav and footer directly.

---

Page-Level Metadata (SEO)

Add the following export to app/page.tsx:

import type { Metadata } from "next";

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.",
};

Use { absolute: "..." } to bypass the root layout's template: "%s — Battl Builders" pattern — otherwise the title renders as "Battl Builders — Free AR-15 Build Planner — Battl Builders".

---

Page Structure (8 Sections)

1. Nav

Inline nav baked into page.tsx (same pattern as current page).

• Left: Battl Builders logo — <Image src="/battl/battl-logo-mark-f.svg" alt="Battl Builders" width={260} height={48} />
• Right (left to right):
  • "Sign In" — ghost style (border border-zinc-800 bg-zinc-950/60 text-zinc-200) → /login
  • "Start a Build" — amber style (border border-amber-500/70 bg-amber-500/90 text-black font-semibold) → /builder
  • Intentional order change from current page: amber weight now goes to "Start a Build", not "Sign In". This is the primary conversion action.

---

2. Hero

Layout: Centered, full-width. Max-width ~760px, text-center.

Badge pill:

AR-15 Builder · 100% Free

H1:

Stop Guessing. Start Building. (amber — text-amber-300)

Subhead:

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.

Primary CTA button (amber, full-shadow glow, links to /builder):

Start a Build →

Micro-copy below button:

100% Free · No account required

---

3. How It Works

Section label (small caps): THE PROCESS

H2:

3 Steps. One Battl-Ready Build.

Subhead:

No experience required. No part numbers to memorize.

3 steps in a flush-bordered grid panel (no gap between cards, shared border):

Step	Title	Body
Step 01	Pick your parts	Browse real components organized by what they do — barrel, trigger, lower, upper, and more. No prior knowledge required.
Step 02	Flag the conflicts	Gas length, buffer weight, caliber — Battl catches the mismatches before you spend money on the wrong part.
Step 03	Price it. Pull the trigger.	Live prices from real retailers, side by side. Click through to buy. We never touch your order.

---

4. Builder Preview Video

Full-width rounded container with subtle border glow.

<video
  autoPlay
  loop
  muted
  playsInline
  poster="/builder-preview.png"
  className="w-full object-cover"
>
  <source src="/builder-preview.mp4" type="video/mp4" />
</video>

• poster="/builder-preview.png" ensures the section always has visible content if the video hasn't loaded or is missing
• Bottom fade gradient overlay: bg-gradient-to-t from-black (retain from current implementation)

---

5. Feature Cards

Section label: WHAT YOU GET

H2:

Built by gun nerds, for the everyday AR builder.

Subhead (uppercase, muted):

NO SUBSCRIPTIONS · NO SPONSORED RANKINGS · NO BULLSHIT

6 cards in a 3-column flush-bordered grid panel:

Heroicon	Title	Body
WrenchScrewdriverIcon	Build by role, not part number	Parts organized by function. Know what you need, not what SKU to search for.
ShieldExclamationIcon	Conflicts caught early	Gas system, buffer weight, caliber — flagged before checkout, not after the box arrives.
CurrencyDollarIcon	Real prices. Real retailers.	Running total with live prices. No estimated MSRP. What it actually costs, today.
BookmarkSquareIcon	Save your work	Free account. Save builds, pick up where you left off, run multiple configs in parallel.
LinkIcon	Share the build	One link. Your buddy sees the full parts list — no login, no friction, no excuses.
LockOpenIcon	No gates. No friction.	Browse and build freely. Create an account only when you're ready to save.

All icons are from @heroicons/react/20/solid. LinkIcon, LockOpenIcon, and BookmarkSquareIcon are confirmed present in the installed version. LinkIcon and LockOpenIcon replace BuildingStorefrontIcon and ChatBubbleLeftRightIcon (the two beta-specific cards being removed).

---

6. SEO Copy Block

Separated by a top border. Max-width ~680px, left-aligned prose.

H2:

What is Battl Builders?

Paragraph 1:

Battl Builders is a free AR-15 build planner — 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.

Paragraph 2:

Most AR-15 compatibility mistakes 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.

Paragraph 3:

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 buy with confidence.

Use <strong> tags (or font-semibold text-zinc-300) on the bolded terms above to reinforce keyword signal.

Target keywords: "AR-15 build planner", "AR-15 compatibility tool", "AR-15 parts list builder"

---

7. Final CTA Section

H2:

Your build starts here.

Subhead:

Free. No account required. Takes five minutes to get rolling.

CTA button (amber, same style as hero, links to /builder):

Start a Build →

---

8. Footer

Stripped down from current version.

• Left: © {new Date().getFullYear()} BATTL BUILDERS™
• Right: "Free AR-15 build planner"
• Remove v0.1 • Import engine online • Builder UI in progress version string entirely

---

Design Tokens (unchanged)

Token	Value
Background	bg-black / #09090b
Primary accent	text-amber-300 / border-amber-500
CTA button	bg-amber-500/90 → bg-amber-400 on hover
Body text	text-zinc-50
Muted text	text-zinc-400 / text-zinc-500
Card background	bg-zinc-950 / bg-black/30
Card border	border-zinc-800 / border-white/10
Grid background SVG	Retain existing pattern from current page.tsx lines 116–160

---

Files Changed

File	Change
app/page.tsx	Full rewrite — RSC, 8-section layout, new copy, metadata export
components/Banner.tsx	One-line change — suppress banner on /

---

Out of Scope

• Changes to TopNav, Footer, or any other shared layout component beyond Banner.tsx
• Changes to the builder page, auth flow, or any API routes
• Removing the /api/beta-signup route (separate cleanup task)
• Mobile-specific breakpoint overrides beyond Tailwind responsive defaults
• Animation or scroll effects
• Any changes to app/(app)/layout.tsx or app/layout.tsx