{"id":225761,"date":"2026-03-06T18:42:30","date_gmt":"2026-03-06T17:42:30","guid":{"rendered":"https:\/\/megatraining.africa\/?page_id=225761"},"modified":"2026-03-06T19:06:21","modified_gmt":"2026-03-06T18:06:21","slug":"storyboard","status":"publish","type":"page","link":"https:\/\/megatraining.africa\/en\/storyboard\/","title":{"rendered":"Storyboard"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"225761\" class=\"elementor elementor-225761\">\n\t\t\t\t<div class=\"elementor-element elementor-element-33fe625 e-flex e-con-boxed e-con e-parent\" data-id=\"33fe625\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e22bf0b elementor-widget elementor-widget-html\" data-id=\"e22bf0b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"premium-manga-board\" class=\"pmb-wrapper\">\r\n    <!-- Header -->\r\n    <div class=\"pmb-header\">\r\n        <span class=\"pmb-subtitle\">Storyboard Collection<\/span>\r\n        <h2 class=\"pmb-title\">Impact Through Art<\/h2>\r\n        <p class=\"pmb-desc\">Explore our curated collection of 40 manga storyboards designed to drive change, raise awareness, and inspire action across Africa.<\/p>\r\n    <\/div>\r\n\r\n    <!-- Filters -->\r\n    <div class=\"pmb-filters-container\">\r\n        <div class=\"pmb-filter-group\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"><\/line><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"><\/path><\/svg>\r\n            <select id=\"pmb-lang-filter\" class=\"pmb-select\">\r\n                <option value=\"all\">All Languages<\/option>\r\n                <option value=\"fr\">French (Fran\u00e7ais)<\/option>\r\n                <option value=\"en\">English<\/option>\r\n            <\/select>\r\n        <\/div>\r\n        <div class=\"pmb-filter-group\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"12 2 2 7 12 12 22 7 12 2\"><\/polygon><polyline points=\"2 17 12 22 22 17\"><\/polyline><polyline points=\"2 12 12 17 22 12\"><\/polyline><\/svg>\r\n            <select id=\"pmb-theme-filter\" class=\"pmb-select\">\r\n                <option value=\"all\">All Themes<\/option>\r\n                <option value=\"harassment\">Workplace Harassment<\/option>\r\n                <option value=\"drugs\">Anti-Drug Abuse<\/option>\r\n                <option value=\"entrepreneurship\">Entrepreneurship<\/option>\r\n                <option value=\"customer_journey\">Customer Journey<\/option>\r\n            <\/select>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Grid -->\r\n    <div id=\"pmb-grid\" class=\"pmb-grid\">\r\n        <!-- JS Injected Cards -->\r\n    <\/div>\r\n\r\n    <!-- Premium Modal (Glassmorphism) -->\r\n    <div id=\"pmb-modal\" class=\"pmb-modal\">\r\n        <div class=\"pmb-modal-backdrop\"><\/div>\r\n        <div class=\"pmb-modal-content\">\r\n            <button class=\"pmb-modal-close\" aria-label=\"Close modal\">\r\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg>\r\n            <\/button>\r\n            \r\n            <div id=\"pmb-modal-cover\" class=\"pmb-modal-cover\">\r\n                <!-- Cover SVG injected by JS -->\r\n            <\/div>\r\n            \r\n            <div class=\"pmb-modal-body\">\r\n                <div class=\"pmb-modal-badges\">\r\n                    <span id=\"pmb-modal-lang\" class=\"pmb-badge badge-lang\"><\/span>\r\n                    <span id=\"pmb-modal-theme\" class=\"pmb-badge badge-theme\"><\/span>\r\n                <\/div>\r\n                <h3 id=\"pmb-modal-title\" class=\"pmb-modal-title\"><\/h3>\r\n                <div class=\"pmb-modal-desc-container\">\r\n                    <p id=\"pmb-modal-desc\" class=\"pmb-modal-desc\"><\/p>\r\n                <\/div>\r\n                \r\n                <a href=\"#\" id=\"pmb-modal-download\" class=\"pmb-btn-primary\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"><\/line><\/svg>\r\n                    <span>Download Storyboard<\/span>\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n    \/* -------------------------------------------------------------------------- *\/\r\n    \/* ULTRA-PREMIUM SCOPED CSS                                                   *\/\r\n    \/* Blocks WordPress Themes & Forces Light Mode                                *\/\r\n    \/* -------------------------------------------------------------------------- *\/\r\n    #premium-manga-board.pmb-wrapper {\r\n        --c-bg: #F8FAFC;\r\n        --c-surface: #FFFFFF;\r\n        --c-text-main: #0F172A;\r\n        --c-text-muted: #64748B;\r\n        --c-border: #E2E8F0;\r\n        --c-primary: #0F172A;\r\n        --c-primary-hover: #334155;\r\n        --c-accent: #2563EB;\r\n        --c-accent-hover: #1D4ED8;\r\n        --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.02);\r\n        --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.08);\r\n        --shadow-card-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);\r\n        --radius-lg: 20px;\r\n        --radius-md: 12px;\r\n        --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n        \r\n        font-family: var(--font) !important;\r\n        background-color: var(--c-bg) !important;\r\n        color: var(--c-text-main) !important;\r\n        padding: 80px 20px;\r\n        box-sizing: border-box;\r\n        border-radius: var(--radius-lg);\r\n        color-scheme: light !important;\r\n        width: 100%;\r\n        max-width: 1280px;\r\n        margin: 0 auto;\r\n        -webkit-font-smoothing: antialiased;\r\n        -moz-osx-font-smoothing: grayscale;\r\n    }\r\n\r\n    .pmb-wrapper * {\r\n        box-sizing: border-box;\r\n        margin: 0;\r\n        padding: 0;\r\n    }\r\n\r\n    \/* Header *\/\r\n    .pmb-header {\r\n        text-align: center;\r\n        margin-bottom: 60px;\r\n    }\r\n    .pmb-subtitle {\r\n        display: inline-block;\r\n        font-size: 13px !important;\r\n        font-weight: 700 !important;\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        color: var(--c-accent) !important;\r\n        margin-bottom: 16px;\r\n        background: #EFF6FF !important;\r\n        padding: 6px 16px !important;\r\n        border-radius: 50px !important;\r\n    }\r\n    .pmb-title {\r\n        font-size: 46px !important;\r\n        font-weight: 900 !important;\r\n        color: var(--c-text-main) !important;\r\n        margin-bottom: 20px !important;\r\n        line-height: 1.1 !important;\r\n        letter-spacing: -1px;\r\n    }\r\n    .pmb-desc {\r\n        font-size: 18px !important;\r\n        color: var(--c-text-muted) !important;\r\n        max-width: 650px;\r\n        margin: 0 auto !important;\r\n        line-height: 1.7 !important;\r\n        font-weight: 400 !important;\r\n    }\r\n\r\n    \/* Filters *\/\r\n    .pmb-filters-container {\r\n        display: flex;\r\n        justify-content: center;\r\n        gap: 24px;\r\n        margin-bottom: 48px;\r\n        flex-wrap: wrap;\r\n    }\r\n    .pmb-filter-group {\r\n        position: relative;\r\n        display: flex;\r\n        align-items: center;\r\n        background: var(--c-surface) !important;\r\n        border: 1px solid var(--c-border) !important;\r\n        border-radius: 50px !important;\r\n        padding: 8px 24px 8px 18px;\r\n        box-shadow: var(--shadow-sm) !important;\r\n        transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.2s ease;\r\n    }\r\n    .pmb-filter-group:hover {\r\n        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05) !important;\r\n        border-color: #CBD5E1 !important;\r\n        transform: translateY(-2px);\r\n    }\r\n    .pmb-filter-group svg {\r\n        color: var(--c-accent) !important;\r\n        margin-right: 12px;\r\n    }\r\n    .pmb-select {\r\n        border: none !important;\r\n        background: transparent !important;\r\n        font-family: var(--font) !important;\r\n        font-size: 15px !important;\r\n        font-weight: 600 !important;\r\n        color: var(--c-text-main) !important;\r\n        padding: 10px 24px 10px 0 !important;\r\n        cursor: pointer;\r\n        outline: none !important;\r\n        appearance: none;\r\n        background-image: url('data:image\/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2364748B%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E') !important;\r\n        background-repeat: no-repeat !important;\r\n        background-position: right center !important;\r\n        background-size: 16px !important;\r\n    }\r\n\r\n    \/* Grid & Cards *\/\r\n    .pmb-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\r\n        gap: 36px;\r\n    }\r\n    .pmb-card {\r\n        background: var(--c-surface) !important;\r\n        border-radius: var(--radius-lg) !important;\r\n        overflow: hidden;\r\n        box-shadow: var(--shadow-sm) !important;\r\n        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;\r\n        display: flex;\r\n        flex-direction: column;\r\n        border: 1px solid rgba(226, 232, 240, 0.6) !important;\r\n        cursor: pointer;\r\n        animation: fadeInCard 0.5s ease backwards;\r\n    }\r\n    @keyframes fadeInCard {\r\n        from { opacity: 0; transform: translateY(15px); }\r\n        to { opacity: 1; transform: translateY(0); }\r\n    }\r\n    .pmb-card:hover {\r\n        transform: translateY(-8px);\r\n        box-shadow: var(--shadow-card-hover) !important;\r\n    }\r\n    \r\n    \/* Dynamic Covers *\/\r\n    .pmb-card-cover {\r\n        height: 170px;\r\n        width: 100%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    .pmb-card-cover::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; right: 0; bottom: 0;\r\n        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);\r\n    }\r\n    .pmb-card-cover svg {\r\n        width: 72px;\r\n        height: 72px;\r\n        color: rgba(255,255,255,0.95) !important;\r\n        filter: drop-shadow(0 8px 12px rgba(0,0,0,0.15));\r\n        z-index: 1;\r\n        transition: transform 0.4s ease;\r\n    }\r\n    .pmb-card:hover .pmb-card-cover svg {\r\n        transform: scale(1.1);\r\n    }\r\n\r\n    \/* Gradients by Theme *\/\r\n    .theme-cover-harassment { background: linear-gradient(135deg, #4F46E5 0%, #312E81 100%) !important; }\r\n    .theme-cover-drugs { background: linear-gradient(135deg, #0D9488 0%, #042F2E 100%) !important; }\r\n    .theme-cover-entrepreneurship { background: linear-gradient(135deg, #F59E0B 0%, #78350F 100%) !important; }\r\n    .theme-cover-customer_journey { background: linear-gradient(135deg, #E11D48 0%, #881337 100%) !important; }\r\n\r\n    .pmb-card-content {\r\n        padding: 28px !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n        flex-grow: 1;\r\n        background: #ffffff !important;\r\n    }\r\n    .pmb-badges {\r\n        display: flex;\r\n        gap: 8px;\r\n        margin-bottom: 16px;\r\n        flex-wrap: wrap;\r\n    }\r\n    .pmb-badge {\r\n        font-size: 11px !important;\r\n        font-weight: 700 !important;\r\n        padding: 6px 12px !important;\r\n        border-radius: 8px !important;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n    }\r\n    .badge-lang { background: #F1F5F9 !important; color: #475569 !important; border: 1px solid #E2E8F0 !important;}\r\n    .badge-theme { background: #EFF6FF !important; color: #1E40AF !important; border: 1px solid #BFDBFE !important; }\r\n\r\n    .pmb-card-title {\r\n        font-size: 20px !important;\r\n        font-weight: 800 !important;\r\n        color: var(--c-text-main) !important;\r\n        margin-bottom: 12px !important;\r\n        line-height: 1.3 !important;\r\n    }\r\n    .pmb-card-excerpt {\r\n        font-size: 15px !important;\r\n        color: var(--c-text-muted) !important;\r\n        line-height: 1.6 !important;\r\n        margin-bottom: 28px !important;\r\n        display: -webkit-box;\r\n        -webkit-line-clamp: 3;\r\n        -webkit-box-orient: vertical;\r\n        overflow: hidden;\r\n    }\r\n    .pmb-card-action {\r\n        margin-top: auto;\r\n        font-size: 15px !important;\r\n        font-weight: 700 !important;\r\n        color: var(--c-accent) !important;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        transition: gap 0.2s ease, color 0.2s ease;\r\n    }\r\n    .pmb-card:hover .pmb-card-action {\r\n        gap: 12px;\r\n        color: var(--c-accent-hover) !important;\r\n    }\r\n\r\n    \/* Modal - Ultimate Glassmorphism *\/\r\n    .pmb-modal {\r\n        display: none;\r\n        position: fixed;\r\n        z-index: 9999999;\r\n        top: 0; left: 0; width: 100%; height: 100%;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n    .pmb-modal.active {\r\n        display: flex;\r\n    }\r\n    .pmb-modal-backdrop {\r\n        position: absolute;\r\n        top: 0; left: 0; width: 100%; height: 100%;\r\n        background: rgba(15, 23, 42, 0.6) !important;\r\n        backdrop-filter: blur(12px);\r\n        -webkit-backdrop-filter: blur(12px);\r\n    }\r\n    .pmb-modal-content {\r\n        position: relative;\r\n        background: var(--c-surface) !important;\r\n        width: 90%;\r\n        max-width: 550px;\r\n        border-radius: 28px !important;\r\n        box-shadow: var(--shadow-lg) !important;\r\n        overflow: hidden;\r\n        animation: modalScaleUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n        border: 1px solid rgba(255,255,255,0.2) !important;\r\n    }\r\n    @keyframes modalScaleUp {\r\n        from { opacity: 0; transform: translateY(30px) scale(0.95); }\r\n        to { opacity: 1; transform: translateY(0) scale(1); }\r\n    }\r\n    .pmb-modal-close {\r\n        position: absolute;\r\n        top: 20px;\r\n        right: 20px;\r\n        background: rgba(255, 255, 255, 0.25) !important;\r\n        border: none !important;\r\n        width: 40px; height: 40px;\r\n        border-radius: 50% !important;\r\n        display: flex; align-items: center; justify-content: center;\r\n        cursor: pointer;\r\n        z-index: 10;\r\n        color: #ffffff !important;\r\n        backdrop-filter: blur(8px);\r\n        transition: background 0.2s, transform 0.2s;\r\n    }\r\n    .pmb-modal-close:hover {\r\n        background: rgba(255, 255, 255, 0.5) !important;\r\n        transform: rotate(90deg);\r\n    }\r\n    .pmb-modal-cover {\r\n        height: 220px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        position: relative;\r\n    }\r\n    .pmb-modal-cover::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: 0; left: 0; right: 0; height: 50%;\r\n        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);\r\n    }\r\n    .pmb-modal-cover svg {\r\n        width: 80px; height: 80px; color: rgba(255,255,255,0.95) !important;\r\n        transform: translateY(-10px);\r\n        filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2));\r\n    }\r\n    .pmb-modal-body {\r\n        padding: 0 36px 36px 36px !important;\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n    .pmb-modal-badges {\r\n        display: flex; gap: 8px; margin-bottom: 20px;\r\n    }\r\n    .pmb-modal-title {\r\n        font-size: 28px !important;\r\n        font-weight: 900 !important;\r\n        color: var(--c-text-main) !important;\r\n        margin-bottom: 20px !important;\r\n        line-height: 1.2 !important;\r\n        letter-spacing: -0.5px;\r\n    }\r\n    .pmb-modal-desc-container {\r\n        background: #F8FAFC !important;\r\n        padding: 24px !important;\r\n        border-radius: var(--radius-md) !important;\r\n        margin-bottom: 36px !important;\r\n        border: 1px solid #E2E8F0 !important;\r\n    }\r\n    .pmb-modal-desc {\r\n        font-size: 16px !important;\r\n        color: #334155 !important;\r\n        line-height: 1.7 !important;\r\n    }\r\n    .pmb-btn-primary {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        width: 100%;\r\n        background: var(--c-primary) !important;\r\n        color: #ffffff !important;\r\n        padding: 18px 24px !important;\r\n        border-radius: var(--radius-md) !important;\r\n        font-size: 16px !important;\r\n        font-weight: 700 !important;\r\n        text-decoration: none !important;\r\n        transition: background 0.2s, transform 0.1s, box-shadow 0.2s;\r\n        box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.2) !important;\r\n    }\r\n    .pmb-btn-primary:hover {\r\n        background: var(--c-primary-hover) !important;\r\n        box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.3) !important;\r\n        color: #ffffff !important;\r\n    }\r\n    .pmb-btn-primary:active {\r\n        transform: scale(0.98);\r\n    }\r\n    .pmb-btn-primary svg {\r\n        margin-right: 12px;\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        .pmb-wrapper { padding: 40px 16px; }\r\n        .pmb-filters-container { flex-direction: column; gap: 16px; }\r\n        .pmb-filter-group { width: 100%; }\r\n        .pmb-select { width: 100%; }\r\n        .pmb-modal-content { width: 95%; }\r\n        .pmb-modal-body { padding: 0 24px 24px 24px !important; }\r\n        .pmb-title { font-size: 34px !important; }\r\n        .pmb-grid { gap: 24px; }\r\n    }\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    \r\n    \/\/ Premium Vector Icons (SVG) mapped to themes\r\n    const themeIcons = {\r\n        harassment: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path><\/svg>`,\r\n        drugs: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10.5 20.5 19 12a4.95 4.95 0 1 0-7-7L3.5 13.5a4.95 4.95 0 1 0 7 7Z\"><\/path><path d=\"m8.5 8.5 7 7\"><\/path><\/svg>`,\r\n        entrepreneurship: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z\"><\/path><path d=\"M13 5v2\"><\/path><path d=\"M13 17v2\"><\/path><path d=\"M13 11v2\"><\/path><\/svg>`,\r\n        customer_journey: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"><\/path><circle cx=\"12\" cy=\"7\" r=\"4\"><\/circle><path d=\"m15.5 2.5 3 3 1.5-1.5\"><\/path><\/svg>`\r\n    };\r\n\r\n    \/\/ Database containing all 40 mangas (FR stories in French, EN stories in English)\r\n    const mangas =[\r\n        \/\/ 1. Workplace Harassment (10 items: 5 FR, 5 EN)\r\n        { title: \"Le Silence des Tours\", desc: \"\u00c0 Casablanca, une jeune stagiaire brillante d\u00e9couvre un r\u00e9seau de chantage au sein d'une grande multinationale. Avec l'aide d'une avocate \u00e0 la retraite, elle tente de faire tomber le PDG intouchable.\", theme: \"harassment\", lang: \"fr\" },\r\n        { title: \"Dossier Rouge : Abidjan\", desc: \"Une directrice des ressources humaines int\u00e8gre une entreprise de cacao et d\u00e9couvre une culture toxique. Elle utilise ses comp\u00e9tences de d\u00e9tective pour rassembler des preuves num\u00e9riques contre les harceleurs.\", theme: \"harassment\", lang: \"fr\" },\r\n        { title: \"La Voix d'Amina\", desc: \"Amina, timide secr\u00e9taire \u00e0 Dakar, obtient un pouvoir surnaturel : elle peut mat\u00e9rialiser les mots blessants et les gestes d\u00e9plac\u00e9s sous forme de monstres visibles par tous, for\u00e7ant ses coll\u00e8gues \u00e0 voir la r\u00e9alit\u00e9.\", theme: \"harassment\", lang: \"fr\" },\r\n        { title: \"L'Alliance du 8\u00e8me \u00c9tage\", desc: \"Quatre femmes de d\u00e9partements diff\u00e9rents \u00e0 Kinshasa s'unissent secr\u00e8tement pour pi\u00e9ger un manager pr\u00e9dateur en utilisant la technologie et la ruse, formant une ligue de justice interne.\", theme: \"harassment\", lang: \"fr\" },\r\n        { title: \"Masques de Pouvoir\", desc: \"Dans le milieu de la mode \u00e0 Lagos, un jeune mannequin masculin brise les tabous en d\u00e9non\u00e7ant le harc\u00e8lement d'une directrice influente, montrant que les hommes peuvent aussi \u00eatre victimes.\", theme: \"harassment\", lang: \"fr\" },\r\n        { title: \"The Glass Shield\", desc: \"In a Nairobi tech hub, a female coder develops an app that anonymously records workplace harassment on the blockchain, sparking a corporate revolution against a corrupt boss.\", theme: \"harassment\", lang: \"en\" },\r\n        { title: \"Office Shadows\", desc: \"A psychological thriller set in Johannesburg where a victim of harassment haunts her tormentors through psychological warfare until they confess their crimes to the board.\", theme: \"harassment\", lang: \"en\" },\r\n        { title: \"No More Whispers\", desc: 'Set in an Accra bank, a group of junior employees form a secret society called \"The Loudspeakers\" to expose executives who abuse their power for sexual favors.', theme: \"harassment\", lang: \"en\" },\r\n        { title: \"The Predator\u2019s Fall\", desc: \"An ex-police officer turned corporate security guard in Lagos notices the pattern of abuse by a high-ranking official and risks his job to protect the female staff and gather evidence.\", theme: \"harassment\", lang: \"en\" },\r\n        { title: \"Corporate Justice\", desc: \"A legal drama following a young lawyer in Dar es Salaam who specializes in workplace harassment cases, taking on the city's most powerful conglomerates to defend victims.\", theme: \"harassment\", lang: \"en\" },\r\n        \r\n        \/\/ 2. Anti-Drug Abuse (10 items: 5 FR, 5 EN)\r\n        { title: \"Les Cha\u00eenes de Fum\u00e9e\", desc: \"Un lyc\u00e9en prometteur de Bamako voit son avenir de footballeur menac\u00e9 par une nouvelle drogue synth\u00e9tique. Il doit combattre sa propre addiction mat\u00e9rialis\u00e9e par un d\u00e9mon de fum\u00e9e.\", theme: \"drugs\", lang: \"fr\" },\r\n        { title: \"L'Alchimiste Noir\", desc: \"\u00c0 Douala, un professeur de chimie d\u00e9couvre qu'un de ses anciens \u00e9l\u00e8ves fabrique une drogue mortelle. Il sort de sa retraite pour cr\u00e9er un antidote et d\u00e9manteler le r\u00e9seau.\", theme: \"drugs\", lang: \"fr\" },\r\n        { title: \"Racines Br\u00fbl\u00e9es\", desc: \"Dans un village rural, les jeunes d\u00e9laissent l'agriculture pour le trafic. Une jeune agricultrice tente de sauver son fr\u00e8re et de montrer que la terre offre une vraie richesse.\", theme: \"drugs\", lang: \"fr\" },\r\n        { title: \"Lendemain Clair\", desc: \"L'histoire \u00e9mouvante d'un centre de d\u00e9sintoxication \u00e0 Tunis o\u00f9 cinq patients d'horizons diff\u00e9rents s'entraident pour survivre au sevrage.\", theme: \"drugs\", lang: \"fr\" },\r\n        { title: \"Le Gardien du Quartier\", desc: \"Un ancien dealer repenti de Cotonou utilise sa connaissance de la rue pour emp\u00eacher les nouveaux trafiquants de recruter des enfants dans son quartier.\", theme: \"drugs\", lang: \"fr\" },\r\n        { title: \"The Haze\", desc: \"In the slums of Kibera, a talented artist loses his ability to see colors due to drug abuse. The manga follows his desperate journey to get clean and regain his vision and talent.\", theme: \"drugs\", lang: \"en\" },\r\n        { title: \"Breaking the Needle\", desc: \"A high-octane action manga set in Lagos where a special police unit fights against a cartel importing dangerous opioids.\", theme: \"drugs\", lang: \"en\" },\r\n        { title: \"Street Pharmacist\", desc: \"A brilliant medical student in Harare gets dragged into the drug trade to pay debts but decides to sabotage the operations from the inside using his chemical knowledge.\", theme: \"drugs\", lang: \"en\" },\r\n        { title: \"The Poppy Trap\", desc: \"Two brothers in Addis Ababa take different paths: one becomes a drug lord, the other a narcotics agent. Their inevitable clash tears their family apart.\", theme: \"drugs\", lang: \"en\" },\r\n        { title: \"Clean Slate\", desc: \"An inspiring slice-of-life story about a former addict in Cape Town who starts a running club for recovering addicts, showing how sports can replace the high.\", theme: \"drugs\", lang: \"en\" },\r\n\r\n        \/\/ 3. Entrepreneurship (10 items: 5 FR, 5 EN)\r\n        { title: \"L'Empire du Manioc\", desc: \"Une jeune femme h\u00e9rite d'un champ aride au Togo. Gr\u00e2ce \u00e0 des techniques agricoles innovantes et beaucoup d'audace, elle transforme le manioc en produits de luxe.\", theme: \"entrepreneurship\", lang: \"fr\" },\r\n        { title: \"Code Abidjan\", desc: \"Trois \u00e9tudiants sans argent cr\u00e9ent une application r\u00e9volutionnaire pour les transports en commun. Ils doivent affronter les investisseurs requins et la concurrence d\u00e9loyale.\", theme: \"entrepreneurship\", lang: \"fr\" },\r\n        { title: \"L'Esprit Baobab\", desc: \"Un manga fantastique o\u00f9 les entrepreneurs africains puisent leur \u00e9nergie dans l'esprit des anc\u00eatres pour r\u00e9soudre des probl\u00e8mes modernes via leurs entreprises.\", theme: \"entrepreneurship\", lang: \"fr\" },\r\n        { title: \"La Reine du Tissu\", desc: \"L'ascension d'une couturi\u00e8re de march\u00e9 \u00e0 Dakar qui r\u00e9volutionne la mode africaine en m\u00e9langeant tradition et technologie, devenant une ic\u00f4ne mondiale.\", theme: \"entrepreneurship\", lang: \"fr\" },\r\n        { title: \"Le Pari de Kigali\", desc: \"Un tournoi d'entrepreneurs a lieu au Rwanda. Le h\u00e9ros, un inventeur de drones m\u00e9dicaux, doit prouver que son projet peut sauver des vies tout en \u00e9tant rentable.\", theme: \"entrepreneurship\", lang: \"fr\" },\r\n        { title: \"Silicon Savannah\", desc: \"A group of misfits in Nairobi creates a solar energy startup. The manga focuses on the hustle, the pitch competitions, and the grit needed to succeed in tech.\", theme: \"entrepreneurship\", lang: \"en\" },\r\n        { title: \"The Vendor\u2019s Dream\", desc: \"The story of a young boy in Lagos who starts selling water in traffic and slowly builds a logistics empire, teaching real lessons about cash flow and negotiation.\", theme: \"entrepreneurship\", lang: \"en\" },\r\n        { title: \"Afro-Unicorn\", desc: \"A futuristic manga set in 2050 where an Ethiopian entrepreneur aims to build Africa's first trillion-dollar company focused on space travel.\", theme: \"entrepreneurship\", lang: \"en\" },\r\n        { title: \"Market Mogul\", desc: \"A strategy-based manga set in the chaotic markets of Onitsha. The protagonist uses Sun Tzu\u2019s Art of War tactics to outsmart competitors in the retail business.\", theme: \"entrepreneurship\", lang: \"en\" },\r\n        { title: \"From Soil to Sale\", desc: \"An educational yet gripping story about a young Ghanian trying to modernize his family\u2019s cocoa farm, cutting out middlemen to create a bean-to-bar chocolate brand.\", theme: \"entrepreneurship\", lang: \"en\" },\r\n\r\n        \/\/ 4. Customer Journey (10 items: 5 FR, 5 EN)\r\n        { title: \"Le Sourire du Client\", desc: \"Dans un grand h\u00f4tel d'Abidjan, un nouveau concierge a le don de lire les besoins des clients avant qu'ils ne parlent. Il transforme chaque plainte en une exp\u00e9rience magique.\", theme: \"customer_journey\", lang: \"fr\" },\r\n        { title: \"Service 5 \u00c9toiles\", desc: \"Une \u00e9quipe de r\u00e9parateurs de service voyage \u00e0 travers l'Afrique pour aider des restaurants en faillite \u00e0 cause de leur mauvais accueil, en leur r\u00e9apprenant l'importance de l'hospitalit\u00e9 (Teranga).\", theme: \"customer_journey\", lang: \"fr\" },\r\n        { title: \"La Boutique Magique\", desc: \"Une petite commer\u00e7ante au S\u00e9n\u00e9gal fid\u00e9lise ses clients non pas avec des produits, mais avec une exp\u00e9rience d'achat inoubliable.\", theme: \"customer_journey\", lang: \"fr\" },\r\n        { title: \"Livraison Express : Cotonou\", desc: \"L'aventure effr\u00e9n\u00e9e d'une start-up de livraison qui promet de livrer n'importe quoi en 30 minutes. Le h\u00e9ros doit optimiser le parcours client malgr\u00e9 les embouteillages.\", theme: \"customer_journey\", lang: \"fr\" },\r\n        { title: \"L'Architecte des \u00c9motions\", desc: \"Une consultante sp\u00e9cialis\u00e9e en exp\u00e9rience client (UX) aide les banques traditionnelles \u00e0 se digitaliser sans perdre le contact humain.\", theme: \"customer_journey\", lang: \"fr\" },\r\n        { title: \"The Customer King\", desc: \"A comedy manga about a call center in Cairo. The protagonist is a Customer Service Samurai who uses extreme politeness and wit to calm down the angriest customers.\", theme: \"customer_journey\", lang: \"en\" },\r\n        { title: \"Queue Buster\", desc: \"A genius systems engineer in Lagos is obsessed with eliminating waiting lines. He redesigns the customer journey for hospitals and banks, saving lives and time.\", theme: \"customer_journey\", lang: \"en\" },\r\n        { title: \"The Feedback Loop\", desc: \"A mystery manga where a shop owner finds a magical suggestion box. Every complaint written inside becomes a quest he must solve to level up his business.\", theme: \"customer_journey\", lang: \"en\" },\r\n        { title: \"User Experience: Cape Town\", desc: \"A team of app developers realizes their product is failing because they never listened to their users. They embark on a journey to interview real people.\", theme: \"customer_journey\", lang: \"en\" },\r\n        { title: \"The Hospitality War\", desc: \"Two rival tourist resorts in Zanzibar compete. One focuses on luxury facilities, the other on personalized guest experiences. The manga shows why the latter wins.\", theme: \"customer_journey\", lang: \"en\" }\r\n    ];\r\n\r\n    \/\/ English UI Labels\r\n    const labels = {\r\n        lang: { \"fr\": \"French\", \"en\": \"English\" },\r\n        theme: {\r\n            \"harassment\": \"Workplace Harassment\",\r\n            \"drugs\": \"Anti-Drug Abuse\",\r\n            \"entrepreneurship\": \"Entrepreneurship\",\r\n            \"customer_journey\": \"Customer Journey\"\r\n        }\r\n    };\r\n\r\n    const grid = document.getElementById('pmb-grid');\r\n    const langFilter = document.getElementById('pmb-lang-filter');\r\n    const themeFilter = document.getElementById('pmb-theme-filter');\r\n    const modal = document.getElementById('pmb-modal');\r\n    const modalCloseBtn = document.querySelector('.pmb-modal-close');\r\n    const modalBackdrop = document.querySelector('.pmb-modal-backdrop');\r\n\r\n    \/\/ Shuffle Array for a random premium layout on load\r\n    function shuffle(array) {\r\n        let currentIndex = array.length, randomIndex;\r\n        while (currentIndex !== 0) {\r\n            randomIndex = Math.floor(Math.random() * currentIndex);\r\n            currentIndex--;\r\n            [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];\r\n        }\r\n        return array;\r\n    }\r\n\r\n    const shuffledMangas = shuffle([...mangas]);\r\n\r\n    function renderCards() {\r\n        grid.innerHTML = \"\";\r\n        const selectedLang = langFilter.value;\r\n        const selectedTheme = themeFilter.value;\r\n\r\n        const filtered = shuffledMangas.filter(m => {\r\n            return (selectedLang === \"all\" || m.lang === selectedLang) && \r\n                   (selectedTheme === \"all\" || m.theme === selectedTheme);\r\n        });\r\n\r\n        filtered.forEach((m, i) => {\r\n            const card = document.createElement('div');\r\n            card.className = 'pmb-card';\r\n            \/\/ Animation stagger effect\r\n            card.style.animationDelay = `${i * 0.05}s`;\r\n            \r\n            \/\/ External Download Link Placeholder\r\n            const extLink = `https:\/\/your-website.com\/download?file=${encodeURIComponent(m.title)}`;\r\n\r\n            card.innerHTML = `\r\n                <div class=\"pmb-card-cover theme-cover-${m.theme}\">\r\n                    ${themeIcons[m.theme]}\r\n                <\/div>\r\n                <div class=\"pmb-card-content\">\r\n                    <div class=\"pmb-badges\">\r\n                        <span class=\"pmb-badge badge-lang\">${labels.lang[m.lang]}<\/span>\r\n                        <span class=\"pmb-badge badge-theme\">${labels.theme[m.theme]}<\/span>\r\n                    <\/div>\r\n                    <h4 class=\"pmb-card-title\">${m.title}<\/h4>\r\n                    <p class=\"pmb-card-excerpt\">${m.desc}<\/p>\r\n                    <div class=\"pmb-card-action\">\r\n                        View Details <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\r\n                    <\/div>\r\n                <\/div>\r\n            `;\r\n            \r\n            card.addEventListener('click', () => {\r\n                document.getElementById('pmb-modal-title').innerText = m.title;\r\n                document.getElementById('pmb-modal-desc').innerText = m.desc;\r\n                document.getElementById('pmb-modal-lang').innerText = labels.lang[m.lang];\r\n                document.getElementById('pmb-modal-theme').innerText = labels.theme[m.theme];\r\n                \r\n                const cover = document.getElementById('pmb-modal-cover');\r\n                cover.className = `pmb-modal-cover theme-cover-${m.theme}`;\r\n                cover.innerHTML = themeIcons[m.theme];\r\n\r\n                document.getElementById('pmb-modal-download').href = extLink;\r\n                modal.classList.add('active');\r\n            });\r\n\r\n            grid.appendChild(card);\r\n        });\r\n    }\r\n\r\n    function closeModal() {\r\n        modal.classList.remove('active');\r\n    }\r\n\r\n    langFilter.addEventListener('change', renderCards);\r\n    themeFilter.addEventListener('change', renderCards);\r\n    modalCloseBtn.addEventListener('click', closeModal);\r\n    modalBackdrop.addEventListener('click', closeModal);\r\n\r\n    \/\/ Initial load\r\n    renderCards();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Storyboard Collection Impact Through Art Explore our curated collection of 40 manga storyboards designed to drive change, raise awareness, and inspire action across Africa. All LanguagesFrench (Fran\u00e7ais)English All ThemesWorkplace HarassmentAnti-Drug AbuseEntrepreneurshipCustomer Journey Download Storyboard<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-225761","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/megatraining.africa\/en\/wp-json\/wp\/v2\/pages\/225761","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/megatraining.africa\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/megatraining.africa\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/megatraining.africa\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/megatraining.africa\/en\/wp-json\/wp\/v2\/comments?post=225761"}],"version-history":[{"count":10,"href":"https:\/\/megatraining.africa\/en\/wp-json\/wp\/v2\/pages\/225761\/revisions"}],"predecessor-version":[{"id":225772,"href":"https:\/\/megatraining.africa\/en\/wp-json\/wp\/v2\/pages\/225761\/revisions\/225772"}],"wp:attachment":[{"href":"https:\/\/megatraining.africa\/en\/wp-json\/wp\/v2\/media?parent=225761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}