289 lines
13 KiB
TypeScript
289 lines
13 KiB
TypeScript
import Image from 'next/image';
|
|
|
|
export default function Home() {
|
|
return (
|
|
<>
|
|
{/* ── 1. Hero ── */}
|
|
<section className="bg-white">
|
|
<div className="max-w-6xl mx-auto px-6 py-24 grid md:grid-cols-2 gap-16 items-center">
|
|
<div>
|
|
<p className="text-xs tracking-widest font-semibold text-accent uppercase mb-3">
|
|
Grant writing tools
|
|
</p>
|
|
<h1 className="text-4xl md:text-5xl font-bold leading-tight mb-6">
|
|
Finish the logframe.<br />
|
|
Get your evening back.
|
|
</h1>
|
|
<p className="text-lg text-muted mb-8 max-w-md">
|
|
Professional-grade grant documents — logframes, theories of change, SMART indicators, funder rewrites — finished in minutes, not days.
|
|
</p>
|
|
<div className="flex gap-4 mb-8">
|
|
<a
|
|
href="/logframe"
|
|
className="bg-accent text-white font-medium px-6 py-3 rounded-md hover:bg-accent-dark transition-colors"
|
|
>
|
|
Try the Logframe Generator
|
|
</a>
|
|
<a
|
|
href="#tools"
|
|
className="border border-accent text-accent font-medium px-6 py-3 rounded-md hover:bg-accent-light transition-colors"
|
|
>
|
|
See all tools
|
|
</a>
|
|
</div>
|
|
<p className="text-sm text-muted">
|
|
Trusted by 120+ organisations across 30 countries. No signup required for your first document.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<Image
|
|
src="/images/hero-desk.jpg"
|
|
alt="Laptop on a clean desk with warm lighting"
|
|
width={640}
|
|
height={480}
|
|
className="rounded-xl w-full h-auto"
|
|
priority
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── 2. Why we built this ── */}
|
|
<section className="bg-dark text-white">
|
|
<div className="max-w-6xl mx-auto px-6 py-24">
|
|
<p className="text-xs tracking-widest font-semibold text-accent-light uppercase mb-6">Why we built this</p>
|
|
|
|
{/* Founder note */}
|
|
<div className="border-l-4 border-accent pl-6 max-w-2xl mb-16">
|
|
<p className="italic text-gray-300 leading-relaxed">
|
|
I watched talented programme managers burn weekends on logframes — documents that should take hours, not days.
|
|
The sector expertise was there. The tooling wasn't. So we built it.
|
|
</p>
|
|
<p className="mt-4 text-sm font-semibold text-white">Omair, Founder</p>
|
|
</div>
|
|
|
|
{/* Practitioner pain cards */}
|
|
<div className="grid md:grid-cols-3 gap-6">
|
|
{[
|
|
{ quote: 'I spent three days building a logframe from scratch for a £50k bid. We didn\'t even get shortlisted.', author: 'Programme Manager, East Africa' },
|
|
{ quote: 'Every funder wants a different format. I rewrite the same theory of change four times a quarter.', author: 'Grants Lead, UK-based INGO' },
|
|
{ quote: 'My indicators passed internal review but got torn apart by the evaluation panel.', author: 'M&E Officer, health sector NGO' },
|
|
].map((card, i) => (
|
|
<div key={i} className="border-l-2 border-accent pl-6">
|
|
<p className="italic text-gray-300 mb-3">"{card.quote}"</p>
|
|
<p className="text-xs text-gray-500">{card.author}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<p className="text-accent-light text-base mt-12">
|
|
You know the work. You know the sector. You just need tools that keep up with you.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── 3. Tools ── */}
|
|
<section id="tools" className="bg-warm">
|
|
<div className="max-w-6xl mx-auto px-6 py-24">
|
|
<p className="text-xs tracking-widest font-semibold text-accent uppercase mb-3">
|
|
What you can build
|
|
</p>
|
|
<h2 className="text-3xl font-bold mb-12">Four tools. Zero fluff.</h2>
|
|
<div className="grid md:grid-cols-2 gap-6 mb-16">
|
|
{[
|
|
{
|
|
title: 'Logframe Generator',
|
|
href: '/logframe',
|
|
points: [
|
|
'Goal, outcomes, outputs, activities — structured to donor spec',
|
|
'Objectively verifiable indicators and means of verification',
|
|
'Export to Word or Excel in one click',
|
|
],
|
|
},
|
|
{
|
|
title: 'SMART Indicators',
|
|
href: '/smart-indicators',
|
|
points: [
|
|
'Specific, measurable, achievable, relevant, time-bound',
|
|
'Aligned to your logframe outputs automatically',
|
|
'Evaluation-ready language that survives panel review',
|
|
],
|
|
},
|
|
{
|
|
title: 'Theory of Change',
|
|
href: '/theory-of-change',
|
|
points: [
|
|
'Inputs → activities → outputs → outcomes → impact',
|
|
'Assumptions and evidence gaps surfaced clearly',
|
|
'Visual and narrative formats for any funder',
|
|
],
|
|
},
|
|
{
|
|
title: 'Funder Rewriter',
|
|
href: '/funder-rewriter',
|
|
points: [
|
|
'Reshape existing proposals to match new funder priorities',
|
|
'Tone, structure, and emphasis adjusted per guidelines',
|
|
'Keep your voice — just sharpen the fit',
|
|
],
|
|
},
|
|
].map((tool) => (
|
|
<a
|
|
key={tool.href}
|
|
href={tool.href}
|
|
className="bg-white border border-gray-200 rounded-md p-8 hover:border-accent transition-colors"
|
|
>
|
|
<h3 className="text-xl font-bold mb-4">{tool.title}</h3>
|
|
<ul className="space-y-2 text-muted text-sm">
|
|
{tool.points.map((point, i) => (
|
|
<li key={i} className="flex gap-2">
|
|
<span className="text-accent mt-1">•</span>
|
|
<span>{point}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</a>
|
|
))}
|
|
</div>
|
|
<Image
|
|
src="/images/hands-typing.jpg"
|
|
alt="Hands typing on a keyboard"
|
|
width={1200}
|
|
height={500}
|
|
className="rounded-xl w-full h-64 object-cover"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── 4. How It Works ── */}
|
|
<section className="bg-white">
|
|
<div className="max-w-6xl mx-auto px-6 py-24 grid md:grid-cols-2 gap-16 items-center">
|
|
<Image
|
|
src="/images/hands-coffee.jpg"
|
|
alt="Hands holding coffee beside a laptop"
|
|
width={640}
|
|
height={480}
|
|
className="rounded-xl w-full h-auto"
|
|
/>
|
|
<div>
|
|
<p className="text-xs tracking-widest font-semibold text-accent uppercase mb-3">
|
|
How it works
|
|
</p>
|
|
<h2 className="text-3xl font-bold mb-10">Three steps. One sitting.</h2>
|
|
<div className="space-y-8">
|
|
{[
|
|
{
|
|
num: '01',
|
|
title: 'Describe your project',
|
|
desc: 'Fill in the guided form — title, sector, geography, donor requirements. Takes two minutes.',
|
|
},
|
|
{
|
|
num: '02',
|
|
title: 'Get a professional draft',
|
|
desc: 'A complete, structured document lands in under thirty seconds. Review it line by line.',
|
|
},
|
|
{
|
|
num: '03',
|
|
title: 'Refine and export',
|
|
desc: 'Edit anything inline. When it reads right, export as Word, Excel, or PDF.',
|
|
},
|
|
].map((step) => (
|
|
<div key={step.num} className="flex gap-4">
|
|
<span className="text-accent font-bold text-lg">{step.num}</span>
|
|
<div>
|
|
<h3 className="font-semibold mb-1">{step.title}</h3>
|
|
<p className="text-muted text-sm">{step.desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<a href="/logframe" className="inline-block mt-8 text-accent font-medium text-sm hover:text-accent-dark transition-colors">
|
|
Try the Logframe Generator →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── 5. Freemium ── */}
|
|
<section className="bg-sand">
|
|
<div className="max-w-6xl mx-auto px-6 py-24 text-center">
|
|
<p className="text-xs tracking-widest font-semibold text-accent uppercase mb-3">
|
|
Pricing
|
|
</p>
|
|
<h2 className="text-3xl font-bold mb-4">Start free. Upgrade when you need to.</h2>
|
|
<p className="text-muted mb-12 max-w-lg mx-auto">
|
|
Your first document is completely free — no signup, no credit card. Pay only when you need volume.
|
|
</p>
|
|
<div className="grid md:grid-cols-2 gap-6 max-w-2xl mx-auto">
|
|
<div className="bg-white border border-gray-200 rounded-md p-8 text-left">
|
|
<h3 className="font-bold text-lg mb-4">Free</h3>
|
|
<ul className="space-y-2 text-sm text-muted">
|
|
<li className="flex gap-2"><span className="text-accent">•</span>1 document per tool</li>
|
|
<li className="flex gap-2"><span className="text-accent">•</span>Word and Excel export</li>
|
|
<li className="flex gap-2"><span className="text-accent">•</span>No signup required</li>
|
|
</ul>
|
|
</div>
|
|
<div className="bg-white border border-accent rounded-md p-8 text-left">
|
|
<h3 className="font-bold text-lg mb-4">Pro <span className="text-accent text-sm font-normal">— coming soon</span></h3>
|
|
<ul className="space-y-2 text-sm text-muted">
|
|
<li className="flex gap-2"><span className="text-accent">•</span>Unlimited documents</li>
|
|
<li className="flex gap-2"><span className="text-accent">•</span>PDF export and templates</li>
|
|
<li className="flex gap-2"><span className="text-accent">•</span>Save and revisit past work</li>
|
|
<li className="flex gap-2"><span className="text-accent">•</span>Priority support</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<a
|
|
href="/logframe"
|
|
className="inline-block mt-10 bg-accent text-white font-medium px-6 py-3 rounded-md hover:bg-accent-dark transition-colors"
|
|
>
|
|
Generate your first document free
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── 6. Emotional Close ── */}
|
|
<section className="relative">
|
|
<Image
|
|
src="/images/window-dusk.jpg"
|
|
alt="Window at dusk with warm light"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-dark/70" />
|
|
<div className="relative max-w-6xl mx-auto px-6 py-24 text-center text-white">
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-6 max-w-2xl mx-auto">
|
|
You got into this work to change things — not to spend another weekend on a logframe.
|
|
</h2>
|
|
<p className="text-gray-300 mb-8 max-w-lg mx-auto">
|
|
Get the document done. Close the laptop. The evening is yours.
|
|
</p>
|
|
<a
|
|
href="/logframe"
|
|
className="inline-block border border-white text-white font-medium px-6 py-3 rounded-md hover:bg-white hover:text-dark transition-colors"
|
|
>
|
|
Start now — it's free
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── 7. Footer ── */}
|
|
<footer className="bg-dark text-gray-400">
|
|
<div className="max-w-6xl mx-auto px-6 py-12 flex flex-col md:flex-row items-center justify-between gap-6 text-sm">
|
|
<div>
|
|
<span className="text-white font-semibold">NGO Toolkit Lab</span>
|
|
<span className="ml-3 text-gray-500">Grant documents, done.</span>
|
|
</div>
|
|
<div className="flex gap-6">
|
|
<a href="/logframe" className="hover:text-white transition-colors">Logframe</a>
|
|
<a href="/smart-indicators" className="hover:text-white transition-colors">SMART Indicators</a>
|
|
<a href="/theory-of-change" className="hover:text-white transition-colors">Theory of Change</a>
|
|
<a href="/funder-rewriter" className="hover:text-white transition-colors">Funder Rewriter</a>
|
|
</div>
|
|
<p className="text-gray-500">© {new Date().getFullYear()} NGO Toolkit Lab</p>
|
|
</div>
|
|
</footer>
|
|
</>
|
|
);
|
|
}
|