content: blog card redesign with 4-line teaser, article modal, hero bg update

.gitignore

@@ -0,0 +1,21 @@
+# Dependencies
+node_modules/
+
+# Tailwind build temp
+tmp.json
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Editor
+.vscode/
+.idea/
+*.swp
+*.swo

AGENTS.md

@@ -0,0 +1,233 @@
+# AGENTS.md — NGO Landing Page
+
+Read this file fully before taking any action.
+
+---
+
+## Project Context
+
+Single-page static landing page for an NGO ERP product.
+
+| Item | Detail |
+|---|---|
+| Pages | `index.html` — the only HTML file |
+| Styling | Tailwind CSS v3 · source `src/input.css` → compiled `assets/site.css` |
+| Data | `blog.json` — flat array of blog posts, loaded at runtime by inline JS |
+| i18n | Inline `translations` object inside `index.html` (EN / ES / DE) |
+| Blog renderer | Inline `<script>` in `index.html` — no external JS files |
+| Dev server | `./start` (runs `live-server`) |
+| Git remote | `git@git.odoo4projects.com:Oliver/NGO.git` |
+
+### File map
+
+```
+index.html          ← only HTML file — layout + all inline JS + i18n
+src/input.css       ← Tailwind source (edit here, then rebuild)
+assets/site.css     ← compiled output — DO NOT edit by hand
+blog.json           ← English blog posts (canonical + fallback)
+blog.es.json        ← Spanish blog posts
+blog.de.json        ← German blog posts
+tailwind.config.js  ← design tokens (colors, fonts, shadows)
+```
+
+### Design tokens (from `tailwind.config.js`)
+
+| Token | Hex | Usage |
+|---|---|---|
+| `brand-ink` | `#201824` | default text / dark backgrounds |
+| `brand-primary` | `#603F57` | section labels, bullet accents |
+| `brand-accent` | `#F762B4` | CTA buttons, links |
+| `brand-sunrise` | `#F8B84A` | hero highlights, hover states |
+| `brand-emerald` | `#39B982` | positive indicators |
+| `brand-snow` | `#F5F2F7` | page background |
+| `brand-smoke` | `#E5DCE8` | borders, subtle dividers |
+
+NEVER use raw hex values in HTML — always use the token class names above.
+
+---
+
+## 🎯 Goal
+
+- Deliver an **SEO-optimised, fast-loading, responsive** single-page site.
+- Keep all edits **minimal and targeted** — preserve design, structure, and functionality.
+- NEVER introduce new frameworks, libraries, or external dependencies.
+
+### Quality bar for every change
+
+| Concern | Rule |
+|---|---|
+| SEO | Keep all existing meta tags, `ld+json`, `alt` attributes, and heading hierarchy |
+| Performance | No comments in production HTML, no unused CSS classes, no render-blocking additions |
+| Responsive | Every element must work on mobile (375 px), tablet (768 px), and desktop (1280 px+) |
+| Consistency | Use only brand token classes; match existing spacing and rounding patterns |
+
+---
+
+## Commands
+
+```bash
+# Build CSS after editing src/input.css or tailwind.config.js
+npm run build:css
+
+# Watch CSS during active development
+npm run watch:css
+
+# Validate blog.json
+jq empty blog.json && echo "JSON valid"
+
+# Start dev server
+./start
+```
+
+---
+
+## Git Rules
+
+- ALWAYS work on **`main`** branch.
+- Pull before every session:
+  ```bash
+  git pull origin main
+  ```
+- Commit messages must follow the pattern:
+  - `blog: add post – <title>`
+  - `fix: <short description>`
+  - `content: <short description>`
+- Push immediately after committing — never leave unpushed commits.
+- Branch creation is permitted ONLY under the **Branch Handling Exception** (see bottom).
+
+---
+
+## File Safety Rules
+
+- ONLY modify files required for the task.
+- NEVER delete or restructure content unrelated to the task.
+- NEVER remove existing blog posts from `blog.json`.
+- NEVER edit `assets/site.css` directly — always rebuild from `src/input.css`.
+
+---
+
+## Blog Post Schema
+
+### Language-to-file mapping
+
+| Language | File loaded | Fallback |
+|---|---|---|
+| English (`en`) | `blog.json` | — |
+| Spanish (`es`) | `blog.es.json` | `blog.json` |
+| German (`de`) | `blog.de.json` | `blog.json` |
+
+The loader in `index.html` fetches the language-specific file automatically when the visitor switches language. If a language file is missing or returns an error, it falls back to `blog.json` silently.
+
+`blog.json` is always the **English source and fallback**. Keep all three files structurally identical — same number of posts, same order, translated content only.
+
+---
+
+`blog.json` (and every language variant) is a root-level JSON array. Every post object contains **exactly these five fields**:
+
+```json
+[
+  {
+    "area":    "Automation",
+    "date":    "2026-03-25",
+    "title":   "Article title as plain text",
+    "teaser":  "<p>One or two sentences visible before 'Read more'.</p>",
+    "content": "<h3>Section</h3><p>Full article as HTML.</p>"
+  }
+]
+```
+
+| Field | Type | Constraint |
+|---|---|---|
+| `area` | plain string | Category label rendered above the title |
+| `date` | ISO 8601 (`YYYY-MM-DD`) | Used by `Intl.DateTimeFormat` |
+| `title` | plain string | Rendered as `<h3>` — no HTML |
+| `teaser` | HTML string | Always visible — wrap in `<p>` tags |
+| `content` | HTML string | Revealed by "Read more" toggle — use `<h3>`, `<p>`, `<ul>`, `<li>` |
+
+NEVER add extra fields (`slug`, `author`, `tags`, `excerpt`, `hero_image`, etc.) — they are ignored by the renderer and pollute the file.
+
+### Adding a new blog post (jq method)
+
+> Add to **all three files** in the same session. A post that exists in English but not in Spanish/German will silently fall back to the English version for those visitors — which is acceptable temporarily but should be resolved promptly.
+
+```bash
+# 1. Pull latest
+git pull origin main
+
+# 2. Backup all blog files once per session
+mkdir -p /backup
+for f in blog.json blog.es.json blog.de.json; do
+  cp $f /backup/$f.$(date +%Y%m%d%H%M%S)
+done
+
+# 3. Prepend new post to each language file
+#    $NEW_EN, $NEW_ES, $NEW_DE must each be a valid single post object
+jq --argjson new "$NEW_EN" '. = [$new] + .' blog.json    > tmp.json && mv tmp.json blog.json
+jq --argjson new "$NEW_ES" '. = [$new] + .' blog.es.json > tmp.json && mv tmp.json blog.es.json
+jq --argjson new "$NEW_DE" '. = [$new] + .' blog.de.json > tmp.json && mv tmp.json blog.de.json
+
+# 4. Validate all three
+jq empty blog.json && echo "blog.json OK"
+jq empty blog.es.json && echo "blog.es.json OK"
+jq empty blog.de.json && echo "blog.de.json OK"
+
+# 5. Commit and push
+git add blog.json blog.es.json blog.de.json
+git commit -m "blog: add post – <title>"
+git push origin main
+```
+
+NEVER use Python, Node scripts, or manual text editing to modify `blog.json`.
+
+---
+
+## Execution Workflow
+
+Follow this order for every task:
+
+1. `git pull origin main`
+2. Identify the exact files to change — nothing else.
+3. Apply minimal edits.
+4. If `src/input.css` or `tailwind.config.js` were changed → rebuild CSS.
+5. Validate: `jq empty blog.json` for JSON; visual check for HTML.
+6. Commit with a descriptive message.
+7. `git push origin main`
+
+---
+
+## Success Criteria
+
+- Changes are minimal, validated, and committed.
+- `blog.json` is a valid array with exactly five fields per post.
+- `assets/site.css` reflects any CSS changes (rebuilt, not hand-edited).
+- HTML passes a visual check — layout and design unchanged except for the intended edit.
+- All commits pushed to `main`.
+
+---
+
+## Failure Conditions
+
+These actions constitute a failure:
+
+- Refusing to act due to perceived access restrictions.
+- Failing to push after committing.
+- Adding undeclared fields to `blog.json`.
+- Removing or overwriting existing blog posts.
+- Editing `assets/site.css` by hand.
+- Modifying files outside the scope of the task.
+- Leaving a branch open without merging.
+
+---
+
+## Branch Handling Exception
+
+Branch creation is permitted **only** when:
+
+- The task explicitly requires a feature branch, **or**
+- A direct push to `main` is blocked by branch protection.
+
+If a branch is created it **must**:
+
+- Follow the naming convention `<type>/<short-description>` (e.g. `fix/blog-json-schema`).
+- Be merged into `main` via PR immediately after the task is complete.
+- Be deleted after merge — never abandoned.

CHANGELOG-rollback-2026-03-24T22:06:43Z.md

@@ -1,26 +0,0 @@
-Rollback and Recovery Changelog
-
-Timestamp: ${TS}
-
-Actions performed:
-- Reset main branch (working tree and HEAD) to commit 6127867d51c9f0e4e86d1d8390081208f45136ab and force-pushed to origin/main.
-- Confirmed README.md content matches version at commit 6127867d51.
-- Investigated deleted backups: located backups in parent commit 5189b23 and extracted available files into recovered_backups/ directory in the working tree (not yet committed).
-- Created this changelog and saved recovered backup files under recovered_backups/ for review.
-
-Recovered backup files:
-- backups/index.html.20260324164129.bak -> recovered_backups/index.html.20260324164129.bak (extracted from commit 5189b23)
-- backups/index.html.bak.20260324164053 -> recovered_backups/index.html.bak.20260324164053 (extracted from commit 5189b23)
-
-Notes on recovery:
-- The deleted backup files were present in previous commits and have been extracted from git history into recovered_backups/.
-- Additional backup files referencing other timestamps exist in git history (e.g., backups/index.html.20260324164556.bak and backups/index.html.20260324164626.bak). These can be extracted on request.
-
-Suspicious findings:
-- Commit 6127867d51 (message: "Deleted Backups and changed readme") removed backup files. Author: Oliver. This commit may be responsible for missing backups. Please confirm whether this deletion was authorized.
-
-Remaining tasks / recommendations:
-- Decide whether to reintroduce recovered backups into main branch. Restoring them to main will create a new commit on top of 6127867d51 (this changelog can be used), or they can be provided in a separate branch or as artifacts.
-- If you want me to commit the recovered_backups/ content and this changelog to the repository and push, confirm and I will proceed.
-- If you prefer the repository to remain exactly at 6127867d51 (no additional commits), I will not commit recovered files; instead I will provide them separately (download/attach) and leave main at the rollback state.
-

README.md

@@ -1,60 +0,0 @@
-# NGO Website — ODOO4projects
-
-**Project:** NGO marketing homepage and blog
-**URL:** [ngo.odoo4projects.com](https://ngo.odoo4projects.com)
-**Stack:** Static HTML · Tailwind CSS · Vanilla JS
-
----
-
-## Repository Rules
-
-- Blog posts live in `blog.json` — do not create separate backup files.
-- No backup files in the repo.
-- Update this README with every commit.
-
----
-
-## Page Structure
-
-| # | Block | Purpose |
-|---|-------|---------|
-| 1 | **Hero** | Headline, subheadline, free-trial CTA, key stats |
-| 2 | **Hot NGO Topics** | Three focused topic cards (transparency, communications, fundraising) |
-| 3 | **Blog** | Latest articles loaded dynamically from `blog.json` |
-| 4 | **Sign Up — Free Trial** | Email signup form, 4-week free trial, no credit card |
-| 5 | **Have a Meeting** | 30-minute consultation booking via Google Calendar |
-
----
-
-## CI Checks (required on every push)
-
-- **HTML lint** — valid markup, no broken anchors
-- **JS lint** — no errors, no `console.error` left in production paths
-- **Tailwind build** — `npx tailwindcss -i ./src/input.css -o ./assets/site.css --minify` must exit 0
-- **Corporate design compliance:**
-  - No CSS gradients — `gradient`, `bg-*-gradient`, `linear-gradient`, `radial-gradient` are forbidden
-  - No CSS animations or keyframes — `animate-*`, `@keyframes`, transform-based `hover:translate-*` are forbidden
-  - No blur or glassmorphism effects — `backdrop-blur`, `backdrop-filter` are forbidden
-  - Colors must use the approved brand palette only: `brand-ink · brand-primary · brand-accent · brand-sunrise · brand-emerald · brand-snow · brand-smoke`
-  - Images must be served from `odoo4projects.com`, `images.unsplash.com`, or local `assets/`
-- **Accessibility** — heading hierarchy (one `<h1>` per page), `alt` on all images, sufficient contrast (WCAG AA)
-- **Performance budget** — total page weight ≤ 200 KB (excluding cached fonts); critical render path ≤ 1 s on fast 3G
-- **SEO** — `<title>`, `<meta name="description">`, `<h1>`, canonical `<link>`, and JSON-LD structured data must be present
-
----
-
-## Languages
-
-| Code | Language |
-|------|----------|
-| `en` | English (default) |
-| `es` | Español |
-| `de` | Deutsch |
-
-All UI strings are managed via the inline `translations` object in `index.html`.
-
----
-
-## Focus Keywords
-
-`NGO donor management` · `transparent donations` · `Odoo for NGOs` · `donor communication` · `minimal admin for charities`

blog.json

@@ -1,45 +0,0 @@
-[
-  {
-    "area": "Transparency",
-    "title": "Every Peso on the Page: Ana's Ledger Story",
-    "teaser": "<p>Ana replaced five notebooks with a four-stop impact ledger and now answers donor questions in seconds.</p>",
-    "content": "<h3>Every peso needs a map</h3>\n<p>Ana used to juggle five notebooks and still felt blind when a donor asked where their coin landed.</p>\n<h3>Pressure points</h3>\n<p>Receipts hid in mugs, inboxes, and backpacks, so every audit meant copying the same row five times.</p>\n<p>Boards pushed for proof faster than her laptop could export sheets, so calls ended with apologies.</p>\n<p>Vendors waited weeks because approvals depended on whoever remembered to forward a blurry photo.</p>\n<p>Community meetings turned tense when no one could connect a bus ticket to a child’s name in real time.</p>\n<h3>System upgrade</h3>\n<p>Ana listed every stop money touches: donation, allocation, program spend, impact note.</p>\n<p>Each funding source now sits on a simple card showing who owns it and what is due.</p>\n<p>Odoo acts like a shared notebook; every card links to tags, receipts, and the promise behind the peso.</p>\n<p>Receipts arrive through a one-question webform, and n8n files them while pinging the right teammate.</p>\n<p>An AI scribe drafts the Friday recap so donors hear “Twelve bus rides covered” instead of raw numbers.</p>\n<p>Dashboards mix pesos, quotes, and photos so anyone can understand the path without spreadsheets.</p>\n<h3>Controls and rituals</h3>\n<p>Program leads drop 20-second voice notes beside transactions, turning expenses into mini field reports.</p>\n<p>Monthly reviews start with one shared view, so no one emails attachments named “final_v7.xlsx.”</p>\n<p>Vendors sign reimbursements inside the same screen, keeping cash flow visible for everyone.</p>\n<p>Audit packets assemble in three clicks because every receipt already lives on its card.</p>\n<p>Community assemblies now show a single screen that pairs pesos with tickets and class photos.</p>\n<ul>\n  <li>Ledger lane: donation → tag → receipt → quote.</li>\n  <li>Reminder loop: webform → n8n alert → approval in Odoo.</li>\n  <li>Donor pack: one graph, two sentences, one photo.</li>\n</ul>\n<h3>Governance wins</h3>\n<p>Restricted funds carry color labels so staff know which pesos can move and which must stay put.</p>\n<p>Variance alerts fire when a promise slips, giving Ana 48 hours to fix it before donors notice.</p>\n<p>Impact notes sync to donor cards, so every thank-you includes the latest field quote.</p>\n<p>Training new volunteers takes twenty minutes because the process lives inside the cards, not in Ana's head.</p>\n<ul>\n            <li>Color coding: blue for scholarship, green for bus fuel, gold for emergency repairs.</li>\n            <li>Two-minute onboarding video embedded on every card.</li>\n            <li>Alert ladder: email at 24 hours, WhatsApp ping at 48, phone call at 72.</li>\n          </ul>\n<h3>Results that stick</h3>\n<p>Reimbursements clear within 48 hours, so vendors keep extending gentle credit.</p>\n<p>Audit fees dropped by 15% because firms spend less time chasing evidence.</p><p>Board calls shifted from “Where is the proof?” to “Can we share this ledger publicly?”</p>\n<p>Staff now clock out at 7 p.m. because reconciliation no longer eats the night.</p>\n<p>Students narrate the dashboard column by column, which builds trust faster than static PDFs.</p><p>Grant partners log in as viewers and pull their own numbers instead of emailing last-minute lists.</p>\n<p>The finance committee now focuses on scenario planning rather than detective work.</p>\n<p><strong>Micro-CTA:</strong> Want Ana’s four-stop ledger map? Reply “ledger” and I’ll send the template.</p>\n<h3>Story beats returned</h3>\n<p>The organization still hustles, but the hustle now has lanes, and Ana rides the 7:15 bus home holding a calm heart instead of a stack of IOUs.</p>\n<h3>Your invitation</h3>\n<p>Book a 30-minute impact-ledger clinic. We’ll map two of your funding streams, load them into an Odoo sandbox, and show how a reminder bot can keep receipts in line without late nights.</p>\n",
-    "date": "2026-03-22"
-  },
-  {
-    "area": "Fundraising",
-    "title": "From One-Time Gifts to Farm Friends: Tomas' Relationship Journal",
-    "teaser": "<p>Tomas' relationship journal keeps every donor promise on time and turns farm visitors into recurring supporters.</p>",
-    "content": "<h3>From one-time gifts to farm friends</h3>\n<p>Tomas dreaded the silence after every big appeal because each unanswered thank-you felt like losing a future harvest.</p>\n<h3>Where the leaks lived</h3>\n<p>Welcome emails left days late since volunteers worked from separate inboxes.</p>\n<p>Birthdays hid in a paper planner that once soaked up a rainstorm.</p>\n<p>Corporate sponsors received the same PDF regardless of what crops they cared about.</p>\n<p>Board reviews turned into guessing games about which families might donate again.</p>\n<h3>The rebuild</h3>\n<p>Tomas moved everything into a lightweight Odoo workspace he calls the relationship journal.</p>\n<p>Each supporter card shows origin story, favorite program, and next touchpoint in one glance.</p>\n<p>He mapped three paths: new friend, seasonal donor, recurring guardian.</p>\n<p>Tasks now show one line: owner, due date, and purpose.</p>\n<p>n8n schedules nudges the moment a gift arrives, so someone always follows up within 48 hours.</p>\n<p>An AI drafting buddy writes first-pass thank-you notes using the details already on each card.</p>\n<h3>Data made friendly</h3>\n<p>Supporters are tagged by crop, channel, and volunteer interest in plain words like “loves cassava fairs.”</p>\n<p>Segment dashboards show which stories pull one-time donors into the recurring lane.</p>\n<p>Monthly reviews ask one question: Which color column needs attention?</p>\n<ul>\n            <li>Blue tiles = families who gave at events.</li>\n            <li>Orange tiles = businesses who sponsor seedlings.</li>\n            <li>Purple tiles = diaspora donors following WhatsApp updates.</li>\n          </ul>\n<h3>Human touches</h3>\n<p>Field photos upload straight from phones, and Odoo resizes them so they look great on any device.</p><p>Tomas records 60-second voice notes from the fields and attaches them to donor cards.</p>\n<p>Volunteers pull scripts straight from Odoo, so language stays warm even when teams rotate.</p>\n<p>Dashboard tiles show who has not heard from the collective in 30, 60, and 90 days.</p>\n<ul>\n  <li>Green cards = steady supporters with next visit scheduled.</li>\n  <li>Yellow cards = need a story update this week.</li>\n  <li>Red cards = missed promise; assign a call immediately.</li>\n</ul>\n<h3>Metrics that matter</h3>\n<p>Open tasks dropped by half because every promise now has one owner and timestamp.</p><p>Recurring donors grew 38% once the journal kept promises on time.</p>\n<p>Average thank-you response time dropped to nine hours.</p>\n<p>Volunteers onboard in fifteen minutes because every step sits inside the card.</p>\n<p>Corporate partners now sponsor recurring kits because they see their updates logged in real time.</p><p>Board decks now show journey health instead of raw totals, so planning conversations stay calm.</p>\n<p><strong>Micro-CTA:</strong> Want the three-path relationship map Tomas uses? Reply “journey” and I’ll send the canvas.</p>\n<h3>Implementation sprint</h3>\n<ul>\n  <li>Export your top 50 donors and tag them by story interest.</li>\n  <li>Draft three touchpoint paths with one welcome, one update, one invite.</li>\n  <li>Connect n8n so each donation triggers the right checklist.</li>\n  <li>Record one voice memo per week and attach it to the cards that need warmth.</li>\n</ul>\n<p>Teams that follow this sprint usually see dormant donors reply within two weeks.</p>\n<p>Volunteers love the clarity because they can grab the next action during a lunch break.</p><p>Quarterly reviews compare each path, so Tomas can tweak scripts without rebuilding the system.</p>\n\n<h3>Story beats returned</h3>\n<p>The farm still hustles, but now Tomas walks home at sunset knowing every donor hears a fresh story before the soil cools.</p>\n<h3>Your invitation</h3>\n<p>Spin up a free Odoo sandbox and let’s load ten supporter cards together. In one 30-minute clinic we’ll copy Tomas’ paths, hook up n8n reminders, and leave you with scripts volunteers can read tomorrow.</p>\n",
-    "date": "2026-03-18"
-  },
-  {
-    "area": "Digital presence",
-    "title": "Turn Your NGO Website into a Field Walk",
-    "teaser": "<p>Elena's five-block layout makes every site visit feel like a river cleanup, even on a phone.</p>",
-    "content": "<h3>Turn your site into a field walk</h3>\n<p>Elena cringed every time someone opened their website at a street fair because the spinning loader felt like an apology.</p>\n<h3>Issues to fix</h3>\n<p>Pages mixed board minutes with volunteer invites, so nobody knew where to click.</p>\n<p>The donate form had eight required fields and crashed on older phones.</p>\n<p>Images lived on personal devices, so updates stalled whenever volunteers traveled.</p>\n<p>Analytics showed people bounced in under ten seconds.</p>\n<h3>Build blocks, not code</h3>\n<p>Elena moved the site into Odoo’s drag-and-drop builder so every block felt like a card.</p>\n<p>Each section fits on a phone screen: mission, today’s project, proof, ways to help, calendar.</p>\n<p>Real photos upload straight from WhatsApp and resize automatically.</p>\n<p>Testimonials now sit beside the action they describe.</p>\n<p>Donate buttons follow the reader down the page with a single tap checkout.</p>\n<h3>Governance & workflow</h3>\n<p>Editorial calendar lives inside Odoo with color labels for campaigns, reports, and evergreen stories.</p>\n<p>Reviewers get one-click preview links, so approvals happen on WhatsApp instead of email chains.</p>\n<p>Accessibility checks run before publish, flagging low-contrast text in plain language.</p>\n<p>Translations sit beside each block, letting bilingual volunteers ship updates fast.</p>\n<h3>Automation assist</h3>\n<p>n8n resizes images, tags blogs by theme, and cross-posts stories to WhatsApp and email.</p>\n<p>Elena writes once and the reminder bot republishes everywhere.</p>\n<p>An AI headline buddy suggests two simple options per story, so copy stays human.</p><p>Heatmaps highlight which block loses attention so Elena can adjust the layout weekly.</p>\n<p>Error logs show if someone’s phone fails mid-form, helping the team fix issues before a campaign.</p>\n<p>Weekly summary emails pull site stats plus top-performing sections for the board.</p>\n<h3>Content structure</h3>\n<p>Downloadable kits live behind simple buttons, so teachers grab lesson plans without emails.</p><p>Each article follows a three-block rhythm: hook, proof, invite.</p>\n<p>Videos autoplay muted with captions so people understand the scene on crowded buses.</p>\n<p>Callout cards explain tools in plain phrases: “Map every cleanup in one shared calendar.”</p>\n<ul>\n  <li>Hero row: bold photo + 12-word promise.</li>\n  <li>Impact grid: three stats with icons.</li>\n  <li>Action tray: volunteer form, donate, share.</li>\n</ul>\n<h3>Results</h3>\n<p>Average time on page tripled and bounce rate dropped below 30%.</p>\n<p>Volunteer signups happen on mobile because the form now has three fields.</p>\n<p>SEO basics improved because every block now has alt text and descriptive slugs.</p><p>Board members review live dashboards instead of PDFs.</p>\n<p>Funders cite the site during calls because proof is easy to show.</p>\n<p><strong>Micro-CTA:</strong> Need Elena’s five-section layout? Reply “walk” and I’ll send the wireframe.</p>\n<h3>Quick launch plan</h3>\n<ul>\n  <li>Sketch five sections on paper and test with two volunteers.</li>\n  <li>Upload one real photo per section; skip stock imagery.</li>\n  <li>Wire n8n to resize and tag assets automatically.</li>\n  <li>Schedule a weekly 30-minute content sweep to keep blocks fresh.</li>\n</ul>\n<p>Most teams ship a refreshed homepage in under two days using this plan.</p>\n<p>Keep a punch list of “next swap” items so volunteers can help during downtime.</p><p>Use simple analytics goals like “Time on page > 90 seconds” to measure if the story lands.</p>\n\n<h3>Story beats returned</h3>\n<p>The site finally feels like the river trail Elena loves, and neighbors stay long enough to smell the wet soil through their screens.</p>\n<h3>Your invitation</h3>\n<p>Book a website tune-up clinic. We’ll sketch your content blocks, load them into an Odoo sandbox, hook n8n to your photo sources, and leave you with headlines any volunteer can publish.</p>\n",
-    "date": "2026-03-12"
-  },
-  {
-    "area": "Operations",
-    "title": "Calm Ops for Five-Person Teams: Paula's Playbook",
-    "teaser": "<p>Paula's shared board, three kits, and reminder bots give her tiny team calm lanes again.</p>",
-    "content": "<h3>Small team, calmer ops</h3>\n<p>Paula’s five-person crew once survived on coffee and miracles, and every missed grant email felt like letting the clinic down.</p>\n<h3>Where chaos hid</h3>\n<p>Tasks lived in WhatsApp, paper folders, and sticky notes taped to doors.</p>\n<p>Expense approvals stalled because the volunteer bookkeeper checked email at midnight.</p>\n<p>Volunteers requested time off via voice notes, so schedules overlapped without warning.</p>\n<p>Board calls devolved into status therapy instead of strategic planning.</p>\n<h3>Operating spine</h3>\n<p>Paula mapped every recurring task and moved it into Odoo boards labeled This Week, Blocked, Done.</p>\n<p>Each card lists owner, due date, and checklist in two lines.</p>\n<p>Expense records attach directly to tasks, so reimbursements sit next to receipts.</p>\n<p>Standard kits—clinic, workshop, grant—bundle supplies, links, and photos of “done.”</p><p>Each kit also lists backup owners so vacations stop being crises.</p>\n<ul>\n  <li>Clinic kit: tents, coolers, intake forms, walkie-charge reminder.</li>\n  <li>Workshop kit: markers, snacks, attendance sheet, follow-up template.</li>\n  <li>Grant kit: metrics link, testimonial prompt, submission portal.</li>\n</ul>\n<h3>Visibility upgrades</h3>\n<p>Risk cards surface at the top whenever deadlines approach, so leadership sees trouble before it burns staff.</p>\n<p>Meeting notes live inside the task they reference, making handoffs painless.</p>\n<p>Quarterly calendars hang beside the board and mirror the same color codes.</p>\n<h3>Automation assist</h3>\n<p>n8n routes webforms, pings owners when tasks age, and batches approvals before lunch.</p><p>Escalations ladder from email to WhatsApp to phone call if a blocker lingers more than 48 hours.</p>\n<p>Volunteer hours log automatically when someone submits the attendance form.</p>\n<p>An AI summary buddy sends Paula a nightly paragraph with wins, risks, and supply levels.</p>\n<p>Color labels show which funder cares about each task, avoiding compliance missteps.</p><p>Grant attachments stay versioned inside the card, so no one emails “final_final.pdf” ever again.</p>\n<h3>Working rhythm</h3>\n<p>Monday stand-ups start with the shared board projected on the wall.</p>\n<p>Quiet Wednesdays block meetings so staff can finish deep work.</p>\n<p>Weekly “clear bins” hour means everyone empties inboxes while the board stays open.</p><p>Friday reflections capture lessons learned directly on the board so next week starts sharper.</p>\n<p>Energy check stickers track morale on a wall chart.</p><p>Red stickers trigger a five-minute retro so the team fixes friction before it festers.</p>\n<h3>Metrics</h3>\n<p>Grant packets now ship three days early.</p>\n<p>Average reimbursement time fell to 36 hours.</p><p>Procurement cycle time shrank by 40% because approvals travel with the task.</p>\n<p>Volunteer onboarding lasts 20 minutes because the process lives inside the cards.</p>\n<p>Funder check-ins shortened because dashboards answer status questions at a glance.</p><p>Burnout signals—sick days, tense meetings—dropped sharply once lanes were visible.</p>\n<p><strong>Micro-CTA:</strong> Want Paula’s three-kit template? Reply “ops” and I’ll send the board layout.</p>\n<h3>Four-step rollout</h3>\n<ul>\n  <li>List every recurring task and tag who truly owns it.</li>\n  <li>Clone Paula's three kits and rename them for your programs.</li>\n  <li>Hook n8n to your intake forms so work lands in the right lane.</li>\n  <li>Set two check windows per week to clear blockers in under 15 minutes.</li>\n</ul>\n<p>Teams usually reclaim 6–8 staff hours per week once this cadence sticks.</p>\n<p>Use those hours for prevention work: training, donor care, or rest.</p>\n\n<h3>Story beats returned</h3>\n<p>The organization still hustles, but the hustle now has lanes, and Paula walks home before sunset while the reminder bot keeps promises steady.</p>\n<h3>Your invitation</h3>\n<p>Book a free ops audit call. We’ll clone Paula’s board in your sandbox, wire n8n to your forms, and leave you with a checklist that keeps five-person teams sane.</p>\n",
-    "date": "2026-03-05"
-  },
-  {
-    "area": "Donor data",
-    "title": "Build a Relationship Atlas Like Idris",
-    "teaser": "<p>Idris' relationship atlas turns scattershot spreadsheets into humane tags, reminders, and quick compliance wins.</p>",
-    "content": "<h3>Build a relationship atlas</h3>\n<p>Idris hated guessing which donors cared most because every wrong thank-you felt like letting someone down.</p>\n<h3>Pains</h3>\n<p>Six spreadsheets, three CRMs, and a shoebox of pledge cards all told different stories.</p>\n<p>Privacy requests took weeks because data sat in personal inboxes.</p>\n<p>Board members asked for regional insights he could only estimate.</p>\n<p>Volunteers kept their own contact lists, so follow-ups collided.</p>\n<h3>Single source of truth</h3>\n<p>Idris imported everything into Odoo and nicknamed it the relationship atlas.</p>\n<p>Each supporter card shows giving history, volunteer hours, favorite program, and preferred channel in one view.</p>\n<p>Tags read like stories: “cares about maternal health,” “joins WhatsApp lives,” “hosts clinics in the Chaco.”</p>\n<p>Consent fields sit at the top so compliance is a two-click job.</p><p>Notes include pronunciation tips and personal preferences so every interaction feels human.</p>\n<h3>Automation loop</h3>\n<p>n8n watches forms, webinars, and replies, then updates the right card automatically.</p>\n<p>Reminder bots create tasks when someone goes 45 days without a touch.</p>\n<p>An AI scribe scans meeting notes and suggests segments Idris might have missed.</p><p>Suggested segments come with sample language, so outreach stays consistent even when staff rotate.</p>\n<p>Alerts escalate from email to WhatsApp when a promise is about to slip.</p>\n<h3>Dashboards that talk like humans</h3>\n<p>Heat maps show supporters by region with real photos.</p>\n<p>Rhythm boards display who heard from the team this week, month, and quarter.</p>\n<p>Promise trackers highlight pending callbacks with color codes.</p><p>Leaders can filter by “next visit” to plan travel without extra spreadsheets.</p>\n<ul>\n  <li>Blue = steady supporters ready for deeper invite.</li>\n  <li>Yellow = needs story update within seven days.</li>\n  <li>Red = missed commitment; assign personally.</li>\n</ul>\n<h3>Implementation steps</h3>\n<ul>\n  <li>Export contacts from every source and label them with plain-language tags.</li>\n  <li>Deduplicate inside Odoo using email + phone as anchors.</li>\n  <li>Embed a simple preference form so supporters update their own data.</li>\n  <li>Schedule weekly “atlas sweeps” to review alerts and close loops.</li>\n</ul>\n<p>These sweeps take 20 minutes when everyone owns their slice.</p>\n<p>Volunteers see the same view, so handoffs finally feel respectful.</p><p>Partner organizations can receive read-only links, keeping coalitions aligned without extra exports.</p>\n<h3>Operational wins</h3>\n<p>Event RSVPs sync automatically, so Idris knows who to greet by name.</p><p>Segmented campaigns now send health advocates clinic updates while corporate donors get quarterly kits.</p>\n<p>Lapsed supporters receive friendly voice memos instead of generic emails.</p><p>Data health score appears on the dashboard so the team knows when to clean duplicates.</p>\n<p>Deletion requests finish in under an hour with audit logs attached.</p><p>Data exports for funders now take minutes because filters remember the last settings.</p>\n<p>Retention jumped 12% because people hear from the team before they feel forgotten.</p><p>Board decks now include one slide per segment with photos and next steps.</p>\n<p><strong>Micro-CTA:</strong> Need the atlas tagging sheet? Reply “atlas” and I’ll send the workbook.</p>\n<h3>Signals worth monitoring</h3>\n<p>Weekly: touchpoint gaps by segment.</p><p>Daily: check for bounced emails or unsubscribes so you can switch channels fast.</p>\n<p>Monthly: conversion from one-time to recurring gifts.</p>\n<p>Quarterly: data health score and consent updates.</p>\n<p>Flag anything red for 48 hours and assign a specific owner.</p>\n<h3>Story beats returned</h3>\n<p>The atlas means Idris walks into meetings knowing who needs care, and donors feel remembered instead of managed.</p>\n<h3>Your invitation</h3>\n<p>Start a free Odoo sandbox and bring three messy lists to a 30-minute map-making session. We’ll clean them live, wire n8n updates, and leave you with segments you can act on tomorrow.</p>\n",
-    "date": "2026-02-26"
-  },
-  {
-    "area": "Sustainability",
-    "title": "How Lila Turned Cash Flow into a Calm Heartbeat",
-    "teaser": "<p>Lila's money-weather calendar shows every cliff before it hits and keeps reserves growing.</p>",
-    "content": "<h3>Cash flow needs a heartbeat</h3>\n<p>Lila was tired of praying every March because each late rent payment felt like telling families their shelter might vanish.</p>\n<h3>Cliffs to smooth</h3>\n<p>Income arrived in unpredictable bursts while expenses stayed steady.</p>\n<p>Sticky-note calendars overlapped, so no one saw when grants and payroll collided.</p>\n<p>Vendors heard “soon” more than “paid,” which strained trust.</p>\n<p>Staff carried stress home because every storm meant emergency appeals.</p>\n<h3>Calendar overhaul</h3>\n<p>Lila sketched a wall-sized calendar and marked every income stream in one color.</p>\n<p>Expenses earned their own colors so cliffs jumped off the page.</p>\n<p>She moved the plan into Odoo so updates happen once and appear everywhere.</p>\n<p>Each funding source now has a simple card showing owner, due date, and health.</p>\n<p>Reserve tracker nudges her to move money into savings whenever cash exceeds a safe line.</p><p>Each nudge includes a suggested amount so she builds reserves in bite-sized transfers.</p>\n<h3>Data on one screen</h3>\n<p>Cards show amount expected, confidence level, and last touch in plain words.</p>\n<p>Color labels: green for confirmed, yellow for pending, red for risk.</p>\n<p>Scenario slider lets Lila test “what if grant X delays 30 days” without new sheets.</p>\n<h3>Automation guardrails</h3>\n<p>n8n watches deadlines, renewals, and grant reports, then pings owners before crunch time.</p>\n<p>Dashboards display twelve months of runway plus a “money weather” icon the team understands at a glance.</p>\n<p>Alerts escalate if reserves dip below target, giving leadership days to respond.</p><p>Expense approvals show impact notes so finance knows why the spend matters.</p>\n<p>Vendors submit invoices through a webform so approvals travel with documentation.</p><p>Vendors now see status labels on their invoices, so they know when funds will land.</p>\n<h3>Communication rhythm</h3>\n<p>Staff receive a monthly money weather note using sunny/cloudy/rainy icons.</p>\n<p>Quarterly “friends of Puentes” emails explain where funds went and what’s next.</p>\n<p>Community budget circles vote on flexible funds and suggest low-lift fundraisers.</p><p>Notes from each circle feed back into Odoo so ideas become tasks instantly.</p>\n<p>Dashboards stream to a TV in the workspace, making cash position visible all day.</p><p>Board members log in remotely and leave comments on specific cards instead of firing off emails.</p>\n<ul>\n  <li>Monday: review runway line and upcoming cliffs.</li>\n  <li>Wednesday: confirm reserve transfers.</li>\n  <li>Thursday: check subsidy renewals against alerts.</li>\n  <li>Friday: send weather note before people log off.</li>\n</ul>\n<h3>Metrics</h3>\n<p>Reserve now covers two months of core costs.</p>\n<p>Vendors are paid within five days, improving terms.</p>\n<p>Emergency appeals dropped because runway forecasts flag issues early.</p><p>Scenario drills now happen quarterly so nothing feels like a surprise fire drill.</p>\n<p>Board meetings focus on partnerships instead of patching leaks.</p><p>Staff stress surveys show a 30% drop in “money worries” mentions.</p>\n<h3>Rollout plan</h3>\n<ul>\n  <li>List every income stream with amount, timing, and confidence.</li>\n  <li>Plot expenses in the same calendar, highlighting spikes.</li>\n  <li>Move both into Odoo cards and tag owners.</li>\n  <li>Set n8n alerts for renewals, reserve dips, and vendor payments.</li>\n</ul>\n<p>This takes one afternoon and replaces months of scrambling.</p>\n<p><strong>Micro-CTA:</strong> Want the money weather template? Reply “weather” and I’ll send the kit.</p>\n\n<h3>Story beats returned</h3>\n<p>The organization still hustles, but the hustle now has lanes, and Lila rings a tiny bell every time the reserve line inches upward.</p>\n<h3>Your invitation</h3>\n<p>Subscribe to the NGO ops newsletter or book a funding calendar clinic. We’ll map your cliffs, load them into an Odoo sandbox, wire n8n alerts, and leave you with a calm heartbeat you can explain in five minutes.</p>\n",
-    "date": "2026-02-19"
-  }
-]
-

google261cafffa78d8c3d.html

@@ -0,0 +1 @@
+google-site-verification: google261cafffa78d8c3d.html

img/bean.svg

@@ -0,0 +1,114 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-1152,-256)">
+        <rect id="Icons" x="0" y="0" width="1280" height="800" style="fill:none;"/>
+        <g id="Icons1" serif:id="Icons">
+            <g id="Strike">
+            </g>
+            <g id="H1">
+            </g>
+            <g id="H2">
+            </g>
+            <g id="H3">
+            </g>
+            <g id="list-ul">
+            </g>
+            <g id="hamburger-1">
+            </g>
+            <g id="hamburger-2">
+            </g>
+            <g id="list-ol">
+            </g>
+            <g id="list-task">
+            </g>
+            <g id="trash">
+            </g>
+            <g id="vertical-menu">
+            </g>
+            <g id="horizontal-menu">
+            </g>
+            <g id="sidebar-2">
+            </g>
+            <g id="Pen">
+            </g>
+            <g id="Pen1" serif:id="Pen">
+            </g>
+            <g id="clock">
+            </g>
+            <g id="external-link">
+            </g>
+            <g id="hr">
+            </g>
+            <g id="info">
+            </g>
+            <g id="warning">
+            </g>
+            <g id="plus-circle">
+            </g>
+            <g id="minus-circle">
+            </g>
+            <g id="vue">
+            </g>
+            <g id="cog">
+            </g>
+            <g id="logo">
+            </g>
+            <g id="radio-check">
+            </g>
+            <g id="eye-slash">
+            </g>
+            <g id="eye">
+            </g>
+            <g id="toggle-off">
+            </g>
+            <g id="shredder">
+            </g>
+            <g id="spinner--loading--dots-" serif:id="spinner [loading, dots]">
+            </g>
+            <g id="react">
+            </g>
+            <g id="check-selected">
+            </g>
+            <g id="turn-off">
+            </g>
+            <g id="code-block">
+            </g>
+            <g id="user">
+            </g>
+            <g id="coffee-bean">
+            </g>
+            <g transform="matrix(0.638317,0.368532,-0.368532,0.638317,785.021,-208.975)">
+                <g id="coffee-beans">
+                    <g id="coffee-bean1" serif:id="coffee-bean">
+                    </g>
+                </g>
+            </g>
+            <g id="coffee-bean-filled" transform="matrix(0.866025,0.5,-0.5,0.866025,717.879,-387.292)">
+                <g transform="matrix(1,0,0,1,0,-0.699553)">
+                    <path d="M737.673,328.231C738.494,328.056 739.334,328.427 739.757,329.152C739.955,329.463 740.106,329.722 740.106,329.722C740.106,329.722 745.206,338.581 739.429,352.782C737.079,358.559 736.492,366.083 738.435,371.679C738.697,372.426 738.482,373.258 737.89,373.784C737.298,374.31 736.447,374.426 735.735,374.077C730.192,371.375 722.028,365.058 722.021,352C722.015,340.226 728.812,330.279 737.673,328.231Z"/>
+                </g>
+                <g transform="matrix(-1,0,0,-1,1483.03,703.293)">
+                    <path d="M737.609,328.246C738.465,328.06 739.344,328.446 739.785,329.203C739.97,329.49 740.106,329.722 740.106,329.722C740.106,329.722 745.206,338.581 739.429,352.782C737.1,358.507 736.503,365.948 738.383,371.527C738.646,372.304 738.415,373.164 737.796,373.703C737.177,374.243 736.294,374.356 735.56,373.989C730.02,371.241 722.028,364.92 722.021,352C722.016,340.255 728.779,330.328 737.609,328.246Z"/>
+                </g>
+            </g>
+            <g transform="matrix(0.638317,0.368532,-0.368532,0.638317,913.062,-208.975)">
+                <g id="coffee-beans-filled">
+                    <g id="coffee-bean2" serif:id="coffee-bean">
+                    </g>
+                </g>
+            </g>
+            <g id="clipboard">
+            </g>
+            <g transform="matrix(1,0,0,1,128.011,1.35415)">
+                <g id="clipboard-paste">
+                </g>
+            </g>
+            <g id="clipboard-copy">
+            </g>
+            <g id="Layer1">
+            </g>
+        </g>
+    </g>
+</svg>

img/bean_dark_roast.svg

@@ -0,0 +1,224 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+
+<svg
+   fill="#000000"
+   width="800px"
+   height="800px"
+   viewBox="0 0 64 64"
+   version="1.1"
+   xml:space="preserve"
+   style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+   id="svg6"
+   sodipodi:docname="bean_dark_Roast.svg"
+   inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:serif="http://www.serif.com/"><defs
+   id="defs6" /><sodipodi:namedview
+   id="namedview6"
+   pagecolor="#ffffff"
+   bordercolor="#000000"
+   borderopacity="0.25"
+   inkscape:showpageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   inkscape:deskcolor="#d1d1d1"
+   inkscape:zoom="1.075"
+   inkscape:cx="400"
+   inkscape:cy="400"
+   inkscape:window-width="1920"
+   inkscape:window-height="1129"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="svg6" />
+    <g
+   transform="matrix(1,0,0,1,-1152,-256)"
+   id="g6">
+        <rect
+   id="Icons"
+   x="0"
+   y="0"
+   width="1280"
+   height="800"
+   style="fill:none;" />
+        <g
+   id="Icons1"
+   serif:id="Icons">
+            <g
+   id="Strike">
+            </g>
+            <g
+   id="H1">
+            </g>
+            <g
+   id="H2">
+            </g>
+            <g
+   id="H3">
+            </g>
+            <g
+   id="list-ul">
+            </g>
+            <g
+   id="hamburger-1">
+            </g>
+            <g
+   id="hamburger-2">
+            </g>
+            <g
+   id="list-ol">
+            </g>
+            <g
+   id="list-task">
+            </g>
+            <g
+   id="trash">
+            </g>
+            <g
+   id="vertical-menu">
+            </g>
+            <g
+   id="horizontal-menu">
+            </g>
+            <g
+   id="sidebar-2">
+            </g>
+            <g
+   id="Pen">
+            </g>
+            <g
+   id="Pen1"
+   serif:id="Pen">
+            </g>
+            <g
+   id="clock">
+            </g>
+            <g
+   id="external-link">
+            </g>
+            <g
+   id="hr">
+            </g>
+            <g
+   id="info">
+            </g>
+            <g
+   id="warning">
+            </g>
+            <g
+   id="plus-circle">
+            </g>
+            <g
+   id="minus-circle">
+            </g>
+            <g
+   id="vue">
+            </g>
+            <g
+   id="cog">
+            </g>
+            <g
+   id="logo">
+            </g>
+            <g
+   id="radio-check">
+            </g>
+            <g
+   id="eye-slash">
+            </g>
+            <g
+   id="eye">
+            </g>
+            <g
+   id="toggle-off">
+            </g>
+            <g
+   id="shredder">
+            </g>
+            <g
+   id="spinner--loading--dots-"
+   serif:id="spinner [loading, dots]">
+            </g>
+            <g
+   id="react">
+            </g>
+            <g
+   id="check-selected">
+            </g>
+            <g
+   id="turn-off">
+            </g>
+            <g
+   id="code-block">
+            </g>
+            <g
+   id="user">
+            </g>
+            <g
+   id="coffee-bean">
+            </g>
+            <g
+   transform="matrix(0.638317,0.368532,-0.368532,0.638317,785.021,-208.975)"
+   id="g1">
+                <g
+   id="coffee-beans">
+                    <g
+   id="coffee-bean1"
+   serif:id="coffee-bean">
+                    </g>
+                </g>
+            </g>
+            <g
+   id="coffee-bean-filled"
+   transform="matrix(0.866025,0.5,-0.5,0.866025,717.879,-387.292)">
+                <g
+   transform="matrix(1,0,0,1,0,-0.699553)"
+   id="g2">
+                    <path
+   d="M737.673,328.231C738.494,328.056 739.334,328.427 739.757,329.152C739.955,329.463 740.106,329.722 740.106,329.722C740.106,329.722 745.206,338.581 739.429,352.782C737.079,358.559 736.492,366.083 738.435,371.679C738.697,372.426 738.482,373.258 737.89,373.784C737.298,374.31 736.447,374.426 735.735,374.077C730.192,371.375 722.028,365.058 722.021,352C722.015,340.226 728.812,330.279 737.673,328.231Z"
+   id="path1"
+   style="fill:#3e2723;fill-opacity:1" />
+                </g>
+                <g
+   transform="matrix(-1,0,0,-1,1483.03,703.293)"
+   id="g3">
+                    <path
+   d="M737.609,328.246C738.465,328.06 739.344,328.446 739.785,329.203C739.97,329.49 740.106,329.722 740.106,329.722C740.106,329.722 745.206,338.581 739.429,352.782C737.1,358.507 736.503,365.948 738.383,371.527C738.646,372.304 738.415,373.164 737.796,373.703C737.177,374.243 736.294,374.356 735.56,373.989C730.02,371.241 722.028,364.92 722.021,352C722.016,340.255 728.779,330.328 737.609,328.246Z"
+   id="path2"
+   style="stroke:#3e2723;stroke-opacity:1;fill:#3e2723;fill-opacity:1" />
+                </g>
+            </g>
+            <g
+   transform="matrix(0.638317,0.368532,-0.368532,0.638317,913.062,-208.975)"
+   id="g4">
+                <g
+   id="coffee-beans-filled">
+                    <g
+   id="coffee-bean2"
+   serif:id="coffee-bean">
+                    </g>
+                </g>
+            </g>
+            <g
+   id="clipboard">
+            </g>
+            <g
+   transform="matrix(1,0,0,1,128.011,1.35415)"
+   id="g5">
+                <g
+   id="clipboard-paste">
+                </g>
+            </g>
+            <g
+   id="clipboard-copy">
+            </g>
+            <g
+   id="Layer1">
+            </g>
+        </g>
+    </g>
+</svg>

img/bean_medium_roast.svg

@@ -0,0 +1,224 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+
+<svg
+   fill="#000000"
+   width="800px"
+   height="800px"
+   viewBox="0 0 64 64"
+   version="1.1"
+   xml:space="preserve"
+   style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+   id="svg6"
+   sodipodi:docname="bean_light_brown.svg"
+   inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:serif="http://www.serif.com/"><defs
+   id="defs6" /><sodipodi:namedview
+   id="namedview6"
+   pagecolor="#ffffff"
+   bordercolor="#000000"
+   borderopacity="0.25"
+   inkscape:showpageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   inkscape:deskcolor="#d1d1d1"
+   inkscape:zoom="1.075"
+   inkscape:cx="400"
+   inkscape:cy="400"
+   inkscape:window-width="1920"
+   inkscape:window-height="1129"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="svg6" />
+    <g
+   transform="matrix(1,0,0,1,-1152,-256)"
+   id="g6">
+        <rect
+   id="Icons"
+   x="0"
+   y="0"
+   width="1280"
+   height="800"
+   style="fill:none;" />
+        <g
+   id="Icons1"
+   serif:id="Icons">
+            <g
+   id="Strike">
+            </g>
+            <g
+   id="H1">
+            </g>
+            <g
+   id="H2">
+            </g>
+            <g
+   id="H3">
+            </g>
+            <g
+   id="list-ul">
+            </g>
+            <g
+   id="hamburger-1">
+            </g>
+            <g
+   id="hamburger-2">
+            </g>
+            <g
+   id="list-ol">
+            </g>
+            <g
+   id="list-task">
+            </g>
+            <g
+   id="trash">
+            </g>
+            <g
+   id="vertical-menu">
+            </g>
+            <g
+   id="horizontal-menu">
+            </g>
+            <g
+   id="sidebar-2">
+            </g>
+            <g
+   id="Pen">
+            </g>
+            <g
+   id="Pen1"
+   serif:id="Pen">
+            </g>
+            <g
+   id="clock">
+            </g>
+            <g
+   id="external-link">
+            </g>
+            <g
+   id="hr">
+            </g>
+            <g
+   id="info">
+            </g>
+            <g
+   id="warning">
+            </g>
+            <g
+   id="plus-circle">
+            </g>
+            <g
+   id="minus-circle">
+            </g>
+            <g
+   id="vue">
+            </g>
+            <g
+   id="cog">
+            </g>
+            <g
+   id="logo">
+            </g>
+            <g
+   id="radio-check">
+            </g>
+            <g
+   id="eye-slash">
+            </g>
+            <g
+   id="eye">
+            </g>
+            <g
+   id="toggle-off">
+            </g>
+            <g
+   id="shredder">
+            </g>
+            <g
+   id="spinner--loading--dots-"
+   serif:id="spinner [loading, dots]">
+            </g>
+            <g
+   id="react">
+            </g>
+            <g
+   id="check-selected">
+            </g>
+            <g
+   id="turn-off">
+            </g>
+            <g
+   id="code-block">
+            </g>
+            <g
+   id="user">
+            </g>
+            <g
+   id="coffee-bean">
+            </g>
+            <g
+   transform="matrix(0.638317,0.368532,-0.368532,0.638317,785.021,-208.975)"
+   id="g1">
+                <g
+   id="coffee-beans">
+                    <g
+   id="coffee-bean1"
+   serif:id="coffee-bean">
+                    </g>
+                </g>
+            </g>
+            <g
+   id="coffee-bean-filled"
+   transform="matrix(0.866025,0.5,-0.5,0.866025,717.879,-387.292)">
+                <g
+   transform="matrix(1,0,0,1,0,-0.699553)"
+   id="g2">
+                    <path
+   d="M737.673,328.231C738.494,328.056 739.334,328.427 739.757,329.152C739.955,329.463 740.106,329.722 740.106,329.722C740.106,329.722 745.206,338.581 739.429,352.782C737.079,358.559 736.492,366.083 738.435,371.679C738.697,372.426 738.482,373.258 737.89,373.784C737.298,374.31 736.447,374.426 735.735,374.077C730.192,371.375 722.028,365.058 722.021,352C722.015,340.226 728.812,330.279 737.673,328.231Z"
+   id="path1"
+   style="fill:#5d4037;fill-opacity:1" />
+                </g>
+                <g
+   transform="matrix(-1,0,0,-1,1483.03,703.293)"
+   id="g3">
+                    <path
+   d="M737.609,328.246C738.465,328.06 739.344,328.446 739.785,329.203C739.97,329.49 740.106,329.722 740.106,329.722C740.106,329.722 745.206,338.581 739.429,352.782C737.1,358.507 736.503,365.948 738.383,371.527C738.646,372.304 738.415,373.164 737.796,373.703C737.177,374.243 736.294,374.356 735.56,373.989C730.02,371.241 722.028,364.92 722.021,352C722.016,340.255 728.779,330.328 737.609,328.246Z"
+   id="path2"
+   style="stroke:#5d4037;stroke-opacity:1;fill:#5d4037;fill-opacity:1" />
+                </g>
+            </g>
+            <g
+   transform="matrix(0.638317,0.368532,-0.368532,0.638317,913.062,-208.975)"
+   id="g4">
+                <g
+   id="coffee-beans-filled">
+                    <g
+   id="coffee-bean2"
+   serif:id="coffee-bean">
+                    </g>
+                </g>
+            </g>
+            <g
+   id="clipboard">
+            </g>
+            <g
+   transform="matrix(1,0,0,1,128.011,1.35415)"
+   id="g5">
+                <g
+   id="clipboard-paste">
+                </g>
+            </g>
+            <g
+   id="clipboard-copy">
+            </g>
+            <g
+   id="Layer1">
+            </g>
+        </g>
+    </g>
+</svg>

img/logo.svg

@@ -0,0 +1,116 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="124.8711mm"
+   height="31.440542mm"
+   viewBox="0 0 124.8711 31.440542"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
+   sodipodi:docname="logo.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="0.70021044"
+     inkscape:cx="329.90082"
+     inkscape:cy="345.61039"
+     inkscape:window-width="1920"
+     inkscape:window-height="1046"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-17.727083,-56.885417)">
+    <g
+       id="g5"
+       transform="matrix(0.26458333,0,0,0.26458333,-67.310852,25.675979)">
+      <text
+         id="text5"
+         xml:space="preserve"
+         transform="matrix(1.3333333,0,0,1.3333333,316.00667,186.29426)"><tspan
+           id="tspan5"
+           style="font-variant:normal;font-weight:700;font-size:65.991px;font-family:'Noto Sans';writing-mode:lr-tb;fill:#3e2723;fill-opacity:1;fill-rule:nonzero;stroke:#3e2723;stroke-width:2.19965;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+           x="0"
+           y="0">my</tspan></text>
+      <text
+         id="text6"
+         xml:space="preserve"
+         transform="matrix(1.3333333,0,0,1.3333333,452.48533,186.29426)"><tspan
+           id="tspan6"
+           style="font-variant:normal;font-weight:700;font-size:65.991px;font-family:'Noto Sans';writing-mode:lr-tb;fill:#e65100;fill-opacity:1;fill-rule:nonzero;stroke:#e65100;stroke-width:2.19965;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+           x="0"
+           y="0">-</tspan></text>
+      <text
+         id="text7"
+         xml:space="preserve"
+         transform="matrix(1.3333333,0,0,1.3333333,480.79333,186.29426)"><tspan
+           id="tspan7"
+           style="font-variant:normal;font-weight:700;font-size:65.991px;font-family:'Noto Sans';writing-mode:lr-tb;fill:#3e2723;fill-opacity:1;fill-rule:nonzero;stroke:#3e2723;stroke-width:2.19965;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+           x="0"
+           y="0">biz</tspan></text>
+      <text
+         id="text8"
+         xml:space="preserve"
+         transform="matrix(1.3333333,0,0,1.3333333,606.236,186.29426)"><tspan
+           id="tspan8"
+           style="font-variant:normal;font-weight:700;font-size:65.991px;font-family:'Noto Sans';writing-mode:lr-tb;fill:#e65100;fill-opacity:1;fill-rule:nonzero;stroke:#e65100;stroke-width:2.19965;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+           x="0"
+           y="0">.app</tspan></text>
+    </g>
+    <g
+       id="g8"
+       transform="matrix(0.26458333,0,0,0.26458333,-67.310852,25.675979)">
+      <path
+         id="path8"
+         d="M 249.449,279.212 H 391.181"
+         style="fill:none;stroke:#e65100;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(1.3333333,0,0,-1.3333333,0,595.27559)" />
+    </g>
+    <g
+       id="g9"
+       transform="matrix(0.26458333,0,0,0.26458333,-67.310852,25.675979)">
+      <path
+         id="path9"
+         d="M 442.205,279.212 H 583.937"
+         style="fill:none;stroke:#e65100;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(1.3333333,0,0,-1.3333333,0,595.27559)" />
+    </g>
+    <g
+       id="g10"
+       transform="matrix(0.26458333,0,0,0.26458333,-67.310852,25.675979)">
+      <path
+         id="path10"
+         d="m 420.661,289.332 c 0.369,-0.114 0.596,-0.454 0.596,-0.822 0.028,-0.171 0.028,-0.284 0.028,-0.284 0,0 -0.028,-4.535 -5.386,-8.702 -2.182,-1.701 -4.053,-4.451 -4.564,-7.03 -0.056,-0.34 -0.311,-0.624 -0.652,-0.681 -0.368,-0.085 -0.708,0.057 -0.907,0.369 -1.53,2.268 -3.259,6.491 -0.368,11.48 2.608,4.536 7.427,6.832 11.253,5.67 z"
+         style="fill:#3e2723;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         transform="matrix(1.3333333,0,0,-1.3333333,0,595.27559)" />
+      <path
+         id="path11"
+         d="m 413.121,269.376 c -0.368,0.141 -0.623,0.482 -0.623,0.85 0,0.17 0,0.284 0,0.284 0,0 0,4.535 5.357,8.702 2.154,1.672 4.054,4.394 4.564,6.945 0.057,0.368 0.34,0.623 0.709,0.708 0.34,0.057 0.708,-0.085 0.907,-0.396 1.53,-2.268 3.174,-6.463 0.34,-11.424 -2.608,-4.507 -7.399,-6.803 -11.254,-5.669 z"
+         style="fill:#3e2723;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         transform="matrix(1.3333333,0,0,-1.3333333,0,595.27559)" />
+      <path
+         id="path12"
+         d="m 413.121,269.376 c -0.368,0.141 -0.623,0.482 -0.623,0.85 0,0.17 0,0.284 0,0.284 0,0 0,4.535 5.357,8.702 2.154,1.672 4.054,4.394 4.564,6.945 0.057,0.368 0.34,0.623 0.709,0.708 0.34,0.057 0.708,-0.085 0.907,-0.396 1.53,-2.268 3.174,-6.463 0.34,-11.424 -2.608,-4.507 -7.399,-6.803 -11.254,-5.669 z"
+         style="fill:none;stroke:#3e2723;stroke-width:0.4428;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(1.3333333,0,0,-1.3333333,0,595.27559)" />
+    </g>
+  </g>
+</svg>

package.json

@@ -1,20 +0,0 @@
-{
-  "name": "ngo",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git@git.odoo4projects.com:Oliver/NGO.git"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "type": "commonjs",
-  "devDependencies": {
-    "tailwindcss": "^3.4.17"
-  }
-}

src/input.css

@@ -1,17 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-body {
-  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
-}
-
-#lang-selector {
-  color: #ffffff;
-}
-
-#lang-selector:focus,
-#lang-selector:focus-visible {
-  color: #201824;
-  background-color: #ffffff;
-}

tailwind.config.js

@@ -1,27 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./index.html'],
-  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))'
-      }
-    }
-  },
-  plugins: []
-};