Foresta By The Beach
Sitio web para un proyecto de condominio en Guanacaste, Costa Rica. El elemento central del sitio es un mapa interactivo personalizado con 79 terrenos SVG posicionados individualmente, integrado como componente React nativo en Framer, que muestra el estado y ubicación de cada lote en tiempo real.
El desafío
El cliente necesitaba un sitio web de alto impacto visual para presentar su proyecto inmobiliario a compradores potenciales. El requisito más complejo fue el "masterplan": un mapa interactivo del condominio que mostrara visualmente la distribución de los 79 lotes, su estado de venta y su ubicación relativa (junto al río, zona estándar).
El desafío técnico fue doble: primero, construir el mapa con precisión visual suficiente para que cada lote estuviera correctamente posicionado respecto a los demás y al entorno natural del proyecto. Segundo, integrarlo como un componente funcional dentro de Framer — el constructor visual utilizado para el sitio — sin romper el flujo de diseño ni comprometer el rendimiento.
No existía una biblioteca ni herramienta que resolviera esto directamente: cada uno de los 79 elementos SVG tuvo que ser posicionado manualmente, píxel a píxel, para reproducir fielmente el plano del condominio.
La solución
Se construyó el mapa como un componente React personalizado usando SVG como formato base para los elementos del mapa. Cada lote fue trazado y posicionado individualmente con coordenadas exactas, formando un mapa cohesivo del condominio completo.
El sistema de estados visuales utiliza colores dinámicos para comunicar información clave de cada lote:
- Verde: Lote disponible en zona estándar
- Azul: Lote disponible junto al río (premium)
- Rojo: Lote vendido
Al hacer hover sobre cualquier lote, se muestra un tooltip con información relevante: número de lote, área, precio y estado. Al hacer clic, se abre un modal con la ficha técnica completa del lote en formato PDF.
El componente fue empaquetado e integrado nativamente en Framer como un Code Component, permitiendo al equipo de diseño utilizarlo directamente dentro del editor visual sin necesidad de código adicional.
Resultados
- Mapa interactivo con 79 lotes operativos, con estados dinámicos y fichas PDF integradas.
- Componente React integrado en Framer sin degradación de rendimiento del sitio.
- El sitio fue entregado y aprobado por el cliente en 5 semanas.
El proyecto
Foresta By The Beach es un proyecto de condominio residencial en Guanacaste, Costa Rica, desarrollado por SCG Developers. El encargo fue diseñar y construir el sitio web de presentación del proyecto para atraer compradores potenciales.
El sitio fue construido en Framer — la elección del cliente — con un diseño enfocado en transmitir exclusividad y conexión con el entorno natural del proyecto.
El mapa: el reto real
El elemento más complejo y más valioso del proyecto fue el masterplan interactivo. Los compradores potenciales necesitan entender de un vistazo dónde está cada lote, qué tiene alrededor y si está disponible.
La solución fue construir el mapa desde cero como un componente React con SVG. Cada uno de los 79 lotes es un elemento SVG independiente, posicionado manualmente con coordenadas exactas para reproducir fielmente el plano del condominio. El proceso tomó aproximadamente una semana de trabajo.
El resultado es un mapa que se comporta como una aplicación interactiva: los lotes cambian de color según su estado (disponible, junto al río, vendido), muestran información al hacer hover y abren la ficha técnica en PDF al hacer clic.
Integración en Framer
El mayor desafío técnico no fue construir el mapa en sí, sino integrarlo en Framer como un componente nativo. Framer tiene un sistema de Code Components que permite embeber componentes React directamente en el editor visual, pero requiere que el componente siga ciertas convenciones para funcionar correctamente.
El componente fue empaquetado respetando esas restricciones y quedó disponible en el editor de Framer como cualquier otro elemento del diseño, permitiendo al equipo posicionarlo y ajustarlo sin intervención de código.