mejora y agregacion de pantalla

Características Principales de la Página Web
1. Diseño y Experiencia Inmersiva
Interfaz de red neuronal: Navegación única que simula conexiones neuronales con nodos interactivos

Estética cyberpunk/tecnológica: Paleta de colores oscura con acentos morados y azules

Animaciones fluidas: Transiciones suaves entre secciones usando GSAP

Efectos visuales avanzados: Pulsos luminosos, efectos de glitch y conexiones animadas

2. Arquitectura de Navegación
Sistema de nodos neuronales: 6 nodos principales que representan diferentes secciones

Canvas interactivo: Conexiones dinámicas entre nodos con pulsos de energía

Zoom contextual: Transición suave entre vista general y contenido específico

3. Secciones de Contenido
Hero/Inicio: Presentación principal con llamadas a la acción

Contexto 2040:

Línea de tiempo interactiva

Narrativa de fondo sobre el colapso sanitario post-2040

Orígenes de la corporación MEDUSYS

Tecnología:

Tres pilares tecnológicos: Conectividad, Funcionalidad y Estética

Grid de características con hover effects

Historias:

Testimonios de pacientes con diferentes perfiles

Bailarina, cardióloga y trabajador de obra

Efectos de conexión al interactuar

Corazón 3D:

Modelo interactivo de corazón artificial

Sistema de rotación y zoom

Paneles informativos desplegables

Scanner de Compatibilidad:

Simulador de diagnóstico médico

Representación visual del cuerpo humano

Resultados personalizados de compatibilidad

4. Elementos Técnicos Destacados
Animación de introducción: Secuencia cinematográfica con logo pulsante

Sistema de audio ambiental: Control de sonido ambiental futurista

Responsive design: Adaptable a diferentes dispositivos

Efectos de sonido: Feedback auditivo en navegación

Canvas animations: Conexiones neuronales en tiempo real

Propósito y Narrativa
El proyecto presenta MEDUSYS como respuesta a una crisis sanitaria global ficticia post-2040, donde la corporación mexicana desarrolla soluciones biotecnológicas que combinan lo biológico con lo sintético. La narrativa explora temas de:

Reconstrucción corporal post-traumática

Integración humano-tecnológica

Innovación médica con sensibilidad estética

Soluciones personalizadas basadas en compatibilidad biológica

Tecnologías Utilizadas
HTML5/CSS3/JavaScript vanilla

GSAP para animaciones avanzadas

Canvas API para efectos visuales

Web Audio API para efectos sonoros

Diseño responsive con CSS Grid y Flexbox

Valor Diferencial
Esta página web destaca por:

Su metáfora de navegación neuronal única

La integración perfecta entre narrativa y tecnología

La creación de una experiencia inmersiva que refleja el tema futurista

El equilibrio entre contenido informativo y elementos interactivos

Author: httpsalejandro

app.js

@@ -1,63 +1,51 @@
-// Nueva animación de intro
-const tl = gsap.timeline({ defaults: { ease: "power2.inOut" } });
-
-// Aparecer el logo
-tl.to(".logo", {
-    opacity: 1,
-    duration: 0.5
-})
-
-// Efecto de pulso (repetir 3 veces)
-.to(".pulse-effect", {
-    opacity: 1,
-    scale: 1,
-    duration: 0.5,
-    repeat: 3,
-    yoyo: true,
-    onStart: function() {
-        // Iniciar el efecto de pulso (shadow)
-        gsap.set(".pulse-effect", {
-            boxShadow: "0 0 0 0 rgba(255, 255, 255, 0.7)"
-        });
-    },
-    onRepeat: function() {
-        // En cada repetición, reiniciar la sombra para el pulso
-        gsap.set(".pulse-effect", {
-            boxShadow: "0 0 0 0 rgba(255, 255, 255, 0.7)"
-        });
-        gsap.to(".pulse-effect", {
-            boxShadow: "0 0 0 20px rgba(255, 255, 255, 0)",
-            duration: 0.5
-        });
-    }
-})
-
-// Efecto glitch rápido
-.to(".glitch", {
-    opacity: 0.4,
-    duration: 0.1
+// Animación de intro con logo y pulso
+const introTL = gsap.timeline();
+
+// Inicial: mostrar el logo y el fondo
+introTL.to(".logo-pulse", { opacity: 1, duration: 1 })
+       .to(".intro-background", { opacity: 1, duration: 1 }, "-=1")
+
+// Crear pulsos: hacemos 3 pulsos
+.to(".logo-pulse", { 
+    scale: 1.1, 
+    duration: 0.5, 
+    repeat: 3, 
+    yoyo: true 
 })
-.to(".glitch", {
-    opacity: 0,
-    duration: 0.1
+.to(".pulse-glow", { 
+    opacity: 0.6, 
+    scale: 1.2, 
+    duration: 0.5, 
+    repeat: 3, 
+    yoyo: true 
+}, "-=1.5")
+
+// Pulso final más intenso
+.to(".logo-pulse", { 
+    scale: 1.5, 
+    opacity: 0, 
+    duration: 0.8 
 })
-
-// Desvanecer la intro
-.to("#intro", {
-    opacity: 0,
-    duration: 0.5,
+.to(".pulse-glow", { 
+    scale: 2, 
+    opacity: 0, 
+    duration: 0.8 
+}, "-=0.8")
+.to(".intro-background", { 
+    opacity: 0, 
+    duration: 0.8 
+}, "-=0.8")
+
+// Ocultar intro y mostrar contenido
+.to("#intro", { 
+    opacity: 0, 
+    duration: 0.5, 
     onComplete: function() {
         document.getElementById("intro").style.display = "none";
-        // Iniciar la aplicación principal
         new NeuronNavigation();
-    }
+    } 
 })
-
-// Revelar el contenido principal
-.to("#mainContent", {
-    opacity: 1,
-    duration: 0.5
-}, "-=0.3");
+.to("#mainContent", { opacity: 1, duration: 0.8 }, "-=0.3");
 class NeuronNavigation {
     constructor() {
         this.currentSection = 'hero';

index.html

@@ -13,9 +13,11 @@
 </head>
 <body>
 <div id="intro">
-    <div class="logo"></div>
-    <div class="pulse-effect"></div>
-    <div class="glitch"></div>
+    <div class="intro-background"></div>
+    <div class="logo-container">
+        <img src="logo.png" alt="MEDUSYS" class="logo-pulse">
+        <div class="pulse-glow"></div>
+    </div>
 </div>
   <!-- Audio Ambiental -->
   <div class="audio-control">

styles.css

@@ -1,50 +1,54 @@
-/* Estilos para la intro simplificada */
 #intro {
     position: fixed;
     inset: 0;
-    background: #000;
+    background: linear-gradient(135deg, #18124b  2%, #AA89D1 50%, #131034 100%);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 9999;
+    overflow: hidden;
 }
 
-.logo {
+.logo-container {
+    position: relative;
     width: 200px;
     height: 200px;
-    background-image: url("logo.png"); /* Reemplaza con tu logo */
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.logo-pulse {
+    width: 150px;
+    height: 150px;
+    opacity: 0;
     position: relative;
     z-index: 2;
 }
 
-.pulse-effect {
+.pulse-glow {
     position: absolute;
-    width: 200px;
-    height: 200px;
+    width: 150px;
+    height: 150px;
+    background: radial-gradient(circle, rgb(255, 255, 255) 40%, transparent 70%);
     border-radius: 50%;
-    background: transparent;
-    border: 2px solid transparent;
-    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
     opacity: 0;
+    filter: blur(20px);
     z-index: 1;
 }
 
-.glitch {
+.intro-background {
     position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
-    pointer-events: none;
-    background: repeating-linear-gradient(
-        to bottom,
-        rgba(255,255,255,0.05) 0 2px,
-        rgba(0,0,0,0) 2px 4px
-    );
+    background: radial-gradient(circle at center, rgba(147, 185, 224, 0.1) 0%, transparent 50%);
+    opacity: 0;
+}
+
+#mainContent {
     opacity: 0;
-    mix-blend-mode: overlay;
-    z-index: 3;
 }
 :root {
   --primary: #93B9E0;