93 lines
4.4 KiB
TypeScript
93 lines
4.4 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>
|
|
|
|
{/* Origin 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">How it started</p>
|
|
<div className="border-l-4 border-accent pl-6">
|
|
<p className="italic text-muted leading-relaxed mb-4">
|
|
Muneeb had been working in and around the international development sector long enough to know the pattern: talented programme staff spending three days on a logframe that should take three hours. The sector knowledge was there. The writing ability was there. The tooling wasn't.
|
|
</p>
|
|
<p className="italic text-muted leading-relaxed mb-4">
|
|
He pushed a small team to build the thing he kept wishing existed — grant writing tools that actually understood how the sector works, not generic AI wrappers with a charity skin on top.
|
|
</p>
|
|
<p className="italic text-muted leading-relaxed">
|
|
That's what NGO Toolkit Lab is. Built by practitioners, for practitioners. Muneeb stays in the background — focused on making sure the team ships the right things, not on being the face of it.
|
|
</p>
|
|
</div>
|
|
<p className="mt-6 text-sm font-semibold">Muneeb Bin Yousuf</p>
|
|
<p className="text-xs text-gray-500">Operator & Adviser, 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>
|
|
</>
|
|
);
|
|
}
|