{"id":4831,"date":"2026-03-14T13:44:06","date_gmt":"2026-03-14T13:44:06","guid":{"rendered":"https:\/\/loyalfans.site\/?page_id=4831"},"modified":"2026-03-26T02:05:07","modified_gmt":"2026-03-26T02:05:07","slug":"home","status":"publish","type":"page","link":"https:\/\/app.sellaagri.com\/fr\/","title":{"rendered":"home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4831\" class=\"elementor elementor-4831\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7934534a e-con-full e-flex e-con e-parent\" data-id=\"7934534a\" data-element_type=\"container\" data-e-type=\"container\" id=\"sellaplatformAppHomeParent\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7b416f44 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"7b416f44\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Parkinsans:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n    <script>\n        tailwind.config = {\n            important: true,\n            theme: {\n                extend: {\n                    fontFamily: {\n                        sans: ['Parkinsans', 'sans-serif'],\n                    },\n                    colors: {\n                        brand: {\n                            green: '#0A6B32',\n                            yellow: '#eecd15',\n                        }\n                    }\n                }\n            }\n        }\n    <\/script>\n    <style>\n        .sellaplatformAppHome {\n            font-family: 'Parkinsans', sans-serif !important;\n            box-sizing: border-box;\n            -webkit-font-smoothing: antialiased;\n            color: #0f172a;\n            background-color: white;\n            line-height: 1.5;\n            text-align: left;\n        }\n\n        .sellaplatformAppHome * {\n            box-sizing: inherit;\n            font-family: inherit;\n        }\n\n        \/* Neutralize common Elementor\/Theme overrides without killing utility spacing *\/\n        .sellaplatformAppHome button,\n        .sellaplatformAppHome input,\n        .sellaplatformAppHome optgroup,\n        .sellaplatformAppHome select,\n        .sellaplatformAppHome textarea {\n            border: none;\n            background: none;\n            font: inherit;\n            color: inherit;\n            line-height: inherit;\n            text-transform: none;\n            box-shadow: none;\n        }\n\n        .sellaplatformAppHome button {\n            cursor: pointer;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        .sellaplatformAppHome a {\n            text-decoration: none;\n            color: inherit;\n        }\n\n        .sellaplatformAppHome ul,\n        .sellaplatformAppHome ol {\n            list-style: none !important;\n        }\n\n        .sellaplatformAppHome h1, \n        .sellaplatformAppHome h2, \n        .sellaplatformAppHome h3, \n        .sellaplatformAppHome h4, \n        .sellaplatformAppHome h5, \n        .sellaplatformAppHome h6 {\n            font-weight: 500;\n            color: #083b1a;\n            letter-spacing: -0.02em;\n        }\n\n        .sellaplatformAppHome p {\n            \/* Allow Tailwind to handle margins *\/\n        }\n\n        \/* Custom Component Overrides *\/\n        .sellaplatformAppHome .scrollbar-hide::-webkit-scrollbar {\n            display: none !important;\n        }\n        .sellaplatformAppHome .scrollbar-hide {\n            -ms-overflow-style: none !important;\n            scrollbar-width: none !important;\n        }\n\n        .sellaplatformAppHome .tab-active {\n            background-color: white !important;\n            color: #0f172a !important;\n            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;\n        }\n        .sellaplatformAppHome .tab-inactive {\n            color: rgba(5, 150, 105, 0.6) !important;\n        }\n        .sellaplatformAppHome .tab-inactive:hover {\n            color: #047857 !important;\n        }\n\n        .sellaplatformAppHome input[type=\"range\"] {\n            -webkit-appearance: none !important;\n            appearance: none !important;\n            background: transparent !important;\n            cursor: pointer !important;\n            width: 100% !important;\n            height: auto !important;\n            padding: 0 !important;\n            margin: 0 !important;\n        }\n        .sellaplatformAppHome input[type=\"range\"]::-webkit-slider-thumb {\n            -webkit-appearance: none !important;\n            appearance: none !important;\n            height: 20px !important;\n            width: 20px !important;\n            background: #0A6B32 !important;\n            border: 4px solid white !important;\n            border-radius: 50% !important;\n            box-shadow: 0 4px 6px -1px rgb(0 0 0 \/ 0.1) !important;\n            margin-top: -8px !important;\n        }\n        .sellaplatformAppHome input[type=\"range\"]::-webkit-slider-runnable-track {\n            width: 100% !important;\n            height: 6px !important;\n            cursor: pointer !important;\n            background: #f1f5f9 !important;\n            border-radius: 3px !important;\n        }\n\n        .sellaplatformAppHome .solution-btn-active {\n            background-color: white !important;\n            color: #0A6B32 !important;\n            box-shadow: 0 20px 25px -5px rgb(16 185 129 \/ 0.5) !important;\n            border-color: #ecfdf5 !important;\n        }\n        .sellaplatformAppHome .solution-icon-active {\n            background-color: #0A6B32 !important;\n            color: white !important;\n        }\n\n        .sellaplatformAppHome section {\n            display: block !important;\n        }\n\n        \/* Loading Spinner *\/\n        .sellaplatform-loader-overlay {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: white;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            z-index: 1000;\n            transition: opacity 0.4s ease-out, visibility 0.4s;\n        }\n\n        .sellaplatform-loader {\n            width: 48px;\n            height: 48px;\n            border: 5px solid #f3f3f3;\n            border-top: 5px solid #0A6B32;\n            border-radius: 50%;\n            animation: sellaplatform-spin 1s linear infinite;\n        }\n\n        @keyframes sellaplatform-spin {\n            0% { transform: rotate(0deg); }\n            100% { transform: rotate(360deg); }\n        }\n\n        .sellaplatform-content-hidden {\n            opacity: 0;\n            visibility: hidden;\n        }\n\n        .sellaplatform-content-visible {\n            opacity: 1;\n            visibility: visible;\n            transition: opacity 0.5s ease-in;\n        }\n    <\/style>\n<\/head>\n<body class=\"bg-white\">\n\n    <div class=\"sellaplatformAppHome relative min-h-[400px]\">\n        <!-- Loading Overlay -->\n        <div id=\"sellaplatform-loader\" class=\"sellaplatform-loader-overlay\">\n            <div class=\"sellaplatform-loader\"><\/div>\n        <\/div>\n\n        <div id=\"company-page\" class=\"sellaplatform-content-hidden\">\n        <!-- Creative Hero Section -->\n        <section class=\"relative pt-12 pb-24 overflow-hidden bg-gradient-to-b from-[#0A6B32]\/10 via-white to-white min-h-[90vh] flex items-center\">\n            <!-- Faded Background Icons -->\n            <div class=\"absolute inset-0 pointer-events-none overflow-hidden bg-icons-container\">\n                <!-- Icons injected by JS -->\n            <\/div>\n\n            <div class=\"absolute inset-0 opacity-[0.03] pointer-events-none\">\n                <div class=\"absolute top-0 left-1\/2 -translate-x-1\/2 w-[1400px] h-[800px] bg-[url('https:\/\/www.transparenttextures.com\/patterns\/world-map.png')] bg-center bg-no-repeat bg-contain\"><\/div>\n            <\/div>\n            \n            <div class=\"max-w-7xl mx-auto px-6 relative z-10 w-full\">\n                <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-16 items-start\">\n                    \n                    <!-- Left Side: Content -->\n                    <div class=\"space-y-10 lg:order-first\">\n                        <div class=\"flex flex-col items-center lg:items-start text-center lg:text-left space-y-8\">\n                            <!-- Award Badge -->\n                            <div class=\"inline-flex items-center gap-4 px-6 py-3 bg-[#eecd15]\/10 rounded-2xl border border-[#eecd15]\/20\">\n                                <div class=\"w-10 h-10 bg-[#eecd15] rounded-xl flex items-center justify-center text-[#0A6B32] shadow-lg shadow-[#eecd15]\/20\">\n                                    <i data-lucide=\"trending-up\" class=\"w-6 h-6\"><\/i>\n                                <\/div>\n                                <div>\n                                    <p class=\"text-[10px] font-black text-[#0A6B32] uppercase tracking-[0.2em]\">Best Digital Platform 2026<\/p>\n                                    <p class=\"text-xs font-bold text-slate-500\">Ministry of Agriculture & Trade<\/p>\n                                <\/div>\n                            <\/div>\n\n                            <h1 class=\"text-4xl md:text-5xl tracking-tighter leading-[1.1]\">\n                                The Most <span class=\"text-[#0A6B32]\">Trusted Platform<\/span> <br \/>\n                                for Farmers & <br \/>\n                                <span class=\"text-[#eecd15]\">Agricultural Financing<\/span>\n                            <\/h1>\n\n                            <p class=\"text-lg text-slate-600 max-w-xl font-medium leading-relaxed\">\n                                Direct marketplace with 12k+ Moroccan farmers, with small loans approved in hours \u2014 no bank, no complexity, no intermediary.\n                            <\/p>\n\n                            <div class=\"flex flex-wrap gap-4 w-full justify-center lg:justify-start\">\n                                <button class=\"bg-[#0A6B32] text-white px-10 py-5 rounded-[24px] font-semibold uppercase tracking-tighter text-sm hover:scale-105 transition-all active:scale-95 shadow-2xl shadow-[#0A6B32]\/20 border-b-2 border-[#eecd15] flex items-center gap-3\">\n                                    <i data-lucide=\"shopping-bag\" class=\"w-5 h-5\"><\/i>\n                                    Browse Marketplace\n                                <\/button>\n                                <button class=\"bg-[#eecd15]\/10 text-[#0A6B32] border border-[#eecd15]\/30 px-10 py-5 rounded-[24px] font-semibold uppercase tracking-tighter text-sm hover:bg-[#eecd15]\/20 transition-all flex items-center gap-3\">\n                                    <i data-lucide=\"wallet\" class=\"w-5 h-5\"><\/i>\n                                    Request Financing\n                                <\/button>\n                            <\/div>\n\n                            <!-- Location Tags -->\n                            <div class=\"pt-8 flex flex-wrap gap-3 justify-center lg:justify-start\">\n                                <p class=\"w-full text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2\">Active Regions<\/p>\n                                <span class=\"px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest bg-[#0A6B32] text-white\">Souss-Massa<\/span>\n                                <span class=\"px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest bg-slate-100 text-slate-500 hover:bg-slate-200\">Fes-Meknes<\/span>\n                                <span class=\"px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest bg-slate-100 text-slate-500 hover:bg-slate-200\">Marrakech<\/span>\n                                <span class=\"px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest bg-slate-100 text-slate-500 hover:bg-slate-200\">Gharb<\/span>\n                                <span class=\"px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest bg-slate-100 text-slate-500 hover:bg-slate-200\">+4 More<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Right Side: Interactive Card -->\n                    <div class=\"bg-white rounded-[40px] shadow-2xl shadow-slate-200\/60 border border-slate-100 p-4 overflow-hidden w-full max-w-[540px] mx-auto lg:order-last max-h-[600px] flex flex-col\">\n                        <!-- Tabs Header -->\n                        <div class=\"flex bg-emerald-50\/50 rounded-[24px] p-1.5 mb-6 tab-header\">\n                            <button data-tab-id=\"credit\" id=\"tab-btn-credit\" class=\"flex-1 flex items-center justify-center gap-3 py-3 rounded-[20px] text-xs font-bold transition-all tab-active tab-trigger\">\n                                <i data-lucide=\"wallet\" class=\"w-5 h-5\"><\/i>\n                                <span class=\"hidden sm:inline\">Micro Credit<\/span>\n                            <\/button>\n                            <button data-tab-id=\"market\" id=\"tab-btn-market\" class=\"flex-1 flex items-center justify-center gap-3 py-3 rounded-[20px] text-xs font-bold transition-all tab-inactive tab-trigger\">\n                                <i data-lucide=\"shopping-bag\" class=\"w-5 h-5\"><\/i>\n                                <span class=\"hidden sm:inline\">Marketplace<\/span>\n                            <\/button>\n                            <button data-tab-id=\"events\" id=\"tab-btn-events\" class=\"flex-1 flex items-center justify-center gap-3 py-3 rounded-[20px] text-xs font-bold transition-all tab-inactive tab-trigger\">\n                                <i data-lucide=\"calendar\" class=\"w-5 h-5\"><\/i>\n                                <span class=\"hidden sm:inline\">Events Calendar<\/span>\n                            <\/button>\n                        <\/div>\n\n                        <!-- Tab Content -->\n                        <div class=\"px-2 pb-2 flex-1 overflow-y-auto scrollbar-hide\" id=\"tab-viewport\">\n                            <!-- Content injected by JS -->\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Branded Promo Section -->\n        <section class=\"py-24 px-6 bg-gradient-to-b from-[#fdfbed] to-white\">\n            <div class=\"max-w-7xl mx-auto\">\n                <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-16 items-center\">\n                    <div class=\"space-y-8\">\n                        <div class=\"space-y-4\">\n                            <div class=\"w-12 h-1.5 bg-[#eecd15] rounded-full\"><\/div>\n                            <h2 class=\"text-4xl md:text-5xl tracking-tighter leading-tight\">\n                                A Unified Ecosystem <br \/>\n                                <span class=\"text-[#0A6B32]\">For Modern Trade<\/span>\n                            <\/h2>\n                        <\/div>\n                        <p class=\"text-lg text-slate-600 font-medium leading-relaxed\">\n                            We integrate finance, marketplace, and smart sourcing into one unified platform to eliminate traditional barriers. Our goal is to create a seamless experience for all stakeholders in the agricultural value chain.\n                        <\/p>\n                        <div class=\"grid grid-cols-2 gap-6\">\n                            <div class=\"p-6 bg-white rounded-2xl border border-slate-100 shadow-sm\">\n                                <p class=\"text-3xl font-black text-[#0A6B32] mb-1\">10k+<\/p>\n                                <p class=\"text-xs font-bold text-slate-400 uppercase tracking-widest\">Active Farmers<\/p>\n                            <\/div>\n                            <div class=\"p-6 bg-white rounded-2xl border border-slate-100 shadow-sm\">\n                                <p class=\"text-3xl font-black text-[#0A6B32] mb-1\">$50M+<\/p>\n                                <p class=\"text-xs font-bold text-slate-400 uppercase tracking-widest\">Trade Volume<\/p>\n                            <\/div>\n                            <div class=\"p-6 bg-white rounded-2xl border border-slate-100 shadow-sm\">\n                                <p class=\"text-3xl font-black text-[#0A6B32] mb-1\">12+<\/p>\n                                <p class=\"text-xs font-bold text-slate-400 uppercase tracking-widest\">Countries<\/p>\n                            <\/div>\n                            <div class=\"p-6 bg-white rounded-2xl border border-slate-100 shadow-sm\">\n                                <p class=\"text-3xl font-black text-[#0A6B32] mb-1\">150+<\/p>\n                                <p class=\"text-xs font-bold text-slate-400 uppercase tracking-widest\">Partners<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"relative\">\n                        <div class=\"relative z-10 overflow-hidden bg-[#0A6B32] rounded-[40px] p-10 text-white shadow-2xl shadow-[#0A6B32]\/20\">\n                            <div class=\"absolute inset-0 opacity-10 pointer-events-none\">\n                                <div class=\"absolute top-1\/4 -left-4 w-32 h-8 bg-white rounded-full rotate-12 blur-sm\"><\/div>\n                                <div class=\"absolute bottom-1\/4 -right-8 w-40 h-10 bg-white rounded-full -rotate-12 blur-sm\"><\/div>\n                                <div class=\"absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-64 h-64 border border-white rounded-full\"><\/div>\n                            <\/div>\n\n                            <div class=\"relative z-10\">\n                                <h2 class=\"text-4xl mb-6 leading-tight text-[#eecd15]\">\n                                    Join the Sella <br \/> Network Today\n                                <\/h2>\n                                <p class=\"text-white\/70 text-lg font-medium mb-10 leading-relaxed\">\n                                    Connect with thousands of industry professionals and scale your agricultural business with our advanced tools.\n                                <\/p>\n                                <div class=\"space-y-4 mb-10\">\n                                    <div class=\"flex items-center gap-3\">\n                                        <div class=\"w-5 h-5 rounded-full bg-[#eecd15] flex items-center justify-center\">\n                                            <i data-lucide=\"check\" class=\"w-3 h-3 text-[#0A6B32] stroke-[4]\"><\/i>\n                                        <\/div>\n                                        <span class=\"font-bold text-sm\">Real-time market insights<\/span>\n                                    <\/div>\n                                    <div class=\"flex items-center gap-3\">\n                                        <div class=\"w-5 h-5 rounded-full bg-[#eecd15] flex items-center justify-center\">\n                                            <i data-lucide=\"check\" class=\"w-3 h-3 text-[#0A6B32] stroke-[4]\"><\/i>\n                                        <\/div>\n                                        <span class=\"font-bold text-sm\">Secure payment processing<\/span>\n                                    <\/div>\n                                    <div class=\"flex items-center gap-3\">\n                                        <div class=\"w-5 h-5 rounded-full bg-[#eecd15] flex items-center justify-center\">\n                                            <i data-lucide=\"check\" class=\"w-3 h-3 text-[#0A6B32] stroke-[4]\"><\/i>\n                                        <\/div>\n                                        <span class=\"font-bold text-sm\">Verified supplier network<\/span>\n                                    <\/div>\n                                    <div class=\"flex items-center gap-3\">\n                                        <div class=\"w-5 h-5 rounded-full bg-[#eecd15] flex items-center justify-center\">\n                                            <i data-lucide=\"check\" class=\"w-3 h-3 text-[#0A6B32] stroke-[4]\"><\/i>\n                                        <\/div>\n                                        <span class=\"font-bold text-sm\">Logistics optimization<\/span>\n                                    <\/div>\n                                <\/div>\n                                <button class=\"w-full bg-white text-[#0A6B32] py-5 rounded-2xl font-semibold uppercase tracking-tighter text-sm flex items-center justify-center gap-2 hover:bg-[#eecd15] transition-all group border-b-2 border-[#eecd15]\">\n                                    <span>Create Your Account<\/span>\n                                    <i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform\"><\/i>\n                                <\/button>\n                            <\/div>\n                        <\/div>\n                        <div class=\"absolute -bottom-6 -right-6 w-32 h-32 bg-[#eecd15] rounded-3xl -z-10 shadow-xl\"><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Solutions Section -->\n        <section class=\"py-32 bg-white overflow-hidden\">\n            <div class=\"max-w-7xl mx-auto px-6\">\n                <div class=\"mb-16\">\n                    <h2 class=\"text-4xl md:text-5xl tracking-tighter mb-12\">\n                        One platform for all your business needs\n                    <\/h2>\n\n                    <!-- Horizontal Switcher -->\n                    <div class=\"bg-[#e2f4ef] p-2 rounded-[32px] border border-emerald-100 flex flex-wrap gap-2\" id=\"sol-switcher\">\n                        <!-- Buttons injected by JS -->\n                    <\/div>\n                <\/div>\n\n                <!-- Content Area -->\n                <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-16 items-center\">\n                    <!-- Left: Text -->\n                    <div class=\"lg:col-span-4 space-y-8\" id=\"sol-text-area\">\n                        <!-- Content injected by JS -->\n                    <\/div>\n\n                    <!-- Right: Visual Preview -->\n                    <div class=\"lg:col-span-8\">\n                        <div class=\"relative bg-slate-50 rounded-[48px] p-8 md:p-16 min-h-[500px] flex items-center justify-center overflow-hidden border border-slate-100\" id=\"sol-preview-area\">\n                            <!-- Content injected by JS -->\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n    <\/div>\n    <\/div>\n\n    <script>\n        (function() {\n            \/\/ --- Scoping Helper ---\n            const root = document.querySelector('.sellaplatformAppHome');\n            if (!root) return;\n\n            \/\/ --- Configuration & Data ---\n            const backgroundIcons = [\n                { icon: 'ship', top: '10%', left: '5%', size: 32, rotate: -15 },\n                { icon: 'plane', top: '15%', left: '85%', size: 40, rotate: 20 },\n                { icon: 'truck', top: '40%', left: '92%', size: 28, rotate: 10 },\n                { icon: 'anchor', top: '70%', left: '8%', size: 36, rotate: -25 },\n                { icon: 'package', top: '80%', left: '80%', size: 30, rotate: 15 },\n                { icon: 'ship', top: '55%', left: '3%', size: 24, rotate: 10 },\n                { icon: 'plane', top: '5%', left: '45%', size: 34, rotate: -10 },\n                { icon: 'truck', top: '85%', left: '40%', size: 38, rotate: 5 },\n                { icon: 'anchor', top: '25%', left: '15%', size: 26, rotate: 30 },\n                { icon: 'bar-chart-3', top: '60%', left: '95%', size: 32, rotate: -20 },\n            ];\n\n            const solutions = [\n                { id: 'events', title: \"Events Calendar\", icon: 'calendar', description: \"Stay connected with the agricultural community through our curated list of trade fairs, summits, and exhibitions across Morocco.\" },\n                { id: 'marketplace', title: \"Marketplace\", icon: 'shopping-bag', description: \"A direct digital bridge between Moroccan producers and global buyers. Sell your harvest at fair prices or source fresh products directly from the source.\" },\n                { id: 'credit', title: \"Micro Credit\", icon: 'wallet', description: \"Empowering small-scale farmers with instant financing. Get approved in hours without the complexity of traditional banking.\" },\n                { id: 'sourcing', title: \"Smart Sourcing\", icon: 'search', description: \"Optimize your supply chain with our intelligent sourcing tools. Connect with verified suppliers and get the best rates for your agricultural needs.\" },\n                { id: 'cargo', title: \"Unclaimed Packages\", icon: 'package', description: \"Access exclusive deals on unclaimed packages. A unique opportunity to source equipment and products at significantly reduced prices.\" }\n            ];\n\n            \/\/ --- State ---\n            let activeTab = 'credit';\n            let loanAmount = 25000;\n            let loanPeriod = 12;\n            let activeSolution = 'events';\n\n            \/\/ --- Initialization ---\n            function init() {\n                renderBackgroundIcons();\n                renderSolutionSwitcher();\n                attachTabListeners();\n                updateTab();\n                updateSolution();\n                refreshIcons();\n\n                \/\/ Hide loader and show content\n                setTimeout(() => {\n                    const loader = root.querySelector('#sellaplatform-loader');\n                    const content = root.querySelector('#company-page');\n                    if (loader) loader.style.opacity = '0';\n                    if (loader) loader.style.visibility = 'hidden';\n                    if (content) {\n                        content.classList.remove('sellaplatform-content-hidden');\n                        content.classList.add('sellaplatform-content-visible');\n                    }\n                    \/\/ Remove loader from DOM after transition\n                    setTimeout(() => loader && loader.remove(), 400);\n                }, 300); \/\/ Small delay to ensure everything is painted\n            }\n\n            function attachTabListeners() {\n                const triggers = root.querySelectorAll('.tab-trigger');\n                triggers.forEach(trigger => {\n                    trigger.onclick = () => {\n                        activeTab = trigger.dataset.tabId;\n                        updateTab();\n                    };\n                });\n            }\n\n            function refreshIcons() {\n                if (window.lucide) {\n                    lucide.createIcons({\n                        root: root,\n                        attrs: { 'stroke-width': 2 }\n                    });\n                }\n            }\n\n            \/\/ --- Rendering Logic ---\n            function renderBackgroundIcons() {\n                const container = root.querySelector('.bg-icons-container');\n                if (!container) return;\n                container.innerHTML = '';\n                backgroundIcons.forEach(item => {\n                    const div = document.createElement('div');\n                    div.style.position = 'absolute';\n                    div.style.top = item.top;\n                    div.style.left = item.left;\n                    div.style.transform = `rotate(${item.rotate}deg)`;\n                    div.style.opacity = '0.07';\n                    div.innerHTML = `<i data-lucide=\"${item.icon}\" style=\"width: ${item.size}px; height: ${item.size}px;\" class=\"text-[#0A6B32]\"><\/i>`;\n                    container.appendChild(div);\n                });\n            }\n\n            function renderSolutionSwitcher() {\n                const container = root.querySelector('#sol-switcher');\n                if (!container) return;\n                container.innerHTML = solutions.map(sol => `\n                    <button\n                        data-sol-id=\"${sol.id}\"\n                        class=\"sol-switcher-btn flex items-center gap-3 px-6 py-4 rounded-[24px] transition-all ${activeSolution === sol.id ? 'solution-btn-active' : 'text-emerald-800\/60 hover:text-[#0A6B32]'}\"\n                    >\n                        <div class=\"w-10 h-10 rounded-xl flex items-center justify-center transition-colors ${activeSolution === sol.id ? 'solution-icon-active' : 'bg-white border border-emerald-50'}\">\n                            <i data-lucide=\"${sol.icon}\" class=\"w-5 h-5\"><\/i>\n                        <\/div>\n                        <span class=\"font-bold text-sm whitespace-nowrap\">${sol.title}<\/span>\n                    <\/button>\n                `).join('');\n\n                container.querySelectorAll('.sol-switcher-btn').forEach(btn => {\n                    btn.onclick = () => switchSolution(btn.dataset.solId);\n                });\n            }\n\n            \/\/ --- Tab Logic ---\n            function updateTab() {\n                const viewport = root.querySelector('#tab-viewport');\n                if (!viewport) return;\n                \n                \/\/ Update buttons\n                ['credit', 'market', 'events'].forEach(id => {\n                    const btn = root.querySelector(`#tab-btn-${id}`);\n                    if (!btn) return;\n                    if (id === activeTab) {\n                        btn.classList.remove('tab-inactive');\n                        btn.classList.add('tab-active');\n                    } else {\n                        btn.classList.remove('tab-active');\n                        btn.classList.add('tab-inactive');\n                    }\n                });\n\n                if (activeTab === 'credit') {\n                    const monthlyPayment = Math.round((loanAmount * (1 + 0.18)) \/ loanPeriod);\n                    const totalRepayment = Math.round(loanAmount * (1 + 0.18));\n                    \n                    viewport.innerHTML = `\n                        <div class=\"space-y-6\">\n                            <div class=\"bg-[#1B4332] rounded-[28px] p-6 text-white relative overflow-hidden shadow-lg\">\n                                <div class=\"flex justify-between items-start\">\n                                    <div class=\"space-y-1\">\n                                        <p class=\"text-[10px] font-bold uppercase tracking-widest text-white\/50\">Monthly Installment<\/p>\n                                        <div class=\"flex items-baseline gap-2\">\n                                            <span class=\"text-3xl font-extrabold tracking-tighter\">${monthlyPayment.toLocaleString()}<\/span>\n                                            <span class=\"text-xs font-bold opacity-70\">MAD<\/span>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"text-right space-y-1\">\n                                        <p class=\"text-[10px] font-bold uppercase tracking-widest text-white\/50\">Loan Amount<\/p>\n                                        <div class=\"flex items-baseline gap-2 justify-end\">\n                                            <span class=\"text-3xl font-extrabold tracking-tighter\">${loanAmount.toLocaleString()}<\/span>\n                                            <span class=\"text-xs font-bold opacity-70\">MAD<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n\n                            <div class=\"space-y-8 py-2\">\n                                <div class=\"space-y-4\">\n                                    <div class=\"flex justify-between items-center\">\n                                        <label class=\"text-xs font-bold text-slate-800\">Loan Amount<\/label>\n                                        <span class=\"text-lg font-extrabold text-[#0A6B32]\">${loanAmount.toLocaleString()} MAD<\/span>\n                                    <\/div>\n                                    <div class=\"relative h-1.5 bg-slate-100 rounded-full\">\n                                        <div class=\"absolute h-full bg-[#0A6B32] rounded-full\" style=\"width: ${((loanAmount - 5000) \/ 95000) * 100}%\"><\/div>\n                                        <input type=\"range\" min=\"5000\" max=\"100000\" step=\"1000\" value=\"${loanAmount}\" id=\"loan-amount-range\" class=\"absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10\">\n                                        <div class=\"absolute w-5 h-5 bg-[#0A6B32] border-4 border-white rounded-full shadow-md -top-1.5 -translate-x-1\/2 pointer-events-none\" style=\"left: ${((loanAmount - 5000) \/ 95000) * 100}%\"><\/div>\n                                    <\/div>\n                                <\/div>\n\n                                <div class=\"space-y-4\">\n                                    <div class=\"flex justify-between items-center\">\n                                        <label class=\"text-xs font-bold text-slate-800\">Repayment Period<\/label>\n                                        <span class=\"text-lg font-extrabold text-[#0A6B32]\">${loanPeriod} Months<\/span>\n                                    <\/div>\n                                    <div class=\"relative h-1.5 bg-slate-100 rounded-full\">\n                                        <div class=\"absolute h-full bg-[#0A6B32] rounded-full\" style=\"width: ${((loanPeriod - 3) \/ 33) * 100}%\"><\/div>\n                                        <input type=\"range\" min=\"3\" max=\"36\" step=\"3\" value=\"${loanPeriod}\" id=\"loan-period-range\" class=\"absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10\">\n                                        <div class=\"absolute w-5 h-5 bg-[#0A6B32] border-4 border-white rounded-full shadow-md -top-1.5 -translate-x-1\/2 pointer-events-none\" style=\"left: ${((loanPeriod - 3) \/ 33) * 100}%\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n\n                            <div class=\"grid grid-cols-3 gap-3\">\n                                <div class=\"bg-emerald-50\/50 p-4 rounded-2xl text-center border border-emerald-100\/20\">\n                                    <p class=\"text-base font-extrabold text-[#0A6B32]\">18%<\/p>\n                                    <p class=\"text-[9px] font-bold text-slate-400 uppercase tracking-widest mt-1\">Interest<\/p>\n                                <\/div>\n                                <div class=\"bg-emerald-50\/50 p-4 rounded-2xl text-center border border-emerald-100\/20\">\n                                    <p class=\"text-base font-extrabold text-[#0A6B32]\">${totalRepayment.toLocaleString()}<\/p>\n                                    <p class=\"text-[9px] font-bold text-slate-400 uppercase tracking-widest mt-1\">Total<\/p>\n                                <\/div>\n                                <div class=\"bg-emerald-50\/50 p-4 rounded-2xl text-center border border-emerald-100\/20\">\n                                    <p class=\"text-base font-extrabold text-[#0A6B32]\">24h<\/p>\n                                    <p class=\"text-[9px] font-bold text-slate-400 uppercase tracking-widest mt-1\">Approval<\/p>\n                                <\/div>\n                            <\/div>\n\n                            <div class=\"pt-2\">\n                                <button class=\"w-full bg-[#0A6B32] text-white py-4 rounded-[24px] text-sm font-semibold uppercase tracking-tighter shadow-lg shadow-[#0A6B32]\/20 hover:scale-[1.01] transition-all active:scale-95 flex items-center justify-center gap-3 border-b-2 border-[#eecd15]\">\n                                    <i data-lucide=\"wallet\" class=\"w-4 h-4\"><\/i>\n                                    Apply Now \u2014 Free\n                                <\/button>\n                            <\/div>\n                        <\/div>\n                    `;\n\n                    root.querySelector('#loan-amount-range').oninput = (e) => updateLoanAmount(e.target.value);\n                    root.querySelector('#loan-period-range').oninput = (e) => updateLoanPeriod(e.target.value);\n\n                } else if (activeTab === 'market') {\n                    viewport.innerHTML = `\n                        <div class=\"space-y-4\">\n                            <h3 class=\"text-xl tracking-tight\">Marketplace Accounts<\/h3>\n                            <p class=\"text-xs text-slate-500 font-medium\">Choose your role to start trading on Sella's unified digital marketplace.<\/p>\n                            \n                            <div class=\"space-y-3\">\n                                ${[\n                                    { role: \"Farmer\", desc: \"Sell your harvest and get financing\", icon: 'trending-up' },\n                                    { role: \"Supplier\", desc: \"Provide equipment and seeds\", icon: 'package' },\n                                    { role: \"Buyer\", desc: \"Source fresh products directly\", icon: 'shopping-bag' }\n                                ].map(item => `\n                                    <div class=\"flex items-center gap-4 p-4 bg-slate-50 rounded-2xl border border-emerald-100\/50 hover:border-[#0A6B32]\/20 hover:bg-white transition-all cursor-pointer group\">\n                                        <div class=\"w-10 h-10 rounded-xl bg-emerald-50 text-[#0A6B32] flex items-center justify-center group-hover:scale-110 transition-transform\">\n                                            <i data-lucide=\"${item.icon}\" class=\"w-5 h-5\"><\/i>\n                                        <\/div>\n                                        <div class=\"flex-1\">\n                                            <h4 class=\"tracking-tight text-sm\">${item.role}<\/h4>\n                                            <p class=\"text-[10px] text-slate-500 font-medium\">${item.desc}<\/p>\n                                        <\/div>\n                                        <i data-lucide=\"arrow-up-right\" class=\"w-4 h-4 text-slate-300 group-hover:text-[#0A6B32] transition-colors\"><\/i>\n                                    <\/div>\n                                `).join('')}\n                            <\/div>\n\n                            <div class=\"pt-4\">\n                                <button class=\"w-full bg-[#0A6B32] text-white py-4 rounded-[20px] text-sm font-extrabold uppercase tracking-tighter shadow-lg shadow-[#0A6B32]\/10 hover:scale-[1.01] transition-all active:scale-95 flex items-center justify-center gap-3 border-b-4 border-[#1B4332]\">\n                                    <i data-lucide=\"user-plus\" class=\"w-4 h-4\"><\/i>\n                                    Create Account\n                                <\/button>\n                            <\/div>\n                        <\/div>\n                    `;\n                } else if (activeTab === 'events') {\n                    viewport.innerHTML = `\n                        <div class=\"space-y-3\">\n                            <div class=\"flex justify-between items-end\">\n                                <h3 class=\"text-xl tracking-tight\">Upcoming Events<\/h3>\n                                <button class=\"text-[10px] font-bold text-[#0A6B32] uppercase tracking-widest hover:underline\">View All<\/button>\n                            <\/div>\n                            ${[\n                                { title: \"SIAM Meknes 2026\", date: \"April 22-28, 2026\", loc: \"Meknes, Morocco\", img: \"https:\/\/images.unsplash.com\/photo-1533900298318-6b8da08a523e?auto=format&fit=crop&q=80&w=400\" },\n                                { title: \"Agro-Tech Summit\", date: \"May 15, 2026\", loc: \"Casablanca\", img: \"https:\/\/images.unsplash.com\/photo-1464226184884-fa280b87c399?auto=format&fit=crop&q=80&w=400\" },\n                                { title: \"Sustainable Farming\", date: \"June 10, 2026\", loc: \"Agadir\", img: \"https:\/\/images.unsplash.com\/photo-1500382017468-9049fed747ef?auto=format&fit=crop&q=80&w=400\" }\n                            ].map(ev => `\n                                <div class=\"flex gap-3 p-3 bg-slate-50 rounded-2xl hover:bg-white hover:shadow-md transition-all cursor-pointer group border border-emerald-100\/50 hover:border-[#0A6B32]\/20\">\n                                    <div class=\"w-16 h-16 rounded-xl overflow-hidden flex-shrink-0\">\n                                        <img decoding=\"async\" src=\"${ev.img}\" alt=\"${ev.title}\" class=\"w-full h-full object-cover group-hover:scale-110 transition-transform duration-500\">\n                                    <\/div>\n                                    <div class=\"flex-1 min-w-0\">\n                                        <h4 class=\"tracking-tight truncate text-sm\">${ev.title}<\/h4>\n                                        <div class=\"flex items-center gap-2 mt-1\">\n                                            <span class=\"text-[9px] font-bold text-slate-400 uppercase tracking-widest flex items-center gap-1\">\n                                                <i data-lucide=\"calendar\" class=\"w-3 h-3\"><\/i> ${ev.date}\n                                            <\/span>\n                                        <\/div>\n                                        <span class=\"text-[9px] font-bold text-slate-400 uppercase tracking-widest flex items-center gap-1 mt-1\">\n                                            <i data-lucide=\"map-pin\" class=\"w-3 h-3\"><\/i> ${ev.loc}\n                                        <\/span>\n                                    <\/div>\n                                <\/div>\n                            `).join('')}\n                            <div class=\"pt-4\">\n                                <button class=\"w-full bg-[#0A6B32] text-white py-4 rounded-[20px] text-sm font-semibold uppercase tracking-tighter shadow-lg shadow-[#0A6B32]\/10 hover:scale-[1.01] transition-all active:scale-95 flex items-center justify-center gap-3 border-b-4 border-[#1B4332]\">\n                                    <i data-lucide=\"calendar\" class=\"w-4 h-4\"><\/i>\n                                    Full Calendar\n                                <\/button>\n                            <\/div>\n                        <\/div>\n                    `;\n                }\n                refreshIcons();\n            }\n\n            function updateLoanAmount(val) {\n                loanAmount = parseInt(val);\n                updateTab();\n            }\n\n            function updateLoanPeriod(val) {\n                loanPeriod = parseInt(val);\n                updateTab();\n            }\n\n            \/\/ --- Solution Logic ---\n            function switchSolution(id) {\n                activeSolution = id;\n                updateSolution();\n            }\n\n            function updateSolution() {\n                const textArea = root.querySelector('#sol-text-area');\n                const previewArea = root.querySelector('#sol-preview-area');\n                if (!textArea || !previewArea) return;\n\n                const sol = solutions.find(s => s.id === activeSolution);\n\n                \/\/ Update switcher buttons\n                solutions.forEach(s => {\n                    const btn = root.querySelector(`[data-sol-id=\"${s.id}\"]`);\n                    if (!btn) return;\n                    const icon = btn.querySelector('div');\n                    if (s.id === activeSolution) {\n                        btn.classList.add('solution-btn-active');\n                        btn.classList.remove('text-emerald-800\/60', 'hover:text-[#0A6B32]');\n                        icon.classList.add('solution-icon-active');\n                        icon.classList.remove('bg-white', 'border', 'border-emerald-50');\n                    } else {\n                        btn.classList.remove('solution-btn-active');\n                        btn.classList.add('text-emerald-800\/60', 'hover:text-[#0A6B32]');\n                        icon.classList.remove('solution-icon-active');\n                        icon.classList.add('bg-white', 'border', 'border-emerald-50');\n                    }\n                });\n\n                \/\/ Update text area\n                textArea.innerHTML = `\n                    <div class=\"space-y-6\">\n                        <h3 class=\"text-4xl tracking-tight\">${sol.title}<\/h3>\n                        <p class=\"text-lg text-slate-500 font-medium leading-relaxed\">${sol.description}<\/p>\n                        <button class=\"inline-flex items-center gap-3 px-8 py-4 rounded-2xl border-2 border-[#0A6B32] text-[#0A6B32] font-semibold uppercase tracking-tighter text-sm hover:bg-[#0A6B32] hover:text-white transition-all group\">\n                            <span>Learn more<\/span>\n                            <i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform\"><\/i>\n                        <\/button>\n                    <\/div>\n                `;\n\n                \/\/ Update preview area\n                let previewContent = '';\n                if (activeSolution === 'events') {\n                    previewContent = `\n                        <div class=\"relative w-full max-w-2xl\">\n                            <div class=\"absolute top-1\/2 left-1\/2 -translate-x-[60%] -translate-y-[40%] w-[80%] aspect-[4\/3] bg-white rounded-3xl shadow-xl border border-emerald-50 rotate-[-8deg] opacity-40\"><\/div>\n                            <div class=\"absolute top-1\/2 left-1\/2 -translate-x-[40%] -translate-y-[60%] w-[80%] aspect-[4\/3] bg-white rounded-3xl shadow-xl border border-emerald-50 rotate-[4deg] opacity-60\"><\/div>\n                            <div class=\"relative bg-white rounded-[32px] p-8 shadow-2xl border border-emerald-50 space-y-6 z-10\">\n                                <div class=\"flex items-center gap-3\">\n                                    <div class=\"px-3 py-1 bg-emerald-50 rounded-full text-[10px] font-black text-[#0A6B32] uppercase tracking-widest flex items-center gap-2\">\n                                        <div class=\"w-1.5 h-1.5 rounded-full bg-[#eecd15]\"><\/div>\n                                        Agricultural\n                                    <\/div>\n                                <\/div>\n                                <h4 class=\"text-2xl md:text-3xl tracking-tight leading-tight\">Agriculture and Food <br \/> Trade Fair<\/h4>\n                                <div class=\"space-y-2\">\n                                    <div class=\"h-2 w-full bg-emerald-50\/50 rounded-full\"><\/div>\n                                    <div class=\"h-2 w-2\/3 bg-emerald-50\/50 rounded-full\"><\/div>\n                                <\/div>\n                                <div class=\"flex items-center gap-3 text-slate-400 font-bold text-sm pt-4\">\n                                    <i data-lucide=\"calendar\" class=\"w-5 h-5 text-[#0A6B32]\"><\/i>\n                                    <span>16th - 19th April, 2026<\/span>\n                                <\/div>\n                                <div class=\"pt-4\">\n                                    <button class=\"text-[#0A6B32] font-semibold text-sm flex items-center gap-2 group\">\n                                        Learn more <i data-lucide=\"arrow-up-right\" class=\"w-4 h-4 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform\"><\/i>\n                                    <\/button>\n                                <\/div>\n                            <\/div>\n                            <div class=\"absolute -top-12 -left-8 px-6 py-3 bg-[#0A6B32] text-white rounded-2xl font-black text-sm shadow-xl shadow-[#0A6B32]\/20 z-20 flex items-center gap-2\">\n                                <i data-lucide=\"calendar\" class=\"w-4 h-4 text-[#eecd15]\"><\/i>\n                                This month\n                            <\/div>\n                        <\/div>\n                    `;\n                } else if (activeSolution === 'marketplace') {\n                    previewContent = `\n                        <div class=\"grid grid-cols-2 gap-4 w-full max-w-xl\">\n                            ${[1, 2, 3, 4].map(i => `\n                                <div class=\"bg-white p-6 rounded-3xl shadow-xl border border-emerald-50 space-y-4\">\n                                    <div class=\"w-full aspect-square bg-emerald-50 rounded-2xl overflow-hidden\">\n                                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/agri${i}\/400\/400\" alt=\"Product\" class=\"w-full h-full object-cover\">\n                                    <\/div>\n                                    <div class=\"space-y-2\">\n                                        <div class=\"h-3 w-3\/4 bg-emerald-50\/50 rounded-full\"><\/div>\n                                        <div class=\"h-3 w-1\/2 bg-emerald-50\/50 rounded-full\"><\/div>\n                                    <\/div>\n                                    <div class=\"flex justify-between items-center pt-2\">\n                                        <div class=\"h-4 w-12 bg-emerald-100 rounded-full\"><\/div>\n                                        <div class=\"w-8 h-8 rounded-full bg-[#0A6B32] flex items-center justify-center\">\n                                            <i data-lucide=\"plus\" class=\"w-4 h-4 text-white\"><\/i>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            `).join('')}\n                        <\/div>\n                    `;\n                } else if (activeSolution === 'credit') {\n                    previewContent = `\n                        <div class=\"bg-white p-10 rounded-[40px] shadow-2xl border border-emerald-50 w-full max-w-md space-y-8\">\n                            <div class=\"flex items-center gap-4 mb-8\">\n                                <div class=\"w-12 h-12 rounded-2xl bg-[#0A6B32] text-white flex items-center justify-center\">\n                                    <i data-lucide=\"wallet\" class=\"w-6 h-6 text-[#eecd15]\"><\/i>\n                                <\/div>\n                                <div>\n                                    <h4 class=\"text-xl\">Micro Credit<\/h4>\n                                    <p class=\"text-xs font-bold text-emerald-600 uppercase tracking-widest\">Instant Approval<\/p>\n                                <\/div>\n                            <\/div>\n                            <div class=\"space-y-6\">\n                                <div class=\"p-6 bg-emerald-50 rounded-3xl border border-emerald-100\">\n                                    <p class=\"text-[10px] font-bold text-emerald-600 uppercase tracking-widest mb-2\">Available Limit<\/p>\n                                    <p class=\"text-3xl font-black text-[#0A6B32]\">50,000 MAD<\/p>\n                                <\/div>\n                                <div class=\"space-y-4\">\n                                    <div class=\"flex justify-between text-xs font-bold text-slate-400\">\n                                        <span>Interest Rate<\/span>\n                                        <span class=\"text-[#0A6B32]\">1.5% Monthly<\/span>\n                                    <\/div>\n                                    <div class=\"h-2 w-full bg-emerald-100 rounded-full overflow-hidden\">\n                                        <div class=\"h-full w-[65%] bg-[#0A6B32] rounded-full\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                            <button class=\"w-full bg-[#0A6B32] text-white py-4 rounded-2xl font-semibold uppercase tracking-tighter shadow-lg shadow-emerald-900\/20 border-b-4 border-[#eecd15]\">\n                                Apply Now\n                            <\/button>\n                        <\/div>\n                    `;\n                } else if (activeSolution === 'sourcing') {\n                    previewContent = `\n                        <div class=\"relative w-full max-w-xl\">\n                            <div class=\"grid grid-cols-3 gap-4\">\n                                ${[\n                                    { name: 'Organic Wheat', price: '4.5 MAD\/kg', img: 'https:\/\/picsum.photos\/seed\/wheat\/200\/200' },\n                                    { name: 'Fresh Olives', price: '12 MAD\/kg', img: 'https:\/\/picsum.photos\/seed\/olives\/200\/200' },\n                                    { name: 'Argan Oil', price: '250 MAD\/L', img: 'https:\/\/picsum.photos\/seed\/argan\/200\/200' },\n                                    { name: 'Saffron', price: '45 MAD\/g', img: 'https:\/\/picsum.photos\/seed\/saffron\/200\/200' },\n                                    { name: 'Dates', price: '35 MAD\/kg', img: 'https:\/\/picsum.photos\/seed\/dates\/200\/200' },\n                                    { name: 'Honey', price: '180 MAD\/kg', img: 'https:\/\/picsum.photos\/seed\/honey\/200\/200' }\n                                ].map(item => `\n                                    <div class=\"bg-white p-3 rounded-2xl shadow-lg border border-emerald-50 group cursor-pointer\">\n                                        <div class=\"aspect-square rounded-xl overflow-hidden mb-3\">\n                                            <img decoding=\"async\" src=\"${item.img}\" alt=\"${item.name}\" class=\"w-full h-full object-cover group-hover:scale-110 transition-transform\">\n                                        <\/div>\n                                        <p class=\"text-[10px] font-black text-slate-900 truncate\">${item.name}<\/p>\n                                        <p class=\"text-[9px] font-bold text-[#0A6B32]\">${item.price}<\/p>\n                                    <\/div>\n                                `).join('')}\n                            <\/div>\n                            <div class=\"absolute -top-6 -right-6 bg-[#eecd15] p-4 rounded-2xl shadow-xl border-2 border-white flex items-center gap-3\">\n                                <i data-lucide=\"search\" class=\"w-5 h-5 text-[#0A6B32]\"><\/i>\n                                <div class=\"h-4 w-24 bg-white\/40 rounded-full\"><\/div>\n                            <\/div>\n                        <\/div>\n                    `;\n                } else if (activeSolution === 'cargo') {\n                    previewContent = `\n                        <div class=\"w-full max-w-xl space-y-4\">\n                            ${[1, 2, 3].map(i => `\n                                <div class=\"bg-white p-6 rounded-3xl shadow-xl border border-slate-100 flex items-center gap-6\">\n                                    <div class=\"w-20 h-20 rounded-2xl bg-amber-50 flex items-center justify-center text-amber-600\">\n                                        <i data-lucide=\"package\" class=\"w-10 h-10\"><\/i>\n                                    <\/div>\n                                    <div class=\"flex-1 space-y-2\">\n                                        <div class=\"flex justify-between items-start\">\n                                            <div class=\"h-4 w-32 bg-slate-100 rounded-full\"><\/div>\n                                            <div class=\"px-2 py-1 bg-red-50 text-red-600 text-[10px] font-black rounded-md\">-40% OFF<\/div>\n                                        <\/div>\n                                        <div class=\"h-3 w-48 bg-slate-50 rounded-full\"><\/div>\n                                        <div class=\"flex items-center gap-4 pt-2\">\n                                            <div class=\"h-2 w-24 bg-slate-100 rounded-full\"><\/div>\n                                            <div class=\"h-2 w-12 bg-emerald-50 rounded-full\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            `).join('')}\n                        <\/div>\n                    `;\n                }\n\n                previewArea.innerHTML = previewContent;\n                refreshIcons();\n            }\n\n\n            \/\/ --- Start ---\n            if (document.readyState === 'loading') {\n                document.addEventListener('DOMContentLoaded', init);\n            } else {\n                init();\n            }\n        })();\n    <\/script>\n<\/body>\n<\/html>\n\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>Best Digital Platform 2026 Ministry of Agriculture &#038; Trade The Most Trusted Platform for Farmers &#038; Agricultural Financing Direct marketplace with 12k+ Moroccan farmers, with small loans approved in hours \u2014 no bank, no complexity, no intermediary. Browse Marketplace Request Financing Active Regions Souss-Massa Fes-Meknes Marrakech Gharb +4 More Micro Credit Marketplace Events Calendar A<\/p>\n<div class=\"klb-readmore entry-button\"><a class=\"btn btn-primary link\" href=\"https:\/\/app.sellaagri.com\/fr\/\">Lire la suite <i class=\"klbth-icon-right-arrow\"><\/i><\/a><\/div>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4831","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/app.sellaagri.com\/fr\/wp-json\/wp\/v2\/pages\/4831","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/app.sellaagri.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/app.sellaagri.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/app.sellaagri.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/app.sellaagri.com\/fr\/wp-json\/wp\/v2\/comments?post=4831"}],"version-history":[{"count":22,"href":"https:\/\/app.sellaagri.com\/fr\/wp-json\/wp\/v2\/pages\/4831\/revisions"}],"predecessor-version":[{"id":5086,"href":"https:\/\/app.sellaagri.com\/fr\/wp-json\/wp\/v2\/pages\/4831\/revisions\/5086"}],"wp:attachment":[{"href":"https:\/\/app.sellaagri.com\/fr\/wp-json\/wp\/v2\/media?parent=4831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}