quikcue/taawunu-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
aa53bf2a771e4146846341ba545821d5ed249b16
taawunu-site/html/index.html
T

321 lines
16 KiB
HTML
Raw Blame History

<!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>
<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="/" 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/">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="evidence-block fade-up">
<div>
<div class="section-label">The Challenge</div>
<div class="section-gold-rule"></div>
<h2 style="max-width:640px;">Aid creates dependency.<br>Infrastructure creates freedom.</h2>
<p 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 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 style="font-size:17px; color:#555;">Taawunu builds that system.</p>
</div>
<div class="evidence-photo">
<img src="/images/gallery/woman-carrying-water.jpg" alt="A woman carries water along a red laterite path — before the borehole, this walk was kilometres longer" loading="lazy">
</div>
</div>
</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">
<div class="pillar-card-thumb"><img src="/images/gallery/borehole-water-flowing.jpg" alt="Solar-powered borehole pumping clean water" loading="lazy"></div>
<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">
<div class="pillar-card-thumb"><img src="/images/gallery/fish-ponds-aerial.jpg" alt="Aerial view of 10 fish ponds carved into red laterite earth" loading="lazy"></div>
<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">
<div class="pillar-card-thumb"><img src="/images/gallery/market-fish-sales.jpg" alt="Woman selling catfish at the local market" loading="lazy"></div>
<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">
<div class="pillar-card-thumb"><img src="/images/gallery/children-classroom-light.jpg" alt="Children studying in an open-air classroom" loading="lazy"></div>
<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-caption">Community members and project team planting at Lolo Farm, Adamawa Region, April 2024</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-caption">Children study Quran on wooden alluha boards, Lolo Camp, February 2025</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 community-voice 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>
<!-- ═══════════ PHOTO BREAK ═══════════ -->
<div class="photo-break fade-up">
<img src="/images/gallery/water-tank-sunset.jpg" alt="Water tank silhouetted against African sunset — permanence" loading="lazy">
<div class="photo-break-overlay">
<div class="photo-break-text">
<h3>Infrastructure that outlasts the project.</h3>
<p>This water tank will be here long after the team has gone home.</p>
</div>
</div>
</div>
<!-- ═══════════ 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><div class="footer-tagline">From the ground up</div>
<p>A social impact studio designing permanent self-sufficiency for marginalized communities.</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>&copy; 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>
Reference in New Issue View Git Blame Copy Permalink