omair
9a1cd05471
Gallery page with: - 13 photorealistic documentary photos matching Lolo field photo DNA - Pillar-based filtering (Water/Food/Livelihoods/Education) - Lightbox with keyboard navigation - Masonry-style grid layout - All images optimized to JPG (~130KB each, 1.7MB total) Images: fish ponds aerial, borehole water, fish harvest, solar panels, classroom, market, sunset water tank, pond construction, woman carrying water, community meeting, hands with seedling, catfish basin, camp overview
179 lines
11 KiB
HTML
179 lines
11 KiB
HTML
<!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="/gallery/">Gallery</a></li>
|
|
<li><a href="/about/"><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="/gallery/">Gallery</a></li>
|
|
<li><a href="/about/"><li><a href="/about/">About Us</a></li><li><a href="/support/">Support</a></li></ul></div>
|
|
<div><h4>Projects</h4><ul><li><a href="/projects/#aquaculture">Lolo Aquaculture</a></li><li><a href="/projects/#water">Solar Water Well</a></li></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>
|