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

Constructora Quetzal shipped as a single-release marketing site on Vite + React, deployed to Netlify. All copy and project data live in component files — no CMS or backend.

Full site delivery (Conexion al dev)

• Scaffolded from the Bolt/Vite template with Tailwind CSS utility styling.
• Built 11 section components on one scrollable page: splash, hero, services, methodology, gallery, map, testimonials, contact, and footer.
• Added animated splash screen with simulated load progress and scroll-aware sticky header.
• Implemented hero image carousel (4 construction photos) and interactive 5-step methodology timeline.

Gallery, map, and lead capture

• Created filterable project gallery with modal image viewer for portfolio items.
• Embedded office locations via Google Maps iframe.
• Wired contact form with client-side validation (static deploy — form handler documented for Netlify Forms or external endpoint).
• Added partner testimonials section and SEO meta tags.

Launch

• Set Quetzal favicon and brand colors consistent with the construction company identity.
• Deployed to constructoraquetzal.netlify.app.
• Verified responsive layout on mobile for carousel, gallery filters, and contact section.