Sentiero Luxury Villas

Overview

Sentiero Luxury Villas is an off-plan construction project featuring 26 luxurious villas designed for modern living and investment opportunities. My task was to develop a captivating landing page to showcase the project while encouraging potential buyers to submit inquiries via the contact form. By integrating interactive elements, detailed specifications, and high-quality visuals, the page delivers an engaging and informative experience.

The landing page features an interactive masterplan for exploring villa details, an interactive map showcasing nearby amenities, a gallery, and a custom GDPR-compliant consent management system that prioritizes user privacy and transparency. Hosted on Netlify with automatic builds triggered by GitHub commits, the site ensures seamless updates and optimal performance.

---

Key features

Interactive masterplan

• Architectural visualization: Combines a high-resolution visualization of the masterplan with a real aerial photograph of the plot, seamlessly integrated with digital renderings of the properties for a realistic experience.
• Dynamic interaction: Incorporates an interactive SVG overlay on the visualization, enabling users to click on individual villas to explore detailed information such as plot size, number of bedrooms and bathrooms, and roof garden availability.
• Enhanced navigation: Includes intuitive controls for zooming, panning, and toggling between various masterplan views, offering a seamless user experience.

Interactive map

• Plot location highlight: Displays the plot location using a marker styled in the brand's accent color for easy identification.
• Category-based filtering: Enables users to filter markers by categories such as Dining Options, Education, Local Services, and Transportation for personalized exploration.
• Distance insights: Clicking on a marker reveals the distance from the plot, providing practical context for decision-making.

GDPR-compliant consent management

• Privacy first: Developed a custom consent management system to meet GDPR regulations, prioritizing user privacy and transparency.
• Service control: Services like Google Fonts, OpenStreetMap map tiles, and YouTube embeds are disabled by default until explicit user consent is granted.
• User-friendly modal: Includes a clear consent modal with flexible options to:
  • Accept all services.
  • Enable only necessary services.
  • Manage preferences for granular control over optional services.
• Persistent access: Features a "Settings" button in the footer that allows users to update their preferences anytime.

Performance & hosting

• Seamless updates: Hosted on Netlify with automatic builds triggered by GitHub commits for effortless deployment and updates.
• Lightning-fast performance: Assets are optimized to deliver rapid loading times and seamless responsiveness across all devices, consistently achieving PageSpeed scores above 90 in every category.

Additional features

• Specifications table: Villa specifications are displayed in a fully responsive table format for optimal readability on any device.
• Visual showcase: A stunning photo gallery with a masonry layout that emphasizes the villas' luxurious architectural designs and sophisticated aesthetic appeal.
• Secure submissions: Integrated Netlify form handling with advanced spam prevention measures, including Akismet and a honeypot field, ensuring secure and reliable inquiries.
• Anti-scraping measures: Implemented robust techniques to obfuscate email addresses and phone numbers, protecting against automated scraping while maintaining accessibility for users.
• Color modes: Offers full support for light and dark modes, allowing manual toggling for a personalized experience.

---

Visuals

PageSpeed Insights mobile results

Outstanding PageSpeed Insights scores on mobile: 96/93/100/100 for Performance, Accessibility, Best Practices, and SEO. Captured on May 8, 2025.

Interactive masterplan

Interactive masterplan with zoom and pan controls, focus and availability mode toggles, and detailed property popovers.

Location map

Discover nearby amenities with dynamic filters and distance insights for every point of interest.

Gallery

Experience the elegance of Sentiero's architecture through a curated gallery of high-end renderings.

Preferences modal

Granular privacy controls empower users to manage service consent with clarity and confidence.

Floating menu

Floating menu with instant jump links, a dark/light mode switch, and a back-to-top button-always accessible for effortless navigation and a seamless browsing experience.

Light/dark mode

Side-by-side preview of light and dark modes for a consistent, elegant experience in any environment.

Responsive design

The website adapts seamlessly to all screen sizes, ensuring optimal viewing on any device.

---

Conclusion

Developing Sentiero Luxury Villas was an enriching experience that enhanced my expertise in web development, interactive design, and privacy compliance.

Key takeaways include:

• Learning how to develop an interactive masterplan that combines architectural visualization with web interactivity, enabling users to explore detailed property information through intuitive design.
• Gaining familiarity with Leaflet.js for creating interactive maps with features like popups, layer groups, and layers control.
• Leveraging Netlify for hosting static sites with automatic builds and built-in form handling.
• Implementing a custom GDPR-compliant consent system that balances user privacy with seamless user experience.

This project demonstrates my ability to blend technical functionality with aesthetic appeal while addressing regulatory requirements. Explore Sentiero Luxury Villas at sentieroluxuryvillas.cy or connect with me on LinkedIn to discuss how my skills can contribute to your team!