Oliver
2583 lines
106 KiB
HTML
2583 lines
106 KiB
HTML
<!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 Platform | ODOO4projects — For NGOs</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
|
||
rel="preload"
|
||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
||
as="style"
|
||
onload="
|
||
this.onload = null;
|
||
this.rel = 'stylesheet';
|
||
"
|
||
/>
|
||
<noscript
|
||
><link
|
||
rel="stylesheet"
|
||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
||
/></noscript>
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Lora:wght@600;700&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<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>
|
||
<script
|
||
defer
|
||
data-domain="ngo.odoo4projects.com"
|
||
src="https://plausible.odoo4projects.com/js/script.tagged-events.js"
|
||
></script>
|
||
<script>
|
||
window.plausible =
|
||
window.plausible ||
|
||
function () {
|
||
(window.plausible.q = window.plausible.q || []).push(
|
||
arguments,
|
||
);
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
/* ============================================================
|
||
NGO VARIANT — Warm, Human, Mission-Driven
|
||
Palette: cream #faf7f2 · terracotta #c05621 · forest #276749
|
||
warm-brown #44302e · muted #718096 · dark #2d3748
|
||
============================================================ */
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
:root {
|
||
--cream: #faf7f2;
|
||
--cream-card: #fffdf9;
|
||
--beige: #f5efe6;
|
||
--terra: #c05621;
|
||
--terra-deep: #9c4221;
|
||
--terra-soft: rgba(192, 86, 33, 0.12);
|
||
--forest: #276749;
|
||
--forest-deep: #1d4f38;
|
||
--forest-soft: rgba(39, 103, 73, 0.12);
|
||
--brown: #44302e;
|
||
--brown-soft: rgba(68, 48, 46, 0.1);
|
||
--muted: #718096;
|
||
--dark: #2d3748;
|
||
--white: #ffffff;
|
||
--border: #e8ddd3;
|
||
--shadow-sm: 0 2px 12px rgba(68, 48, 46, 0.08);
|
||
--shadow-md: 0 4px 24px rgba(68, 48, 46, 0.11);
|
||
--shadow-lg: 0 8px 44px rgba(68, 48, 46, 0.16);
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
font-family:
|
||
"Inter",
|
||
system-ui,
|
||
-apple-system,
|
||
sans-serif;
|
||
background-color: var(--cream);
|
||
color: var(--muted);
|
||
line-height: 1.7;
|
||
font-size: 1rem;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3 {
|
||
font-family: "Lora", Georgia, "Times New Roman", serif;
|
||
color: var(--brown);
|
||
line-height: 1.25;
|
||
}
|
||
|
||
img {
|
||
display: block;
|
||
max-width: 100%;
|
||
}
|
||
a {
|
||
text-decoration: none;
|
||
color: inherit;
|
||
}
|
||
|
||
.sr-only {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
padding: 0;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
clip: rect(0, 0, 0, 0);
|
||
white-space: nowrap;
|
||
border-width: 0;
|
||
}
|
||
|
||
.hidden {
|
||
display: none !important;
|
||
}
|
||
|
||
/* ── Buttons ───────────────────────────────────────────── */
|
||
.btn-terra {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: var(--terra);
|
||
color: var(--white);
|
||
font-family: "Inter", sans-serif;
|
||
font-weight: 700;
|
||
font-size: 0.9375rem;
|
||
padding: 0.875rem 2rem;
|
||
border-radius: 9999px;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition:
|
||
background-color 0.2s ease,
|
||
transform 0.15s ease,
|
||
box-shadow 0.2s ease;
|
||
white-space: nowrap;
|
||
letter-spacing: 0.01em;
|
||
box-shadow: 0 2px 8px rgba(192, 86, 33, 0.35);
|
||
}
|
||
.btn-terra:hover {
|
||
background-color: var(--terra-deep);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 20px rgba(192, 86, 33, 0.4);
|
||
}
|
||
|
||
.btn-outline-white {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: transparent;
|
||
color: var(--white);
|
||
font-family: "Inter", sans-serif;
|
||
font-weight: 600;
|
||
font-size: 0.9375rem;
|
||
padding: 0.875rem 2rem;
|
||
border-radius: 9999px;
|
||
border: 2px solid rgba(255, 255, 255, 0.55);
|
||
cursor: pointer;
|
||
transition:
|
||
background-color 0.2s ease,
|
||
border-color 0.2s ease;
|
||
white-space: nowrap;
|
||
}
|
||
.btn-outline-white:hover {
|
||
background-color: rgba(255, 255, 255, 0.12);
|
||
border-color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
/* ── Navbar ─────────────────────────────────────────────── */
|
||
.ngo-navbar {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 30;
|
||
padding: 1.5rem 0;
|
||
}
|
||
.ngo-navbar__inner {
|
||
max-width: 72rem;
|
||
margin: 0 auto;
|
||
padding: 0 1.75rem;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 1rem;
|
||
}
|
||
.ngo-navbar__brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.875rem;
|
||
}
|
||
.ngo-navbar__logo {
|
||
height: 2.5rem;
|
||
width: auto;
|
||
}
|
||
.ngo-navbar__badge {
|
||
font-size: 0.65rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.25em;
|
||
text-transform: uppercase;
|
||
color: rgba(255, 255, 255, 0.65);
|
||
}
|
||
.ngo-navbar__nav {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 2.25rem;
|
||
}
|
||
.ngo-navbar__nav a {
|
||
font-size: 0.9rem;
|
||
font-weight: 500;
|
||
color: rgba(255, 255, 255, 0.82);
|
||
transition: color 0.2s;
|
||
}
|
||
.ngo-navbar__nav a:hover {
|
||
color: var(--white);
|
||
}
|
||
.ngo-navbar__actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.875rem;
|
||
}
|
||
.lang-select {
|
||
background-color: rgba(255, 255, 255, 0.14);
|
||
border: 1px solid rgba(255, 255, 255, 0.32);
|
||
color: var(--white);
|
||
font-size: 0.8375rem;
|
||
font-family: "Inter", sans-serif;
|
||
border-radius: 9999px;
|
||
padding: 0.45rem 1rem;
|
||
cursor: pointer;
|
||
outline: none;
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
transition: background-color 0.2s;
|
||
}
|
||
.lang-select:focus {
|
||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
|
||
}
|
||
.lang-select option {
|
||
background-color: var(--brown);
|
||
color: var(--white);
|
||
}
|
||
|
||
/* ── Hero ───────────────────────────────────────────────── */
|
||
.hero-wrapper {
|
||
position: relative;
|
||
min-height: 100svh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
background-image: url("https://odoo4projects.com/web/image/785-c14164bb/india.webp");
|
||
background-size: cover;
|
||
background-position: center 30%;
|
||
background-repeat: no-repeat;
|
||
}
|
||
.hero-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(
|
||
140deg,
|
||
rgba(68, 48, 46, 0.88) 0%,
|
||
rgba(156, 60, 20, 0.68) 40%,
|
||
rgba(39, 103, 73, 0.62) 100%
|
||
);
|
||
}
|
||
.hero-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
max-width: 72rem;
|
||
margin: 0 auto;
|
||
padding: 9rem 1.75rem 5.5rem;
|
||
display: grid;
|
||
grid-template-columns: 55fr 45fr;
|
||
gap: 4rem;
|
||
align-items: center;
|
||
}
|
||
|
||
/* Hero — text column */
|
||
.hero-pill {
|
||
display: inline-block;
|
||
font-size: 0.8125rem;
|
||
font-weight: 600;
|
||
color: rgba(255, 255, 255, 0.92);
|
||
letter-spacing: 0.06em;
|
||
background-color: rgba(192, 86, 33, 0.3);
|
||
border: 1px solid rgba(192, 86, 33, 0.55);
|
||
border-radius: 9999px;
|
||
padding: 0.3rem 1.1rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
.hero-headline {
|
||
font-family: "Lora", Georgia, serif;
|
||
font-size: clamp(2.1rem, 4.2vw, 3.35rem);
|
||
font-weight: 700;
|
||
color: var(--white);
|
||
line-height: 1.22;
|
||
margin-bottom: 1.35rem;
|
||
}
|
||
.hero-subheadline {
|
||
font-size: 1.0625rem;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
line-height: 1.78;
|
||
margin-bottom: 2.5rem;
|
||
max-width: 540px;
|
||
}
|
||
.hero-ctas {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 1rem;
|
||
margin-bottom: 3.25rem;
|
||
}
|
||
.hero-stats {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 1.5rem;
|
||
padding-top: 1.5rem;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.18);
|
||
}
|
||
.hero-stat__num {
|
||
font-family: "Inter", sans-serif;
|
||
font-size: 2.5rem;
|
||
font-weight: 700;
|
||
color: var(--white);
|
||
line-height: 1;
|
||
margin-bottom: 0.35rem;
|
||
}
|
||
.hero-stat__label {
|
||
font-size: 0.84rem;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Hero — KPI card column */
|
||
.hero-card-col {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.hero-kpi-card {
|
||
background-color: rgba(255, 255, 255, 0.11);
|
||
backdrop-filter: blur(14px);
|
||
-webkit-backdrop-filter: blur(14px);
|
||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||
border-radius: 2.25rem;
|
||
padding: 2.5rem 2.25rem 2rem;
|
||
width: 100%;
|
||
max-width: 370px;
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
.hero-kpi-card__badge {
|
||
font-size: 0.68rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.22em;
|
||
color: rgba(255, 255, 255, 0.58);
|
||
margin-bottom: 0.85rem;
|
||
}
|
||
.hero-kpi-card__title {
|
||
font-family: "Lora", Georgia, serif;
|
||
font-size: 1.55rem;
|
||
font-weight: 700;
|
||
color: var(--white);
|
||
margin-bottom: 0.5rem;
|
||
line-height: 1.3;
|
||
}
|
||
.hero-kpi-card__body {
|
||
font-size: 0.875rem;
|
||
color: rgba(255, 255, 255, 0.68);
|
||
line-height: 1.6;
|
||
margin-bottom: 2rem;
|
||
}
|
||
/* ── Bundle checklist (replaces bar chart) ─────── */
|
||
.bundle-list {
|
||
list-style: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
.bundle-list li {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 0.55rem;
|
||
font-size: 0.78rem;
|
||
color: rgba(255, 255, 255, 0.88);
|
||
line-height: 1.45;
|
||
}
|
||
.bundle-check {
|
||
flex-shrink: 0;
|
||
width: 1.35rem;
|
||
height: 1.35rem;
|
||
border-radius: 50%;
|
||
background-color: rgba(39, 103, 73, 0.55);
|
||
border: 1.5px solid rgba(39, 103, 73, 0.9);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.6rem;
|
||
font-weight: 800;
|
||
color: #fff;
|
||
}
|
||
.bundle-footnote {
|
||
font-size: 0.68rem;
|
||
color: rgba(255, 255, 255, 0.38);
|
||
text-align: left;
|
||
letter-spacing: 0.03em;
|
||
font-style: italic;
|
||
margin-top: 0.25rem;
|
||
}
|
||
|
||
/* ── Value Props ────────────────────────────────────────── */
|
||
.values-section {
|
||
max-width: 72rem;
|
||
margin: 0 auto;
|
||
padding: 5.5rem 1.75rem 4.5rem;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 2rem;
|
||
}
|
||
.value-card {
|
||
background-color: var(--white);
|
||
border-radius: 2.25rem;
|
||
padding: 2.5rem 2.25rem;
|
||
border-left: 5px solid var(--terra);
|
||
box-shadow: var(--shadow-md);
|
||
transition:
|
||
transform 0.22s ease,
|
||
box-shadow 0.22s ease;
|
||
}
|
||
.value-card:nth-child(2) {
|
||
border-left-color: var(--forest);
|
||
}
|
||
.value-card:nth-child(3) {
|
||
border-left-color: var(--brown);
|
||
}
|
||
.value-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
.value-icon {
|
||
width: 3.25rem;
|
||
height: 3.25rem;
|
||
border-radius: 1.125rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.6rem;
|
||
margin-bottom: 1.35rem;
|
||
}
|
||
.value-card:nth-child(1) .value-icon {
|
||
background-color: var(--terra-soft);
|
||
}
|
||
.value-card:nth-child(2) .value-icon {
|
||
background-color: var(--forest-soft);
|
||
}
|
||
.value-card:nth-child(3) .value-icon {
|
||
background-color: var(--brown-soft);
|
||
}
|
||
.value-card h2 {
|
||
font-size: 1.15rem;
|
||
font-weight: 700;
|
||
color: var(--brown);
|
||
margin-bottom: 0.7rem;
|
||
line-height: 1.35;
|
||
}
|
||
.value-card p {
|
||
font-size: 0.9125rem;
|
||
color: var(--muted);
|
||
line-height: 1.72;
|
||
}
|
||
|
||
/* ── Impact Numbers Strip ───────────────────────────────── */
|
||
.impact-strip {
|
||
background: linear-gradient(
|
||
118deg,
|
||
var(--terra) 0%,
|
||
#a44418 55%,
|
||
var(--terra-deep) 100%
|
||
);
|
||
padding: 4.5rem 1.75rem;
|
||
}
|
||
.impact-strip__inner {
|
||
max-width: 72rem;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 2rem;
|
||
text-align: center;
|
||
}
|
||
.impact-item {
|
||
}
|
||
.impact-item__divider {
|
||
display: none;
|
||
}
|
||
.impact-num {
|
||
font-family: "Inter", sans-serif;
|
||
font-size: clamp(2.25rem, 4vw, 3.1rem);
|
||
font-weight: 700;
|
||
color: var(--white);
|
||
line-height: 1;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
.impact-label {
|
||
font-size: 0.875rem;
|
||
color: rgba(255, 255, 255, 0.78);
|
||
font-weight: 500;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* ── Section Shared Helpers ─────────────────────────────── */
|
||
.section-tagline {
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.26em;
|
||
color: var(--terra);
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
.section-title {
|
||
font-family: "Lora", Georgia, serif;
|
||
font-size: clamp(1.8rem, 3vw, 2.55rem);
|
||
font-weight: 700;
|
||
color: var(--brown);
|
||
margin-bottom: 0.6rem;
|
||
line-height: 1.25;
|
||
}
|
||
.section-subtitle {
|
||
font-size: 1rem;
|
||
color: var(--muted);
|
||
line-height: 1.65;
|
||
}
|
||
|
||
/* ── Blog Section ───────────────────────────────────────── */
|
||
.blog-section {
|
||
background-color: var(--beige);
|
||
padding: 5.5rem 0;
|
||
}
|
||
.blog-inner {
|
||
max-width: 72rem;
|
||
margin: 0 auto;
|
||
padding: 0 1.75rem;
|
||
}
|
||
.blog-header {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
gap: 1.5rem;
|
||
margin-bottom: 3rem;
|
||
}
|
||
#blog-toggle {
|
||
background: none;
|
||
border: none;
|
||
font-family: "Inter", sans-serif;
|
||
font-size: 0.9375rem;
|
||
font-weight: 600;
|
||
color: var(--terra);
|
||
cursor: pointer;
|
||
padding: 0;
|
||
transition: color 0.2s;
|
||
text-decoration: underline;
|
||
text-underline-offset: 3px;
|
||
}
|
||
#blog-toggle:hover {
|
||
color: var(--terra-deep);
|
||
}
|
||
#blog-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 1.875rem;
|
||
}
|
||
#blog-error {
|
||
font-size: 0.875rem;
|
||
color: var(--muted);
|
||
margin-top: 1.5rem;
|
||
}
|
||
|
||
/* Blog cards (injected by JS) */
|
||
.blog-card {
|
||
background-color: var(--white);
|
||
border-radius: 2rem;
|
||
padding: 2rem 1.875rem 1.875rem;
|
||
border-top: 4px solid var(--terra);
|
||
box-shadow: var(--shadow-md);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
transition:
|
||
transform 0.22s ease,
|
||
box-shadow 0.22s ease;
|
||
}
|
||
.blog-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
.blog-card-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
.blog-card-area {
|
||
font-size: 0.68rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.18em;
|
||
color: var(--terra);
|
||
}
|
||
.blog-card-date {
|
||
font-size: 0.78rem;
|
||
color: var(--muted);
|
||
}
|
||
.blog-card-title {
|
||
font-family: "Lora", Georgia, serif;
|
||
font-size: 1.1rem;
|
||
font-weight: 700;
|
||
color: var(--brown);
|
||
line-height: 1.4;
|
||
}
|
||
.blog-card-teaser {
|
||
font-size: 0.875rem;
|
||
color: var(--muted);
|
||
line-height: 1.68;
|
||
flex: 1;
|
||
}
|
||
.blog-card-btn {
|
||
display: inline-block;
|
||
align-self: flex-start;
|
||
margin-top: 0.375rem;
|
||
background: none;
|
||
border: none;
|
||
font-family: "Inter", sans-serif;
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
color: var(--terra);
|
||
cursor: pointer;
|
||
padding: 0;
|
||
transition: color 0.2s;
|
||
text-decoration: underline;
|
||
text-underline-offset: 3px;
|
||
}
|
||
.blog-card-btn:hover {
|
||
color: var(--terra-deep);
|
||
}
|
||
|
||
/* ── Trial Section ──────────────────────────────────────── */
|
||
.trial-section {
|
||
background-color: var(--forest);
|
||
padding: 5.5rem 0;
|
||
}
|
||
.trial-inner {
|
||
max-width: 64rem;
|
||
margin: 0 auto;
|
||
padding: 0 1.75rem;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 4rem;
|
||
align-items: start;
|
||
}
|
||
.trial-tagline {
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.26em;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
margin-bottom: 0.875rem;
|
||
}
|
||
.trial-heading {
|
||
font-family: "Lora", Georgia, serif;
|
||
font-size: clamp(1.7rem, 2.6vw, 2.25rem);
|
||
font-weight: 700;
|
||
color: var(--white);
|
||
line-height: 1.28;
|
||
margin-bottom: 1.1rem;
|
||
}
|
||
.trial-body-text {
|
||
font-size: 0.9375rem;
|
||
color: rgba(255, 255, 255, 0.75);
|
||
line-height: 1.78;
|
||
margin-bottom: 2rem;
|
||
}
|
||
.trial-bullets {
|
||
list-style: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
.trial-bullet {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 0.875rem;
|
||
font-size: 0.9rem;
|
||
color: rgba(255, 255, 255, 0.78);
|
||
line-height: 1.6;
|
||
}
|
||
.trial-bullet__icon {
|
||
flex-shrink: 0;
|
||
width: 1.4rem;
|
||
height: 1.4rem;
|
||
border-radius: 9999px;
|
||
background-color: rgba(255, 255, 255, 0.14);
|
||
border: 1.5px solid rgba(255, 255, 255, 0.3);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.62rem;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
margin-top: 0.1rem;
|
||
}
|
||
|
||
/* Trial Form */
|
||
#trial-form-wrapper {
|
||
position: relative;
|
||
}
|
||
|
||
#trial-form {
|
||
background-color: var(--white);
|
||
border-radius: 2.5rem;
|
||
padding: 2.75rem 2.5rem;
|
||
box-shadow: var(--shadow-lg);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.375rem;
|
||
}
|
||
.form-fieldset {
|
||
border: none;
|
||
padding: 0;
|
||
}
|
||
.form-legend {
|
||
display: block;
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
color: var(--brown);
|
||
margin-bottom: 0.875rem;
|
||
}
|
||
.form-radio-group {
|
||
display: flex;
|
||
gap: 0.75rem;
|
||
}
|
||
.form-radio-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.55rem;
|
||
flex: 1;
|
||
border: 1.5px solid var(--border);
|
||
border-radius: 1.35rem;
|
||
padding: 0.8rem 1.1rem;
|
||
cursor: pointer;
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
color: var(--brown);
|
||
transition:
|
||
border-color 0.2s,
|
||
background-color 0.2s;
|
||
}
|
||
.form-radio-label:hover {
|
||
border-color: var(--terra);
|
||
background-color: rgba(192, 86, 33, 0.04);
|
||
}
|
||
.form-radio-label input[type="radio"] {
|
||
accent-color: var(--terra);
|
||
}
|
||
.form-label {
|
||
display: block;
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
color: var(--brown);
|
||
}
|
||
.form-label > span {
|
||
display: block;
|
||
margin-bottom: 0.55rem;
|
||
}
|
||
.form-input,
|
||
.form-select {
|
||
display: block;
|
||
width: 100%;
|
||
border: 1.5px solid var(--border);
|
||
border-radius: 1.1rem;
|
||
padding: 0.8rem 1.15rem;
|
||
font-size: 0.9125rem;
|
||
font-family: "Inter", sans-serif;
|
||
color: var(--brown);
|
||
background-color: var(--cream-card);
|
||
outline: none;
|
||
transition:
|
||
border-color 0.2s,
|
||
box-shadow 0.2s;
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
}
|
||
.form-input:focus,
|
||
.form-select:focus {
|
||
border-color: var(--terra);
|
||
box-shadow: 0 0 0 3px rgba(192, 86, 33, 0.14);
|
||
}
|
||
.form-microcopy {
|
||
font-size: 0.8rem;
|
||
color: var(--muted);
|
||
line-height: 1.55;
|
||
}
|
||
.form-submit {
|
||
width: 100%;
|
||
background-color: var(--terra);
|
||
color: var(--white);
|
||
font-family: "Inter", sans-serif;
|
||
font-weight: 700;
|
||
font-size: 1rem;
|
||
padding: 0.9375rem 1.5rem;
|
||
border: none;
|
||
border-radius: 1.35rem;
|
||
cursor: pointer;
|
||
transition:
|
||
background-color 0.2s,
|
||
transform 0.15s;
|
||
letter-spacing: 0.01em;
|
||
}
|
||
.form-submit:hover {
|
||
background-color: var(--terra-deep);
|
||
transform: translateY(-1px);
|
||
}
|
||
.form-submit:disabled {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
transform: none;
|
||
}
|
||
.form-help {
|
||
font-size: 0.78rem;
|
||
color: var(--muted);
|
||
text-align: center;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
#trial-status {
|
||
background-color: var(--white);
|
||
border-radius: 2.5rem;
|
||
padding: 3.5rem 2.5rem;
|
||
box-shadow: var(--shadow-lg);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 1.1rem;
|
||
text-align: center;
|
||
}
|
||
.trial-status__icon {
|
||
font-size: 3.25rem;
|
||
color: var(--forest);
|
||
line-height: 1;
|
||
}
|
||
#trial-status-msg {
|
||
font-size: 0.9375rem;
|
||
color: var(--muted);
|
||
line-height: 1.65;
|
||
}
|
||
|
||
/* ── Meeting Section ────────────────────────────────────── */
|
||
.meeting-section {
|
||
position: relative;
|
||
padding: 6rem 0;
|
||
background-image: url("https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=1200&q=80");
|
||
background-size: cover;
|
||
background-position: center 40%;
|
||
background-attachment: fixed;
|
||
}
|
||
.meeting-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(250, 247, 242, 0.91);
|
||
}
|
||
.meeting-inner {
|
||
position: relative;
|
||
z-index: 2;
|
||
max-width: 64rem;
|
||
margin: 0 auto;
|
||
padding: 0 1.75rem;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 4rem;
|
||
align-items: center;
|
||
}
|
||
.meeting-tagline {
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.26em;
|
||
color: var(--terra);
|
||
margin-bottom: 0.875rem;
|
||
}
|
||
.meeting-heading {
|
||
font-family: "Lora", Georgia, serif;
|
||
font-size: clamp(1.7rem, 2.6vw, 2.25rem);
|
||
font-weight: 700;
|
||
color: var(--brown);
|
||
line-height: 1.28;
|
||
margin-bottom: 1.1rem;
|
||
}
|
||
.meeting-body-text {
|
||
font-size: 0.9375rem;
|
||
color: var(--muted);
|
||
line-height: 1.78;
|
||
margin-bottom: 2rem;
|
||
}
|
||
.meeting-bullets {
|
||
list-style: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.95rem;
|
||
}
|
||
.meeting-bullet {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 0.875rem;
|
||
font-size: 0.9rem;
|
||
color: var(--muted);
|
||
line-height: 1.6;
|
||
}
|
||
.meeting-bullet__dot {
|
||
color: var(--forest);
|
||
font-size: 1.1rem;
|
||
line-height: 1.4;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Meeting card */
|
||
.meeting-card {
|
||
background-color: var(--white);
|
||
border-radius: 2.25rem;
|
||
padding: 2.5rem 2.25rem;
|
||
box-shadow: var(--shadow-lg);
|
||
border-top: 5px solid var(--forest);
|
||
}
|
||
.meeting-card__label {
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.22em;
|
||
color: var(--forest);
|
||
margin-bottom: 0.875rem;
|
||
}
|
||
.meeting-card__title {
|
||
font-family: "Lora", Georgia, serif;
|
||
font-size: 1.3rem;
|
||
font-weight: 700;
|
||
color: var(--brown);
|
||
line-height: 1.35;
|
||
margin-bottom: 0.875rem;
|
||
}
|
||
.meeting-card__hint {
|
||
font-size: 0.84rem;
|
||
color: var(--muted);
|
||
line-height: 1.65;
|
||
font-style: italic;
|
||
margin-bottom: 1.75rem;
|
||
}
|
||
.meeting-card__cta {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
font-size: 0.9375rem;
|
||
font-weight: 700;
|
||
color: var(--forest);
|
||
border-bottom: 2px solid var(--forest);
|
||
padding-bottom: 0.1rem;
|
||
transition:
|
||
color 0.2s,
|
||
border-color 0.2s,
|
||
gap 0.2s;
|
||
}
|
||
.meeting-card__cta:hover {
|
||
color: var(--forest-deep);
|
||
border-color: var(--forest-deep);
|
||
gap: 0.65rem;
|
||
}
|
||
|
||
/* ── Footer ─────────────────────────────────────────────── */
|
||
.site-footer {
|
||
background-color: var(--brown);
|
||
color: var(--white);
|
||
padding: 2.75rem 1.75rem;
|
||
}
|
||
.footer-inner {
|
||
max-width: 72rem;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: 1fr auto 1fr;
|
||
align-items: center;
|
||
gap: 1.5rem 2.5rem;
|
||
font-size: 0.875rem;
|
||
}
|
||
.footer-copy {
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
.footer-links {
|
||
display: flex;
|
||
gap: 1.75rem;
|
||
justify-self: end;
|
||
}
|
||
.footer-links a {
|
||
color: rgba(255, 255, 255, 0.6);
|
||
transition: color 0.2s;
|
||
}
|
||
.footer-links a:hover {
|
||
color: var(--white);
|
||
}
|
||
|
||
/* ── Footer Feedback ────────────────────────────── */
|
||
.footer-feedback {
|
||
justify-self: center;
|
||
width: 100%;
|
||
max-width: 760px;
|
||
}
|
||
.footer-feedback__form {
|
||
display: flex;
|
||
gap: 0.375rem;
|
||
align-items: center;
|
||
}
|
||
.footer-feedback__area {
|
||
flex: 1;
|
||
resize: none;
|
||
border: 1.5px solid rgba(255, 255, 255, 0.18);
|
||
border-radius: 0.875rem;
|
||
padding: 0.65rem 0.875rem;
|
||
font-family: "Inter", sans-serif;
|
||
font-size: 0.8rem;
|
||
color: var(--white);
|
||
background-color: rgba(255, 255, 255, 0.07);
|
||
outline: none;
|
||
line-height: 1.5;
|
||
min-height: 4.8rem;
|
||
transition:
|
||
border-color 0.2s,
|
||
background-color 0.2s;
|
||
}
|
||
.footer-feedback__area::placeholder {
|
||
color: rgba(255, 255, 255, 0.35);
|
||
}
|
||
.footer-feedback__area:focus {
|
||
border-color: rgba(255, 255, 255, 0.42);
|
||
background-color: rgba(255, 255, 255, 0.11);
|
||
}
|
||
.footer-feedback__btn {
|
||
flex-shrink: 0;
|
||
background: none;
|
||
border: none;
|
||
padding: 0.4rem;
|
||
cursor: pointer;
|
||
color: #3b82f6;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
line-height: 0;
|
||
transition:
|
||
color 0.2s,
|
||
transform 0.15s;
|
||
}
|
||
.footer-feedback__btn:hover {
|
||
color: #2563eb;
|
||
transform: scale(1.2) translateX(2px);
|
||
}
|
||
.footer-feedback__btn:disabled {
|
||
opacity: 0.4;
|
||
cursor: not-allowed;
|
||
transform: none;
|
||
}
|
||
.footer-feedback__msg {
|
||
font-size: 0.74rem;
|
||
color: rgba(255, 255, 255, 0.52);
|
||
margin-top: 0.4rem;
|
||
min-height: 1em;
|
||
text-align: center;
|
||
transition: opacity 0.3s;
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
.footer-inner {
|
||
grid-template-columns: 1fr;
|
||
text-align: center;
|
||
gap: 1.5rem;
|
||
}
|
||
.footer-links {
|
||
justify-self: center;
|
||
}
|
||
.footer-feedback {
|
||
justify-self: stretch;
|
||
max-width: 100%;
|
||
}
|
||
.footer-feedback__form {
|
||
max-width: 540px;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
|
||
/* ── Blog Modal ─────────────────────────────────────────── */
|
||
#blog-modal {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 50;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 1.25rem;
|
||
}
|
||
#blog-modal-backdrop {
|
||
position: absolute;
|
||
inset: 0;
|
||
background-color: rgba(44, 48, 46, 0.78);
|
||
backdrop-filter: blur(5px);
|
||
-webkit-backdrop-filter: blur(5px);
|
||
cursor: pointer;
|
||
opacity: 0;
|
||
transition: opacity 0.28s ease;
|
||
}
|
||
#blog-modal-backdrop.modal-animate-backdrop {
|
||
opacity: 1;
|
||
}
|
||
#blog-modal-box {
|
||
position: relative;
|
||
background-color: var(--white);
|
||
border-radius: 2.5rem;
|
||
box-shadow: 0 24px 80px rgba(68, 48, 46, 0.22);
|
||
width: 100%;
|
||
max-width: 44rem;
|
||
max-height: 90vh;
|
||
overflow-y: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
opacity: 0;
|
||
transform: translateY(28px) scale(0.97);
|
||
transition:
|
||
opacity 0.32s ease,
|
||
transform 0.32s ease;
|
||
}
|
||
#blog-modal-box.modal-animate-box {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
.modal-header {
|
||
position: sticky;
|
||
top: 0;
|
||
background-color: var(--white);
|
||
border-radius: 2.5rem 2.5rem 0 0;
|
||
padding: 2rem 2.25rem 1.5rem;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 1rem;
|
||
border-bottom: 1px solid var(--border);
|
||
z-index: 10;
|
||
}
|
||
.modal-header__text {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
#blog-modal-area {
|
||
font-size: 0.68rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.18em;
|
||
color: var(--terra);
|
||
margin-bottom: 0.4rem;
|
||
}
|
||
#blog-modal-title {
|
||
font-family: "Lora", Georgia, serif;
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: var(--brown);
|
||
line-height: 1.3;
|
||
padding-right: 0.5rem;
|
||
}
|
||
#blog-modal-close-x {
|
||
flex-shrink: 0;
|
||
width: 2.75rem;
|
||
height: 2.75rem;
|
||
border-radius: 9999px;
|
||
background-color: var(--cream);
|
||
border: 1.5px solid var(--border);
|
||
cursor: pointer;
|
||
font-size: 1.1rem;
|
||
font-weight: 700;
|
||
color: var(--brown);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition:
|
||
background-color 0.2s,
|
||
color 0.2s,
|
||
border-color 0.2s;
|
||
}
|
||
#blog-modal-close-x:hover {
|
||
background-color: var(--terra);
|
||
color: var(--white);
|
||
border-color: var(--terra);
|
||
}
|
||
.modal-body {
|
||
padding: 1.75rem 2.25rem;
|
||
flex: 1;
|
||
}
|
||
#blog-modal-date {
|
||
display: block;
|
||
font-size: 0.78rem;
|
||
color: var(--muted);
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
#blog-modal-content {
|
||
font-size: 0.9375rem;
|
||
color: var(--muted);
|
||
line-height: 1.78;
|
||
}
|
||
#blog-modal-content p + p {
|
||
margin-top: 1rem;
|
||
}
|
||
#blog-modal-content h3 {
|
||
font-size: 1.05rem;
|
||
color: var(--brown);
|
||
margin: 1.25rem 0 0.5rem;
|
||
}
|
||
.modal-footer {
|
||
padding: 1.25rem 2.25rem 2.25rem;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
#blog-modal-close-bottom {
|
||
background-color: var(--brown);
|
||
color: var(--white);
|
||
font-family: "Inter", sans-serif;
|
||
font-weight: 600;
|
||
font-size: 0.9375rem;
|
||
padding: 0.8rem 2.75rem;
|
||
border: none;
|
||
border-radius: 9999px;
|
||
cursor: pointer;
|
||
transition: background-color 0.2s;
|
||
}
|
||
#blog-modal-close-bottom:hover {
|
||
background-color: var(--terra);
|
||
}
|
||
|
||
/* ── Responsive ─────────────────────────────────────────── */
|
||
@media (max-width: 900px) {
|
||
.hero-content {
|
||
grid-template-columns: 1fr;
|
||
padding-top: 7.5rem;
|
||
padding-bottom: 4rem;
|
||
}
|
||
.hero-card-col {
|
||
display: none;
|
||
}
|
||
.values-section {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.impact-strip__inner {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
row-gap: 2.5rem;
|
||
}
|
||
#blog-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.trial-inner {
|
||
grid-template-columns: 1fr;
|
||
gap: 3rem;
|
||
}
|
||
.meeting-inner {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.meeting-section {
|
||
background-attachment: scroll;
|
||
}
|
||
}
|
||
@media (max-width: 600px) {
|
||
.ngo-navbar__nav {
|
||
display: none;
|
||
}
|
||
.hero-stats {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
.impact-strip__inner {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
#trial-form {
|
||
padding: 1.875rem 1.5rem;
|
||
}
|
||
.modal-header {
|
||
padding: 1.5rem 1.5rem 1.25rem;
|
||
}
|
||
.modal-body {
|
||
padding: 1.25rem 1.5rem;
|
||
}
|
||
.modal-footer {
|
||
padding: 1rem 1.5rem 1.75rem;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- ═══════════════════════════════════════════════════════════
|
||
HEADER — Navbar + Hero
|
||
════════════════════════════════════════════════════════════ -->
|
||
<header>
|
||
<!-- Navbar (floats over hero) -->
|
||
<nav class="ngo-navbar" aria-label="Main navigation">
|
||
<div class="ngo-navbar__inner">
|
||
<div class="ngo-navbar__brand">
|
||
<img
|
||
src="https://odoo4projects.com/web/image/website/1/logo?unique=1be96c3"
|
||
alt="ODOO4projects logo"
|
||
class="ngo-navbar__logo"
|
||
/>
|
||
<span class="ngo-navbar__badge" data-i18n="hero-badge"
|
||
>ERP FOR NGOs</span
|
||
>
|
||
</div>
|
||
|
||
<div class="ngo-navbar__nav">
|
||
<a href="#blog" data-i18n="nav-resources">Resources</a>
|
||
<a href="#trial" data-i18n="nav-trial">Free Trial</a>
|
||
</div>
|
||
|
||
<div class="ngo-navbar__actions">
|
||
<label for="lang-selector" class="sr-only"
|
||
>Language</label
|
||
>
|
||
<select id="lang-selector" class="lang-select">
|
||
<option value="en">English</option>
|
||
<option value="es">Español</option>
|
||
<option value="de">Deutsch</option>
|
||
</select>
|
||
<a
|
||
href="https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ3DDbaiHFlhNhWySszAQoPXE_H73QLqYT3w7H9IYWC76RA_TgNIhLESjb4N7ep_D2D_OyW9q4-c"
|
||
target="_blank"
|
||
rel="noopener"
|
||
class="btn-terra plausible-event-name=meeting"
|
||
data-i18n="cta-meeting"
|
||
>Schedule a Meeting</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero — full-width community photo background -->
|
||
<div class="hero-wrapper" role="banner">
|
||
<div class="hero-overlay" aria-hidden="true"></div>
|
||
|
||
<div class="hero-content">
|
||
<!-- Text column -->
|
||
<div>
|
||
<span class="hero-pill" data-i18n="hero-pill"
|
||
>Unified NGO ERP Platform</span
|
||
>
|
||
|
||
<h1 class="hero-headline" data-i18n="hero-headline">
|
||
Simplify every mission workflow with an ERP built
|
||
for NGOs
|
||
</h1>
|
||
|
||
<p
|
||
class="hero-subheadline"
|
||
data-i18n="hero-subheadline"
|
||
>
|
||
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="hero-ctas">
|
||
<a
|
||
href="#trial"
|
||
class="btn-terra plausible-event-name=Trial"
|
||
data-i18n="cta-trial"
|
||
>Sign Up for Free Trial</a
|
||
>
|
||
<a
|
||
href="https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ3DDbaiHFlhNhWySszAQoPXE_H73QLqYT3w7H9IYWC76RA_TgNIhLESjb4N7ep_D2D_OyW9q4-c"
|
||
target="_blank"
|
||
rel="noopener"
|
||
class="btn-outline-white plausible-event-name=meeting"
|
||
data-i18n="cta-meeting"
|
||
>Schedule a Meeting</a
|
||
>
|
||
</div>
|
||
|
||
<div class="hero-stats">
|
||
<div>
|
||
<p class="hero-stat__num">38%</p>
|
||
<p
|
||
class="hero-stat__label"
|
||
data-i18n="hero-stat1"
|
||
>
|
||
Faster donor & grant reporting cycles
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p class="hero-stat__num">2x</p>
|
||
<p
|
||
class="hero-stat__label"
|
||
data-i18n="hero-stat2"
|
||
>
|
||
Increase in volunteer onboarding speed
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KPI Card column -->
|
||
<div class="hero-card-col" aria-hidden="true">
|
||
<div class="hero-kpi-card">
|
||
<p
|
||
class="hero-kpi-card__badge"
|
||
data-i18n="hero-card-title"
|
||
>
|
||
🎁 Free NGO Signup Bonus
|
||
</p>
|
||
<p
|
||
class="hero-kpi-card__title"
|
||
data-i18n="hero-card-headline"
|
||
>
|
||
Automation Bundle — 1 Year
|
||
</p>
|
||
<p
|
||
class="hero-kpi-card__body"
|
||
data-i18n="hero-card-body"
|
||
>
|
||
Free with every trial signup
|
||
</p>
|
||
<ul class="bundle-list">
|
||
<li>
|
||
<span class="bundle-check">✓</span>Donor
|
||
Management ODOO App — free
|
||
</li>
|
||
<li>
|
||
<span class="bundle-check">✓</span>ODOO CE:
|
||
unlimited users · Website Builder · Projects
|
||
· Accounting
|
||
</li>
|
||
<li>
|
||
<span class="bundle-check">✓</span>N8N for
|
||
customized Workflows & AI
|
||
</li>
|
||
<li>
|
||
<span class="bundle-check">✓</span>Backups
|
||
& routing for one domain*
|
||
</li>
|
||
<li>
|
||
<span class="bundle-check">✓</span>One hour
|
||
onboarding session
|
||
</li>
|
||
<li>
|
||
<span class="bundle-check">✓</span>50%
|
||
discount — first year incl.
|
||
</li>
|
||
</ul>
|
||
<p class="bundle-footnote">*Domain not included</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════
|
||
VALUE PROPS — 3 warm cards with left-border accent
|
||
════════════════════════════════════════════════════════════ -->
|
||
<section class="values-section" aria-label="Key capabilities">
|
||
<article class="value-card">
|
||
<div class="value-icon" aria-hidden="true">🤝</div>
|
||
<h2 data-i18n="value1-title">Transparency for Donors</h2>
|
||
<p data-i18n="value1-body">
|
||
Accounting-ready ledgers pair receipts with stories so
|
||
donors see every peso without extra spreadsheets or calls.
|
||
</p>
|
||
</article>
|
||
|
||
<article class="value-card">
|
||
<div class="value-icon" aria-hidden="true">💌</div>
|
||
<h2 data-i18n="value2-title">
|
||
Donor Management & Communications
|
||
</h2>
|
||
<p data-i18n="value2-body">
|
||
Automation buddies queue thank-yous, newsletters, and SMS
|
||
nudges so every supporter hears from you right on time.
|
||
</p>
|
||
</article>
|
||
|
||
<article class="value-card">
|
||
<div class="value-icon" aria-hidden="true">🌍</div>
|
||
<h2 data-i18n="value3-title">International Fund Raising</h2>
|
||
<p data-i18n="value3-body">
|
||
Multilingual homepages, acquisition kanbans, and project
|
||
trackers keep campaigns aligned across countries without
|
||
rebuilding playbooks.
|
||
</p>
|
||
</article>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════
|
||
IMPACT IN NUMBERS STRIP
|
||
════════════════════════════════════════════════════════════ -->
|
||
<section class="impact-strip" aria-label="Impact in numbers">
|
||
<div class="impact-strip__inner">
|
||
<div class="impact-item">
|
||
<p class="impact-num">500+</p>
|
||
<p class="impact-label">NGOs served globally</p>
|
||
</div>
|
||
|
||
<div class="impact-item">
|
||
<p class="impact-num">38%</p>
|
||
<p class="impact-label">Admin time reduction</p>
|
||
</div>
|
||
|
||
<div class="impact-item">
|
||
<p class="impact-num">4 weeks</p>
|
||
<p class="impact-label">Average launch time</p>
|
||
</div>
|
||
|
||
<div class="impact-item">
|
||
<p class="impact-num">6</p>
|
||
<p class="impact-label">Continents covered</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════
|
||
BLOG — warm beige background, terracotta top-border cards
|
||
════════════════════════════════════════════════════════════ -->
|
||
<section
|
||
id="blog"
|
||
class="blog-section"
|
||
aria-labelledby="blog-section-title"
|
||
>
|
||
<div class="blog-inner">
|
||
<div class="blog-header">
|
||
<div>
|
||
<p class="section-tagline" data-i18n="blog-tagline">
|
||
Insights for NGO leaders
|
||
</p>
|
||
<h2
|
||
id="blog-section-title"
|
||
class="section-title"
|
||
data-i18n="blog-title"
|
||
>
|
||
Blog & resource hub
|
||
</h2>
|
||
<p class="section-subtitle" data-i18n="blog-subtitle">
|
||
Get your impulses with our entertaining playbooks.
|
||
</p>
|
||
</div>
|
||
<button id="blog-toggle" type="button">
|
||
Browse all articles →
|
||
</button>
|
||
</div>
|
||
|
||
<div id="blog-grid" role="list"></div>
|
||
<p id="blog-error" class="hidden"></p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════
|
||
TRIAL — deep forest green background
|
||
════════════════════════════════════════════════════════════ -->
|
||
<section
|
||
id="trial"
|
||
class="trial-section"
|
||
aria-labelledby="trial-section-title"
|
||
>
|
||
<div class="trial-inner">
|
||
<!-- Left: copy + bullets -->
|
||
<div>
|
||
<p class="trial-tagline" data-i18n="trial-tagline">
|
||
Sign up free trial
|
||
</p>
|
||
<h2
|
||
id="trial-section-title"
|
||
class="trial-heading"
|
||
data-i18n="trial-heading"
|
||
>
|
||
Launch your NGO ERP sandbox in under 5 minutes
|
||
</h2>
|
||
<p class="trial-body-text" data-i18n="trial-body">
|
||
Experience localized NGO templates, donor CRM, and
|
||
automation recipes. No credit card required—just choose
|
||
your focus area and invite teammates.
|
||
</p>
|
||
<ul class="trial-bullets">
|
||
<li class="trial-bullet">
|
||
<span class="trial-bullet__icon" aria-hidden="true"
|
||
>✓</span
|
||
>
|
||
<span data-i18n="trial-bullet1"
|
||
>Pre-loaded NGO chart of accounts & grant
|
||
tracking</span
|
||
>
|
||
</li>
|
||
<li class="trial-bullet">
|
||
<span class="trial-bullet__icon" aria-hidden="true"
|
||
>✓</span
|
||
>
|
||
<span data-i18n="trial-bullet2"
|
||
>Automated donor receipts + impact
|
||
dashboards</span
|
||
>
|
||
</li>
|
||
<li class="trial-bullet">
|
||
<span class="trial-bullet__icon" aria-hidden="true"
|
||
>✓</span
|
||
>
|
||
<span data-i18n="trial-bullet3"
|
||
>Guided checklists for go-live within 30
|
||
days</span
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Right: form wrapper -->
|
||
<div id="trial-form-wrapper">
|
||
<form id="trial-form" novalidate>
|
||
<!-- Product selector -->
|
||
<fieldset class="form-fieldset">
|
||
<legend
|
||
class="form-legend"
|
||
data-i18n="trial-label-product"
|
||
>
|
||
Product
|
||
</legend>
|
||
<div class="form-radio-group">
|
||
<label class="form-radio-label">
|
||
<input
|
||
type="radio"
|
||
name="product"
|
||
value="odoo_19"
|
||
checked
|
||
/>
|
||
<span>ODOO</span>
|
||
</label>
|
||
<label class="form-radio-label">
|
||
<input
|
||
type="radio"
|
||
name="product"
|
||
value="N8N"
|
||
/>
|
||
<span>N8N</span>
|
||
</label>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<!-- Server region -->
|
||
<label class="form-label">
|
||
<span data-i18n="trial-label-location"
|
||
>Server region</span
|
||
>
|
||
<select
|
||
name="location"
|
||
required
|
||
class="form-select"
|
||
>
|
||
<option
|
||
value=""
|
||
disabled
|
||
selected
|
||
data-i18n-option="trial-location-placeholder"
|
||
>
|
||
Select a region
|
||
</option>
|
||
<option value="manchester">
|
||
🇬🇧 UK, Manchester
|
||
</option>
|
||
<option value="boston">
|
||
🇺🇸 US, Boston
|
||
</option>
|
||
<option value="mumbai">
|
||
🇮🇳 IN, Mumbai
|
||
</option>
|
||
<option value="saopaulo">
|
||
🇧🇷 BR, São Paulo
|
||
</option>
|
||
<option value="Meppel">
|
||
🇳🇱 NL, Meppel
|
||
</option>
|
||
<option value="sydney">
|
||
🇦🇺 AU, Sydney
|
||
</option>
|
||
</select>
|
||
</label>
|
||
|
||
<!-- Email -->
|
||
<label class="form-label">
|
||
<span data-i18n="trial-label-email"
|
||
>Work email</span
|
||
>
|
||
<input
|
||
type="email"
|
||
name="email"
|
||
required
|
||
class="form-input"
|
||
placeholder="impact@yourngo.org"
|
||
data-i18n-placeholder="trial-placeholder-email"
|
||
/>
|
||
</label>
|
||
|
||
<input
|
||
type="hidden"
|
||
id="trial-affiliate"
|
||
name="affiliate_code"
|
||
value="NGO"
|
||
/>
|
||
|
||
<p class="form-microcopy" data-i18n="trial-microcopy">
|
||
No credit card required. EU hosting &
|
||
GDPR-ready.
|
||
</p>
|
||
|
||
<button
|
||
type="submit"
|
||
class="form-submit plausible-event-name=Trial"
|
||
data-i18n="cta-trial"
|
||
>
|
||
Sign Up for Free Trial
|
||
</button>
|
||
|
||
<p class="form-help" data-i18n="trial-help">
|
||
Need help? Use the Schedule a Meeting button in the
|
||
header to book a guided call.
|
||
</p>
|
||
</form>
|
||
|
||
<!-- Success state -->
|
||
<div id="trial-status" class="hidden">
|
||
<p class="trial-status__icon" aria-hidden="true">✓</p>
|
||
<p id="trial-status-msg"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════
|
||
MEETING — warm community photo background
|
||
════════════════════════════════════════════════════════════ -->
|
||
<section
|
||
id="meeting"
|
||
class="meeting-section"
|
||
aria-labelledby="meeting-section-title"
|
||
>
|
||
<div class="meeting-overlay" aria-hidden="true"></div>
|
||
|
||
<div class="meeting-inner">
|
||
<!-- Left: copy + bullets -->
|
||
<div>
|
||
<p class="meeting-tagline" data-i18n="meeting-tagline">
|
||
Have a meeting
|
||
</p>
|
||
<h2
|
||
id="meeting-section-title"
|
||
class="meeting-heading"
|
||
data-i18n="meeting-heading"
|
||
>
|
||
See how your NGO can streamline operations, save time,
|
||
and reduce errors
|
||
</h2>
|
||
<p class="meeting-body-text" data-i18n="meeting-body">
|
||
A 30-minute live walkthrough tailored to your mission,
|
||
covering localization, integrations, and governance.
|
||
Walk away with a rollout roadmap.
|
||
</p>
|
||
<ul class="meeting-bullets">
|
||
<li class="meeting-bullet">
|
||
<span class="meeting-bullet__dot" aria-hidden="true"
|
||
>●</span
|
||
>
|
||
<span data-i18n="meeting-bullet1"
|
||
>Baseline automation scoring</span
|
||
>
|
||
</li>
|
||
<li class="meeting-bullet">
|
||
<span class="meeting-bullet__dot" aria-hidden="true"
|
||
>●</span
|
||
>
|
||
<span data-i18n="meeting-bullet2"
|
||
>Tech stack alignment & data migration
|
||
plan</span
|
||
>
|
||
</li>
|
||
<li class="meeting-bullet">
|
||
<span class="meeting-bullet__dot" aria-hidden="true"
|
||
>●</span
|
||
>
|
||
<span data-i18n="meeting-bullet3"
|
||
>Budget templates & total cost
|
||
forecast</span
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Right: info card -->
|
||
<div>
|
||
<div class="meeting-card">
|
||
<p
|
||
class="meeting-card__label"
|
||
data-i18n="meeting-note-title"
|
||
>
|
||
How scheduling works
|
||
</p>
|
||
<p
|
||
class="meeting-card__title"
|
||
data-i18n="meeting-note-body"
|
||
>
|
||
You will meet with an NGO consultant from
|
||
ODOO4projects.
|
||
</p>
|
||
<p
|
||
class="meeting-card__hint"
|
||
data-i18n="meeting-note-hint"
|
||
>
|
||
Use the Schedule a Meeting button in the header and
|
||
tell us during booking which question we should
|
||
prepare for.
|
||
</p>
|
||
<a
|
||
href="https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ3DDbaiHFlhNhWySszAQoPXE_H73QLqYT3w7H9IYWC76RA_TgNIhLESjb4N7ep_D2D_OyW9q4-c"
|
||
target="_blank"
|
||
rel="noopener"
|
||
class="meeting-card__cta plausible-event-name=meeting"
|
||
data-i18n="meeting-note-cta"
|
||
>Open booking calendar →</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════
|
||
FOOTER
|
||
════════════════════════════════════════════════════════════ -->
|
||
<footer class="site-footer">
|
||
<div class="footer-inner">
|
||
<p class="footer-copy">
|
||
© <span id="year"></span>
|
||
<span data-i18n="footer-note"
|
||
>ODOO4projects — Hosting for the AI generation</span
|
||
>
|
||
</p>
|
||
|
||
<div class="footer-feedback">
|
||
<form
|
||
id="footer-feedback-form"
|
||
class="footer-feedback__form"
|
||
novalidate
|
||
>
|
||
<textarea
|
||
id="footer-feedback-text"
|
||
class="footer-feedback__area"
|
||
rows="2"
|
||
maxlength="1000"
|
||
placeholder="Missing something, or have feedback? Drop us a note — we read every one."
|
||
></textarea>
|
||
<button
|
||
type="submit"
|
||
class="footer-feedback__btn"
|
||
aria-label="Send feedback"
|
||
>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
width="22"
|
||
height="22"
|
||
viewBox="0 0 24 24"
|
||
fill="currentColor"
|
||
aria-hidden="true"
|
||
>
|
||
<path
|
||
d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
</form>
|
||
<p
|
||
id="footer-feedback-msg"
|
||
class="footer-feedback__msg"
|
||
></p>
|
||
</div>
|
||
|
||
<nav class="footer-links" aria-label="Footer links">
|
||
<a
|
||
href="https://odoo4projects.com/support"
|
||
data-i18n="footer-support"
|
||
>Support</a
|
||
>
|
||
<a
|
||
href="https://odoo4projects.com/legal"
|
||
data-i18n="footer-legal"
|
||
>Legal</a
|
||
>
|
||
<a
|
||
href="https://odoo4projects.com/contactus"
|
||
data-i18n="footer-contact"
|
||
>Contact</a
|
||
>
|
||
</nav>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════
|
||
BLOG POST MODAL
|
||
════════════════════════════════════════════════════════════ -->
|
||
<div
|
||
id="blog-modal"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="blog-modal-title"
|
||
style="display: none"
|
||
>
|
||
<div id="blog-modal-backdrop"></div>
|
||
|
||
<article id="blog-modal-box">
|
||
<div class="modal-header">
|
||
<div class="modal-header__text">
|
||
<p id="blog-modal-area"></p>
|
||
<h2 id="blog-modal-title"></h2>
|
||
</div>
|
||
<button
|
||
id="blog-modal-close-x"
|
||
type="button"
|
||
aria-label="Close"
|
||
>
|
||
✕
|
||
</button>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<time id="blog-modal-date"></time>
|
||
<div id="blog-modal-content"></div>
|
||
</div>
|
||
|
||
<div class="modal-footer">
|
||
<button id="blog-modal-close-bottom" type="button">
|
||
Close
|
||
</button>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════
|
||
SCRIPT — verbatim copy
|
||
════════════════════════════════════════════════════════════ -->
|
||
<script>
|
||
const translations = {
|
||
en: {
|
||
"nav-resources": "Resources",
|
||
"nav-trial": "Free Trial",
|
||
"hero-badge": "ERP & Automation for NGOs — ODOO4projects",
|
||
"hero-pill": "Unified NGO ERP Platform",
|
||
"hero-headline":
|
||
"Simplify every mission workflow with an ERP built for NGOs",
|
||
"hero-subheadline":
|
||
"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.",
|
||
"cta-trial": "Sign Up for Free Trial",
|
||
"cta-meeting": "Schedule a Meeting",
|
||
"hero-stat1": "Faster donor & grant reporting cycles",
|
||
"hero-stat2": "Increase in volunteer onboarding speed",
|
||
"hero-card-title": "🎁 Signup Bundle for NGOs",
|
||
"hero-card-headline": "Free with every trial signup",
|
||
"hero-card-body": "Free with every trial signup",
|
||
"value1-title": "Transparency for Donors",
|
||
"value1-body":
|
||
"Accounting-ready ledgers pair receipts with stories so donors see every peso without extra spreadsheets or calls.",
|
||
"value2-title": "Donor Management & Communications",
|
||
"value2-body":
|
||
"Automation buddies queue thank-yous, newsletters, and SMS nudges so every supporter hears from you right on time.",
|
||
"value3-title": "International Fund Raising",
|
||
"value3-body":
|
||
"Multilingual homepages, acquisition kanbans, and project trackers keep campaigns aligned across countries without rebuilding playbooks.",
|
||
"blog-tagline": "Insights for NGO leaders",
|
||
"blog-title": "Blog & resource hub",
|
||
"blog-subtitle":
|
||
"Get your impulses with our entertaining playbooks.",
|
||
"blog-link": "Browse all articles →",
|
||
"blog-all-open": "Show fewer articles",
|
||
"blog-read-more": "Read more",
|
||
"blog-show-less": "Show less",
|
||
"blog-error": "Unable to load articles right now.",
|
||
"trial-tagline": "Sign up free trial",
|
||
"trial-heading":
|
||
"Launch your NGO ERP sandbox in under 5 minutes",
|
||
"trial-body":
|
||
"Experience localized NGO templates, donor CRM, and automation recipes. No credit card required—just choose your focus area and invite teammates.",
|
||
"trial-bullet1":
|
||
"Pre-loaded NGO chart of accounts & grant tracking",
|
||
"trial-bullet2":
|
||
"Automated donor receipts + impact dashboards",
|
||
"trial-bullet3":
|
||
"Guided checklists for go-live within 30 days",
|
||
"trial-label-email": "Work email",
|
||
"trial-placeholder-email": "impact@yourngo.org",
|
||
"trial-label-product": "Product",
|
||
"trial-label-location": "Server region",
|
||
"trial-location-placeholder": "Select a region",
|
||
"modal-close": "Close",
|
||
"trial-microcopy":
|
||
"No credit card required. EU hosting & GDPR-ready.",
|
||
"trial-help":
|
||
"Need help? Use the Schedule a Meeting button in the header to book a guided call.",
|
||
"meeting-tagline": "Have a meeting",
|
||
"meeting-heading":
|
||
"See how your NGO can streamline operations, save time, and reduce errors",
|
||
"meeting-body":
|
||
"A 30-minute live walkthrough tailored to your mission, covering localization, integrations, and governance. Walk away with a rollout roadmap.",
|
||
"meeting-bullet1": "Baseline automation scoring",
|
||
"meeting-bullet2":
|
||
"Tech stack alignment & data migration plan",
|
||
"meeting-bullet3": "Budget templates & total cost forecast",
|
||
"meeting-note-title": "How scheduling works",
|
||
"meeting-note-body":
|
||
"You will meet with an NGO consultant from ODOO4projects.",
|
||
"meeting-note-hint":
|
||
"Use the Schedule a Meeting button in the header and tell us during booking which question we should prepare for.",
|
||
"meeting-note-cta": "Open booking calendar",
|
||
"footer-note":
|
||
"ODOO4projects — Hosting for the AI generation",
|
||
"footer-support": "Support",
|
||
"footer-legal": "Legal",
|
||
"footer-contact": "Contact",
|
||
},
|
||
es: {
|
||
"nav-resources": "Recursos",
|
||
"nav-trial": "Prueba gratuita",
|
||
"hero-badge":
|
||
"ERP y Automatización para ONGs — ODOO4projects",
|
||
"hero-pill": "Plataforma ERP unificada para ONGs",
|
||
"hero-headline":
|
||
"Simplifica cada misión con un ERP diseñado para ONGs",
|
||
"hero-subheadline":
|
||
"Centraliza programas, automatiza reportes de donantes y subvenciones y ofrece a cada sede la misma fuente de verdad. Implementa en semanas con plantillas creadas para equipos humanitarios.",
|
||
"cta-trial": "Crear prueba gratuita",
|
||
"cta-meeting": "Agendar una reunión",
|
||
"hero-stat1":
|
||
"Ciclos más rápidos de reportes a donantes y subvenciones",
|
||
"hero-stat2":
|
||
"Mayor velocidad en la incorporación de voluntarios",
|
||
"hero-card-title": "🎁 Paquete de bienvenida para ONGs",
|
||
"hero-card-headline": "Gratis con cada registro de prueba",
|
||
"hero-card-body": "Gratis con cada registro de prueba",
|
||
"value1-title": "Transparencia para donantes",
|
||
"value1-body":
|
||
"Libros contables listos unen recibos y relatos para que cada donante vea su aporte sin hojas extra.",
|
||
"value2-title": "Gestión y comunicación con donantes",
|
||
"value2-body":
|
||
"Bots de automatización programan agradecimientos, boletines y SMS para que cada aliado reciba noticias a tiempo.",
|
||
"value3-title": "Recaudación internacional",
|
||
"value3-body":
|
||
"Sitios multilingües, tableros de adquisición y proyectos coordinan campañas globales sin rehacer playbooks ni procesos.",
|
||
"blog-tagline": "Ideas para líderes de ONG",
|
||
"blog-title": "Blog y centro de recursos",
|
||
"blog-subtitle":
|
||
"Recibe impulsos con nuestros playbooks entretenidos.",
|
||
"blog-link": "Ver todos los artículos →",
|
||
"blog-all-open": "Mostrar menos artículos",
|
||
"blog-read-more": "Leer más",
|
||
"blog-show-less": "Mostrar menos",
|
||
"blog-error":
|
||
"No pudimos cargar los artículos en este momento.",
|
||
"trial-tagline": "Activa tu prueba",
|
||
"trial-heading":
|
||
"Lanza tu sandbox ERP para ONG en menos de 5 minutos",
|
||
"trial-body":
|
||
"Explora plantillas localizadas, CRM de donantes y recetas de automatización. Sin tarjeta; solo elige tu prioridad e invita al equipo.",
|
||
"trial-bullet1":
|
||
"Plan contable para ONG y seguimiento de subvenciones precargado",
|
||
"trial-bullet2":
|
||
"Recibos automáticos más tableros de impacto",
|
||
"trial-bullet3":
|
||
"Checklists guiados para salir a producción en 30 días",
|
||
"trial-label-email": "Correo laboral",
|
||
"trial-placeholder-email": "impacto@tuong.org",
|
||
"trial-label-product": "Producto",
|
||
"trial-label-location": "Región de servidor",
|
||
"trial-location-placeholder": "Selecciona una región",
|
||
"modal-close": "Cerrar",
|
||
"trial-microcopy":
|
||
"Sin tarjeta. Hosting en la UE y cumplimiento GDPR.",
|
||
"trial-help":
|
||
'¿Dudas? Usa el botón "Agendar una reunión" en el encabezado para reservar una llamada guiada.',
|
||
"meeting-tagline": "Agenda una reunión",
|
||
"meeting-heading":
|
||
"Descubre cómo optimizar operaciones, ahorrar tiempo y reducir errores",
|
||
"meeting-body":
|
||
"Sesión de 30 minutos adaptada a tu misión, con localización, integraciones y gobernanza. Sal con un plan de implementación.",
|
||
"meeting-bullet1": "Diagnóstico de automatización",
|
||
"meeting-bullet2":
|
||
"Plan de migración y alineación tecnológica",
|
||
"meeting-bullet3":
|
||
"Plantillas presupuestarias y previsión de costes",
|
||
"meeting-note-title": "Cómo reservar",
|
||
"meeting-note-body":
|
||
"Te reunirás con un consultor ONG de ODOO4projects.",
|
||
"meeting-note-hint":
|
||
'Usa el botón "Agendar una reunión" del encabezado y cuéntanos durante la reserva qué pregunta debemos preparar.',
|
||
"meeting-note-cta": "Abrir calendario de reservas",
|
||
"footer-note":
|
||
"ODOO4projects — Hosting para la generación IA",
|
||
"footer-support": "Soporte",
|
||
"footer-legal": "Legal",
|
||
"footer-contact": "Contacto",
|
||
},
|
||
de: {
|
||
"nav-resources": "Ressourcen",
|
||
"nav-trial": "Kostenlose Testphase",
|
||
"hero-badge":
|
||
"ERP & Automatisierung für NGOs — ODOO4projects",
|
||
"hero-pill": "Vereintes NGO-ERP",
|
||
"hero-headline":
|
||
"Vereinfache jeden Einsatz mit einem ERP für NGOs",
|
||
"hero-subheadline":
|
||
"Bündele Programme, automatisiere Spender- und Förderberichte und gib allen Standorten dieselbe Datenbasis. Starte in wenigen Wochen mit maßgeschneiderten Templates.",
|
||
"cta-trial": "Kostenlose Testphase starten",
|
||
"cta-meeting": "Meeting planen",
|
||
"hero-stat1": "Schnellere Förder- & Spenderberichte",
|
||
"hero-stat2":
|
||
"Doppelt so schnelle Ehrenamtlichen-Onboardings",
|
||
"hero-card-title": "🎁 Anmelde-Paket für NGOs",
|
||
"hero-card-headline": "Kostenlos bei jeder Testanmeldung",
|
||
"hero-card-body": "Kostenlos bei jeder Testanmeldung",
|
||
"value1-title": "Transparenz für Spender",
|
||
"value1-body":
|
||
"Buchhaltungsbereite Ledger verbinden Belege mit Geschichten, damit Spender jeden Euro ohne Zusatz-Excel sofort klar sehen.",
|
||
"value2-title": "Spenderverwaltung & Kommunikation",
|
||
"value2-body":
|
||
"Automations-Buddys planen Dankesnachrichten, Newsletter und SMS, damit jede Beziehung pünktlich gepflegt und dokumentiert bleibt.",
|
||
"value3-title": "Internationale Fundraising",
|
||
"value3-body":
|
||
"Mehrsprachige Homepages, Akquise-Kanban und Projekttracker halten Kampagnen weltweit synchron ohne Playbooks ständig umzuschreiben.",
|
||
"blog-tagline": "Insights für NGO-Führungskräfte",
|
||
"blog-title": "Blog & Wissenshub",
|
||
"blog-subtitle":
|
||
"Hol dir Impulse mit unseren unterhaltsamen Playbooks.",
|
||
"blog-link": "Alle Artikel ansehen →",
|
||
"blog-all-open": "Weniger Artikel anzeigen",
|
||
"blog-read-more": "Mehr lesen",
|
||
"blog-show-less": "Weniger anzeigen",
|
||
"blog-error":
|
||
"Artikel konnten gerade nicht geladen werden.",
|
||
"trial-tagline": "Kostenlos testen",
|
||
"trial-heading":
|
||
"Starte dein NGO-ERP-Sandbox in unter 5 Minuten",
|
||
"trial-body":
|
||
"Teste lokalisierte Templates, Donor-CRM und Automatisierungen. Keine Kreditkarte – wähle den Fokus und lade dein Team ein.",
|
||
"trial-bullet1":
|
||
"Vorkonfigurierter Kontenplan & Fördertracking",
|
||
"trial-bullet2":
|
||
"Automatische Spendenbelege & Impact-Dashboards",
|
||
"trial-bullet3":
|
||
"Geführte Checklisten für Go-Live in 30 Tagen",
|
||
"trial-label-email": "Arbeits-E-Mail",
|
||
"trial-placeholder-email": "impact@deinengo.org",
|
||
"trial-label-product": "Produkt",
|
||
"trial-label-location": "Serverstandort",
|
||
"trial-location-placeholder": "Region auswählen",
|
||
"modal-close": "Schließen",
|
||
"trial-microcopy":
|
||
"Keine Kreditkarte. EU-Hosting & DSGVO-konform.",
|
||
"trial-help":
|
||
'Brauchen Sie Hilfe? Nutzen Sie den Button „Meeting planen" im Header für einen geführten Call.',
|
||
"meeting-tagline": "Meeting vereinbaren",
|
||
"meeting-heading":
|
||
"Erleben Sie, wie Ihre NGO Zeit spart und Fehler reduziert",
|
||
"meeting-body":
|
||
"Ein 30-minütiger Walkthrough zu Lokalisierung, Integrationen und Governance – inklusive Rollout-Fahrplan.",
|
||
"meeting-bullet1": "Automation-Score als Ausgangspunkt",
|
||
"meeting-bullet2": "Technologie- & Migrationsplan",
|
||
"meeting-bullet3": "Budgetvorlagen & Kostenprognose",
|
||
"meeting-note-title": "So buchen Sie",
|
||
"meeting-note-body":
|
||
"Sie sprechen mit einem NGO-Berater von ODOO4projects.",
|
||
"meeting-note-hint":
|
||
'Verwenden Sie den Button „Meeting planen" im Header und nennen Sie bei der Buchung Ihre Frage, damit wir uns vorbereiten können.',
|
||
"meeting-note-cta": "Buchungskalender öffnen",
|
||
"footer-note":
|
||
"ODOO4projects — Hosting für die KI-Generation",
|
||
"footer-support": "Support",
|
||
"footer-legal": "Rechtliches",
|
||
"footer-contact": "Kontakt",
|
||
},
|
||
};
|
||
|
||
const BLOG_LIMIT = 3;
|
||
const blogGrid = document.getElementById("blog-grid");
|
||
const blogToggle = document.getElementById("blog-toggle");
|
||
const blogError = document.getElementById("blog-error");
|
||
let blogPosts = [];
|
||
let blogExpanded = false;
|
||
|
||
function loadBlogPosts(lang) {
|
||
if (!blogGrid) return;
|
||
blogPosts = [];
|
||
blogExpanded = false;
|
||
if (blogError) blogError.classList.add("hidden");
|
||
|
||
function onData(data) {
|
||
blogPosts = Array.isArray(data) ? data : [];
|
||
renderBlogCards();
|
||
}
|
||
|
||
function showError() {
|
||
if (blogError) {
|
||
blogError.classList.remove("hidden");
|
||
blogError.textContent = getTranslation(
|
||
document.documentElement.lang,
|
||
"blog-error",
|
||
"Unable to load articles right now.",
|
||
);
|
||
}
|
||
}
|
||
|
||
var file =
|
||
lang === "en" ? "blog.json" : "blog." + lang + ".json";
|
||
fetch(file)
|
||
.then(function (r) {
|
||
if (!r.ok) throw new Error(r.status);
|
||
return r.json();
|
||
})
|
||
.then(onData)
|
||
.catch(function () {
|
||
if (lang === "en") {
|
||
showError();
|
||
return;
|
||
}
|
||
fetch("blog.json")
|
||
.then(function (r) {
|
||
if (!r.ok) throw new Error(r.status);
|
||
return r.json();
|
||
})
|
||
.then(onData)
|
||
.catch(showError);
|
||
});
|
||
}
|
||
|
||
if (blogToggle) {
|
||
blogToggle.addEventListener("click", () => {
|
||
if (blogPosts.length <= BLOG_LIMIT) return;
|
||
blogExpanded = !blogExpanded;
|
||
renderBlogCards();
|
||
});
|
||
}
|
||
|
||
function getTranslation(locale, key, fallback) {
|
||
return (
|
||
(translations[locale] && translations[locale][key]) ??
|
||
translations.en[key] ??
|
||
fallback
|
||
);
|
||
}
|
||
|
||
function renderBlogCards() {
|
||
if (!blogGrid) {
|
||
return;
|
||
}
|
||
if (!blogPosts.length) {
|
||
blogGrid.innerHTML = "";
|
||
updateBlogToggleLabel();
|
||
return;
|
||
}
|
||
const limit = blogExpanded
|
||
? blogPosts.length
|
||
: Math.min(BLOG_LIMIT, blogPosts.length);
|
||
blogGrid.innerHTML = "";
|
||
blogPosts.slice(0, limit).forEach((post) => {
|
||
blogGrid.appendChild(createBlogCard(post));
|
||
});
|
||
updateBlogToggleLabel();
|
||
}
|
||
|
||
function createBlogCard(post) {
|
||
const card = document.createElement("article");
|
||
card.className = "blog-card";
|
||
const meta = document.createElement("div");
|
||
meta.className = "blog-card-meta";
|
||
const area = document.createElement("p");
|
||
area.className = "blog-card-area";
|
||
area.textContent = post.area || "";
|
||
const dateEl = document.createElement("time");
|
||
dateEl.className = "blog-card-date";
|
||
if (post.date) dateEl.dateTime = post.date;
|
||
dateEl.textContent = formatBlogDate(post.date);
|
||
meta.append(area, dateEl);
|
||
card.appendChild(meta);
|
||
const title = document.createElement("h3");
|
||
title.className = "blog-card-title";
|
||
title.textContent = post.title || "";
|
||
card.appendChild(title);
|
||
const teaser = document.createElement("div");
|
||
teaser.className = "blog-card-teaser";
|
||
teaser.innerHTML = post.teaser || "";
|
||
card.appendChild(teaser);
|
||
if (post.content) {
|
||
const btn = document.createElement("button");
|
||
btn.type = "button";
|
||
btn.className = "blog-card-btn";
|
||
btn.textContent = getTranslation(
|
||
document.documentElement.lang,
|
||
"blog-read-more",
|
||
"Read more",
|
||
);
|
||
btn.addEventListener("click", function () {
|
||
openBlogModal(post);
|
||
});
|
||
card.appendChild(btn);
|
||
}
|
||
return card;
|
||
}
|
||
|
||
function openBlogModal(post) {
|
||
var modal = document.getElementById("blog-modal");
|
||
var modalBox = document.getElementById("blog-modal-box");
|
||
var backdrop = document.getElementById("blog-modal-backdrop");
|
||
var locale = document.documentElement.lang || "en";
|
||
document.getElementById("blog-modal-area").textContent =
|
||
post.area || "";
|
||
var modalDateEl = document.getElementById("blog-modal-date");
|
||
modalDateEl.textContent = formatBlogDate(post.date);
|
||
if (post.date) modalDateEl.dateTime = post.date;
|
||
document.getElementById("blog-modal-title").textContent =
|
||
post.title || "";
|
||
document.getElementById("blog-modal-content").innerHTML =
|
||
post.content || post.teaser || "";
|
||
document.getElementById("blog-modal-close-bottom").textContent =
|
||
getTranslation(locale, "modal-close", "Close");
|
||
modalBox.classList.remove("modal-animate-box");
|
||
backdrop.classList.remove("modal-animate-backdrop");
|
||
modal.style.display = "flex";
|
||
document.body.style.overflow = "hidden";
|
||
requestAnimationFrame(function () {
|
||
modalBox.classList.add("modal-animate-box");
|
||
backdrop.classList.add("modal-animate-backdrop");
|
||
});
|
||
}
|
||
|
||
function closeBlogModal() {
|
||
var modal = document.getElementById("blog-modal");
|
||
modal.style.display = "none";
|
||
document.body.style.overflow = "";
|
||
document
|
||
.getElementById("blog-modal-box")
|
||
.classList.remove("modal-animate-box");
|
||
document
|
||
.getElementById("blog-modal-backdrop")
|
||
.classList.remove("modal-animate-backdrop");
|
||
}
|
||
|
||
function formatBlogDate(dateString) {
|
||
if (!dateString) return "";
|
||
try {
|
||
const locale = document.documentElement.lang || "en";
|
||
return new Intl.DateTimeFormat(locale, {
|
||
year: "numeric",
|
||
month: "short",
|
||
day: "numeric",
|
||
}).format(new Date(dateString));
|
||
} catch (error) {
|
||
return dateString;
|
||
}
|
||
}
|
||
|
||
function updateBlogToggleLabel() {
|
||
if (!blogToggle) return;
|
||
if (blogPosts.length <= BLOG_LIMIT) {
|
||
blogToggle.classList.add("hidden");
|
||
blogExpanded = false;
|
||
return;
|
||
}
|
||
blogToggle.classList.remove("hidden");
|
||
blogToggle.disabled = false;
|
||
const locale = document.documentElement.lang || "en";
|
||
blogToggle.textContent = blogExpanded
|
||
? getTranslation(
|
||
locale,
|
||
"blog-all-open",
|
||
"Show fewer articles",
|
||
)
|
||
: getTranslation(
|
||
locale,
|
||
"blog-link",
|
||
"Browse all articles →",
|
||
);
|
||
}
|
||
|
||
function setLanguage(lang) {
|
||
const locale = translations[lang] ? lang : "en";
|
||
document.documentElement.lang = locale;
|
||
document.querySelectorAll("[data-i18n]").forEach((el) => {
|
||
const key = el.dataset.i18n;
|
||
const value =
|
||
translations[locale][key] ?? translations.en[key] ?? "";
|
||
if (value !== undefined) el.innerHTML = value;
|
||
});
|
||
document
|
||
.querySelectorAll("[data-i18n-placeholder]")
|
||
.forEach((el) => {
|
||
const key = el.dataset.i18nPlaceholder;
|
||
const value =
|
||
translations[locale][key] ??
|
||
translations.en[key] ??
|
||
"";
|
||
if (value !== undefined)
|
||
el.setAttribute("placeholder", value);
|
||
});
|
||
document
|
||
.querySelectorAll("[data-i18n-option]")
|
||
.forEach((el) => {
|
||
const key = el.dataset.i18nOption;
|
||
const value =
|
||
translations[locale][key] ??
|
||
translations.en[key] ??
|
||
"";
|
||
if (value !== undefined) el.textContent = value;
|
||
});
|
||
document.querySelectorAll("[data-i18n-aria]").forEach((el) => {
|
||
const key = el.dataset.i18nAria;
|
||
const value =
|
||
translations[locale][key] ?? translations.en[key] ?? "";
|
||
if (value !== undefined)
|
||
el.setAttribute("aria-label", value);
|
||
});
|
||
loadBlogPosts(locale);
|
||
}
|
||
|
||
document
|
||
.getElementById("lang-selector")
|
||
.addEventListener("change", (event) => {
|
||
setLanguage(event.target.value);
|
||
});
|
||
setLanguage("en");
|
||
document.getElementById("year").textContent =
|
||
new Date().getFullYear();
|
||
|
||
var blogModal = document.getElementById("blog-modal");
|
||
if (blogModal) {
|
||
document
|
||
.getElementById("blog-modal-close-x")
|
||
.addEventListener("click", closeBlogModal);
|
||
document
|
||
.getElementById("blog-modal-close-bottom")
|
||
.addEventListener("click", closeBlogModal);
|
||
document
|
||
.getElementById("blog-modal-backdrop")
|
||
.addEventListener("click", closeBlogModal);
|
||
document.addEventListener("keydown", function (e) {
|
||
if (
|
||
e.key === "Escape" &&
|
||
blogModal.style.display !== "none"
|
||
)
|
||
closeBlogModal();
|
||
});
|
||
}
|
||
|
||
var affiliateCode =
|
||
new URLSearchParams(window.location.search).get("affiliate") ||
|
||
"NGO";
|
||
var trialAffiliateInput =
|
||
document.getElementById("trial-affiliate");
|
||
if (trialAffiliateInput) trialAffiliateInput.value = affiliateCode;
|
||
|
||
var trialForm = document.getElementById("trial-form");
|
||
var trialStatusEl = document.getElementById("trial-status");
|
||
var trialStatusMsg = document.getElementById("trial-status-msg");
|
||
|
||
if (trialForm) {
|
||
trialForm.addEventListener("submit", async function (e) {
|
||
e.preventDefault();
|
||
var btn = trialForm.querySelector('button[type="submit"]');
|
||
var origText = btn.textContent;
|
||
btn.disabled = true;
|
||
btn.textContent = "…";
|
||
try {
|
||
var res = await fetch(
|
||
"https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c25169c6-4234-4b47-8e74-612b9539da0a",
|
||
{ method: "POST", body: new FormData(trialForm) },
|
||
);
|
||
var text = await res.text();
|
||
trialForm.style.display = "none";
|
||
trialStatusEl.classList.remove("hidden");
|
||
trialStatusMsg.textContent = text;
|
||
} catch (err) {
|
||
btn.disabled = false;
|
||
btn.textContent = origText;
|
||
trialStatusEl.classList.remove("hidden");
|
||
trialStatusMsg.textContent =
|
||
"❌ Submission failed. Please try again.";
|
||
}
|
||
});
|
||
}
|
||
|
||
// Footer feedback
|
||
var footerFeedbackForm = document.getElementById(
|
||
"footer-feedback-form",
|
||
);
|
||
if (footerFeedbackForm) {
|
||
footerFeedbackForm.addEventListener(
|
||
"submit",
|
||
async function (e) {
|
||
e.preventDefault();
|
||
var textarea = document.getElementById(
|
||
"footer-feedback-text",
|
||
);
|
||
var msgEl = document.getElementById(
|
||
"footer-feedback-msg",
|
||
);
|
||
var btn = footerFeedbackForm.querySelector(
|
||
'button[type="submit"]',
|
||
);
|
||
var text = textarea.value.trim();
|
||
if (!text) return;
|
||
btn.disabled = true;
|
||
msgEl.textContent = "";
|
||
try {
|
||
var fd = new FormData();
|
||
fd.append("message", text);
|
||
fd.append("page", window.location.href);
|
||
await fetch(
|
||
"https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/2fe3d1fe-eff9-45aa-8d0f-88738d443946",
|
||
{ method: "POST", body: fd },
|
||
);
|
||
textarea.value = "";
|
||
msgEl.textContent = "✓ Thanks — we got it!";
|
||
setTimeout(function () {
|
||
msgEl.textContent = "";
|
||
}, 5000);
|
||
} catch (err) {
|
||
msgEl.textContent =
|
||
"Could not send right now. Please try again.";
|
||
}
|
||
btn.disabled = false;
|
||
},
|
||
);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|