omair
9a1cd05471
Gallery page with: - 13 photorealistic documentary photos matching Lolo field photo DNA - Pillar-based filtering (Water/Food/Livelihoods/Education) - Lightbox with keyboard navigation - Masonry-style grid layout - All images optimized to JPG (~130KB each, 1.7MB total) Images: fish ponds aerial, borehole water, fish harvest, solar panels, classroom, market, sunset water tank, pond construction, woman carrying water, community meeting, hands with seedling, catfish basin, camp overview
191 lines
12 KiB
HTML
191 lines
12 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>
|
|
<span class="wordmark">TAAWUNU</span>
|
|
</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/"><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">
|
|
<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;">
|
|
<div class="story-photo">
|
|
<img src="/images/tilling-soil.jpg" alt="Working the red laterite earth at Lolo, April 2024" loading="lazy">
|
|
</div>
|
|
<div class="story-text" style="background: rgba(37,120,161,0.05);">
|
|
<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;">
|
|
<div class="story-photo">
|
|
<img src="/images/community-farming-wide.jpg" alt="Community members working together at the farm, April 2024" loading="lazy">
|
|
</div>
|
|
<div class="story-text" style="background: rgba(45,106,79,0.05);">
|
|
<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;">
|
|
<div class="story-photo">
|
|
<img src="/images/team-field-discussion.jpg" alt="Team consulting with community members in the field" loading="lazy">
|
|
</div>
|
|
<div class="story-text" style="background: rgba(107,58,42,0.05);">
|
|
<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;">
|
|
<div class="story-photo">
|
|
<img src="/images/children-learning-center.jpg" alt="Children at the community learning center, Lolo Camp, February 2025" loading="lazy">
|
|
</div>
|
|
<div class="story-text" style="background: rgba(201,168,76,0.05);">
|
|
<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 style="max-width:640px;" class="fade-up">
|
|
<h3 class="mt-4 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>
|
|
</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>
|
|
<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/"><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>
|