Web institucional para convertir, posicionar y crecer con Astro

Mynt Studio es una plataforma web institucional para presentar servicios digitales con identidad visual fuerte, base técnica sólida y arquitectura preparada para crecer.

El proyecto combina Astro 5, despliegue en Cloudflare Edge, componentes reutilizables, contenido editorial, animaciones con GSAP, structured data, endpoints dinámicos y una API de contacto serverless. Todo está pensado para que el sitio funcione como una pieza comercial y técnica al mismo tiempo: rápido, claro, medible y mantenible.

Objetivo del proyecto

Mynt necesitaba una presencia digital que transmitiera una identidad precisa: software, automatización y SEO desde una estética sobria, tecnológica y directa. La solución debía resolver tres necesidades al mismo tiempo:

Presentar servicios de forma clara y escalable.
Construir autoridad mediante contenido técnico.
Convertir visitantes en consultas reales sin depender de herramientas externas pesadas.

Para lograrlo, el sitio se estructuró como una plataforma institucional con páginas de servicio, blog, rutas técnicas para buscadores, metadatos avanzados y un formulario propio conectado a una API serverless.

Stack tecnológico

La base del proyecto está construida con Astro, aprovechando su capacidad para entregar HTML rápido, componentes aislados y una arquitectura flexible para contenido. El deploy sobre Cloudflare permite servir la experiencia desde una red global y ejecutar endpoints serverless cerca del usuario.

Área	Tecnología	Uso dentro del proyecto
Framework	Astro 5	Rutas, layouts, contenido y renderizado optimizado
Deploy	Cloudflare	Edge runtime, CDN global y ejecución serverless
Lenguaje	TypeScript	Tipado en endpoints y lógica de aplicación
Animación	GSAP + ScrollTrigger	Reveals, transiciones y experiencias guiadas por scroll
Email	Resend API	Envío de mensajes desde formulario de contacto
SEO	Schema.org + rutas dinámicas	Metadatos, sitemap, RSS, robots.txt y llms.txt

La elección del stack prioriza rendimiento, control y bajo overhead. Astro permite que gran parte del sitio sea HTML optimizado, mientras Cloudflare aporta distribución global y capacidad serverless para lógica puntual.

Arquitectura pensada para crecer

El sitio está organizado con separación clara entre páginas, layouts, componentes compartidos, estilos base y utilidades SEO. Esto evita que la home, los servicios, el blog y las rutas técnicas se mezclen en un único bloque difícil de mantener.

La arquitectura contempla:

Páginas institucionales para inicio, servicios, sobre, blog y contacto.
Páginas dinámicas de servicio con contenido individual y datos estructurados.
Blog técnico basado en contenido local y rutas dinámicas.
Componentes compartidos para heroes, loaders, transiciones, botones magnéticos y navegación.
Utilidades SEO para reforzar seguridad de enlaces y consistencia de metadatos.

Esta organización permite agregar nuevas páginas, nuevos artículos o nuevas secciones sin reescribir la estructura principal del sitio. Cada pieza tiene una responsabilidad concreta y puede evolucionar sin romper el resto.

SEO técnico y GEO desde la base

Uno de los puntos más fuertes del proyecto es la estrategia SEO. Mynt no se limita a title, description y Open Graph. La implementación contempla señales técnicas para buscadores tradicionales y para sistemas de búsqueda asistidos por IA.

El sitio incluye:

Sitemap XML dinámico con páginas estáticas, servicios y artículos.
RSS feed para distribuir contenido editorial.
Canonical URLs para evitar duplicidad.
Open Graph completo para mejorar previews sociales.
Hreflang orientado a español de Argentina y fallback global.
robots.txt dinámico con políticas para crawlers tradicionales y bots de IA.
llms.txt para facilitar lectura y descubribilidad por modelos de lenguaje.

Además, las páginas incorporan distintos tipos de Schema.org, según su intención. No se usa el mismo schema para todo: servicios, artículos, breadcrumbs y páginas informativas tienen estructuras diferentes.

Structured data por intención de búsqueda

El proyecto trabaja datos estructurados como parte de la arquitectura, no como agregado decorativo. Las páginas de servicios usan schema de tipo Service, los artículos usan BlogPosting, las rutas de navegación usan BreadcrumbList y las páginas principales refuerzan entidades como Organization, WebSite y WebPage.

Esto ayuda a que cada URL sea más fácil de interpretar por buscadores y asistentes. La idea es simple: si una página vende un servicio, el marcado debe explicar ese servicio; si una página publica conocimiento, el marcado debe representar contenido editorial.

Esa diferencia mejora claridad semántica y evita un error común: tratar todo el sitio como si fuera una colección de páginas genéricas.

Experiencia visual con motion controlado

Mynt tiene una identidad visual marcada: fondo oscuro, composición editorial, tipografía protagonista y detalles de interacción. Para sostener esa estética sin sacrificar control técnico, se implementó un sistema de motion basado en GSAP.

La experiencia incluye:

Hero con canvas y efecto parallax.
Animaciones de entrada por scroll.
Secciones con desplazamiento horizontal controlado.
Transiciones de página con overlay.
Botones con efecto magnético en desktop.
Loader de primera visita por sesión.
Cursor personalizado en dispositivos compatibles.

La clave está en aplicar movimiento donde suma intención. Las animaciones acompañan la navegación, refuerzan jerarquía y hacen que la marca se sienta más premium, pero no reemplazan la estructura de contenido.

Accesibilidad y adaptación al dispositivo

Un sitio con animaciones necesita mecanismos de cuidado. Por eso Mynt contempla señales del usuario y del dispositivo para ajustar la experiencia cuando corresponde.

Se implementaron patrones como:

Skip link para saltar directo al contenido principal.
Soporte para prefers-reduced-motion.
Detección de hardware para bajar intensidad en dispositivos limitados.
Uso de HTML semántico en navegación, contenido principal, artículos y aside.
ARIA labels en elementos interactivos.

Esto permite mantener una estética intensa sin forzar la misma experiencia en todos los contextos. Si el dispositivo o el usuario piden menos movimiento, la interfaz puede responder con una versión más liviana.

API de contacto serverless

El formulario de contacto no depende de un embed externo. El proyecto incluye un endpoint propio desplegado en Cloudflare, conectado con Resend para enviar emails.

La API incorpora varias capas de validación:

Validación de campos requeridos.
Límite de longitud para nombre, email y mensaje.
Validación de formato de email.
Honeypot para bots simples.
Tiempo mínimo de llenado para detectar envíos automatizados.
Rate limit por IP: máximo 5 requests cada 10 minutos.
Respuestas JSON consistentes para manejar errores.

Este enfoque mantiene control sobre la experiencia, reduce dependencia de terceros visibles en frontend y permite proteger el canal de contacto sin complejidad innecesaria.

Blog técnico como activo de autoridad

El blog funciona como una capa estratégica del sitio. No está puesto solo para completar navegación: permite publicar artículos sobre inteligencia artificial, herramientas de desarrollo, automatización y tendencias técnicas.

El contenido editorial aporta tres beneficios:

Refuerza autoridad temática.
Crea nuevas rutas indexables.
Genera contexto para usuarios que llegan desde búsqueda orgánica o canales sociales.

La estructura del blog incluye rutas dinámicas, datos estructurados, RSS y elementos de lectura como índice de contenidos y preguntas frecuentes cuando el artículo lo requiere.

Seguridad de enlaces y consistencia editorial

Una decisión técnica interesante del proyecto es el uso de un plugin rehype propio para controlar políticas de enlaces. El objetivo es evitar comportamientos inseguros o inconsistentes en contenido markdown, especialmente cuando se publican artículos con enlaces externos.

El plugin fuerza buenas prácticas como noopener y noreferrer, y evita que cada artículo tenga que resolver esa seguridad manualmente. Esta clase de detalle no se ve en la interfaz, pero mejora mantenibilidad y reduce errores repetidos.

Resultado

Mynt Studio quedó como una plataforma institucional con base técnica superior a una web corporativa tradicional. Reúne presentación comercial, contenido editorial, SEO técnico, motion system, accesibilidad progresiva y backend serverless en una misma arquitectura.

El valor del proyecto está en la combinación: una identidad visual fuerte sostenida por decisiones técnicas concretas. No es solo una interfaz llamativa; es un sistema preparado para publicar, posicionar, medir y convertir.