omair
563e4a5844
5 pages (Home, Approach, Projects, About, Support) 11 field photos from Lolo Camp Full brand identity implementation Mobile-responsive, optimized images
177 lines
11 KiB
HTML
177 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="/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>
|