Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="theme-color" content="#000000"> | |
| <meta name="description" content="Instituto IA para Salud - Transformando el futuro de la medicina con inteligencia artificial"> | |
| <meta name="keywords" content="IA médica, salud, inteligencia artificial, medicina, diagnóstico"> | |
| <title>Instituto IA para Salud | Innovación en Medicina</title> | |
| <!-- Enhanced UI Libraries --> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet"> | |
| <link href="https://cdn.jsdelivr.net/npm/@materializecss/[email protected]/dist/css/materialize.min.css" rel="stylesheet"> | |
| <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"> | |
| <!-- Modern Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;400;500;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Interactive Components --> | |
| <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script> | |
| <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@materializecss/[email protected]/dist/js/materialize.min.js"></script> | |
| <!-- Minimal Custom Styles --> | |
| <style> | |
| :root { | |
| --primary: #0F172A; | |
| --accent: #3B82F6; | |
| } | |
| body { | |
| font-family: 'Plus Jakarta Sans', sans-serif; | |
| background: black; | |
| color: #E2E8F0; | |
| } | |
| h1, h2, h3 { | |
| font-family: 'Space Grotesk', sans-serif; | |
| } | |
| .gradient-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| pointer-events: none; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| radial-gradient(circle at 0% 0%, #1E40AF 0%, transparent 50%), | |
| radial-gradient(circle at 100% 0%, #3B82F6 0%, transparent 50%), | |
| radial-gradient(circle at 50% 100%, #2563EB 0%, transparent 50%); | |
| opacity: 0.15; | |
| z-index: -1; | |
| } | |
| .hero { | |
| min-height: 100vh; | |
| background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.8)), | |
| url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| background-attachment: fixed; | |
| } | |
| /* Enhanced styles for sections */ | |
| .section { | |
| padding: 4rem 0; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .section.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .section h2 { | |
| font-size: 2.5rem; | |
| margin-bottom: 2rem; | |
| color: #3B82F6; | |
| } | |
| /* Enhanced styles for cards */ | |
| .card-panel { | |
| border-radius: 10px; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| padding: 2rem; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| background: rgba(255, 255, 255, 0.05); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .card-panel:hover { | |
| transform: translateY(-5px) scale(1.02); | |
| background: rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2); | |
| } | |
| /* Enhanced styles for lists */ | |
| .collection .collection-item { | |
| border-bottom: 1px solid #e0e0e0; | |
| padding: 1rem 0; | |
| } | |
| .collection .collection-item i { | |
| margin-right: 1rem; | |
| } | |
| /* Enhanced styles for team members */ | |
| .team-member { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| .team-member img { | |
| border-radius: 50%; | |
| width: 150px; | |
| height: 150px; | |
| object-fit: cover; | |
| margin-bottom: 1rem; | |
| transition: transform 0.3s ease; | |
| } | |
| .team-member:hover img { | |
| transform: scale(1.05); | |
| } | |
| .team-member h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .team-member p { | |
| color: #6b7280; | |
| } | |
| /* Enhanced navigation links */ | |
| .nav-link { | |
| transition: all 0.3s ease; | |
| position: relative; | |
| } | |
| /* Enhanced navbar styles */ | |
| nav { | |
| transition: background-color 0.3s ease; | |
| } | |
| nav.transparent { | |
| background: rgba(15, 23, 42, 0.8) ; | |
| backdrop-filter: blur(10px); | |
| } | |
| .brand-logo { | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-weight: 700; | |
| transition: transform 0.3s ease; | |
| } | |
| .brand-logo:hover { | |
| transform: translateY(-2px); | |
| } | |
| nav ul li a { | |
| position: relative; | |
| transition: color 0.3s ease; | |
| font-weight: 500; | |
| } | |
| nav ul li a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| width: 0; | |
| height: 2px; | |
| background: var(--accent); | |
| transition: all 0.3s ease; | |
| transform: translateX(-50%); | |
| } | |
| nav ul li a:hover::after { | |
| width: 100%; | |
| } | |
| /* Enhanced mobile sidenav */ | |
| .sidenav { | |
| background: rgba(15, 23, 42, 0.95); | |
| backdrop-filter: blur(10px); | |
| border-left: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .sidenav li > a { | |
| color: #E2E8F0 ; | |
| font-weight: 500; | |
| transition: all 0.3s ease; | |
| } | |
| .sidenav li > a:hover { | |
| background: rgba(59, 130, 246, 0.1); | |
| transform: translateX(5px); | |
| } | |
| .sidenav-overlay { | |
| background: rgba(0, 0, 0, 0.7); | |
| backdrop-filter: blur(3px); | |
| } | |
| /* Fade-in animation for content sections */ | |
| .content-section { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| animation: fadeInUp 0.8s ease forwards; | |
| } | |
| @keyframes fadeInUp { | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Enhanced mobile responsiveness */ | |
| @media (max-width: 768px) { | |
| .container { | |
| padding: 10px; | |
| } | |
| h1 { | |
| font-size: 1.8rem; | |
| } | |
| p { | |
| font-size: 0.95rem; | |
| line-height: 1.6; | |
| } | |
| } | |
| /* Enhanced loading screen */ | |
| .loading-screen { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: var(--primary); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 9999; | |
| transition: opacity 0.5s ease, visibility 0.5s ease; | |
| } | |
| .loading-screen.fade-out { | |
| opacity: 0; | |
| visibility: hidden; | |
| } | |
| .loading-screen .spinner { | |
| width: 60px; | |
| height: 60px; | |
| margin-bottom: 20px; | |
| border: 3px solid transparent; | |
| border-top-color: var(--accent); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| .loading-screen .loading-text { | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-size: 1.2rem; | |
| color: var(--accent); | |
| opacity: 0.8; | |
| animation: pulse 1.5s ease infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 0.4; } | |
| 50% { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Loading using Materialize preloader --> | |
| <div class="preloader-wrapper big active loading" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999;"> | |
| <div class="spinner-layer spinner-blue"> | |
| <div class="circle-clipper left"> | |
| <div class="circle"></div> | |
| </div> | |
| <div class="gap-patch"> | |
| <div class="circle"></div> | |
| </div> | |
| <div class="circle-clipper right"> | |
| <div class="circle"></div> | |
| </div> | |
| </div> | |
| <h4 class="white-text center-align mt-4">Cargando...</h4> | |
| </div> | |
| <div class="gradient-bg"></div> | |
| <!-- Navbar using Materialize --> | |
| <nav class="z-depth-1 transparent"> | |
| <div class="nav-wrapper container"> | |
| <a href="#" class="brand-logo">Instituto IA para Salud</a> | |
| <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="fas fa-bars"></i></a> | |
| <ul class="right hide-on-med-and-down"> | |
| <li><a href="#about">Sobre Nosotros</a></li> | |
| <li><a href="#services">Servicios</a></li> | |
| <li><a href="#contact">Contacto</a></li> | |
| </ul> | |
| </div> | |
| </nav> | |
| <!-- Mobile sidenav --> | |
| <ul class="sidenav" id="mobile-demo"> | |
| <li><a href="#about">Sobre Nosotros</a></li> | |
| <li><a href="#services">Servicios</a></li> | |
| <li><a href="#contact">Contacto</a></li> | |
| </ul> | |
| <!-- Hero section using Materialize cards --> | |
| <section class="hero valign-wrapper"> | |
| <div class="container"> | |
| <div class="card-panel transparent z-depth-0" data-aos="fade-up"> | |
| <h1 class="white-text center-align text-4xl md:text-6xl font-bold mb-8"> | |
| Transformando la Medicina con IA | |
| </h1> | |
| <p class="white-text center-align flow-text text-xl md:text-2xl leading-relaxed mb-12"> | |
| Tecnología de vanguardia para una atención médica más precisa y eficiente | |
| </p> | |
| <div class="center-align"> | |
| <a href="#contact" class="btn-large waves-effect waves-light blue darken-1">Comienza Ahora</a> | |
| </div> | |
| <!-- Stats using Materialize grid --> | |
| <div class="row stats"> | |
| <div class="col s12 m4" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="card-panel transparent z-depth-0"> | |
| <h3 class="center-align text-5xl font-bold text-blue-500">95%</h3> | |
| <p class="center-align text-lg">Precisión Diagnóstica</p> | |
| </div> | |
| </div> | |
| <div class="col s12 m4" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="card-panel transparent z-depth-0"> | |
| <h3 class="center-align text-5xl font-bold text-blue-500">50+</h3> | |
| <p class="center-align text-lg">Hospitales Asociados</p> | |
| </div> | |
| </div> | |
| <div class="col s12 m4" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="card-panel transparent z-depth-0"> | |
| <h3 class="center-align text-5xl font-bold text-blue-500">40%</h3> | |
| <p class="center-align text-lg">Reducción en Tiempos</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Rest of sections using Materialize components --> | |
| <div class="container"> | |
| <section id="about" class="section"> | |
| <h2 class="center-align">Revolucionando la Atención Médica</h2> | |
| <div class="row"> | |
| <div class="col s12 m4" data-aos="fade-up"> | |
| <div class="card-panel"> | |
| <lottie-player src="https://lottie.host/5bc2997f-55eb-4746-9c71-5f571e45d9c9/q8sOPK6yKQ.json" background="transparent" speed="1" style="width: 100%; height: 200px;" loop autoplay></lottie-player> | |
| <h3>Innovación Constante</h3> | |
| <p>Desarrollamos soluciones de IA que transforman la práctica médica, mejorando la precisión y eficiencia.</p> | |
| </div> | |
| </div> | |
| <div class="col s12 m4" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="card-panel"> | |
| <lottie-player src="https://lottie.host/827cc8c7-f343-4b3f-8b93-a8c0c7f1e8c3/mHuP0VQQpJ.json" background="transparent" speed="1" style="width: 100%; height: 200px;" loop autoplay></lottie-player> | |
| <h3>Atención Personalizada</h3> | |
| <p>Cada paciente es único. Nuestra IA adapta las soluciones a las necesidades individuales.</p> | |
| </div> | |
| </div> | |
| <div class="col s12 m4" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="card-panel"> | |
| <lottie-player src="https://lottie.host/a3be8f48-c45b-4b48-8a5c-c5e2803f7a43/89LyVPnZGE.json" background="transparent" speed="1" style="width: 100%; height: 200px;" loop autoplay></lottie-player> | |
| <h3>Resultados Probados</h3> | |
| <p>Mejoramos los resultados clínicos con tecnología de vanguardia y análisis avanzado.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- More sections... --> | |
| </div> | |
| <!-- Add Services section --> | |
| <section id="services" class="section"> | |
| <h2 class="center-align">Nuestras Soluciones</h2> | |
| <div class="row"> | |
| <div class="col s12 m4" data-aos="fade-up"> | |
| <div class="card-panel"> | |
| <h3 class="text-2xl font-bold mb-6 text-blue-600">Diagnóstico por Imagen</h3> | |
| <ul class="collection with-header"> | |
| <li class="collection-item"> | |
| <i class="fas fa-check text-blue-500 mr-3"></i> | |
| <span class="text-lg">Detección temprana de patologías</span> | |
| </li> | |
| <li class="collection-item"> | |
| <i class="fas fa-check text-blue-500 mr-3"></i> | |
| <span class="text-lg">Análisis automatizado de radiografías</span> | |
| </li> | |
| <li class="collection-item"> | |
| <i class="fas fa-check text-blue-500 mr-3"></i> | |
| <span class="text-lg">Procesamiento de imágenes médicas</span> | |
| </li> | |
| <li class="collection-item"> | |
| <i class="fas fa-check text-blue-500 mr-3"></i> | |
| <span class="text-lg">Segmentación de tumores</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="col s12 m4" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="card-panel"> | |
| <h3 class="text-2xl font-bold mb-6 text-blue-600"> | |
| <i class="fas fa-robot mr-3"></i> | |
| Asistencia Virtual | |
| </h3> | |
| <ul class="collection with-header"> | |
| <li class="collection-item flex items-center"> | |
| <i class="fas fa-heartbeat text-blue-500 mr-3"></i> | |
| <span class="text-lg">Monitoreo continuo de pacientes</span> | |
| </li> | |
| <li class="collection-item flex items-center"> | |
| <i class="fas fa-clock text-blue-500 mr-3"></i> | |
| <span class="text-lg">Respuesta inmediata 24/7</span> | |
| </li> | |
| <li class="collection-item flex items-center"> | |
| <i class="fas fa-user-md text-blue-500 mr-3"></i> | |
| <span class="text-lg">Seguimiento personalizado</span> | |
| </li> | |
| <li class="collection-item flex items-center"> | |
| <i class="fas fa-pills text-blue-500 mr-3"></i> | |
| <span class="text-lg">Recordatorios de medicación</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="col s12 m4" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="card-panel"> | |
| <h3>Análisis Predictivo</h3> | |
| <ul class="collection"> | |
| <li class="collection-item">Predicción de riesgos</li> | |
| <li class="collection-item">Optimización de tratamientos</li> | |
| <li class="collection-item">Medicina personalizada</li> | |
| <li class="collection-item">Análisis de datos genómicos</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Add Team section --> | |
| <section id="team" class="section"> | |
| <div class="container"> | |
| <h2 class="center-align">Nuestro Equipo</h2> | |
| <div class="row"> | |
| <div class="col s12 m4" data-aos="fade-up"> | |
| <div class="team-member card-panel hoverable"> | |
| <img src="https://images.unsplash.com/photo-1537368910025-70034659036c?auto=format&fit=crop&w=400&q=80" | |
| alt="Dr. Juan Pérez" | |
| class="responsive-img circle"> | |
| <h3 class="text-xl font-bold mt-4">Dr. Juan Pérez</h3> | |
| <p class="text-gray-600"> | |
| <i class="fas fa-stethoscope mr-2"></i> | |
| Especialista en IA Médica | |
| </p> | |
| <p class="mt-2 text-gray-700"> | |
| 15 años de experiencia en diagnóstico asistido por IA | |
| </p> | |
| </div> | |
| </div> | |
| <div class="col s12 m4" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="team-member card-panel hoverable"> | |
| <img src="https://images.unsplash.com/photo-1584438784894-08918a54a72c?auto=format&fit=crop&w=400&q=80" | |
| alt="Dra. Ana García" | |
| class="responsive-img circle"> | |
| <h3 class="text-xl font-bold mt-4">Dra. Ana García</h3> | |
| <p class="text-gray-600"> | |
| <i class="fas fa-brain mr-2"></i> | |
| Experta en Salud Digital | |
| </p> | |
| <p class="mt-2 text-gray-700"> | |
| Pionera en implementación de IA en hospitales | |
| </p> | |
| <div class="mt-4 flex gap-3 justify-center"> | |
| <a href="#" class="text-blue-500 hover:text-blue-700"> | |
| <i class="fab fa-linkedin text-xl"></i> | |
| </a> | |
| <a href="#" class="text-blue-500 hover:text-blue-700"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col s12 m4" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="team-member card-panel hoverable"> | |
| <img src="https://images.unsplash.com/photo-1559839734-14c1840a2063?auto=format&fit=crop&w=400&q=80" | |
| alt="Ing. Carlos López" | |
| class="responsive-img circle"> | |
| <h3 class="text-xl font-bold mt-4">Ing. Carlos López</h3> | |
| <p class="text-gray-600"> | |
| <i class="fas fa-code mr-2"></i> | |
| Desarrollador de IA | |
| </p> | |
| <p class="mt-2 text-gray-700"> | |
| Especialista en desarrollo de algoritmos de IA | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Add Contact section --> | |
| <section id="contact" class="section"> | |
| <h2 class="center-align">Contacto</h2> | |
| <div class="row"> | |
| <div class="col s12 m6" data-aos="fade-up"> | |
| <div class="card-panel"> | |
| <h3 class="text-2xl font-bold mb-6 text-blue-600"> | |
| <i class="fas fa-envelope-open-text mr-3"></i> | |
| Contacto Directo | |
| </h3> | |
| <div class="collection"> | |
| <a href="mailto:[email protected]" | |
| class="collection-item flex items-center py-4 hover:bg-blue-50"> | |
| <i class="fas fa-envelope text-blue-500 text-xl mr-4"></i> | |
| <div> | |
| <span class="block text-lg font-medium">Email</span> | |
| <span class="text-gray-600">[email protected]</span> | |
| </div> | |
| </a> | |
| <a href="tel:+34900123456" | |
| clzass="collection-item flex items-center py-4 hover:bg-blue-50"> | |
| <i class="fas fa-phone text-blue-500 text-xl mr-4"></i> | |
| <div> | |
| <span class="block text-lg font-medium">Teléfono</span> | |
| <span class="text-gray-600">+34 900 123 456</span> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col s12 m6" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="card-panel"> | |
| <h3 class="text-2xl font-bold mb-6 text-blue-600"> | |
| <i class="fas fa-map-marked-alt mr-3"></i> | |
| Ubicación | |
| </h3> | |
| <div class="collection"> | |
| <a class="collection-item flex items-center py-4"> | |
| <i class="fas fa-map-marker-alt text-blue-500 text-xl mr-4"></i> | |
| <div> | |
| <span class="block text-lg font-medium">Dirección</span> | |
| <span class="text-gray-600">Madrid, España</span> | |
| </div> | |
| </a> | |
| <a class="collection-item flex items-center py-4"> | |
| <i class="fas fa-clock text-blue-500 text-xl mr-4"></i> | |
| <div> | |
| <span class="block text-lg font-medium">Horario</span> | |
| <span class="text-gray-600">Lunes a Viernes: 9:00 - 18:00</span> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <script> | |
| // Initialize Materialize components | |
| document.addEventListener('DOMContentLoaded', function() { | |
| M.AutoInit(); | |
| // Enhanced loading screen removal | |
| const loadingScreen = document.querySelector('.loading-screen'); | |
| window.addEventListener('load', () => { | |
| loadingScreen.classList.add('fade-out'); | |
| setTimeout(() => { | |
| loadingScreen.style.display = 'none'; | |
| }, 500); | |
| }); | |
| // Remove loading screen | |
| const loading = document.querySelector('.loading'); | |
| loading.style.display = 'none'; | |
| // Initialize AOS | |
| AOS.init({ | |
| duration: 800, | |
| once: true, | |
| offset: 50 | |
| }); | |
| // Back to top button functionality | |
| const backToTopButton = document.getElementById('back-to-top'); | |
| window.addEventListener('scroll', () => { | |
| if (window.scrollY > 300) { | |
| backToTopButton.classList.remove('invisible', 'opacity-0'); | |
| backToTopButton.classList.add('opacity-100'); | |
| } else { | |
| backToTopButton.classList.add('opacity-0'); | |
| backToTopButton.classList.remove('opacity-100'); | |
| setTimeout(() => { | |
| backToTopButton.classList.add('invisible'); | |
| }, 300); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', () => { | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| }); | |
| // Add smooth section reveals | |
| const sections = document.querySelectorAll('.section'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('visible'); | |
| } | |
| }); | |
| }, { | |
| threshold: 0.1 | |
| }); | |
| sections.forEach(section => { | |
| observer.observe(section); | |
| }); | |
| }); | |
| // Smooth scroll using Materialize scrollspy | |
| const scrollSpyElems = document.querySelectorAll('.scrollspy'); | |
| M.ScrollSpy.init(scrollSpyElems, { | |
| scrollOffset: 50 | |
| }); | |
| </script> | |
| <!-- Add footer section --> | |
| <footer class="page-footer transparent"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col s12 m4"> | |
| <h5 class="text-xl font-bold text-blue-500 mb-4">Instituto IA para Salud</h5> | |
| <p class="text-gray-400"> | |
| Transformando el futuro de la medicina con inteligencia artificial | |
| </p> | |
| </div> | |
| <div class="col s12 m4"> | |
| <h5 class="text-xl font-bold text-blue-500 mb-4">Enlaces Rápidos</h5> | |
| <ul> | |
| <li class="mb-2"> | |
| <a href="#about" class="text-gray-400 hover:text-blue-500">Sobre Nosotros</a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#services" class="text-gray-400 hover:text-blue-500">Servicios</a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#team" class="text-gray-400 hover:text-blue-500">Equipo</a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#contact" class="text-gray-400 hover:text-blue-500">Contacto</a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="col s12 m4"> | |
| <h5 class="text-xl font-bold text-blue-500 mb-4">Síguenos</h5> | |
| <div class="flex gap-4"> | |
| <a href="#" class="text-gray-400 hover:text-blue-500 text-2xl"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-500 text-2xl"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-500 text-2xl"> | |
| <i class="fab fa-facebook"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer-copyright"> | |
| <div class="container text-center text-gray-500 py-4"> | |
| © 2024 Instituto IA para Salud. Todos los derechos reservados. | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Add floating action button --> | |
| <div class="fixed-action-btn"> | |
| <a class="btn-floating btn-large blue darken-1"> | |
| <i class="fas fa-plus"></i> | |
| </a> | |
| <ul> | |
| <li> | |
| <a href="#contact" class="btn-floating blue lighten-1 tooltipped" data-position="left" data-tooltip="Contacto"> | |
| <i class="fas fa-envelope"></i> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#services" class="btn-floating blue lighten-2 tooltipped" data-position="left" data-tooltip="Servicios"> | |
| <i class="fas fa-stethoscope"></i> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#team" class="btn-floating blue lighten-3 tooltipped" data-position="left" data-tooltip="Equipo"> | |
| <i class="fas fa-users"></i> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Add back to top button --> | |
| <button id="back-to-top" | |
| class="fixed bottom-8 right-8 bg-blue-600 text-white p-4 rounded-full shadow-lg hover:bg-blue-700 transition-all opacity-0 invisible tooltipped" | |
| data-position="left" | |
| data-tooltip="Volver arriba"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <div class="content-section"> | |
| <h1>Welcome</h1> | |
| </div> | |
| <div class="content-section"> | |
| <h2>About</h2> | |
| </div> | |
| </body> | |
| </html> |