Lúmina W | Software & Technology

Astro con salida estática y Tailwind CSS. Doce componentes montan la landing en un orden fijo: portada, bifurcación entre los dos caminos, problema, agitación, cinta de frases, solución, proceso, manifiesto, por qué nosotros, producto, preguntas frecuentes y contacto. Cada sección tiene un ancla que coincide con la barra de navegación y el pie.

Español por defecto en la raíz e inglés bajo /en, con las dos copias en diccionarios tipados: el diccionario en inglés exige las mismas claves que el español, así que una clave que falte rompe el build. Las páginas de productos y contacto tienen ruta traducida, y las legales conservan el mismo nombre.

Formulario de contacto: el navegador manda un JSON a una Función de Vercel que valida los campos (nombre, empresa, correo, teléfono, necesidad, etapa y mensaje), exige el consentimiento y descarta en silencio lo que llegue por un campo trampa oculto. Los valores de necesidad y etapa son códigos fijos en inglés, así que una opción se guarda igual en los dos idiomas.

La Función guarda cada solicitud en Supabase y completa la fecha de consentimiento, el origen y el agente de usuario por su cuenta. No guarda la IP. Si el correo ya existe, responde que todo salió bien sin crear otra fila, y avisa igual al buzón interno.

El aviso interno sale por Brevo y es de mejor esfuerzo: si el correo falla, la solicitud ya quedó guardada. El almacenamiento solo corre en producción de Vercel, así que en las previsualizaciones el formulario responde 503 por diseño.

La tabla de solicitudes es una sola, compartida con las landings de TerraCore y OKroot, con una columna de producto y una restricción de unicidad por producto y correo. Tiene seguridad por filas activada y sin permisos para los roles públicos: solo la Función puede escribir.

SEO técnico: un grafo JSON-LD con ProfessionalService, WebSite y WebPage, más FAQPage en las preguntas frecuentes, canónica propia, hreflang entre es, en y x-default, sitemap con alternates y un robots.txt que permite de forma explícita a 21 rastreadores de IA, junto con un llms.txt.

Analítica con consentimiento: Google Analytics 4 se carga solo si la persona acepta el aviso de cookies, y la decisión se guarda en el almacenamiento local, sin cookies propias. El aviso no bloquea la página y aparece tras desplazarse un poco.

Rendimiento y entrega: imágenes en WebP con dimensiones explícitas, fuentes con swap, caché de larga duración para los recursos con hash y las imágenes, y cabeceras de seguridad. El despliegue en Vercel es continuo.

Accesibilidad trabajada en el código: enlace para saltar al contenido, foco visible, etiquetas por campo con errores anunciados y mensaje de éxito con rol de estado, y respeto de prefers-reduced-motion. Un respaldo sin JavaScript deja visible el contenido que aparece al desplazarse.

Calidad: formato, build y escaneo de secretos en cada PR, con un flujo de ramas por entornos.

Sistema editorial y sobrio: bordes rectos (radios de 0, 2 y 4 píxeles), líneas de un píxel en lugar de sombras y una sola hoja de estilos con los tokens.

Azul como color principal para enlaces, etiquetas y foco, y ámbar como acento solo de relleno. Cuando el ámbar es texto sobre fondo claro se usa una versión más oscura para mantener el contraste.

Cabinet Grotesk para los títulos y Switzer para el texto, cargadas desde Fontshare con swap.

Página clara con superficies oscuras fijas (contacto, pie, productos y la barra de navegación). No hay selector de tema.

Los llamados a la acción llevan solo texto, sin flechas ni iconos, y la regla del proyecto es no usar guiones como conector en los textos.

Aplicación Next.js (App Router, React y TypeScript) con Prisma sobre PostgreSQL en Supabase, y Tailwind CSS para los estilos. Reemplazó a un sitio anterior en Astro con Decap CMS. El layout es dinámico a propósito: el build en CI no necesita base de datos.

Los artículos viven de dos formas: archivos Markdown en el repositorio (seis hoy, tres por idioma) que un importador sube a la base en cada build de producción, y artículos escritos por cuentas dentro de la aplicación. El importador crea o actualiza por idioma y slug, y nunca toca autoría, likes, guardados ni comentarios.

Flujo de publicación: un artículo pasa por borrador, pendiente, publicado o rechazado. Cualquier cuenta puede escribir y enviar a revisión, solo la administradora publica directo, y editar un artículo publicado desde una cuenta que no es la de ella lo devuelve a pendiente. El slug queda fijo al publicar.

Bilingüe: español sin prefijo e inglés bajo /en, con rutas traducidas (articulos, categoria, cuenta) y un middleware que las reescribe a las rutas internas. Cada idioma es una fila de Post enlazada con el original, y likes, guardados y comentarios se anclan siempre al original.

Traducción automática: al publicar un original, y solo si hay clave configurada, una tarea en segundo plano manda título, descripción, cuerpo y etiquetas a la API de Claude como datos, valida la respuesta y guarda la versión en el otro idioma. La administradora puede reintentarla desde el panel. Los artículos de archivo traen sus propias traducciones.

Comunidad: comentarios con hilos de hasta 2000 caracteres, likes, guardados, perfiles públicos y seguimiento. La moderación de comentarios es un filtro local por reglas (términos bloqueados y tope de enlaces), sin llamar a ningún modelo: lo que coincide queda pendiente y la administradora lo aprueba o rechaza.

Newsletter con Brevo: una lista por idioma, suscripción desde el sitio y envío de prueba o campaña desde el panel de administración, con el enlace de baja de Brevo. Las notificaciones de respuesta, seguimiento y guardado también salen por correo, además de dentro del blog.

Cuentas con correo y clave verificados por correo, más Google, GitHub y LinkedIn cuando están configurados, e invitaciones que llegan con el correo ya verificado. Un proveedor externo solo se acepta si confirma el correo. Cuenta bloqueada 15 minutos tras 5 intentos fallidos, y suspensión y cierre de sesiones desde el panel.

Los permisos se verifican en el servidor en cada petición. La administración está restringida a una sola cuenta, protegida de suspensión y borrado.

Seguridad por capas: límites de frecuencia en credenciales y operaciones sensibles, verificación de origen en las rutas que escriben, cabeceras de seguridad y contenido de usuario saneado antes de renderizarse.

Imágenes: se validan en el servidor, se rechazan los formatos no admitidos y se convierten a WebP con un límite de tamaño según el uso (portada, cuerpo o avatar) antes de guardarlas en almacenamiento de objetos.

SEO y descubrimiento: sitemap dinámico con alternates por idioma, robots con un grupo aparte para crawlers de IA, llms.txt, feed RSS por idioma y JSON-LD (Organization, WebSite, BlogPosting, Blog, CollectionPage, ProfilePage y BreadcrumbList). La búsqueda usa coincidencia insensible a mayúsculas sobre título, descripción, cuerpo, autor y etiquetas.

Analítica con consentimiento: GA4 se carga solo si la persona acepta y si hay un identificador configurado, y el enlace entre dominios cubre luminaw.co, terracoreapp.co y okroot.co.

Calidad y entrega: 28 archivos de pruebas unitarias sobre lógica pura, lint y build en cada PR, escaneo de secretos y un flujo de ramas por entornos. En producción, el despliegue aplica los cambios de base de datos y carga los artículos.

Un generador de portadas arma las imágenes de 1200 por 630 en WebP, una por idioma, con un tope de 150 KB, a partir de una especificación JSON y un arte SVG.

Los estilos del prototipo diseñado aparte se portaron tal cual, y el tema vive en una sola hoja de estilos con Tailwind CSS sin el reset base.

Artículo con barra de progreso de lectura, tabla de contenidos y tarjeta para compartir, con el menú nativo del dispositivo como camino para Instagram.

Portadas de 1200 por 630 por idioma, generadas desde una especificación y un arte SVG, con un tope de peso por imagen.

Accesibilidad trabajada en el código: enlace para saltar al contenido, menús con teclado y un diálogo de confirmación con el foco atrapado. Los cambios de contraste que alterarían el diseño están pendientes de decisión.

Selector de idioma que recuerda la elección en una cookie, y detección del idioma del navegador en la primera visita.