new homepage and event tracking

2026-03-30 10:40:24 -04:00
parent a1bb9e97e1
commit 2a97ae4190
14 changed files with 1973 additions and 3 deletions
@@ -0,0 +1,415 @@
+# 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"
+  ```