# 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:

```tsx
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`:

```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.

```tsx
<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`