203 lines
13 KiB
HTML
203 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Our Approach — Taawunu</title>
|
|
<meta name="description" content="Water → Food → Livelihoods → Education. A proven sequential model for community self-sufficiency.">
|
|
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg">
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="nav" id="nav">
|
|
<div class="nav-inner">
|
|
<a href="/" class="nav-brand">
|
|
<svg class="mark" viewBox="0 0 64 64" width="32" height="32"><path d="M32 4 C32 4, 56 28, 56 40 C56 53.25 45.25 60 32 60 C18.75 60 8 53.25 8 40 C8 28 32 4 32 4Z" fill="#C9A84C"/><path d="M32 14 C32 14, 50 31, 50 40 C50 49.5 41.75 55 32 55 C22.25 55 14 49.5 14 40 C14 31 32 14 32 14Z" fill="#6B3A2A"/><path d="M32 22 C32 22, 44 34, 44 40 C44 46.6 38.6 50 32 50 C25.4 50 20 46.6 20 40 C20 34 32 22 32 22Z" fill="#2D6A4F"/><path d="M32 30 C32 30, 38 36, 38 40 C38 43.3 35.3 45 32 45 C28.7 45 26 43.3 26 40 C26 36 32 30 32 30Z" fill="#2578A1"/></svg>
|
|
<div style="display:flex;flex-direction:column;"><span class="wordmark">TAAWUNU</span><span class="nav-tagline">From the ground up</span></div>
|
|
</a>
|
|
<button class="nav-toggle" id="navToggle" aria-label="Menu"><span></span><span></span><span></span></button>
|
|
<ul class="nav-links" id="navLinks">
|
|
<li><a href="/">Home</a></li>
|
|
<li><a href="/approach/" class="active">Our Approach</a></li>
|
|
<li><a href="/projects/">Projects</a></li>
|
|
<li><a href="/gallery/">Gallery</a></li>
|
|
<li><a href="/about/">About</a></li>
|
|
<li><a href="/support/" class="nav-cta">Support a Project</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<section class="page-hero-visual">
|
|
<div class="hero-bg">
|
|
<img src="/images/gallery/pond-construction-workers.jpg" alt="Workers digging fish ponds by hand — the scale of manual labour that builds self-sufficiency" loading="eager">
|
|
</div>
|
|
<div class="container">
|
|
<div class="label fade-up">Our Approach</div>
|
|
<h1 class="fade-up">Four pillars.<br>One sequence.<br>No shortcuts.</h1>
|
|
<p class="fade-up">Every project follows the same proven order: secure water, establish food production, create livelihoods, then build education. Each pillar depends on the one before it.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- The sequential model -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="pillar-flow fade-up mb-4">
|
|
<div class="pillar-flow-item"><div class="pillar-flow-dot" style="background:var(--water)"></div> Water</div>
|
|
<div class="pillar-flow-arrow">→</div>
|
|
<div class="pillar-flow-item"><div class="pillar-flow-dot" style="background:var(--green)"></div> Food</div>
|
|
<div class="pillar-flow-arrow">→</div>
|
|
<div class="pillar-flow-item"><div class="pillar-flow-dot" style="background:var(--earth)"></div> Livelihoods</div>
|
|
<div class="pillar-flow-arrow">→</div>
|
|
<div class="pillar-flow-item"><div class="pillar-flow-dot" style="background:var(--gold)"></div> Education</div>
|
|
</div>
|
|
|
|
<!-- Pillar 1: Water -->
|
|
<div class="story-block fade-up" style="margin-bottom:2px; border-radius:4px; overflow:hidden; max-height:520px;">
|
|
<div class="story-photo">
|
|
<img src="/images/gallery/borehole-water-flowing.jpg" alt="Solar-powered borehole pumping 10,000 litres of clean water daily" loading="lazy" style="object-position: center 30%;">
|
|
</div>
|
|
<div class="story-caption">Solar-powered borehole and elevated storage tank, Lolo Camp</div>
|
|
<div class="story-text" style="background: rgba(37,120,161,0.05); padding: 48px 40px;">
|
|
<div class="label" style="color:var(--water);">Pillar 1</div>
|
|
<h2 style="color:var(--water);">Water</h2>
|
|
<p>Without clean water, nothing else is possible. Dirty water causes disease, absorbs time (women walk kilometres to collect it), and can't support agriculture at scale.</p>
|
|
<p><strong>What we build:</strong> Solar-powered boreholes (70m+ depth), elevated storage tanks (5,000L+), gravity-fed distribution. The well runs on sun — no fuel costs, no moving parts to fail.</p>
|
|
<p style="font-family: var(--font-mono); font-size: 14px; color: var(--water);"><strong>At Lolo:</strong> 10,000 litres/day from a single borehole.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pillar 2: Food -->
|
|
<div class="story-block reverse fade-up" style="margin-bottom:2px; border-radius:4px; overflow:hidden; max-height:520px;">
|
|
<div class="story-photo">
|
|
<img src="/images/gallery/fish-ponds-aerial.jpg" alt="Aerial view of 10 fish ponds carved into the red laterite earth" loading="lazy">
|
|
</div>
|
|
<div class="story-caption">Aerial view: 10 earthen ponds carved into red laterite, Lolo Farm</div>
|
|
<div class="story-text" style="background: rgba(45,106,79,0.05); padding: 48px 40px;">
|
|
<div class="label" style="color:var(--green);">Pillar 2</div>
|
|
<h2 style="color:var(--green);">Food</h2>
|
|
<p>With water secured, we establish food production systems. At Lolo, this means aquaculture — 10 earthen ponds stocked with catfish, with capacity for 35,000 fish across 3 harvest cycles per year.</p>
|
|
<p><strong>Why fish?</strong> Catfish grow fast (harvest-ready in 6 months), protein-dense, culturally preferred, and the ponds double as water storage. The community feeds itself and generates surplus for sale.</p>
|
|
<p style="font-family: var(--font-mono); font-size: 14px; color: var(--green);"><strong>Projected:</strong> £92,000 annual revenue from fish sales.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pillar 3: Livelihoods -->
|
|
<div class="story-block fade-up" style="margin-bottom:2px; border-radius:4px; overflow:hidden; max-height:520px;">
|
|
<div class="story-photo">
|
|
<img src="/images/gallery/market-fish-sales.jpg" alt="Fresh catfish for sale at the local market — surplus creates livelihoods" loading="lazy" style="object-position: center 40%;">
|
|
</div>
|
|
<div class="story-caption">Fresh catfish at Lolo market — surplus creates livelihoods</div>
|
|
<div class="story-text" style="background: rgba(107,58,42,0.05); padding: 48px 40px;">
|
|
<div class="label" style="color:var(--earth);">Pillar 3</div>
|
|
<h2 style="color:var(--earth);">Livelihoods</h2>
|
|
<p>Surplus food creates economic opportunity. Fish is sold at local markets. Revenue funds operations, creates employment, and builds an economy that doesn't depend on outside funding.</p>
|
|
<p><strong>Economic model:</strong> The community owns and operates the farm. Revenue covers operational costs first, then reinvestment, then community projects. External funding becomes unnecessary within 12-18 months of first harvest.</p>
|
|
<p style="font-family: var(--font-mono); font-size: 14px; color: var(--earth);"><strong>ROI:</strong> 167% over 3 years from a £43K investment.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pillar 4: Education -->
|
|
<div class="story-block reverse fade-up" style="margin-bottom:2px; border-radius:4px; overflow:hidden; max-height:520px;">
|
|
<div class="story-photo">
|
|
<img src="/images/gallery/children-classroom-light.jpg" alt="Children study at wooden desks in an open-air classroom with corrugated roof" loading="lazy">
|
|
</div>
|
|
<div class="story-caption">Children study at an open-air classroom, Lolo Camp</div>
|
|
<div class="story-text" style="background: rgba(201,168,76,0.05); padding: 48px 40px;">
|
|
<div class="label" style="color:var(--gold);">Pillar 4</div>
|
|
<h2 style="color:var(--gold);">Education</h2>
|
|
<p>Education is the final pillar because it must be <em>sustained</em>. A school funded by a one-off campaign closes when the campaign ends. A school funded by a fish farm runs forever.</p>
|
|
<p><strong>At Lolo today:</strong> Children study Quran on wooden boards, sitting on the earth beneath a tin roof. They have teachers but no furniture, no materials, no light after sunset. The aquaculture revenue will fund a permanent school with solar lighting, desks, and trained teachers.</p>
|
|
<p style="font-family: var(--font-mono); font-size: 14px; color: var(--gold);"><strong>Target:</strong> Permanent school operational within Year 2.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Why this order -->
|
|
<section class="section bg-cream">
|
|
<div class="container">
|
|
<div class="section-label fade-up">Why This Order</div>
|
|
<div class="section-gold-rule fade-up"></div>
|
|
<h2 class="fade-up">The sequence is not arbitrary.</h2>
|
|
<div class="approach-steps">
|
|
<div class="approach-step fade-up">
|
|
<div class="approach-step-num">→</div>
|
|
<h3>Skip water?</h3>
|
|
<p>Fish ponds need 50,000+ litres. Without a reliable water source, the entire food system fails. Every aquaculture project in arid regions that skipped water infrastructure has collapsed.</p>
|
|
</div>
|
|
<div class="approach-step fade-up">
|
|
<div class="approach-step-num">→</div>
|
|
<h3>Skip food?</h3>
|
|
<p>A community that can't feed itself can't attend school, can't work consistently, can't plan beyond the next meal. Food security is the prerequisite for all economic activity.</p>
|
|
</div>
|
|
<div class="approach-step fade-up">
|
|
<div class="approach-step-num">→</div>
|
|
<h3>Skip livelihoods?</h3>
|
|
<p>A school without an economic base closes when the funding cycle ends. Sustainable education requires a self-funding mechanism — and that means a functioning local economy.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Transparency section -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="section-label fade-up">Radical Transparency</div>
|
|
<div class="section-gold-rule fade-up"></div>
|
|
<h2 class="fade-up">We publish everything.</h2>
|
|
<p class="fade-up">Budgets. Receipts. Setbacks. Failures. If something goes wrong — and it will — we tell you. We believe that honest reporting builds more trust than polished marketing.</p>
|
|
|
|
<div class="evidence-block fade-up mt-4">
|
|
<div>
|
|
<h3 class="mb-2">Example: The Solar Battery Incident</h3>
|
|
<p style="color:#555;">In February 2025, we arrived at Lolo for an M&E visit to find our solar batteries destroyed. Someone had rewired them incorrectly — a month of stored power, gone. We replaced them, revised the security protocol, and moved on.</p>
|
|
<p style="color:#555;">We could have hidden this. Instead, we photographed the damage, documented the cost, and published it in our M&E report. Because if you're going to trust us with your money, you need to know we'll tell you the truth — even when the truth is uncomfortable.</p>
|
|
</div>
|
|
<div class="evidence-photo">
|
|
<img src="/images/gallery/solar-panels-installation.jpg" alt="Solar panel installation powering the borehole pump — clean energy for clean water" loading="lazy">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="cta-banner fade-up">
|
|
<h2>Ready to see the model in action?</h2>
|
|
<p>Explore our flagship project in Lolo, Cameroon — or reach out to discuss how we can apply this model to your community.</p>
|
|
<div class="cta-buttons">
|
|
<a href="/projects/" class="btn btn-primary">View Projects</a>
|
|
<a href="/about/#contact" class="btn btn-outline">Get In Touch</a>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-grid">
|
|
<div class="footer-brand">
|
|
<div class="footer-arabic">تَعَاوُنُوا</div>
|
|
<div class="footer-wordmark">TAAWUNU</div><div class="footer-tagline">From the ground up</div>
|
|
<p>A social impact studio that designs, manages, and verifies community empowerment projects.</p>
|
|
</div>
|
|
<div><h4>Explore</h4><ul><li><a href="/approach/">Our Approach</a></li><li><a href="/projects/">Projects</a></li><li><a href="/gallery/">Gallery</a></li>
|
|
<li><a href="/about/">About Us</a></li><li><a href="/support/">Support</a></li></ul></div>
|
|
<div><h4>Projects</h4><ul><li><a href="/projects/#aquaculture">Lolo Aquaculture</a></li><li><a href="/projects/#water">Solar Water Well</a></li></ul></div>
|
|
<div><h4>Connect</h4><ul><li><a href="mailto:hello@taawunu.org">hello@taawunu.org</a></li><li><a href="https://linkedin.com/company/taawunu" target="_blank" rel="noopener">LinkedIn</a></li><li><a href="https://instagram.com/taawunu" target="_blank" rel="noopener">Instagram</a></li></ul></div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>© 2026 Taawunu. From the ground up.</p>
|
|
<p class="footer-legal">Taawunu is a social impact studio. Charitable donations are processed by our registered charity partners. Taawunu does not solicit or receive charitable donations directly.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
const nav = document.getElementById('nav');
|
|
window.addEventListener('scroll', () => nav.classList.toggle('scrolled', window.scrollY > 20));
|
|
document.getElementById('navToggle').addEventListener('click', () => document.getElementById('navLinks').classList.toggle('open'));
|
|
const observer = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); }); }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
|
|
document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
|
|
</script>
|
|
</body>
|
|
</html>
|