MY FAMILY FIRST ORGANIZATION
WordPress + Elementor Website — Master Build Prompt & Complete Specification
Site Architecture & Strategy
Full-Launch Build · 12 Pages · Dual Audience · 3 Conversion Funnels
The Three Conversion Funnels
Full Site Map — 15 Pages
| # | Page | URL Slug | Primary Audience | Conversion Goal | Priority |
|---|---|---|---|---|---|
| 1 | Home | / | ALL — smart routing | Route to correct funnel | Phase 1 |
| 2 | About Us | /about | Funders + Partners | Build trust + credibility | Phase 1 |
| 3 | Our Branches | /branches | ALL | Demonstrate comprehensive solution | Phase 1 |
| 4 | Get Help | /get-help | Families | Family Circle enrolment form | Phase 1 |
| 5 | Our Impact | /impact | Funders + Partners | Funder meeting / donation | Phase 1 |
| 6 | Fund Us / Donate | /donate | Funders + Donors | PayFast donation + funder contact + EFT | Phase 1 |
| 7 | Join the Network | /network | Partners + Affiliates | Affiliate enquiry form | Phase 1 |
| 8 | Careers | /careers | Job seekers | Application / CV submission | Phase 1 |
| 9 | Blog / Stories | /stories | ALL — SEO + social proof | Email sign-up + sharing | Phase 1 |
| 10 | Contact | /contact | ALL | Direct enquiry | Phase 1 |
| 11 | Member Portal | /members | Staff + Affiliates only | Resource access + login | Phase 1 (restricted) |
| 12 | Privacy / Legal | /privacy | All — compliance | POPIA compliance | Phase 1 |
| 13 | Governance & Transparency | /governance | Funders + Partners + Governments | Build institutional credibility; document downloads | Phase 1 NEW |
| 14 | Servant Leadership School | /leadership-school | Professionals + Community leaders + Alumni | Programme applications; leadership pipeline | Phase 1 NEW |
| 15 | Family Policy Lab | /policy-lab | Governments + Researchers + Media + Funders | Policy report downloads; government partnership enquiries | Phase 1 NEW |
Navigation Structure
Primary Navigation (top menu)
Logo (left) | About | Our Work ▼ (Branches, Impact, Governance) | Get Help | Fund Us | Join Network | [DONATE button — gold]
Mega Menu — "Our Work" Dropdown
Our 7 Branches | Our Impact | Governance & Transparency | Servant Leadership School | Family Policy Lab
Secondary Navigation (below hero — audience routing strip)
Three prominent icon buttons: 🏠 "I Need Help" (families) | 💰 "I Want to Fund" (donors) | 🌍 "I Want to Partner" (affiliates)
Footer Navigation
About | Branches | Impact | Governance | Policy Lab | Leadership School | Blog | Careers | Contact | Member Login | Privacy Policy | CIPC Reg: 2025/914737/08 | NPO Reg: [TBC]
Brand Identity & Design System
Color Palette — Exact Hex Codes for Elementor
Typography — Google Fonts (Free)
| Use | Font | Weight | Size Guide |
|---|---|---|---|
| Display / Hero Headlines | Playfair Display | 700, 900 | 48–72px (desktop) / 32–44px (mobile) |
| Section Headings (H2, H3) | Playfair Display | 700 | 32–44px / 24–32px mobile |
| Body Text | DM Sans | 400, 500 | 16–18px / 15px mobile |
| Subheadings, Labels, Nav | DM Sans | 600, 700 | 13–15px, letter-spacing: 1px |
| Quotes, Taglines, Pull-quotes | Cormorant Garamond | 400 italic, 600 italic | 20–28px |
| Buttons | DM Sans | 700 | 14–16px, ALL CAPS, letter-spacing: 1.5px |
Elementor Global Style Kit Settings
Set these in Elementor → Site Settings → Global Colors & Fonts
Primary Color: #2D4A22 | Secondary Color: #C8A44A | Text Color: #1A2A14 | Accent Color: #5A8C42
Primary Font: DM Sans | Secondary Font: Playfair Display
Body Font Size: 16px | Body Line Height: 1.8 | Heading Line Height: 1.2
Container Width: 1140px | Widget Space: 20px
Button Styles
| Button Type | Background | Text Color | Border | Hover | Use Case |
|---|---|---|---|---|---|
| Primary (Gold) | #C8A44A | #1A2A14 | none | Background: #E8C875 | Main CTAs: Donate, Join, Apply |
| Secondary (Earth) | #2D4A22 | #FFFDF8 | none | Background: #3D6B2E | Secondary CTAs: Learn More, Read More |
| Outline (White) | transparent | #FFFDF8 | 2px #E8C875 | BG: rgba(255,255,255,0.1) | On dark backgrounds |
| Outline (Green) | transparent | #2D4A22 | 2px #2D4A22 | BG: #2D4A22; Text: white | On light backgrounds |
Astra Theme Settings (Theme Customizer)
Astra → Customise → Global
Container layout: Full-width | Content width: 1140px | Color Palette: Custom (enter hex codes above)
Astra → Customise → Header
Header style: Transparent on homepage (creates overlay hero effect) | Sticky header: ON | Background on scroll: #2D4A22 | Logo height: 50px desktop / 40px mobile
Astra → Customise → Buttons
Background: #C8A44A | Text: #1A2A14 | Border radius: 6px | Padding: 14px 28px | Font weight: 700
Astra → Customise → Footer
Footer background: #1A2A14 | Text: rgba(255,255,255,0.7) | Widget areas: 4 columns | Bottom bar background: #0D1408
Logo Implementation — You Have a PNG With Transparent Background
Step 1 — Prepare Two Logo Files Before Uploading
Even though you have one transparent PNG, you need two exported versions from your logo file:
Logo Version 1 — "logo-light.png" (for dark green header): Your logo with the text/icon in white or light gold (#E8C875). Transparent background. Used in the dark header and on dark-background sections. Size: export at 400px wide minimum.
Logo Version 2 — "logo-dark.png" (for light pages/scrolled header): Your logo with text/icon in dark earth green (#2D4A22) or black. Transparent background. Used on light backgrounds if the header becomes light-coloured. Size: export at 400px wide minimum.
If your current PNG only shows well on one background, open it in Canva (free) and create the second version by changing the text/icon colour.
Step 2 — Upload Both Logos to WordPress
Media Library → Add New → upload both files. Name them clearly: "mffo-logo-light" and "mffo-logo-dark". Note the URL of each after upload.
Step 3 — Set Logo in Astra
Appearance → Customise → Header → Site Identity:
• Logo: Upload logo-light.png (shown on dark/transparent header)
• Retina Logo: Upload the same logo-light.png (Astra handles the sizing)
• Logo Width: Set to 180px desktop / 140px mobile (adjust to fit your specific logo proportions)
• Site Title: Type "MY FAMILY FIRST ORGANIZATION" but check "Hide Site Title" — the logo image carries the name
Step 4 — Sticky Header Logo (Scrolled State)
Astra → Customise → Header → Sticky Header → enable. Under sticky header logo, upload logo-light.png again (the dark green sticky bar uses the light logo). If your sticky header is set to white background on scroll, use logo-dark.png instead.
Step 5 — Elementor Header Template (if using Elementor header)
If you build a custom header in Elementor (recommended for full design control): Templates → Theme Builder → Header → add Image widget. Upload logo-light.png. Link to homepage (/). Set custom CSS class "mffo-logo-img" and add this to Additional CSS:
/* MFFO LOGO — responsive sizing and retina sharpness */
.mffo-logo-img img, .site-logo img, .custom-logo {
height: 52px !important;
width: auto !important;
max-width: 220px;
image-rendering: -webkit-optimize-contrast;
}
@media (max-width: 768px) {
.mffo-logo-img img, .site-logo img, .custom-logo {
height: 40px !important;
max-width: 170px;
}
}
/* Prevent logo blur on retina screens */
.custom-logo-link img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
Favicon (Browser Tab Icon)
Create a square version of your logo icon only (no text) at 512×512px. Save as PNG. Go to: Appearance → Customise → Site Identity → Site Icon → Upload your square icon. WordPress automatically generates all favicon sizes for different devices.
Social Share Image (OG Image)
Create a 1200×630px branded image (logo centred on earth-green background with tagline) for use as the default social media share image. Upload to Media Library. Set in Yoast SEO → Social → Facebook/Twitter → Default image.
Page-by-Page Build Specification
Homepage
URL: /The movement's front door. Routes all three audiences within 10 seconds. Emotionally powerful, visually stunning, immediately clear.
Section 1 — Hero (Full Screen, Dark Overlay)
Background: Full-width video or high-impact photo of a diverse South African family gathered together, laughing, warm. Overlay: linear-gradient(160deg, rgba(45,74,34,0.88), rgba(13,20,8,0.75)).
Headline (Playfair Display 900): "Every Family Deserves to Thrive."
Subheadline (DM Sans 400, 20px): "We are building a world where every family is financially stable, mentally healthy, well-educated, and deeply connected — across every generation."
Tagline (Cormorant Garamond italic, 22px, gold): "Be Fruitful. Multiply. Reign with Love."
CTA Row (3 buttons): [🏠 I Need Help — gold] [💰 I Want to Fund — outline white] [🌍 I Want to Partner — outline white]
Scroll indicator: Animated down-arrow in gold at bottom of hero
Section 2 — Impact Numbers Strip (Dark Green Bar)
Background: #2D4A22 | 4 animated counter stats side by side:
🏘 "500+ Families" | 🧠 "7 Programme Branches" | 🌍 "3-Year Global Vision" | ❤️ "50% Impact Target"
Each number animates upward when scrolled into view (Elementor Counter widget).
Section 3 — The Problem (Cream background, 2-column)
Left: Powerful editorial-style photo of a mother and child in a township setting — real, dignified, not exploitative.
Right: Heading: "Six Challenges. One Root Cause." | Body: "Behind every act of poverty, violence, school failure, and community breakdown is a family under unbearable strain. We don't treat symptoms. We rebuild the family ecosystem — from the inside out." | CTA: "See Our Approach →" (links to /branches)
Section 4 — The Six Challenges Grid (White background)
Heading: "The Six Challenges We Are Eliminating" | 6 cards in a 3×2 grid, each with:
Icon (emoji or SVG) + Challenge name + 1-sentence description + "Learn more →"
Cards: 💰 Financial Instability | 🧠 Mental Health Breakdown | 📚 Education Gaps | 🌿 Health & Nutrition | 🤝 Social Isolation | 🏛️ Governance Access
Card hover: lifts with gold border + subtle shadow
Section 5 — Family Circle Explainer (Earth Green background)
Background: #2D4A22 with subtle leaf texture overlay (CSS, no image needed)
Heading (gold): "The Family Circle — Our Core Innovation"
3-step horizontal flow: 1. "8–12 Families Gather" → 2. "Weekly, With Purpose" → 3. "Permanent Transformation"
Body: "The Family Circle is our primary delivery vehicle — a structured group of neighbouring families who meet weekly, share resources, heal together, and collectively change their neighbourhood." | CTA: "How It Works →"
Section 6 — Transformation Story (Quote/Testimonial, Cream)
Large pull-quote in Cormorant Garamond italic: "Since joining the Family Circle, I have paid off my debt, my children are attending school regularly, and for the first time I feel like I belong to something bigger than my problems."
Attribution: — [Name], Family Circle Member, [Community], Gauteng
Background: warm cream with subtle golden watermark of the family tree motif
(Use a placeholder story initially — replace with real testimonials as they come in)
Section 7 — Three Pathways (3-column, White)
Heading: "How You Can Be Part of This"
3 equal columns with distinct styling:
Column 1 (families): 🏠 "I Need Help" | "Find your nearest Family Circle and join a community that will walk with you." | [Join a Family Circle — gold button]
Column 2 (funders): 💰 "I Want to Fund" | "Your investment can transform 50% more families from crisis to flourishing by Year 3." | [Fund the Mission — earth button]
Column 3 (partners): 🌍 "I Want to Partner" | "Join our global affiliate network and multiply your impact with our proven model." | [Join the Network — sky button]
Section 8 — Trust Strip (Logo bar, White/Cream)
Heading (small, grey): "Registered and Accountable"
Row of trust badges: CIPC Registered | NPO Registered | Section 18A Approved | Independently Reviewed | POPIA Compliant
(Use text badges initially; replace with official logos once registrations are confirmed)
Section 9 — Email Sign-up Strip (Dark green)
Background: #2D4A22 | Heading (gold): "Stay Connected to the Movement"
Subtext: "Monthly impact updates, stories of transformation, and opportunities to get involved."
Email capture form (Mailchimp embed via WPForms or Contact Form 7 + Mailchimp integration)
Privacy note: "No spam. Ever. Unsubscribe anytime. POPIA compliant."
About Us
URL: /aboutBuilds deep trust with funders and partners. The human story behind the organisation.
Sections in Order
Hero: Page header with "Who We Are" — earth green background, family tree watermark, Playfair Display headline.
Founding Story: 2-column — photo of Founder + personal narrative. "Why I started this." Emotional, authentic, first-person. 200–300 words. This is the most-read section by funders.
Vision & Mission: Full-width dark section with the Vision statement (large), Mission statement, and Guiding Principle ("Be Fruitful. Multiply. Reign with Love.") in Cormorant Garamond italic.
Our Values: 5 value cards (Family First, Servant Leadership, Radical Transparency, Ubuntu, Excellence Without Elitism) — icon + name + 1-sentence description each.
Our Structure: Visual org chart (simple, illustrated) — Global Family Core at centre, 7 Branches radiating outward like a tree. Built with Elementor image widget or a simple SVG.
Board of Directors: 3–5 member cards with photo, name, role, 2-line bio. Professional, human, credible.
Legal & Governance Strip: CIPC number, NPO number, Section 18A status, registered address, financial year-end. Small, clean, text-based. Signals accountability.
CTA: "See What We're Building →" (links to /branches) + "Support the Mission →" (links to /donate)
Our Branches
URL: /branchesThe comprehensive solution showcase. Shows all 7 branches with depth. Demonstrates that MFFO is the most complete family organisation in the sector.
Sections in Order
Hero: "Our Seven Family Branches" — dark green hero with branch icons floating. Subheading: "One ecosystem. Seven solutions. Zero family left behind."
Intro paragraph: "Most organisations address one family challenge at a time. We address all six simultaneously — because families don't live in silos."
Branch Cards (7 cards, alternating left/right layout): Each card: Branch icon (large) + Branch name + Challenge it addresses + 3-sentence description + "Proven Methods Used" (3–4 bullet points with research citations) + "Key Innovation" (1 original MFFO tool) + Impact metric target.
Each branch has a distinct accent colour derived from the palette:
B1 Wealth: Gold | B2 Wellness: Soft red/rose | B3 Learning: Sky blue | B4 Health: Olive green | B5 Community: Teal | B6 Voice: Purple | B7 Multiply: Earth brown
The REIGN Framework: A full-width visual explainer of the 5-step REIGN methodology (Root → Equip → Integrate → Generate → Narrate) with icons and brief descriptions.
Social Enterprise Section: "Our Branches Also Generate Revenue" — brief explanation of each branch's commercial arm (FamilyWealth Academy, FamilyWell Clinics, etc.)
CTA: "Want to fund a specific branch?" → links to /donate with branch selector
Get Help
URL: /get-helpThe family gateway. Warm, welcoming, simple. No jargon. No barriers. The single most important page for community trust.
Sections in Order
Hero: Warm photo (family gathered, indoor community setting). Overlay not too dark. Headline: "You Are Not Alone." Subtext: "Whatever your family is going through — financial pressure, relationship strain, health challenges, feeling isolated — there is a Family Circle near you, and a community ready to walk with you."
What to Expect: 3-step simple visual: Step 1 — "Fill in your details below" | Step 2 — "We call you within 48 hours" | Step 3 — "You meet your Family Circle and begin"
What is a Family Circle?: 4 simple benefit cards: 🤝 "Weekly community meeting" | 💡 "Practical skills and knowledge" | 🆘 "Emergency support within 24 hours" | ❤️ "Friends who become family"
Enrolment Form: Simple 6-field form (no login required): Full Name | WhatsApp Number | Area/Community | Main Challenge (dropdown: Financial / Mental Health / Education / Health / Community / All of the above) | How did you hear about us? | Message (optional) | [JOIN A FAMILY CIRCLE — gold button]
Form connected to: WPForms Free → email notification to designated programme staff + auto-reply to enquirer confirming receipt.
Privacy assurance: "Your information is kept confidential and used only to connect you with support. POPIA compliant." (small text below form)
Alternative contact strip: WhatsApp button + phone number + email for those not comfortable with forms.
FAQ section: 5–6 common questions in accordion format (Elementor Accordion widget): "Is it free?" | "Do I need to commit to every meeting?" | "What happens in a Family Circle?" | "Is this for any religion or background?" | "What if I need urgent help?"
Our Impact
URL: /impactThe credibility powerhouse. Evidence for funders and partners. Data, stories, methodology, and transparency combined.
Sections in Order
Hero: "Proof That Families Can Transform." Dark green. Subtext: "We are committed to radical transparency — publishing all results, including setbacks, because families deserve accountability."
Impact Dashboard: Live or static stat widgets: Families Enrolled | Family Circles Active | Communities | Staff + Volunteers | Branches Operational. (Update manually each quarter; use Elementor Counter widgets)
The 50% Promise: Full-width section explaining the 6-challenge 50%-reduction target by Year 3. Visual progress bars (currently at 0% baseline — shows honesty and ambition). "Year 1 baselines being established in [community], Gauteng."
Measurement Framework: Clean table or card layout showing each challenge, the measurement tool used (FACES IV, K10, MPI, etc.), and the Year 3 target. Positions MFFO as rigorous and evidence-based.
Research Foundations: "Our Methods Are Built on 30+ Years of Global Research" — 6 research citation cards: Gottman Institute, CARE International VSLA, Heckman Equation, WHO mhGAP, OECD Financial Literacy, Triple P Parenting.
Stories of Transformation: 3 story cards (text + optional photo) — real or placeholder testimonials. Link: "Read more stories →" → /stories
Transparency Section: "Our Commitment to Accountability" — links to: Annual Report (PDF, when available) | Financial Statements | Board Minutes (summary) | NPO Registration | CIPC Certificate
CTA: "Partner With Our Mission" → links to /donate and /network
Fund Us / Donate
URL: /donateThe revenue engine. Converts funders to donors and grants. Three distinct giving pathways: online donation, grant partnership, CSI partnership.
Sections in Order
Hero: "Your Investment Transforms Families." Gold accents on dark green. Subtext: "Every rand you give directly funds a family's journey from crisis to flourishing." Section 18A badge prominently displayed.
Impact Calculator Strip: Simple visual: "R500 funds one Family Circle session for 10 families" | "R5,000 trains one Community Healing Steward for a month" | "R50,000 runs one Family Circle for a full year" | "R500,000 launches a full programme branch in a new community"
Online Donation Section: Donation amount buttons: R100 | R250 | R500 | R1,000 | R5,000 | Custom amount. Payment methods: PayFast (SA cards, EFT, SnapScan) + PayPal (international). Section 18A tax receipt assured. Recurring donation option (monthly/annual). (See Custom Code tab for PayFast integration workaround)
Grant Partnership Section: "Are you a foundation, CSI manager, or major donor?" — 3-column: "Why fund MFFO" (3 bullet points) | "What your grant will fund" (dropdown selector by branch) | "Request a funder meeting" (simple form: Name, Organisation, Email, Phone, "I want to discuss..." text field)
CSI Partnership Section: "For South African Companies" — explains B-BBEE SED eligibility, Section 18A benefits, recognition in annual report, co-branding on programme materials. CTA: "Contact our Partnerships Team →"
Bank EFT Details: Organisation name, bank, account number, branch code, reference instructions. For donors who prefer direct transfer.
Trust Strip: Section 18A logo | CIPC Registered | NPO Registered | "All donations independently audited"
Join the Network
URL: /networkAffiliate acquisition page. Converts existing NPOs and social enterprises into certified MFFO affiliates. The multiplication engine.
Sections in Order
Hero: "Multiply Your Impact. Join the MFFO Family." Sky blue tones. "You've been serving your community. Now access the training, brand, technology, and network of a global movement — while remaining fully independent."
Why Join: 6 benefit cards: 🎓 Training & Certification | 🏷️ Brand Rights | 📱 Technology Platform | 🤝 Peer Network | 💡 Grant Support | 📊 Impact Data
The 4 Affiliate Tiers: Visual tier table (Seed → Certified → Partner Hub → Sovereign Chapter) with requirements, benefits, and levy structure per tier. Clean, professional, credible.
90-Day Launch Protocol: 3-step visual: "Days 1–30: Foundation" | "Days 31–60: Programme Launch" | "Days 61–90: Certification"
Who Should Apply: "You are a fit if..." — 5 bullet points describing ideal affiliate profile.
Application Form: Organisation name | Contact person | Email | Phone | Country/Province | Current focus areas | Number of families currently served | "Why do you want to join MFFO?" | [APPLY TO JOIN — gold button]
Current Network Map: Placeholder world map with a single pin on Johannesburg. "More pins coming soon." (Updates as affiliates are certified.)
Careers
URL: /careersTalent acquisition. Attracts mission-aligned professionals. Positions MFFO as a desirable employer with clear career development pathways.
Sections in Order
Hero: "Build a Career That Changes Generations." Warm, aspirational. Photo of diverse professional team in community setting.
Why Work at MFFO: 4 cards: 💰 "Competitive compensation (65th percentile)" | 🌱 "Career development funding (R30,000/year)" | 🌍 "Global expansion opportunities" | ❤️ "Work that matters, every single day"
Career Pathways: 3 visual pathway diagrams: Community → Staff → Leadership track | Technical/Programme track | Social Enterprise track
Current Vacancies: Use WP Job Manager (free) plugin to list vacancies. Each vacancy: title, branch, location, type, brief description, apply button.
Servant Leadership School: Section inviting applications to the 12-month leadership programme. Link to full details (can be a sub-page or section on About page).
Spontaneous Application: "Don't see your role listed? Send us your CV." — simple form: Name, Email, Role Interest, Upload CV (WPForms free).
Stories / Blog
URL: /storiesSEO engine + social proof + donor emotional engagement. New content every 2 weeks. Three content types: family stories, research insights, programme updates.
Setup & Content Strategy
Hero: "Stories That Change the World" — warm community photo, simple elegant layout.
Featured post: Large hero card (first/latest post) — full-width with image, headline, excerpt, CTA.
Category filter: 3 categories — "Family Stories" | "Research & Insights" | "Programme News" — filter buttons above post grid.
Post grid: 3-column card layout (standard WordPress posts styled with Elementor).
Email sign-up widget: Sidebar or inline CTA: "Get new stories in your inbox."
First 5 posts to publish at launch:
1. "Why We Started: The Story Behind MY FAMILY FIRST ORGANIZATION" (founder story)
2. "The Six Challenges Facing Every South African Family — And What We're Doing About Them"
3. "What is a Family Circle? And Why It Works Better Than Any Programme We've Tried"
4. "The Research Behind Our Model: 30+ Years of Evidence"
5. "How to Apply for a Family Circle in Gauteng"
SEO: Yoast SEO free plugin — set focus keyword, meta description, and OG image for every post. Target keywords: "family support Gauteng," "family welfare NPO South Africa," "mental health support families Johannesburg."
Contact
URL: /contactSimple, warm, functional. Three contact pathways: general enquiry, funder/partner meeting, media/press.
Sections in Order
Hero: "Let's Talk." Simple, human. "Whether you're a family that needs support, a funder who wants to invest, or an organisation that wants to partner — we'd love to hear from you."
3 Contact Pathways: 3 columns with distinct contact options:
🏠 Families: WhatsApp button + phone + "Get Help" form link
💰 Funders & Partners: Email + "Request Meeting" form
📰 Media & Press: Press email + downloadable media kit (PDF)
General Contact Form: Name | Email | I am a... (dropdown: Family, Funder, Partner, Media, Other) | Message | [SEND MESSAGE — gold button]
Contact Details: Physical address | Tel | Email | WhatsApp | Social media icons (Facebook, Instagram, LinkedIn, WhatsApp Business)
Map: Google Maps embed showing registered address (or general Johannesburg/Gauteng area if home address)
Registration Details: CIPC Reg | NPO Reg | Section 18A (when approved) — small, footer-style text. Trust signal.
Member Portal
URL: /membersRestricted area for staff and certified affiliates only. Houses governance documents, training resources, and operational templates.
Setup (using Paid Memberships Pro Free + Custom Code)
Access control: Paid Memberships Pro (free tier) — create one membership level: "MFFO Staff & Affiliates" (free, manually approved). All /members/* pages require login.
Login page design: Custom Elementor login page — MFFO branded, family tree watermark, warm dark green background.
Member Dashboard (post-login): Welcome message personalised with username. 4 resource sections:
📁 "Governance Documents" — MOI, Board minutes, policies (PDF downloads)
🎓 "Training Resources" — Programme curricula, facilitator guides, REIGN Framework toolkit
📋 "Operational Templates" — Family Circle agenda, baseline assessment forms, reporting templates
📊 "Impact Resources" — Index measurement guides, FamilyWealth Score questionnaire, evaluation tools
File hosting: Files uploaded to WordPress Media Library, linked from member pages. No external storage needed initially.
Access request: Public-facing "Request Member Access" form on /members (for non-logged-in visitors). Form → email to admin → manual approval.
Governance & Transparency
URL: /governanceThe institutional credibility page. For major funders, governments, auditors, and partners doing due diligence. Demonstrates that MFFO is accountable, legally compliant, and financially transparent.
Sections in Order
Hero: "Accountable to Families. Transparent with Everyone." Dark earth background. Subtext: "We believe that radical transparency is not just good governance — it is a moral commitment to the families and funders who trust us with their future."
Legal Registration Strip: 4 prominently displayed cards: CIPC NPC Registration (2025/914737/08) | NPO Registration (DSD) | Section 18A PBO Approval (SARS) | POPIA Compliance. Each card: registration number (or "Application in process"), date, relevant authority, and a PDF download button for the certificate.
Governance Structure: Visual 2-column layout — Board of Directors (names, roles, photos, 2-line bios) | Standing Committees (Finance & Audit, Programme & Impact, HR & Remuneration) with chair names and meeting frequency.
Financial Transparency: "Our Finances, Openly Shared." Section with: Financial year-end (28/29 February) | Independent reviewer details | Link to reviewed financial statements (PDF, when available) | Summary income/expenditure table (updated annually) | Audit policy statement.
Key Policies (downloadable PDFs): Organised in a clean grid — Financial Management Policy | Conflict of Interest Policy | POPIA/Data Protection Policy | Safeguarding Policy | Whistleblower Policy | HR Policy. Each: policy name + 1-sentence description + Download PDF button.
Annual Reports: Card-based archive. Year 1 placeholder: "Annual Report — Year ending February 2026 — Publishing August 2026." Update each year with PDF download.
Membership Structure note: Brief explanation — sole member is MY FAMILY FIRST (Pty) Ltd (2025/876558/07) — why this structure was chosen and what it means for accountability.
Contact: Specific email for due diligence enquiries: governance@[yoursite].co.za
Servant Leadership School
URL: /leadership-schoolTalent pipeline + revenue + movement building. Attracts mission-aligned professionals and community leaders. Creates MFFO's next generation of leaders globally. Generates fee income from Year 2.
Sections in Order
Hero: "Lead With Roots. Build With Love." Sky blue tones. Subtext: "A 12-month formation programme for people who believe that real leadership is not about position — it is about serving the flourishing of others."
The 4-Quarter Curriculum: Visual timeline — Q1: Identity & Roots | Q2: Equip & Systems | Q3: Integrate & Build | Q4: Generate & Multiply. Each quarter: theme, 3–4 modules, practical requirement.
Programme Details: Duration | Format (blended) | Location | Cohort size (20/year) | Cost (subsidised Year 1; sliding scale Year 2+).
Who Should Apply: 3 profiles — community leaders, NPO managers, young professionals seeking meaningful careers.
Graduates receive: MFFO Certificate | Alumni network | Priority for staff/affiliate roles.
Application Form: Name | Email | Phone | Current role | "Why do you want to join?" (300 words) | [APPLY NOW — gold button].
Family Policy Lab
URL: /policy-labThought leadership and government engagement hub. Positions MFFO as Africa's most credible source of family policy evidence. Attracts government partnerships, media, and academic collaborators.
Sections in Order
Hero: "Evidence That Changes Policy. Data That Protects Families." Authoritative. Dark green. Subtext: "The Family Policy Lab converts MFFO's community data into evidence-based policy recommendations that governments can act on."
What is the Policy Lab?: 2-column — explanation + pipeline graphic: Community Data → Analysis → Policy Brief → Government Submission → Adopted Policy.
Policy Focus Areas: 6 cards — one per challenge — each with the key policy ask in one sentence.
Published Reports: Downloadable PDF cards. Year 1 placeholder: "Family Wellbeing Baseline Report — [Community] — Q1 2026 — Publishing June 2026."
Ubuntu Index™: Section previewing the forthcoming global family wellbeing index. Email sign-up for notification on launch.
Family-First Jurisdiction Certification™: Government partnership pitch + enquiry CTA.
Research Partners + Media contact + Policy Lab Bulletin newsletter sign-up.
Plugin Stack — Free + Code Workarounds
| Plugin | Purpose | Version | Priority | Install Notes |
|---|---|---|---|---|
| Astra | Theme — fast, Elementor-optimised, highly customisable | FREE | CORE | Appearance → Themes → Search "Astra" → Install → Activate. Then Appearance → Customise for all settings. |
| Elementor | Page builder — drag and drop visual editor for all pages | FREE | CORE | Plugins → Add New → Search "Elementor" → Install. Use Elementor Free — all pages in this spec are buildable with free version. |
| Yoast SEO | SEO optimisation — meta titles, descriptions, sitemaps, readability | FREE | CORE | Install immediately. Set: Site name, tagline, focus keywords per page. Submit sitemap to Google Search Console. |
| WPForms Lite | All contact, enquiry, enrolment, and application forms | FREE | CORE | Create: Contact form, Get Help form, Affiliate application form, Careers/CV form, Funder meeting request form. All in WPForms. Embed via Elementor shortcode widget. |
| Paid Memberships Pro | Member portal access control for staff and affiliates | FREE | CORE | Create one level: "MFFO Member" — free, require admin approval. Restrict /members/* pages to this level. Custom login page via Elementor template. |
| WP Job Manager | Careers page vacancy listings | FREE | CORE | Simple job board. Add |
| Wordfence Security | Firewall + malware scanning + login protection | FREE | CORE | Install immediately on day 1. Enable firewall, 2FA for admin login, login attempt limiting. Critical for any site with a member portal. |
| UpdraftPlus | Automated backups to Google Drive (free) | FREE | CORE | Schedule: Daily database backup + Weekly full backup → Google Drive. Set up on Day 1. Never skip this. |
| Smush (WP Smush) | Image compression — keeps site fast without quality loss | FREE | CORE | Auto-compress all uploaded images. Bulk smush existing images. Target: all images under 150KB without visible quality loss. |
| LiteSpeed Cache | Performance caching — Hostinger servers are LiteSpeed, this plugin maximises speed | FREE | CORE | Hostinger Business uses LiteSpeed servers — this plugin is specifically built for it. Enable page caching, browser caching, image lazy load. Target: Google PageSpeed 90+. |
| Really Simple SSL | Forces HTTPS sitewide (SSL certificate from Hostinger) | FREE | CORE | Activate SSL in Hostinger dashboard first. Then install this plugin — it handles all redirects automatically. Without HTTPS, Google penalises your SEO and Chrome shows "Not Secure." |
| Contact Form 7 | Backup form plugin + Mailchimp newsletter integration | FREE | Secondary | Use specifically for the email newsletter signup form on homepage. Pairs with free Mailchimp integration. WPForms Lite handles all other forms. |
| TablePress | Responsive, sortable data tables for Impact and Branch pages | FREE | Secondary | Use for the measurement framework table on /impact and affiliate tiers table on /network. Much better than manually building tables in Elementor. |
| Polylang | Multilingual — add isiZulu, Sesotho, etc. later | FREE | Future | Do NOT install at launch — adds complexity. Install in Phase 2 when ready to add languages. Keep the plugin on your watchlist. |
| PayFast Donation (SA) + Bank EFT | Online donations via PayFast (SA cards, EFT, SnapScan, Instant EFT) + manual Bank EFT section | CODE WORKAROUND | CORE | No paid plugin needed. Custom HTML/JS form embeds directly in Elementor HTML widget. Bank EFT details displayed as styled info block below the PayFast form. See Code tab for full implementation. |
Plugins NOT to Install
Custom Code Solutions
1. PayFast Donation Button (SA Donors)
Paste this into an Elementor HTML widget on your /donate page. Replace merchant details with your PayFast account credentials (free to register at payfast.co.za).
<!-- PAYFAST DONATION FORM - MY FAMILY FIRST ORGANIZATION -->
<div class="mffo-donate-wrap">
<div class="mffo-amount-select">
<p class="mffo-donate-label">Select or enter your donation amount (ZAR)</p>
<div class="mffo-amounts">
<button class="mffo-amt" onclick="setAmt(100)">R100</button>
<button class="mffo-amt" onclick="setAmt(250)">R250</button>
<button class="mffo-amt active" onclick="setAmt(500)">R500</button>
<button class="mffo-amt" onclick="setAmt(1000)">R1,000</button>
<button class="mffo-amt" onclick="setAmt(5000)">R5,000</button>
</div>
<input type="number" id="customAmt" placeholder="Or enter custom amount"
oninput="document.getElementById('pf-amount').value=this.value"
style="width:100%;padding:12px;border:2px solid #C8A44A;border-radius:6px;font-size:16px;margin:12px 0;">
</div>
<form action="https://www.payfast.co.za/eng/process" method="post" id="payfast-form">
<input type="hidden" name="merchant_id" value="YOUR_MERCHANT_ID">
<input type="hidden" name="merchant_key" value="YOUR_MERCHANT_KEY">
<input type="hidden" name="return_url" value="https://yoursite.co.za/thank-you">
<input type="hidden" name="cancel_url" value="https://yoursite.co.za/donate">
<input type="hidden" name="notify_url" value="https://yoursite.co.za/payfast-notify">
<input type="hidden" name="name_first" value="">
<input type="hidden" name="name_last" value="">
<input type="hidden" name="email_address" value="">
<input type="hidden" name="m_payment_id" value="">
<input type="hidden" id="pf-amount" name="amount" value="500">
<input type="hidden" name="item_name" value="Donation - MY FAMILY FIRST ORGANIZATION NPC">
<input type="hidden" name="item_description" value="Tax-deductible donation (Section 18A) to MY FAMILY FIRST ORGANIZATION NPC">
<input type="hidden" name="email_confirmation" value="1">
<input type="hidden" name="subscription_type" value="">
<button type="submit" class="mffo-donate-btn">
🇿🇦 Donate Now via PayFast
</button>
</form>
</div>
<style>
.mffo-donate-wrap{background:#FFFDF8;border:2px solid #C8A44A;border-radius:16px;padding:32px;max-width:520px;margin:0 auto;}
.mffo-donate-label{font-family:'DM Sans',sans-serif;font-weight:600;color:#2D4A22;margin-bottom:14px;font-size:15px;}
.mffo-amounts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px;}
.mffo-amt{background:#F7F2E8;border:2px solid #C8A44A;color:#2D4A22;padding:10px 18px;border-radius:8px;font-weight:700;cursor:pointer;font-size:15px;transition:all 0.2s;}
.mffo-amt:hover,.mffo-amt.active{background:#C8A44A;color:#1A2A14;}
.mffo-donate-btn{width:100%;background:#C8A44A;color:#1A2A14;border:none;padding:16px 28px;border-radius:8px;font-size:16px;font-weight:700;cursor:pointer;letter-spacing:0.5px;margin-top:16px;transition:background 0.2s;}
.mffo-donate-btn:hover{background:#E8C875;}
</style>
<script>
function setAmt(v){
document.getElementById('pf-amount').value=v;
document.getElementById('customAmt').value='';
document.querySelectorAll('.mffo-amt').forEach(b=>b.classList.remove('active'));
event.target.classList.add('active');
}
// Generate unique payment ID
document.querySelector('[name="m_payment_id"]').value='MFFO-'+Date.now();
</script>
2. Bank EFT Details Block (Branded, Styled)
Paste this into an Elementor HTML widget on your /donate page, directly below the PayFast form. Displays your bank details in a clean, trust-building layout.
<div class="mffo-eft-wrap">
<div class="mffo-eft-header">
<span class="mffo-eft-icon">🏦</span>
<div>
<p class="mffo-eft-title">Donate via Bank EFT</p>
<p class="mffo-eft-sub">Preferred by many SA donors — direct and secure</p>
</div>
</div>
<div class="mffo-eft-grid">
<div class="mffo-eft-row">
<span class="mffo-eft-label">Account Name</span>
<span class="mffo-eft-value">MY FAMILY FIRST ORGANIZATION NPC</span>
</div>
<div class="mffo-eft-row">
<span class="mffo-eft-label">Bank</span>
<span class="mffo-eft-value">[YOUR BANK NAME]</span>
</div>
<div class="mffo-eft-row">
<span class="mffo-eft-label">Account Number</span>
<span class="mffo-eft-value mffo-copyable" onclick="copyText(this)">[ACCOUNT NUMBER] <small>(tap to copy)</small></span>
</div>
<div class="mffo-eft-row">
<span class="mffo-eft-label">Branch Code</span>
<span class="mffo-eft-value">[BRANCH CODE]</span>
</div>
<div class="mffo-eft-row">
<span class="mffo-eft-label">Account Type</span>
<span class="mffo-eft-value">[CURRENT / CHEQUE]</span>
</div>
<div class="mffo-eft-row mffo-eft-ref">
<span class="mffo-eft-label">Reference</span>
<span class="mffo-eft-value">Your Name + DON (e.g. "JohnSmith-DON")</span>
</div>
</div>
<p class="mffo-eft-note">
✉️ After payment, please email <strong>donations@[yoursite].co.za</strong> with your name,
amount, and email address so we can send your Section 18A tax receipt within 3 business days.
</p>
</div>
<style>
.mffo-eft-wrap{background:#F7F2E8;border:2px solid rgba(200,164,74,0.4);border-radius:14px;padding:28px;max-width:520px;margin:24px auto 0;}
.mffo-eft-header{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid rgba(61,107,46,0.15);}
.mffo-eft-icon{font-size:32px;}
.mffo-eft-title{font-family:'DM Sans',sans-serif;font-weight:700;font-size:17px;color:#2D4A22;margin:0 0 3px;}
.mffo-eft-sub{font-family:'DM Sans',sans-serif;font-size:13px;color:#6B4C2A;margin:0;}
.mffo-eft-grid{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
.mffo-eft-row{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:white;border-radius:8px;border:1px solid rgba(61,107,46,0.1);}
.mffo-eft-label{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;color:#5A8C42;text-transform:uppercase;letter-spacing:0.8px;}
.mffo-eft-value{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;color:#1A2A14;text-align:right;}
.mffo-eft-ref{background:#EDF5E6;}
.mffo-copyable{cursor:pointer;color:#2D4A22;}
.mffo-copyable:hover{color:#C8A44A;}
.mffo-copyable small{font-size:10px;opacity:0.6;margin-left:6px;}
.mffo-eft-note{font-family:'DM Sans',sans-serif;font-size:13px;color:#4A5A44;line-height:1.6;padding:12px;background:rgba(45,74,34,0.06);border-radius:8px;margin:0;}
</style>
<script>
function copyText(el){
const txt = el.innerText.replace('(tap to copy)','').trim();
navigator.clipboard.writeText(txt).then(()=>{
const orig = el.innerHTML;
el.innerHTML = '✅ Copied!';
setTimeout(()=>{el.innerHTML=orig;},2000);
});
}
</script>
3. Audience Routing Strip (Homepage)
Paste into an Elementor HTML widget on the homepage, directly below the hero section. Creates the 3-pathway routing bar.
<div class="mffo-router">
<a href="/get-help" class="mffo-route mffo-family">
<span class="mffo-route-icon">🏠</span>
<span class="mffo-route-title">I Need Help</span>
<span class="mffo-route-sub">Find support for your family</span>
</a>
<a href="/donate" class="mffo-route mffo-funder">
<span class="mffo-route-icon">💰</span>
<span class="mffo-route-title">I Want to Fund</span>
<span class="mffo-route-sub">Invest in family transformation</span>
</a>
<a href="/network" class="mffo-route mffo-partner">
<span class="mffo-route-icon">🌍</span>
<span class="mffo-route-title">I Want to Partner</span>
<span class="mffo-route-sub">Join the global network</span>
</a>
</div>
<style>
.mffo-router{display:flex;background:#2D4A22;border-bottom:3px solid #C8A44A;}
.mffo-route{flex:1;padding:22px 20px;text-align:center;text-decoration:none;transition:background 0.25s;display:flex;flex-direction:column;align-items:center;border-right:1px solid rgba(255,255,255,0.1);}
.mffo-route:last-child{border-right:none;}
.mffo-route:hover{background:rgba(200,164,74,0.15);}
.mffo-route-icon{font-size:28px;margin-bottom:8px;}
.mffo-route-title{font-family:'DM Sans',sans-serif;font-weight:700;font-size:16px;color:#E8C875;margin-bottom:4px;}
.mffo-route-sub{font-family:'DM Sans',sans-serif;font-size:13px;color:rgba(255,255,255,0.65);}
@media(max-width:600px){.mffo-router{flex-direction:column;}.mffo-route{border-right:none;border-bottom:1px solid rgba(255,255,255,0.1);}
.mffo-route:last-child{border-bottom:none;}}
</style>
4. WhatsApp Float Button (Sitewide)
Add to Appearance → Customise → Additional CSS AND paste the HTML into Elementor footer template or via the Astra Custom CSS. Creates a floating WhatsApp button visible on all pages — critical for South African community audiences.
/* WHATSAPP FLOAT BUTTON */
.mffo-wa-float{
position:fixed;bottom:28px;right:28px;z-index:9999;
background:#25D366;color:white;border-radius:50px;
padding:14px 22px;font-family:'DM Sans',sans-serif;
font-size:14px;font-weight:700;text-decoration:none;
box-shadow:0 6px 24px rgba(37,211,102,0.4);
display:flex;align-items:center;gap:10px;
transition:all 0.25s;
}
.mffo-wa-float:hover{
background:#128C7E;transform:translateY(-3px);
box-shadow:0 10px 32px rgba(37,211,102,0.5);
}
.mffo-wa-float svg{width:22px;height:22px;fill:white;flex-shrink:0;}
@media(max-width:600px){
.mffo-wa-float{padding:12px 16px;font-size:13px;bottom:20px;right:16px;}
}
<a href="https://wa.me/27XXXXXXXXXX?text=Hello%20MY%20FAMILY%20FIRST%20ORGANIZATION%2C%20I%20would%20like%20to%20find%20out%20more." class="mffo-wa-float" target="_blank" rel="noopener"> <svg viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg> Chat on WhatsApp </a> <!-- Replace 27XXXXXXXXXX with your WhatsApp number (no spaces, no +) -->
5. Google Fonts Loader (Correct Way for Elementor + Astra)
function mffo_load_google_fonts() {
wp_enqueue_style(
'mffo-google-fonts',
'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,400&family=DM+Sans:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@1,400;1,600&display=swap',
array(),
null
);
}
add_action('wp_enqueue_scripts', 'mffo_load_google_fonts');
6. Custom Thank-You Page (Post-Donation)
Create a page at /thank-you. Add this Elementor HTML widget content to it:
<div style="text-align:center;padding:60px 20px;max-width:600px;margin:0 auto;">
<div style="font-size:64px;margin-bottom:24px;">🌳</div>
<h1 style="font-family:'Playfair Display',serif;color:#2D4A22;font-size:36px;margin-bottom:16px;">
Thank You for Believing in Families.
</h1>
<p style="font-family:'DM Sans',sans-serif;font-size:17px;color:#3A4A34;line-height:1.8;margin-bottom:28px;">
Your donation has been received. A Section 18A tax receipt will be emailed to you within 3 business days.
Together, we are building a world where every family thrives.
</p>
<p style="font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;color:#C8A44A;margin-bottom:32px;">
"Be Fruitful. Multiply. Reign with Love."
</p>
<a href="/" style="background:#2D4A22;color:white;padding:14px 32px;border-radius:8px;font-family:'DM Sans',sans-serif;font-weight:700;text-decoration:none;font-size:15px;">
Return to Home
</a>
<a href="/stories" style="background:#C8A44A;color:#1A2A14;padding:14px 32px;border-radius:8px;font-family:'DM Sans',sans-serif;font-weight:700;text-decoration:none;font-size:15px;margin-left:12px;">
Read Transformation Stories
</a>
</div>
Photography & Visual Content Guide
Free Stock Photo Sources (Use These)
| Source | URL | Best For | License |
|---|---|---|---|
| Unsplash | unsplash.com | Hero images, nature, community scenes | Free, no attribution required |
| Pexels | pexels.com | African families, community, diversity | Free, no attribution required |
| Nappy.co | nappy.co | Best for Black African families and communities — specifically curated | Free, no attribution required |
| Burst (Shopify) | burst.shopify.com | Community, education, health | Free commercial use |
| UNICEF Media | unicef.org/media | African children, community development (for editorial use) | Editorial use only — check each image |
Photo Specifications Per Page
Image Optimisation Rules
| Use Case | Max File Size | Dimensions | Format |
|---|---|---|---|
| Hero / full-width backgrounds | 200KB | 1920×1080px | JPG (not PNG) |
| Section images (2-column) | 100KB | 800×600px | JPG |
| Card / thumbnail images | 50KB | 600×400px | JPG |
| Logo / icons | 20KB | 500×200px | PNG (transparent bg) or SVG |
| Blog post featured images | 80KB | 1200×630px | JPG |
| Team/board photos | 60KB | 400×400px (square) | JPG |
Use Smush plugin to auto-compress on upload. Use squoosh.app (free, browser-based) to manually compress before uploading if needed.
The Master Prompt
BUILD SPECIFICATION: MY FAMILY FIRST ORGANIZATION NPC WEBSITE
==============================================================
Registration: CIPC 2025/914737/08 | Johannesburg, Gauteng, South Africa
Tagline: "Be Fruitful. Multiply. Reign with Love."
Stack: WordPress + Elementor Free + Astra Free Theme + Hostinger Business
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
BRAND SYSTEM
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Colors:
Primary (Earth Green): #2D4A22
Mid Green: #5A8C42
Harvest Gold: #C8A44A
Light Gold: #E8C875
Cream: #F7F2E8
Bark Brown: #6B4C2A
Sky Blue: #2A4A5E
Off-White: #FFFDF8
Dark text: #1A2A14
Fonts (Google Fonts — all free):
Display/Headings: Playfair Display (700, 900)
Body: DM Sans (400, 500, 600)
Quotes/Taglines: Cormorant Garamond (400 italic, 600 italic)
Button Styles:
Primary: BG #C8A44A, Text #1A2A14, hover #E8C875
Secondary: BG #2D4A22, Text #FFFDF8, hover #3D6B2E
Outline: BG transparent, Border 2px #C8A44A, Text #FFFDF8
Design feel: Warm authority. Vibrant but clean. African roots,
global vision. Professional but deeply human. NOT corporate.
Each page has a distinct feel within a consistent brand system.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SITE PURPOSE & STRATEGY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Primary audiences (EQUAL weight, separate pathways):
1. FAMILIES — need help, want to join a Family Circle
2. FUNDERS — donors, CSI managers, grant-makers
3. PARTNERS — NPOs, governments, businesses wanting to affiliate
Three conversion goals:
1. Family enrolment (Get Help form → staff follow-up within 48h)
2. Online donation (PayFast SA + PayPal international)
3. Affiliate enquiry (Join Network form → partnership meeting)
Homepage routes all three audiences within 10 seconds via a
3-button routing strip immediately below the hero section.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SITE MAP (12 pages, Phase 1)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
/ Homepage (ALL audiences, routing)
/about About Us (Funders + Partners)
/branches Our Branches (ALL)
/get-help Get Help (Families — enrolment)
/impact Our Impact (Funders + Partners)
/donate Fund Us / Donate (PayFast SA + Bank EFT)
/network Join the Network (Partners + Affiliates)
/careers Careers (Job seekers)
/stories Blog / Stories (ALL — SEO + social proof)
/contact Contact (ALL)
/members Member Portal (Staff + Affiliates — LOGIN REQUIRED)
/privacy Privacy Policy (POPIA compliance)
/governance Governance & Transparency (Funders + Governments)
/leadership-school Servant Leadership School (Leaders + Professionals)
/policy-lab Family Policy Lab (Governments + Researchers + Media)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
KEY ORGANISATION FACTS (for all content)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
The organisation addresses 6 primary family challenges:
A. Financial instability and poverty
B. Mental health and relational breakdown
C. Education and skills gaps
D. Physical health and nutrition deficits
E. Social isolation and lack of community safety nets
F. Ineffective local governance and advocacy access
It delivers through 7 semi-autonomous programme branches:
1. Family Wealth Branch (Challenge A)
2. Family Wellness Branch (Challenge B)
3. Family Learning Branch (Challenge C)
4. Family Health Branch (Challenge D)
5. Family Community Branch (Challenge E)
6. Family Voice Branch (Challenge F)
7. Family Multiply Branch (Network + replication)
Core delivery unit: The FAMILY CIRCLE — a structured group of
8–12 neighbouring families who meet weekly, support each other,
share resources, build financial resilience, and collectively
transform their neighbourhood. Facilitated by trained
Community Healing Stewards from within the community.
Original REIGN methodology: Root → Equip → Integrate →
Generate → Narrate (applied across all branches)
3-year impact target: 50% reduction in all 6 challenge areas
in pilot communities (measured by independent evaluators
using validated international indices)
Year 1 pilot: Gauteng communities (Johannesburg area)
Year 2: Pan-African (12 countries)
Year 3: Global (54+ countries via affiliate network)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PLUGINS (FREE ONLY)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Install in this order:
1. Astra (theme)
2. Elementor (page builder)
3. Really Simple SSL (force HTTPS)
4. Wordfence Security (firewall + 2FA)
5. LiteSpeed Cache (performance — Hostinger optimised)
6. Smush (image compression)
7. UpdraftPlus (backups to Google Drive)
8. Yoast SEO (search optimisation)
9. WPForms Lite (all contact + enrolment forms)
10. Paid Memberships Pro (member portal access control)
11. WP Job Manager (careers vacancies)
12. TablePress (data tables for impact + affiliate pages)
13. Contact Form 7 (newsletter signup only)
DO NOT install: Jetpack, WooCommerce, any slider plugin,
any plugin last updated 12+ months ago.
For donations: Use custom HTML/JS code (no paid plugin needed)
- PayFast (SA): merchant form with amount selector + all SA payment
methods (cards, instant EFT, SnapScan, Masterpass)
- Bank EFT: styled info block with tap-to-copy account number
and Section 18A receipt email instructions
- NO PayPal (SA-focused launch)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
CRITICAL DESIGN RULES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. NO poverty porn — all images must convey dignity and hope
2. Every page must have ONE primary CTA above the fold
3. WhatsApp float button on ALL pages (sitewide)
4. Mobile-first — majority of SA users are mobile
5. Homepage hero must load in under 3 seconds
6. Navigation: Logo left, primary links, DONATE button (gold) right
7. Audience routing strip immediately below every homepage hero
8. Footer: 4-column with legal details, social icons, registration numbers
9. All forms: connected to email notifications + auto-reply to enquirer
10. Section 18A receipt confirmation shown on all donation pathways
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
HOMEPAGE SECTION ORDER (exact)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. Full-screen hero (video or photo, dark overlay, 3 CTAs)
2. Audience routing strip (3 pathways: Help / Fund / Partner)
3. Impact numbers bar (4 animated counters, dark green BG)
4. The Problem section (2-column: photo + text)
5. Six challenges grid (3×2 card layout)
6. Family Circle explainer (dark green BG, 3-step flow)
7. Testimonial / transformation story (pull-quote, cream BG)
8. Three pathways (3-column: families, funders, partners)
9. Trust / registration strip (badges)
10. Email newsletter signup (dark green BG)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
TONE OF VOICE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
For families: Warm, simple, zero jargon. "You are not alone."
For funders: Confident, evidence-based, specific impact claims.
For partners: Visionary, strategic, movement-building language.
Overall: Warm authority. Never corporate. Never preachy.
Bold claims backed by specific evidence.
First-person and direct where possible.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PERFORMANCE TARGETS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Google PageSpeed (mobile): 90+
Google PageSpeed (desktop): 95+
Largest Contentful Paint: <2.5 seconds
All images: compressed, WebP where possible
Fonts: preloaded, display=swap
SSL: enforced sitewide
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
END OF MASTER PROMPT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Step-by-Step Build Order — 6–8 Week Comprehensive Plan
| Week | Days | Task | Time Est. |
|---|---|---|---|
| Week 1 | 1–2 | Hostinger: install WordPress, activate SSL, install all 13 plugins in order listed. Configure Wordfence (2FA, firewall). UpdraftPlus → Google Drive backup setup. | 4–5 hrs |
| 3 | Astra settings (colours, fonts, header, footer, buttons). Add Google Fonts code to child theme functions.php. Elementor global style kit. | 3–4 hrs | |
| 4–5 | Upload both logo PNG files. Implement logo in Astra header + sticky header + Elementor. Set favicon. Create social OG image. Build Header template + Footer template (4-column) in Elementor. | 4–5 hrs | |
| Week 2 | 6–9 | Build Homepage (all 10 sections). Add routing strip HTML code. Add WhatsApp float button code. Test all 3 CTA buttons. Mobile check homepage. | 7–9 hrs |
| 10 | Build About Us page. Write or place Founder story. Add Board member cards (placeholder photos until professional shots are taken). | 3–4 hrs | |
| Week 3 | 11–12 | Build Our Branches page (all 7 branches, REIGN Framework, social enterprise section). This is the longest page — allocate full time. | 6–8 hrs |
| 13–14 | Build Get Help page. Create WPForms enrolment form. Test form → email delivery. Build FAQ accordion. Add WhatsApp + phone alternative contact strip. | 4–5 hrs | |
| 15 | Build Our Impact page. TablePress measurement framework table. Animated counters. Progress bars. Research citation cards. | 4–5 hrs | |
| Week 4 | 16–17 | Build Fund Us / Donate page. Implement PayFast HTML code. Register PayFast merchant account (free at payfast.co.za) and replace placeholder credentials. Implement Bank EFT block code. Test PayFast sandbox. Build Thank You page. | 5–6 hrs |
| 18–19 | Build Join the Network page. Build Careers page + WP Job Manager setup. Post first 2 vacancies (or "No current vacancies — submit your CV" form). | 4–5 hrs | |
| 20 | Build Contact page. Create all WPForms contact forms (general, funder meeting, media). Embed Google Map. Test all forms. | 3–4 hrs | |
| Week 5 | 21–22 | Build Member Portal. Configure Paid Memberships Pro. Create member level. Build custom branded login page. Build member dashboard. Upload first 5 governance documents. Test login/logout/access restriction. | 5–6 hrs |
| 23–24 | Build Governance & Transparency page. Upload CIPC certificate, MOI summary. Create policy download placeholders. Legal registration cards. | 4–5 hrs | |
| 25 | Build Servant Leadership School page. Create application WPForm. Write programme description copy. | 3–4 hrs | |
| Week 6 | 26–27 | Build Family Policy Lab page. Ubuntu Index™ preview section. Government partnership CTA. Policy Lab Bulletin newsletter signup (separate Mailchimp list). | 4–5 hrs |
| 28–29 | Build Privacy Policy page (use a POPIA-compliant template, customise for MFFO). Write and publish first 5 blog posts in /stories. | 5–6 hrs | |
| 30 | Yoast SEO: set title, meta description, focus keyword, and OG image for ALL 15 pages. Submit XML sitemap to Google Search Console. | 3–4 hrs | |
| Week 7 | 31–32 | Full mobile responsiveness audit — check every page on mobile phone (not just browser). Fix any text overflow, button sizing, image breaks, form usability issues. | 4–5 hrs |
| 33–34 | Speed optimisation: LiteSpeed Cache full configuration (page cache, browser cache, image lazy load, CSS/JS minification). Smush bulk compress all images. Test: Google PageSpeed target 90+ mobile. | 3–4 hrs | |
| 35 | End-to-end user journey testing: complete all 3 conversion funnels as a test user. Test every form, every download, every button. Fix all broken links. | 3–4 hrs | |
| Week 8 | 36–37 | Install and configure Google Analytics 4. Set up conversion tracking for: form submissions (all), PayFast donation clicks, newsletter signups, PDF downloads. Verify tracking in GA4. | 3–4 hrs |
| 38–39 | Final content review: proofread all 15 pages. Check all registration numbers are correct. Replace all [PLACEHOLDER] text. Ensure all forms have correct email recipients. | 4–5 hrs | |
| 40 | LAUNCH DAY: Final backup. Announce on all social media platforms. Send email to network. Submit URL to Google: Search Console → Request indexing for all 15 pages. | 2–3 hrs |