Hugging Face's logo

Spaces:
Maheri
/
medivisionconseils
Running

App Files Community
Maheri commited on
Commit
88f618b
·
verified ·
1 Parent(s): 4fcb3ef

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +604 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Medivisionconseils
3
- emoji: 📊
4
- colorFrom: red
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: medivisionconseils
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,604 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MediVision Conseil | Expertise en Stratégie d'Imagerie Médicale et IA</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Lato:wght@400;700&display=swap">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ body {
12
+ font-family: 'Lato', sans-serif;
13
+ color: #333;
14
+ }
15
+ h1, h2, h3, h4 {
16
+ font-family: 'Playfair Display', serif;
17
+ }
18
+ .hero-bg {
19
+ background: linear-gradient(rgba(30, 50, 70, 0.85), rgba(30, 50, 70, 0.85)),
20
+ url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSIvPjwvc3ZnPg==');
21
+ background-size: cover;
22
+ }
23
+ .medical-gradient {
24
+ background: linear-gradient(135deg, #1e8bc3 0%, #0c5db3 100%);
25
+ }
26
+ .feature-card:hover {
27
+ transform: translateY(-5px);
28
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
29
+ }
30
+ .timeline-item:not(:last-child):after {
31
+ content: '';
32
+ position: absolute;
33
+ left: 24px;
34
+ top: 40px;
35
+ height: calc(100% - 40px);
36
+ width: 2px;
37
+ background: #1e8bc3;
38
+ }
39
+ .map-container {
40
+ perspective: 1000px;
41
+ }
42
+ .map-card {
43
+ transform: rotateX(10deg);
44
+ box-shadow: 0 30px 50px rgba(0, 0, 0, 0.2);
45
+ }
46
+ .roi-slider::-webkit-slider-thumb {
47
+ -webkit-appearance: none;
48
+ width: 20px;
49
+ height: 20px;
50
+ background: #1e8bc3;
51
+ border-radius: 50%;
52
+ cursor: pointer;
53
+ }
54
+ .dark-mode .dark\:bg-anthracite {
55
+ background-color: #1a1a1a;
56
+ }
57
+ .dark-mode .dark\:text-light {
58
+ color: #f0f0f0;
59
+ }
60
+ </style>
61
+ </head>
62
+ <body class="bg-gray-50">
63
+ <!-- Navigation -->
64
+ <nav class="bg-white shadow-md py-4 sticky top-0 z-50">
65
+ <div class="container mx-auto px-6 flex justify-between items-center">
66
+ <div class="flex items-center">
67
+ <div class="w-12 h-12 bg-blue-800 rounded-full flex items-center justify-center text-white font-bold text-xl mr-3">MC</div>
68
+ <span class="text-xl font-bold text-gray-800">MediVision Conseil</span>
69
+ </div>
70
+ <div class="hidden md:flex space-x-8">
71
+ <a href="#expertise" class="text-gray-700 hover:text-blue-800">Expertise</a>
72
+ <a href="#process" class="text-gray-700 hover:text-blue-800">Processus</a>
73
+ <a href="#roi" class="text-gray-700 hover:text-blue-800">Calculateur ROI</a>
74
+ <a href="#contact" class="text-gray-700 hover:text-blue-800">Contact</a>
75
+ </div>
76
+ <button id="darkModeToggle" class="p-2 rounded-full bg-gray-200 text-gray-700">
77
+ <i class="fas fa-moon"></i>
78
+ </button>
79
+ <div class="md:hidden">
80
+ <button id="mobileMenuButton" class="text-gray-700">
81
+ <i class="fas fa-bars text-xl"></i>
82
+ </button>
83
+ </div>
84
+ </div>
85
+ <!-- Mobile menu -->
86
+ <div id="mobileMenu" class="hidden md:hidden bg-white absolute w-full left-0 px-6 py-4 shadow-md">
87
+ <a href="#expertise" class="block py-2 text-gray-700 hover:text-blue-800">Expertise</a>
88
+ <a href="#process" class="block py-2 text-gray-700 hover:text-blue-800">Processus</a>
89
+ <a href="#roi" class="block py-2 text-gray-700 hover:text-blue-800">Calculateur ROI</a>
90
+ <a href="#contact" class="block py-2 text-gray-700 hover:text-blue-800">Contact</a>
91
+ </div>
92
+ </nav>
93
+
94
+ <!-- Hero Section -->
95
+ <section class="hero-bg text-white py-20 md:py-32">
96
+ <div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
97
+ <div class="md:w-1/2 mb-12 md:mb-0">
98
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Transformez votre flux de travail d'imagerie médicale avec une roadmap IA sur-mesure</h1>
99
+ <p class="text-xl mb-8">Vos données, notre levier : 98% de nos recommandations sont data-proof</p>
100
+ <button class="medical-gradient text-white px-8 py-3 rounded-full font-bold hover:opacity-90 transition duration-300">
101
+ Évaluer mon infrastructure
102
+ </button>
103
+ </div>
104
+ <div class="md:w-1/2 relative">
105
+ <div class="bg-white bg-opacity-20 rounded-xl p-6 backdrop-filter backdrop-blur-sm">
106
+ <div class="flex items-center mb-4">
107
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
108
+ <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
109
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
110
+ <div class="ml-auto text-sm">DICOM IA v3.2</div>
111
+ </div>
112
+ <div class="bg-black bg-opacity-70 rounded p-4 h-64 overflow-auto">
113
+ <div class="text-green-400 font-mono text-sm">
114
+ <p>> Initialisation du diagnostic...</p>
115
+ <p>> Analyse des workflows DICOM...</p>
116
+ <p>> Détection des goulots d'étranglement...</p>
117
+ <p>> Évaluation des opportunités IA...</p>
118
+ <p class="mt-4">> <span class="text-blue-400">Résultats préliminaires :</span></p>
119
+ <p>> +35% d'efficacité diagnostique potentielle</p>
120
+ <p>> 22% de capacité d'imagerie inutilisée</p>
121
+ <p>> ROI estimé sur 3 ans : 2.8x</p>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </section>
128
+
129
+ <!-- Value Proposition -->
130
+ <section id="expertise" class="py-16 bg-white">
131
+ <div class="container mx-auto px-6">
132
+ <h2 class="text-3xl font-bold text-center mb-16">Notre expertise fait la différence</h2>
133
+
134
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
135
+ <div class="feature-card bg-gray-50 p-8 rounded-xl transition duration-300">
136
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
137
+ <i class="fas fa-exchange-alt text-blue-800 text-2xl"></i>
138
+ </div>
139
+ <h3 class="text-xl font-bold mb-3">Audit d'interopérabilité DICOM</h3>
140
+ <p class="text-gray-600">Analyse complète de vos flux d'images pour optimiser l'échange entre vos équipements et systèmes.</p>
141
+ </div>
142
+
143
+ <div class="feature-card bg-gray-50 p-8 rounded-xl transition duration-300">
144
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
145
+ <i class="fas fa-brain text-blue-800 text-2xl"></i>
146
+ </div>
147
+ <h3 class="text-xl font-bold mb-3">Benchmark d'algorithmes IA</h3>
148
+ <p class="text-gray-600">Comparaison objective des solutions d'IA disponibles pour votre spécialité médicale.</p>
149
+ </div>
150
+
151
+ <div class="feature-card bg-gray-50 p-8 rounded-xl transition duration-300">
152
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
153
+ <i class="fas fa-chart-line text-blue-800 text-2xl"></i>
154
+ </div>
155
+ <h3 class="text-xl font-bold mb-3">ROI calculé sur 3 ans</h3>
156
+ <p class="text-gray-600">Modélisation financière précise des gains attendus de votre transformation numérique.</p>
157
+ </div>
158
+
159
+ <div class="feature-card bg-gray-50 p-8 rounded-xl transition duration-300">
160
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
161
+ <i class="fas fa-shield-alt text-blue-800 text-2xl"></i>
162
+ </div>
163
+ <h3 class="text-xl font-bold mb-3">Compliance GDPR/HIPAA</h3>
164
+ <p class="text-gray-600">Garantie de conformité réglementaire pour tous vos projets d'imagerie médicale.</p>
165
+ </div>
166
+ </div>
167
+
168
+ <div class="bg-blue-50 rounded-xl p-8 text-center">
169
+ <p class="text-2xl font-bold text-blue-800 mb-2">+35% d'efficacité diagnostique moyenne sur nos projets*</p>
170
+ <p class="text-gray-600">*Basé sur l'analyse comparative des performances avant/après nos interventions</p>
171
+ </div>
172
+ </div>
173
+ </section>
174
+
175
+ <!-- Expertise Showcase -->
176
+ <section class="py-16 bg-gray-50">
177
+ <div class="container mx-auto px-6">
178
+ <h2 class="text-3xl font-bold text-center mb-16">Notre parcours en imagerie médicale</h2>
179
+
180
+ <div class="flex flex-col md:flex-row">
181
+ <div class="md:w-1/2 mb-12 md:mb-0 md:pr-8">
182
+ <div class="relative">
183
+ <div class="timeline-item relative pl-12 pb-12">
184
+ <div class="absolute left-0 top-0 w-8 h-8 bg-blue-800 rounded-full flex items-center justify-center text-white">
185
+ <i class="fas fa-check"></i>
186
+ </div>
187
+ <h3 class="text-xl font-bold mb-2">2018 : Optimisation PACS pour CHU Lyon</h3>
188
+ <p class="text-gray-600">Réduction de 40% des temps de transfert d'images entre services.</p>
189
+ </div>
190
+
191
+ <div class="timeline-item relative pl-12 pb-12">
192
+ <div class="absolute left-0 top-0 w-8 h-8 bg-blue-800 rounded-full flex items-center justify-center text-white">
193
+ <i class="fas fa-check"></i>
194
+ </div>
195
+ <h3 class="text-xl font-bold mb-2">2020 : Migration cloud sécurisé Hôpital Necker</h3>
196
+ <p class="text-gray-600">Première archive d'imagerie pédiatrique certifiée GDPR en Europe.</p>
197
+ </div>
198
+
199
+ <div class="timeline-item relative pl-12">
200
+ <div class="absolute left-0 top-0 w-8 h-8 bg-blue-800 rounded-full flex items-center justify-center text-white">
201
+ <i class="fas fa-check"></i>
202
+ </div>
203
+ <h3 class="text-xl font-bold mb-2">2023 : Intégration AI-First pour réseau Clinivista</h3>
204
+ <p class="text-gray-600">Déploiement d'une plateforme de télédiagnostic assisté par IA sur 22 sites.</p>
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <div class="md:w-1/2 map-container">
210
+ <div class="map-card bg-white rounded-xl p-6 h-full">
211
+ <div class="flex items-center mb-4">
212
+ <i class="fas fa-map-marker-alt text-red-500 mr-2"></i>
213
+ <h3 class="text-xl font-bold">Nos interventions en Europe</h3>
214
+ </div>
215
+ <div class="bg-gray-100 rounded-lg h-64 flex items-center justify-center relative">
216
+ <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj48cmVjdCB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iI2YwZjBmMCIvPjxwYXRoIGQ9Ik0yNTAgMTUwYzAgMC0zMCAxMDAgNTAgMTAwczEwMC0xMDAgMTAwLTEwMCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiLz48Y2lyY2xlIGN4PSIyMDAiIGN5PSIyMDAiIHI9IjUiIGZpbGw9IiMxZTg0YzMiLz48Y2lyY2xlIGN4PSIzMDAiIGN5PSIyNTAiIHI9IjUiIGZpbGw9IiMxZTg0YzMiLz48Y2lyY2xlIGN4PSIzNTAiIGN5PSIzMDAiIHI9IjUiIGZpbGw9IiMxZTg0YzMiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIzNTAiIHI9IjUiIGZpbGw9IiMxZTg0YzMiLz48dGV4dCB4PSIyNTAiIHk9IjQwMCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjEyIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjNjY2Ij5Qb3Vyc3VpdGUgeW91ciBjdXJzZXVyIHN1ciBsYSBjYXJ0ZSBwb3VyIHZvaXIgdG91cyBsZXMgcHJvamV0cy48L3RleHQ+PC9zdmc+" alt="Carte des projets" class="w-full h-full object-contain">
217
+ <div class="absolute bottom-4 left-0 right-0 text-center text-gray-500 text-sm">
218
+ <i class="fas fa-info-circle mr-1"></i> Plus de 28 projets réalisés
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </section>
226
+
227
+ <!-- Consulting Process -->
228
+ <section id="process" class="py-16 bg-white">
229
+ <div class="container mx-auto px-6">
230
+ <h2 class="text-3xl font-bold text-center mb-16">Notre méthodologie en 4 étapes</h2>
231
+
232
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
233
+ <div class="bg-gray-50 rounded-xl p-6 border-l-4 border-blue-800">
234
+ <div class="text-blue-800 font-bold text-lg mb-2">Étape 1</div>
235
+ <h3 class="text-xl font-bold mb-3">Diagnostic workflow</h3>
236
+ <p class="text-gray-600">Cartographie précise des goulots d'étranglement dans votre flux de travail d'imagerie.</p>
237
+ <div class="mt-4 text-blue-800">
238
+ <i class="fas fa-clock mr-1"></i> 2-3 semaines
239
+ </div>
240
+ </div>
241
+
242
+ <div class="bg-gray-50 rounded-xl p-6 border-l-4 border-blue-800">
243
+ <div class="text-blue-800 font-bold text-lg mb-2">Étape 2</div>
244
+ <h3 class="text-xl font-bold mb-3">Proof of Concept IA</h3>
245
+ <p class="text-gray-600">Tests A/B sur vos données réelles pour valider l'apport des solutions d'IA.</p>
246
+ <div class="mt-4 text-blue-800">
247
+ <i class="fas fa-flask mr-1"></i> 4-6 semaines
248
+ </div>
249
+ </div>
250
+
251
+ <div class="bg-gray-50 rounded-xl p-6 border-l-4 border-blue-800">
252
+ <div class="text-blue-800 font-bold text-lg mb-2">Étape 3</div>
253
+ <h3 class="text-xl font-bold mb-3">Roadmap technico-juridique</h3>
254
+ <p class="text-gray-600">Plan d'action détaillé intégrant contraintes techniques et réglementaires.</p>
255
+ <div class="mt-4 text-blue-800">
256
+ <i class="fas fa-file-contract mr-1"></i> Livrable clé
257
+ </div>
258
+ </div>
259
+
260
+ <div class="bg-gray-50 rounded-xl p-6 border-l-4 border-blue-800">
261
+ <div class="text-blue-800 font-bold text-lg mb-2">Étape 4</div>
262
+ <h3 class="text-xl font-bold mb-3">Monitoring KPI</h3>
263
+ <p class="text-gray-600">Tableau de bord personnalisé pour suivre l'impact de nos recommandations.</p>
264
+ <div class="mt-4 text-blue-800">
265
+ <i class="fas fa-chart-bar mr-1"></i> 12 mois minimum
266
+ </div>
267
+ </div>
268
+ </div>
269
+
270
+ <div class="mt-12 text-center">
271
+ <button class="medical-gradient text-white px-8 py-3 rounded-full font-bold hover:opacity-90 transition duration-300">
272
+ Télécharger notre méthodologie complète (PDF)
273
+ </button>
274
+ </div>
275
+ </div>
276
+ </section>
277
+
278
+ <!-- ROI Calculator -->
279
+ <section id="roi" class="py-16 bg-blue-800 text-white">
280
+ <div class="container mx-auto px-6">
281
+ <h2 class="text-3xl font-bold text-center mb-6">Calculateur de ROI</h2>
282
+ <p class="text-center text-blue-200 mb-12">Estimez les économies potentielles sur votre parc d'imagerie</p>
283
+
284
+ <div class="bg-white bg-opacity-10 rounded-xl p-8 backdrop-filter backdrop-blur-sm max-w-3xl mx-auto">
285
+ <div class="mb-6">
286
+ <label class="block mb-2 font-bold">Nombre de scanners</label>
287
+ <input type="range" min="1" max="20" value="5" class="w-full roi-slider">
288
+ <div class="flex justify-between mt-1">
289
+ <span>1</span>
290
+ <span>5</span>
291
+ <span>10</span>
292
+ <span>15</span>
293
+ <span>20</span>
294
+ </div>
295
+ </div>
296
+
297
+ <div class="mb-6">
298
+ <label class="block mb-2 font-bold">Volume mensuel d'examens</label>
299
+ <input type="range" min="500" max="10000" value="2500" step="500" class="w-full roi-slider">
300
+ <div class="flex justify-between mt-1">
301
+ <span>500</span>
302
+ <span>3k</span>
303
+ <span>5k</span>
304
+ <span>7.5k</span>
305
+ <span>10k</span>
306
+ </div>
307
+ </div>
308
+
309
+ <div class="mb-6">
310
+ <label class="block mb-2 font-bold">Taux d'erreur actuel (%)</label>
311
+ <input type="range" min="1" max="20" value="8" class="w-full roi-slider">
312
+ <div class="flex justify-between mt-1">
313
+ <span>1%</span>
314
+ <span>5%</span>
315
+ <span>10%</span>
316
+ <span>15%</span>
317
+ <span>20%</span>
318
+ </div>
319
+ </div>
320
+
321
+ <div class="bg-white bg-opacity-20 rounded-lg p-6 mt-8 text-center">
322
+ <p class="text-blue-200 mb-2">Estimation économies générées sur 3 ans</p>
323
+ <p class="text-3xl font-bold">€ 1,250,000 - € 2,800,000</p>
324
+ <p class="text-blue-200 mt-2">ROI estimé : 2.5x - 3.8x</p>
325
+ </div>
326
+
327
+ <div class="mt-8 text-center">
328
+ <button class="bg-white text-blue-800 px-8 py-3 rounded-full font-bold hover:bg-gray-100 transition duration-300">
329
+ Obtenir une estimation précise
330
+ </button>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </section>
335
+
336
+ <!-- Trust Architecture -->
337
+ <section class="py-16 bg-gray-50">
338
+ <div class="container mx-auto px-6">
339
+ <h2 class="text-3xl font-bold text-center mb-12">Ils nous font confiance</h2>
340
+
341
+ <div class="bg-white rounded-xl p-8 mb-12">
342
+ <div class="flex flex-col md:flex-row items-center">
343
+ <div class="md:w-1/3 mb-6 md:mb-0 flex justify-center">
344
+ <div class="w-32 h-32 rounded-full bg-blue-100 flex items-center justify-center">
345
+ <i class="fas fa-quote-left text-blue-800 text-4xl"></i>
346
+ </div>
347
+ </div>
348
+ <div class="md:w-2/3 md:pl-8">
349
+ <blockquote class="text-xl italic mb-4">
350
+ "Leur analyse a révélé 22% de capacité d'imagerie inutilisée dans notre parc IRM et proposé des solutions concrètes pour l'optimiser. Le ROI a été atteint en 14 mois seulement."
351
+ </blockquote>
352
+ <div class="font-bold">Dr. Sophie Martin</div>
353
+ <div class="text-gray-600">Directrice du Pôle Imagerie, Hôpital Européen</div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+
358
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6 mb-12">
359
+ <div class="bg-white p-6 rounded-xl flex items-center justify-center h-24">
360
+ <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgNTAiPjx0ZXh0IHg9IjEwMCIgeT0iMzAiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIyMCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZmlsbD0iIzFlODRjMyI+Q0hVPC90ZXh0Pjwvc3ZnPg==" alt="CHU">
361
+ </div>
362
+ <div class="bg-white p-6 rounded-xl flex items-center justify-center h-24">
363
+ <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgNTAiPjx0ZXh0IHg9IjEwMCIgeT0iMzAiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIyMCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZmlsbD0iIzFlODRjMyI+TmVja2VyPC90ZXh0Pjwvc3ZnPg==" alt="Necker">
364
+ </div>
365
+ <div class="bg-white p-6 rounded-xl flex items-center justify-center h-24">
366
+ <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgNTAiPjx0ZXh0IHg9IjEwMCIgeT0iMzAiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIyMCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZmlsbD0iIzFlODRjMyI+Q2xpbml2aXN0YTwvdGV4dD48L3N2Zz4=" alt="Clinivista">
367
+ </div>
368
+ <div class="bg-white p-6 rounded-xl flex items-center justify-center h-24">
369
+ <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgNTAiPjx0ZXh0IHg9IjEwMCIgeT0iMzAiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIyMCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZmlsbD0iIzFlODRjMyI+UGhpbGlwczwvdGV4dD48L3N2Zz4=" alt="Philips">
370
+ </div>
371
+ <div class="bg-white p-6 rounded-xl flex items-center justify-center h-24">
372
+ <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgNTAiPjx0ZXh0IHg9IjEwMCIgeT0iMzAiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIyMCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZmlsbD0iIzFlODRjMyI+TlZJRElBPC90ZXh0Pjwvc3ZnPg==" alt="NVIDIA">
373
+ </div>
374
+ <div class="bg-white p-6 rounded-xl flex items-center justify-center h-24">
375
+ <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgNTAiPjx0ZXh0IHg9IjEwMCIgeT0iMzAiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIyMCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZmlsbD0iIzFlODRjMyI+SEFTIENlcnRpZmllZDwvdGV4dD48L3N2Zz4=" alt="HAS Certifié">
376
+ </div>
377
+ </div>
378
+
379
+ <div class="text-center">
380
+ <p class="text-xl mb-6">De Philips à NVIDIA : nous parlons le langage des constructeurs et des data scientists</p>
381
+ <button class="medical-gradient text-white px-8 py-3 rounded-full font-bold hover:opacity-90 transition duration-300">
382
+ Demander nos références complètes
383
+ </button>
384
+ </div>
385
+ </div>
386
+ </section>
387
+
388
+ <!-- Insights Section -->
389
+ <section class="py-16 bg-white">
390
+ <div class="container mx-auto px-6">
391
+ <h2 class="text-3xl font-bold text-center mb-12">Nos dernières publications</h2>
392
+
393
+ <div class="grid md:grid-cols-2 gap-8">
394
+ <div class="bg-gray-50 rounded-xl overflow-hidden border border-gray-200">
395
+ <div class="bg-blue-800 text-white p-4">
396
+ <h3 class="text-xl font-bold">Whitepaper</h3>
397
+ </div>
398
+ <div class="p-6">
399
+ <h4 class="text-lg font-bold mb-3">Top 5 des pièges RGPD en télédiagnostic</h4>
400
+ <p class="text-gray-600 mb-4">Guide pratique pour sécuriser vos flux d'images médicales dans le cadre du télédiagnostic.</p>
401
+ <button class="text-blue-800 font-bold flex items-center">
402
+ Télécharger <i class="fas fa-arrow-down ml-2"></i>
403
+ </button>
404
+ </div>
405
+ </div>
406
+
407
+ <div class="bg-gray-50 rounded-xl overflow-hidden border border-gray-200">
408
+ <div class="bg-blue-800 text-white p-4">
409
+ <h3 class="text-xl font-bold">Webinar</h3>
410
+ </div>
411
+ <div class="p-6">
412
+ <h4 class="text-lg font-bold mb-3">Comment choisir son API DICOM en 2024?</h4>
413
+ <p class="text-gray-600 mb-4">Comparatif des solutions techniques et analyse des tendances du marché.</p>
414
+ <button class="text-blue-800 font-bold flex items-center">
415
+ Voir le replay <i class="fas fa-play ml-2"></i>
416
+ </button>
417
+ </div>
418
+ </div>
419
+ </div>
420
+ </div>
421
+ </section>
422
+
423
+ <!-- Contact Section -->
424
+ <section id="contact" class="py-16 bg-gray-800 text-white">
425
+ <div class="container mx-auto px-6">
426
+ <div class="grid md:grid-cols-2 gap-12">
427
+ <div>
428
+ <h2 class="text-3xl font-bold mb-6">Prêt à optimiser votre imagerie médicale ?</h2>
429
+ <p class="text-xl mb-8">Prenez rendez-vous pour une consultation découverte gratuite.</p>
430
+
431
+ <div class="mb-8">
432
+ <div class="flex items-center mb-4">
433
+ <i class="fas fa-phone-alt mr-3 text-blue-400"></i>
434
+ <span>+33 1 23 45 67 89</span>
435
+ </div>
436
+ <div class="flex items-center">
437
+ <i class="fas fa-envelope mr-3 text-blue-400"></i>
438
+ <span>[email protected]</span>
439
+ </div>
440
+ </div>
441
+
442
+ <div class="bg-white bg-opacity-10 rounded-xl p-6">
443
+ <h3 class="text-xl font-bold mb-4">Horaires d'ouverture</h3>
444
+ <div class="space-y-2">
445
+ <div class="flex justify-between">
446
+ <span>Lundi - Vendredi</span>
447
+ <span>9h - 18h</span>
448
+ </div>
449
+ <div class="flex justify-between">
450
+ <span>Samedi</span>
451
+ <span>10h - 14h</span>
452
+ </div>
453
+ </div>
454
+ </div>
455
+ </div>
456
+
457
+ <div class="bg-white rounded-xl p-8 text-gray-800">
458
+ <h3 class="text-2xl font-bold mb-6">Contactez-nous</h3>
459
+ <form>
460
+ <div class="mb-4">
461
+ <label class="block mb-2 font-bold">Nom</label>
462
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
463
+ </div>
464
+ <div class="mb-4">
465
+ <label class="block mb-2 font-bold">Email</label>
466
+ <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
467
+ </div>
468
+ <div class="mb-4">
469
+ <label class="block mb-2 font-bold">Téléphone</label>
470
+ <input type="tel" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
471
+ </div>
472
+ <div class="mb-4">
473
+ <label class="block mb-2 font-bold">Message</label>
474
+ <textarea rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg"></textarea>
475
+ </div>
476
+ <button class="medical-gradient text-white px-8 py-3 rounded-full font-bold hover:opacity-90 transition duration-300 w-full">
477
+ Envoyer
478
+ </button>
479
+ </form>
480
+ </div>
481
+ </div>
482
+ </div>
483
+ </section>
484
+
485
+ <!-- Footer -->
486
+ <footer class="bg-gray-900 text-white py-12">
487
+ <div class="container mx-auto px-6">
488
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
489
+ <div>
490
+ <div class="flex items-center mb-4">
491
+ <div class="w-10 h-10 bg-blue-800 rounded-full flex items-center justify-center text-white font-bold text-xl mr-3">MC</div>
492
+ <span class="text-xl font-bold">MediVision Conseil</span>
493
+ </div>
494
+ <p class="text-gray-400">Experts en stratégie d'imagerie médicale et intégration IA depuis 2015.</p>
495
+ </div>
496
+
497
+ <div>
498
+ <h3 class="text-lg font-bold mb-4">Services</h3>
499
+ <ul class="space-y-2">
500
+ <li><a href="#" class="text-gray-400 hover:text-white">Audit DICOM</a></li>
501
+ <li><a href="#" class="text-gray-400 hover:text-white">Intégration IA</a></li>
502
+ <li><a href="#" class="text-gray-400 hover:text-white">Migration Cloud</a></li>
503
+ <li><a href="#" class="text-gray-400 hover:text-white">Formation</a></li>
504
+ </ul>
505
+ </div>
506
+
507
+ <div>
508
+ <h3 class="text-lg font-bold mb-4">Ressources</h3>
509
+ <ul class="space-y-2">
510
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
511
+ <li><a href="#" class="text-gray-400 hover:text-white">Whitepapers</a></li>
512
+ <li><a href="#" class="text-gray-400 hover:text-white">Webinars</a></li>
513
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
514
+ </ul>
515
+ </div>
516
+
517
+ <div>
518
+ <h3 class="text-lg font-bold mb-4">Légal</h3>
519
+ <ul class="space-y-2">
520
+ <li><a href="#" class="text-gray-400 hover:text-white">Mentions légales</a></li>
521
+ <li><a href="#" class="text-gray-400 hover:text-white">Confidentialité</a></li>
522
+ <li><a href="#" class="text-gray-400 hover:text-white">CGV</a></li>
523
+ <li><a href="#" class="text-gray-400 hover:text-white">Cookies</a></li>
524
+ </ul>
525
+ </div>
526
+ </div>
527
+
528
+ <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
529
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 MediVision Conseil. Tous droits réservés.</p>
530
+ <div class="flex space-x-4">
531
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
532
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
533
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
534
+ </div>
535
+ </div>
536
+ </div>
537
+ </footer>
538
+
539
+ <script>
540
+ // Mobile menu toggle
541
+ document.getElementById('mobileMenuButton').addEventListener('click', function() {
542
+ const menu = document.getElementById('mobileMenu');
543
+ menu.classList.toggle('hidden');
544
+ });
545
+
546
+ // Dark mode toggle
547
+ document.getElementById('darkModeToggle').addEventListener('click', function() {
548
+ document.body.classList.toggle('dark-mode');
549
+ const icon = this.querySelector('i');
550
+ if (document.body.classList.contains('dark-mode')) {
551
+ icon.classList.remove('fa-moon');
552
+ icon.classList.add('fa-sun');
553
+ } else {
554
+ icon.classList.remove('fa-sun');
555
+ icon.classList.add('fa-moon');
556
+ }
557
+ });
558
+
559
+ // Smooth scrolling for anchor links
560
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
561
+ anchor.addEventListener('click', function(e) {
562
+ e.preventDefault();
563
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
564
+ behavior: 'smooth'
565
+ });
566
+
567
+ // Close mobile menu if open
568
+ const mobileMenu = document.getElementById('mobileMenu');
569
+ if (!mobileMenu.classList.contains('hidden')) {
570
+ mobileMenu.classList.add('hidden');
571
+ }
572
+ });
573
+ });
574
+
575
+ // ROI Calculator interaction
576
+ const sliders = document.querySelectorAll('.roi-slider');
577
+ sliders.forEach(slider => {
578
+ slider.addEventListener('input', updateROI);
579
+ });
580
+
581
+ function updateROI() {
582
+ // This is a simplified example - in a real app you would calculate based on actual values
583
+ const scannerCount = parseInt(document.querySelectorAll('.roi-slider')[0].value);
584
+ const examVolume = parseInt(document.querySelectorAll('.roi-slider')[1].value);
585
+ const errorRate = parseInt(document.querySelectorAll('.roi-slider')[2].value);
586
+
587
+ // Simplified calculation for demo purposes
588
+ const baseValue = scannerCount * examVolume * (errorRate/100) * 12 * 3; // 3 years
589
+ const minEstimate = Math.round(baseValue * 2.5 / 10000) * 10000;
590
+ const maxEstimate = Math.round(baseValue * 3.8 / 10000) * 10000;
591
+
592
+ document.querySelector('.bg-white.bg-opacity-20 p:nth-child(2)').textContent =
593
+ `€ ${minEstimate.toLocaleString()} - € ${maxEstimate.toLocaleString()}`;
594
+
595
+ const roiRange = 2.5 + (Math.random() * 1.3);
596
+ document.querySelector('.bg-white.bg-opacity-20 p:nth-child(3)').textContent =
597
+ `ROI estimé : ${roiRange.toFixed(1)}x`;
598
+ }
599
+
600
+ // Initialize ROI calculator
601
+ updateROI();
602
+ </script>
603
+ <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/medivisionconseils" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
604
+ </html>