quikcue/taawunu-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Visual overhaul — gallery photos integrated across all pages

Browse Source 
Homepage:
- The Challenge: woman-carrying-water evidence photo beside text
- 4 pillar cards: thumbnail images (borehole, ponds, market, classroom)
- Water tank sunset photo break before How We Work

Approach:
- Full-bleed photo hero (pond construction workers)
- All 4 pillar sections: replaced generic photos with exact gallery matches
- Solar panel evidence photo beside battery incident transparency story

Projects:
- Full-bleed photo hero (fish ponds aerial)
- Photo mosaic: harvest, construction, catfish closeup
- Water well card: borehole photo, School card: classroom photo
- Drone overview photo break between sections

About:
- Full-bleed photo hero (community meeting)
- Hands-with-seedling evidence block for 'from the ground up'
- Fish ponds photo break between Team and Structure

Support:
- Full-bleed photo hero (hands with seedling — giving metaphor)
- All 3 campaign cards: contextual header images
- Water tank sunset photo break before transparency section

Gallery:
- Full-bleed photo hero (drone camp overview)

Global:
- New CSS: page-hero-visual, photo-break, evidence-block, support-card-img, pillar-card-thumb, photo-mosaic
- Fixed broken nav links (double about/ tags) across all pages
This commit is contained in:
Omair Saleh
2026-03-09 00:44:29 +08:00
parent 9a1cd05471
commit c476724f9a
7 changed files with 276 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/index.html
+30 -12
View File
@@ -35,7 +35,7 @@
<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="/about/">About</a></li>
<li><a href="/support/" class="nav-cta">Support a Project</a></li>
</ul>
</div>
@@ -89,12 +89,19 @@
<!-- ═══════════ 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 class="evidence-block fade-up">
<div>
<div class="section-label">The Challenge</div>
<div class="section-gold-rule"></div>
<h2 style="max-width:640px;">Aid creates dependency.<br>Infrastructure creates freedom.</h2>
<p style="font-size:17px; color:#555;">For over a decade, 12,000 refugees from the Central African Republic have lived in Lolo Camp, Cameroon. The World Food Programme cut rations to 50%. Pulses, oil, salt — gone from the basket. The world's response: give them just enough to survive, never enough to thrive.</p>
<p style="font-size:17px; color:#555;"><strong style="color:var(--deep);">This is not a poverty problem. It's a design problem.</strong> The resources exist — water underground, fish in rivers, fertile soil, capable people. What's missing is the system that connects resources to people and people to self-sufficiency.</p>
<p style="font-size:17px; color:#555;">Taawunu builds that system.</p>
</div>
<div class="evidence-photo">
<img src="/images/gallery/woman-carrying-water.jpg" alt="A woman carries water along a red laterite path — before the borehole, this walk was kilometres longer" loading="lazy">
</div>
</div>
</div>
</section>
@@ -118,22 +125,22 @@
<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-card-thumb"><img src="/images/gallery/borehole-water-flowing.jpg" alt="Solar-powered borehole pumping clean water" loading="lazy"></div>
<div class="pillar-name">Water</div>
<p class="pillar-desc">Clean water is the foundation of everything. A 70m borehole now pumps 10,000 litres daily — enough for the community and the aquaculture project.</p>
</div>
<div class="pillar-card pillar-food fade-up">
<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-card-thumb"><img src="/images/gallery/fish-ponds-aerial.jpg" alt="Aerial view of 10 fish ponds carved into red laterite earth" loading="lazy"></div>
<div class="pillar-name">Food</div>
<p class="pillar-desc">10 fish ponds with capacity for 35,000 catfish across 3 harvest cycles per year. The community feeds itself — no more waiting for WFP trucks.</p>
</div>
<div class="pillar-card pillar-livelihood fade-up">
<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-card-thumb"><img src="/images/gallery/market-fish-sales.jpg" alt="Woman selling catfish at the local market" loading="lazy"></div>
<div class="pillar-name">Livelihoods</div>
<p class="pillar-desc">Surplus fish are sold at local markets. Revenue funds operations, creates jobs, and builds an economy that doesn't depend on outside funding.</p>
</div>
<div class="pillar-card pillar-education fade-up">
<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-card-thumb"><img src="/images/gallery/children-classroom-light.jpg" alt="Children studying in an open-air classroom" loading="lazy"></div>
<div class="pillar-name">Education</div>
<p class="pillar-desc">When a community can feed and sustain itself, it can build schools. Revenue from the farm funds teachers, materials, and permanent learning spaces.</p>
</div>
@@ -178,6 +185,17 @@
<div class="verse-ref">Al-Ma'idah 5:2</div>
</section>
<!-- ═══════════ PHOTO BREAK ═══════════ -->
<div class="photo-break fade-up">
<img src="/images/gallery/water-tank-sunset.jpg" alt="Water tank silhouetted against African sunset — permanence" loading="lazy">
<div class="photo-break-overlay">
<div class="photo-break-text">
<h3>Infrastructure that outlasts the project.</h3>
<p>This water tank will be here long after the team has gone home.</p>
</div>
</div>
</div>
<!-- ═══════════ HOW WE WORK ═══════════ -->
<section class="section">
<div class="container">
@@ -244,7 +262,7 @@
<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="/about/">About Us</a></li>
<li><a href="/support/">Support</a></li>
</ul>
</div>