Files
taawunu-site/html/projects/index.html
T
omair 563e4a5844 Initial: Taawunu.org — social impact studio website
5 pages (Home, Approach, Projects, About, Support)
11 field photos from Lolo Camp
Full brand identity implementation
Mobile-responsive, optimized images
2026-03-08 23:50:14 +08:00

217 lines
13 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projects — Taawunu</title>
<meta name="description" content="Explore our community development projects — from the flagship Lolo Aquaculture Project in Cameroon to planned water wells and education initiatives.">
<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/">Our Approach</a></li>
<li><a href="/projects/" class="active">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>
<section class="page-hero">
<div class="container">
<div class="label fade-up">Our Projects</div>
<h1 class="fade-up">Building self-sufficiency,<br>one project at a time.</h1>
<p class="fade-up">Every project follows our 4-pillar model: Water → Food → Livelihoods → Education. Every budget is public. Every setback is documented.</p>
</div>
</section>
<!-- ═══ FLAGSHIP: Lolo Aquaculture ═══ -->
<section class="section" id="aquaculture">
<div class="container">
<div class="section-label fade-up">Flagship Project</div>
<div class="section-gold-rule fade-up"></div>
<h2 class="fade-up">Lolo Aquaculture Project</h2>
<p class="fade-up" style="font-size:17px; color:#555;">Lolo Refugee Camp, Adamawa Region, Cameroon. 12,000 CAR refugees building a community-owned fish farm to replace dependence on shrinking WFP food rations.</p>
<!-- Metrics -->
<div class="metrics fade-up" style="padding: 40px 0;">
<div class="metric"><div class="metric-number">£43K</div><div class="metric-rule"></div><div class="metric-label">Total Budget</div></div>
<div class="metric"><div class="metric-number">£92K</div><div class="metric-rule"></div><div class="metric-label">Projected Annual Revenue</div></div>
<div class="metric"><div class="metric-number">10</div><div class="metric-rule"></div><div class="metric-label">Fish Ponds</div></div>
<div class="metric"><div class="metric-number">167%</div><div class="metric-rule"></div><div class="metric-label">3-Year ROI</div></div>
</div>
<!-- Photos -->
<div style="display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px; margin-bottom:40px; border-radius:4px; overflow:hidden;" class="fade-up">
<img src="/images/hero-community-farming.jpg" alt="Community farming at Lolo" loading="lazy" style="width:100%; height:240px; object-fit:cover;">
<img src="/images/community-planting.jpg" alt="Planting at the Lolo site" loading="lazy" style="width:100%; height:240px; object-fit:cover;">
<img src="/images/jungle-trek.jpg" alt="Team surveying the farm site through dense vegetation" loading="lazy" style="width:100%; height:240px; object-fit:cover;">
</div>
<div class="caption-bar fade-up" style="margin-top:-40px; margin-bottom:40px; border-radius:0 0 4px 4px;">Team and community members during the first field assessment trip, April 2024. Lolo Camp, Cameroon.</div>
<!-- Timeline -->
<h3 class="fade-up mt-4 mb-3">Project Timeline</h3>
<div class="timeline fade-up" style="max-width:600px;">
<div class="timeline-item">
<div class="timeline-dot done"></div>
<div class="timeline-date">APR 2024</div>
<div class="timeline-title">Phase 0 — Assessment & Design</div>
<div class="timeline-desc">First field trip. Site assessment, community consultation, soil testing, budget development. Partnership agreements with UDES and local authorities.</div>
</div>
<div class="timeline-item">
<div class="timeline-dot done"></div>
<div class="timeline-date">JULDEC 2024</div>
<div class="timeline-title">Phase 1 — Infrastructure</div>
<div class="timeline-desc">10 earthen ponds excavated. Hatchery structure built. Solar panels installed. Land cleared and prepared. Community labour coordinated.</div>
</div>
<div class="timeline-item">
<div class="timeline-dot active"></div>
<div class="timeline-date">JANMAR 2025</div>
<div class="timeline-title">Phase 1A — Water & Power</div>
<div class="timeline-desc">Borehole drilled to 70m. 5,000L elevated tank installed. Solar batteries replaced after tampering incident. Water infrastructure now operational.</div>
</div>
<div class="timeline-item">
<div class="timeline-dot planned"></div>
<div class="timeline-date">APRJUN 2025</div>
<div class="timeline-title">Phase 2 — Stocking & First Cycle</div>
<div class="timeline-desc">Broodstock acquisition. Hatchery commissioning. First stocking of 5 ponds. Feed procurement and feeding protocol established.</div>
</div>
<div class="timeline-item">
<div class="timeline-dot planned"></div>
<div class="timeline-date">OCT 2025</div>
<div class="timeline-title">Phase 3 — First Harvest</div>
<div class="timeline-desc">6 months after stocking. First commercial harvest. Revenue generation begins. Market linkages activated.</div>
</div>
<div class="timeline-item">
<div class="timeline-dot planned"></div>
<div class="timeline-date">2026</div>
<div class="timeline-title">Phase 4 — Full Operations</div>
<div class="timeline-desc">All 10 ponds in rotation. 3 harvest cycles per year. Full self-sufficiency. Community management committee running operations independently.</div>
</div>
</div>
<!-- Budget -->
<h3 class="fade-up mt-5 mb-2">Budget Transparency</h3>
<p class="fade-up" style="font-size:14px; color:#888;">Full budget breakdown. Updated after each phase.</p>
<table class="budget-table fade-up" style="max-width:640px;">
<thead>
<tr><th>Item</th><th style="text-align:right;">Amount</th></tr>
</thead>
<tbody>
<tr><td>Land acquisition & preparation</td><td>£4,200</td></tr>
<tr><td>Pond construction (10 ponds)</td><td>£8,500</td></tr>
<tr><td>Hatchery construction</td><td>£3,800</td></tr>
<tr><td>Borehole & water infrastructure</td><td>£6,200</td></tr>
<tr><td>Solar power system</td><td>£4,800</td></tr>
<tr><td>Broodstock & fingerlings</td><td>£3,200</td></tr>
<tr><td>Feed (Year 1)</td><td>£5,500</td></tr>
<tr><td>Equipment & tools</td><td>£2,400</td></tr>
<tr><td>Training & capacity building</td><td>£1,800</td></tr>
<tr><td>Project management & M&E</td><td>£2,606</td></tr>
</tbody>
<tfoot>
<tr><td><strong>Total</strong></td><td><strong>£43,006</strong></td></tr>
</tfoot>
</table>
</div>
</section>
<!-- ═══ OTHER PROJECTS ═══ -->
<section class="section bg-cream">
<div class="container">
<div class="section-label fade-up">More Projects</div>
<div class="section-gold-rule fade-up"></div>
<h2 class="fade-up">What's next.</h2>
<div class="project-grid mt-4">
<div class="project-card fade-up" id="water">
<div class="project-card-img">
<img src="/images/hfa-field-work.jpg" alt="Field assessment for water well site" loading="lazy">
</div>
<div class="project-card-body">
<div class="project-card-status status-planned">Planned</div>
<div class="project-card-title">Solar Water Well — Lolo Extension</div>
<p class="project-card-desc">A second borehole serving the northern section of the camp. Solar-powered, gravity-fed distribution. Target: additional 10,000L/day for 4,000+ residents.</p>
<div class="project-card-metrics">
<div class="project-card-metric"><div class="num">£5K</div><div class="lbl">Target</div></div>
<div class="project-card-metric"><div class="num">4,000+</div><div class="lbl">People</div></div>
</div>
</div>
</div>
<div class="project-card fade-up" id="education">
<div class="project-card-img">
<img src="/images/girl-writing-alluha.jpg" alt="Girl writing Quran on wooden board at Lolo Camp" loading="lazy">
</div>
<div class="project-card-body">
<div class="project-card-status status-planned">Planned — Phase 4</div>
<div class="project-card-title">Lolo Community School</div>
<p class="project-card-desc">A permanent learning space funded by aquaculture revenue. Solar lighting, desks, trained teachers. Designed to outlast any single funding cycle.</p>
<div class="project-card-metrics">
<div class="project-card-metric"><div class="num">200+</div><div class="lbl">Students</div></div>
<div class="project-card-metric"><div class="num">Self</div><div class="lbl">Funded</div></div>
</div>
</div>
</div>
<div class="project-card fade-up">
<div class="project-card-img">
<img src="/images/boy-holding-alluha.jpg" alt="Boy showing his Quran wooden board" loading="lazy">
</div>
<div class="project-card-body">
<div class="project-card-status status-planned">Planned</div>
<div class="project-card-title">Quran Preservation Programme</div>
<p class="project-card-desc">Supporting the traditional alluha (wooden board) Quran schools with materials, lighting, and teacher training — preserving an ancient learning tradition.</p>
<div class="project-card-metrics">
<div class="project-card-metric"><div class="num">3</div><div class="lbl">Schools</div></div>
<div class="project-card-metric"><div class="num">100+</div><div class="lbl">Children</div></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cta-banner fade-up">
<h2>Want to support a project?</h2>
<p>Donations are processed by our registered charity partners. You receive full tax benefits and complete transparency on how your funds are used.</p>
<div class="cta-buttons">
<a href="/support/" class="btn btn-primary">Support a Project</a>
<a href="/about/#contact" class="btn btn-outline">Discuss Partnership</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 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="/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. 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>