Mi Primer PremioSitio público de una plataforma de sorteos mensuales por suscripción

Desarrollo del sitio público en Azirgo SAS: portada, páginas legales, datos estructurados, analítica y despliegue.

La plataforma de sorteos funciona en su propia app, con su API y su inicio de sesión. Faltaba la puerta de entrada: un sitio que explique en segundos cómo funcionan los cuatro sorteos del mes, muestre los planes con el mismo precio que cobra la app y lleve a la persona a suscribirse con el plan ya elegido, sin que precios y textos se desincronicen cada vez que el negocio cambia un plan.

• Portada de una sola página con slider de banners, comunidad, sorteos del mes, planes, cómo funciona, ganadores, preguntas frecuentes y un llamado final al grupo de WhatsApp.
• Sección de planes que lee los cuatro planes del API de la plataforma al construir el sitio, con su precio, los sorteos que incluye y el equivalente mensual calculado en centavos enteros.
• Botón «Elegir plan» que abre el inicio de sesión de la app con ese plan ya seleccionado.
• Cuatro páginas propias e indexables: términos y condiciones, bases del sorteo (con la tabla de premios del mes), política de privacidad y contacto.
• Datos estructurados en un único @graph: Organization, WebSite, un Product con su Offer por cada plan y un Event en línea por cada sorteo.
• Fondos animados con WebGL - cinco variantes: humo, aurora, niebla, haces y vapor - y una lluvia de monedas sobre la sección de sorteos.
• Analítica con GA4 y Microsoft Clarity cargada cuando la página ya terminó de cargar, y un sitemap.xml generado desde la lista de rutas reales.
• Imagen Docker que construye el sitio y lo sirve con nginx, con caché larga para los archivos versionados.

Un sitio Astro de salida estática, con la portada como isla de React. Todo lo que se repite vive en módulos de datos compartidos, así el header, el pie, las páginas legales y el JSON-LD leen de la misma fuente.

La portada vive de ilustraciones grandes y fondos animados, así que cada pieza pesada tiene su regla para no frenar la primera pantalla.

• Astro con salida estática y la portada como isla de React: el HTML sale completo del build - textos, precios y JSON-LD - y React solo se encarga después del slider, las preguntas y los fondos animados.
• Los planes se piden al API durante el build y no en el navegador, así los precios llegan ya escritos en el HTML. Si el API falla, el sitio usa los planes de respaldo en lugar de tumbar el despliegue.
• Cada plan se enlaza con su diseño por su tipo de suscripción y no por su nombre ni su slug: en el API hay planes cuyo slug dice «anual» y cobran al mes.
• En el JSON-LD cada Offer lleva los meses que cubre, para que $15,99 cada seis meses no se indexe como precio mensual, y el precio declarado es exactamente el de la tarjeta.
• Lo que el negocio todavía no confirmó no se inventa: los datos vacíos se omiten del schema y, en las páginas, aparecen con un marcador visible de pendiente en lugar de pasar por dato real.
• Las imágenes publicadas llevan la versión en el nombre, porque nginx las sirve con un mes de caché: un arte nuevo estrena URL en vez de esperar a que la caché caduque.

• Mantener fluidos cinco fondos WebGL en teléfonos modestos: se dibujan a media resolución (a un tercio en equipos con pocos núcleos o poca memoria), a 30 o 20 cuadros por segundo, solo mientras la sección está en pantalla y nunca con el movimiento reducido activado.
• Publicar ilustraciones con el rótulo pintado dentro de la imagen sin que el WebP se coma las letras: un techo de 100 KB por archivo, con márgenes propios para los banners rotulados y las láminas verticales.
• Montar el header sin fondo sobre el slider sin que el logo tape el titular en pantallas de 320 px: el aire se agrega en el script que genera los WebP, estirando el borde del arte, sin tocar los originales.

El sitio está publicado: portada, planes con los precios del API, bases del sorteo y páginas legales, todo estático y servido por nginx, con los datos estructurados de planes y sorteos rastreables y la analítica de GA4 y Clarity funcionando.