Oliver/NGO
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add NGO landing page

Browse Source
This commit is contained in:
NGOs WebDev
2026-03-22 07:44:24 -03:00
commit a358fa6493
1 changed files with 248 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+248
View File
@@ -0,0 +1,248 @@
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>NGO ERP Landing | ODOO4projects</title>
<meta name="description" content="Purpose-built ERP platform for NGOs. Centralize programs, automate donor and grant reporting, and launch in weeks with ODOO4projects." />
<meta name="keywords" content="NGO ERP system, nonprofit management software, ERP for NGOs, NGO operations platform, ODOO for nonprofits" />
<link rel="icon" href="https://odoo4projects.com/web/image/website/1/favicon?unique=725c3af" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'brand-ink': '#201824',
'brand-primary': '#603F57',
'brand-accent': '#F762B4',
'brand-sunrise': '#F8B84A',
'brand-emerald': '#39B982',
'brand-snow': '#F5F2F7',
'brand-smoke': '#E5DCE8'
},
fontFamily: {
brand: ['Inter', 'Segoe UI', 'system-ui', 'sans-serif']
},
boxShadow: {
brand: '0 20px 60px rgba(32, 24, 36, 0.15)'
},
backgroundImage: {
'hero-gradient': 'radial-gradient(circle at top left, rgba(247,98,180,0.35), rgba(32,24,36,0.95))'
}
}
}
}
</script>
<style>
body { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; }
</style>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "NGO ERP Landing",
"about": "ERP for NGOs",
"publisher": {
"@type": "Organization",
"name": "ODOO4projects",
"logo": "https://odoo4projects.com/web/image/website/1/logo?unique=1be96c3"
},
"mainEntity": {
"@type": "SoftwareApplication",
"name": "ODOO4projects NGO ERP",
"applicationCategory": "BusinessApplication",
"operatingSystem": "Cloud",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD",
"description": "4-week free trial of NGO ERP workspace"
}
}
}
</script>
</head>
<body class="bg-brand-snow text-brand-ink">
<header class="bg-hero-gradient text-white">
<div class="max-w-6xl mx-auto px-6 py-6 flex flex-wrap items-center justify-between gap-4">
<div class="flex items-center gap-3">
<img src="https://odoo4projects.com/web/image/website/1/logo?unique=1be96c3" alt="ODOO4projects logo" class="h-10 w-auto" />
<span class="uppercase tracking-[0.3em] text-xs text-brand-smoke">ERP for NGOs</span>
</div>
<nav class="flex flex-wrap items-center gap-6 text-sm">
<a href="#blog" class="hover:text-brand-sunrise transition">Resources</a>
<a href="#trial" class="hover:text-brand-sunrise transition">Free Trial</a>
<a href="#meeting" class="hover:text-brand-sunrise transition">Book a Meeting</a>
</nav>
<div class="flex items-center gap-3">
<a href="#meeting" class="px-4 py-2 border border-white/40 rounded-full text-sm hover:bg-white/10 transition">Schedule a Meeting</a>
<a href="#trial" class="px-5 py-2 bg-brand-sunrise text-brand-ink font-semibold rounded-full text-sm shadow-brand hover:translate-y-0.5 transition" data-event="cta:trial">Sign Up for Free Trial</a>
</div>
</div>
<div class="max-w-6xl mx-auto px-6 py-16 grid md:grid-cols-2 gap-12 items-center">
<div>
<p class="text-brand-sunrise font-semibold mb-4">Unified NGO ERP Platform</p>
<h1 class="text-4xl md:text-5xl font-semibold leading-tight mb-6">Simplify every mission workflow with an ERP built for NGOs</h1>
<p class="text-lg text-white/80 mb-8">Consolidate programs, automate donor and grant reporting, and give every field office the same source of truth. Launch in weeks with templates tailored to humanitarian and community-impact teams.</p>
<div class="flex flex-wrap gap-4">
<a href="#trial" class="px-6 py-3 bg-brand-accent hover:bg-brand-sunrise text-brand-ink font-semibold rounded-full transition" data-event="cta:hero-trial">Sign Up for Free Trial</a>
<a href="#meeting" class="px-6 py-3 border border-white/40 rounded-full" data-event="cta:hero-meeting">Schedule a Meeting</a>
</div>
<div class="mt-10 grid grid-cols-2 gap-6 text-sm text-white/80">
<div>
<p class="text-3xl font-semibold text-white">38%</p>
<p>Faster donor &amp; grant reporting cycles</p>
</div>
<div>
<p class="text-3xl font-semibold text-white">2x</p>
<p>Increase in volunteer onboarding speed</p>
</div>
</div>
</div>
<div class="bg-white/10 backdrop-blur-lg rounded-3xl p-8 shadow-brand">
<div class="relative">
<img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=900&q=80" alt="NGO team collaborating" class="rounded-2xl" />
<div class="absolute -bottom-8 left-8 bg-white/90 text-brand-ink px-4 py-3 rounded-2xl shadow-lg">
<p class="text-xs uppercase tracking-widest text-brand-primary mb-1">Live KPI snapshot</p>
<p class="text-lg font-semibold">Program Impact Dashboard</p>
<p class="text-sm text-brand-primary">Realtime budgets • Volunteer hours • Donor health</p>
</div>
</div>
</div>
</div>
</header>
<section class="max-w-6xl mx-auto px-6 py-16 grid md:grid-cols-3 gap-8">
<article class="bg-white rounded-2xl p-6 shadow-brand border border-brand-smoke">
<h2 class="text-xl font-semibold mb-2">Unified program ops</h2>
<p class="text-sm text-brand-ink/80">Track beneficiaries, service delivery, and compliance tasks from a central NGO ERP workspace with audit-ready trails.</p>
</article>
<article class="bg-white rounded-2xl p-6 shadow-brand border border-brand-smoke">
<h2 class="text-xl font-semibold mb-2">Localized + multilingual</h2>
<p class="text-sm text-brand-ink/80">Configure English, Spanish, and German workspaces with consistent processes while respecting local regulations.</p>
</article>
<article class="bg-white rounded-2xl p-6 shadow-brand border border-brand-smoke">
<h2 class="text-xl font-semibold mb-2">Grant-ready analytics</h2>
<p class="text-sm text-brand-ink/80">Pre-built dashboards surface impact KPIs, SDG alignment, and donor touchpoints—exportable in seconds.</p>
</article>
</section>
<section id="blog" class="bg-white py-20">
<div class="max-w-6xl mx-auto px-6">
<div class="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-12">
<div>
<p class="text-sm uppercase tracking-[0.3em] text-brand-primary mb-3">Insights for NGO leaders</p>
<h2 class="text-3xl font-semibold">Blog &amp; resource hub</h2>
<p class="text-brand-ink/80">Stay ahead with tutorials, case studies, and playbooks for NGO ERP rollouts.</p>
</div>
<a href="#" class="text-brand-accent font-semibold">Browse all articles →</a>
</div>
<div class="grid gap-6 md:grid-cols-3">
<article class="border border-brand-smoke rounded-3xl p-6 h-full flex flex-col">
<p class="text-xs uppercase tracking-widest text-brand-primary mb-3">Grant compliance</p>
<h3 class="text-xl font-semibold mb-3">Grant-ready NGO ERP checklist</h3>
<p class="text-sm text-brand-ink/80 mb-6">Map every grant condition to automated workflows and never miss a reporting milestone again.</p>
<a href="#" class="mt-auto text-sm font-semibold text-brand-accent" aria-label="Read grant-ready ERP checklist">Read the guide</a>
</article>
<article class="border border-brand-smoke rounded-3xl p-6 h-full flex flex-col">
<p class="text-xs uppercase tracking-widest text-brand-primary mb-3">Field operations</p>
<h3 class="text-xl font-semibold mb-3">Digitize volunteer onboarding</h3>
<p class="text-sm text-brand-ink/80 mb-6">Standardize approvals, ID checks, and training with low-code workflows tied to your ERP.</p>
<a href="#" class="mt-auto text-sm font-semibold text-brand-accent" aria-label="Read volunteer onboarding article">View playbook</a>
</article>
<article class="border border-brand-smoke rounded-3xl p-6 h-full flex flex-col">
<p class="text-xs uppercase tracking-widest text-brand-primary mb-3">Impact storytelling</p>
<h3 class="text-xl font-semibold mb-3">From KPI to donor story</h3>
<p class="text-sm text-brand-ink/80 mb-6">Turn ERP data into visual narratives that inspire donors and board members.</p>
<a href="#" class="mt-auto text-sm font-semibold text-brand-accent" aria-label="Read donor storytelling article">See examples</a>
</article>
</div>
</div>
</section>
<section id="trial" class="bg-brand-ink text-white py-20">
<div class="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-12">
<div>
<p class="text-brand-sunrise text-sm uppercase tracking-[0.3em] mb-4">Sign up free trial</p>
<h2 class="text-3xl font-semibold mb-4">Launch your NGO ERP sandbox in under 5 minutes</h2>
<p class="text-white/80 mb-6">Experience localized NGO templates, donor CRM, and automation recipes. No credit card required—just choose your focus area and invite teammates.</p>
<ul class="space-y-4 text-sm text-white/80">
<li class="flex gap-3"><span class="text-brand-emerald">✔</span> Pre-loaded NGO chart of accounts &amp; grant tracking</li>
<li class="flex gap-3"><span class="text-brand-emerald">✔</span> Automated donor receipts + impact dashboards</li>
<li class="flex gap-3"><span class="text-brand-emerald">✔</span> Guided checklists for go-live within 30 days</li>
</ul>
</div>
<form class="bg-white text-brand-ink rounded-3xl p-8 shadow-brand space-y-5" data-event="form:trial">
<label class="block text-sm font-medium">Work email
<input type="email" required placeholder="impact@yourngo.org" class="mt-2 w-full rounded-2xl border border-brand-smoke px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-accent" />
</label>
<label class="block text-sm font-medium">Primary priority
<select class="mt-2 w-full rounded-2xl border border-brand-smoke px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-accent">
<option>Grant compliance reporting</option>
<option>Volunteer management</option>
<option>Donor CRM &amp; fundraising</option>
<option>Finance &amp; procurement</option>
</select>
</label>
<label class="block text-sm font-medium">Country / region
<input type="text" placeholder="e.g., Paraguay, LATAM" class="mt-2 w-full rounded-2xl border border-brand-smoke px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-accent" />
</label>
<p class="text-xs text-brand-ink/70">No credit card required. EU hosting &amp; GDPR-ready.</p>
<button type="submit" class="w-full py-3 rounded-2xl bg-brand-accent text-brand-ink font-semibold">Start Free Trial Now</button>
<p class="text-xs text-brand-ink/60 text-center">Need help? <a href="#meeting" class="underline">Book a guided setup call</a>.</p>
</form>
</div>
</section>
<section id="meeting" class="py-20 bg-white">
<div class="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
<div>
<p class="uppercase text-xs tracking-[0.3em] text-brand-primary mb-3">Have a meeting</p>
<h2 class="text-3xl font-semibold mb-4">See how your NGO can streamline operations, save time, and reduce errors</h2>
<p class="text-brand-ink/80 mb-6">A 30-minute live walkthrough tailored to your mission, covering localization, integrations, and governance. Walk away with a rollout roadmap.</p>
<ul class="space-y-4 text-sm text-brand-ink/80">
<li class="flex gap-3"><span class="text-brand-primary">◎</span> Baseline automation scoring</li>
<li class="flex gap-3"><span class="text-brand-primary">◎</span> Tech stack alignment &amp; data migration plan</li>
<li class="flex gap-3"><span class="text-brand-primary">◎</span> Budget templates &amp; total cost forecast</li>
</ul>
</div>
<div class="bg-brand-snow border border-brand-smoke rounded-3xl p-8 shadow-brand">
<p class="text-sm text-brand-primary font-semibold mb-2">Book a meeting</p>
<p class="text-brand-ink font-semibold text-xl mb-6">Choose a slot with an NGO ERP specialist</p>
<div class="space-y-4 text-sm">
<label class="block">Preferred week
<input type="week" class="mt-2 w-full rounded-2xl border border-brand-smoke px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-accent" />
</label>
<label class="block">Meeting format
<select class="mt-2 w-full rounded-2xl border border-brand-smoke px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-accent">
<option>Strategy deep-dive (45 min)</option>
<option>Live product tour (30 min)</option>
<option>Technical architecture review (60 min)</option>
</select>
</label>
<button class="w-full py-3 bg-brand-primary text-white font-semibold rounded-2xl" data-event="cta:meeting">Book a Meeting</button>
<p class="text-xs text-brand-ink/60 text-center">We send an agenda, video link, and checklist immediately.</p>
</div>
</div>
</div>
</section>
<footer class="bg-brand-ink text-white py-10">
<div class="max-w-6xl mx-auto px-6 flex flex-col md:flex-row gap-6 items-center justify-between text-sm">
<p>© <span id="year"></span> ODOO4projects — Hosting for the AI generation</p>
<div class="flex gap-4">
<a href="https://odoo4projects.com/support" class="hover:text-brand-sunrise">Support</a>
<a href="https://odoo4projects.com/legal" class="hover:text-brand-sunrise">Legal</a>
<a href="https://odoo4projects.com/contactus" class="hover:text-brand-sunrise">Contact</a>
</div>
</div>
</footer>
<script>
document.getElementById('year').textContent = new Date().getFullYear();
</script>
</body>
</html>