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
This commit is contained in:
@@ -0,0 +1,4 @@
|
|||||||
|
FROM nginx:alpine
|
||||||
|
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||||
|
COPY html/ /usr/share/nginx/html/
|
||||||
|
EXPOSE 80
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Page Not Found — Taawunu</title>
|
||||||
|
<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>
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="/">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>
|
||||||
|
<section style="min-height:70vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:120px 24px 80px;">
|
||||||
|
<div>
|
||||||
|
<div style="font-family:'JetBrains Mono',monospace; font-size:72px; color:var(--earth); opacity:0.3; margin-bottom:16px;">404</div>
|
||||||
|
<h1 style="font-size:2rem; margin-bottom:16px;">Page not found.</h1>
|
||||||
|
<p style="color:#666; margin-bottom:32px;">The page you're looking for doesn't exist or has been moved.</p>
|
||||||
|
<a href="/" class="btn btn-primary">Back to Home</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<p>© 2026 Taawunu. From the ground up.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,190 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>About — Taawunu</title>
|
||||||
|
<meta name="description" content="Taawunu is a social impact studio. We design, manage, and verify community empowerment projects for marginalized populations.">
|
||||||
|
<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/">Projects</a></li>
|
||||||
|
<li><a href="/about/" class="active">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">About Us</div>
|
||||||
|
<h1 class="fade-up">We build the system<br>that builds the community.</h1>
|
||||||
|
<p class="fade-up">Taawunu is a social impact studio — not a charity, not an NGO, not a tech startup. We exist in the space between them, connecting funders, charity partners, and communities to create permanent infrastructure.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- What we are -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-label fade-up">What We Are</div>
|
||||||
|
<div class="section-gold-rule fade-up"></div>
|
||||||
|
<h2 class="fade-up">A social impact studio.</h2>
|
||||||
|
<div class="prose fade-up" style="max-width:720px;">
|
||||||
|
<p><strong>Taawunu (تَعَاوُنُوا)</strong> comes from the Quranic verse: <em>"And cooperate in righteousness and piety"</em> (Al-Ma'idah 5:2). The word is a plural imperative — it's not one person saving the world. It's a command to work together.</p>
|
||||||
|
<p>We are a small, focused team that designs, manages, and verifies community development projects for marginalized populations. We partner with registered charities (who handle donations and provide tax receipts) and local implementation organisations (who coordinate ground-level work).</p>
|
||||||
|
<p><strong>What we bring:</strong></p>
|
||||||
|
<ul style="padding-left: 20px; margin-bottom: 20px;">
|
||||||
|
<li style="margin-bottom: 8px;">Project design — the 4-pillar sequential model</li>
|
||||||
|
<li style="margin-bottom: 8px;">Budget management — every pound tracked and reported</li>
|
||||||
|
<li style="margin-bottom: 8px;">Monitoring & evaluation — field visits, honest reports</li>
|
||||||
|
<li style="margin-bottom: 8px;">Technology — dashboards, data systems, digital infrastructure</li>
|
||||||
|
<li style="margin-bottom: 8px;">Fundraising strategy — campaign design for charity partners</li>
|
||||||
|
</ul>
|
||||||
|
<p><strong>What we don't do:</strong> We don't collect donations directly. We don't issue tax receipts. We don't operate as a registered charity. This is intentional — it keeps us focused on design, management, and accountability rather than fundraising compliance.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- The name -->
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- Team -->
|
||||||
|
<section class="section bg-cream">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-label fade-up">The Team</div>
|
||||||
|
<div class="section-gold-rule fade-up"></div>
|
||||||
|
<h2 class="fade-up">Small team. Real work.</h2>
|
||||||
|
<p class="fade-up">We're a lean team — intentionally. Overhead stays low, accountability stays high. Everyone is hands-on.</p>
|
||||||
|
<div class="team-grid mt-4">
|
||||||
|
<div class="team-card fade-up">
|
||||||
|
<div class="team-avatar">OS</div>
|
||||||
|
<div class="team-name">Omair Saleh</div>
|
||||||
|
<div class="team-role">Co-Founder & Technical Lead</div>
|
||||||
|
<p class="mt-2" style="font-size:14px; color:#666; text-align:left;">Builds the technology that powers the projects — dashboards, financial tracking, communication systems. Also leads project design and stakeholder coordination. Background in software engineering and charity technology (QuikCue, CharityRight).</p>
|
||||||
|
</div>
|
||||||
|
<div class="team-card fade-up">
|
||||||
|
<div class="team-avatar">SH</div>
|
||||||
|
<div class="team-name">Sheikh Hamid</div>
|
||||||
|
<div class="team-role">Ground Implementation Lead</div>
|
||||||
|
<p class="mt-2" style="font-size:14px; color:#666; text-align:left;">Leads UDES UK, our ground implementation partner. Coordinates with the Lolo community, manages local labour, oversees construction and infrastructure work. Has deep relationships with community leaders and local authorities.</p>
|
||||||
|
</div>
|
||||||
|
<div class="team-card fade-up">
|
||||||
|
<div class="team-avatar">SA</div>
|
||||||
|
<div class="team-name">Saiqa Ahmed</div>
|
||||||
|
<div class="team-role">Fundraising Partner (SWAN London)</div>
|
||||||
|
<p class="mt-2" style="font-size:14px; color:#666; text-align:left;">Leads SWAN London, our primary UK fundraising partner. Provides the registered charity infrastructure for UK tax-efficient donations. Manages Stripe checkout, donor communications, and gift aid claims.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- How we're structured -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-label fade-up">Structure</div>
|
||||||
|
<div class="section-gold-rule fade-up"></div>
|
||||||
|
<h2 class="fade-up">How money flows — transparently.</h2>
|
||||||
|
<div class="prose fade-up" style="max-width:720px;">
|
||||||
|
<p>Understanding how money moves through our ecosystem is critical to trust. Here's how it works:</p>
|
||||||
|
<p><strong>1. Donors give to charity partners</strong> — SWAN London (UK), HFA (Australia). These are registered charities with full regulatory compliance. They issue tax receipts.</p>
|
||||||
|
<p><strong>2. Charity partners fund projects</strong> — Funds are disbursed to project budgets based on agreed milestones. Every disbursement requires documentation.</p>
|
||||||
|
<p><strong>3. Taawunu manages the projects</strong> — We design the intervention, manage the budget, coordinate implementation, and provide monitoring. Our professional service fees are openly listed in every budget.</p>
|
||||||
|
<p><strong>4. Local partners implement on the ground</strong> — UDES coordinates community labour, manages materials, and oversees construction.</p>
|
||||||
|
<p><strong>5. Taawunu verifies and reports</strong> — Independent M&E visits. Published reports with photos, financials, and honest assessments of what worked and what didn't.</p>
|
||||||
|
<p style="font-size:14px; color:var(--muted); border-top: 1px solid #ddd; padding-top: 16px; margin-top: 24px;"><em>Taawunu's management fees are always disclosed. In the Lolo project, they total £2,606 (6% of the total £43K budget) — covering project design, coordination, reporting, and two on-site M&E visits.</em></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact -->
|
||||||
|
<section class="section bg-cream" id="contact">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-label fade-up">Get In Touch</div>
|
||||||
|
<div class="section-gold-rule fade-up"></div>
|
||||||
|
<h2 class="fade-up">Let's build something together.</h2>
|
||||||
|
<p class="fade-up">Whether you're a donor, a charity partner, a foundation, or just someone who cares — we'd like to hear from you.</p>
|
||||||
|
|
||||||
|
<div style="display:grid; grid-template-columns: 1fr 1fr; gap:40px; margin-top:40px;" class="fade-up">
|
||||||
|
<div>
|
||||||
|
<form action="https://formspree.io/f/placeholder" method="POST" style="max-width:480px;">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="name">Your Name</label>
|
||||||
|
<input type="text" id="name" name="name" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="email">Email</label>
|
||||||
|
<input type="email" id="email" name="email" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="interest">I'm interested in...</label>
|
||||||
|
<select id="interest" name="interest">
|
||||||
|
<option value="">Select one</option>
|
||||||
|
<option value="donate">Supporting a project</option>
|
||||||
|
<option value="partner">Charity partnership</option>
|
||||||
|
<option value="institutional">Institutional funding</option>
|
||||||
|
<option value="media">Media / press</option>
|
||||||
|
<option value="other">Something else</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="message">Message</label>
|
||||||
|
<textarea id="message" name="message" rows="5"></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary">Send Message</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="mb-3">Direct Contact</h3>
|
||||||
|
<p style="font-size:15px;"><strong>Email:</strong><br><a href="mailto:hello@taawunu.org">hello@taawunu.org</a></p>
|
||||||
|
<p style="font-size:15px;"><strong>For partnerships & institutional enquiries:</strong><br><a href="mailto:omair@taawunu.org">omair@taawunu.org</a></p>
|
||||||
|
<p style="font-size:15px; margin-top:24px;"><strong>Social Media:</strong><br>
|
||||||
|
<a href="https://linkedin.com/company/taawunu" target="_blank" rel="noopener">LinkedIn</a> · <a href="https://instagram.com/taawunu" target="_blank" rel="noopener">Instagram</a>
|
||||||
|
</p>
|
||||||
|
<div style="margin-top:32px; padding:20px; background:white; border-radius:4px; border-left:3px solid var(--gold);">
|
||||||
|
<p style="font-size:13px; color:var(--muted); margin-bottom:0;"><strong style="color:var(--deep);">For technical services</strong> (dashboards, data systems, charity technology), visit our professional services arm: <a href="https://haqiqah.com" target="_blank" rel="noopener">Haqiqah Consulting</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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>© 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>
|
||||||
@@ -0,0 +1,188 @@
|
|||||||
|
<!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="/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="/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>
|
||||||
@@ -0,0 +1,990 @@
|
|||||||
|
/* ══════════════════════════════════════════════════
|
||||||
|
TAAWUNU.ORG — Global Stylesheet
|
||||||
|
══════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,700&family=Source+Sans+3:ital,wght@0,300;0,400;0,600;0,700&family=JetBrains+Mono:wght@400;500&family=Caveat:wght@400;700&family=Noto+Naskh+Arabic:wght@400;700&display=swap');
|
||||||
|
|
||||||
|
/* ─── Variables ─── */
|
||||||
|
:root {
|
||||||
|
--earth: #6B3A2A;
|
||||||
|
--green: #2D6A4F;
|
||||||
|
--gold: #C9A84C;
|
||||||
|
--water: #2578A1;
|
||||||
|
--deep: #3D1F15;
|
||||||
|
--cream: #F5EFE0;
|
||||||
|
--light-cream: #FAF7F2;
|
||||||
|
--paper: #FFFDF9;
|
||||||
|
--ink: #1A1A1A;
|
||||||
|
--muted: #9C9488;
|
||||||
|
--error: #A1392A;
|
||||||
|
--font-display: 'Fraunces', Georgia, serif;
|
||||||
|
--font-body: 'Source Sans 3', sans-serif;
|
||||||
|
--font-mono: 'JetBrains Mono', monospace;
|
||||||
|
--font-hand: 'Caveat', cursive;
|
||||||
|
--font-arabic: 'Noto Naskh Arabic', serif;
|
||||||
|
--max-w: 1200px;
|
||||||
|
--max-content: 720px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Reset ─── */
|
||||||
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
|
||||||
|
body {
|
||||||
|
font-family: var(--font-body);
|
||||||
|
color: var(--ink);
|
||||||
|
background: var(--paper);
|
||||||
|
line-height: 1.6;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
img { max-width: 100%; height: auto; display: block; }
|
||||||
|
a { color: var(--green); text-decoration: none; transition: color 0.2s; }
|
||||||
|
a:hover { color: var(--earth); }
|
||||||
|
|
||||||
|
/* ─── Utilities ─── */
|
||||||
|
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
|
||||||
|
.narrow { max-width: var(--max-content); }
|
||||||
|
.text-center { text-align: center; }
|
||||||
|
.text-muted { color: var(--muted); }
|
||||||
|
.text-earth { color: var(--earth); }
|
||||||
|
.text-green { color: var(--green); }
|
||||||
|
.text-gold { color: var(--gold); }
|
||||||
|
.text-cream { color: var(--cream); }
|
||||||
|
.bg-cream { background: var(--cream); }
|
||||||
|
.bg-light { background: var(--light-cream); }
|
||||||
|
.bg-deep { background: var(--deep); color: var(--cream); }
|
||||||
|
.mt-1 { margin-top: 8px; }
|
||||||
|
.mt-2 { margin-top: 16px; }
|
||||||
|
.mt-3 { margin-top: 24px; }
|
||||||
|
.mt-4 { margin-top: 40px; }
|
||||||
|
.mt-5 { margin-top: 64px; }
|
||||||
|
.mb-2 { margin-bottom: 16px; }
|
||||||
|
.mb-3 { margin-bottom: 24px; }
|
||||||
|
.mb-4 { margin-bottom: 40px; }
|
||||||
|
|
||||||
|
/* ─── Typography ─── */
|
||||||
|
h1, h2, h3 { font-family: var(--font-display); color: var(--deep); }
|
||||||
|
h1 { font-weight: 900; font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.08; letter-spacing: -0.015em; }
|
||||||
|
h2 { font-weight: 700; font-size: clamp(1.6rem, 3.5vw, 2.5rem); line-height: 1.15; margin-bottom: 16px; }
|
||||||
|
h3 { font-weight: 700; font-size: 1.25rem; margin-bottom: 8px; }
|
||||||
|
p { margin-bottom: 16px; max-width: 720px; }
|
||||||
|
.label {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 11px;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.quote {
|
||||||
|
font-family: var(--font-hand);
|
||||||
|
font-size: clamp(1.2rem, 2.5vw, 1.6rem);
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--deep);
|
||||||
|
line-height: 1.35;
|
||||||
|
}
|
||||||
|
.arabic-display {
|
||||||
|
font-family: var(--font-arabic);
|
||||||
|
font-weight: 700;
|
||||||
|
direction: rtl;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Navigation ─── */
|
||||||
|
.nav {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 100;
|
||||||
|
background: rgba(255, 253, 249, 0.92);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
-webkit-backdrop-filter: blur(12px);
|
||||||
|
border-bottom: 1px solid rgba(156, 148, 136, 0.15);
|
||||||
|
transition: background 0.3s, box-shadow 0.3s;
|
||||||
|
}
|
||||||
|
.nav.scrolled {
|
||||||
|
box-shadow: 0 2px 16px rgba(61, 31, 21, 0.06);
|
||||||
|
}
|
||||||
|
.nav-inner {
|
||||||
|
max-width: var(--max-w);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 24px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
.nav-brand {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.nav-brand .mark {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
.nav-brand .wordmark {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
color: var(--deep);
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
}
|
||||||
|
.nav-links {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 32px;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.nav-links a {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--deep);
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
position: relative;
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
.nav-links a::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -2px;
|
||||||
|
left: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--gold);
|
||||||
|
transition: width 0.3s;
|
||||||
|
}
|
||||||
|
.nav-links a:hover::after,
|
||||||
|
.nav-links a.active::after { width: 100%; }
|
||||||
|
.nav-cta {
|
||||||
|
background: var(--green);
|
||||||
|
color: white !important;
|
||||||
|
padding: 8px 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
.nav-cta:hover { background: #245a42; }
|
||||||
|
.nav-cta::after { display: none !important; }
|
||||||
|
|
||||||
|
/* Mobile nav */
|
||||||
|
.nav-toggle {
|
||||||
|
display: none;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.nav-toggle span {
|
||||||
|
display: block;
|
||||||
|
width: 22px;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--deep);
|
||||||
|
position: absolute;
|
||||||
|
left: 5px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
.nav-toggle span:nth-child(1) { top: 9px; }
|
||||||
|
.nav-toggle span:nth-child(2) { top: 15px; }
|
||||||
|
.nav-toggle span:nth-child(3) { top: 21px; }
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.nav-toggle { display: block; }
|
||||||
|
.nav-links {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 64px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: var(--paper);
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 24px;
|
||||||
|
gap: 16px;
|
||||||
|
border-bottom: 1px solid rgba(156, 148, 136, 0.15);
|
||||||
|
box-shadow: 0 8px 24px rgba(61, 31, 21, 0.08);
|
||||||
|
}
|
||||||
|
.nav-links.open { display: flex; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Hero Section ─── */
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.hero-bg {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
.hero-bg img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
.hero-overlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
rgba(61, 31, 21, 0.3) 0%,
|
||||||
|
rgba(61, 31, 21, 0.5) 40%,
|
||||||
|
rgba(61, 31, 21, 0.85) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
.hero-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
max-width: var(--max-w);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 120px 24px 80px;
|
||||||
|
color: var(--cream);
|
||||||
|
}
|
||||||
|
.hero-arabic {
|
||||||
|
font-family: var(--font-arabic);
|
||||||
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||||
|
font-weight: 700;
|
||||||
|
direction: rtl;
|
||||||
|
color: var(--gold);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
.hero h1 {
|
||||||
|
color: var(--cream);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
max-width: 700px;
|
||||||
|
}
|
||||||
|
.hero-sub {
|
||||||
|
font-size: clamp(1rem, 2vw, 1.2rem);
|
||||||
|
max-width: 560px;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: rgba(245, 239, 224, 0.85);
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
.hero-ctas {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Buttons ─── */
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 15px;
|
||||||
|
padding: 14px 28px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
text-decoration: none;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
}
|
||||||
|
.btn-primary {
|
||||||
|
background: var(--green);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.btn-primary:hover { background: #245a42; color: white; }
|
||||||
|
.btn-outline {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--cream);
|
||||||
|
border: 1.5px solid rgba(245, 239, 224, 0.5);
|
||||||
|
}
|
||||||
|
.btn-outline:hover {
|
||||||
|
background: rgba(245, 239, 224, 0.1);
|
||||||
|
border-color: var(--cream);
|
||||||
|
color: var(--cream);
|
||||||
|
}
|
||||||
|
.btn-gold {
|
||||||
|
background: var(--gold);
|
||||||
|
color: var(--deep);
|
||||||
|
}
|
||||||
|
.btn-gold:hover { background: #b8972f; color: var(--deep); }
|
||||||
|
|
||||||
|
/* ─── Metric Row ─── */
|
||||||
|
.metrics {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 32px;
|
||||||
|
padding: 64px 0;
|
||||||
|
}
|
||||||
|
.metric {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.metric-number {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: clamp(2rem, 4vw, 3rem);
|
||||||
|
color: var(--earth);
|
||||||
|
line-height: 1;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.metric-rule {
|
||||||
|
width: 48px;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--earth);
|
||||||
|
margin: 8px auto 12px;
|
||||||
|
}
|
||||||
|
.metric-label {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--muted);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.metrics { grid-template-columns: repeat(2, 1fr); gap: 24px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Section Styles ─── */
|
||||||
|
.section {
|
||||||
|
padding: 80px 0;
|
||||||
|
}
|
||||||
|
.section-label {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 11px;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.section-gold-rule {
|
||||||
|
width: 60px;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--gold);
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── 4-Pillar Cards ─── */
|
||||||
|
.pillars {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
.pillar-card {
|
||||||
|
background: var(--paper);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 32px 24px;
|
||||||
|
border-top: 4px solid var(--muted);
|
||||||
|
transition: all 0.25s;
|
||||||
|
box-shadow: 0 1px 4px rgba(61, 31, 21, 0.05);
|
||||||
|
}
|
||||||
|
.pillar-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 8px 24px rgba(61, 31, 21, 0.08);
|
||||||
|
}
|
||||||
|
.pillar-card:hover .pillar-border { height: 6px; }
|
||||||
|
.pillar-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.pillar-name {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.15rem;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.pillar-desc {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pillar-water { border-top-color: var(--water); }
|
||||||
|
.pillar-food { border-top-color: var(--green); }
|
||||||
|
.pillar-livelihood { border-top-color: var(--earth); }
|
||||||
|
.pillar-education { border-top-color: var(--gold); }
|
||||||
|
|
||||||
|
.pillar-water .pillar-name { color: var(--water); }
|
||||||
|
.pillar-food .pillar-name { color: var(--green); }
|
||||||
|
.pillar-livelihood .pillar-name { color: var(--earth); }
|
||||||
|
.pillar-education .pillar-name { color: var(--gold); }
|
||||||
|
|
||||||
|
/* Pillar flow arrow */
|
||||||
|
.pillar-flow {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 24px;
|
||||||
|
margin-bottom: 48px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.pillar-flow-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.pillar-flow-dot {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.pillar-flow-arrow {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.pillars { grid-template-columns: 1fr 1fr; }
|
||||||
|
}
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.pillars { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Story Block (alternating photo + text) ─── */
|
||||||
|
.story-block {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
min-height: 500px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.story-block.reverse { direction: rtl; }
|
||||||
|
.story-block.reverse > * { direction: ltr; }
|
||||||
|
.story-photo {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.story-photo img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform 0.6s;
|
||||||
|
}
|
||||||
|
.story-block:hover .story-photo img {
|
||||||
|
transform: scale(1.03);
|
||||||
|
}
|
||||||
|
.story-text {
|
||||||
|
padding: 64px 48px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
background: var(--light-cream);
|
||||||
|
}
|
||||||
|
.story-text h2 { margin-bottom: 16px; }
|
||||||
|
.story-text p { color: #555; }
|
||||||
|
.story-text .quote {
|
||||||
|
margin-top: 24px;
|
||||||
|
padding-left: 20px;
|
||||||
|
border-left: 3px solid var(--gold);
|
||||||
|
}
|
||||||
|
.story-text .quote-attr {
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--muted);
|
||||||
|
font-weight: 400;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.story-block,
|
||||||
|
.story-block.reverse { grid-template-columns: 1fr; direction: ltr; }
|
||||||
|
.story-text { padding: 40px 24px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Photo Caption Bar ─── */
|
||||||
|
.caption-bar {
|
||||||
|
background: var(--cream);
|
||||||
|
padding: 10px 24px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Transparency / Budget ─── */
|
||||||
|
.budget-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
.budget-table th {
|
||||||
|
text-align: left;
|
||||||
|
font-size: 12px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
color: var(--muted);
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-bottom: 2px solid var(--earth);
|
||||||
|
}
|
||||||
|
.budget-table td {
|
||||||
|
padding: 14px 16px;
|
||||||
|
border-bottom: 1px solid rgba(156, 148, 136, 0.15);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
.budget-table td:last-child {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
text-align: right;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.budget-table tr:nth-child(even) { background: var(--light-cream); }
|
||||||
|
.budget-table tfoot td {
|
||||||
|
font-weight: 700;
|
||||||
|
border-top: 2px solid var(--earth);
|
||||||
|
border-bottom: none;
|
||||||
|
color: var(--deep);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Timeline ─── */
|
||||||
|
.timeline {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 32px;
|
||||||
|
}
|
||||||
|
.timeline::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 7px;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 2px;
|
||||||
|
background: var(--earth);
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
.timeline-item {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
padding-left: 24px;
|
||||||
|
}
|
||||||
|
.timeline-dot {
|
||||||
|
position: absolute;
|
||||||
|
left: -28px;
|
||||||
|
top: 4px;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 3px solid;
|
||||||
|
background: var(--paper);
|
||||||
|
}
|
||||||
|
.timeline-dot.done { border-color: var(--green); background: var(--green); }
|
||||||
|
.timeline-dot.active { border-color: var(--gold); background: var(--gold); }
|
||||||
|
.timeline-dot.planned { border-color: var(--muted); }
|
||||||
|
.timeline-dot.issue { border-color: var(--error); background: var(--error); }
|
||||||
|
.timeline-date {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--muted);
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.timeline-title {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--deep);
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.timeline-desc {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── CTA Banner ─── */
|
||||||
|
.cta-banner {
|
||||||
|
background: var(--deep);
|
||||||
|
color: var(--cream);
|
||||||
|
padding: 80px 24px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.cta-banner h2 {
|
||||||
|
color: var(--cream);
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.cta-banner p {
|
||||||
|
max-width: 560px;
|
||||||
|
margin: 0 auto 32px;
|
||||||
|
color: rgba(245, 239, 224, 0.75);
|
||||||
|
}
|
||||||
|
.cta-banner .cta-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 16px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Partner Logos ─── */
|
||||||
|
.partners {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 48px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 40px 0;
|
||||||
|
}
|
||||||
|
.partner {
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--muted);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
opacity: 0.6;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
.partner:hover { opacity: 1; }
|
||||||
|
|
||||||
|
/* ─── Footer ─── */
|
||||||
|
.footer {
|
||||||
|
background: var(--deep);
|
||||||
|
color: rgba(245, 239, 224, 0.6);
|
||||||
|
padding: 64px 0 32px;
|
||||||
|
}
|
||||||
|
.footer-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 2fr 1fr 1fr 1fr;
|
||||||
|
gap: 40px;
|
||||||
|
margin-bottom: 48px;
|
||||||
|
}
|
||||||
|
.footer-brand .footer-arabic {
|
||||||
|
font-family: var(--font-arabic);
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--gold);
|
||||||
|
direction: rtl;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.footer-brand .footer-wordmark {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--cream);
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.footer-brand p {
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.6;
|
||||||
|
max-width: 280px;
|
||||||
|
}
|
||||||
|
.footer h4 {
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 13px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
color: var(--cream);
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.footer ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.footer li {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.footer li a {
|
||||||
|
color: rgba(245, 239, 224, 0.6);
|
||||||
|
font-size: 14px;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
.footer li a:hover { color: var(--gold); }
|
||||||
|
.footer-bottom {
|
||||||
|
border-top: 1px solid rgba(245, 239, 224, 0.1);
|
||||||
|
padding-top: 24px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
.footer-bottom p {
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.footer-legal {
|
||||||
|
font-size: 11px;
|
||||||
|
max-width: 600px;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: rgba(245, 239, 224, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.footer-grid { grid-template-columns: 1fr 1fr; }
|
||||||
|
}
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.footer-grid { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Project Cards ─── */
|
||||||
|
.project-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
.project-card {
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: white;
|
||||||
|
box-shadow: 0 1px 6px rgba(61, 31, 21, 0.06);
|
||||||
|
transition: all 0.25s;
|
||||||
|
}
|
||||||
|
.project-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 8px 24px rgba(61, 31, 21, 0.1);
|
||||||
|
}
|
||||||
|
.project-card-img {
|
||||||
|
height: 200px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.project-card-img img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform 0.4s;
|
||||||
|
}
|
||||||
|
.project-card:hover .project-card-img img {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
.project-card-body {
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
.project-card-status {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
padding: 3px 10px;
|
||||||
|
border-radius: 3px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.status-active { background: rgba(45, 106, 79, 0.1); color: var(--green); }
|
||||||
|
.status-planned { background: rgba(156, 148, 136, 0.15); color: var(--muted); }
|
||||||
|
.project-card-title {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.15rem;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: var(--deep);
|
||||||
|
}
|
||||||
|
.project-card-desc {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.project-card-metrics {
|
||||||
|
display: flex;
|
||||||
|
gap: 24px;
|
||||||
|
padding-top: 16px;
|
||||||
|
border-top: 1px solid rgba(156, 148, 136, 0.12);
|
||||||
|
}
|
||||||
|
.project-card-metric {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.project-card-metric .num {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 18px;
|
||||||
|
color: var(--earth);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.project-card-metric .lbl {
|
||||||
|
font-size: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Verse Callout ─── */
|
||||||
|
.verse-callout {
|
||||||
|
text-align: center;
|
||||||
|
padding: 80px 24px;
|
||||||
|
background: var(--deep);
|
||||||
|
}
|
||||||
|
.verse-arabic {
|
||||||
|
font-family: var(--font-arabic);
|
||||||
|
font-size: clamp(1.6rem, 3.5vw, 2.5rem);
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--gold);
|
||||||
|
direction: rtl;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.verse-english {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: clamp(1rem, 2vw, 1.3rem);
|
||||||
|
font-style: italic;
|
||||||
|
color: var(--cream);
|
||||||
|
max-width: 540px;
|
||||||
|
margin: 0 auto 8px;
|
||||||
|
}
|
||||||
|
.verse-ref {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Approach / How We Work ─── */
|
||||||
|
.approach-steps {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 32px;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
.approach-step {
|
||||||
|
padding: 32px;
|
||||||
|
background: var(--paper);
|
||||||
|
border-radius: 4px;
|
||||||
|
border-left: 3px solid var(--gold);
|
||||||
|
}
|
||||||
|
.approach-step-num {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 32px;
|
||||||
|
color: var(--gold);
|
||||||
|
opacity: 0.5;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.approach-step h3 { color: var(--deep); }
|
||||||
|
.approach-step p {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.approach-steps { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── About Page ─── */
|
||||||
|
.team-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||||
|
gap: 32px;
|
||||||
|
}
|
||||||
|
.team-card {
|
||||||
|
text-align: center;
|
||||||
|
padding: 32px;
|
||||||
|
}
|
||||||
|
.team-avatar {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 0 auto 16px;
|
||||||
|
background: var(--cream);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 24px;
|
||||||
|
color: var(--earth);
|
||||||
|
}
|
||||||
|
.team-name {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--deep);
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.team-role {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--muted);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Page Hero (inner pages) ─── */
|
||||||
|
.page-hero {
|
||||||
|
padding: 120px 0 60px;
|
||||||
|
background: var(--cream);
|
||||||
|
}
|
||||||
|
.page-hero .label { margin-bottom: 8px; }
|
||||||
|
.page-hero h1 { margin-bottom: 16px; }
|
||||||
|
.page-hero p {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #666;
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Prose ─── */
|
||||||
|
.prose {
|
||||||
|
font-size: 17px;
|
||||||
|
line-height: 1.75;
|
||||||
|
}
|
||||||
|
.prose p { margin-bottom: 20px; }
|
||||||
|
.prose h2 {
|
||||||
|
margin-top: 48px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.prose h3 {
|
||||||
|
margin-top: 32px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.prose img {
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 32px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Animations ─── */
|
||||||
|
.fade-up {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(24px);
|
||||||
|
transition: opacity 0.6s ease, transform 0.6s ease;
|
||||||
|
}
|
||||||
|
.fade-up.visible {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Support Page ─── */
|
||||||
|
.support-cards {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
.support-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 32px;
|
||||||
|
box-shadow: 0 1px 6px rgba(61, 31, 21, 0.06);
|
||||||
|
border-top: 4px solid var(--green);
|
||||||
|
transition: all 0.25s;
|
||||||
|
}
|
||||||
|
.support-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 8px 24px rgba(61, 31, 21, 0.1);
|
||||||
|
}
|
||||||
|
.support-card h3 { margin-bottom: 12px; color: var(--deep); }
|
||||||
|
.support-card p {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.support-card .btn { width: 100%; justify-content: center; }
|
||||||
|
|
||||||
|
/* ─── Contact Form ─── */
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
color: var(--deep);
|
||||||
|
}
|
||||||
|
.form-group input,
|
||||||
|
.form-group textarea,
|
||||||
|
.form-group select {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border: 1.5px solid rgba(156, 148, 136, 0.3);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: 15px;
|
||||||
|
background: white;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
.form-group input:focus,
|
||||||
|
.form-group textarea:focus,
|
||||||
|
.form-group select:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--green);
|
||||||
|
}
|
||||||
|
.form-group textarea {
|
||||||
|
min-height: 120px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 290 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 308 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 246 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
@@ -0,0 +1,6 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
|
||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 581 B |
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
+299
@@ -0,0 +1,299 @@
|
|||||||
|
<!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>
|
||||||
@@ -0,0 +1,216 @@
|
|||||||
|
<!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">JUL–DEC 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">JAN–MAR 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">APR–JUN 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>© 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>
|
||||||
@@ -0,0 +1,176 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Support a Project — Taawunu</title>
|
||||||
|
<meta name="description" content="Support community self-sufficiency projects through our registered charity partners. Full transparency, tax-deductible donations.">
|
||||||
|
<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/">Projects</a></li>
|
||||||
|
<li><a href="/about/">About</a></li>
|
||||||
|
<li><a href="/support/" class="nav-cta active">Support a Project</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<section class="page-hero">
|
||||||
|
<div class="container">
|
||||||
|
<div class="label fade-up">Support a Project</div>
|
||||||
|
<h1 class="fade-up">Your sadaqah jariyah.<br>Their self-sufficiency.</h1>
|
||||||
|
<p class="fade-up">Donations are processed by our registered charity partners, who issue tax receipts. Taawunu provides project management and full transparency on how your funds are used.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- How it works -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-label fade-up">How It Works</div>
|
||||||
|
<div class="section-gold-rule fade-up"></div>
|
||||||
|
<h2 class="fade-up">Three simple steps.</h2>
|
||||||
|
|
||||||
|
<div class="approach-steps">
|
||||||
|
<div class="approach-step fade-up">
|
||||||
|
<div class="approach-step-num">01</div>
|
||||||
|
<h3>Choose a project</h3>
|
||||||
|
<p>Select the project you want to support below. Each project has full budget transparency — you'll know exactly where your money goes.</p>
|
||||||
|
</div>
|
||||||
|
<div class="approach-step fade-up">
|
||||||
|
<div class="approach-step-num">02</div>
|
||||||
|
<h3>Donate via charity partner</h3>
|
||||||
|
<p>You'll be directed to our charity partner's secure payment page. They're a UK-registered charity — your donation is tax-deductible and Gift Aid eligible.</p>
|
||||||
|
</div>
|
||||||
|
<div class="approach-step fade-up">
|
||||||
|
<div class="approach-step-num">03</div>
|
||||||
|
<h3>Receive updates</h3>
|
||||||
|
<p>We publish regular project updates with photos, financials, and honest reporting. You'll see exactly what your contribution built.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Active campaigns -->
|
||||||
|
<section class="section bg-cream">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-label fade-up">Active Projects</div>
|
||||||
|
<div class="section-gold-rule fade-up"></div>
|
||||||
|
<h2 class="fade-up">Where your support goes.</h2>
|
||||||
|
|
||||||
|
<div class="support-cards mt-4">
|
||||||
|
<div class="support-card fade-up" style="border-top-color: var(--water);">
|
||||||
|
<div class="label" style="color:var(--water); margin-bottom:8px;">💧 Water</div>
|
||||||
|
<h3>Solar Water Well — Lolo Camp</h3>
|
||||||
|
<p>Fund a solar-powered borehole providing 10,000 litres of clean water daily to 4,000+ refugees. No fuel costs, no recurring expenses — powered by the sun.</p>
|
||||||
|
<div style="display:flex; justify-content:space-between; margin-bottom:16px;">
|
||||||
|
<div><span class="label">Target</span><br><strong style="font-family:var(--font-mono); color:var(--water);">£5,000</strong></div>
|
||||||
|
<div><span class="label">Type</span><br><strong style="font-size:14px;">Sadaqah Jariyah</strong></div>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="btn btn-primary" onclick="alert('Donation page coming soon — we are setting up the charity partner checkout. Email hello@taawunu.org to donate now.'); return false;">Donate via SWAN London →</a>
|
||||||
|
<p style="font-size:11px; color:var(--muted); margin-top:12px; margin-bottom:0;">Donations processed by SWAN London, UK registered charity. Gift Aid eligible.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="support-card fade-up" style="border-top-color: var(--green);">
|
||||||
|
<div class="label" style="color:var(--green); margin-bottom:8px;">🌾 Food</div>
|
||||||
|
<h3>Lolo Aquaculture — Phase 2</h3>
|
||||||
|
<p>Fund the next phase of the community fish farm: broodstock acquisition, hatchery commissioning, and first pond stocking. This is the step that turns infrastructure into food.</p>
|
||||||
|
<div style="display:flex; justify-content:space-between; margin-bottom:16px;">
|
||||||
|
<div><span class="label">Target</span><br><strong style="font-family:var(--font-mono); color:var(--green);">£8,700</strong></div>
|
||||||
|
<div><span class="label">Type</span><br><strong style="font-size:14px;">Zakat Eligible</strong></div>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="btn btn-primary" onclick="alert('Donation page coming soon — we are setting up the charity partner checkout. Email hello@taawunu.org to donate now.'); return false;">Donate via SWAN London →</a>
|
||||||
|
<p style="font-size:11px; color:var(--muted); margin-top:12px; margin-bottom:0;">Donations processed by SWAN London, UK registered charity. Gift Aid eligible.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="support-card fade-up" style="border-top-color: var(--gold);">
|
||||||
|
<div class="label" style="color:var(--gold); margin-bottom:8px;">📚 Education</div>
|
||||||
|
<h3>Quran School Materials</h3>
|
||||||
|
<p>Provide writing boards (alluha), ink, and solar lights for the traditional Quran schools at Lolo Camp. A small investment with deep cultural significance.</p>
|
||||||
|
<div style="display:flex; justify-content:space-between; margin-bottom:16px;">
|
||||||
|
<div><span class="label">Target</span><br><strong style="font-family:var(--font-mono); color:var(--gold);">£500</strong></div>
|
||||||
|
<div><span class="label">Type</span><br><strong style="font-size:14px;">Sadaqah</strong></div>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="btn btn-primary" onclick="alert('Donation page coming soon — we are setting up the charity partner checkout. Email hello@taawunu.org to donate now.'); return false;">Donate via SWAN London →</a>
|
||||||
|
<p style="font-size:11px; color:var(--muted); margin-top:12px; margin-bottom:0;">Donations processed by SWAN London, UK registered charity. Gift Aid eligible.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Other ways -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-label fade-up">Other Ways to Help</div>
|
||||||
|
<div class="section-gold-rule fade-up"></div>
|
||||||
|
<h2 class="fade-up">Not just money.</h2>
|
||||||
|
|
||||||
|
<div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:20px; margin-top:32px;">
|
||||||
|
<div class="fade-up" style="padding:24px; background:var(--light-cream); border-radius:4px; border-left:3px solid var(--earth);">
|
||||||
|
<h3>Share Our Work</h3>
|
||||||
|
<p style="font-size:14px; color:#666; margin-bottom:0;">Follow <a href="https://instagram.com/taawunu">@taawunu</a> on social media. Share our project updates with your community, mosque, or network. Awareness is free and powerful.</p>
|
||||||
|
</div>
|
||||||
|
<div class="fade-up" style="padding:24px; background:var(--light-cream); border-radius:4px; border-left:3px solid var(--green);">
|
||||||
|
<h3>Professional Skills</h3>
|
||||||
|
<p style="font-size:14px; color:#666; margin-bottom:0;">Aquaculture expertise, water engineering, agricultural science, grant writing, Arabic translation. If you have skills we need, <a href="mailto:hello@taawunu.org">reach out</a>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="fade-up" style="padding:24px; background:var(--light-cream); border-radius:4px; border-left:3px solid var(--gold);">
|
||||||
|
<h3>Institutional Partnership</h3>
|
||||||
|
<p style="font-size:14px; color:#666; margin-bottom:0;">Foundations, NGOs, and government agencies — we're seeking partnerships to scale the 4-pillar model to other communities. <a href="/about/#contact">Let's talk</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Trust disclosure -->
|
||||||
|
<section class="section bg-cream">
|
||||||
|
<div class="container">
|
||||||
|
<div class="fade-up" style="max-width:640px; margin:0 auto; text-align:center;">
|
||||||
|
<h2>Full transparency. Always.</h2>
|
||||||
|
<p style="margin: 16px auto;">Every project budget is published in full. Our management fees are openly listed. We report setbacks alongside successes. If something breaks, you'll hear about it from us first.</p>
|
||||||
|
<a href="/projects/" class="btn btn-primary">See Our Budgets →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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>© 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>
|
||||||
+32
@@ -0,0 +1,32 @@
|
|||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name taawunu.org www.taawunu.org taawunu.com www.taawunu.com taawunu.quikcue.com;
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
absolute_redirect off;
|
||||||
|
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ $uri/index.html /index.html;
|
||||||
|
}
|
||||||
|
|
||||||
|
location /css/ {
|
||||||
|
expires 30d;
|
||||||
|
add_header Cache-Control "public, immutable";
|
||||||
|
}
|
||||||
|
|
||||||
|
location /images/ {
|
||||||
|
expires 30d;
|
||||||
|
add_header Cache-Control "public, immutable";
|
||||||
|
}
|
||||||
|
|
||||||
|
add_header X-Frame-Options "SAMEORIGIN" always;
|
||||||
|
add_header X-Content-Type-Options "nosniff" always;
|
||||||
|
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
|
||||||
|
|
||||||
|
gzip on;
|
||||||
|
gzip_types text/html text/css application/javascript text/plain image/svg+xml;
|
||||||
|
gzip_min_length 256;
|
||||||
|
|
||||||
|
error_page 404 /404.html;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user