Construyendo Constructora Quetzal

Constructora Quetzal es un sitio de marketing para una constructora con base en Tulum, especializada en casas de vacaciones, hoteles boutique y desarrollos turísticos en la Riviera Maya. El sitio presenta la marca en español con una pantalla de splash animada, navegación vinculada al scroll, línea de tiempo interactiva de metodología, portafolio de proyectos con filtros, Google Maps embebido, testimonios de socios y un formulario de contacto.

Qué hace

Pantalla splash

SplashScreen recibe a los visitantes con el logo de Quetzal, el eslogan (“Construyendo el paraíso tropical”) y una barra de progreso de carga simulada (0–100%) sobre un fondo con gradiente esmeralda. Al terminar, se desvanece y revela el layout principal de una sola página.

Header y navegación

Header fijo con QuetzalLogo, nombre de la empresa y enlaces de scroll suave hacia Inicio, Proyectos, Servicios, Ubicación y Contacto. La sección activa se resalta mediante un listener de scroll en App.tsx. Menú hamburguesa responsivo en móvil.

Hero

Hero a pantalla completa con:

• Titular: “Construimos el Paraíso Tropical en Tulum”
• Dos CTAs — Ver Proyectos y Contactar Ahora
• Fila de estadísticas: 15+ años, 200+ proyectos, activos en Tulum 2024
• Carrusel de imágenes con rotación automática (4 fotos de construcción) con transiciones de escala/desvanecimiento, miniaturas de vista previa adyacentes e indicadores de puntos

Metodología (LO QUE OFRECEMOS)

Línea de tiempo interactiva de proceso en 5 pasos:

Íconos de pasos clicables, línea de progreso animada y navegación Anterior/Siguiente que actualiza la tarjeta de detalle inferior.

Acerca de

Historia de la empresa con cuatro pilares de valor — Sostenibilidad, Calidad, Experiencia, Confianza — junto a una cuadrícula de fotos 2×2 escalonada de arquitectura en Tulum.

Servicios

Cuatro tarjetas de servicio con listas de características:

• Casas de Vacaciones — villas tropicales con albercas y terrazas
• Proyectos Turísticos — hoteles boutique, centros de bienestar, restaurantes
• Desarrollo Inmobiliario — condominios, fraccionamientos, centros comerciales
• Diseño Arquitectónico — diseño a medida, renders 3D, permisos

Portafolio de proyectos

Galería con filtros (Todos, Casas de Vacaciones, Hoteles, Residencial) con seis proyectos de muestra — Casa Moderna Tulum, Villa Paraíso, Residencia Selva, Casa Luna, Vista Caribe, Eco Resort. Cada tarjeta muestra imagen, ubicación, año y descripción. Al hacer clic en el ícono del ojo se abre un modal con los detalles completos del proyecto.

Ubicación

Zonas de cobertura (Tulum Centro, Zona Hotelera, Aldea Zama, La Veleta, Región 15, Playa Norte), iframe embebido de Google Maps para Tulum y dos oficinas con dirección, teléfono y horarios. CTA para agendar una consulta gratuita.

Socios y testimonios

Estadísticas (50+ socios, 95% satisfacción, calificación 4.9) y tres testimonios de clientes de socios inmobiliarios de la Riviera Maya. CTA de alianza al final.

Contacto

Layout de dos columnas:

• Formulario — nombre, correo, teléfono, selector de asunto (consulta, cotización, proyecto, alianza), mensaje; envío del lado del cliente con alerta de confirmación
• Tarjetas de info — teléfono, correo (info@constructoraquetzal.com), dirección de oficina, horario de atención

Footer

Resumen de la empresa, enlaces rápidos, lista de servicios, datos de contacto y copyright.

Branding y SEO

Componente SVG personalizado QuetzalLogo. index.html incluye meta description en español, Open Graph y Twitter Card orientados a palabras clave de construcción en Tulum.

Stack técnico

Sin backend — sitio de marketing estático con manejo de formulario del lado del cliente. Todos los datos de proyectos y textos viven en archivos de componentes.

Proceso de desarrollo

Entrega inicial

Un solo release (Conexion al dev) entregó el sitio completo desde la plantilla Bolt/Vite:

• Layout completo de una sola página con 11 componentes de sección
• Pantalla splash animada con simulación de progreso
• Navegación de header consciente del scroll
• Carrusel hero con 4 imágenes de construcción
• Proceso interactivo de metodología en 5 pasos
• Galería de proyectos con filtros y visor modal
• Google Maps embebido y listado de oficinas
• Testimonios de socios y formulario de contacto
• Meta tags SEO y favicon de Quetzal

Desplegado en constructoraquetzal.netlify.app.