# DMG One-Scroll Website — Builder Brief

**Goal:** Build a **high-end, glossy, minimalistic, chic** **single-scroll** website for **Diverse Minds Group (DMG)** that blends **business solutions** with **community impact (CSI)**. I’ll paste the full content map next—this brief is to set structure, styles, and components.

## Core Requirements

* **Single-page** layout with **sticky top nav** and **smooth anchor scrolling** to sections.
* **Section order:** Hero → About (accordion) → Business Solutions → CSI → Impact → Partners → CTA/Contact.
* **Interactive accordion** in “About DMG” (closed by default, smooth expand/collapse).
* **Impact counters** (animated numbers).
* **Contact form** (Name, Email, Message → send to [diversemindsgroup@gmail.com](mailto:diversemindsgroup@gmail.com)).
* **WhatsApp click-to-chat** CTA for CSI: `https://wa.me/27719932237`.
* **Partner links:** OtidiAfrica ([https://otidiafrica.co.za/](https://otidiafrica.co.za/)), Mbalo ([https://mbalo.co.za/](https://mbalo.co.za/)), Biko Today ([https://bikotoday.co.za/](https://bikotoday.co.za/)).
* **Footer socials only:**

* Facebook: [https://www.facebook.com/DiverseMindsGroup](https://www.facebook.com/DiverseMindsGroup)
* YouTube: [https://youtube.com/@diversemindsgroup?si=lJgY30hqsA7nEyiX](https://youtube.com/@diversemindsgroup?si=lJgY30hqsA7nEyiX)
* WhatsApp Channel: [https://whatsapp.com/channel/0029VasIYFdDeON2HyUJWQ1I](https://whatsapp.com/channel/0029VasIYFdDeON2HyUJWQ1I)

## Visual Style (implement globally)

* **Palette:** White `#FFFFFF`, Off-White `#F9F9F9`, Gold `#FFD503` (hover gradient `#E6B800 → #FFD503`), Charcoal `#1A1A1A`, Graphite `#4D4D4D`, Silver `#C4C4C4`. (Optional accent Coral `#FF5A5F` used sparingly.)
* **Typography:**

* Headings: *Playfair Display* (serif, bold/semibold).
* Body: *Lato* or *Montserrat* (regular/medium).
* Quotes/pull text: *Cormorant Garamond* (sparingly).
* **Aesthetic:** Premium editorial, lots of whitespace, subtle hover/fade reveals, chic icons, soft shadows, 8px rounded buttons.
* **Buttons:** Primary = Gold background, black text, gradient hover, rounded 8px.

## Accessibility & Contrast (mandatory)

* **Dynamic contrast rule:** If a section or hero uses a **dark background** (image or color overlay), automatically render **text as white** or another **WCAG-AA compliant contrasting colour**. Ensure links and buttons also meet contrast. Apply the same rule to accordion headers and counters when backgrounds change.
* All interactive elements must be **keyboard navigable** and **focus-visible**.

## Performance & SEO

* Mobile-first responsive build.
* Optimise images (modern formats, lazy-loading).
* Semantic HTML5 structure; add meta title/description.
* Add basic schema where sensible (Organization).

## Components to include

* **Sticky nav** with anchors to each section.
* **Hero** with two CTAs: “Explore Business Solutions” and “Explore Community Impact (CSI)”.
* **About DMG**: Accordion (4 items: Story, Vision, Mission, Values).
* **Services grid** with chic icons.
* **CSI** block with 3 pillars and **WhatsApp CTA**.
* **Impact** animated counters + case-study cards.
* **Partners** logo strip with outbound links.
* **Contact** block with form + direct contact lines + socials.

## Acceptance Criteria

* Single page, smooth scroll, no secondary pages.
* Accordion works on mobile and desktop; only one panel open at a time.
* Contrast rule auto-applies on any dark area (hero, overlays, images).
* Counters animate on first viewport entry (once).
* Form validates required fields and shows success/fail messages.
* Footer shows only the 3 specified social links.


---

# **DMG One-Scroll Website Content Map**

---

## **1. Hero Banner**

**Tagline (large font):**
*Where African Talent Meets Global Opportunity.*

**Subtext (smaller font):**
DMG is a women-led, innovative and impact-driven enterprise bridging **business empowerment** with **community development**.

**Buttons:**

* *Explore Business Solutions*
* *Explore Community Impact (CSI)*

---

## **2. About DMG (Accordion Section)**

**Heading:** *About Us*

**Subheading:** *Our Story, Vision, Mission & Values*

**Accordion 1: Ashley’s Story & Leadership**
Ashley Khabana is a dynamic South African entrepreneur and the Founder & Director of Diverse Minds Group (DMG). Her journey began in Sibasa, volunteering with the Light of God Ministry in 2015/16, where she supported over 20 children from pre-primary to grade 8. This experience proved to her the **power of education, mentorship, and compassion** in transforming lives.

Her career spans **Shell, Amazon, guesthouse management, event coordination, programme leadership and community engagement**. Alongside her work, she has pursued certifications in **TEFL, debt counselling, cybersecurity**, and is currently studying **Full Stack Development**.

Ashley founded DMG as an **ecosystem of empowerment**, integrating business solutions with social impact.

Leadership highlights include:

* Secretary, **Vhembe District Executive Committee (Writers, Books & Publishers)**.
* Programme Director, **World Book Day 2024**.
* Speaker, **Impower’d Women’s Conference (2025)** on AI & 4IR.
* Mentor and TEFL facilitator for youth entering global work opportunities.

Ashley believes that **business and social good are inseparable**. Under her leadership, DMG stands as the platform where **African talent meets global opportunity**.

---

**Accordion 2: Vision**
To be a **leading force in Africa for personal transformation, community empowerment, and sustainable impact** through education, creativity, and innovation.

Ashley envisions:

* Expanding **digital literacy, AI integration, and brand readiness** into BRICS/global markets.
* Building **creative industry ecosystems** to connect African entrepreneurs with global markets.
* Cultivating resilient communities led by women and youth.
* Ensuring transformation becomes a **shared reality for all**, not a privilege.

---

**Accordion 3: Mission**
To **develop empowered, self-reliant individuals and communities** by providing access to mentorship, literature, technology, and inclusive skills development.

This mission comes alive through:

* Supporting SMEs with compliance, branding, and growth tools.
* Guiding authors and creatives to self-publish and share globally.
* Equipping youth with mentorship and career readiness.
* Advocating for GBV and mental health healing programmes.
* Connecting African talent to **global networks** like BRICS.

---

**Accordion 4: Core Values**

* **Empowerment** – Unlocking human potential with tools & mentorship.
* **Inclusion** – Celebrating diversity and amplifying marginalised voices.
* **Innovation** – Leveraging technology, AI and creativity for growth.
* **Integrity** – Upholding fairness and transparency in all work.
* **Impact** – Driving measurable change in business and community.

---

## **3. DMG Business Solutions**

**Section Header:** *DMG Business Solutions*
**Subtext:** Helping entrepreneurs, SMEs, and creatives unlock growth with professional services.

**Services List (with chic icons):**

* Virtual Assistants & Customer Operations
* Documents & Compliance (SOPs, profiles, ATS optimisation, policies)
* Books & Publishing (editing, self-publishing, Amazon/Kindle)
* Branding & Design
* Social Media Management
* IT & Business Automation
* **OtidiAfrica Partnership** → [https://otidiafrica.co.za/](https://otidiafrica.co.za/)
* **Mbalo Accounting Partnership** → [https://mbalo.co.za/](https://mbalo.co.za/)
* **Biko Today Partnership** → [https://bikotoday.co.za/](https://bikotoday.co.za/) *(DMG student training & SME workforce supplier/supporting services partner)*

---

## **4. DMG CSI (Community & Social Impact)**

**Section Header:** *DMG CSI – Empowering Minds. Inspiring Change. Building Futures.*

**Intro:**
DMG CSI is the heart of our community work. We believe that **literature, empowerment, and skills development** are powerful tools for transformation.

**Objectives:**

* Promote literacy & creative expression.
* Empower women, youth & marginalised groups.
* Drive inclusion & celebrate culture.
* Champion GBV and mental health awareness.
* Foster nation building & civic engagement.

**3 Pillars (visual blocks):**

* *Arts, Sports & Culture*
* *Empowerment & Development (skills, mentorship, self-development)*
* *Reading/Book Club (storytelling, literacy, publishing)*

**Projects (short bullets):**

* DMG Reading Club at Thulamela Library.
* Women’s Day Empowerment Conference (2025).
* Youth Sporting Events (soccer, basketball, chess, netball).
* Mentorship for young authors (publishing on Kindle).
* Branding & visibility support for women-owned businesses.

**CTA Button → WhatsApp:**
👉 [https://wa.me/27719932237](https://wa.me/27719932237)

---

## **5. Impact & Achievements**

**Section Header:** *Impact at a Glance*

**Animated Stats:**

* 500+ SMEs supported
* 100+ youth literacy participants
* Authors published globally
* TEFL teachers placed internationally

**Case Study Cards:**

* World Book Day Celebration 2024
* Empowerfest Youth Conference
* Vhembe District GBVF & Literacy Committees

---

## **6. Partners & Collaborations**

**Header:** *Our Partners*

Logos + Short blurbs with links:

* **OtidiAfrica** – Tech, branding & automation partner → [https://otidiafrica.co.za/](https://otidiafrica.co.za/)
* **Mbalo Accounting** – Finance, compliance & payroll partner → [https://mbalo.co.za/](https://mbalo.co.za/)
* **Biko Today** – Student training & SME workforce supplier/support services partner → [https://bikotoday.co.za/](https://bikotoday.co.za/)
* Libraries, schools, DSAC & NYDA collaborations.

---

## **7. Call to Action / Contact Us**

**Header:** *Join Us in Building Futures*

**Text:**
Whether you are an entrepreneur, community leader, funder, or volunteer, DMG is your partner in creating sustainable impact.

**Buttons:**

* Work with Us
* Volunteer
* Join Reading Club

**Contact Form:**

* Name
* Email
* Message → send to [diversemindsgroup@gmail.com](mailto:diversemindsgroup@gmail.com)

**Direct Contact:**

* 📧 [diversemindsgroup@gm

README.md

@@ -1,10 +1,12 @@
 ---
-title: Dmg
-emoji: 🐠
-colorFrom: blue
-colorTo: purple
+title: dmg
+emoji: 🐳
+colorFrom: yellow
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,741 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Diverse Minds Group - Where African Talent Meets Global Opportunity</title>
+    <meta name="description" content="DMG is a women-led, innovative and impact-driven enterprise bridging business empowerment with community development.">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Lato:wght@300;400;500;700&family=Cormorant+Garamond:wght@500;600&display=swap" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'gold': '#FFD503',
+                        'gold-dark': '#E6B800',
+                        'charcoal': '#1A1A1A',
+                        'graphite': '#4D4D4D',
+                        'silver': '#C4C4C4',
+                        'coral': '#FF5A5F',
+                    },
+                    fontFamily: {
+                        'playfair': ['Playfair Display', 'serif'],
+                        'lato': ['Lato', 'sans-serif'],
+                        'cormorant': ['Cormorant Garamond', 'serif'],
+                    },
+                    animation: {
+                        'count-up': 'count-up 2s ease-out forwards',
+                    },
+                    keyframes: {
+                        'count-up': {
+                            '0%': { opacity: '0', transform: 'translateY(20px)' },
+                            '100%': { opacity: '1', transform: 'translateY(0)' },
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        html {
+            scroll-behavior: smooth;
+        }
+        body {
+            font-family: 'Lato', sans-serif;
+            color: #1A1A1A;
+        }
+        .bg-gradient-gold {
+            background: linear-gradient(135deg, #E6B800 0%, #FFD503 100%);
+        }
+        .hover\:bg-gradient-gold:hover {
+            background: linear-gradient(135deg, #E6B800 0%, #FFD503 100%);
+        }
+        .accordion-content {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease-out;
+        }
+        .accordion.active .accordion-content {
+            max-height: 1000px;
+            transition: max-height 0.5s ease-in;
+        }
+        .accordion-toggle::after {
+            content: '+';
+            transition: transform 0.3s ease;
+        }
+        .accordion.active .accordion-toggle::after {
+            content: '-';
+        }
+        .counter {
+            opacity: 0;
+        }
+        .counter.animated {
+            animation: count-up 2s ease-out forwards;
+        }
+        .shadow-soft {
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+        }
+        .dark-section {
+            background-color: #1A1A1A;
+            color: #FFFFFF;
+        }
+        .dark-section a, .dark-section h2, .dark-section h3 {
+            color: #FFFFFF;
+        }
+        .dark-section .text-gold {
+            color: #FFD503;
+        }
+        .hero-overlay {
+            background: rgba(26, 26, 26, 0.3);
+        }
+        .nav-scrolled {
+            background-color: rgba(255, 255, 255, 0.95);
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+    </style>
+</head>
+<body class="bg-white">
+    <!-- Navigation -->
+    <header class="fixed w-full z-50 transition-all duration-300" id="navbar">
+        <div class="container mx-auto px-6 py-4">
+            <div class="flex justify-between items-center">
+                <a href="#" class="text-2xl font-bold font-playfair text-charcoal">DMG</a>
+                <nav class="hidden md:flex space-x-8">
+                    <a href="#about" class="text-graphite hover:text-gold transition">About</a>
+                    <a href="#solutions" class="text-graphite hover:text-gold transition">Business Solutions</a>
+                    <a href="#csi" class="text-graphite hover:text-gold transition">CSI</a>
+                    <a href="#impact" class="text-graphite hover:text-gold transition">Impact</a>
+                    <a href="#partners" class="text-graphite hover:text-gold transition">Partners</a>
+                    <a href="#contact" class="text-graphite hover:text-gold transition">Contact</a>
+                </nav>
+                <button class="md:hidden focus:outline-none" id="mobile-menu-button">
+                    <i data-feather="menu"></i>
+                </button>
+            </div>
+        </div>
+        <!-- Mobile Menu -->
+        <div class="md:hidden hidden bg-white w-full px-6 py-4 shadow-md" id="mobile-menu">
+            <div class="flex flex-col space-y-4">
+                <a href="#about" class="text-graphite hover:text-gold transition">About</a>
+                <a href="#solutions" class="text-graphite hover:text-gold transition">Business Solutions</a>
+                <a href="#csi" class="text-graphite hover:text-gold transition">CSI</a>
+                <a href="#impact" class="text-graphite hover:text-gold transition">Impact</a>
+                <a href="#partners" class="text-graphite hover:text-gold transition">Partners</a>
+                <a href="#contact" class="text-graphite hover:text-gold transition">Contact</a>
+            </div>
+        </div>
+    </header>
+
+    <!-- Hero Section -->
+    <section class="relative h-screen flex items-center justify-center bg-cover bg-center" style="background-image: url('http://static.photos/education/1200x630/1');">
+        <div class="hero-overlay absolute inset-0"></div>
+        <div class="container mx-auto px-6 z-10 text-center text-white">
+            <h1 class="text-4xl md:text-6xl font-bold font-playfair mb-6" data-aos="fade-up">Where African Talent Meets Global Opportunity</h1>
+            <p class="text-xl md:text-2xl mb-12 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">DMG is a women-led, innovative and impact-driven enterprise bridging <span class="font-semibold">business empowerment</span> with <span class="font-semibold">community development</span>.</p>
+            <div class="flex flex-col sm:flex-row justify-center gap-4" data-aos="fade-up" data-aos-delay="200">
+                <a href="#solutions" class="bg-gold hover:bg-gradient-gold text-charcoal font-bold py-3 px-8 rounded-lg transition duration-300">Explore Business Solutions</a>
+                <a href="#csi" class="bg-transparent hover:bg-white hover:text-charcoal text-white font-bold py-3 px-8 border-2 border-white rounded-lg transition duration-300">Explore Community Impact</a>
+            </div>
+        </div>
+    </section>
+
+    <!-- About Section -->
+    <section id="about" class="py-20 bg-white">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold font-playfair mb-4">About Us</h2>
+                <p class="text-xl text-graphite max-w-3xl mx-auto">Our Story, Vision, Mission & Values</p>
+            </div>
+            
+            <div class="max-w-4xl mx-auto">
+                <!-- Accordion Item 1 -->
+                <div class="accordion mb-4 border rounded-lg overflow-hidden shadow-soft" data-aos="fade-up">
+                    <button class="accordion-toggle w-full text-left p-6 bg-offwhite hover:bg-gray-50 flex justify-between items-center font-bold font-playfair text-xl">
+                        Ashley's Story & Leadership
+                        <span class="text-2xl">+</span>
+                    </button>
+                    <div class="accordion-content">
+                        <div class="p-6 pt-0">
+                            <p class="mb-4">Ashley Khabana is a dynamic South African entrepreneur and the Founder & Director of Diverse Minds Group (DMG). Her journey began in Sibasa, volunteering with the Light of God Ministry in 2015/16, where she supported over 20 children from pre-primary to grade 8. This experience proved to her the <span class="font-semibold">power of education, mentorship, and compassion</span> in transforming lives.</p>
+                            <p class="mb-4">Her career spans <span class="font-semibold">Shell, Amazon, guesthouse management, event coordination, programme leadership and community engagement</span>. Alongside her work, she has pursued certifications in <span class="font-semibold">TEFL, debt counselling, cybersecurity</span>, and is currently studying <span class="font-semibold">Full Stack Development</span>.</p>
+                            <p class="mb-4">Ashley founded DMG as an <span class="font-semibold">ecosystem of empowerment</span>, integrating business solutions with social impact.</p>
+                            <p class="font-semibold mb-2">Leadership highlights include:</p>
+                            <ul class="list-disc pl-6 mb-4">
+                                <li>Secretary, <span class="font-semibold">Vhembe District Executive Committee (Writers, Books & Publishers)</span>.</li>
+                                <li>Programme Director, <span class="font-semibold">World Book Day 2024</span>.</li>
+                                <li>Speaker, <span class="font-semibold">Impower'd Women's Conference (2025)</span> on AI & 4IR.</li>
+                                <li>Mentor and TEFL facilitator for youth entering global work opportunities.</li>
+                            </ul>
+                            <p>Ashley believes that <span class="font-semibold">business and social good are inseparable</span>. Under her leadership, DMG stands as the platform where <span class="font-semibold">African talent meets global opportunity</span>.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Accordion Item 2 -->
+                <div class="accordion mb-4 border rounded-lg overflow-hidden shadow-soft" data-aos="fade-up">
+                    <button class="accordion-toggle w-full text-left p-6 bg-offwhite hover:bg-gray-50 flex justify-between items-center font-bold font-playfair text-xl">
+                        Vision
+                        <span class="text-2xl">+</span>
+                    </button>
+                    <div class="accordion-content">
+                        <div class="p-6 pt-0">
+                            <p class="mb-4">To be a <span class="font-semibold">leading force in Africa for personal transformation, community empowerment, and sustainable impact</span> through education, creativity, and innovation.</p>
+                            <p class="font-semibold mb-2">Ashley envisions:</p>
+                            <ul class="list-disc pl-6">
+                                <li>Expanding <span class="font-semibold">digital literacy, AI integration, and brand readiness</span> into BRICS/global markets.</li>
+                                <li>Building <span class="font-semibold">creative industry ecosystems</span> to connect African entrepreneurs with global markets.</li>
+                                <li>Cultivating resilient communities led by women and youth.</li>
+                                <li>Ensuring transformation becomes a <span class="font-semibold">shared reality for all</span>, not a privilege.</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Accordion Item 3 -->
+                <div class="accordion mb-4 border rounded-lg overflow-hidden shadow-soft" data-aos="fade-up">
+                    <button class="accordion-toggle w-full text-left p-6 bg-offwhite hover:bg-gray-50 flex justify-between items-center font-bold font-playfair text-xl">
+                        Mission
+                        <span class="text-2xl">+</span>
+                    </button>
+                    <div class="accordion-content">
+                        <div class="p-6 pt-0">
+                            <p class="mb-4">To <span class="font-semibold">develop empowered, self-reliant individuals and communities</span> by providing access to mentorship, literature, technology, and inclusive skills development.</p>
+                            <p class="font-semibold mb-2">This mission comes alive through:</p>
+                            <ul class="list-disc pl-6 mb-4">
+                                <li>Supporting SMEs with compliance, branding, and growth tools.</li>
+                                <li>Guiding authors and creatives to self-publish and share globally.</li>
+                                <li>Equipping youth with mentorship and career readiness.</li>
+                                <li>Advocating for GBV and mental health healing programmes.</li>
+                                <li>Connecting African talent to <span class="font-semibold">global networks</span> like BRICS.</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Accordion Item 4 -->
+                <div class="accordion mb-4 border rounded-lg overflow-hidden shadow-soft" data-aos="fade-up">
+                    <button class="accordion-toggle w-full text-left p-6 bg-offwhite hover:bg-gray-50 flex justify-between items-center font-bold font-playfair text-xl">
+                        Core Values
+                        <span class="text-2xl">+</span>
+                    </button>
+                    <div class="accordion-content">
+                        <div class="p-6 pt-0">
+                            <div class="grid md:grid-cols-2 gap-6">
+                                <div class="bg-offwhite p-6 rounded-lg">
+                                    <h3 class="font-bold text-lg mb-2 text-gold">Empowerment</h3>
+                                    <p>Unlocking human potential with tools & mentorship.</p>
+                                </div>
+                                <div class="bg-offwhite p-6 rounded-lg">
+                                    <h3 class="font-bold text-lg mb-2 text-gold">Inclusion</h3>
+                                    <p>Celebrating diversity and amplifying marginalised voices.</p>
+                                </div>
+                                <div class="bg-offwhite p-6 rounded-lg">
+                                    <h3 class="font-bold text-lg mb-2 text-gold">Innovation</h3>
+                                    <p>Leveraging technology, AI and creativity for growth.</p>
+                                </div>
+                                <div class="bg-offwhite p-6 rounded-lg">
+                                    <h3 class="font-bold text-lg mb-2 text-gold">Integrity</h3>
+                                    <p>Upholding fairness and transparency in all work.</p>
+                                </div>
+                                <div class="bg-offwhite p-6 rounded-lg">
+                                    <h3 class="font-bold text-lg mb-2 text-gold">Impact</h3>
+                                    <p>Driving measurable change in business and community.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Business Solutions Section -->
+    <section id="solutions" class="py-20 bg-offwhite">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold font-playfair mb-4">DMG Business Solutions</h2>
+                <p class="text-xl text-graphite max-w-3xl mx-auto">Helping entrepreneurs, SMEs, and creatives unlock growth with professional services.</p>
+            </div>
+
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8" data-aos="fade-up">
+                <!-- Service 1 -->
+                <div class="bg-white p-8 rounded-lg shadow-soft hover:shadow-lg transition duration-300">
+                    <div class="text-gold mb-4">
+                        <i data-feather="users" class="w-10 h-10"></i>
+                    </div>
+                    <h3 class="text-xl font-bold font-playfair mb-3">Virtual Assistants & Customer Operations</h3>
+                    <p class="text-graphite">Professional support for your business operations and customer service needs.</p>
+                </div>
+
+                <!-- Service 2 -->
+                <div class="bg-white p-8 rounded-lg shadow-soft hover:shadow-lg transition duration-300">
+                    <div class="text-gold mb-4">
+                        <i data-feather="file-text" class="w-10 h-10"></i>
+                    </div>
+                    <h3 class="text-xl font-bold font-playfair mb-3">Documents & Compliance</h3>
+                    <p class="text-graphite">SOPs, profiles, ATS optimisation, policies and other essential business documents.</p>
+                </div>
+
+                <!-- Service 3 -->
+                <div class="bg-white p-8 rounded-lg shadow-soft hover:shadow-lg transition duration-300">
+                    <div class="text-gold mb-4">
+                        <i data-feather="book" class="w-10 h-10"></i>
+                    </div>
+                    <h3 class="text-xl font-bold font-playfair mb-3">Books & Publishing</h3>
+                    <p class="text-graphite">Editing, self-publishing, Amazon/Kindle distribution for authors.</p>
+                </div>
+
+                <!-- Service 4 -->
+                <div class="bg-white p-8 rounded-lg shadow-soft hover:shadow-lg transition duration-300">
+                    <div class="text-gold mb-4">
+                        <i data-feather="pen-tool" class="w-10 h-10"></i>
+                    </div>
+                    <h3 class="text-xl font-bold font-playfair mb-3">Branding & Design</h3>
+                    <p class="text-graphite">Professional branding and design services to elevate your business.</p>
+                </div>
+
+                <!-- Service 5 -->
+                <div class="bg-white p-8 rounded-lg shadow-soft hover:shadow-lg transition duration-300">
+                    <div class="text-gold mb-4">
+                        <i data-feather="share-2" class="w-10 h-10"></i>
+                    </div>
+                    <h3 class="text-xl font-bold font-playfair mb-3">Social Media Management</h3>
+                    <p class="text-graphite">Strategic social media management to grow your online presence.</p>
+                </div>
+
+                <!-- Service 6 -->
+                <div class="bg-white p-8 rounded-lg shadow-soft hover:shadow-lg transition duration-300">
+                    <div class="text-gold mb-4">
+                        <i data-feather="code" class="w-10 h-10"></i>
+                    </div>
+                    <h3 class="text-xl font-bold font-playfair mb-3">IT & Business Automation</h3>
+                    <p class="text-graphite">Technology solutions to streamline and automate your business processes.</p>
+                </div>
+            </div>
+
+            <div class="mt-16">
+                <h3 class="text-2xl font-bold font-playfair mb-8 text-center">Our Valued Partners</h3>
+                <div class="grid md:grid-cols-3 gap-8" data-aos="fade-up">
+                    <div class="bg-white p-6 rounded-lg shadow-soft text-center">
+                        <h4 class="font-bold text-xl mb-3">OtidiAfrica</h4>
+                        <p class="mb-4">Tech, branding & automation partner</p>
+                        <a href="https://otidiafrica.co.za/" target="_blank" class="text-gold hover:text-gold-dark font-bold">Visit Website →</a>
+                    </div>
+                    <div class="bg-white p-6 rounded-lg shadow-soft text-center">
+                        <h4 class="font-bold text-xl mb-3">Mbalo Accounting</h4>
+                        <p class="mb-4">Finance, compliance & payroll partner</p>
+                        <a href="https://mbalo.co.za/" target="_blank" class="text-gold hover:text-gold-dark font-bold">Visit Website →</a>
+                    </div>
+                    <div class="bg-white p-6 rounded-lg shadow-soft text-center">
+                        <h4 class="font-bold text-xl mb-3">Biko Today</h4>
+                        <p class="mb-4">Student training & SME workforce supplier</p>
+                        <a href="https://bikotoday.co.za/" target="_blank" class="text-gold hover:text-gold-dark font-bold">Visit Website →</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- CSI Section -->
+    <section id="csi" class="py-20 dark-section">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold font-playfair mb-4">DMG CSI</h2>
+                <h3 class="text-2xl text-gold mb-2">Empowering Minds. Inspiring Change. Building Futures.</h3>
+                <p class="text-xl text-silver max-w-3xl mx-auto">DMG CSI is the heart of our community work. We believe that <span class="text-gold">literature, empowerment, and skills development</span> are powerful tools for transformation.</p>
+            </div>
+
+            <div class="mb-12">
+                <h4 class="text-2xl font-bold font-playfair mb-6 text-center">Objectives</h4>
+                <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4" data-aos="fade-up">
+                    <div class="bg-charcoal p-6 rounded-lg border border-graphite">
+                        <i data-feather="book-open" class="w-8 h-8 text-gold mb-3"></i>
+                        <p>Promote literacy & creative expression</p>
+                    </div>
+                    <div class="bg-charcoal p-6 rounded-lg border border-graphite">
+                        <i data-feather="users" class="w-8 h-8 text-gold mb-3"></i>
+                        <p>Empower women, youth & marginalised groups</p>
+                    </div>
+                    <div class="bg-charcoal p-6 rounded-lg border border-graphite">
+                        <i data-feather="globe" class="w-8 h-8 text-gold mb-3"></i>
+                        <p>Drive inclusion & celebrate culture</p>
+                    </div>
+                    <div class="bg-charcoal p-6 rounded-lg border border-graphite">
+                        <i data-feather="heart" class="w-8 h-8 text-gold mb-3"></i>
+                        <p>Champion GBV and mental health awareness</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="mb-16">
+                <h4 class="text-2xl font-bold font-playfair mb-6 text-center">3 Pillars of Our Work</h4>
+                <div class="grid md:grid-cols-3 gap-6" data-aos="fade-up">
+                    <div class="bg-charcoal p-8 rounded-lg border border-graphite text-center">
+                        <div class="text-gold mb-4">
+                            <i data-feather="award" class="w-10 h-10 mx-auto"></i>
+                        </div>
+                        <h3 class="text-xl font-bold font-playfair mb-3">Arts, Sports & Culture</h3>
+                        <p class="text-silver">Promoting creative expression and cultural activities</p>
+                    </div>
+                    <div class="bg-charcoal p-8 rounded-lg border border-graphite text-center">
+                        <div class="text-gold mb-4">
+                            <i data-feather="trending-up" class="w-10 h-10 mx-auto"></i>
+                        </div>
+                        <h3 class="text-xl font-bold font-playfair mb-3">Empowerment & Development</h3>
+                        <p class="text-silver">Skills, mentorship, and self-development programs</p>
+                    </div>
+                    <div class="bg-charcoal p-8 rounded-lg border border-graphite text-center">
+                        <div class="text-gold mb-4">
+                            <i data-feather="book-open" class="w-10 h-10 mx-auto"></i>
+                        </div>
+                        <h3 class="text-xl font-bold font-playfair mb-3">Reading/Book Club</h3>
+                        <p class="text-silver">Storytelling, literacy, and publishing initiatives</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="mb-16">
+                <h4 class="text-2xl font-bold font-playfair mb-6 text-center">Our Projects</h4>
+                <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4" data-aos="fade-up">
+                    <div class="bg-charcoal p-6 rounded-lg border border-graphite">
+                        <p>DMG Reading Club at Thulamela Library</p>
+                    </div>
+                    <div class="bg-charcoal p-6 rounded-lg border border-graphite">
+                        <p>Women's Day Empowerment Conference (2025)</p>
+                    </div>
+                    <div class="bg-charcoal p-6 rounded-lg border border-graphite">
+                        <p>Youth Sporting Events (soccer, basketball, chess, netball)</p>
+                    </div>
+                    <div class="bg-charcoal p-6 rounded-lg border border-graphite">
+                        <p>Mentorship for young authors (publishing on Kindle)</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="text-center">
+                <a href="https://wa.me/27719932237" class="bg-gold hover:bg-gradient-gold text-charcoal font-bold py-3 px-8 rounded-lg inline-flex items-center transition duration-300" data-aos="fade-up">
+                    <i data-feather="message-circle" class="mr-2"></i> Chat with us on WhatsApp
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Impact Section -->
+    <section id="impact" class="py-20 bg-white">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold font-playfair mb-4">Impact at a Glance</h2>
+            </div>
+
+            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16" data-aos="fade-up">
+                <div class="text-center">
+                    <div class="text-5xl font-bold font-playfair text-gold mb-2 counter" data-count="500">0</div>
+                    <p class="text-xl">SMEs supported</p>
+                </div>
+                <div class="text-center">
+                    <div class="text-5xl font-bold font-playfair text-gold mb-2 counter" data-count="100">0</div>
+                    <p class="text-xl">Youth literacy participants</p>
+                </div>
+                <div class="text-center">
+                    <div class="text-5xl font-bold font-playfair text-gold mb-2 counter" data-count="25">0</div>
+                    <p class="text-xl">Authors published globally</p>
+                </div>
+                <div class="text-center">
+                    <div class="text-5xl font-bold font-playfair text-gold mb-2 counter" data-count="50">0</div>
+                    <p class="text-xl">TEFL teachers placed internationally</p>
+                </div>
+            </div>
+
+            <h3 class="text-2xl font-bold font-playfair mb-8 text-center">Notable Case Studies</h3>
+            <div class="grid md:grid-cols-3 gap-8" data-aos="fade-up">
+                <div class="bg-offwhite p-8 rounded-lg shadow-soft">
+                    <h4 class="text-xl font-bold font-playfair mb-3">World Book Day Celebration 2024</h4>
+                    <p class="text-graphite mb-4">A successful event promoting literacy and reading culture in our community.</p>
+                    <div class="flex justify-center">
+                        <img src="http://static.photos/education/640x360/1" alt="World Book Day" class="rounded-lg max-w-full">
+                    </div>
+                </div>
+                <div class="bg-offwhite p-8 rounded-lg shadow-soft">
+                    <h4 class="text-xl font-bold font-playfair mb-3">Empowerfest Youth Conference</h4>
+                    <p class="text-graphite mb-4">Inspiring and equipping young people with skills for the future.</p>
+                    <div class="flex justify-center">
+                        <img src="http://static.photos/education/640x360/2" alt="Empowerfest" class="rounded-lg max-w-full">
+                    </div>
+                </div>
+                <div class="bg-offwhite p-8 rounded-lg shadow-soft">
+                    <h4 class="text-xl font-bold font-playfair mb-3">Vhembe District GBVF & Literacy Committees</h4>
+                    <p class="text-graphite mb-4">Working to address gender-based violence and promote literacy.</p>
+                    <div class="flex justify-center">
+                        <img src="http://static.photos/education/640x360/3" alt="GBVF Committee" class="rounded-lg max-w-full">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Partners Section -->
+    <section id="partners" class="py-20 bg-offwhite">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold font-playfair mb-4">Our Partners</h2>
+            </div>
+
+            <div class="grid md:grid-cols-3 gap-12 items-center" data-aos="fade-up">
+                <div class="flex justify-center">
+                    <a href="https://otidiafrica.co.za/" target="_blank" class="hover:opacity-80 transition">
+                        <img src="http://static.photos/technology/640x360/1" alt="OtidiAfrica" class="h-20">
+                        <p class="text-center mt-4">Tech, branding & automation partner</p>
+                    </a>
+                </div>
+                <div class="flex justify-center">
+                    <a href="https://mbalo.co.za/" target="_blank" class="hover:opacity-80 transition">
+                        <img src="http://static.photos/finance/640x360/1" alt="Mbalo Accounting" class="h-20">
+                        <p class="text-center mt-4">Finance, compliance & payroll partner</p>
+                    </a>
+                </div>
+                <div class="flex justify-center">
+                    <a href="https://bikotoday.co.za/" target="_blank" class="hover:opacity-80 transition">
+                        <img src="http://static.photos/education/640x360/4" alt="Biko Today" class="h-20">
+                        <p class="text-center mt-4">Student training & SME workforce supplier</p>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Contact Section -->
+    <section id="contact" class="py-20 dark-section">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold font-playfair mb-4">Join Us in Building Futures</h2>
+                <p class="text-xl text-silver max-w-3xl mx-auto">Whether you are an entrepreneur, community leader, funder, or volunteer, DMG is your partner in creating sustainable impact.</p>
+            </div>
+
+            <div class="flex flex-col lg:flex-row gap-12">
+                <div class="lg:w-1/2" data-aos="fade-right">
+                    <h3 class="text-2xl font-bold font-playfair mb-6">Get in Touch</h3>
+                    <form id="contactForm" class="space-y-6">
+                        <div>
+                            <label for="name" class="block mb-2">Name</label>
+                            <input type="text" id="name" name="name" required class="w-full p-4 bg-charcoal border border-graphite rounded-lg focus:outline-none focus:ring-2 focus:ring-gold">
+                        </div>
+                        <div>
+                            <label for="email" class="block mb-2">Email</label>
+                            <input type="email" id="email" name="email" required class="w-full p-4 bg-charcoal border border-graphite rounded-lg focus:outline-none focus:ring-2 focus:ring-gold">
+                        </div>
+                        <div>
+                            <label for="message" class="block mb-2">Message</label>
+                            <textarea id="message" name="message" rows="5" required class="w-full p-4 bg-charcoal border border-graphite rounded-lg focus:outline-none focus:ring-2 focus:ring-gold"></textarea>
+                        </div>
+                        <button type="submit" class="bg-gold hover:bg-gradient-gold text-charcoal font-bold py-3 px-8 rounded-lg transition duration-300 w-full">Send Message</button>
+                    </form>
+                    <div id="formSuccess" class="hidden mt-6 p-4 bg-green-100 text-green-800 rounded-lg">
+                        Thank you for your message! We'll get back to you soon.
+                    </div>
+                    <div id="formError" class="hidden mt-6 p-4 bg-red-100 text-red-800 rounded-lg">
+                        There was an error sending your message. Please try again later.
+                    </div>
+                </div>
+
+                <div class="lg:w-1/2" data-aos="fade-left">
+                    <div class="space-y-8">
+                        <div>
+                            <h3 class="text-2xl font-bold font-playfair mb-4">Direct Contact</h3>
+                            <div class="space-y-4">
+                                <div class="flex items-start">
+                                    <i data-feather="mail" class="w-5 h-5 mt-1 mr-4 text-gold"></i>
+                                    <a href="mailto:diversemindsgroup@gmail.com" class="hover:text-gold transition">diversemindsgroup@gmail.com</a>
+                                </div>
+                                <div class="flex items-start">
+                                    <i data-feather="phone" class="w-5 h-5 mt-1 mr-4 text-gold"></i>
+                                    <a href="tel:+27719932237" class="hover:text-gold transition">+27 71 993 2237</a>
+                                </div>
+                                <div class="flex items-start">
+                                    <i data-feather="message-circle" class="w-5 h-5 mt-1 mr-4 text-gold"></i>
+                                    <a href="https://wa.me/27719932237" target="_blank" class="hover:text-gold transition">WhatsApp Chat</a>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div>
+                            <h3 class="text-2xl font-bold font-playfair mb-4">Connect With Us</h3>
+                            <div class="flex space-x-6">
+                                <a href="https://www.facebook.com/DiverseMindsGroup" target="_blank" class="hover:text-gold transition">
+                                    <i data-feather="facebook" class="w-6 h-6"></i>
+                                </a>
+                                <a href="https://youtube.com/@diversemindsgroup?si=lJgY30hqsA7nEyiX" target="_blank" class="hover:text-gold transition">
+                                    <i data-feather="youtube" class="w-6 h-6"></i>
+                                </a>
+                                <a href="https://whatsapp.com/channel/0029VasIYFdDeON2HyUJWQ1I" target="_blank" class="hover:text-gold transition">
+                                    <i data-feather="message-square" class="w-6 h-6"></i>
+                                </a>
+                            </div>
+                        </div>
+
+                        <div class="bg-charcoal p-6 rounded-lg border border-graphite">
+                            <h3 class="text-xl font-bold font-playfair mb-3">Quick Links</h3>
+                            <div class="flex flex-wrap gap-4">
+                                <a href="#solutions" class="bg-gold hover:bg-gradient-gold text-charcoal font-bold py-2 px-4 rounded-lg transition duration-300 text-sm">Work with Us</a>
+                                <a href="#csi" class="bg-gold hover:bg-gradient-gold text-charcoal font-bold py-2 px-4 rounded-lg transition duration-300 text-sm">Volunteer</a>
+                                <a href="#csi" class="bg-gold hover:bg-gradient-gold text-charcoal font-bold py-2 px-4 rounded-lg transition duration-300 text-sm">Join Reading Club</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="py-12 bg-charcoal">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-6 md:mb-0">
+                    <h3 class="text-xl font-bold font-playfair text-white">Diverse Minds Group</h3>
+                    <p class="text-silver">Where African Talent Meets Global Opportunity</p>
+                </div>
+                <div class="flex space-x-6">
+                    <a href="https://www.facebook.com/DiverseMindsGroup" target="_blank" class="text-silver hover:text-gold transition">
+                        <i data-feather="facebook" class="w-5 h-5"></i>
+                    </a>
+                    <a href="https://youtube.com/@diversemindsgroup?si=lJgY30hqsA7nEyiX" target="_blank" class="text-silver hover:text-gold transition">
+                        <i data-feather="youtube" class="w-5 h-5"></i>
+                    </a>
+                    <a href="https://whatsapp.com/channel/0029VasIYFdDeON2HyUJWQ1I" target="_blank" class="text-silver hover:text-gold transition">
+                        <i data-feather="message-square" class="w-5 h-5"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="mt-8 pt-8 border-t border-graphite text-center text-silver">
+                <p>Copyright © 2025 Diverse Minds Group. Website built and designed by <a href="https://bikotoday.co.za/" target="_blank" class="text-gold hover:underline">Biko Today</a>.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        // Initialize AOS
+        AOS.init({
+            duration: 800,
+            once: true
+        });
+
+        // Initialize Feather Icons
+        feather.replace();
+
+        // Mobile menu toggle
+        const mobileMenuButton = document.getElementById('mobile-menu-button');
+        const mobileMenu = document.getElementById('mobile-menu');
+        
+        mobileMenuButton.addEventListener('click', () => {
+            if (mobileMenu.classList.contains('hidden')) {
+                mobileMenu.classList.remove('hidden');
+                feather.replace();
+            } else {
+                mobileMenu.classList.add('hidden');
+            }
+        });
+
+        // Accordion functionality
+        const accordions = document.querySelectorAll('.accordion');
+        accordions.forEach(accordion => {
+            const toggle = accordion.querySelector('.accordion-toggle');
+            toggle.addEventListener('click', () => {
+                accordions.forEach(item => {
+                    if (item !== accordion && item.classList.contains('active')) {
+                        item.classList.remove('active');
+                    }
+                });
+                accordion.classList.toggle('active');
+            });
+        });
+
+        // Navbar scroll effect
+        window.addEventListener('scroll', () => {
+            const navbar = document.getElementById('navbar');
+            if (window.scrollY > 50) {
+                navbar.classList.add('nav-scrolled');
+            } else {
+                navbar.classList.remove('nav-scrolled');
+            }
+        });
+
+        // Counter animation
+        const counters = document.querySelectorAll('.counter');
+        const speed = 200;
+
+        function animateCounters() {
+            counters.forEach(counter => {
+                const target = +counter.getAttribute('data-count');
+                const count = +counter.innerText;
+                const increment = target / speed;
+
+                if (count < target) {
+                    counter.innerText = Math.ceil(count + increment);
+                    setTimeout(animateCounters, 1);
+                } else {
+                    counter.innerText = target;
+                }
+            });
+        }
+
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('animated');
+                    animateCounters();
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.5 });
+
+        counters.forEach(counter => {
+            observer.observe(counter);
+        });
+
+        // Form submission
+        const contactForm = document.getElementById('contactForm');
+        const formSuccess = document.getElementById('formSuccess');
+        const formError = document.getElementById('formError');
+
+        if (contactForm) {
+            contactForm.addEventListener('submit', (e) => {
+                e.preventDefault();
+                
+                // Here you would typically send the form data to your server
+                // For demonstration, we'll just show the success message
+                formSuccess.classList.remove('hidden');
+                formError.classList.add('hidden');
+                contactForm.reset();
+                
+                // In a real implementation, you would:
+                // 1. Collect form data
+                // 2. Send to server via fetch or XMLHttpRequest
+                // 3. Show success/error message based on response
+            });
+        }
+
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    window.scrollTo({
+                        top: target.offsetTop - 100,
+                        behavior: 'smooth'
+                    });
+                    // Close mobile menu if open
+                    mobileMenu.classList.add('hidden');
+                }
+            });
+        });
+    </script>
+</body>
 </html>

prompts.txt

@@ -0,0 +1,310 @@
+
+
+# DMG One-Scroll Website — Builder Brief
+
+**Goal:** Build a **high-end, glossy, minimalistic, chic** **single-scroll** website for **Diverse Minds Group (DMG)** that blends **business solutions** with **community impact (CSI)**. I’ll paste the full content map next—this brief is to set structure, styles, and components.
+
+## Core Requirements
+
+* **Single-page** layout with **sticky top nav** and **smooth anchor scrolling** to sections.
+* **Section order:** Hero → About (accordion) → Business Solutions → CSI → Impact → Partners → CTA/Contact.
+* **Interactive accordion** in “About DMG” (closed by default, smooth expand/collapse).
+* **Impact counters** (animated numbers).
+* **Contact form** (Name, Email, Message → send to [diversemindsgroup@gmail.com](mailto:diversemindsgroup@gmail.com)).
+* **WhatsApp click-to-chat** CTA for CSI: `https://wa.me/27719932237`.
+* **Partner links:** OtidiAfrica ([https://otidiafrica.co.za/](https://otidiafrica.co.za/)), Mbalo ([https://mbalo.co.za/](https://mbalo.co.za/)), Biko Today ([https://bikotoday.co.za/](https://bikotoday.co.za/)).
+* **Footer socials only:**
+
+  * Facebook: [https://www.facebook.com/DiverseMindsGroup](https://www.facebook.com/DiverseMindsGroup)
+  * YouTube: [https://youtube.com/@diversemindsgroup?si=lJgY30hqsA7nEyiX](https://youtube.com/@diversemindsgroup?si=lJgY30hqsA7nEyiX)
+  * WhatsApp Channel: [https://whatsapp.com/channel/0029VasIYFdDeON2HyUJWQ1I](https://whatsapp.com/channel/0029VasIYFdDeON2HyUJWQ1I)
+
+## Visual Style (implement globally)
+
+* **Palette:** White `#FFFFFF`, Off-White `#F9F9F9`, Gold `#FFD503` (hover gradient `#E6B800 → #FFD503`), Charcoal `#1A1A1A`, Graphite `#4D4D4D`, Silver `#C4C4C4`. (Optional accent Coral `#FF5A5F` used sparingly.)
+* **Typography:**
+
+  * Headings: *Playfair Display* (serif, bold/semibold).
+  * Body: *Lato* or *Montserrat* (regular/medium).
+  * Quotes/pull text: *Cormorant Garamond* (sparingly).
+* **Aesthetic:** Premium editorial, lots of whitespace, subtle hover/fade reveals, chic icons, soft shadows, 8px rounded buttons.
+* **Buttons:** Primary = Gold background, black text, gradient hover, rounded 8px.
+
+## Accessibility & Contrast (mandatory)
+
+* **Dynamic contrast rule:** If a section or hero uses a **dark background** (image or color overlay), automatically render **text as white** or another **WCAG-AA compliant contrasting colour**. Ensure links and buttons also meet contrast. Apply the same rule to accordion headers and counters when backgrounds change.
+* All interactive elements must be **keyboard navigable** and **focus-visible**.
+
+## Performance & SEO
+
+* Mobile-first responsive build.
+* Optimise images (modern formats, lazy-loading).
+* Semantic HTML5 structure; add meta title/description.
+* Add basic schema where sensible (Organization).
+
+## Components to include
+
+* **Sticky nav** with anchors to each section.
+* **Hero** with two CTAs: “Explore Business Solutions” and “Explore Community Impact (CSI)”.
+* **About DMG**: Accordion (4 items: Story, Vision, Mission, Values).
+* **Services grid** with chic icons.
+* **CSI** block with 3 pillars and **WhatsApp CTA**.
+* **Impact** animated counters + case-study cards.
+* **Partners** logo strip with outbound links.
+* **Contact** block with form + direct contact lines + socials.
+
+## Acceptance Criteria
+
+* Single page, smooth scroll, no secondary pages.
+* Accordion works on mobile and desktop; only one panel open at a time.
+* Contrast rule auto-applies on any dark area (hero, overlays, images).
+* Counters animate on first viewport entry (once).
+* Form validates required fields and shows success/fail messages.
+* Footer shows only the 3 specified social links.
+
+
+---
+
+# **DMG One-Scroll Website Content Map**
+
+---
+
+## **1. Hero Banner**
+
+**Tagline (large font):**
+*Where African Talent Meets Global Opportunity.*
+
+**Subtext (smaller font):**
+DMG is a women-led, innovative and impact-driven enterprise bridging **business empowerment** with **community development**.
+
+**Buttons:**
+
+* *Explore Business Solutions*
+* *Explore Community Impact (CSI)*
+
+---
+
+## **2. About DMG (Accordion Section)**
+
+**Heading:** *About Us*
+
+**Subheading:** *Our Story, Vision, Mission & Values*
+
+**Accordion 1: Ashley’s Story & Leadership**
+Ashley Khabana is a dynamic South African entrepreneur and the Founder & Director of Diverse Minds Group (DMG). Her journey began in Sibasa, volunteering with the Light of God Ministry in 2015/16, where she supported over 20 children from pre-primary to grade 8. This experience proved to her the **power of education, mentorship, and compassion** in transforming lives.
+
+Her career spans **Shell, Amazon, guesthouse management, event coordination, programme leadership and community engagement**. Alongside her work, she has pursued certifications in **TEFL, debt counselling, cybersecurity**, and is currently studying **Full Stack Development**.
+
+Ashley founded DMG as an **ecosystem of empowerment**, integrating business solutions with social impact.
+
+Leadership highlights include:
+
+* Secretary, **Vhembe District Executive Committee (Writers, Books & Publishers)**.
+* Programme Director, **World Book Day 2024**.
+* Speaker, **Impower’d Women’s Conference (2025)** on AI & 4IR.
+* Mentor and TEFL facilitator for youth entering global work opportunities.
+
+Ashley believes that **business and social good are inseparable**. Under her leadership, DMG stands as the platform where **African talent meets global opportunity**.
+
+---
+
+**Accordion 2: Vision**
+To be a **leading force in Africa for personal transformation, community empowerment, and sustainable impact** through education, creativity, and innovation.
+
+Ashley envisions:
+
+* Expanding **digital literacy, AI integration, and brand readiness** into BRICS/global markets.
+* Building **creative industry ecosystems** to connect African entrepreneurs with global markets.
+* Cultivating resilient communities led by women and youth.
+* Ensuring transformation becomes a **shared reality for all**, not a privilege.
+
+---
+
+**Accordion 3: Mission**
+To **develop empowered, self-reliant individuals and communities** by providing access to mentorship, literature, technology, and inclusive skills development.
+
+This mission comes alive through:
+
+* Supporting SMEs with compliance, branding, and growth tools.
+* Guiding authors and creatives to self-publish and share globally.
+* Equipping youth with mentorship and career readiness.
+* Advocating for GBV and mental health healing programmes.
+* Connecting African talent to **global networks** like BRICS.
+
+---
+
+**Accordion 4: Core Values**
+
+* **Empowerment** – Unlocking human potential with tools & mentorship.
+* **Inclusion** – Celebrating diversity and amplifying marginalised voices.
+* **Innovation** – Leveraging technology, AI and creativity for growth.
+* **Integrity** – Upholding fairness and transparency in all work.
+* **Impact** – Driving measurable change in business and community.
+
+---
+
+## **3. DMG Business Solutions**
+
+**Section Header:** *DMG Business Solutions*
+**Subtext:** Helping entrepreneurs, SMEs, and creatives unlock growth with professional services.
+
+**Services List (with chic icons):**
+
+* Virtual Assistants & Customer Operations
+* Documents & Compliance (SOPs, profiles, ATS optimisation, policies)
+* Books & Publishing (editing, self-publishing, Amazon/Kindle)
+* Branding & Design
+* Social Media Management
+* IT & Business Automation
+* **OtidiAfrica Partnership** → [https://otidiafrica.co.za/](https://otidiafrica.co.za/)
+* **Mbalo Accounting Partnership** → [https://mbalo.co.za/](https://mbalo.co.za/)
+* **Biko Today Partnership** → [https://bikotoday.co.za/](https://bikotoday.co.za/) *(DMG student training & SME workforce supplier/supporting services partner)*
+
+---
+
+## **4. DMG CSI (Community & Social Impact)**
+
+**Section Header:** *DMG CSI – Empowering Minds. Inspiring Change. Building Futures.*
+
+**Intro:**
+DMG CSI is the heart of our community work. We believe that **literature, empowerment, and skills development** are powerful tools for transformation.
+
+**Objectives:**
+
+* Promote literacy & creative expression.
+* Empower women, youth & marginalised groups.
+* Drive inclusion & celebrate culture.
+* Champion GBV and mental health awareness.
+* Foster nation building & civic engagement.
+
+**3 Pillars (visual blocks):**
+
+* *Arts, Sports & Culture*
+* *Empowerment & Development (skills, mentorship, self-development)*
+* *Reading/Book Club (storytelling, literacy, publishing)*
+
+**Projects (short bullets):**
+
+* DMG Reading Club at Thulamela Library.
+* Women’s Day Empowerment Conference (2025).
+* Youth Sporting Events (soccer, basketball, chess, netball).
+* Mentorship for young authors (publishing on Kindle).
+* Branding & visibility support for women-owned businesses.
+
+**CTA Button → WhatsApp:**
+👉 [https://wa.me/27719932237](https://wa.me/27719932237)
+
+---
+
+## **5. Impact & Achievements**
+
+**Section Header:** *Impact at a Glance*
+
+**Animated Stats:**
+
+* 500+ SMEs supported
+* 100+ youth literacy participants
+* Authors published globally
+* TEFL teachers placed internationally
+
+**Case Study Cards:**
+
+* World Book Day Celebration 2024
+* Empowerfest Youth Conference
+* Vhembe District GBVF & Literacy Committees
+
+---
+
+## **6. Partners & Collaborations**
+
+**Header:** *Our Partners*
+
+Logos + Short blurbs with links:
+
+* **OtidiAfrica** – Tech, branding & automation partner → [https://otidiafrica.co.za/](https://otidiafrica.co.za/)
+* **Mbalo Accounting** – Finance, compliance & payroll partner → [https://mbalo.co.za/](https://mbalo.co.za/)
+* **Biko Today** – Student training & SME workforce supplier/support services partner → [https://bikotoday.co.za/](https://bikotoday.co.za/)
+* Libraries, schools, DSAC & NYDA collaborations.
+
+---
+
+## **7. Call to Action / Contact Us**
+
+**Header:** *Join Us in Building Futures*
+
+**Text:**
+Whether you are an entrepreneur, community leader, funder, or volunteer, DMG is your partner in creating sustainable impact.
+
+**Buttons:**
+
+* Work with Us
+* Volunteer
+* Join Reading Club
+
+**Contact Form:**
+
+* Name
+* Email
+* Message → send to [diversemindsgroup@gmail.com](mailto:diversemindsgroup@gmail.com)
+
+**Direct Contact:**
+
+* 📧 [diversemindsgroup@gmail.com](mailto:diversemindsgroup@gmail.com)
+* 📱 +27 71 993 2237
+* 💬 WhatsApp: [https://wa.me/27719932237](https://wa.me/27719932237)
+
+**Footer:**
+
+* Facebook → [https://www.facebook.com/DiverseMindsGroup](https://www.facebook.com/DiverseMindsGroup)
+* YouTube → [https://youtube.com/@diversemindsgroup?si=lJgY30hqsA7nEyiX](https://youtube.com/@diversemindsgroup?si=lJgY30hqsA7nEyiX)
+* WhatsApp Channel → [https://whatsapp.com/channel/0029VasIYFdDeON2HyUJWQ1I](https://whatsapp.com/channel/0029VasIYFdDeON2HyUJWQ1I)
+* Copyright © 2025 Diverse Minds Group. Website built and designed by Biko Today [https://bikotoday.co.za/](https://bikotoday.co.za/)
+
+---
+
+## **Technical Requirements (for devs)**
+
+* **One-scroll responsive design** with sticky nav + smooth anchor scroll.
+* Accordions for “About DMG”.
+* Animated stats counters.
+* Contact form email integration.
+* WhatsApp API click-to-chat.
+* External links (OtidiAfrica, Mbalo, Biko Today).
+* SEO keywords: mentorship, women empowerment, youth development, compliance, publishing, literacy, digital transformation.
+
+---
+
+## **Web Style Guide**
+
+### 🎨 Colours
+
+* White `#FFFFFF` / Off-White `#F9F9F9`
+* Gold `#FFD503` / Gradient `#E6B800 → #FFD503`
+* Charcoal Black `#1A1A1A` / Graphite Grey `#4D4D4D` / Silver `#C4C4C4`
+* Optional Accent: Coral `#FF5A5F`
+
+### ✍️ Typography
+
+* Headings: *Playfair Display* (serif, chic)
+* Body: *Lato* or *Montserrat* (modern sans-serif)
+* Quotes / Accents: *Cormorant Garamond*
+
+### 🖼️ Imagery
+
+* Glossy editorial style, African empowerment, books, youth.
+* Subtle overlay on hero images (30%).
+
+### 🔲 UI Elements
+
+* **Primary Buttons:** Gold with black text, rounded 8px, soft shadow.
+* **Secondary Links:** Text-only underline hover.
+* **Accordions:** Off-White background, gold toggle icon, smooth cascade.
+* **Stats Counters:** Gold numbers, animated, Playfair Display.
+
+### 📱 Responsive
+
+* Mobile-first scaling.
+* Sticky nav shrinks on scroll.
+* Accordions collapse naturally on small screens.
+
+---