Xtelar — DeepTech landing with i18n
Bilingual marketing site for a DeepTech subsidiary covering radar, satellite and drone systems.
Next.js 15React 19TypeScriptTailwindFramer Motioni18nLandingDeepTechSEO
Context
Xtelar is the DeepTech arm of the Xori group — focused on radar, satellite identification and drone systems, with sectors spanning defense, government and enterprise. The landing had to communicate technical depth without losing accessibility, and ship in both Spanish and English from day one.
What I built
- Next.js 15 + React 19 + TypeScript site, App Router, mirroring the architectural approach we settled on for the Xori Space landing.
- Custom i18n layer via a
LanguageContext+t(key)hook — no library — keeping the bundle lean and the switch instant. - Cinematic hero: AnimatePresence-driven slideshow over three asset variants (radar scanner, satellite, drone) with crossfade timing tuned so the imagery breathes without distracting from copy and CTAs.
- Sectioned page composition: Hero, About, Systems, Business Units, Philosophy, Sectors, Roadmap, Final CTA, Footer — same isolation pattern as Xori, optimized for fast copy iteration.
- WhatsApp-first conversion: primary CTAs route to a WhatsApp number rather than a contact form, matching the LATAM-B2B sales motion.
Highlights
- Two-language parity: every section pulls copy from the same translation map, so the language switch never desynchronizes.
- Performance budget kept: AVIF + WebP imagery,
priorityonly on the immediately-visible logo, static export ready. - Reusable architecture: the section pattern established for Xori Space transferred 1:1, cutting setup time on Xtelar dramatically.
Stack
Next.js 15 · React 19 · TypeScript · Tailwind CSS · Framer Motion · Phosphor Icons · Custom i18n (Context + hook)