Xtelar — Landing DeepTech con i18n
Sitio de marketing bilingüe para una subsidiaria DeepTech que cubre radar, satélites y drones.
Next.js 15React 19TypeScriptTailwindFramer Motioni18nLandingDeepTechSEO
Contexto
Xtelar es el brazo DeepTech del grupo Xori — enfocado en sistemas de radar, identificación satelital y drones, con sectores que abarcan defensa, gobierno y empresa. El landing tenía que comunicar profundidad técnica sin perder accesibilidad, y shippear en español e inglés desde el día uno.
Lo que construí
- Sitio en Next.js 15 + React 19 + TypeScript, App Router, espejando el approach arquitectónico que asentamos para el landing de Xori Space.
- Capa custom de i18n vía un
LanguageContext+ hookt(key)— sin librería — manteniendo el bundle liviano y el switch instantáneo. - Hero cinematográfico: slideshow manejado con AnimatePresence sobre tres assets (scanner radar, satélite, drone) con timing de crossfade calibrado para que la imagen respire sin distraer de la copia ni los CTAs.
- Composición seccionada: Hero, About, Systems, Business Units, Philosophy, Sectors, Roadmap, CTA Final, Footer — mismo patrón de aislamiento que en Xori, optimizado para iterar copia rápido.
- Conversión vía WhatsApp: los CTAs principales enrutan a un número de WhatsApp en vez de un form de contacto, alineado al motion de ventas B2B en LATAM.
Lo destacable
- Paridad two-language: cada sección lee su copia del mismo mapa de traducciones, así el switch de idioma nunca se desincroniza.
- Budget de performance respetado: imágenes en AVIF + WebP,
prioritysolo en el logo visible inmediatamente, listo para export estático. - Arquitectura reutilizable: el patrón de secciones armado para Xori Space se transfirió 1:1, recortando dramáticamente el setup time de Xtelar.
Stack
Next.js 15 · React 19 · TypeScript · Tailwind CSS · Framer Motion · Phosphor Icons · i18n custom (Context + hook)