El cuadro de los pasos con la explicación no se pueden cambiar en el móvil, habilita el swipe para poder regresar y avanzar en los pasos y dale un segundo más por cada paso al cambio para poder leer bien la descripción
En el contacto
Good. Now I have full context. Let me also check what WhatsApp icon is available and where the phone number issue is in the footer:
Now I understand all issues clearly:
MessageCircle (a speech bubble) instead of the actual WhatsApp icon. Need to create a proper WhatsApp SVG icon. Also need to remove the WhatsApp number from the "call" action (WhatsApp number is 5611125024, phone number for calls is 5559124761).Let me implement all three:
Now rewrite the DemoAnimation with touch swipe support and slower timing:
Now update IntegrationCta - replace MessageCircle with WhatsApp icon and remove WhatsApp number from phone call:
Now fix the Footer - remove the WhatsApp number from phone calls, use proper WhatsApp icon, keep only 5559124761 for calls:
Now remove the WhatsApp number from phone links - keep only 5559124761 for calls:
Now let me also update the Hero and Navbar CTAs to use the WhatsApp icon instead of MessageCircle:
Now update the Navbar WhatsApp button too:
Now let me also check the pricing.tsx for the same MessageCircle issue:
Good, now I'll fix both files in parallel:
Let me verify there are no remaining MessageCircle usages left:
All MessageCircle icons have been replaced. Here's the summary of changes:
DemoAnimation ahora detecta gestos de swipe horizontal (onTouchStart/onTouchEnd con umbral de 40px) y muestra flechas izquierda/derecha como controles adicionales en mobile. En desktop se mantiene la lista lateral de pasos clickeable. El auto-avance se pausa 10 segundos tras cualquier interaccion manual.components/icons/whatsapp.tsx con el SVG oficial de WhatsApp y se reemplazó MessageCircle (burbuja de chat genérica) en todos los componentes: hero, pricing, solution, integration-cta, footer y demo-animation.Let me first save the screenshots, then check where the current images are used so I can generate new composites that blend the real product shots with the existing design style.
Now let me read the hero and solution components to see the full image context:
Now I understand the full picture. The hero uses hero-dashboard.jpg (a generic AI-generated mockup) and the solution uses mobile-signature.jpg (another generic stock photo). I need to blend the real screenshots into these compositions. I'll update both components to show the real screenshots alongside the existing design elements - creating a layered composition where the real product is showcased within the styled context.
For the hero, I'll show the real dashboard screenshot as the main image with the floating stats still overlaid. For the solution, I'll create a dual-device composition showing both the app (biometrics) and the desktop platform stacked/overlapping.
Now update the Solution section with a dual-device composition - desktop in back, mobile in front:
Ambas secciones ahora combinan las capturas reales del producto con el diseno existente. En el hero, la captura del dashboard de "Generacion y Firmado de Titulos" es la imagen principal con la app movil (biometria) flotando en la esquina inferior izquierda y la tarjeta "Validados SEP 100%" arriba a la derecha. En la solucion, la composicion muestra el dashboard de escritorio como fondo con la app movil de activacion biometrica flotando al frente en la esquina inferior derecha, y la tarjeta de "Firma verificada / No repudio garantizado" arriba a la izquierda.
Modifica la palabra certisep en todo el sitio para que aparezca siempre en mayusculas ( CERTISEP)
Todos los CTA ajustadlos a terera persona ( Solicitar > solicita , conocer > conoce … )
Ajusta el patrón de diseño de la sección de videos, aviso de privacidad y terminas y condiciones
En la sección de ¿Necesitas una integracionistas con tu sistema escolar? Crece el logo 2x y editalo para que sea color blanco con fondo transparente
En la sección de plataformas revisa y corrige los links por que no todos están redireccionando bien
El link correcto a zoga it web experts es https://zoga.com.mx
• 7. En el header quita el texto de CERTISEP y ajusta el logo para que sea 1.5 veces más grande y con fondo transparente
You can send messages while the preview loads