omair
563e4a5844
5 pages (Home, Approach, Projects, About, Support) 11 field photos from Lolo Camp Full brand identity implementation Mobile-responsive, optimized images
300 lines
16 KiB
HTML
300 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.org">
|
|
<meta property="og:image" content="https://taawunu.org/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="/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="/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>
|