# 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 `|| pathname === "/"` to suppression check |
| `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.tsx`**

  Change line 8 from:
  ```tsx
  if (pathname?.startsWith("/admin")) return null;
  ```
  To:
  ```tsx
  if (pathname?.startsWith("/admin") || pathname === "/") return null;
  ```

- [ ] **Step 2: Verify manually**

  Run `npm run dev` and open `http://localhost:3000`. Confirm the amber "Early Access Beta" bar is **not** visible. Navigate to `/builder` and confirm the banner **is** visible.

- [ ] **Step 3: Commit**

  ```bash
  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.tsx` with the following content**

```tsx
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 &nbsp;·&nbsp; 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&apos;ll walk you through it.
            Pick your components, get warned about anything that won&apos;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&apos;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&apos;re planning your first rifle or spec&apos;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**

  ```bash
  npm run build
  ```

  Expected: no TypeScript or Next.js errors related to `app/page.tsx`. (TS errors and ESLint are suppressed in this project per `next.config.mjs`, but the file should still render without runtime errors.)

- [ ] **Step 3: Verify manually in the dev server**

  Run `npm run dev` and open `http://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**

  ```bash
  git add app/page.tsx
  git commit -m "feat: redesign homepage — RSC, 8 sections, remove beta form"
  ```