use have mixed up the logos and put it in the wrong places please use this link for the OtidiAfrica logo https://otidiafrica.co.za/dmg/images/OtidiAfrica%20Logo.png and then this link https://otidiafrica.co.za/dmg/images/Mbalo%20Logo.png for the Mbalo logo - Follow Up Deployment
e714cee verified | <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"> | |
| <img src="https://otidiafrica.co.za/dmg/images/DMG%20black%20logo.png" alt="Diverse Minds Group" class="h-10"> | |
| </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="https://otidiafrica.co.za/dmg/images/DMG%20black%20logo.png" 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="https://otidiafrica.co.za/dmg/images/DMG%20black%20logo.png" 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="https://otidiafrica.co.za/dmg/images/DMG%20black%20logo.png" 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="https://otidiafrica.co.za/dmg/images/OtidiAfrica%20Logo.png" 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="https://otidiafrica.co.za/dmg/images/Mbalo%20Logo.png" 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="https://otidiafrica.co.za/dmg/images/BIKO%20Logo.png" 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> | |