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
302 lines
16 KiB
HTML
302 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Taawunu — From the ground up</title>
|
|
<meta name="description" content="Taawunu designs, manages, and verifies community empowerment projects. From aid to self-sufficiency — one community at a time.">
|
|
<meta property="og:title" content="Taawunu — From the ground up">
|
|
<meta property="og:description" content="We design community development projects engineered to make themselves unnecessary. Water → Food → Livelihoods → Education.">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://taawunu.com">
|
|
<meta property="og:image" content="https://taawunu.com/images/hero-community-farming.jpg">
|
|
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg">
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ═══════════ NAVIGATION ═══════════ -->
|
|
<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="/" class="active">Home</a></li>
|
|
<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</a></li>
|
|
<li><a href="/support/" class="nav-cta">Support a Project</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- ═══════════ HERO ═══════════ -->
|
|
<section class="hero">
|
|
<div class="hero-bg">
|
|
<img src="/images/hero-community-farming.jpg" alt="Community members working together at the Lolo Farm, Cameroon, April 2024" loading="eager">
|
|
<div class="hero-overlay"></div>
|
|
</div>
|
|
<div class="hero-content">
|
|
<div class="hero-arabic">تَعَاوُنُوا</div>
|
|
<h1>From aid to independence — one community at a time.</h1>
|
|
<p class="hero-sub">We design community development projects engineered to make themselves unnecessary. Water first. Then food. Then livelihoods. Then education. In that order.</p>
|
|
<div class="hero-ctas">
|
|
<a href="/projects/" class="btn btn-primary">See Our Work</a>
|
|
<a href="/approach/" class="btn btn-outline">How It Works</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════ METRICS ═══════════ -->
|
|
<section class="bg-cream">
|
|
<div class="container">
|
|
<div class="metrics fade-up">
|
|
<div class="metric">
|
|
<div class="metric-number">12,000</div>
|
|
<div class="metric-rule"></div>
|
|
<div class="metric-label">Refugees Reached</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="metric-number">10</div>
|
|
<div class="metric-rule"></div>
|
|
<div class="metric-label">Fish Ponds Built</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="metric-number">10,000L</div>
|
|
<div class="metric-rule"></div>
|
|
<div class="metric-label">Clean Water / Day</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="metric-number">4</div>
|
|
<div class="metric-rule"></div>
|
|
<div class="metric-label">Pillar Model</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════ THE PROBLEM ═══════════ -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="section-label fade-up">The Challenge</div>
|
|
<div class="section-gold-rule fade-up"></div>
|
|
<h2 class="fade-up" style="max-width:640px;">Aid creates dependency.<br>Infrastructure creates freedom.</h2>
|
|
<p class="fade-up" style="font-size:17px; color:#555;">For over a decade, 12,000 refugees from the Central African Republic have lived in Lolo Camp, Cameroon. The World Food Programme cut rations to 50%. Pulses, oil, salt — gone from the basket. The world's response: give them just enough to survive, never enough to thrive.</p>
|
|
<p class="fade-up" style="font-size:17px; color:#555;"><strong style="color:var(--deep);">This is not a poverty problem. It's a design problem.</strong> The resources exist — water underground, fish in rivers, fertile soil, capable people. What's missing is the system that connects resources to people and people to self-sufficiency.</p>
|
|
<p class="fade-up" style="font-size:17px; color:#555;">Taawunu builds that system.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════ 4-PILLAR MODEL ═══════════ -->
|
|
<section class="section bg-cream">
|
|
<div class="container">
|
|
<div class="section-label fade-up">Our Model</div>
|
|
<div class="section-gold-rule fade-up"></div>
|
|
<h2 class="fade-up">Four pillars. One sequence. No shortcuts.</h2>
|
|
<p class="fade-up">Each pillar depends on the one before it. Water before food. Food before livelihoods. All three before education can be sustained. This isn't theory — it's the proven order of community development.</p>
|
|
|
|
<div class="pillar-flow fade-up mt-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>
|
|
|
|
<div class="pillars">
|
|
<div class="pillar-card pillar-water fade-up">
|
|
<svg class="pillar-icon" viewBox="0 0 24 24" fill="none" stroke="#2578A1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C12 2 4 10 4 14.5C4 18.64 7.58 22 12 22C16.42 22 20 18.64 20 14.5C20 10 12 2 12 2Z"/></svg>
|
|
<div class="pillar-name">Water</div>
|
|
<p class="pillar-desc">Clean water is the foundation of everything. A 70m borehole now pumps 10,000 litres daily — enough for the community and the aquaculture project.</p>
|
|
</div>
|
|
<div class="pillar-card pillar-food fade-up">
|
|
<svg class="pillar-icon" viewBox="0 0 24 24" fill="none" stroke="#2D6A4F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22V12"/><path d="M12 12C12 12 7 10 5 6C9 6 12 9 12 12"/><path d="M12 16C12 16 17 14 19 10C15 10 12 13 12 16"/><line x1="4" y1="22" x2="20" y2="22"/></svg>
|
|
<div class="pillar-name">Food</div>
|
|
<p class="pillar-desc">10 fish ponds with capacity for 35,000 catfish across 3 harvest cycles per year. The community feeds itself — no more waiting for WFP trucks.</p>
|
|
</div>
|
|
<div class="pillar-card pillar-livelihood fade-up">
|
|
<svg class="pillar-icon" viewBox="0 0 24 24" fill="none" stroke="#6B3A2A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14C4 14 6 12 8 12C10 12 10 14 12 14"/><path d="M20 10C20 10 18 8 16 8C14 8 14 10 12 10"/><circle cx="12" cy="12" r="1.5"/><path d="M12 8V3M9 5.5L12 3L15 5.5"/><line x1="6" y1="18" x2="18" y2="18"/></svg>
|
|
<div class="pillar-name">Livelihoods</div>
|
|
<p class="pillar-desc">Surplus fish are sold at local markets. Revenue funds operations, creates jobs, and builds an economy that doesn't depend on outside funding.</p>
|
|
</div>
|
|
<div class="pillar-card pillar-education fade-up">
|
|
<svg class="pillar-icon" viewBox="0 0 24 24" fill="none" stroke="#C9A84C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 4C2 4 5 3 8 3C11 3 12 4 12 4V20C12 20 11 19 8 19C5 19 2 20 2 20V4Z"/><path d="M22 4C22 4 19 3 16 3C13 3 12 4 12 4V20C12 20 13 19 16 19C19 19 22 20 22 20V4Z"/></svg>
|
|
<div class="pillar-name">Education</div>
|
|
<p class="pillar-desc">When a community can feed and sustain itself, it can build schools. Revenue from the farm funds teachers, materials, and permanent learning spaces.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════ STORY: LOLO ═══════════ -->
|
|
<section class="story-block fade-up">
|
|
<div class="story-photo">
|
|
<img src="/images/community-planting.jpg" alt="Community members and team planting at the Lolo Farm site, April 2024" loading="lazy">
|
|
</div>
|
|
<div class="story-text">
|
|
<div class="section-label">Flagship Project</div>
|
|
<h2>The Lolo Aquaculture Project</h2>
|
|
<p>In the Adamawa Region of Cameroon, 12,000 CAR refugees decided to stop waiting. With a £43,006 investment, they're building a self-sustaining fish farm that projects £92,000 in annual revenue.</p>
|
|
<p>10 earthen ponds. 35,000 fish capacity. 3 harvest cycles per year. A community-run enterprise that makes foreign aid unnecessary.</p>
|
|
<a href="/projects/" class="btn btn-primary mt-2">Explore the Project →</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="story-block reverse fade-up">
|
|
<div class="story-photo">
|
|
<img src="/images/children-quran-study.jpg" alt="Children studying Quran on wooden boards at Lolo Camp, February 2025" loading="lazy">
|
|
</div>
|
|
<div class="story-text">
|
|
<div class="section-label">Why Education Comes Last</div>
|
|
<h2>First the well. Then the farm. Then the school.</h2>
|
|
<p>These children study Quran on wooden boards, sitting on the red earth beside the mosque. They have no desk, no textbook, no light after sunset. But they have a teacher. And this year — they'll have a school.</p>
|
|
<p>Education is the final pillar because it must be <em>sustained</em>. A school funded by a campaign closes when the campaign ends. A school funded by a fish farm runs forever.</p>
|
|
<div class="quote mt-3">
|
|
"We have started to stand on our own feet. We see a future for our children unfolding."
|
|
<div class="quote-attr">— Community elder, Lolo Camp</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════ VERSE ═══════════ -->
|
|
<section class="verse-callout fade-up">
|
|
<div class="verse-arabic">وَتَعَاوَنُوا عَلَى الْبِرِّ وَالتَّقْوَىٰ</div>
|
|
<div class="verse-english">"And cooperate in righteousness and piety."</div>
|
|
<div class="verse-ref">Al-Ma'idah 5:2</div>
|
|
</section>
|
|
|
|
<!-- ═══════════ HOW WE WORK ═══════════ -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="section-label fade-up">How We Work</div>
|
|
<div class="section-gold-rule fade-up"></div>
|
|
<h2 class="fade-up">Design. Manage. Verify.</h2>
|
|
<p class="fade-up">Taawunu is a social impact studio — not a charity, not an NGO. We partner with registered charity organisations who handle donations, while we provide the expertise to turn those funds into permanent infrastructure.</p>
|
|
|
|
<div class="approach-steps">
|
|
<div class="approach-step fade-up">
|
|
<div class="approach-step-num">01</div>
|
|
<h3>Design</h3>
|
|
<p>We assess community needs, design the sequential intervention (Water→Food→Livelihoods→Education), create budgets, and build the project plan with measurable milestones.</p>
|
|
</div>
|
|
<div class="approach-step fade-up">
|
|
<div class="approach-step-num">02</div>
|
|
<h3>Manage</h3>
|
|
<p>We coordinate between funders, charity partners, and local implementation teams. Every pound is tracked. Every phase is documented. We publish setbacks alongside successes.</p>
|
|
</div>
|
|
<div class="approach-step fade-up">
|
|
<div class="approach-step-num">03</div>
|
|
<h3>Verify</h3>
|
|
<p>Independent monitoring and evaluation. On-the-ground field visits. Published reports with photos, financials, and honest assessments. No spin — just truth.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════ PARTNERS ═══════════ -->
|
|
<section class="bg-cream" style="padding: 40px 0;">
|
|
<div class="container text-center">
|
|
<div class="label mb-3">Our Partners</div>
|
|
<div class="partners">
|
|
<div class="partner">SWAN London</div>
|
|
<div class="partner">HFA Australia</div>
|
|
<div class="partner">UDES UK</div>
|
|
<div class="partner">Omega Ventures</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════ CTA BANNER ═══════════ -->
|
|
<section class="cta-banner fade-up">
|
|
<h2>Every project we design is engineered<br>to make itself unnecessary.</h2>
|
|
<p>Whether you're a donor looking to fund lasting change, a charity seeking implementation partners, or a foundation exploring new approaches — we'd like to hear from you.</p>
|
|
<div class="cta-buttons">
|
|
<a href="/support/" class="btn btn-primary">Support a Project</a>
|
|
<a href="/about/#contact" class="btn btn-outline">Partner With Us</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════ FOOTER ═══════════ -->
|
|
<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 through a proven Water → Food → Livelihoods → Education model.</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>
|
|
<li><a href="/projects/#education">Community School</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. We design, manage, and monitor community development projects. Charitable donations are processed by our registered charity partners. Taawunu does not solicit or receive charitable donations directly.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- ═══════════ SCRIPTS ═══════════ -->
|
|
<script>
|
|
// Nav scroll effect
|
|
const nav = document.getElementById('nav');
|
|
window.addEventListener('scroll', () => {
|
|
nav.classList.toggle('scrolled', window.scrollY > 20);
|
|
});
|
|
|
|
// Mobile nav toggle
|
|
document.getElementById('navToggle').addEventListener('click', () => {
|
|
document.getElementById('navLinks').classList.toggle('open');
|
|
});
|
|
|
|
// Intersection Observer for fade-up animations
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
}
|
|
});
|
|
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
|
|
|
|
document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|