Marketing Coach Web Services – \u062f\u0644\u064a\u0644 \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0627\u0644\u0645\u0648\u0642\u0639<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/3.9.1\/chart.min.js\"><\/script>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\n \n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');\n \n body {\n font-family: 'Tajawal', sans-serif;\n background-color: #F8FAFC;\n color: #334155;\n }\n\n .chart-container {\n position: relative;\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 400px;\n }\n\n @media (min-width: 768px) {\n .chart-container {\n height: 350px;\n max-width: 600px;\n }\n }\n\n .checklist-scroll::-webkit-scrollbar {\n width: 6px;\n }\n .checklist-scroll::-webkit-scrollbar-track {\n background: #f1f1f1;\n }\n .checklist-scroll::-webkit-scrollbar-thumb {\n background: #cbd5e1;\n border-radius: 3px;\n }\n\n .checkbox-wrapper input:checked + div span {\n text-decoration: line-through;\n color: #94a3b8;\n }\n <\/style>\n \n \n \n<\/head>\n<body class=\"antialiased\">\n\n \n <nav class=\"bg-white border-b border-slate-200 sticky top-0 z-50\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex justify-between h-16 items-center\">\n <div class=\"flex items-center\">\n <i class=\"fas fa-bullhorn text-emerald-600 text-2xl ml-3\"><\/i>\n <span class=\"font-extrabold text-slate-800 text-xl tracking-tight\">Marketing Coach <span class=\"text-emerald-600 text-lg\">Web Services<\/span><\/span>\n <\/div>\n <div class=\"hidden md:flex items-center space-x-reverse space-x-6 text-sm font-bold text-slate-500\">\n <span><i class=\"fas fa-globe-africa ml-1\"><\/i> \u0627\u0644\u0634\u0631\u0642 \u0627\u0644\u0623\u0648\u0633\u0637<\/span>\n <span><i class=\"fas fa-bolt ml-1\"><\/i> \u0623\u062f\u0627\u0621 \u0639\u0627\u0644\u064d<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/nav>\n\n \n <main class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 space-y-12\">\n\n \n <section>\n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-100 p-8\">\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-10 items-center\">\n <div class=\"lg:col-span-2\">\n <h1 class=\"text-4xl font-extrabold text-slate-900 mb-6\">\u0639\u0644\u0645 \u0628\u0646\u0627\u0621 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0647\u0628\u0648\u0637 \u0644\u0644\u0645\u062f\u0631\u0628\u064a\u0646 \u0648\u0627\u0644\u062e\u0628\u0631\u0627\u0621<\/h1>\n <p class=\"text-lg text-slate-600 mb-6 leading-relaxed\">\n \u0628\u0646\u0627\u0621 \u0645\u0648\u0642\u0639 \u0644\u0645\u062f\u0631\u0628 \u062a\u0633\u0648\u064a\u0642\u064a (Marketing Coach) \u0641\u064a \u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0634\u0631\u0642 \u0627\u0644\u0623\u0648\u0633\u0637 \u064a\u062a\u0637\u0644\u0628 \u0645\u0627 \u0647\u0648 \u0623\u0643\u062b\u0631 \u0645\u0646 \u0645\u062c\u0631\u062f “\u062a\u0635\u0645\u064a\u0645 \u062c\u0645\u064a\u0644”. \u0627\u0644\u0633\u0631 \u064a\u0643\u0645\u0646 \u0641\u064a **\u0628\u0646\u0627\u0621 \u0627\u0644\u062b\u0642\u0629 \u0627\u0644\u0631\u0642\u0645\u064a\u0629**. \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0642\u0635\u0635 \u0646\u062c\u0627\u062d \u062d\u0642\u064a\u0642\u064a\u0629\u060c \u0646\u062c\u062f \u0623\u0646 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u064a\u0628\u062f\u0623 \u0639\u0646\u062f\u0645\u0627 \u064a\u0634\u0639\u0631 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0623\u0646\u0643 \u062a\u0641\u0647\u0645 \u062a\u062d\u062f\u064a\u0627\u062a\u0647 \u0627\u0644\u0645\u062d\u0644\u064a\u0629 (Practical Background).\n <\/p>\n <div class=\"flex flex-wrap gap-3\">\n <span class=\"bg-emerald-100 text-emerald-700 px-4 py-2 rounded-lg text-sm font-bold border border-emerald-200\">\u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u0634\u062e\u0635\u064a\u0629<\/span>\n <span class=\"bg-blue-100 text-blue-700 px-4 py-2 rounded-lg text-sm font-bold border border-blue-200\">\u062a\u062d\u0648\u064a\u0644 \u0627\u0644\u0632\u0648\u0627\u0631 \u0644\u0639\u0645\u0644\u0627\u0621<\/span>\n <span class=\"bg-slate-100 text-slate-700 px-4 py-2 rounded-lg text-sm font-bold border border-slate-200\">\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u062e\u062f\u0645\u0627\u062a<\/span>\n <\/div>\n <\/div>\n <div class=\"bg-emerald-600 rounded-2xl p-6 text-white shadow-xl\">\n <h3 class=\"font-bold text-xl mb-3\"><i class=\"fas fa-star ml-2\"><\/i>\u0646\u0642\u0637\u0629 \u0627\u0644\u062a\u062d\u0648\u0644 (Tipping Point)<\/h3>\n <p class=\"text-emerald-50 mb-4 text-sm leading-loose\">\n \u0641\u064a \u0642\u0637\u0627\u0639 \u0627\u0644\u062e\u062f\u0645\u0627\u062a\u060c \u064a\u0642\u0631\u0631 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0648\u062b\u0648\u0642 \u0628\u0643 \u062e\u0644\u0627\u0644 \u0623\u0648\u0644 **5 \u062b\u0648\u0627\u0646\u064d**. \u0625\u0630\u0627 \u0644\u0645 \u064a\u062c\u062f “\u0628\u0631\u0647\u0627\u0646\u0627\u064b \u0627\u062c\u062a\u0645\u0627\u0639\u064a\u0627\u064b” (\u0634\u0647\u0627\u062f\u0627\u062a \u0639\u0645\u0644\u0627\u0621) \u0648\u0642\u064a\u0645\u0629 \u0648\u0627\u0636\u062d\u0629\u060c \u0633\u064a\u063a\u0627\u062f\u0631 \u0641\u0648\u0631\u0627\u064b.\n <\/p>\n <div class=\"bg-white\/20 rounded-lg p-3 text-xs\">\n <i class=\"fas fa-info-circle ml-1\"><\/i> \u0646\u0635\u064a\u062d\u0629: \u0627\u0633\u062a\u062e\u062f\u0645 \u0632\u0631 \u0648\u0627\u062a\u0633\u0627\u0628 \u0645\u0628\u0627\u0634\u0631\u060c \u0641\u0647\u0648 \u0627\u0644\u0648\u0633\u064a\u0644\u0629 \u0627\u0644\u0645\u0641\u0636\u0644\u0629 \u0641\u064a \u0645\u0646\u0637\u0642\u062a\u0646\u0627.\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section>\n <div class=\"mb-8\">\n <h2 class=\"text-2xl font-bold text-slate-900\">\u0644\u0645\u0627\u0630\u0627 \u062a\u0646\u062c\u062d \u0647\u0630\u0647 \u0627\u0644\u0645\u0648\u0627\u0642\u0639\u061f (\u0628\u0627\u0644\u0623\u0631\u0642\u0627\u0645)<\/h2>\n <p class=\"text-slate-500 mt-2\">\u062a\u062d\u0644\u064a\u0644 \u0644\u0623\u0647\u0645 \u0627\u0644\u0623\u0642\u0633\u0627\u0645 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u062f\u0631\u0627\u0633\u0627\u062a \u062a\u062a\u0628\u0639 \u062d\u0631\u0643\u0629 \u0627\u0644\u0639\u064a\u0646 \u0641\u064a \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u062e\u062f\u0645\u064a\u0629.<\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">\n \n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-100 p-6\">\n <h3 class=\"text-lg font-bold text-slate-800 mb-6\">\u0623\u062b\u0631 \u0623\u0642\u0633\u0627\u0645 \u0627\u0644\u0645\u0648\u0642\u0639 \u0639\u0644\u0649 \u0642\u0631\u0627\u0631 \u0627\u0644\u0639\u0645\u064a\u0644<\/h3>\n <div class=\"chart-container\">\n <canvas id=\"impactChart\"><\/canvas>\n <\/div>\n <p class=\"mt-4 text-sm text-slate-500 bg-slate-50 p-3 rounded-lg border-r-4 border-emerald-500\">\n <strong>\u0645\u0644\u0627\u062d\u0638\u0629:<\/strong> \u0642\u0633\u0645 “\u0642\u0635\u0629 \u0627\u0644\u0645\u062f\u0631\u0628” \u0648”\u0622\u0631\u0627\u0621 \u0627\u0644\u0639\u0645\u0644\u0627\u0621” \u064a\u062d\u0642\u0642\u0627\u0646 \u0623\u0639\u0644\u0649 \u0646\u0633\u0628\u0629 \u062a\u0641\u0627\u0639\u0644 \u0641\u064a \u0627\u0644\u0633\u0648\u0642 \u0627\u0644\u0639\u0631\u0628\u064a.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-100 p-6\">\n <h3 class=\"text-lg font-bold text-slate-800 mb-6\">\u062a\u0648\u0632\u064a\u0639 \u0627\u0644\u0623\u062c\u0647\u0632\u0629 \u0641\u064a \u0627\u0644\u0634\u0631\u0642 \u0627\u0644\u0623\u0648\u0633\u0637<\/h3>\n <div class=\"chart-container\">\n <canvas id=\"deviceChart\"><\/canvas>\n <\/div>\n <p class=\"mt-4 text-sm text-slate-500 bg-slate-50 p-3 rounded-lg border-r-4 border-blue-500\">\n <strong>\u0645\u0644\u0627\u062d\u0638\u0629:<\/strong> \u0625\u0630\u0627 \u0644\u0645 \u064a\u0643\u0646 \u0645\u0648\u0642\u0639\u0643 \u0633\u0631\u064a\u0639\u0627\u064b \u0639\u0644\u0649 \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644\u060c \u0641\u0623\u0646\u062a \u062a\u0641\u0642\u062f 70% \u0645\u0646 \u0639\u0645\u0644\u0627\u0626\u0643 \u0627\u0644\u0645\u062d\u062a\u0645\u0644\u064a\u0646.\n <\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section>\n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-100 p-8\">\n <div class=\"mb-6\">\n <h2 class=\"text-2xl font-bold text-slate-900\">\u0645\u0635\u0641\u0648\u0641\u0629 \u0627\u0644\u062c\u0647\u062f \u0645\u0642\u0627\u0628\u0644 \u0627\u0644\u0642\u064a\u0645\u0629<\/h2>\n <p class=\"text-slate-500\">\u0643\u064a\u0641 \u062a\u062d\u0642\u0642 \u0646\u062a\u0627\u0626\u062c \u0645\u0630\u0647\u0644\u0629 \u0628\u0623\u0642\u0644 \u0645\u062c\u0647\u0648\u062f \u062a\u0642\u0646\u064a \u0645\u0645\u0643\u0646\u061f<\/p>\n <\/div>\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\n <div class=\"lg:col-span-2\">\n <div class=\"chart-container\">\n <canvas id=\"matrixChart\"><\/canvas>\n <\/div>\n <\/div>\n <div class=\"flex flex-col justify-center space-y-4\">\n <div class=\"p-4 rounded-xl bg-emerald-50 border border-emerald-100\">\n <span class=\"font-bold text-emerald-800 block mb-1\">\u0627\u0644\u0631\u0628\u062d \u0627\u0644\u0633\u0631\u064a\u0639<\/span>\n <p class=\"text-xs text-emerald-600\">\u062a\u0641\u0639\u064a\u0644 \u0648\u0627\u062a\u0633\u0627\u0628\u060c \u062a\u062d\u0633\u064a\u0646 \u0633\u0631\u0639\u0629 \u0627\u0644\u062a\u062d\u0645\u064a\u0644\u060c \u0648\u0636\u0639 \u0639\u0646\u0648\u0627\u0646 \u062c\u0630\u0627\u0628.<\/p>\n <\/div>\n <div class=\"p-4 rounded-xl bg-blue-50 border border-blue-100\">\n <span class=\"font-bold text-blue-800 block mb-1\">\u0627\u0633\u062a\u062b\u0645\u0627\u0631 \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a<\/span>\n <p class=\"text-xs text-blue-600\">\u062a\u0635\u0648\u064a\u0631 \u0641\u064a\u062f\u064a\u0648\u0647\u0627\u062a \u062a\u0639\u0631\u064a\u0641\u064a\u0629\u060c \u0643\u062a\u0627\u0628\u0629 \u0645\u0642\u0627\u0644\u0627\u062a \u0645\u062a\u062e\u0635\u0635\u0629 (SEO).<\/p>\n <\/div>\n <div class=\"p-4 rounded-xl bg-slate-50 border border-slate-100\">\n <span class=\"font-bold text-slate-800 block mb-1\">\u062a\u062c\u0646\u0628 \u0627\u0644\u062a\u0639\u0642\u064a\u062f<\/span>\n <p class=\"text-xs text-slate-600\">\u0627\u0644\u0631\u0633\u0648\u0645 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 \u0627\u0644\u0645\u0628\u0627\u0644\u063a \u0641\u064a\u0647\u0627\u060c \u0643\u062b\u0631\u0629 \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0627\u0644\u0645\u0634\u062a\u062a\u0629.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"checklist-section\">\n <div class=\"mb-8\">\n <h2 class=\"text-3xl font-extrabold text-slate-900 text-center\">\u0623\u062f\u0627\u0629 \u0628\u0646\u0627\u0621 \u0627\u0644\u0645\u0648\u0642\u0639 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\u0629<\/h2>\n <p class=\"text-slate-500 text-center mt-2\">\u062e\u0631\u064a\u0637\u0629 \u0637\u0631\u064a\u0642 \u0644\u0628\u0646\u0627\u0621 \u0645\u0648\u0642\u0639\u0643 \u062e\u0637\u0648\u0629 \u0628\u062e\u0637\u0648\u0629 (\u0628\u062f\u064a\u0644 \u0645\u0644\u0641\u0627\u062a \u0627\u0644\u0625\u0643\u0633\u064a\u0644)<\/p>\n <\/div>\n\n <div class=\"bg-white rounded-3xl shadow-xl border border-slate-200 overflow-hidden\">\n <div class=\"bg-slate-800 p-8 text-white\">\n <div class=\"flex flex-col md:flex-row justify-between items-center gap-6\">\n <div>\n <h3 class=\"text-xl font-bold\">\u0646\u0633\u0628\u0629 \u0625\u0646\u062c\u0627\u0632 \u0627\u0644\u0645\u0634\u0631\u0648\u0639<\/h3>\n <p class=\"text-slate-400 text-sm mt-1\" id=\"progress-text\">\u0627\u0628\u062f\u0623 \u0627\u0644\u0622\u0646 \u0644\u062a\u0635\u0644 \u0625\u0644\u0649 100%<\/p>\n <\/div>\n <div class=\"w-full md:w-2\/3 bg-white\/10 rounded-full h-6 p-1\">\n <div id=\"main-progress-bar\" class=\"bg-emerald-500 h-full rounded-full transition-all duration-700 ease-in-out shadow-[0_0_15px_rgba(16,185,129,0.5)]\" style=\"width: 0%\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 divide-y lg:divide-y-0 lg:divide-x lg:divide-x-reverse divide-slate-200\">\n \n <div class=\"p-6 bg-slate-50\/50\">\n <div class=\"flex items-center mb-6 text-emerald-600 font-bold\">\n <i class=\"fas fa-search-dollar ml-2\"><\/i>\n <span>1. \u0627\u0644\u0623\u0628\u062d\u0627\u062b \u0648\u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629<\/span>\n <\/div>\n <div class=\"space-y-4\" id=\"phase1-list\"><\/div>\n <\/div>\n \n <div class=\"p-6\">\n <div class=\"flex items-center mb-6 text-blue-600 font-bold\">\n <i class=\"fas fa-pen-fancy ml-2\"><\/i>\n <span>2. \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0648\u0627\u0644\u0647\u064a\u0643\u0644<\/span>\n <\/div>\n <div class=\"space-y-4\" id=\"phase2-list\"><\/div>\n <\/div>\n \n <div class=\"p-6 bg-slate-50\/50\">\n <div class=\"flex items-center mb-6 text-indigo-600 font-bold\">\n <i class=\"fas fa-laptop-code ml-2\"><\/i>\n <span>3. \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0648\u0627\u0644\u062a\u0637\u0648\u064a\u0631<\/span>\n <\/div>\n <div class=\"space-y-4\" id=\"phase3-list\"><\/div>\n <\/div>\n \n <div class=\"p-6\">\n <div class=\"flex items-center mb-6 text-orange-600 font-bold\">\n <i class=\"fas fa-rocket ml-2\"><\/i>\n <span>4. \u0627\u0644\u0625\u0637\u0644\u0627\u0642 \u0648\u0627\u0644\u0642\u064a\u0627\u0633<\/span>\n <\/div>\n <div class=\"space-y-4\" id=\"phase4-list\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <\/main>\n\n <footer class=\"py-12 bg-slate-900 text-white text-center mt-20\">\n <p class=\"text-slate-400\">Marketing Coach Web Services © 2024<\/p>\n <p class=\"text-xs mt-2 text-slate-500\">\u062a\u0645 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0623\u0641\u0636\u0644 \u0645\u0645\u0627\u0631\u0633\u0627\u062a UI\/UX \u0644\u0633\u0648\u0642 \u0627\u0644\u0634\u0631\u0642 \u0627\u0644\u0623\u0648\u0633\u0637<\/p>\n <\/footer>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n \n \/\/ Checklist Data\n const checklistData = {\n phase1: [\n { id: 'ar1', text: '\u062a\u062d\u062f\u064a\u062f \u0634\u062e\u0635\u064a\u0629 \u0627\u0644\u0639\u0645\u064a\u0644 \u0627\u0644\u0645\u062b\u0627\u0644\u064a', tip: '\u0645\u0646 \u0647\u0648 \u0627\u0644\u0634\u062e\u0635 \u0627\u0644\u0630\u064a \u064a\u062d\u062a\u0627\u062c \u0644\u062e\u062f\u0645\u0627\u062a\u0643\u061f' },\n { id: 'ar2', text: '\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0645\u0646\u0627\u0641\u0633\u064a\u0646 \u0645\u062d\u0644\u064a\u0627\u064b', tip: '\u0645\u0627\u0630\u0627 \u064a\u0642\u062f\u0645 \u0627\u0644\u0645\u062f\u0631\u0628\u0648\u0646 \u0627\u0644\u0622\u062e\u0631\u0648\u0646 \u0641\u064a \u0627\u0644\u0645\u0646\u0637\u0642\u0629\u061f' },\n { id: 'ar3', text: '\u062a\u062d\u062f\u064a\u062f \u0639\u0631\u0636 \u0627\u0644\u0642\u064a\u0645\u0629 \u0627\u0644\u0641\u0631\u064a\u062f', tip: '\u0644\u0645\u0627\u0630\u0627 \u064a\u062e\u062a\u0627\u0631\u0643 \u0627\u0644\u0639\u0645\u064a\u0644 \u0623\u0646\u062a \u062f\u0648\u0646 \u063a\u064a\u0631\u0643\u061f' }\n ],\n phase2: [\n { id: 'ar4', text: '\u0643\u062a\u0627\u0628\u0629 \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0647\u0628\u0648\u0637 \u0627\u0644\u0631\u0626\u064a\u0633\u064a', tip: '\u064a\u062c\u0628 \u0623\u0646 \u064a\u0634\u0631\u062d \u0627\u0644\u0641\u0627\u0626\u062f\u0629 \u0641\u064a 3 \u062b\u0648\u0627\u0646\u064d.' },\n { id: 'ar5', text: '\u062c\u0645\u0639 3 \u0634\u0647\u0627\u062f\u0627\u062a \u0639\u0645\u0644\u0627\u0621 \u0641\u064a\u062f\u064a\u0648', tip: '\u0627\u0644\u0641\u064a\u062f\u064a\u0648 \u064a\u0628\u0646\u064a \u062b\u0642\u0629 \u0645\u0636\u0627\u0639\u0641\u0629 \u0641\u064a \u0627\u0644\u062e\u0644\u064a\u062c.' },\n { id: 'ar6', text: '\u0635\u064a\u0627\u063a\u0629 \"\u0642\u0635\u062a\u064a \u0627\u0644\u0634\u062e\u0635\u064a\u0629\"', tip: '\u0627\u062c\u0639\u0644\u0647\u0627 \u0642\u0635\u0629 \u0645\u0644\u0647\u0645\u0629 \u0648\u0644\u064a\u0633 \u0645\u062c\u0631\u062f \u0633\u064a\u0631\u0629.' }\n ],\n phase3: [\n { id: 'ar7', text: '\u0632\u0631 \u0648\u0627\u062a\u0633\u0627\u0628 \u0639\u0627\u0626\u0645', tip: '\u0623\u0633\u0647\u0644 \u0648\u0633\u064a\u0644\u0629 \u0644\u0644\u062a\u0648\u0627\u0635\u0644 \u0627\u0644\u0633\u0631\u064a\u0639.' },\n { id: 'ar8', text: '\u062a\u062d\u0633\u064a\u0646 \u0633\u0631\u0639\u0629 \u0627\u0644\u062a\u062d\u0645\u064a\u0644', tip: '\u064a\u062c\u0628 \u0623\u0646 \u064a\u0641\u062a\u062d \u0627\u0644\u0645\u0648\u0642\u0639 \u0641\u064a \u0623\u0642\u0644 \u0645\u0646 \u062b\u0627\u0646\u064a\u062a\u064a\u0646.' },\n { id: 'ar9', text: '\u062a\u0646\u0633\u064a\u0642 \u0645\u062a\u0648\u0627\u0641\u0642 \u0645\u0639 \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644', tip: '\u062a\u0623\u0643\u062f \u0645\u0646 \u0633\u0647\u0648\u0644\u0629 \u0627\u0644\u0646\u0642\u0631 \u0628\u0627\u0644\u0625\u0628\u0647\u0627\u0645.' }\n ],\n phase4: [\n { id: 'ar10', text: '\u062a\u0641\u0639\u064a\u0644 Google Analytics', tip: '\u0644\u0645\u0639\u0631\u0641\u0629 \u0645\u0646 \u0623\u064a\u0646 \u064a\u0623\u062a\u064a \u0627\u0644\u0632\u0648\u0627\u0631.' },\n { id: 'ar11', text: '\u062d\u0645\u0644\u0629 \u0625\u0639\u0644\u0627\u0646\u064a\u0629 \u062a\u062c\u0631\u064a\u0628\u064a\u0629', tip: '\u0644\u0627 \u062a\u0646\u062a\u0638\u0631\u060c \u0627\u0628\u062f\u0623 \u0628\u062c\u0644\u0628 \u0627\u0644\u0632\u0648\u0627\u0631 \u0641\u0648\u0631\u0627\u064b.' },\n { id: 'ar12', text: '\u0642\u064a\u0627\u0633 \u0646\u0633\u0628\u0629 \u0627\u0644\u062a\u062d\u0648\u064a\u0644', tip: '\u0643\u0645 \u0632\u0627\u0626\u0631 \u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0643 \u0641\u0639\u0644\u064a\u0627\u064b\u061f' }\n ]\n };\n\n \/\/ Charts\n const chartConfig = {\n font: { family: 'Tajawal', size: 12 }\n };\n\n \/\/ 1. Impact Bar Chart\n new Chart(document.getElementById('impactChart'), {\n type: 'bar',\n data: {\n labels: ['\u0627\u0644\u0639\u0646\u0648\u0627\u0646', '\u0622\u0631\u0627\u0621 \u0627\u0644\u0639\u0645\u0644\u0627\u0621', '\u0642\u0635\u0629 \u0627\u0644\u0645\u062f\u0631\u0628', '\u0627\u0644\u062e\u062f\u0645\u0627\u062a', '\u0627\u0644\u062a\u0648\u0627\u0635\u0644'],\n datasets: [{\n label: '\u0646\u0633\u0628\u0629 \u0627\u0644\u0623\u0647\u0645\u064a\u0629',\n data: [95, 90, 85, 75, 70],\n backgroundColor: 'rgba(16, 185, 129, 0.7)',\n borderRadius: 8\n }]\n },\n options: {\n indexAxis: 'y',\n responsive: true,\n maintainAspectRatio: false,\n plugins: { legend: { display: false } },\n scales: { x: { max: 100 } }\n }\n });\n\n \/\/ 2. Device Doughnut\n new Chart(document.getElementById('deviceChart'), {\n type: 'doughnut',\n data: {\n labels: ['\u0645\u0648\u0628\u0627\u064a\u0644', '\u0643\u0645\u0628\u064a\u0648\u062a\u0631', '\u062a\u0627\u0628\u0644\u062a'],\n datasets: [{\n data: [72, 25, 3],\n backgroundColor: ['#10b981', '#3b82f6', '#cbd5e1']\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: { legend: { position: 'bottom' } }\n }\n });\n\n \/\/ 3. Matrix Scatter\n new Chart(document.getElementById('matrixChart'), {\n type: 'scatter',\n data: {\n datasets: [{\n label: '\u0627\u0644\u0645\u0647\u0627\u0645',\n data: [\n { x: 2, y: 9, label: '\u062a\u0641\u0639\u064a\u0644 \u0648\u0627\u062a\u0633\u0627\u0628' },\n { x: 3, y: 8, label: '\u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u0639\u0646\u0648\u0627\u0646' },\n { x: 8, y: 4, label: '\u0628\u0631\u0645\u062c\u0629 \u062e\u0627\u0635\u0629 \u0645\u0639\u0642\u062f\u0629' },\n { x: 5, y: 9, label: '\u0634\u0647\u0627\u062f\u0627\u062a \u0641\u064a\u062f\u064a\u0648' },\n { x: 7, y: 7, label: 'SEO \u0645\u062a\u062e\u0635\u0635' }\n ],\n backgroundColor: '#10b981',\n pointRadius: 10\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n x: { title: { display: true, text: '\u0627\u0644\u062c\u0647\u062f \u0627\u0644\u0645\u0628\u0630\u0648\u0644' }, min: 0, max: 10 },\n y: { title: { display: true, text: '\u0627\u0644\u0642\u064a\u0645\u0629 \u0627\u0644\u0645\u062d\u0642\u0642\u0629' }, min: 0, max: 10 }\n },\n plugins: {\n tooltip: {\n callbacks: { label: (ctx) => ctx.raw.label }\n }\n }\n }\n });\n\n \/\/ Render Checklist\n function renderItems() {\n Object.keys(checklistData).forEach(phase => {\n const container = document.getElementById(`${phase}-list`);\n container.innerHTML = checklistData[phase].map(item => `\n <label class=\"flex items-start gap-3 p-3 bg-white border border-slate-100 rounded-xl hover:border-emerald-300 transition-all cursor-pointer group checkbox-wrapper\">\n <input type=\"checkbox\" class=\"mt-1 w-5 h-5 rounded border-slate-300 text-emerald-600 focus:ring-emerald-500\">\n <div class=\"flex-1\">\n <span class=\"text-sm font-bold text-slate-700 block\">${item.text}<\/span>\n <span class=\"text-[10px] text-slate-400 block mt-1\">${item.tip}<\/span>\n <\/div>\n <\/label>\n `).join('');\n });\n\n document.querySelectorAll('input[type=\"checkbox\"]').forEach(box => {\n box.addEventListener('change', updateProgress);\n });\n }\n\n function updateProgress() {\n const total = document.querySelectorAll('input[type=\"checkbox\"]').length;\n const checked = document.querySelectorAll('input[type=\"checkbox\"]:checked').length;\n const percent = Math.round((checked \/ total) * 100);\n\n const bar = document.getElementById('main-progress-bar');\n const text = document.getElementById('progress-text');\n \n bar.style.width = `${percent}%`;\n \n if (percent === 0) text.innerText = '\u0627\u0628\u062f\u0623 \u0627\u0644\u0622\u0646 \u0644\u062a\u0635\u0644 \u0625\u0644\u0649 100%';\n else if (percent < 100) text.innerText = `\u0631\u0627\u0626\u0639! \u0623\u0646\u062c\u0632\u062a ${percent}% \u0645\u0646 \u0627\u0644\u0639\u0645\u0644`;\n else text.innerText = '\u0645\u0628\u0631\u0648\u0643! \u0645\u0648\u0642\u0639\u0643 \u062c\u0627\u0647\u0632 \u0644\u0644\u0647\u064a\u0645\u0646\u0629 \u0639\u0644\u0649 \u0627\u0644\u0633\u0648\u0642';\n }\n\n renderItems();\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"ar\" dir=\"rtl\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n<title>ConvertKit MENA \u2014 SaaS Dashboard<\/title>\n\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\nbody{\n font-family:'Cairo', sans-serif;\n background:#F8FAFC;\n}\n.card{\n background:white;\n border-radius:20px;\n border:1px solid #E5E7EB;\n padding:22px;\n}\n<\/style>\n<\/head>\n\n<body class=\"p-6\">\n\n\n<header class=\"max-w-7xl mx-auto mb-8 flex justify-between items-center\">\n <h1 class=\"text-2xl font-extrabold text-slate-900\">\n ConvertKit MENA <span class=\"text-emerald-600\">SaaS<\/span>\n <\/h1>\n <span class=\"bg-emerald-100 text-emerald-700 px-4 py-2 rounded-xl font-bold text-sm\">\n Starter Plan \u2014 $7\/mo\n <\/span>\n<\/header>\n\n\n<div class=\"max-w-7xl mx-auto grid lg:grid-cols-3 gap-6\">\n\n\n<div class=\"card\">\n <h3 class=\"font-extrabold text-slate-900 mb-3\">\n \ud83d\udcca Dashboard Overview\n <\/h3>\n\n <div class=\"grid grid-cols-3 gap-3 text-center\">\n <div class=\"bg-slate-50 p-4 rounded-xl\">\n <div class=\"text-2xl font-extrabold text-emerald-600\">420<\/div>\n <div class=\"text-xs text-slate-500\">\u0632\u064a\u0627\u0631\u0627\u062a<\/div>\n <\/div>\n <div class=\"bg-slate-50 p-4 rounded-xl\">\n <div class=\"text-2xl font-extrabold text-blue-600\">38<\/div>\n <div class=\"text-xs text-slate-500\">Leads<\/div>\n <\/div>\n <div class=\"bg-slate-50 p-4 rounded-xl\">\n <div class=\"text-2xl font-extrabold text-amber-600\">9%<\/div>\n <div class=\"text-xs text-slate-500\">Conversion<\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"card\">\n <h3 class=\"font-extrabold text-slate-900 mb-3\">\n \ud83d\udd0d Website Audit\n <\/h3>\n\n <input id=\"siteUrl\" class=\"w-full border rounded-xl p-3 mb-3 text-sm\" placeholder=\"\u0623\u062f\u062e\u0644 \u0631\u0627\u0628\u0637 \u0645\u0648\u0642\u0639\u0643\">\n\n <button onclick=\"runAudit()\" class=\"w-full bg-emerald-600 text-white font-extrabold py-3 rounded-xl hover:bg-emerald-700 transition\">\n \u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0645\u0648\u0642\u0639 \u0627\u0644\u0622\u0646\n <\/button>\n\n <div id=\"auditResult\" class=\"mt-4 text-sm text-slate-600\"><\/div>\n<\/div>\n\n\n<div class=\"card\">\n <h3 class=\"font-extrabold text-slate-900 mb-3\">\n \ud83e\udde0 Landing Page Generator\n <\/h3>\n\n <input id=\"service\" class=\"w-full border rounded-xl p-3 mb-3 text-sm\" placeholder=\"\u0627\u0644\u062e\u062f\u0645\u0629 (\u0645\u062b\u0627\u0644: \u062a\u0633\u0648\u064a\u0642 \u0637\u0628\u064a)\">\n <input id=\"audience\" class=\"w-full border rounded-xl p-3 mb-3 text-sm\" placeholder=\"\u0627\u0644\u062c\u0645\u0647\u0648\u0631 \u0627\u0644\u0645\u0633\u062a\u0647\u062f\u0641\">\n <input id=\"price\" class=\"w-full border rounded-xl p-3 mb-3 text-sm\" placeholder=\"\u0627\u0644\u0633\u0639\u0631\">\n\n <button onclick=\"generateLanding()\" class=\"w-full bg-slate-900 text-white font-extrabold py-3 rounded-xl hover:bg-slate-800 transition\">\n \u062a\u0648\u0644\u064a\u062f \u0635\u0641\u062d\u0629 \u0647\u0628\u0648\u0637\n <\/button>\n<\/div>\n\n<\/div>\n\n\n<section class=\"max-w-7xl mx-auto mt-6 card\">\n <h3 class=\"font-extrabold text-slate-900 mb-3\">\n \ud83d\udcc4 Generated Landing Page Copy\n <\/h3>\n\n <textarea id=\"output\" class=\"w-full h-52 border rounded-xl p-4 text-sm\"><\/textarea>\n\n <button onclick=\"copyOutput()\" class=\"mt-3 bg-emerald-600 text-white font-extrabold px-6 py-3 rounded-xl hover:bg-emerald-700\">\n \u0646\u0633\u062e \u0627\u0644\u0645\u062d\u062a\u0648\u0649\n <\/button>\n<\/section>\n\n\n<script>\nfunction runAudit(){\n const url = document.getElementById(\"siteUrl\").value;\n const result = document.getElementById(\"auditResult\");\n\n if(!url){\n result.innerHTML = \"\u274c \u0623\u062f\u062e\u0644 \u0631\u0627\u0628\u0637 \u0627\u0644\u0645\u0648\u0642\u0639 \u0623\u0648\u0644\u0627\u064b\";\n return;\n }\n\n result.innerHTML = `\n \u2705 \u062a\u062d\u0644\u064a\u0644 \u0645\u0628\u062f\u0626\u064a \u0644\u0645\u0648\u0642\u0639\u0643:<br>\n \u2022 CTA \u0636\u0639\u064a\u0641 \u2014 \u062a\u062d\u0633\u064a\u0646\u0647 \u064a\u0632\u064a\u062f \u0627\u0644\u062a\u062d\u0648\u064a\u0644 +18%<br>\n \u2022 Hero \u063a\u064a\u0631 \u0648\u0627\u0636\u062d \u2014 \u064a\u0641\u0636\u0644 \u0625\u0639\u0627\u062f\u0629 \u0635\u064a\u0627\u063a\u062a\u0647<br>\n \u2022 \u0633\u0631\u0639\u0629 \u0627\u0644\u0645\u0648\u0642\u0639 \u062a\u062d\u062a\u0627\u062c \u062a\u062d\u0633\u064a\u0646<br>\n \u2022 \u0644\u0627 \u062a\u0648\u062c\u062f Testimonials \u0648\u0627\u0636\u062d\u0629<br><br>\n \ud83d\udcc8 Score \u0627\u0644\u0645\u062a\u0648\u0642\u0639: <strong>72 \/ 100<\/strong>\n `;\n}\n\nfunction generateLanding(){\n const service = document.getElementById(\"service\").value;\n const audience = document.getElementById(\"audience\").value;\n const price = document.getElementById(\"price\").value;\n\n const output = `\n\ud83d\ude80 ${service}\n\n\u0633\u0627\u0639\u062f\u0646\u0627 ${audience} \u0639\u0644\u0649 \u062a\u062d\u0642\u064a\u0642 \u0646\u062a\u0627\u0626\u062c \u0623\u0641\u0636\u0644 \u0645\u0646 \u062e\u0644\u0627\u0644 \u062d\u0644 \u0645\u062a\u062e\u0635\u0635 \u0645\u0628\u0646\u064a \u0639\u0644\u0649 \u062e\u0628\u0631\u0629 \u062d\u0642\u064a\u0642\u064a\u0629.\n\n\u2705 \u0641\u0648\u0627\u0626\u062f \u0631\u0626\u064a\u0633\u064a\u0629:\n- \u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u062a\u062d\u0648\u064a\u0644\n- \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a\n- \u0646\u0638\u0627\u0645 \u0648\u0627\u0636\u062d \u0644\u0644\u0646\u0645\u0648\n\n\ud83d\udcb0 \u0627\u0644\u0633\u0639\u0631 \u064a\u0628\u062f\u0623 \u0645\u0646: ${price}\n\n\ud83d\udce9 \u0627\u062d\u062c\u0632 \u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u0627\u0644\u0622\u0646 \u0639\u0628\u0631 \u0648\u0627\u062a\u0633\u0627\u0628\n\n\u2b50 \u0644\u0645\u0627\u0630\u0627 \u0646\u062d\u0646\u061f\n\u062e\u0628\u0631\u0629 \u0645\u062b\u0628\u062a\u0629 \u2014 \u0646\u062a\u0627\u0626\u062c \u0648\u0627\u0642\u0639\u064a\u0629 \u2014 \u062f\u0639\u0645 \u0645\u0628\u0627\u0634\u0631\n`;\n\n document.getElementById(\"output\").value = output;\n}\n\nfunction copyOutput(){\n const text = document.getElementById(\"output\");\n text.select();\n document.execCommand(\"copy\");\n alert(\"\u062a\u0645 \u0646\u0633\u062e \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0628\u0646\u062c\u0627\u062d \u2705\");\n}\n<\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Marketing Coach Web Services – \u062f\u0644\u064a\u0644 \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0627\u0644\u0645\u0648\u0642\u0639 Marketing Coach Web Services \u0627\u0644\u0634\u0631\u0642 \u0627\u0644\u0623\u0648\u0633\u0637 \u0623\u062f\u0627\u0621 \u0639\u0627\u0644\u064d \u0639\u0644\u0645 \u0628\u0646\u0627\u0621 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0647\u0628\u0648\u0637 \u0644\u0644\u0645\u062f\u0631\u0628\u064a\u0646 \u0648\u0627\u0644\u062e\u0628\u0631\u0627\u0621 \u0628\u0646\u0627\u0621 \u0645\u0648\u0642\u0639 \u0644\u0645\u062f\u0631\u0628 \u062a\u0633\u0648\u064a\u0642\u064a (Marketing Coach) \u0641\u064a \u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0634\u0631\u0642 \u0627\u0644\u0623\u0648\u0633\u0637 \u064a\u062a\u0637\u0644\u0628 \u0645\u0627 \u0647\u0648 \u0623\u0643\u062b\u0631 \u0645\u0646 \u0645\u062c\u0631\u062f “\u062a\u0635\u0645\u064a\u0645 \u062c\u0645\u064a\u0644”. \u0627\u0644\u0633\u0631 \u064a\u0643\u0645\u0646 \u0641\u064a **\u0628\u0646\u0627\u0621 \u0627\u0644\u062b\u0642\u0629 \u0627\u0644\u0631\u0642\u0645\u064a\u0629**. \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0642\u0635\u0635 \u0646\u062c\u0627\u062d \u062d\u0642\u064a\u0642\u064a\u0629\u060c \u0646\u062c\u062f \u0623\u0646 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u064a\u0628\u062f\u0623 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-745","page","type-page","status-publish","hentry"],"blocksy_meta":[],"brizy_media":[],"_links":{"self":[{"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/pages\/745","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/comments?post=745"}],"version-history":[{"count":0,"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/pages\/745\/revisions"}],"wp:attachment":[{"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/media?parent=745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":745,"date":"2025-12-21T14:10:19","date_gmt":"2025-12-21T14:10:19","guid":{"rendered":"https:\/\/marketing-coaching.uk\/?page_id=745"},"modified":"2026-01-26T22:41:00","modified_gmt":"2026-01-26T22:41:00","slug":"%d8%a8%d9%86%d8%a7%d8%a1-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d8%a7%d9%84%d9%87%d8%a8%d9%88%d8%b7-%d9%84%d9%84%d9%85%d8%b3%d8%aa%d8%b4%d8%a7%d8%b1%d9%8a%d9%86","status":"publish","type":"page","link":"https:\/\/marketing-coaching.uk\/en\/%d8%a8%d9%86%d8%a7%d8%a1-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d8%a7%d9%84%d9%87%d8%a8%d9%88%d8%b7-%d9%84%d9%84%d9%85%d8%b3%d8%aa%d8%b4%d8%a7%d8%b1%d9%8a%d9%86\/","title":{"rendered":"\u0628\u0646\u0627\u0621 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0647\u0628\u0648\u0637 \u0644\u0644\u0645\u0633\u062a\u0634\u0627\u0631\u064a\u0646"},"content":{"rendered":"\n\n\n\n \n \n Marketing Coach Web Services – \u062f\u0644\u064a\u0644 \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0627\u0644\u0645\u0648\u0642\u0639<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/3.9.1\/chart.min.js\"><\/script>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\n \n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');\n \n body {\n font-family: 'Tajawal', sans-serif;\n background-color: #F8FAFC;\n color: #334155;\n }\n\n .chart-container {\n position: relative;\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 400px;\n }\n\n @media (min-width: 768px) {\n .chart-container {\n height: 350px;\n max-width: 600px;\n }\n }\n\n .checklist-scroll::-webkit-scrollbar {\n width: 6px;\n }\n .checklist-scroll::-webkit-scrollbar-track {\n background: #f1f1f1;\n }\n .checklist-scroll::-webkit-scrollbar-thumb {\n background: #cbd5e1;\n border-radius: 3px;\n }\n\n .checkbox-wrapper input:checked + div span {\n text-decoration: line-through;\n color: #94a3b8;\n }\n <\/style>\n \n \n \n<\/head>\n<body class=\"antialiased\">\n\n \n <nav class=\"bg-white border-b border-slate-200 sticky top-0 z-50\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex justify-between h-16 items-center\">\n <div class=\"flex items-center\">\n <i class=\"fas fa-bullhorn text-emerald-600 text-2xl ml-3\"><\/i>\n <span class=\"font-extrabold text-slate-800 text-xl tracking-tight\">Marketing Coach <span class=\"text-emerald-600 text-lg\">Web Services<\/span><\/span>\n <\/div>\n <div class=\"hidden md:flex items-center space-x-reverse space-x-6 text-sm font-bold text-slate-500\">\n <span><i class=\"fas fa-globe-africa ml-1\"><\/i> \u0627\u0644\u0634\u0631\u0642 \u0627\u0644\u0623\u0648\u0633\u0637<\/span>\n <span><i class=\"fas fa-bolt ml-1\"><\/i> \u0623\u062f\u0627\u0621 \u0639\u0627\u0644\u064d<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/nav>\n\n \n <main class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 space-y-12\">\n\n \n <section>\n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-100 p-8\">\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-10 items-center\">\n <div class=\"lg:col-span-2\">\n <h1 class=\"text-4xl font-extrabold text-slate-900 mb-6\">\u0639\u0644\u0645 \u0628\u0646\u0627\u0621 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0647\u0628\u0648\u0637 \u0644\u0644\u0645\u062f\u0631\u0628\u064a\u0646 \u0648\u0627\u0644\u062e\u0628\u0631\u0627\u0621<\/h1>\n <p class=\"text-lg text-slate-600 mb-6 leading-relaxed\">\n \u0628\u0646\u0627\u0621 \u0645\u0648\u0642\u0639 \u0644\u0645\u062f\u0631\u0628 \u062a\u0633\u0648\u064a\u0642\u064a (Marketing Coach) \u0641\u064a \u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0634\u0631\u0642 \u0627\u0644\u0623\u0648\u0633\u0637 \u064a\u062a\u0637\u0644\u0628 \u0645\u0627 \u0647\u0648 \u0623\u0643\u062b\u0631 \u0645\u0646 \u0645\u062c\u0631\u062f “\u062a\u0635\u0645\u064a\u0645 \u062c\u0645\u064a\u0644”. \u0627\u0644\u0633\u0631 \u064a\u0643\u0645\u0646 \u0641\u064a **\u0628\u0646\u0627\u0621 \u0627\u0644\u062b\u0642\u0629 \u0627\u0644\u0631\u0642\u0645\u064a\u0629**. \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0642\u0635\u0635 \u0646\u062c\u0627\u062d \u062d\u0642\u064a\u0642\u064a\u0629\u060c \u0646\u062c\u062f \u0623\u0646 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u064a\u0628\u062f\u0623 \u0639\u0646\u062f\u0645\u0627 \u064a\u0634\u0639\u0631 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0623\u0646\u0643 \u062a\u0641\u0647\u0645 \u062a\u062d\u062f\u064a\u0627\u062a\u0647 \u0627\u0644\u0645\u062d\u0644\u064a\u0629 (Practical Background).\n <\/p>\n <div class=\"flex flex-wrap gap-3\">\n <span class=\"bg-emerald-100 text-emerald-700 px-4 py-2 rounded-lg text-sm font-bold border border-emerald-200\">\u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u0634\u062e\u0635\u064a\u0629<\/span>\n <span class=\"bg-blue-100 text-blue-700 px-4 py-2 rounded-lg text-sm font-bold border border-blue-200\">\u062a\u062d\u0648\u064a\u0644 \u0627\u0644\u0632\u0648\u0627\u0631 \u0644\u0639\u0645\u0644\u0627\u0621<\/span>\n <span class=\"bg-slate-100 text-slate-700 px-4 py-2 rounded-lg text-sm font-bold border border-slate-200\">\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u062e\u062f\u0645\u0627\u062a<\/span>\n <\/div>\n <\/div>\n <div class=\"bg-emerald-600 rounded-2xl p-6 text-white shadow-xl\">\n <h3 class=\"font-bold text-xl mb-3\"><i class=\"fas fa-star ml-2\"><\/i>\u0646\u0642\u0637\u0629 \u0627\u0644\u062a\u062d\u0648\u0644 (Tipping Point)<\/h3>\n <p class=\"text-emerald-50 mb-4 text-sm leading-loose\">\n \u0641\u064a \u0642\u0637\u0627\u0639 \u0627\u0644\u062e\u062f\u0645\u0627\u062a\u060c \u064a\u0642\u0631\u0631 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0648\u062b\u0648\u0642 \u0628\u0643 \u062e\u0644\u0627\u0644 \u0623\u0648\u0644 **5 \u062b\u0648\u0627\u0646\u064d**. \u0625\u0630\u0627 \u0644\u0645 \u064a\u062c\u062f “\u0628\u0631\u0647\u0627\u0646\u0627\u064b \u0627\u062c\u062a\u0645\u0627\u0639\u064a\u0627\u064b” (\u0634\u0647\u0627\u062f\u0627\u062a \u0639\u0645\u0644\u0627\u0621) \u0648\u0642\u064a\u0645\u0629 \u0648\u0627\u0636\u062d\u0629\u060c \u0633\u064a\u063a\u0627\u062f\u0631 \u0641\u0648\u0631\u0627\u064b.\n <\/p>\n <div class=\"bg-white\/20 rounded-lg p-3 text-xs\">\n <i class=\"fas fa-info-circle ml-1\"><\/i> \u0646\u0635\u064a\u062d\u0629: \u0627\u0633\u062a\u062e\u062f\u0645 \u0632\u0631 \u0648\u0627\u062a\u0633\u0627\u0628 \u0645\u0628\u0627\u0634\u0631\u060c \u0641\u0647\u0648 \u0627\u0644\u0648\u0633\u064a\u0644\u0629 \u0627\u0644\u0645\u0641\u0636\u0644\u0629 \u0641\u064a \u0645\u0646\u0637\u0642\u062a\u0646\u0627.\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section>\n <div class=\"mb-8\">\n <h2 class=\"text-2xl font-bold text-slate-900\">\u0644\u0645\u0627\u0630\u0627 \u062a\u0646\u062c\u062d \u0647\u0630\u0647 \u0627\u0644\u0645\u0648\u0627\u0642\u0639\u061f (\u0628\u0627\u0644\u0623\u0631\u0642\u0627\u0645)<\/h2>\n <p class=\"text-slate-500 mt-2\">\u062a\u062d\u0644\u064a\u0644 \u0644\u0623\u0647\u0645 \u0627\u0644\u0623\u0642\u0633\u0627\u0645 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u062f\u0631\u0627\u0633\u0627\u062a \u062a\u062a\u0628\u0639 \u062d\u0631\u0643\u0629 \u0627\u0644\u0639\u064a\u0646 \u0641\u064a \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u062e\u062f\u0645\u064a\u0629.<\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">\n \n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-100 p-6\">\n <h3 class=\"text-lg font-bold text-slate-800 mb-6\">\u0623\u062b\u0631 \u0623\u0642\u0633\u0627\u0645 \u0627\u0644\u0645\u0648\u0642\u0639 \u0639\u0644\u0649 \u0642\u0631\u0627\u0631 \u0627\u0644\u0639\u0645\u064a\u0644<\/h3>\n <div class=\"chart-container\">\n <canvas id=\"impactChart\"><\/canvas>\n <\/div>\n <p class=\"mt-4 text-sm text-slate-500 bg-slate-50 p-3 rounded-lg border-r-4 border-emerald-500\">\n <strong>\u0645\u0644\u0627\u062d\u0638\u0629:<\/strong> \u0642\u0633\u0645 “\u0642\u0635\u0629 \u0627\u0644\u0645\u062f\u0631\u0628” \u0648”\u0622\u0631\u0627\u0621 \u0627\u0644\u0639\u0645\u0644\u0627\u0621” \u064a\u062d\u0642\u0642\u0627\u0646 \u0623\u0639\u0644\u0649 \u0646\u0633\u0628\u0629 \u062a\u0641\u0627\u0639\u0644 \u0641\u064a \u0627\u0644\u0633\u0648\u0642 \u0627\u0644\u0639\u0631\u0628\u064a.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-100 p-6\">\n <h3 class=\"text-lg font-bold text-slate-800 mb-6\">\u062a\u0648\u0632\u064a\u0639 \u0627\u0644\u0623\u062c\u0647\u0632\u0629 \u0641\u064a \u0627\u0644\u0634\u0631\u0642 \u0627\u0644\u0623\u0648\u0633\u0637<\/h3>\n <div class=\"chart-container\">\n <canvas id=\"deviceChart\"><\/canvas>\n <\/div>\n <p class=\"mt-4 text-sm text-slate-500 bg-slate-50 p-3 rounded-lg border-r-4 border-blue-500\">\n <strong>\u0645\u0644\u0627\u062d\u0638\u0629:<\/strong> \u0625\u0630\u0627 \u0644\u0645 \u064a\u0643\u0646 \u0645\u0648\u0642\u0639\u0643 \u0633\u0631\u064a\u0639\u0627\u064b \u0639\u0644\u0649 \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644\u060c \u0641\u0623\u0646\u062a \u062a\u0641\u0642\u062f 70% \u0645\u0646 \u0639\u0645\u0644\u0627\u0626\u0643 \u0627\u0644\u0645\u062d\u062a\u0645\u0644\u064a\u0646.\n <\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section>\n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-100 p-8\">\n <div class=\"mb-6\">\n <h2 class=\"text-2xl font-bold text-slate-900\">\u0645\u0635\u0641\u0648\u0641\u0629 \u0627\u0644\u062c\u0647\u062f \u0645\u0642\u0627\u0628\u0644 \u0627\u0644\u0642\u064a\u0645\u0629<\/h2>\n <p class=\"text-slate-500\">\u0643\u064a\u0641 \u062a\u062d\u0642\u0642 \u0646\u062a\u0627\u0626\u062c \u0645\u0630\u0647\u0644\u0629 \u0628\u0623\u0642\u0644 \u0645\u062c\u0647\u0648\u062f \u062a\u0642\u0646\u064a \u0645\u0645\u0643\u0646\u061f<\/p>\n <\/div>\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\n <div class=\"lg:col-span-2\">\n <div class=\"chart-container\">\n <canvas id=\"matrixChart\"><\/canvas>\n <\/div>\n <\/div>\n <div class=\"flex flex-col justify-center space-y-4\">\n <div class=\"p-4 rounded-xl bg-emerald-50 border border-emerald-100\">\n <span class=\"font-bold text-emerald-800 block mb-1\">\u0627\u0644\u0631\u0628\u062d \u0627\u0644\u0633\u0631\u064a\u0639<\/span>\n <p class=\"text-xs text-emerald-600\">\u062a\u0641\u0639\u064a\u0644 \u0648\u0627\u062a\u0633\u0627\u0628\u060c \u062a\u062d\u0633\u064a\u0646 \u0633\u0631\u0639\u0629 \u0627\u0644\u062a\u062d\u0645\u064a\u0644\u060c \u0648\u0636\u0639 \u0639\u0646\u0648\u0627\u0646 \u062c\u0630\u0627\u0628.<\/p>\n <\/div>\n <div class=\"p-4 rounded-xl bg-blue-50 border border-blue-100\">\n <span class=\"font-bold text-blue-800 block mb-1\">\u0627\u0633\u062a\u062b\u0645\u0627\u0631 \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a<\/span>\n <p class=\"text-xs text-blue-600\">\u062a\u0635\u0648\u064a\u0631 \u0641\u064a\u062f\u064a\u0648\u0647\u0627\u062a \u062a\u0639\u0631\u064a\u0641\u064a\u0629\u060c \u0643\u062a\u0627\u0628\u0629 \u0645\u0642\u0627\u0644\u0627\u062a \u0645\u062a\u062e\u0635\u0635\u0629 (SEO).<\/p>\n <\/div>\n <div class=\"p-4 rounded-xl bg-slate-50 border border-slate-100\">\n <span class=\"font-bold text-slate-800 block mb-1\">\u062a\u062c\u0646\u0628 \u0627\u0644\u062a\u0639\u0642\u064a\u062f<\/span>\n <p class=\"text-xs text-slate-600\">\u0627\u0644\u0631\u0633\u0648\u0645 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 \u0627\u0644\u0645\u0628\u0627\u0644\u063a \u0641\u064a\u0647\u0627\u060c \u0643\u062b\u0631\u0629 \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0627\u0644\u0645\u0634\u062a\u062a\u0629.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"checklist-section\">\n <div class=\"mb-8\">\n <h2 class=\"text-3xl font-extrabold text-slate-900 text-center\">\u0623\u062f\u0627\u0629 \u0628\u0646\u0627\u0621 \u0627\u0644\u0645\u0648\u0642\u0639 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\u0629<\/h2>\n <p class=\"text-slate-500 text-center mt-2\">\u062e\u0631\u064a\u0637\u0629 \u0637\u0631\u064a\u0642 \u0644\u0628\u0646\u0627\u0621 \u0645\u0648\u0642\u0639\u0643 \u062e\u0637\u0648\u0629 \u0628\u062e\u0637\u0648\u0629 (\u0628\u062f\u064a\u0644 \u0645\u0644\u0641\u0627\u062a \u0627\u0644\u0625\u0643\u0633\u064a\u0644)<\/p>\n <\/div>\n\n <div class=\"bg-white rounded-3xl shadow-xl border border-slate-200 overflow-hidden\">\n <div class=\"bg-slate-800 p-8 text-white\">\n <div class=\"flex flex-col md:flex-row justify-between items-center gap-6\">\n <div>\n <h3 class=\"text-xl font-bold\">\u0646\u0633\u0628\u0629 \u0625\u0646\u062c\u0627\u0632 \u0627\u0644\u0645\u0634\u0631\u0648\u0639<\/h3>\n <p class=\"text-slate-400 text-sm mt-1\" id=\"progress-text\">\u0627\u0628\u062f\u0623 \u0627\u0644\u0622\u0646 \u0644\u062a\u0635\u0644 \u0625\u0644\u0649 100%<\/p>\n <\/div>\n <div class=\"w-full md:w-2\/3 bg-white\/10 rounded-full h-6 p-1\">\n <div id=\"main-progress-bar\" class=\"bg-emerald-500 h-full rounded-full transition-all duration-700 ease-in-out shadow-[0_0_15px_rgba(16,185,129,0.5)]\" style=\"width: 0%\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 divide-y lg:divide-y-0 lg:divide-x lg:divide-x-reverse divide-slate-200\">\n \n <div class=\"p-6 bg-slate-50\/50\">\n <div class=\"flex items-center mb-6 text-emerald-600 font-bold\">\n <i class=\"fas fa-search-dollar ml-2\"><\/i>\n <span>1. \u0627\u0644\u0623\u0628\u062d\u0627\u062b \u0648\u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629<\/span>\n <\/div>\n <div class=\"space-y-4\" id=\"phase1-list\"><\/div>\n <\/div>\n \n <div class=\"p-6\">\n <div class=\"flex items-center mb-6 text-blue-600 font-bold\">\n <i class=\"fas fa-pen-fancy ml-2\"><\/i>\n <span>2. \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0648\u0627\u0644\u0647\u064a\u0643\u0644<\/span>\n <\/div>\n <div class=\"space-y-4\" id=\"phase2-list\"><\/div>\n <\/div>\n \n <div class=\"p-6 bg-slate-50\/50\">\n <div class=\"flex items-center mb-6 text-indigo-600 font-bold\">\n <i class=\"fas fa-laptop-code ml-2\"><\/i>\n <span>3. \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0648\u0627\u0644\u062a\u0637\u0648\u064a\u0631<\/span>\n <\/div>\n <div class=\"space-y-4\" id=\"phase3-list\"><\/div>\n <\/div>\n \n <div class=\"p-6\">\n <div class=\"flex items-center mb-6 text-orange-600 font-bold\">\n <i class=\"fas fa-rocket ml-2\"><\/i>\n <span>4. \u0627\u0644\u0625\u0637\u0644\u0627\u0642 \u0648\u0627\u0644\u0642\u064a\u0627\u0633<\/span>\n <\/div>\n <div class=\"space-y-4\" id=\"phase4-list\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <\/main>\n\n <footer class=\"py-12 bg-slate-900 text-white text-center mt-20\">\n <p class=\"text-slate-400\">Marketing Coach Web Services © 2024<\/p>\n <p class=\"text-xs mt-2 text-slate-500\">\u062a\u0645 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0623\u0641\u0636\u0644 \u0645\u0645\u0627\u0631\u0633\u0627\u062a UI\/UX \u0644\u0633\u0648\u0642 \u0627\u0644\u0634\u0631\u0642 \u0627\u0644\u0623\u0648\u0633\u0637<\/p>\n <\/footer>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n \n \/\/ Checklist Data\n const checklistData = {\n phase1: [\n { id: 'ar1', text: '\u062a\u062d\u062f\u064a\u062f \u0634\u062e\u0635\u064a\u0629 \u0627\u0644\u0639\u0645\u064a\u0644 \u0627\u0644\u0645\u062b\u0627\u0644\u064a', tip: '\u0645\u0646 \u0647\u0648 \u0627\u0644\u0634\u062e\u0635 \u0627\u0644\u0630\u064a \u064a\u062d\u062a\u0627\u062c \u0644\u062e\u062f\u0645\u0627\u062a\u0643\u061f' },\n { id: 'ar2', text: '\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0645\u0646\u0627\u0641\u0633\u064a\u0646 \u0645\u062d\u0644\u064a\u0627\u064b', tip: '\u0645\u0627\u0630\u0627 \u064a\u0642\u062f\u0645 \u0627\u0644\u0645\u062f\u0631\u0628\u0648\u0646 \u0627\u0644\u0622\u062e\u0631\u0648\u0646 \u0641\u064a \u0627\u0644\u0645\u0646\u0637\u0642\u0629\u061f' },\n { id: 'ar3', text: '\u062a\u062d\u062f\u064a\u062f \u0639\u0631\u0636 \u0627\u0644\u0642\u064a\u0645\u0629 \u0627\u0644\u0641\u0631\u064a\u062f', tip: '\u0644\u0645\u0627\u0630\u0627 \u064a\u062e\u062a\u0627\u0631\u0643 \u0627\u0644\u0639\u0645\u064a\u0644 \u0623\u0646\u062a \u062f\u0648\u0646 \u063a\u064a\u0631\u0643\u061f' }\n ],\n phase2: [\n { id: 'ar4', text: '\u0643\u062a\u0627\u0628\u0629 \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0647\u0628\u0648\u0637 \u0627\u0644\u0631\u0626\u064a\u0633\u064a', tip: '\u064a\u062c\u0628 \u0623\u0646 \u064a\u0634\u0631\u062d \u0627\u0644\u0641\u0627\u0626\u062f\u0629 \u0641\u064a 3 \u062b\u0648\u0627\u0646\u064d.' },\n { id: 'ar5', text: '\u062c\u0645\u0639 3 \u0634\u0647\u0627\u062f\u0627\u062a \u0639\u0645\u0644\u0627\u0621 \u0641\u064a\u062f\u064a\u0648', tip: '\u0627\u0644\u0641\u064a\u062f\u064a\u0648 \u064a\u0628\u0646\u064a \u062b\u0642\u0629 \u0645\u0636\u0627\u0639\u0641\u0629 \u0641\u064a \u0627\u0644\u062e\u0644\u064a\u062c.' },\n { id: 'ar6', text: '\u0635\u064a\u0627\u063a\u0629 \"\u0642\u0635\u062a\u064a \u0627\u0644\u0634\u062e\u0635\u064a\u0629\"', tip: '\u0627\u062c\u0639\u0644\u0647\u0627 \u0642\u0635\u0629 \u0645\u0644\u0647\u0645\u0629 \u0648\u0644\u064a\u0633 \u0645\u062c\u0631\u062f \u0633\u064a\u0631\u0629.' }\n ],\n phase3: [\n { id: 'ar7', text: '\u0632\u0631 \u0648\u0627\u062a\u0633\u0627\u0628 \u0639\u0627\u0626\u0645', tip: '\u0623\u0633\u0647\u0644 \u0648\u0633\u064a\u0644\u0629 \u0644\u0644\u062a\u0648\u0627\u0635\u0644 \u0627\u0644\u0633\u0631\u064a\u0639.' },\n { id: 'ar8', text: '\u062a\u062d\u0633\u064a\u0646 \u0633\u0631\u0639\u0629 \u0627\u0644\u062a\u062d\u0645\u064a\u0644', tip: '\u064a\u062c\u0628 \u0623\u0646 \u064a\u0641\u062a\u062d \u0627\u0644\u0645\u0648\u0642\u0639 \u0641\u064a \u0623\u0642\u0644 \u0645\u0646 \u062b\u0627\u0646\u064a\u062a\u064a\u0646.' },\n { id: 'ar9', text: '\u062a\u0646\u0633\u064a\u0642 \u0645\u062a\u0648\u0627\u0641\u0642 \u0645\u0639 \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644', tip: '\u062a\u0623\u0643\u062f \u0645\u0646 \u0633\u0647\u0648\u0644\u0629 \u0627\u0644\u0646\u0642\u0631 \u0628\u0627\u0644\u0625\u0628\u0647\u0627\u0645.' }\n ],\n phase4: [\n { id: 'ar10', text: '\u062a\u0641\u0639\u064a\u0644 Google Analytics', tip: '\u0644\u0645\u0639\u0631\u0641\u0629 \u0645\u0646 \u0623\u064a\u0646 \u064a\u0623\u062a\u064a \u0627\u0644\u0632\u0648\u0627\u0631.' },\n { id: 'ar11', text: '\u062d\u0645\u0644\u0629 \u0625\u0639\u0644\u0627\u0646\u064a\u0629 \u062a\u062c\u0631\u064a\u0628\u064a\u0629', tip: '\u0644\u0627 \u062a\u0646\u062a\u0638\u0631\u060c \u0627\u0628\u062f\u0623 \u0628\u062c\u0644\u0628 \u0627\u0644\u0632\u0648\u0627\u0631 \u0641\u0648\u0631\u0627\u064b.' },\n { id: 'ar12', text: '\u0642\u064a\u0627\u0633 \u0646\u0633\u0628\u0629 \u0627\u0644\u062a\u062d\u0648\u064a\u0644', tip: '\u0643\u0645 \u0632\u0627\u0626\u0631 \u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0643 \u0641\u0639\u0644\u064a\u0627\u064b\u061f' }\n ]\n };\n\n \/\/ Charts\n const chartConfig = {\n font: { family: 'Tajawal', size: 12 }\n };\n\n \/\/ 1. Impact Bar Chart\n new Chart(document.getElementById('impactChart'), {\n type: 'bar',\n data: {\n labels: ['\u0627\u0644\u0639\u0646\u0648\u0627\u0646', '\u0622\u0631\u0627\u0621 \u0627\u0644\u0639\u0645\u0644\u0627\u0621', '\u0642\u0635\u0629 \u0627\u0644\u0645\u062f\u0631\u0628', '\u0627\u0644\u062e\u062f\u0645\u0627\u062a', '\u0627\u0644\u062a\u0648\u0627\u0635\u0644'],\n datasets: [{\n label: '\u0646\u0633\u0628\u0629 \u0627\u0644\u0623\u0647\u0645\u064a\u0629',\n data: [95, 90, 85, 75, 70],\n backgroundColor: 'rgba(16, 185, 129, 0.7)',\n borderRadius: 8\n }]\n },\n options: {\n indexAxis: 'y',\n responsive: true,\n maintainAspectRatio: false,\n plugins: { legend: { display: false } },\n scales: { x: { max: 100 } }\n }\n });\n\n \/\/ 2. Device Doughnut\n new Chart(document.getElementById('deviceChart'), {\n type: 'doughnut',\n data: {\n labels: ['\u0645\u0648\u0628\u0627\u064a\u0644', '\u0643\u0645\u0628\u064a\u0648\u062a\u0631', '\u062a\u0627\u0628\u0644\u062a'],\n datasets: [{\n data: [72, 25, 3],\n backgroundColor: ['#10b981', '#3b82f6', '#cbd5e1']\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: { legend: { position: 'bottom' } }\n }\n });\n\n \/\/ 3. Matrix Scatter\n new Chart(document.getElementById('matrixChart'), {\n type: 'scatter',\n data: {\n datasets: [{\n label: '\u0627\u0644\u0645\u0647\u0627\u0645',\n data: [\n { x: 2, y: 9, label: '\u062a\u0641\u0639\u064a\u0644 \u0648\u0627\u062a\u0633\u0627\u0628' },\n { x: 3, y: 8, label: '\u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u0639\u0646\u0648\u0627\u0646' },\n { x: 8, y: 4, label: '\u0628\u0631\u0645\u062c\u0629 \u062e\u0627\u0635\u0629 \u0645\u0639\u0642\u062f\u0629' },\n { x: 5, y: 9, label: '\u0634\u0647\u0627\u062f\u0627\u062a \u0641\u064a\u062f\u064a\u0648' },\n { x: 7, y: 7, label: 'SEO \u0645\u062a\u062e\u0635\u0635' }\n ],\n backgroundColor: '#10b981',\n pointRadius: 10\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n x: { title: { display: true, text: '\u0627\u0644\u062c\u0647\u062f \u0627\u0644\u0645\u0628\u0630\u0648\u0644' }, min: 0, max: 10 },\n y: { title: { display: true, text: '\u0627\u0644\u0642\u064a\u0645\u0629 \u0627\u0644\u0645\u062d\u0642\u0642\u0629' }, min: 0, max: 10 }\n },\n plugins: {\n tooltip: {\n callbacks: { label: (ctx) => ctx.raw.label }\n }\n }\n }\n });\n\n \/\/ Render Checklist\n function renderItems() {\n Object.keys(checklistData).forEach(phase => {\n const container = document.getElementById(`${phase}-list`);\n container.innerHTML = checklistData[phase].map(item => `\n <label class=\"flex items-start gap-3 p-3 bg-white border border-slate-100 rounded-xl hover:border-emerald-300 transition-all cursor-pointer group checkbox-wrapper\">\n <input type=\"checkbox\" class=\"mt-1 w-5 h-5 rounded border-slate-300 text-emerald-600 focus:ring-emerald-500\">\n <div class=\"flex-1\">\n <span class=\"text-sm font-bold text-slate-700 block\">${item.text}<\/span>\n <span class=\"text-[10px] text-slate-400 block mt-1\">${item.tip}<\/span>\n <\/div>\n <\/label>\n `).join('');\n });\n\n document.querySelectorAll('input[type=\"checkbox\"]').forEach(box => {\n box.addEventListener('change', updateProgress);\n });\n }\n\n function updateProgress() {\n const total = document.querySelectorAll('input[type=\"checkbox\"]').length;\n const checked = document.querySelectorAll('input[type=\"checkbox\"]:checked').length;\n const percent = Math.round((checked \/ total) * 100);\n\n const bar = document.getElementById('main-progress-bar');\n const text = document.getElementById('progress-text');\n \n bar.style.width = `${percent}%`;\n \n if (percent === 0) text.innerText = '\u0627\u0628\u062f\u0623 \u0627\u0644\u0622\u0646 \u0644\u062a\u0635\u0644 \u0625\u0644\u0649 100%';\n else if (percent < 100) text.innerText = `\u0631\u0627\u0626\u0639! \u0623\u0646\u062c\u0632\u062a ${percent}% \u0645\u0646 \u0627\u0644\u0639\u0645\u0644`;\n else text.innerText = '\u0645\u0628\u0631\u0648\u0643! \u0645\u0648\u0642\u0639\u0643 \u062c\u0627\u0647\u0632 \u0644\u0644\u0647\u064a\u0645\u0646\u0629 \u0639\u0644\u0649 \u0627\u0644\u0633\u0648\u0642';\n }\n\n renderItems();\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"ar\" dir=\"rtl\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n<title>ConvertKit MENA \u2014 SaaS Dashboard<\/title>\n\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\nbody{\n font-family:'Cairo', sans-serif;\n background:#F8FAFC;\n}\n.card{\n background:white;\n border-radius:20px;\n border:1px solid #E5E7EB;\n padding:22px;\n}\n<\/style>\n<\/head>\n\n<body class=\"p-6\">\n\n\n<header class=\"max-w-7xl mx-auto mb-8 flex justify-between items-center\">\n <h1 class=\"text-2xl font-extrabold text-slate-900\">\n ConvertKit MENA <span class=\"text-emerald-600\">SaaS<\/span>\n <\/h1>\n <span class=\"bg-emerald-100 text-emerald-700 px-4 py-2 rounded-xl font-bold text-sm\">\n Starter Plan \u2014 $7\/mo\n <\/span>\n<\/header>\n\n\n<div class=\"max-w-7xl mx-auto grid lg:grid-cols-3 gap-6\">\n\n\n<div class=\"card\">\n <h3 class=\"font-extrabold text-slate-900 mb-3\">\n \ud83d\udcca Dashboard Overview\n <\/h3>\n\n <div class=\"grid grid-cols-3 gap-3 text-center\">\n <div class=\"bg-slate-50 p-4 rounded-xl\">\n <div class=\"text-2xl font-extrabold text-emerald-600\">420<\/div>\n <div class=\"text-xs text-slate-500\">\u0632\u064a\u0627\u0631\u0627\u062a<\/div>\n <\/div>\n <div class=\"bg-slate-50 p-4 rounded-xl\">\n <div class=\"text-2xl font-extrabold text-blue-600\">38<\/div>\n <div class=\"text-xs text-slate-500\">Leads<\/div>\n <\/div>\n <div class=\"bg-slate-50 p-4 rounded-xl\">\n <div class=\"text-2xl font-extrabold text-amber-600\">9%<\/div>\n <div class=\"text-xs text-slate-500\">Conversion<\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"card\">\n <h3 class=\"font-extrabold text-slate-900 mb-3\">\n \ud83d\udd0d Website Audit\n <\/h3>\n\n <input id=\"siteUrl\" class=\"w-full border rounded-xl p-3 mb-3 text-sm\" placeholder=\"\u0623\u062f\u062e\u0644 \u0631\u0627\u0628\u0637 \u0645\u0648\u0642\u0639\u0643\">\n\n <button onclick=\"runAudit()\" class=\"w-full bg-emerald-600 text-white font-extrabold py-3 rounded-xl hover:bg-emerald-700 transition\">\n \u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0645\u0648\u0642\u0639 \u0627\u0644\u0622\u0646\n <\/button>\n\n <div id=\"auditResult\" class=\"mt-4 text-sm text-slate-600\"><\/div>\n<\/div>\n\n\n<div class=\"card\">\n <h3 class=\"font-extrabold text-slate-900 mb-3\">\n \ud83e\udde0 Landing Page Generator\n <\/h3>\n\n <input id=\"service\" class=\"w-full border rounded-xl p-3 mb-3 text-sm\" placeholder=\"\u0627\u0644\u062e\u062f\u0645\u0629 (\u0645\u062b\u0627\u0644: \u062a\u0633\u0648\u064a\u0642 \u0637\u0628\u064a)\">\n <input id=\"audience\" class=\"w-full border rounded-xl p-3 mb-3 text-sm\" placeholder=\"\u0627\u0644\u062c\u0645\u0647\u0648\u0631 \u0627\u0644\u0645\u0633\u062a\u0647\u062f\u0641\">\n <input id=\"price\" class=\"w-full border rounded-xl p-3 mb-3 text-sm\" placeholder=\"\u0627\u0644\u0633\u0639\u0631\">\n\n <button onclick=\"generateLanding()\" class=\"w-full bg-slate-900 text-white font-extrabold py-3 rounded-xl hover:bg-slate-800 transition\">\n \u062a\u0648\u0644\u064a\u062f \u0635\u0641\u062d\u0629 \u0647\u0628\u0648\u0637\n <\/button>\n<\/div>\n\n<\/div>\n\n\n<section class=\"max-w-7xl mx-auto mt-6 card\">\n <h3 class=\"font-extrabold text-slate-900 mb-3\">\n \ud83d\udcc4 Generated Landing Page Copy\n <\/h3>\n\n <textarea id=\"output\" class=\"w-full h-52 border rounded-xl p-4 text-sm\"><\/textarea>\n\n <button onclick=\"copyOutput()\" class=\"mt-3 bg-emerald-600 text-white font-extrabold px-6 py-3 rounded-xl hover:bg-emerald-700\">\n \u0646\u0633\u062e \u0627\u0644\u0645\u062d\u062a\u0648\u0649\n <\/button>\n<\/section>\n\n\n<script>\nfunction runAudit(){\n const url = document.getElementById(\"siteUrl\").value;\n const result = document.getElementById(\"auditResult\");\n\n if(!url){\n result.innerHTML = \"\u274c \u0623\u062f\u062e\u0644 \u0631\u0627\u0628\u0637 \u0627\u0644\u0645\u0648\u0642\u0639 \u0623\u0648\u0644\u0627\u064b\";\n return;\n }\n\n result.innerHTML = `\n \u2705 \u062a\u062d\u0644\u064a\u0644 \u0645\u0628\u062f\u0626\u064a \u0644\u0645\u0648\u0642\u0639\u0643:<br>\n \u2022 CTA \u0636\u0639\u064a\u0641 \u2014 \u062a\u062d\u0633\u064a\u0646\u0647 \u064a\u0632\u064a\u062f \u0627\u0644\u062a\u062d\u0648\u064a\u0644 +18%<br>\n \u2022 Hero \u063a\u064a\u0631 \u0648\u0627\u0636\u062d \u2014 \u064a\u0641\u0636\u0644 \u0625\u0639\u0627\u062f\u0629 \u0635\u064a\u0627\u063a\u062a\u0647<br>\n \u2022 \u0633\u0631\u0639\u0629 \u0627\u0644\u0645\u0648\u0642\u0639 \u062a\u062d\u062a\u0627\u062c \u062a\u062d\u0633\u064a\u0646<br>\n \u2022 \u0644\u0627 \u062a\u0648\u062c\u062f Testimonials \u0648\u0627\u0636\u062d\u0629<br><br>\n \ud83d\udcc8 Score \u0627\u0644\u0645\u062a\u0648\u0642\u0639: <strong>72 \/ 100<\/strong>\n `;\n}\n\nfunction generateLanding(){\n const service = document.getElementById(\"service\").value;\n const audience = document.getElementById(\"audience\").value;\n const price = document.getElementById(\"price\").value;\n\n const output = `\n\ud83d\ude80 ${service}\n\n\u0633\u0627\u0639\u062f\u0646\u0627 ${audience} \u0639\u0644\u0649 \u062a\u062d\u0642\u064a\u0642 \u0646\u062a\u0627\u0626\u062c \u0623\u0641\u0636\u0644 \u0645\u0646 \u062e\u0644\u0627\u0644 \u062d\u0644 \u0645\u062a\u062e\u0635\u0635 \u0645\u0628\u0646\u064a \u0639\u0644\u0649 \u062e\u0628\u0631\u0629 \u062d\u0642\u064a\u0642\u064a\u0629.\n\n\u2705 \u0641\u0648\u0627\u0626\u062f \u0631\u0626\u064a\u0633\u064a\u0629:\n- \u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u062a\u062d\u0648\u064a\u0644\n- \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a\n- \u0646\u0638\u0627\u0645 \u0648\u0627\u0636\u062d \u0644\u0644\u0646\u0645\u0648\n\n\ud83d\udcb0 \u0627\u0644\u0633\u0639\u0631 \u064a\u0628\u062f\u0623 \u0645\u0646: ${price}\n\n\ud83d\udce9 \u0627\u062d\u062c\u0632 \u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u0627\u0644\u0622\u0646 \u0639\u0628\u0631 \u0648\u0627\u062a\u0633\u0627\u0628\n\n\u2b50 \u0644\u0645\u0627\u0630\u0627 \u0646\u062d\u0646\u061f\n\u062e\u0628\u0631\u0629 \u0645\u062b\u0628\u062a\u0629 \u2014 \u0646\u062a\u0627\u0626\u062c \u0648\u0627\u0642\u0639\u064a\u0629 \u2014 \u062f\u0639\u0645 \u0645\u0628\u0627\u0634\u0631\n`;\n\n document.getElementById(\"output\").value = output;\n}\n\nfunction copyOutput(){\n const text = document.getElementById(\"output\");\n text.select();\n document.execCommand(\"copy\");\n alert(\"\u062a\u0645 \u0646\u0633\u062e \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0628\u0646\u062c\u0627\u062d \u2705\");\n}\n<\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Marketing Coach Web Services – \u062f\u0644\u064a\u0644 \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0627\u0644\u0645\u0648\u0642\u0639 Marketing Coach Web Services \u0627\u0644\u0634\u0631\u0642 \u0627\u0644\u0623\u0648\u0633\u0637 \u0623\u062f\u0627\u0621 \u0639\u0627\u0644\u064d \u0639\u0644\u0645 \u0628\u0646\u0627\u0621 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0647\u0628\u0648\u0637 \u0644\u0644\u0645\u062f\u0631\u0628\u064a\u0646 \u0648\u0627\u0644\u062e\u0628\u0631\u0627\u0621 \u0628\u0646\u0627\u0621 \u0645\u0648\u0642\u0639 \u0644\u0645\u062f\u0631\u0628 \u062a\u0633\u0648\u064a\u0642\u064a (Marketing Coach) \u0641\u064a \u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0634\u0631\u0642 \u0627\u0644\u0623\u0648\u0633\u0637 \u064a\u062a\u0637\u0644\u0628 \u0645\u0627 \u0647\u0648 \u0623\u0643\u062b\u0631 \u0645\u0646 \u0645\u062c\u0631\u062f “\u062a\u0635\u0645\u064a\u0645 \u062c\u0645\u064a\u0644”. \u0627\u0644\u0633\u0631 \u064a\u0643\u0645\u0646 \u0641\u064a **\u0628\u0646\u0627\u0621 \u0627\u0644\u062b\u0642\u0629 \u0627\u0644\u0631\u0642\u0645\u064a\u0629**. \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0642\u0635\u0635 \u0646\u062c\u0627\u062d \u062d\u0642\u064a\u0642\u064a\u0629\u060c \u0646\u062c\u062f \u0623\u0646 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u064a\u0628\u062f\u0623 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-745","page","type-page","status-publish","hentry"],"blocksy_meta":[],"brizy_media":[],"_links":{"self":[{"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/pages\/745","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/comments?post=745"}],"version-history":[{"count":0,"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/pages\/745\/revisions"}],"wp:attachment":[{"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/media?parent=745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}