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

feat: badge text, 6-item bundle card, footer textarea 2×wide 30%tall, SVG send icon

Browse Source
This commit is contained in:
Oliver
2026-03-27 17:59:40 -03:00
parent 0fc5b59d5f
commit be09564a25
1 changed files with 83 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+83 -58
View File
@@ -422,16 +422,16 @@
list-style: none; list-style: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.7rem; gap: 0.5rem;
margin-bottom: 1.35rem; margin-bottom: 1rem;
} }
.bundle-list li { .bundle-list li {
display: flex; display: flex;
align-items: center; align-items: flex-start;
gap: 0.65rem; gap: 0.55rem;
font-size: 0.875rem; font-size: 0.78rem;
color: rgba(255, 255, 255, 0.88); color: rgba(255, 255, 255, 0.88);
line-height: 1.4; line-height: 1.45;
} }
.bundle-check { .bundle-check {
flex-shrink: 0; flex-shrink: 0;
@@ -448,11 +448,12 @@
color: #fff; color: #fff;
} }
.bundle-footnote { .bundle-footnote {
font-size: 0.7rem; font-size: 0.68rem;
color: rgba(255, 255, 255, 0.42); color: rgba(255, 255, 255, 0.38);
text-align: center; text-align: left;
letter-spacing: 0.04em; letter-spacing: 0.03em;
font-style: italic; font-style: italic;
margin-top: 0.25rem;
} }
/* ── Value Props ────────────────────────────────────────── */ /* ── Value Props ────────────────────────────────────────── */
@@ -1030,7 +1031,7 @@
display: grid; display: grid;
grid-template-columns: 1fr auto 1fr; grid-template-columns: 1fr auto 1fr;
align-items: center; align-items: center;
gap: 2rem; gap: 1.5rem 2.5rem;
font-size: 0.875rem; font-size: 0.875rem;
} }
.footer-copy { .footer-copy {
@@ -1053,29 +1054,29 @@
.footer-feedback { .footer-feedback {
justify-self: center; justify-self: center;
width: 100%; width: 100%;
max-width: 380px; max-width: 760px;
} }
.footer-feedback__form { .footer-feedback__form {
display: flex; display: flex;
gap: 0.5rem; gap: 0.375rem;
align-items: flex-end; align-items: center;
} }
.footer-feedback__area { .footer-feedback__area {
flex: 1; flex: 1;
resize: none; resize: none;
border: 1.5px solid rgba(255, 255, 255, 0.18); border: 1.5px solid rgba(255, 255, 255, 0.18);
border-radius: 0.875rem; border-radius: 0.875rem;
padding: 0.6rem 0.875rem; padding: 0.65rem 0.875rem;
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
font-size: 0.8rem; font-size: 0.8rem;
color: var(--white); color: var(--white);
background-color: rgba(255, 255, 255, 0.07); background-color: rgba(255, 255, 255, 0.07);
outline: none; outline: none;
line-height: 1.5; line-height: 1.5;
min-height: 4.8rem;
transition: transition:
border-color 0.2s, border-color 0.2s,
background-color 0.2s; background-color 0.2s;
overflow: hidden;
} }
.footer-feedback__area::placeholder { .footer-feedback__area::placeholder {
color: rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.35);
@@ -1086,27 +1087,26 @@
} }
.footer-feedback__btn { .footer-feedback__btn {
flex-shrink: 0; flex-shrink: 0;
background-color: var(--terra); background: none;
color: var(--white);
border: none; border: none;
border-radius: 0.875rem; padding: 0.4rem;
padding: 0.6rem 1rem;
font-family: "Inter", sans-serif;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer; cursor: pointer;
color: #3b82f6;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
line-height: 0;
transition: transition:
background-color 0.2s, color 0.2s,
transform 0.15s; transform 0.15s;
white-space: nowrap;
line-height: 1.5;
} }
.footer-feedback__btn:hover { .footer-feedback__btn:hover {
background-color: var(--terra-deep); color: #2563eb;
transform: translateY(-1px); transform: scale(1.2) translateX(2px);
} }
.footer-feedback__btn:disabled { .footer-feedback__btn:disabled {
opacity: 0.5; opacity: 0.4;
cursor: not-allowed; cursor: not-allowed;
transform: none; transform: none;
} }
@@ -1119,7 +1119,7 @@
transition: opacity 0.3s; transition: opacity 0.3s;
} }
@media (max-width: 900px) { @media (max-width: 1100px) {
.footer-inner { .footer-inner {
grid-template-columns: 1fr; grid-template-columns: 1fr;
text-align: center; text-align: center;
@@ -1132,6 +1132,10 @@
justify-self: stretch; justify-self: stretch;
max-width: 100%; max-width: 100%;
} }
.footer-feedback__form {
max-width: 540px;
margin: 0 auto;
}
} }
/* ── Blog Modal ─────────────────────────────────────────── */ /* ── Blog Modal ─────────────────────────────────────────── */
@@ -1464,29 +1468,36 @@
class="hero-kpi-card__body" class="hero-kpi-card__body"
data-i18n="hero-card-body" data-i18n="hero-card-body"
> >
Pre-built flows · No code · Live on day one Free with every trial signup
</p> </p>
<ul class="bundle-list"> <ul class="bundle-list">
<li> <li>
<span class="bundle-check">✓</span>Donor <span class="bundle-check">✓</span>Donor
thank-you flows Management ODOO App — free
</li> </li>
<li> <li>
<span class="bundle-check">✓</span>Grant <span class="bundle-check">✓</span>ODOO CE:
compliance reminders unlimited users · Website Builder · Projects
· Accounting
</li> </li>
<li> <li>
<span class="bundle-check">✓</span>Volunteer <span class="bundle-check">✓</span>N8N for
onboarding sequence customized Workflows &amp; AI
</li> </li>
<li> <li>
<span class="bundle-check">✓</span>Monthly <span class="bundle-check">✓</span>Backups
impact digest email &amp; 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> </li>
</ul> </ul>
<p class="bundle-footnote"> <p class="bundle-footnote">*Domain not included</p>
Included free on signup — no extra setup
</p>
</div> </div>
</div> </div>
</div> </div>
@@ -1889,8 +1900,23 @@
maxlength="1000" maxlength="1000"
placeholder="Missing something, or have feedback? Drop us a note — we read every one." placeholder="Missing something, or have feedback? Drop us a note — we read every one."
></textarea> ></textarea>
<button type="submit" class="footer-feedback__btn"> <button
Send&nbsp;→ 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> </button>
</form> </form>
<p <p
@@ -1967,7 +1993,7 @@
en: { en: {
"nav-resources": "Resources", "nav-resources": "Resources",
"nav-trial": "Free Trial", "nav-trial": "Free Trial",
"hero-badge": "ERP FOR NGOs", "hero-badge": "ERP & Automation for NGOs — ODOO4projects",
"hero-pill": "Unified NGO ERP Platform", "hero-pill": "Unified NGO ERP Platform",
"hero-headline": "hero-headline":
"Simplify every mission workflow with an ERP built for NGOs", "Simplify every mission workflow with an ERP built for NGOs",
@@ -1977,10 +2003,9 @@
"cta-meeting": "Schedule a Meeting", "cta-meeting": "Schedule a Meeting",
"hero-stat1": "Faster donor & grant reporting cycles", "hero-stat1": "Faster donor & grant reporting cycles",
"hero-stat2": "Increase in volunteer onboarding speed", "hero-stat2": "Increase in volunteer onboarding speed",
"hero-card-title": "🎁 Free NGO Signup Bonus", "hero-card-title": "🎁 Signup Bundle for NGOs",
"hero-card-headline": "Automation Bundle — 1 Year", "hero-card-headline": "Free with every trial signup",
"hero-card-body": "hero-card-body": "Free with every trial signup",
"Pre-built flows · No code · Live on day one",
"value1-title": "Transparency for Donors", "value1-title": "Transparency for Donors",
"value1-body": "value1-body":
"Accounting-ready ledgers pair receipts with stories so donors see every peso without extra spreadsheets or calls.", "Accounting-ready ledgers pair receipts with stories so donors see every peso without extra spreadsheets or calls.",
@@ -2044,7 +2069,8 @@
es: { es: {
"nav-resources": "Recursos", "nav-resources": "Recursos",
"nav-trial": "Prueba gratuita", "nav-trial": "Prueba gratuita",
"hero-badge": "ERP PARA ONGs", "hero-badge":
"ERP y Automatización para ONGs — ODOO4projects",
"hero-pill": "Plataforma ERP unificada para ONGs", "hero-pill": "Plataforma ERP unificada para ONGs",
"hero-headline": "hero-headline":
"Simplifica cada misión con un ERP diseñado para ONGs", "Simplifica cada misión con un ERP diseñado para ONGs",
@@ -2056,10 +2082,9 @@
"Ciclos más rápidos de reportes a donantes y subvenciones", "Ciclos más rápidos de reportes a donantes y subvenciones",
"hero-stat2": "hero-stat2":
"Mayor velocidad en la incorporación de voluntarios", "Mayor velocidad en la incorporación de voluntarios",
"hero-card-title": "🎁 Bono de bienvenida para ONGs", "hero-card-title": "🎁 Paquete de bienvenida para ONGs",
"hero-card-headline": "Paquete de automatización — 1 año", "hero-card-headline": "Gratis con cada registro de prueba",
"hero-card-body": "hero-card-body": "Gratis con cada registro de prueba",
"Flujos listos · Sin código · Activos desde el primer día",
"value1-title": "Transparencia para donantes", "value1-title": "Transparencia para donantes",
"value1-body": "value1-body":
"Libros contables listos unen recibos y relatos para que cada donante vea su aporte sin hojas extra.", "Libros contables listos unen recibos y relatos para que cada donante vea su aporte sin hojas extra.",
@@ -2125,7 +2150,8 @@
de: { de: {
"nav-resources": "Ressourcen", "nav-resources": "Ressourcen",
"nav-trial": "Kostenlose Testphase", "nav-trial": "Kostenlose Testphase",
"hero-badge": "ERP FÜR NGOs", "hero-badge":
"ERP & Automatisierung für NGOs — ODOO4projects",
"hero-pill": "Vereintes NGO-ERP", "hero-pill": "Vereintes NGO-ERP",
"hero-headline": "hero-headline":
"Vereinfache jeden Einsatz mit einem ERP für NGOs", "Vereinfache jeden Einsatz mit einem ERP für NGOs",
@@ -2136,10 +2162,9 @@
"hero-stat1": "Schnellere Förder- & Spenderberichte", "hero-stat1": "Schnellere Förder- & Spenderberichte",
"hero-stat2": "hero-stat2":
"Doppelt so schnelle Ehrenamtlichen-Onboardings", "Doppelt so schnelle Ehrenamtlichen-Onboardings",
"hero-card-title": "🎁 Gratis-Bonus für NGOs", "hero-card-title": "🎁 Anmelde-Paket für NGOs",
"hero-card-headline": "Automatisierungspaket — 1 Jahr", "hero-card-headline": "Kostenlos bei jeder Testanmeldung",
"hero-card-body": "hero-card-body": "Kostenlos bei jeder Testanmeldung",
"Fertige Abläufe · Kein Code · Ab Tag eins aktiv",
"value1-title": "Transparenz für Spender", "value1-title": "Transparenz für Spender",
"value1-body": "value1-body":
"Buchhaltungsbereite Ledger verbinden Belege mit Geschichten, damit Spender jeden Euro ohne Zusatz-Excel sofort klar sehen.", "Buchhaltungsbereite Ledger verbinden Belege mit Geschichten, damit Spender jeden Euro ohne Zusatz-Excel sofort klar sehen.",