From c476724f9a848be4e3b8a9a9aaeba0ba18f09b48 Mon Sep 17 00:00:00 2001 From: Omair Saleh Date: Mon, 9 Mar 2026 00:44:29 +0800 Subject: [PATCH] =?UTF-8?q?Visual=20overhaul=20=E2=80=94=20gallery=20photo?= =?UTF-8?q?s=20integrated=20across=20all=20pages?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- html/about/index.html | 29 +++++++- html/approach/index.html | 30 +++++--- html/css/style.css | 151 +++++++++++++++++++++++++++++++++++++++ html/gallery/index.html | 5 +- html/index.html | 42 +++++++---- html/projects/index.html | 36 +++++++--- html/support/index.html | 23 +++++- 7 files changed, 276 insertions(+), 40 deletions(-) diff --git a/html/about/index.html b/html/about/index.html index 16cecfc..30a6c5d 100644 --- a/html/about/index.html +++ b/html/about/index.html @@ -28,7 +28,10 @@ -
+
+
+ Community members gather under an open shelter to plan, discuss, and govern their own future +
About Us

We build the system
that builds the community.

@@ -55,6 +58,17 @@

What we don't do: 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.

+ +
+
+

From the ground up.

+

The name is a command — not one person saving the world, but a community cooperating. Every project starts with the earth under our feet: the red laterite soil of Cameroon, the water beneath it, the fish that grow in it, the children who learn from it.

+

We don't parachute in solutions. We design systems that communities own, operate, and sustain — long after we've gone home.

+
+
+ Hands cupping red Cameroon earth with a tiny seedling — the core metaphor of everything Taawunu builds +
+
@@ -95,6 +109,17 @@
+ +
+ The fish farm — 10 ponds carved into the earth, proof the model works +
+
+

Design systems, not dependency.

+

10 ponds. 35,000 fish capacity. Community owned and operated.

+
+
+
+
@@ -170,7 +195,7 @@
تَعَاوُنُوا
TAAWUNU

A social impact studio designing permanent self-sufficiency for marginalized communities.

Explore

+
  • About Us
  • Support

    • Projects

    Connect

    diff --git a/html/approach/index.html b/html/approach/index.html index ca31be7..bf47bd4 100644 --- a/html/approach/index.html +++ b/html/approach/index.html @@ -22,13 +22,16 @@
  • Our Approach
  • Projects
  • Gallery
    • -
  • About
    • +
  • About
  • Support a Project
    • -
    +
    +
    + Workers digging fish ponds by hand — the scale of manual labour that builds self-sufficiency +
    Our Approach

    Four pillars.
    One sequence.
    No shortcuts.

    @@ -52,7 +55,7 @@
    - Working the red laterite earth at Lolo, April 2024 + Solar-powered borehole pumping 10,000 litres of clean water daily
    Pillar 1
    @@ -66,7 +69,7 @@
    - Community members working together at the farm, April 2024 + Aerial view of 10 fish ponds carved into the red laterite earth
    Pillar 2
    @@ -80,7 +83,7 @@
    - Team consulting with community members in the field + Fresh catfish for sale at the local market — surplus creates livelihoods
    Pillar 3
    @@ -94,7 +97,7 @@
    - Children at the community learning center, Lolo Camp, February 2025 + Children study at wooden desks in an open-air classroom with corrugated roof
    Pillar 4
    @@ -141,10 +144,15 @@

    We publish everything.

    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.

    -
    -

    Example: The Solar Battery Incident

    -

    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.

    -

    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.

    +
    +
    +

    Example: The Solar Battery Incident

    +

    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.

    +

    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.

    +
    +
    + Solar panel installation powering the borehole pump — clean energy for clean water +
    @@ -168,7 +176,7 @@

    A social impact studio that designs, manages, and verifies community empowerment projects.

    Explore

    +
  • About Us
  • Support

    • Projects

    Connect

    diff --git a/html/css/style.css b/html/css/style.css index fdbe536..b0540ec 100644 --- a/html/css/style.css +++ b/html/css/style.css @@ -899,6 +899,157 @@ p { margin-bottom: 16px; max-width: 720px; } max-width: 600px; } +/* Page Hero with background photo */ +.page-hero-visual { + position: relative; + padding: 160px 0 80px; + min-height: 420px; + display: flex; + align-items: flex-end; + overflow: hidden; +} +.page-hero-visual .hero-bg { + position: absolute; + inset: 0; + z-index: 0; +} +.page-hero-visual .hero-bg img { + width: 100%; + height: 100%; + object-fit: cover; +} +.page-hero-visual .hero-bg::after { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(to bottom, rgba(61,31,21,0.25) 0%, rgba(61,31,21,0.6) 50%, rgba(61,31,21,0.9) 100%); +} +.page-hero-visual .container { position: relative; z-index: 1; } +.page-hero-visual .label { color: var(--gold); margin-bottom: 8px; } +.page-hero-visual h1 { color: var(--cream); margin-bottom: 16px; } +.page-hero-visual p { font-size: 18px; color: rgba(245,239,224,0.8); max-width: 600px; } + +/* ─── Photo Break (cinematic full-width strip) ─── */ +.photo-break { + position: relative; + height: 320px; + overflow: hidden; +} +.photo-break img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center 40%; +} +.photo-break .photo-break-overlay { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + background: rgba(61,31,21,0.4); +} +.photo-break .photo-break-text { + text-align: center; + color: var(--cream); + padding: 0 24px; +} +.photo-break .photo-break-text h3 { + font-family: var(--font-display); + color: var(--cream); + font-size: clamp(1.4rem, 3vw, 2rem); + margin-bottom: 8px; +} +.photo-break .photo-break-text p { + font-size: 15px; + color: rgba(245,239,224,0.7); + max-width: 500px; + margin: 0 auto; +} +@media (max-width: 768px) { + .photo-break { height: 240px; } +} + +/* ─── Photo Evidence (inline photo next to text) ─── */ +.evidence-block { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 48px; + align-items: center; +} +.evidence-block.reverse { direction: rtl; } +.evidence-block.reverse > * { direction: ltr; } +.evidence-photo { + border-radius: 4px; + overflow: hidden; + aspect-ratio: 4/3; +} +.evidence-photo img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.6s; +} +.evidence-block:hover .evidence-photo img { transform: scale(1.03); } +@media (max-width: 768px) { + .evidence-block, + .evidence-block.reverse { grid-template-columns: 1fr; direction: ltr; } +} + +/* ─── Support Card with image ─── */ +.support-card-img { + height: 180px; + overflow: hidden; + margin: -32px -32px 24px -32px; + border-radius: 4px 4px 0 0; +} +.support-card-img img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.4s; +} +.support-card:hover .support-card-img img { transform: scale(1.05); } + +/* ─── Pillar Card with thumbnail ─── */ +.pillar-card-thumb { + height: 140px; + overflow: hidden; + margin: -32px -24px 20px -24px; + border-radius: 0; +} +.pillar-card-thumb img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.5s; +} +.pillar-card:hover .pillar-card-thumb img { transform: scale(1.06); } + +/* ─── Photo Mosaic (for project detail) ─── */ +.photo-mosaic { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 6px; + border-radius: 4px; + overflow: hidden; + height: 400px; +} +.photo-mosaic .mosaic-hero { grid-row: span 2; } +.photo-mosaic img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.5s; +} +.photo-mosaic img:hover { transform: scale(1.03); } +@media (max-width: 768px) { + .photo-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; } + .photo-mosaic .mosaic-hero { grid-row: span 1; } + .photo-mosaic img { height: 200px; } +} + /* ─── Prose ─── */ .prose { font-size: 17px; diff --git a/html/gallery/index.html b/html/gallery/index.html index c7cc82d..187d8fd 100644 --- a/html/gallery/index.html +++ b/html/gallery/index.html @@ -154,7 +154,10 @@ -
    +
    +
    + Aerial view of the entire Lolo community development project +
    Gallery

    The work. The land.
    The people. The proof.

    diff --git a/html/index.html b/html/index.html index 3badd1a..5668403 100644 --- a/html/index.html +++ b/html/index.html @@ -35,7 +35,7 @@
  • Our Approach
  • Projects
  • Gallery
    • -
  • About
    • +
  • About
  • Support a Project
    • @@ -89,12 +89,19 @@
    -
    The Challenge
    -
    -

    Aid creates dependency.
    Infrastructure creates freedom.

    -

    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.

    -

    This is not a poverty problem. It's a design problem. 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.

    -

    Taawunu builds that system.

    +
    +
    +
    The Challenge
    +
    +

    Aid creates dependency.
    Infrastructure creates freedom.

    +

    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.

    +

    This is not a poverty problem. It's a design problem. 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.

    +

    Taawunu builds that system.

    +
    +
    + A woman carries water along a red laterite path — before the borehole, this walk was kilometres longer +
    +
    @@ -118,22 +125,22 @@
    - +
    Solar-powered borehole pumping clean water
    Water

    Clean water is the foundation of everything. A 70m borehole now pumps 10,000 litres daily — enough for the community and the aquaculture project.

    - +
    Aerial view of 10 fish ponds carved into red laterite earth
    Food

    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.

    - +
    Woman selling catfish at the local market
    Livelihoods

    Surplus fish are sold at local markets. Revenue funds operations, creates jobs, and builds an economy that doesn't depend on outside funding.

    - +
    Children studying in an open-air classroom
    Education

    When a community can feed and sustain itself, it can build schools. Revenue from the farm funds teachers, materials, and permanent learning spaces.

    @@ -178,6 +185,17 @@
    Al-Ma'idah 5:2
    + +
    + Water tank silhouetted against African sunset — permanence +
    +
    +

    Infrastructure that outlasts the project.

    +

    This water tank will be here long after the team has gone home.

    +
    +
    +
    +
    @@ -244,7 +262,7 @@
  • Our Approach
  • Projects
  • Gallery
    • -
  • About Us
    • +
  • About Us
  • Support
    • diff --git a/html/projects/index.html b/html/projects/index.html index 5887a40..7770b9e 100644 --- a/html/projects/index.html +++ b/html/projects/index.html @@ -22,13 +22,16 @@
  • Our Approach
  • Projects
  • Gallery
    • -
  • About
    • +
  • About
  • Support a Project
    • -
    +
    +
    + Aerial view of the Lolo fish farm — 10 ponds carved into red laterite earth +
    Our Projects

    Building self-sufficiency,
    one project at a time.

    @@ -52,13 +55,13 @@
    167%
    3-Year ROI
    - -
    - Community farming at Lolo - Planting at the Lolo site - Team surveying the farm site through dense vegetation + +
    + Community members harvesting catfish from a pond — nets in hand, basins waiting on the red embankment + Workers digging fish ponds by hand into the laterite earth + Freshly harvested catfish packed in a basin — the model works
    -
    Team and community members during the first field assessment trip, April 2024. Lolo Camp, Cameroon.
    +
    Aquaculture operations: community harvest, pond construction, and the produce that feeds families and funds the future.

    Project Timeline

    @@ -127,6 +130,17 @@
    + +
    + Aerial overview — fish ponds, community, forest — all interconnected +
    +
    +

    One ecosystem. One community. One model.

    +

    Water feeds fish. Fish feed families. Families build schools.

    +
    +
    +
    +
    @@ -136,7 +150,7 @@
    - Field assessment for water well site + Solar-powered borehole pumping clean water — the first pillar
    Planned
    @@ -151,7 +165,7 @@
    - Girl writing Quran on wooden board at Lolo Camp + Children studying in open-air classroom — the education pillar comes last because it must be sustained
    Planned — Phase 4
    @@ -196,7 +210,7 @@
    تَعَاوُنُوا
    TAAWUNU

    A social impact studio designing permanent self-sufficiency for marginalized communities.

    +
  • About Us
  • Support
    • diff --git a/html/support/index.html b/html/support/index.html index e64da20..5a3b912 100644 --- a/html/support/index.html +++ b/html/support/index.html @@ -22,13 +22,16 @@
  • Our Approach
  • Projects
  • Gallery
    • -
  • About
    • +
  • About
  • Support a Project
    • -
    +
    +
    + Working hands hold red earth and a seedling — your contribution plants the seed of self-sufficiency +
    Support a Project

    Your sadaqah jariyah.
    Their self-sufficiency.

    @@ -72,6 +75,7 @@
    +
    Solar-powered borehole pumping clean water
    💧 Water

    Solar Water Well — Lolo Camp

    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.

    @@ -84,6 +88,7 @@
    +
    Community harvesting catfish — this is what your donation funds
    🌾 Food

    Lolo Aquaculture — Phase 2

    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.

    @@ -96,6 +101,7 @@
    +
    Children studying in their classroom — education funded by community enterprise
    📚 Education

    Quran School Materials

    Provide writing boards (alluha), ink, and solar lights for the traditional Quran schools at Lolo Camp. A small investment with deep cultural significance.

    @@ -134,6 +140,17 @@
    + +
    + Water tank at sunset — permanence that outlasts the project +
    +
    +

    Your sadaqah, their independence.

    +

    Infrastructure that will be here long after the campaign is over.

    +
    +
    +
    +
    @@ -156,7 +173,7 @@
    تَعَاوُنُوا
    TAAWUNU

    A social impact studio designing permanent self-sufficiency for marginalized communities.

    +
  • About Us
  • Support