Vitras MX

Sitio web de marketing y landing page para Vitras, plataforma SaaS de administración residencial para condominios en México. Construido con Nuxt 4, Tailwind CSS v4 y animaciones fluidas con Motion Plus.

Vitras MX

Overview

Vitras es una startup PropTech de Zapopan, Jalisco, enfocada en digitalizar y simplificar la administración de condominios en México. Me contrataron para diseñar y desarrollar su sitio web público — la cara principal del producto ante administradores y residentes potenciales.

**El reto**

El equipo de Vitras tenía un producto sólido pero sin presencia web que lo comunicara con claridad. Necesitaban un sitio que transmitiera confianza, explicara el valor del producto de forma visual e impulsara conversiones hacia su demo y su app móvil — todo en un mes.

**Lo que construí**

Desarrollé el sitio completo desde cero: arquitectura, diseño de UI, animaciones e integración de contenido. El sitio está estructurado en tres secciones principales que guían al visitante a través del embudo:

- **Hero section** con headline impactante, mockup real de la app móvil, CTAs hacia demo y WhatsApp, y logos de aliados como COPARMEX, FIIE Jalisco, Eskayser y Gobierno de Jalisco.

- **Sección Producto** con tabs interactivos para administradores y residentes, mostrando funcionalidades clave: administración financiera con estado de cuenta en tiempo real, cobranza y multas, comunicación interna, control de visitas con QR y botón de pánico.

- **Sección Nosotros** con la historia del equipo fundador, visión del producto y foto del equipo.

**Stack técnico**

El proyecto usa Nuxt 4 con Vue 3 como framework principal, aprovechando el sistema de rutas basado en archivos y el SSR para SEO óptimo. Los estilos se manejaron con Tailwind CSS v4, usando su nuevo motor basado en variables CSS nativas. Los componentes headless de Reka UI garantizan accesibilidad sin sacrificar control visual. Las animaciones de entrada, scroll y transición de sección se implementaron con Motion Plus y motion-v, logrando fluidez sin afectar el rendimiento. VueUse proveyó composables para detección de scroll, medios y preferencias del usuario. El sistema de íconos usa @nuxt/icon con Lucide e íconos de BX Logos, y las fuentes y scripts externos se gestionaron limpiamente con @nuxt/fonts y @nuxt/scripts.

**Resultado**

Un sitio limpio, moderno y rápido que comunica el valor de Vitras desde el primer scroll. Entregado en 4 semanas, de marzo a abril de 2026.

Tecnologías

Nuxt 4Vue 3Tailwind CSS v4Reka UIMotion Plusmotion-vVueUseNuxt IconNuxt FontsNuxt ScriptsLucide Icons

Vitras MX Gallery

Click on any image to view in full screen

Vitras MX - Sección Producto: administración financiera y panel de cobranza
Vitras MX - Sección Nosotros: el equipo detrás de la plataforma
Vitras MX - Vista general de presentación