91 lines
4.5 KiB
TypeScript
91 lines
4.5 KiB
TypeScript
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>
|
||
);
|
||
}
|