new homepage and event tracking

app/api/newsletter/route.ts

@@ -0,0 +1,6 @@
+import { NextResponse } from "next/server";
+
+// TODO: integrate with email service (Resend, ConvertKit, etc.)
+export async function POST() {
+  return NextResponse.json({ ok: true });
+}

app/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
+import { NewsletterForm } from "@/components/NewsletterForm";
 import {
   WrenchScrewdriverIcon,
   ShieldExclamationIcon,
@@ -76,12 +77,15 @@ export default function HomePage() {
           <div className="flex items-center gap-2">
             <Link
               href="/login"
+              data-umami-event="nav_signin_clicked"
               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"
+              data-umami-event="cta_start_build_clicked"
+              data-umami-event-location="nav"
               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
@@ -110,6 +114,8 @@ export default function HomePage() {
           <div className="mt-10 flex flex-col items-center gap-3">
             <Link
               href="/builder"
+              data-umami-event="cta_start_build_clicked"
+              data-umami-event-location="hero"
               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 →
@@ -300,6 +306,8 @@ export default function HomePage() {
           </p>
           <Link
             href="/builder"
+            data-umami-event="cta_start_build_clicked"
+            data-umami-event-location="final_cta"
             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 →
@@ -307,9 +315,72 @@ export default function HomePage() {
         </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 className="border-t border-zinc-900">
+          <div className="mx-auto max-w-5xl px-4 py-12">
+            <div className="grid grid-cols-1 gap-10 sm:grid-cols-3">
+              {/* Brand */}
+              <div>
+                <Image
+                  src="/battl/battl-logo-mark-f.svg"
+                  alt="Battl Builders"
+                  width={160}
+                  height={32}
+                  className="mb-3 opacity-70"
+                />
+                <p className="text-xs leading-relaxed text-zinc-600">
+                  Free AR-15 build planner. No subscriptions. No sponsored rankings.
+                </p>
+              </div>
+
+              {/* Product links */}
+              <div>
+                <p className="mb-3 text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-500">
+                  Product
+                </p>
+                <ul className="space-y-2 text-sm text-zinc-500">
+                  <li>
+                    <Link href="/builder" className="hover:text-zinc-300">
+                      Builder
+                    </Link>
+                  </li>
+                  <li>
+                    <Link href="/guides" className="hover:text-zinc-300">
+                      Guides
+                    </Link>
+                  </li>
+                  <li>
+                    <Link href="/about" className="hover:text-zinc-300">
+                      About
+                    </Link>
+                  </li>
+                </ul>
+              </div>
+
+              {/* Newsletter */}
+              <div>
+                <p className="mb-1.5 text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-500">
+                  Stay in the loop
+                </p>
+                <p className="mb-3 text-xs text-zinc-600">
+                  Build tips and new features. No spam.
+                </p>
+                <NewsletterForm />
+              </div>
+            </div>
+          </div>
+
+          {/* Bottom bar */}
+          <div className="mx-auto flex max-w-5xl items-center justify-between border-t border-zinc-900/60 px-4 py-4 text-[11px] text-zinc-700">
+            <span>© {new Date().getFullYear()} BATTL BUILDERS™</span>
+            <div className="flex gap-4">
+              <Link href="/privacy" className="hover:text-zinc-500">
+                Privacy
+              </Link>
+              <Link href="/tos" className="hover:text-zinc-500">
+                Terms
+              </Link>
+            </div>
+          </div>
         </footer>
       </div>
     </main>