Building Constructora Quetzal

Constructora Quetzal is a marketing website for a Tulum-based construction company specializing in vacation homes, boutique hotels, and tourist developments in the Riviera Maya. The site presents the brand in Spanish with an animated splash screen, scroll-linked navigation, interactive methodology timeline, filterable project portfolio, embedded Google Maps, partner testimonials, and a contact form.

What it does

Splash screen

SplashScreen greets visitors with the Quetzal logo, tagline (“Construyendo el paraíso tropical”), and a simulated loading progress bar (0–100%) on an emerald gradient background. After completion, it fades out and reveals the main single-page layout.

Header & navigation

Fixed header with QuetzalLogo, company name, and smooth-scroll links to Inicio, Proyectos, Servicios, Ubicación, and Contacto. Active section highlights via scroll listener in App.tsx. Responsive hamburger menu on mobile.

Hero

Full-viewport hero with:

• Headline: “Construimos el Paraíso Tropical en Tulum”
• Dual CTAs — Ver Proyectos and Contactar Ahora
• Stats row: 15+ años, 200+ proyectos, activos en Tulum 2024
• Auto-rotating image carousel (4 construction photos) with scale/fade transitions, adjacent preview thumbnails, and dot indicators

Methodology (LO QUE OFRECEMOS)

Interactive 5-step process timeline:

Clickable step icons, animated progress line, and Anterior/Siguiente navigation update the detail card below.

About

Company story with four value pillars — Sostenibilidad, Calidad, Experiencia, Confianza — alongside a staggered 2×2 photo grid of Tulum architecture.

Services

Four service cards with feature lists:

• Casas de Vacaciones — tropical villas with pools and terraces
• Proyectos Turísticos — boutique hotels, wellness centers, restaurants
• Desarrollo Inmobiliario — condos, subdivisions, commercial centers
• Diseño Arquitectónico — custom design, 3D renders, permits

Projects portfolio

Filterable gallery (Todos, Casas de Vacaciones, Hoteles, Residencial) with six sample projects — Casa Moderna Tulum, Villa Paraíso, Residencia Selva, Casa Luna, Vista Caribe, Eco Resort. Each card shows image, location, year, and description. Clicking the eye icon opens a modal with full project details.

Location

Coverage zones (Tulum Centro, Zona Hotelera, Aldea Zama, La Veleta, Región 15, Playa Norte), embedded Google Maps iframe for Tulum, and two office listings with address, phone, and hours. CTA to schedule a free consultation.

Partners & testimonials

Stats (50+ socios, 95% satisfacción, 4.9 rating) and three client testimonials from Riviera Maya real-estate partners. Partnership CTA at the bottom.

Contact

Two-column layout:

• Form — name, email, phone, subject dropdown (consulta, cotización, proyecto, alianza), message; client-side submit with confirmation alert
• Info cards — phone, email (info@constructoraquetzal.com), office address, business hours

Footer

Company summary, quick links, service list, contact details, and copyright.

Branding & SEO

Custom QuetzalLogo SVG component. index.html includes Spanish meta description, Open Graph, and Twitter Card tags targeting Tulum construction keywords.

Tech stack

No backend — static marketing site with client-side form handling. All project data and copy live in component files.

Development process

Initial delivery

Single release (Conexion al dev) delivered the complete site from the Bolt/Vite template:

• Full single-page layout with 11 section components
• Animated splash screen with progress simulation
• Scroll-aware header navigation
• Hero carousel with 4 construction images
• Interactive 5-step methodology process
• Filterable project gallery with modal viewer
• Google Maps embed and office listings
• Partner testimonials and contact form
• SEO meta tags and Quetzal favicon

Deployed to constructoraquetzal.netlify.app.