Refina la landing page generada, inspirada en icanbank.com, para lograr una fidelidad visual y funcional superior. Aplica los siguientes ajustes y mejoras:

Estilo Visual y Diseño:

•Paleta de Colores: Utiliza un fondo azul marino profundo, casi negro (#0A192F), y acentos en un turquesa vibrante (#00FF7F). Asegúrate de que los textos principales y los elementos interactivos utilicen estos colores de acento de manera consistente.

•Tipografía: Para los titulares grandes (h1, h2), usa una fuente sans-serif audaz y de tamaño impactante. Para el cuerpo del texto, emplea una fuente sans-serif limpia y legible, manteniendo un tamaño que facilite la lectura en todos los dispositivos.

•Iconografía: El icono de Icanbank (el asterisco/copo de nieve estilizado) debe ser consistente en tamaño y color en todas las secciones (header, hero section, footer). Los iconos utilizados en las secciones de contenido (Globo, Escudo, Estrella) deben ser visualmente coherentes con el estilo minimalista y moderno, y su tamaño debe complementar el texto sin dominarlo.

•Diseño General: Mantén un diseño minimalista con amplio espacio en blanco. Asegura un diseño responsivo que se adapte perfectamente a dispositivos móviles y de escritorio.

Mejoras por Sección:

Encabezado (Header):

•El logo de Icanbank debe ser clicable y llevar al inicio de la página. Los enlaces de navegación ("Tu mejor opción", "Contáctanos") deben ser anclas suaves a las secciones correspondientes dentro de la misma página.

Sección Principal (Hero Section):

•Ajusta el diseño para que el texto "Ahorra en dólares sin límites" tenga un espaciado de línea y un tamaño visualmente impactante. El icono de Icanbank dentro del título debe integrarse de forma fluida, con un tamaño y posición que no rompa el flujo del texto.

•El botón CTA "Cambia tu forma de ahorrar" debe tener un estilo prominente y redondeado, con un efecto hover sutil que cambie el tono del verde sin alterar drásticamente el tamaño o la forma. Este botón debe llevar a una sección de registro o contacto dentro de la misma página, o a un formulario emergente.

Secciones de Contenido (Beneficios, ¿Por qué Icanbank?, Seguridad):

•Para las tarjetas de beneficios y seguridad, implementa un efecto de borde sutil que se ilumine o cambie de color al pasar el ratón por encima, utilizando el color de acento verde, replicando la interactividad visual del sitio original.

Pie de Página (Footer):

•Los enlaces de descarga de aplicaciones (App Store, Google Play) deben utilizar los logos oficiales de las tiendas y ser enlaces externos a las respectivas tiendas de aplicaciones.

•La información de contacto (correo electrónico, WhatsApp) debe ser enlaces mailto: y tel: respectivamente.

•Los enlaces legales ("Solicitudes", "Superintendencia de Bancos de Panamá", "Términos y condiciones - Aviso de Privacidad") deben ser enlaces externos a los documentos o páginas legales correspondientes. Asegura un espaciado adecuado y que sean fácilmente clicables.

Interactividad y Rendimiento:

•Animaciones: Implementa animaciones de 'fade-in' o 'slide-up' sutiles para las secciones a medida que el usuario hace scroll, para dar una sensación de dinamismo y modernidad.

•Navegación: Asegura que la navegación de anclaje (scroll suave) sea fluida y que el encabezado fijo no oculte el contenido al que se desplaza la página.

•Optimización: Optimiza la carga de imágenes y recursos para asegurar que la página cargue rápidamente en todos los dispositivos, especialmente en móviles.

Basándote en el código actual de la landing page, realiza los siguientes ajustes y mejoras para maximizar la fidelidad con el sitio web icanbank.com en términos de diseño, animaciones y redirecciones. No generes el código desde cero, sino refina y modifica el existente.

1. Refinamiento del Diseño Visual y Estilo:

•Paleta de Colores: Asegúrate de que el fondo principal sea el azul marino muy oscuro (#0A192F). Los colores de acento deben ser el turquesa vibrante (#00FF7F) para elementos interactivos, texto destacado, iconos y bordes. Los bordes y separadores sutiles deben usar el tono de azul más claro (#1E3A5F). Verifica que estos códigos hexadecimales se apliquen consistentemente.

•Tipografía: Ajusta la tipografía para que los titulares principales (h1, h2) tengan un peso de fuente black o extra-bold y tamaños muy grandes (ej. text-6xl a text-8xl para h1), replicando el impacto visual de Icanbank. Para el cuerpo del texto y descripciones, confirma que se use una fuente sans-serif limpia y legible con un peso normal o medium.

•Iconografía: Asegura que el icono personalizado de Icanbank (el asterisco/copo de nieve estilizado) sea consistente en tamaño, color (#00FF7F) y alineación en todas las secciones (header, hero section, footer). Los iconos de Lucide React deben mantener el color de acento (#00FF7F) y un tamaño adecuado.

•Espaciado y Composición: Revisa y ajusta el espaciado (padding y margin) entre elementos y secciones para replicar la sensación de amplitud y limpieza del diseño original de Icanbank. Confirma que el diseño basado en cuadrículas para las secciones de beneficios y seguridad sea preciso.

2. Mejoras por Sección (Ajustes Específicos):

Encabezado (Header):

•Fijo y Translúcido: Confirma que el encabezado sea fijo, con un fondo ligeramente translúcido (bg-[#0A192F]/95) y un efecto backdrop-blur-md.

•Navegación: Asegura que los enlaces "Tu Mejor Opción" y "Contáctanos" funcionen como anclas suaves (behavior: "smooth") a las secciones correspondientes (#benefits y #contact), con un desplazamiento ajustado para que el encabezado fijo no oculte el contenido al que se desplaza (ej. element.offsetTop - headerHeight). Los efectos hover deben cambiar el color a #00FF7F.

Sección Principal (Hero Section):

•Título: Refina el line-height y el tracking-tight del título "Ahorra [IcanbankIcon] en dólares [sin límites]" para que sea visualmente idéntico al original. Asegura que el icono de Icanbank dentro del título esté perfectamente integrado en tamaño y alineación (ej. inline-block, w-16 h-16 lg:w-20 lg:h-20, -mt-2).

•Botón CTA: Ajusta el botón "Cambia tu forma de ahorrar" para que su estilo sea idéntico al de Icanbank: fondo #00FF7F, texto #0A192F, rounded-full, px-10 py-5. El efecto hover debe ser un ligero escalado (hover:scale-105), cambio de color a un verde ligeramente más oscuro (hover:bg-[#00E66F]), y una sombra sutil (hover:shadow-lg hover:shadow-[#00FF7F]/25). Confirma que redirija suavemente a la sección de contacto (#contact).

•Tarjeta de Pasos: Verifica que la tarjeta flotante con los "3 SIMPLES PASOS" tenga el gradiente sutil (bg-gradient-to-br from-[#0F2A44] to-[#0A192F]), el borde (border-[#1E3A5F]), y la sombra pronunciada (shadow-2xl). Los círculos numerados y el icono CheckCircle deben ser en color de acento (#00FF7F) con texto #0A192F.

Secciones de Contenido (Beneficios, ¿Por qué Icanbank?, Seguridad):

•Diseño de Tarjetas: Para las tarjetas de beneficios y seguridad, implementa el efecto hover que ilumine el borde a #00FF7F, añada una sombra sutil (hover:shadow-lg hover:shadow-[#00FF7F]/10) y un ligero desplazamiento hacia arriba (hover:-translate-y-1) en las tarjetas de beneficios. Las tarjetas de seguridad deben tener un estilo similar pero sin el desplazamiento en hover.

•Nota de Accesibilidad: Asegura que el bloque de texto de la nota "Montos de apertura accesibles para todos los ahorradores" tenga el fondo translúcido (bg-[#00FF7F]/10) y el borde en color de acento (border-[#00FF7F]/20).

Sección de Contacto (#contact):

•Formulario: Confirma que los campos de entrada tengan el fondo oscuro (bg-[#0A192F]), el borde sutil (border-[#1E3A5F]), texto blanco y placeholder gris. Al enfocar, el borde debe cambiar a #00FF7F.

•Botón de Envío: El botón "Enviar mensaje" debe tener el mismo estilo del botón CTA de la sección Hero (fondo #00FF7F, texto #0A192F, rounded-full, hover:scale-[1.02]).

Pie de Página (Footer):

•Enlaces de Descarga de Apps: Asegura que los componentes AppStoreBadge y GooglePlayBadge se utilicen correctamente y que los enlaces (href) apunten a las URLs correctas de las tiendas de aplicaciones, abriendo en una nueva pestaña (target="_blank" rel="noopener noreferrer").

•Información de Contacto: Confirma que los enlaces de correo electrónico (mailto:teayudo@icanbank.com) y teléfono (tel:+50767634805) sean funcionales y tengan iconos (Mail, Phone) y efectos hover que cambien el color del texto a #00FF7F.

•Enlaces Legales: Los enlaces legales deben ser enlaces externos a las páginas correspondientes (incluso si los href actuales son #, v0 debe entender que son enlaces a documentos o páginas externas). Deben tener efectos hover que cambien el color del texto a #00FF7F.

3. Interactividad y Animaciones Avanzadas:

•Animaciones al Scroll: Refina las animaciones de fade-in y slide-up para todas las secciones principales (benefits, why-icanbank, security, contact) utilizando IntersectionObserver para activarlas suavemente cuando la sección entra en el viewport. Asegura que la duración y el timing-function de las transiciones sean fluidos.

•Efectos Hover: Verifica que todos los elementos interactivos (botones, enlaces de navegación, tarjetas, enlaces del footer) tengan efectos hover sutiles y consistentes que mejoren la experiencia del usuario, como cambios de color, ligeros escalados o sombras, tal como se observa en Icanbank.com.

•Scroll Suave: La navegación de anclaje debe ser perfectamente suave y compensar la altura del encabezado fijo para que el contenido de la sección sea visible desde el principio, sin saltos bruscos.

4. Optimización y Rendimiento:

•Carga Rápida: Asegura que la página cargue de manera extremadamente rápida en todos los dispositivos, optimizando la carga de todos los recursos (imágenes, fuentes, CSS, JS).

•Código Limpio: Mantén el código limpio, bien estructurado y fácil de entender, utilizando componentes reutilizables donde sea apropiado, y siguiendo las mejores prácticas de Next.js y Tailwind CSS.

Basándote en el código actual de la landing page (incluyendo page.tsx, app-store-badges.tsx, y use-scroll-animation.ts), realiza los ajustes y refinamientos necesarios para lograr una réplica casi idéntica del sitio web icanbank.com. El objetivo es una fidelidad extrema en diseño, animaciones, interactividad y redirecciones, prestando atención a los detalles más sutiles para una experiencia de usuario indistinguible del original. No generes el código desde cero, sino modifica y optimiza el existente.

1. Refinamiento del Diseño Visual y Estilo (Máxima Fidelidad):

•Paleta de Colores: Asegura una implementación pixel-perfect de los colores. El fondo principal debe ser el azul marino muy oscuro (#0A192F). Los colores de acento deben ser el turquesa vibrante (#00FF7F) para elementos interactivos, texto destacado, iconos y bordes. Los bordes y separadores sutiles deben usar el tono de azul más claro (#1E3A5F). Verifica que no haya desviaciones en los tonos o la opacidad.

•Tipografía: Ajusta la tipografía para que los titulares principales (h1, h2) tengan un peso de fuente black o extra-bold y tamaños que coincidan exactamente con los del sitio original (ej. text-6xl a text-8xl para h1, con leading-[0.85] y tracking-tight para un espaciado de línea y letra compactos). Para el cuerpo del texto y descripciones, confirma que se use una fuente sans-serif limpia y legible con un peso normal o medium y un tamaño que garantice la legibilidad y la estética del original.

•Iconografía: El icono personalizado de Icanbank (el asterisco/copo de nieve estilizado) debe ser idéntico en tamaño, color (#00FF7F) y alineación en todas las secciones. Asegura que su integración en el h1 sea fluida y que su vertical-align sea precisa. Los iconos de Lucide React deben ser visualmente coherentes, con el color de acento (#00FF7F) y un tamaño que replique el original.

•Espaciado y Composición: Realiza micro-ajustes en el padding, margin y gap entre todos los elementos y secciones para replicar la sensación exacta de amplitud y limpieza del diseño original. Cada píxel cuenta para la fidelidad. Confirma que el diseño basado en cuadrículas sea preciso y que los elementos estén perfectamente alineados.

•Sombras y Bordes: Revisa la intensidad, color y desenfoque de todas las sombras (shadow-xl, shadow-lg) y la opacidad de los bordes (border-[#1E3A5F]/50, border-[#00FF7F]/30) para que coincidan con el sitio de Icanbank. Asegura que los border-radius sean consistentes y exactos.

2. Mejoras por Sección (Detalles de Precisión):

Encabezado (Header):

•Fijo y Translúcido: Confirma que el backdrop-blur-md y la opacidad del fondo (bg-[#0A192F]/95) sean idénticos al original. La transición (transition-all duration-300) debe ser suave al hacer scroll.

•Navegación: Los enlaces "Tu Mejor Opción" y "Contáctanos" deben tener el mismo font-weight y font-size que el original. Los efectos hover deben ser un cambio de color preciso a #00FF7F sin otros efectos. El scrollToSection debe compensar la altura del encabezado (headerHeight = 88) para un scroll suave y preciso.

Sección Principal (Hero Section):

•Título: El IcanbankIcon dentro del h1 debe tener align-middle y un margin-top negativo (-mt-4) para una alineación vertical perfecta con el texto. El font-weight del h1 debe ser font-black.

•Botón CTA: El botón "Cambia tu forma de ahorrar" debe tener font-black para el texto. El efecto hover (hover:scale-105, hover:shadow-xl hover:shadow-[#00FF7F]/30) debe ser visualmente idéntico al original en suavidad y magnitud.

•Tarjeta de Pasos: La tarjeta flotante debe tener un backdrop-blur-sm adicional. El IcanbankIcon dentro de la tarjeta debe tener text-[#0A192F]. Los círculos numerados deben tener font-bold y text-[#0A192F]. El CheckCircle flotante debe tener text-[#0A192F].

Secciones de Contenido (Beneficios, ¿Por qué Icanbank?, Seguridad):

•Diseño de Tarjetas: Las tarjetas de beneficios deben tener un hover:shadow-xl hover:shadow-[#00FF7F]/15 y un hover:-translate-y-2. Los iconos dentro de las tarjetas deben tener un group-hover:scale-110 transition-transform duration-300 para el efecto de zoom sutil al pasar el ratón. Las tarjetas de seguridad deben mantener su estilo sin el efecto de desplazamiento en hover.

•Nota de Accesibilidad: El bloque de texto de la nota "Montos de apertura accesibles para todos los ahorradores" debe tener font-semibold y text-lg para el texto, y un rounded-xl para el border-radius.

Sección de Contacto (#contact):

•Formulario: Los campos de entrada (Input, textarea) deben tener rounded-lg y h-12 para los Input. El focus:ring-2 focus:ring-[#00FF7F]/20 debe ser sutil y preciso. El botón "Enviar mensaje" debe tener font-bold y h-12.

Pie de Página (Footer):

•Enlaces de Descarga de Apps: Los componentes AppStoreBadge y GooglePlayBadge deben tener hover:scale-105 y hover:shadow-lg para replicar el efecto de Icanbank. Confirma que los href sean correctos y target="_blank" rel="noopener noreferrer".

•Información de Contacto y Legales: Los enlaces de contacto y legales deben tener hover:translate-x-1 además del cambio de color a #00FF7F para un efecto de deslizamiento sutil.

3. Interactividad y Animaciones Avanzadas (Perfección de Movimiento):

•Animaciones al Scroll: La useScrollAnimation hook debe asegurar que las animaciones de fade-in y slide-up (opacity-0 translate-y-12 a opacity-100 translate-y-0) sean extremadamente suaves y con un ease-out preciso. El threshold y rootMargin en IntersectionObserver deben ser ajustados para que las animaciones se activen en el momento exacto que se ven en Icanbank.com. El setTimeout para el stagger (index * 150) debe ser ajustado para replicar la secuencia de aparición.

•Efectos Hover: Cada efecto hover (botones, enlaces, tarjetas, iconos) debe ser revisado para que su duración, timing-function y magnitud sean idénticos a los del sitio original. La suavidad y la respuesta deben ser impecables.

•Scroll Suave: La navegación de anclaje debe ser indistinguible del original en cuanto a velocidad y suavidad, sin ningún tipo de salto o interrupción.

4. Optimización y Rendimiento (Experiencia Premium):

•Carga Rápida: Optimiza la carga de todos los recursos (imágenes, fuentes, CSS, JS) para asegurar que la página cargue de manera instantánea en todos los dispositivos, priorizando la experiencia móvil. Considera la precarga de recursos críticos.

•Código Limpio y Moderno: El código debe ser impecable, utilizando las últimas mejores prácticas de Next.js y Tailwind CSS, con componentes bien encapsulados y una estructura lógica que facilite futuras modificaciones.