Files
ngo-toolkit/app/about/page.tsx
T
2026-03-18 18:26:24 +08:00

93 lines
4.3 KiB
TypeScript

const pillars = [
{ title: 'Speed without shortcuts', desc: 'Professional-grade outputs in minutes. No templates, no copy-paste — real structured generation.' },
{ title: 'Built for practitioners', desc: 'Every feature exists because a grant writer asked for it. No feature exists because a PM thought it was clever.' },
{ title: 'Accessible by default', desc: 'Free tier forever. No signup wall. If you\'re writing grants for a small NGO, you shouldn\'t need a budget line to access tools.' },
];
const stats = [
{ value: '120+', label: 'Organisations served' },
{ value: '30', label: 'Countries' },
{ value: '4', label: 'Professional-grade tools' },
{ value: '<2 min', label: 'Average document time' },
];
export default function AboutPage() {
return (
<>
{/* Hero */}
<section className="bg-white">
<div className="max-w-6xl mx-auto px-6 py-24">
<p className="text-xs tracking-widest font-semibold text-accent uppercase mb-3">About</p>
<h1 className="text-4xl font-bold mb-4">We build tools for people who write grants.</h1>
<p className="text-muted max-w-lg">
NGO Toolkit Lab exists because grant writing is important work and the tooling around it has been stuck in 2005.
</p>
</div>
</section>
{/* Founder note */}
<section className="bg-warm">
<div className="max-w-6xl mx-auto px-6 py-24">
<div className="max-w-2xl">
<p className="text-xs tracking-widest font-semibold text-accent uppercase mb-6">From the founder</p>
<div className="border-l-4 border-accent pl-6">
<p className="italic text-muted leading-relaxed mb-4">
I spent years watching talented programme managers burn weekends on logframes and theories of change documents that should take hours, not days. The knowledge was there. The sector expertise was there. What was missing was tooling that respected their time.
</p>
<p className="italic text-muted leading-relaxed mb-4">
NGO Toolkit Lab started as a logframe generator I built for a friend submitting a DFID proposal. She finished in twenty minutes instead of three days. That felt worth pursuing.
</p>
<p className="italic text-muted leading-relaxed">
We're a small team. We ship tools that work. If something's broken or missing, tell us we fix things fast.
</p>
</div>
<p className="mt-6 text-sm font-semibold">Omair</p>
<p className="text-xs text-gray-500">Founder, NGO Toolkit Lab</p>
</div>
</div>
</section>
{/* Mission pillars */}
<section className="bg-white">
<div className="max-w-6xl mx-auto px-6 py-24">
<h2 className="text-3xl font-bold mb-12">What we believe</h2>
<div className="grid md:grid-cols-3 gap-8">
{pillars.map((p, i) => (
<div key={i}>
<h3 className="font-bold text-lg mb-2">{p.title}</h3>
<p className="text-muted text-sm">{p.desc}</p>
</div>
))}
</div>
</div>
</section>
{/* By the numbers */}
<section className="bg-sand">
<div className="max-w-6xl mx-auto px-6 py-24 text-center">
<h2 className="text-3xl font-bold mb-12">By the numbers</h2>
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
{stats.map((s, i) => (
<div key={i}>
<p className="text-3xl font-bold text-accent">{s.value}</p>
<p className="text-muted text-sm mt-1">{s.label}</p>
</div>
))}
</div>
</div>
</section>
{/* CTA */}
<section className="bg-dark text-white">
<div className="max-w-6xl mx-auto px-6 py-24 text-center">
<h2 className="text-3xl font-bold mb-4">Try the tools. Judge the work.</h2>
<p className="text-gray-300 mb-8 max-w-md mx-auto">No pitch deck. No demo call. Just open a tool and see what it builds.</p>
<a href="/logframe" className="inline-block bg-accent text-white font-medium px-6 py-3 rounded-md hover:bg-accent-dark transition-colors">
Try free
</a>
</div>
</section>
</>
);
}