Spaces:
Running
Running
| <html lang="fr" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Analyse Interactive : Polyclinique La Corniche</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" /> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'primary': '#0f766e', | |
| 'primary-light': '#0d9488', | |
| 'secondary': '#d97706', | |
| 'accent': '#7c3aed', | |
| 'dark': '#1e293b', | |
| 'light': '#f8fafc' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { | |
| font-family: "Inter", sans-serif; | |
| background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); | |
| } | |
| .chart-container { | |
| position: relative; | |
| width: 100%; | |
| max-width: 900px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| height: 400px; | |
| max-height: 50vh; | |
| } | |
| @media (min-width: 768px) { | |
| .chart-container { | |
| height: 500px; | |
| } | |
| } | |
| .nav-link { | |
| transition: all 0.3s ease; | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -2px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background-color: #d97706; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .active-link { | |
| color: #d97706; | |
| } | |
| .active-link::after { | |
| width: 100%; | |
| } | |
| .btn-filter { | |
| transition: all 0.3s ease; | |
| } | |
| .btn-filter.active { | |
| background-color: #0f766e; | |
| color: white; | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .swot-card { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .swot-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .timeline-dot { | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| position: absolute; | |
| top: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| z-index: 10; | |
| } | |
| .timeline-line { | |
| position: absolute; | |
| top: 12px; | |
| bottom: 12px; | |
| left: 50%; | |
| width: 2px; | |
| transform: translateX(-50%); | |
| z-index: 1; | |
| } | |
| .stat-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .counter { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .section-title { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -8px; | |
| left: 0; | |
| width: 60px; | |
| height: 3px; | |
| background-color: #d97706; | |
| border-radius: 3px; | |
| } | |
| .floating-nav { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| z-index: 100; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .floating-btn { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background-color: #0f766e; | |
| color: white; | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .floating-btn:hover { | |
| transform: translateY(-3px) scale(1.05); | |
| box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); | |
| } | |
| </style> | |
| </head> | |
| <body class="text-slate-700"> | |
| <!-- Floating Navigation --> | |
| <div class="floating-nav"> | |
| <a href="#synthese" class="floating-btn"> | |
| <i class="fas fa-home"></i> | |
| </a> | |
| <a href="#diagnostic" class="floating-btn"> | |
| <i class="fas fa-stethoscope"></i> | |
| </a> | |
| <a href="#concurrence" class="floating-btn"> | |
| <i class="fas fa-chart-bar"></i> | |
| </a> | |
| <a href="#plan" class="floating-btn"> | |
| <i class="fas fa-road"></i> | |
| </a> | |
| </div> | |
| <header class="bg-white shadow-md sticky top-0 z-50"> | |
| <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center py-4"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="bg-primary-light p-2 rounded-lg"> | |
| <i class="fas fa-hospital text-white text-xl"></i> | |
| </div> | |
| <h1 class="text-xl font-bold text-slate-800"> | |
| Analyse Stratégique | |
| <span class="hidden sm:inline-block">| Polyclinique La Corniche</span> | |
| </h1> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8 text-sm font-medium"> | |
| <a href="#synthese" class="nav-link">Synthèse</a> | |
| <a href="#diagnostic" class="nav-link">Diagnostic</a> | |
| <a href="#concurrence" class="nav-link">Concurrence</a> | |
| <a href="#plan" class="nav-link">Plan d'Action</a> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="text-slate-800"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden py-4 border-t border-slate-200"> | |
| <div class="flex flex-col space-y-3"> | |
| <a href="#synthese" class="nav-link py-2">Synthèse</a> | |
| <a href="#diagnostic" class="nav-link py-2">Diagnostic</a> | |
| <a href="#concurrence" class="nav-link py-2">Concurrence</a> | |
| <a href="#plan" class="nav-link py-2">Plan d'Action</a> | |
| </div> | |
| </div> | |
| </nav> | |
| </header> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12"> | |
| <!-- Hero Section --> | |
| <section class="mb-16 bg-gradient-to-r from-primary to-primary-light rounded-2xl p-8 text-white"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h1 class="text-3xl md:text-4xl font-bold mb-4">Transformation Stratégique de la Polyclinique La Corniche</h1> | |
| <p class="text-lg opacity-90">Un plan d'action pour transformer les défis en opportunités et positionner la clinique comme leader régional</p> | |
| <div class="mt-8 flex justify-center"> | |
| <a href="#plan" class="bg-white text-primary font-bold px-6 py-3 rounded-full shadow-lg hover:bg-amber-50 transition-all duration-300 transform hover:-translate-y-1"> | |
| Voir le plan d'action <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="synthese" class="scroll-mt-24 mb-16"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-slate-800 mb-2"> | |
| <span class="section-title">Le Constat : Un Potentiel à Revitaliser</span> | |
| </h2> | |
| <p class="mt-8 text-lg max-w-3xl mx-auto text-slate-600"> | |
| La Polyclinique La Corniche, un nom historique à Sousse, fait face à | |
| un décalage critique entre sa réputation et sa réalité | |
| technologique. Cette analyse révèle des faiblesses structurelles | |
| mais surtout une opportunité unique de transformation et de | |
| croissance par l'innovation. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16"> | |
| <div class="stat-card bg-white p-6 rounded-xl shadow-sm border border-slate-100"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-amber-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-landmark text-amber-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-slate-800">Notoriété Historique</h3> | |
| </div> | |
| <p class="text-sm text-slate-500"> | |
| Fondée en 2003, bénéficiant d'un emplacement stratégique. | |
| </p> | |
| </div> | |
| <div class="stat-card bg-white p-6 rounded-xl shadow-sm border border-slate-100"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-red-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-chart-line text-red-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-slate-800">Retard Technologique</h3> | |
| </div> | |
| <p class="text-sm text-slate-500"> | |
| Absence d'IRM et de radiothérapie, équipements clés du marché. | |
| </p> | |
| </div> | |
| <div class="stat-card bg-white p-6 rounded-xl shadow-sm border border-slate-100"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-globe text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-slate-800">Invisibilité Numérique</h3> | |
| </div> | |
| <p class="text-sm text-slate-500"> | |
| Site web obsolète et inaccessible, absence totale des réseaux sociaux. | |
| </p> | |
| </div> | |
| <div class="stat-card bg-white p-6 rounded-xl shadow-sm border border-slate-100"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-rocket text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-slate-800">Opportunité Majeure</h3> | |
| </div> | |
| <p class="text-sm text-slate-500"> | |
| Un besoin urgent de modernisation qui ouvre la voie à un partenariat stratégique. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-16"> | |
| <h3 class="text-2xl font-bold text-center text-slate-800 mb-8"> | |
| Analyse Stratégique (SWOT) | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6"> | |
| <div class="swot-card bg-green-50 p-6 rounded-xl border-2 border-green-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-200 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-thumbs-up text-green-700"></i> | |
| </div> | |
| <h4 class="font-bold text-lg text-green-800">Forces</h4> | |
| </div> | |
| <ul class="mt-2 list-disc list-inside text-green-700 space-y-2 text-sm"> | |
| <li>Notoriété historique et confiance locale</li> | |
| <li>Emplacement stratégique au coeur de Sousse</li> | |
| <li>Positionnement affiché sur le tourisme médical</li> | |
| </ul> | |
| </div> | |
| <div class="swot-card bg-red-50 p-6 rounded-xl border-2 border-red-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-red-200 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-thumbs-down text-red-700"></i> | |
| </div> | |
| <h4 class="font-bold text-lg text-red-800">Faiblesses</h4> | |
| </div> | |
| <ul class="mt-2 list-disc list-inside text-red-700 space-y-2 text-sm"> | |
| <li>Déficit technologique (pas d'IRM/radiothérapie)</li> | |
| <li>Présence digitale nulle (site inaccessible)</li> | |
| <li>Absence de certifications qualité internationales</li> | |
| <li>Capacité d'accueil limitée (45 lits)</li> | |
| </ul> | |
| </div> | |
| <div class="swot-card bg-blue-50 p-6 rounded-xl border-2 border-blue-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-200 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-bullseye text-blue-700"></i> | |
| </div> | |
| <h4 class="font-bold text-lg text-blue-800">Opportunités</h4> | |
| </div> | |
| <ul class="mt-2 list-disc list-inside text-blue-700 space-y-2 text-sm"> | |
| <li>Partenariat de transformation digitale et technologique</li> | |
| <li>Recapture des revenus de l'imagerie externalisée</li> | |
| <li>Développement de l'e-santé (DPE, télémédecine)</li> | |
| <li>Marché du tourisme médical en croissance</li> | |
| </ul> | |
| </div> | |
| <div class="swot-card bg-amber-50 p-6 rounded-xl border-2 border-amber-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-amber-200 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-exclamation-triangle text-amber-700"></i> | |
| </div> | |
| <h4 class="font-bold text-lg text-amber-800">Menaces</h4> | |
| </div> | |
| <ul class="mt-2 list-disc list-inside text-amber-700 space-y-2 text-sm"> | |
| <li>Concurrence régionale intense et moderne</li> | |
| <li>Perte des talents médicaux vers des plateformes mieux équipées</li> | |
| <li>Érosion des parts de marché (surtout internationales)</li> | |
| <li>Risque d'obsolescence et de marginalisation</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <hr class="my-16 border-slate-200" /> | |
| <section id="diagnostic" class="scroll-mt-24 mb-16"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-slate-800 mb-2"> | |
| <span class="section-title">Diagnostic : La Rupture Numérique et Technologique</span> | |
| </h2> | |
| <p class="mt-8 text-lg max-w-3xl mx-auto text-slate-600"> | |
| Le diagnostic révèle une clinique opérant avec les outils d'hier | |
| dans le monde de demain. Cette section quantifie le retard et met en | |
| lumière les points de friction les plus critiques pour la patientèle | |
| et la compétitivité. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <h3 class="font-bold text-xl text-slate-800 mb-6 flex items-center"> | |
| <i class="fas fa-laptop-medical text-primary mr-3"></i> | |
| Bilan de Maturité Digitale | |
| </h3> | |
| <div class="flex flex-col items-center justify-center bg-slate-50 p-8 rounded-xl mb-6"> | |
| <div class="counter">0/5</div> | |
| <p class="mt-2 font-medium text-slate-700">Score de Maturité Digitale</p> | |
| <div class="w-full bg-slate-200 rounded-full h-2.5 mt-4"> | |
| <div class="bg-red-500 h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| <p class="text-center text-sm mt-4 text-slate-500"> | |
| Un score nul qui reflète une absence totale de stratégie et | |
| d'outils numériques pour l'acquisition et la gestion des | |
| patients. | |
| </p> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start p-3 rounded-lg hover:bg-slate-50"> | |
| <span class="text-red-500 text-xl mr-3 mt-1"><i class="fas fa-times-circle"></i></span> | |
| <div> | |
| <h4 class="font-semibold text-slate-800">Site Web Inaccessible</h4> | |
| <p class="text-sm text-slate-500"> | |
| Basé sur la technologie Flash, obsolète depuis 2020. Invisible pour 99% des utilisateurs. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start p-3 rounded-lg hover:bg-slate-50"> | |
| <span class="text-red-500 text-xl mr-3 mt-1"><i class="fas fa-times-circle"></i></span> | |
| <div> | |
| <h4 class="font-semibold text-slate-800">Réseaux Sociaux</h4> | |
| <p class="text-sm text-slate-500"> | |
| Aucune présence officielle active sur Facebook, LinkedIn ou d'autres plateformes. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start p-3 rounded-lg hover:bg-slate-50"> | |
| <span class="text-red-500 text-xl mr-3 mt-1"><i class="fas fa-times-circle"></i></span> | |
| <div> | |
| <h4 class="font-semibold text-slate-800">E-réputation</h4> | |
| <p class="text-sm text-slate-500"> | |
| Avis patients quasi-inexistants, ne permettant pas de bâtir un capital confiance en ligne. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <h3 class="font-bold text-xl text-slate-800 mb-6 flex items-center"> | |
| <i class="fas fa-x-ray text-primary mr-3"></i> | |
| Plateau Technique : Le Handicap Stratégique | |
| </h3> | |
| <p class="text-slate-600 text-sm mb-6"> | |
| Le positionnement sur des chirurgies complexes (cardiaque, orthopédique) est en totale contradiction avec un plateau d'imagerie interne insuffisant. Cette dépendance à l'externe fragmente le parcours patient et représente une perte de revenus majeure. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between p-4 bg-green-50 border-2 border-green-200 rounded-xl"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> | |
| <span class="font-semibold text-green-800">Scanner</span> | |
| </div> | |
| <span class="text-xl text-green-500">✅</span> | |
| </div> | |
| <p class="text-xs text-slate-400 text-center italic"> | |
| Performance et modèle non spécifiés, probablement anciens. | |
| </p> | |
| <div class="flex items-center justify-between p-4 bg-red-50 border-2 border-red-200 rounded-xl"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-times-circle text-red-500 mr-3"></i> | |
| <span class="font-semibold text-red-800">Imagerie par Résonance Magnétique (IRM)</span> | |
| </div> | |
| <span class="text-xl text-red-500">❌</span> | |
| </div> | |
| <div class="flex items-center justify-between p-4 bg-red-50 border-2 border-red-200 rounded-xl"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-times-circle text-red-500 mr-3"></i> | |
| <span class="font-semibold text-red-800">Radiothérapie</span> | |
| </div> | |
| <span class="text-xl text-red-500">❌</span> | |
| </div> | |
| <div class="flex items-center justify-between p-4 bg-red-50 border-2 border-red-200 rounded-xl"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-times-circle text-red-500 mr-3"></i> | |
| <span class="font-semibold text-red-800">Certifications Qualité (ISO, JCI...)</span> | |
| </div> | |
| <span class="text-xl text-red-500">❌</span> | |
| </div> | |
| </div> | |
| <div class="mt-8 bg-slate-50 p-4 rounded-xl"> | |
| <h4 class="font-semibold text-slate-800 mb-2">Impact Financier Estimé</h4> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <div class="text-sm text-slate-500">Perte annuelle due à l'externalisation</div> | |
| <div class="text-xl font-bold text-primary">750K TND</div> | |
| </div> | |
| <div class="bg-primary-light p-2 rounded-lg"> | |
| <i class="fas fa-money-bill-wave text-white"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <hr class="my-16 border-slate-200" /> | |
| <section id="concurrence" class="scroll-mt-24 mb-16"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-slate-800 mb-2"> | |
| <span class="section-title">Analyse Concurrentielle Interactive</span> | |
| </h2> | |
| <p class="mt-8 text-lg max-w-3xl mx-auto text-slate-600"> | |
| La PLC n'opère pas en vase clos. La région du Sahel est un hub | |
| médical compétitif où les acteurs investissent massivement. Ce | |
| graphique interactif compare la maturité digitale des cliniques. | |
| Utilisez les filtres pour affiner l'analyse. | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 md:p-8 rounded-xl shadow-lg"> | |
| <div class="flex flex-wrap justify-center gap-2 md:gap-4 mb-6"> | |
| <button | |
| id="filter-all" | |
| class="btn-filter active px-4 py-2 text-sm font-medium border border-slate-200 rounded-full transition" | |
| > | |
| Tous | |
| </button> | |
| <button | |
| id="filter-mri" | |
| class="btn-filter px-4 py-2 text-sm font-medium border border-slate-200 rounded-full transition" | |
| > | |
| Avec IRM | |
| </button> | |
| <button | |
| id="filter-radio" | |
| class="btn-filter px-4 py-2 text-sm font-medium border border-slate-200 rounded-full transition" | |
| > | |
| Avec Radiothérapie | |
| </button> | |
| <button | |
| id="filter-quality" | |
| class="btn-filter px-4 py-2 text-sm font-medium border border-slate-200 rounded-full transition" | |
| > | |
| Certifiées Qualité | |
| </button> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="competitorChart"></canvas> | |
| </div> | |
| <div class="mt-8 overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-slate-200"> | |
| <thead class="bg-slate-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Clinique</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Ville</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">IRM</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Radiothérapie</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Certification</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Score Digital</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-slate-200" id="competitor-table-body"> | |
| <!-- Table rows will be populated by JavaScript --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <p class="text-xs text-center mt-4 text-slate-400"> | |
| Le score de maturité digitale est une évaluation basée sur la | |
| présence en ligne, les fonctionnalités du site web (RDV, devis) et | |
| la communication sur les outils internes (DPE, IA). | |
| </p> | |
| </div> | |
| </section> | |
| <hr class="my-16 border-slate-200" /> | |
| <section id="plan" class="scroll-mt-24"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-slate-800 mb-2"> | |
| <span class="section-title">Feuille de Route pour la Transformation</span> | |
| </h2> | |
| <p class="mt-8 text-lg max-w-3xl mx-auto text-slate-600"> | |
| Transformer les faiblesses en forces nécessite une approche | |
| structurée. Voici une proposition de feuille de route stratégique en | |
| 3 phases, conçue pour générer de la valeur à chaque étape et | |
| positionner la clinique comme un leader moderne. | |
| </p> | |
| </div> | |
| <div class="relative"> | |
| <!-- Vertical line for timeline --> | |
| <div class="timeline-line bg-slate-200 hidden md:block"></div> | |
| <!-- Timeline items --> | |
| <div class="space-y-20"> | |
| <!-- Phase 1 --> | |
| <div class="relative md:grid md:grid-cols-2 md:gap-x-12 items-center"> | |
| <div class="md:text-right pb-10 md:pb-0"> | |
| <div class="timeline-dot bg-amber-500"></div> | |
| <div | |
| class="inline-block bg-amber-100 text-amber-700 font-bold px-4 py-1 rounded-full text-sm mb-4" | |
| > | |
| Phase 1 (0-6 mois) | |
| </div> | |
| <h3 class="text-2xl font-bold text-slate-800 mt-2"> | |
| Visibilité & "Quick Wins" | |
| </h3> | |
| <div class="mt-4 bg-amber-50 p-4 rounded-lg inline-block"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bullseye text-amber-600 mr-2"></i> | |
| <span class="font-semibold">Objectif:</span> | |
| </div> | |
| <p class="text-sm mt-1"> | |
| Stopper l'hémorragie de parts de marché en rendant la clinique visible, moderne et accessible en ligne. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-4 md:mt-0 md:pl-12"> | |
| <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-amber-500"> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <span class="bg-amber-100 text-amber-800 rounded-full w-6 h-6 flex items-center justify-center text-xs mr-3 mt-1">1</span> | |
| <span>Lancement d'un site web moderne et multilingue</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="bg-amber-100 text-amber-800 rounded-full w-6 h-6 flex items-center justify-center text-xs mr-3 mt-1">2</span> | |
| <span>Intégration de la prise de RDV et devis en ligne</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="bg-amber-100 text-amber-800 rounded-full w-6 h-6 flex items-center justify-center text-xs mr-3 mt-1">3</span> | |
| <span>Création et animation des réseaux sociaux (LinkedIn, Facebook)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="bg-amber-100 text-amber-800 rounded-full w-6 h-6 flex items-center justify-center text-xs mr-3 mt-1">4</span> | |
| <span>Lancement de l'étude de faisabilité pour l'imagerie</span> | |
| </li> | |
| </ul> | |
| <div class="mt-6 bg-slate-50 p-4 rounded-lg"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-chart-line text-amber-600 mr-2"></i> | |
| <span class="font-semibold">Impact attendu:</span> | |
| </div> | |
| <p class="text-sm mt-1"> | |
| +30% de visibilité en ligne, +20% de nouveaux patients via le numérique | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 2 --> | |
| <div class="relative md:grid md:grid-cols-2 md:gap-x-12 items-center"> | |
| <div class="md:text-right md:order-2 pb-10 md:pb-0"> | |
| <div class="timeline-dot bg-blue-500"></div> | |
| <div | |
| class="inline-block bg-blue-100 text-blue-700 font-bold px-4 py-1 rounded-full text-sm mb-4" | |
| > | |
| Phase 2 (6-18 mois) | |
| </div> | |
| <h3 class="text-2xl font-bold text-slate-800 mt-2"> | |
| Investissement Cœur de Métier | |
| </h3> | |
| <div class="mt-4 bg-blue-50 p-4 rounded-lg inline-block"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bullseye text-blue-600 mr-2"></i> | |
| <span class="font-semibold">Objectif:</span> | |
| </div> | |
| <p class="text-sm mt-1"> | |
| Renforcer le plateau technique pour soutenir les spécialités clés et moderniser la gestion interne. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-4 md:mt-0 md:order-1 md:pr-12"> | |
| <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500"> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <span class="bg-blue-100 text-blue-800 rounded-full w-6 h-6 flex items-center justify-center text-xs mr-3 mt-1">1</span> | |
| <span>Finalisation du business plan pour le pôle imagerie (Scanner/IRM)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="bg-blue-100 text-blue-800 rounded-full w-6 h-6 flex items-center justify-center text-xs mr-3 mt-1">2</span> | |
| <span>Sélection des fournisseurs et sécurisation du financement</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="bg-blue-100 text-blue-800 rounded-full w-6 h-6 flex items-center justify-center text-xs mr-3 mt-1">3</span> | |
| <span>Lancement des travaux d'aménagement du pôle</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="bg-blue-100 text-blue-800 rounded-full w-6 h-6 flex items-center justify-center text-xs mr-3 mt-1">4</span> | |
| <span>Déploiement d'un Dossier Patient Électronique (DPE) "léger"</span> | |
| </li> | |
| </ul> | |
| <div class="mt-6 bg-slate-50 p-4 rounded-lg"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-chart-line text-blue-600 mr-2"></i> | |
| <span class="font-semibold">Impact attendu:</span> | |
| </div> | |
| <p class="text-sm mt-1"> | |
| Réduction de 40% des examens externalisés, amélioration de 30% de l'efficacité administrative | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 3 --> | |
| <div class="relative md:grid md:grid-cols-2 md:gap-x-12 items-center"> | |
| <div class="md:text-right pb-10 md:pb-0"> | |
| <div class="timeline-dot bg-green-500"></div> | |
| <div | |
| class="inline-block bg-green-100 text-green-700 font-bold px-4 py-1 rounded-full text-sm mb-4" | |
| > | |
| Phase 3 (18+ mois) | |
| </div> | |
| <h3 class="text-2xl font-bold text-slate-800 mt-2"> | |
| Expansion & Innovation | |
| </h3> | |
| <div class="mt-4 bg-green-50 p-4 rounded-lg inline-block"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bullseye text-green-600 mr-2"></i> | |
| <span class="font-semibold">Objectif:</span> | |
| </div> | |
| <p class="text-sm mt-1"> | |
| Positionner la PLC comme un acteur compétitif et innovant, leader sur ses niches. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-4 md:mt-0 md:pl-12"> | |
| <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-green-500"> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <span class="bg-green-100 text-green-800 rounded-full w-6 h-6 flex items-center justify-center text-xs mr-3 mt-1">1</span> | |
| <span>Mise en service opérationnelle du scanner et de l'IRM</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="bg-green-100 text-green-800 rounded-full w-6 h-6 flex items-center justify-center text-xs mr-3 mt-1">2</span> | |
| <span>Déploiement complet du DPE dans tous les services</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="bg-green-100 text-green-800 rounded-full w-6 h-6 flex items-center justify-center text-xs mr-3 mt-1">3</span> | |
| <span>Lancement de services pilotes de télémédecine</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="bg-green-100 text-green-800 rounded-full w-6 h-6 flex items-center justify-center text-xs mr-3 mt-1">4</span> | |
| <span>Engagement dans une démarche de certification qualité (ISO 9001)</span> | |
| </li> | |
| </ul> | |
| <div class="mt-6 bg-slate-50 p-4 rounded-lg"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-chart-line text-green-600 mr-2"></i> | |
| <span class="font-semibold">Impact attendu:</span> | |
| </div> | |
| <p class="text-sm mt-1"> | |
| +50% de revenus d'imagerie, +15% de patients internationaux, certification qualité obtenue | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ROI Section --> | |
| <div class="mt-20 bg-gradient-to-r from-primary to-primary-light rounded-2xl p-8 text-white"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h3 class="text-2xl font-bold mb-6 text-center">Retour sur Investissement Projeté</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-white/10 p-4 rounded-xl text-center"> | |
| <div class="text-3xl font-bold mb-2">750K TND</div> | |
| <p>Économies annuelles par réduction d'externalisation</p> | |
| </div> | |
| <div class="bg-white/10 p-4 rounded-xl text-center"> | |
| <div class="text-3xl font-bold mb-2">+40%</div> | |
| <p>Augmentation des revenus d'imagerie</p> | |
| </div> | |
| <div class="bg-white/10 p-4 rounded-xl text-center"> | |
| <div class="text-3xl font-bold mb-2">3-5 ans</div> | |
| <p>Retour sur investissement total</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="bg-slate-800 text-slate-300 mt-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary-light p-2 rounded-lg mr-3"> | |
| <i class="fas fa-hospital text-white"></i> | |
| </div> | |
| <h4 class="font-bold text-lg">Polyclinique La Corniche</h4> | |
| </div> | |
| <p class="text-sm text-slate-400"> | |
| Transformation stratégique pour une clinique moderne et compétitive. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-slate-200 mb-4">Sections</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#synthese" class="text-slate-400 hover:text-white transition">Synthèse</a></li> | |
| <li><a href="#diagnostic" class="text-slate-400 hover:text-white transition">Diagnostic</a></li> | |
| <li><a href="#concurrence" class="text-slate-400 hover:text-white transition">Concurrence</a></li> | |
| <li><a href="#plan" class="text-slate-400 hover:text-white transition">Plan d'Action</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-slate-200 mb-4">Contact</h4> | |
| <ul class="space-y-2 text-slate-400"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-2"></i> | |
| [email protected] | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone mr-2"></i> | |
| +216 73 000 000 | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-map-marker-alt mr-2"></i> | |
| Sousse, Tunisie | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-slate-200 mb-4">À propos</h4> | |
| <p class="text-sm text-slate-400"> | |
| Ce tableau de bord interactif présente une analyse stratégique complète pour la transformation de la Polyclinique La Corniche. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="border-t border-slate-700 mt-8 pt-6 text-center text-sm text-slate-400"> | |
| <p>© 2025 - Application d'Analyse Stratégique Interactive.</p> | |
| <p class="mt-1"> | |
| Générée pour une mission de conseil en e-santé. Données basées sur le rapport d'analyse fourni. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener("DOMContentLoaded", () => { | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Competitor data | |
| const appData = { | |
| competitors: [ | |
| { | |
| name: "Polyclinique La Corniche", | |
| city: "Sousse", | |
| mri: false, | |
| radiotherapy: false, | |
| quality: false, | |
| digital_maturity: 0, | |
| color: "#f59e0b", | |
| }, | |
| { | |
| name: "Clinique El Yosr Int.", | |
| city: "Sousse", | |
| mri: false, | |
| radiotherapy: false, | |
| quality: false, | |
| digital_maturity: 4, | |
| color: "#64748b", | |
| }, | |
| { | |
| name: "Clinique Essalem", | |
| city: "Sousse", | |
| mri: false, | |
| radiotherapy: false, | |
| quality: true, | |
| digital_maturity: 3, | |
| color: "#64748b", | |
| }, | |
| { | |
| name: "CMIK", | |
| city: "Sousse", | |
| mri: true, | |
| radiotherapy: true, | |
| quality: true, | |
| digital_maturity: 4, | |
| color: "#64748b", | |
| }, | |
| { | |
| name: "Clinique Les Oliviers", | |
| city: "Sousse", | |
| mri: false, | |
| radiotherapy: false, | |
| quality: false, | |
| digital_maturity: 3, | |
| color: "#64748b", | |
| }, | |
| { | |
| name: "Carthage Medical", | |
| city: "Monastir", | |
| mri: true, | |
| radiotherapy: false, | |
| quality: false, | |
| digital_maturity: 3, | |
| color: "#64748b", | |
| }, | |
| { | |
| name: "Clinique du Centre", | |
| city: "Ksar Hellal", | |
| mri: true, | |
| radiotherapy: false, | |
| quality: true, | |
| digital_maturity: 4, | |
| color: "#64748b", | |
| }, | |
| { | |
| name: "Clinique Errahma", | |
| city: "Mahdia", | |
| mri: true, | |
| radiotherapy: false, | |
| quality: false, | |
| digital_maturity: 4, | |
| color: "#64748b", | |
| }, | |
| ], | |
| }; | |
| // Initialize chart | |
| const ctx = document.getElementById("competitorChart").getContext("2d"); | |
| let competitorChart; | |
| // Function to render chart | |
| function renderChart(data) { | |
| if (competitorChart) { | |
| competitorChart.destroy(); | |
| } | |
| const chartData = { | |
| labels: data.map((c) => `${c.name} (${c.city})`), | |
| datasets: [ | |
| { | |
| label: "Score de Maturité Digitale (sur 5)", | |
| data: data.map((c) => c.digital_maturity), | |
| backgroundColor: data.map((c) => c.color), | |
| borderColor: data.map((c) => | |
| c.color === "#f59e0b" ? "#b45309" : "#475569" | |
| ), | |
| borderWidth: 1, | |
| borderRadius: 4, | |
| }, | |
| ], | |
| }; | |
| const chartOptions = { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| indexAxis: "y", | |
| scales: { | |
| x: { | |
| beginAtZero: true, | |
| max: 5, | |
| grid: { | |
| color: "#e2e8f0", | |
| }, | |
| ticks: { | |
| color: "#475569", | |
| stepSize: 1 | |
| }, | |
| }, | |
| y: { | |
| grid: { | |
| display: false, | |
| }, | |
| ticks: { | |
| color: "#1e293b", | |
| font: { | |
| weight: "500", | |
| }, | |
| }, | |
| }, | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false, | |
| }, | |
| tooltip: { | |
| backgroundColor: "#1e293b", | |
| titleFont: { size: 14, weight: "bold" }, | |
| bodyFont: { size: 12 }, | |
| padding: 12, | |
| cornerRadius: 6, | |
| displayColors: false, | |
| callbacks: { | |
| label: function (context) { | |
| let label = context.dataset.label || ""; | |
| if (label) { | |
| label += ": "; | |
| } | |
| if (context.parsed.x !== null) { | |
| label += context.parsed.x + " / 5"; | |
| } | |
| return label; | |
| }, | |
| }, | |
| }, | |
| }, | |
| }; | |
| competitorChart = new Chart(ctx, { | |
| type: "bar", | |
| data: chartData, | |
| options: chartOptions, | |
| }); | |
| // Update table | |
| const tableBody = document.getElementById('competitor-table-body'); | |
| tableBody.innerHTML = ''; | |
| data.forEach(competitor => { | |
| const row = document.createElement('tr'); | |
| row.innerHTML = ` | |
| <td class="px-6 py-4 whitespace-nowrap ${competitor.name.includes('Corniche') ? 'font-bold text-primary' : 'text-slate-700'}"> | |
| ${competitor.name} | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-slate-500">${competitor.city}</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| ${competitor.mri ? '<span class="text-green-500"><i class="fas fa-check"></i></span>' : '<span class="text-red-500"><i class="fas fa-times"></i></span>'} | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| ${competitor.radiotherapy ? '<span class="text-green-500"><i class="fas fa-check"></i></span>' : '<span class="text-red-500"><i class="fas fa-times"></i></span>'} | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| ${competitor.quality ? '<span class="text-green-500"><i class="fas fa-check"></i></span>' : '<span class="text-red-500"><i class="fas fa-times"></i></span>'} | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="w-16 bg-slate-200 rounded-full h-2 mr-2"> | |
| <div class="bg-primary h-2 rounded-full" style="width: ${competitor.digital_maturity * 20}%"></div> | |
| </div> | |
| <span>${competitor.digital_maturity}/5</span> | |
| </div> | |
| </td> | |
| `; | |
| tableBody.appendChild(row); | |
| }); | |
| } | |
| // Filter buttons functionality | |
| const filterButtons = document.querySelectorAll(".btn-filter"); | |
| filterButtons.forEach((button) => { | |
| button.addEventListener("click", () => { | |
| filterButtons.forEach((btn) => btn.classList.remove("active")); | |
| button.classList.add("active"); | |
| let filteredData = appData.competitors; | |
| const filterType = button.id; | |
| if (filterType === "filter-mri") { | |
| filteredData = appData.competitors.filter( | |
| (c) => c.mri || c.name === "Polyclinique La Corniche" | |
| ); | |
| } else if (filterType === "filter-radio") { | |
| filteredData = appData.competitors.filter( | |
| (c) => c.radiotherapy || c.name === "Polyclinique La Corniche" | |
| ); | |
| } else if (filterType === "filter-quality") { | |
| filteredData = appData.competitors.filter( | |
| (c) => c.quality || c.name === "Polyclinique La Corniche" | |
| ); | |
| } | |
| filteredData.forEach((d) => { | |
| d.color = | |
| d.name === "Polyclinique La Corniche" ? "#f59e0b" : "#64748b"; | |
| }); | |
| renderChart(filteredData); | |
| }); | |
| }); | |
| // Initialize with all competitors | |
| document.getElementById("filter-all").click(); | |
| // Navigation highlighting | |
| const navLinks = document.querySelectorAll(".nav-link"); | |
| const sections = document.querySelectorAll("section"); | |
| window.addEventListener("scroll", () => { | |
| let current = ""; | |
| sections.forEach((section) => { | |
| const sectionTop = section.offsetTop; | |
| if (pageYOffset >= sectionTop - 150) { | |
| current = section.getAttribute("id"); | |
| } | |
| }); | |
| navLinks.forEach((link) => { | |
| link.classList.remove("active-link"); | |
| if (link.getAttribute("href").includes(current)) { | |
| link.classList.add("active-link"); | |
| } | |
| }); | |
| }); | |
| // Animate counter | |
| const counterElement = document.querySelector('.counter'); | |
| let count = 0; | |
| const counterInterval = setInterval(() => { | |
| if (count < 5) { | |
| count += 0.1; | |
| counterElement.textContent = count.toFixed(1) + '/5'; | |
| } else { | |
| clearInterval(counterInterval); | |
| } | |
| }, 100); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Maheri/plc-sousse" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |