Add Democratic fundraising platform.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/MissionStatement.tsx

@@ -0,0 +1,90 @@
+import Link from "next/link";
+import { creditDisplayName, creditTicker } from "@/lib/credits-brand";
+import { appTitle } from "@/lib/public-env";
+
+export function MissionStatement() {
+  const title = appTitle();
+  const ticker = creditTicker();
+  const name = creditDisplayName();
+
+  return (
+    <section id="mission" className="scroll-mt-28 border-b border-white/10 bg-[#030712] py-10">
+      <div className="mx-auto max-w-6xl px-4 text-center sm:px-6">
+        <p className="text-xs uppercase tracking-[0.32em] text-sky-200/75">Why we’re here</p>
+        <h2 className="mx-auto mt-3 max-w-4xl text-3xl font-semibold leading-tight text-white sm:text-4xl">
+          A big-tent home for people who want democracy to win — and want to see how their support helps
+        </h2>
+        <p className="mx-auto mt-5 max-w-3xl text-lg leading-relaxed text-slate-400">
+          <strong className="text-slate-200">{title}</strong> is where small-dollar donors, volunteers, and curious neighbors meet the
+          same simple story: give if you can, stay for the community, and use{" "}
+          <strong className="text-slate-200">
+            {name} ({ticker})
+          </strong>{" "}
+          to cheer on field work, rank ideas, pick perks, and play a small part in something larger than a single campaign cycle.
+        </p>
+        <p className="mx-auto mt-4 max-w-3xl text-base leading-relaxed text-slate-500">
+          You do not need to be a political junkie. If you care about fair elections, good jobs, affordable care, and a country where
+          more voices count, you already belong. The tools below — missions, initiatives, polls, wallet, and games — are all optional
+          ways to stay involved after your first gift.
+        </p>
+
+        <div className="mt-8 rounded-3xl border border-white/10 bg-white/[0.04] p-5 text-left sm:p-6">
+          <p className="text-center text-xs uppercase tracking-[0.28em] text-slate-400">Pick your next step</p>
+          <p className="mx-auto mt-2 max-w-2xl text-center text-sm leading-relaxed text-slate-500">
+            Every link below opens something real you can do today — no insider knowledge required.
+          </p>
+          <ul className="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+            {[
+              {
+                title: "Mission pledges",
+                body: "Tell organizers which fights to fund first — voting access, climate jobs, care, and more.",
+                href: "/missions",
+              },
+              {
+                title: "Democratic initiatives",
+                body: "Publish one idea per account, or back someone else’s — totals show what the crowd wants next.",
+                href: "/initiatives",
+              },
+              {
+                title: "Straw poll",
+                body: "Cast ballots with your credits — a temperature check, not an official election.",
+                href: "/vote/next-president",
+              },
+              {
+                title: "Digital perks & raffles",
+                body: "Redeem rewards and enter drawings when the committee drops new SKUs.",
+                href: "/wallet",
+              },
+              {
+                title: "Supporter games",
+                body: "Optional skill and chance rooms — sign in, bring credits, play responsibly.",
+                href: "/casino",
+              },
+              {
+                title: "Live totals board",
+                body: "See dollars raised, gift count, and goal progress in one calm, public view.",
+                href: "/raised",
+              },
+              {
+                title: "Give now",
+                body: "Pick a tier, lock your rate at checkout, and add your name to the meter.",
+                href: "/donate",
+              },
+            ].map((item) => (
+              <li key={item.href}>
+                <Link
+                  href={item.href}
+                  className="group flex min-h-[9.5rem] flex-col items-center rounded-2xl border border-white/10 bg-black/30 p-4 text-center transition hover:border-sky-400/40 hover:bg-white/[0.06]"
+                >
+                  <p className="font-semibold leading-snug text-white">{item.title}</p>
+                  <p className="mt-2 flex-1 text-sm leading-relaxed text-slate-500">{item.body}</p>
+                  <p className="mt-3 text-xs font-medium text-sky-300 group-hover:text-white">Open →</p>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+}