devmaybe/healthease-pocket-doc
0
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>Medacte - Santé Digitale au Maroc</title>7 <link rel="icon" type="image/x-icon" href="https://pub-9f200de23f1a4fada809186205ec0a61.r2.dev/logo.svg">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>12 <script>13 tailwind.config = {14 theme: {15 extend: {16 colors: {17 primary: '#3B82F6',18 secondary: '#10B981',19 dark: '#1E293B'20 }21 }22 }23 }24 </script>25 <style>26 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');27 body {28 font-family: 'Inter', sans-serif;29 scroll-behavior: smooth;30 }31 .wave-bg {32 background: linear-gradient(135deg, #3B82F6 0%, #10B981 100%);33 }34 .feature-card:hover {35 transform: translateY(-5px);36 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);37 }38 </style>39</head>40<body class="bg-gray-50">41 <!-- Hero Section -->42 <div id="hero" class="relative overflow-hidden wave-bg text-white">43 <div class="absolute inset-0 z-0" id="vanta-bg"></div>44 <div class="container mx-auto px-6 py-24 relative z-10">45 <div class="flex flex-col md:flex-row items-center">46 <div class="md:w-1/2 mb-12 md:mb-0">47 <img src="https://pub-9f200de23f1a4fada809186205ec0a61.r2.dev/logo.svg" alt="Medacte Logo" class="h-16 mb-8">48 <h1 class="text-4xl md:text-5xl font-bold mb-4">Santé Digitale pour tous au Maroc</h1>49 <p class="text-xl mb-8">Votre santé dans votre poche. Gratuit, sécurisé et accessible à tous.</p>50 <div class="flex flex-col sm:flex-row gap-4">51 <button class="bg-white text-primary px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300 flex items-center justify-center">52 <i data-feather="download" class="mr-2"></i> Télécharger l'application53 </button>54 <button class="bg-transparent border-2 border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-primary transition duration-300">55 En savoir plus56 </button>57 </div>58 </div>59 <div class="md:w-1/2 flex justify-center">60 <img src="https://pub-9f200de23f1a4fada809186205ec0a61.r2.dev/app.svg" alt="Medacte App" class="w-full max-w-md">61 </div>62 </div>63 </div>64 </div>65 66 <!-- Emergency Numbers -->67 <div class="bg-white py-16">68 <div class="container mx-auto px-6">69 <h2 class="text-3xl font-bold text-center mb-12 text-dark">Actions Rapides pour Urgences</h2>70 <div class="grid grid-cols-2 md:grid-cols-4 gap-6">71 <div class="bg-red-50 p-6 rounded-xl text-center">72 <div class="text-4xl font-bold text-red-600 mb-2">15</div>73 <p class="text-gray-700">Urgences Médicales</p>74 </div>75 <div class="bg-blue-50 p-6 rounded-xl text-center">76 <div class="text-4xl font-bold text-blue-600 mb-2">19</div>77 <p class="text-gray-700">Police</p>78 </div>79 <div class="bg-green-50 p-6 rounded-xl text-center">80 <div class="text-4xl font-bold text-green-600 mb-2">177</div>81 <p class="text-gray-700">Gendarmerie Royale</p>82 </div>83 <div class="bg-yellow-50 p-6 rounded-xl text-center">84 <div class="text-4xl font-bold text-yellow-600 mb-2">080 100 47 47</div>85 <p class="text-gray-700">SAMU</p>86 </div>87 </div>88 </div>89 </div>90 91 <!-- Security Section -->92 <div class="bg-gray-100 py-16">93 <div class="container mx-auto px-6">94 <div class="flex flex-col md:flex-row items-center">95 <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">96 <h2 class="text-3xl font-bold mb-6 text-dark">Votre Sécurité est Notre Priorité</h2>97 <p class="text-lg text-gray-700 mb-8">Medacte respecte les plus hauts standards internationaux de sécurité et de protection des données de santé.</p>98 <div class="space-y-4">99 <div class="flex items-start">100 <div class="bg-primary p-2 rounded-full mr-4">101 <i data-feather="lock" class="text-white"></i>102 </div>103 <div>104 <h4 class="font-bold text-dark mb-1">Chiffrement de niveau bancaire</h4>105 <p class="text-gray-600">Protection maximale de vos données médicales</p>106 </div>107 </div>108 <div class="flex items-start">109 <div class="bg-primary p-2 rounded-full mr-4">110 <i data-feather="shield" class="text-white"></i>111 </div>112 <div>113 <h4 class="font-bold text-dark mb-1">Certification ISO 27001</h4>114 <p class="text-gray-600">Normes internationales de sécurité de l'information</p>115 </div>116 </div>117 <div class="flex items-start">118 <div class="bg-primary p-2 rounded-full mr-4">119 <i data-feather="key" class="text-white"></i>120 </div>121 <div>122 <h4 class="font-bold text-dark mb-1">Authentification à deux facteurs</h4>123 <p class="text-gray-600">Accès sécurisé à votre compte</p>124 </div>125 </div>126 </div>127 <div class="mt-8 bg-white p-4 rounded-lg inline-block">128 <p class="font-medium text-primary">Plus de <span class="font-bold">500,000</span> utilisateurs nous font confiance</p>129 </div>130 </div>131 <div class="md:w-1/2">132 <img src="https://pub-9f200de23f1a4fada809186205ec0a61.r2.dev/sicherheit.svg" alt="Security" class="w-full rounded-xl shadow-lg">133 </div>134 </div>135 </div>136 </div>137 138 <!-- Services Section -->139 <div class="py-16 bg-white">140 <div class="container mx-auto px-6">141 <div class="text-center mb-16">142 <h2 class="text-3xl font-bold text-dark mb-4">NOS SERVICES</h2>143 <p class="text-xl text-gray-600 max-w-2xl mx-auto">Découvrez comment Medacte révolutionne votre expérience médicale avec des solutions innovantes et sécurisées.</p>144 </div>145 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">146 <!-- Service 1 -->147 <div class="feature-card bg-white p-8 rounded-xl border border-gray-100 transition duration-300 hover:border-primary">148 <div class="bg-primary bg-opacity-10 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-6">149 <i data-feather="file-text" class="text-primary"></i>150 </div>151 <h3 class="text-xl font-bold mb-3 text-dark">Ordonnances Numériques</h3>152 <p class="text-gray-600 mb-4">Recevez et gérez vos ordonnances médicales directement sur votre smartphone, avec un stockage sécurisé et un accès instantané.</p>153 <div class="flex gap-2">154 <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Sécurisé</span>155 <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Instantané</span>156 </div>157 </div>158 <!-- Service 2 -->159 <div class="feature-card bg-white p-8 rounded-xl border border-gray-100 transition duration-300 hover:border-primary">160 <div class="bg-primary bg-opacity-10 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-6">161 <i data-feather="folder" class="text-primary"></i>162 </div>163 <h3 class="text-xl font-bold mb-3 text-dark">Dossier Médical Unifié</h3>164 <p class="text-gray-600 mb-4">Centralisez l'ensemble de vos documents médicaux avec un chiffrement de niveau bancaire pour une accessibilité optimale.</p>165 <div class="flex gap-2">166 <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Privé</span>167 <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">Cloud</span>168 </div>169 </div>170 <!-- Service 3 -->171 <div class="feature-card bg-white p-8 rounded-xl border border-gray-100 transition duration-300 hover:border-primary">172 <div class="bg-primary bg-opacity-10 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-6">173 <i data-feather="video" class="text-primary"></i>174 </div>175 <h3 class="text-xl font-bold mb-3 text-dark">Téléconsultation Premium</h3>176 <p class="text-gray-600 mb-4">Consultez un médecin qualifié en vidéo HD depuis chez vous, disponible 24h/24 avec des rendez-vous en moins de 15 minutes.</p>177 <div class="flex gap-2">178 <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Rapide</span>179 <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Experts</span>180 </div>181 </div>182 <!-- Service 4 -->183 <div class="feature-card bg-white p-8 rounded-xl border border-gray-100 transition duration-300 hover:border-primary">184 <div class="bg-primary bg-opacity-10 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-6">185 <i data-feather="map-pin" class="text-primary"></i>186 </div>187 <h3 class="text-xl font-bold mb-3 text-dark">Pharmacies à Proximité</h3>188 <p class="text-gray-600 mb-4">Localisez instantanément les pharmacies les plus proches avec leurs horaires, services et disponibilités en temps réel.</p>189 <div class="flex gap-2">190 <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Local</span>191 <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Temps réel</span>192 </div>193 </div>194 <!-- Service 5 -->195 <div class="feature-card bg-white p-8 rounded-xl border border-gray-100 transition duration-300 hover:border-primary">196 <div class="bg-primary bg-opacity-10 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-6">197 <i data-feather="truck" class="text-primary"></i>198 </div>199 <h3 class="text-xl font-bold mb-3 text-dark">Livraison Express Médicaments</h3>200 <p class="text-gray-600 mb-4">Commandez vos médicaments et recevez-les à domicile en moins de 2h, avec suivi en direct de votre livraison.</p>201 <div class="flex gap-2">202 <span class="bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded">Express</span>203 <span class="bg-teal-100 text-teal-800 text-xs px-2 py-1 rounded">Suivi</span>204 </div>205 </div>206 <!-- Service 6 -->207 <div class="feature-card bg-white p-8 rounded-xl border border-gray-100 transition duration-300 hover:border-primary">208 <div class="bg-primary bg-opacity-10 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-6">209 <i data-feather="bell" class="text-primary"></i>210 </div>211 <h3 class="text-xl font-bold mb-3 text-dark">Rappels Intelligents</h3>212 <p class="text-gray-600 mb-4">Programmez des alertes personnalisées pour vos prises de médicaments et rendez-vous, avec historique complet.</p>213 <div class="flex gap-2">214 <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Agenda</span>215 <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Historique</span>216 </div>217 </div>218 </div>219 <div class="mt-12 text-center">220 <p class="text-gray-600 font-medium">Gratuit • Sans engagement • Compatible iOS & Android</p>221 </div>222 </div>223 </div>224 225 <!-- Health Card Section -->226 <div class="py-16 bg-gradient-to-r from-primary to-secondary">227 <div class="container mx-auto px-6">228 <div class="flex flex-col md:flex-row items-center">229 <div class="md:w-1/2 mb-12 md:mb-0 flex justify-center">230 <img src="https://pub-9f200de23f1a4fada809186205ec0a61.r2.dev/Business%20Card.svg" alt="Carte Santé Medacte" class="w-full max-w-md">231 </div>232 <div class="md:w-1/2 md:pl-12 text-white">233 <h2 class="text-3xl font-bold mb-6">Votre carte santé numérique sécurisée</h2>234 <h3 class="text-2xl font-semibold mb-4">Votre Passeport Santé Intelligent</h3>235 <p class="text-lg mb-8 opacity-90">La carte santé Medacte combine technologie NFC et QR code pour un accès ultra-sécurisé à vos données médicales, disponible en format physique et digital.</p>236 <div class="space-y-4">237 <div class="flex items-start">238 <div class="bg-white bg-opacity-20 p-2 rounded-full mr-4">239 <i data-feather="cpu" class="text-white"></i>240 </div>241 <div>242 <h4 class="font-bold mb-1">Chiffrement Blockchain</h4>243 <p class="opacity-80">Protection maximale de vos données avec technologie blockchain</p>244 </div>245 </div>246 <div class="flex items-start">247 <div class="bg-white bg-opacity-20 p-2 rounded-full mr-4">248 <i data-feather="refresh-cw" class="text-white"></i>249 </div>250 <div>251 <h4 class="font-bold mb-1">Synchronisation Instantanée</h4>252 <p class="opacity-80">Mises à jour en temps réel sur tous vos appareils</p>253 </div>254 </div>255 <div class="flex items-start">256 <div class="bg-white bg-opacity-20 p-2 rounded-full mr-4">257 <i data-feather="globe" class="text-white"></i>258 </div>259 <div>260 <h4 class="font-bold mb-1">Reconnue Internationalement</h4>261 <p class="opacity-80">Valable dans les hôpitaux partenaires à travers le monde</p>262 </div>263 </div>264 </div>265 </div>266 </div>267 </div>268 </div>269 270 <!-- Stats Section -->271 <div class="py-16 bg-white">272 <div class="container mx-auto px-6">273 <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">274 <div class="p-6">275 <div class="text-4xl font-bold text-primary mb-2">500K+</div>276 <p class="text-gray-600">Patients Satisfaits</p>277 </div>278 <div class="p-6">279 <div class="text-4xl font-bold text-secondary mb-2">2K+</div>280 <p class="text-gray-600">Professionnels</p>281 </div>282 <div class="p-6">283 <div class="text-4xl font-bold text-primary mb-2">1M+</div>284 <p class="text-gray-600">Consultations</p>285 </div>286 <div class="p-6">287 <div class="text-4xl font-bold text-secondary mb-2">50+</div>288 <p class="text-gray-600">Villes Desservies</p>289 </div>290 </div>291 </div>292 </div>293 294 <!-- Download Section -->295 <div class="py-16 bg-gray-100">296 <div class="container mx-auto px-6">297 <div class="flex flex-col md:flex-row items-center">298 <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">299 <img src="https://pub-9f200de23f1a4fada809186205ec0a61.r2.dev/app.svg" alt="Medacte App" class="w-full max-w-md mx-auto">300 </div>301 <div class="md:w-1/2 text-center md:text-left">302 <h2 class="text-3xl font-bold mb-6 text-dark">Téléchargez Medacte</h2>303 <p class="text-xl text-gray-700 mb-8">Disponible gratuitement sur iOS et Android. Gérez votre santé où que vous soyez.</p>304 <div class="flex justify-center md:justify-start gap-4">305 <button class="bg-dark text-white px-6 py-3 rounded-lg font-medium hover:bg-gray-800 transition duration-300 flex items-center">306 <i data-feather="apple" class="mr-2"></i> App Store307 </button>308 <button class="bg-dark text-white px-6 py-3 rounded-lg font-medium hover:bg-gray-800 transition duration-300 flex items-center">309 <i data-feather="play" class="mr-2"></i> Google Play310 </button>311 </div>312 <div class="mt-8">313 <p class="text-gray-600 mb-2">QR Code</p>314 <p class="text-sm text-gray-500 mb-4">Scannez pour télécharger</p>315 <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://medacte.com/download" alt="QR Code" class="mx-auto md:mx-0 w-32 h-32 border-4 border-white rounded-lg shadow-lg">316 </div>317 </div>318 </div>319 </div>320 </div>321 322 <!-- Testimonials Section -->323 <div class="py-16 bg-white">324 <div class="container mx-auto px-6">325 <h2 class="text-3xl font-bold text-center mb-12 text-dark">Ce qu'ils disent de Medacte</h2>326 <p class="text-xl text-gray-600 text-center mb-16 max-w-2xl mx-auto">Des milliers de patients et professionnels nous font confiance</p>327 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">328 <div class="bg-gray-50 p-8 rounded-xl">329 <div class="flex items-center mb-6">330 <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Dr. Leila Benani" class="w-16 h-16 rounded-full mr-4">331 <div>332 <h4 class="font-bold text-dark">Dr. Leila Benani</h4>333 <p class="text-gray-600">Médecin Généraliste, Casablanca</p>334 </div>335 </div>336 <p class="text-gray-700">"Medacte a révolutionné ma pratique médicale. La gestion des dossiers patients est tellement plus simple et efficace."</p>337 </div>338 <div class="bg-gray-50 p-8 rounded-xl">339 <div class="flex items-center mb-6">340 <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Youssef El Amrani" class="w-16 h-16 rounded-full mr-4">341 <div>342 <h4 class="font-bold text-dark">Youssef El Amrani</h4>343 <p class="text-gray-600">Pharmacien, Rabat</p>344 </div>345 </div>346 <p class="text-gray-700">"En tant que pharmacien, Medacte m'a permis de gagner un temps précieux dans la gestion des ordonnances et des stocks."</p>347 </div>348 <div class="bg-gray-50 p-8 rounded-xl">349 <div class="flex items-center mb-6">350 <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Fatima Zahra" class="w-16 h-16 rounded-full mr-4">351 <div>352 <h4 class="font-bold text-dark">Fatima Zahra</h4>353 <p class="text-gray-600">Patient, Marrakech</p>354 </div>355 </div>356 <p class="text-gray-700">"La livraison de médicaments à domicile est un vrai soulagement pour moi qui ai des difficultés à me déplacer."</p>357 </div>358 </div>359 </div>360 </div>361 362 <!-- FAQ Section -->363 <div class="py-16 bg-gray-100">364 <div class="container mx-auto px-6">365 <div class="text-center mb-12">366 <h2 class="text-3xl font-bold mb-4 text-dark">Questions Fréquentes</h2>367 <p class="text-xl text-gray-600">Vous avez d'autres questions ?</p>368 <p class="text-lg text-gray-600">Notre équipe est là pour vous aider 24h/24</p>369 </div>370 <div class="max-w-3xl mx-auto">371 <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">372 <div class="p-6">373 <div class="flex justify-between items-center cursor-pointer">374 <h3 class="text-lg font-medium text-dark">Comment créer un compte Medacte ?</h3>375 <i data-feather="chevron-down" class="text-primary"></i>376 </div>377 <div class="mt-4 text-gray-600 hidden">378 <p>La création d'un compte est simple et rapide. Téléchargez l'application, cliquez sur "Créer un compte", entrez vos informations personnelles et validez votre adresse email. Votre compte sera actif immédiatement.</p>379 </div>380 </div>381 </div>382 <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">383 <div class="p-6">384 <div class="flex justify-between items-center cursor-pointer">385 <h3 class="text-lg font-medium text-dark">Est-ce que Medacte est vraiment gratuit ?</h3>386 <i data-feather="chevron-down" class="text-primary"></i>387 </div>388 <div class="mt-4 text-gray-600 hidden">389 <p>Oui, l'application Medacte est entièrement gratuite pour tous les utilisateurs. Certains services optionnels comme la livraison express de médicaments peuvent avoir des frais supplémentaires, mais ces derniers vous seront toujours communiqués clairement avant toute confirmation.</p>390 </div>391 </div>392 </div>393 <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">394 <div class="p-6">395 <div class="flex justify-between items-center cursor-pointer">396 <h3 class="text-lg font-medium text-dark">Comment fonctionne la téléconsultation ?</h3>397 <i data-feather="chevron-down" class="text-primary"></i>398 </div>399 <div class="mt-4 text-gray-600 hidden">400 <p>La téléconsultation vous permet de consulter un médecin agréé en vidéo depuis votre smartphone ou ordinateur. Après avoir pris rendez-vous dans l'application, vous recevez un lien pour rejoindre la consultation à l'heure prévue. Le médecin peut établir un diagnostic, prescrire des médicaments si nécessaire, et vous orienter vers un spécialiste si besoin.</p>401 </div>402 </div>403 </div>404 <div class="bg-white rounded-xl shadow-md overflow-hidden">405 <div class="p-6">406 <div class="flex justify-between items-center cursor-pointer">407 <h3 class="text-lg font-medium text-dark">Mes données médicales sont-elles sécurisées ?</h3>408 <i data-feather="chevron-down" class="text-primary"></i>409 </div>410 <div class="mt-4 text-gray-600 hidden">411 <p>Absolument. Medacte utilise un chiffrement de niveau bancaire pour protéger toutes vos données médicales. Nous sommes certifiés ISO 27001 et nous respectons strictement les réglementations marocaines et internationales en matière de protection des données de santé. Vos informations ne sont jamais partagées sans votre consentement explicite.</p>412 </div>413 </div>414 </div>415 </div>416 <div class="text-center mt-12">417 <a href="#contact" class="bg-primary text-white px-8 py-3 rounded-lg font-medium hover:bg-primary-dark transition duration-300 inline-block">418 Contactez-nous419 </a>420 </div>421 </div>422 </div>423 424 <!-- Footer -->425 <footer class="bg-dark text-white py-12">426 <div class="container mx-auto px-6">427 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">428 <div>429 <img src="https://pub-9f200de23f1a4fada809186205ec0a61.r2.dev/logo.svg" alt="Medacte Logo" class="h-12 mb-4">430 <p class="text-gray-400">Santé Digitale pour tous au Maroc</p>431 <div class="flex mt-4 space-x-4">432 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a>433 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>434 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a>435 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a>436 </div>437 </div>438 <div>439 <h4 class="text-lg font-bold mb-4">Services</h4>440 <ul class="space-y-2">441 <li><a href="#" class="text-gray-400 hover:text-white transition">Ordonnances Numériques</a></li>442 <li><a href="#" class="text-gray-400 hover:text-white transition">Dossier Médical</a></li>443 <li><a href="#" class="text-gray-400 hover:text-white transition">Téléconsultation</a></li>444 <li><a href="#" class="text-gray-400 hover:text-white transition">Pharmacies Partenaires</a></li>445 <li><a href="#" class="text-gray-400 hover:text-white transition">Livraison Médicaments</a></li>446 </ul>447 </div>448 <div>449 <h4 class="text-lg font-bold mb-4">Entreprise</h4>450 <ul class="space-y-2">451 <li><a href="#" class="text-gray-400 hover:text-white transition">À propos</a></li>452 <li><a href="#" class="text-gray-400 hover:text-white transition">Carrières</a></li>453 <li><a href="#" class="text-gray-400 hover:text-white transition">Partenaires</a></li>454 <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>455 <li><a href="#" class="text-gray-400 hover:text-white transition">Presse</a></li>456 </ul>457 </div>458 <div>459 <h4 class="text-lg font-bold mb-4">Contact</h4>460 <ul class="space-y-2">461 <li class="flex items-start text-gray-400"><i data-feather="mail" class="mr-2 mt-1"></i> contact@medacte.com</li>462 <li class="flex items-start text-gray-400"><i data-feather="phone" class="mr-2 mt-1"></i> +212 5 22 22 22 22</li>463 <li class="flex items-start text-gray-400"><i data-feather="map-pin" class="mr-2 mt-1"></i> Casablanca, Maroc</li>464 </ul>465 </div>466 </div>467 <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">468 <p class="text-gray-400 mb-4 md:mb-0">© 2025 Medacte. Tous droits réservés.</p>469 <div class="flex space-x-6">470 <a href="#" class="text-gray-400 hover:text-white">Conditions d'utilisation</a>471 <a href="#" class="text-gray-400 hover:text-white">Politique de confidentialité</a>472 <a href="#" class="text-gray-400 hover:text-white">Mentions légales</a>473 </div>474 </div>475 </div>476 </footer>477 478 <script>479 // Initialize Vanta.js effect480 VANTA.WAVES({481 el: "#vanta-bg",482 color: 0xffffff,483 waveHeight: 20,484 shininess: 50,485 waveSpeed: 1.2,486 zoom: 0.8487 });488 489 // Initialize feather icons490 feather.replace();491 492 // FAQ accordion functionality493 document.querySelectorAll('.bg-white.rounded-xl.shadow-md.overflow-hidden .flex').forEach(question => {494 question.addEventListener('click', () => {495 const answer = question.parentElement.querySelector('.hidden');496 const icon = question.querySelector('i');497 498 answer.classList.toggle('hidden');499 icon.setAttribute('data-feather', answer.classList.contains('hidden') ? 'chevron-down' : 'chevron-up');500 feather.replace();501 });502 });503 504 // Smooth scrolling for anchor links505 document.querySelectorAll('a[href^="#"]').forEach(anchor => {506 anchor.addEventListener('click', function (e) {507 e.preventDefault();508 document.querySelector(this.getAttribute('href')).scrollIntoView({509 behavior: 'smooth'510 });511 });512 });513 </script>514</body>515</html>516