Zutra Real Estate — Boutique Luxury Template
Plataforma web cinemática de alta gama para agencias boutique de bienes raíces. Diseñada para storytelling arquitectónico y experiencias de usuario premium, lista para rebranding en minutos.
Construido con
¿Qué incluye?
- Arquitectura modular de 6 categorías (layout, property, map, ui/primitives, ui/composed, sections)
- Theme Studio PRO con motor de armonía de colores matemático (Triádico, Análogo, Split-Complementary)
- Auditoría de accesibilidad WCAG 2.1 AA en tiempo real dentro del theme picker
- Mapas interactivos con Leaflet.js y marcadores personalizados por propiedad
- Galerías de propiedades con carrusel táctil y efectos fade (Swiper.js)
- Motor de persistencia de tema v2 sin parpadeo (zero FOUC) con View Transitions
- SEO & GEO completo: JSON-LD, sitemap automático, llms.txt para rastreadores IA
- Identidad demo lista (Aura Estates) para presentaciones a clientes
- Rebranding instantáneo mediante un único archivo site-config.ts
- Mobile Bottom Sheet UX con soporte iOS Safe Area para el theme picker
- Digital History Engine — roadmap del proyecto via Content Collections
- Lighthouse 100/100 en todas las categorías
Capturas de pantalla
Descripción completa
Zutra Real Estate es una plataforma web cinemática de alta gama creada para agencias boutique de bienes raíces que priorizan el storytelling arquitectónico y las experiencias de usuario premium. A diferencia de los temas genéricos, este template fue diseñado desde cero con una identidad de demo completa — Aura Estates — lista para presentaciones a clientes y reemplazable en minutos.
¿Para quién es este template?
Ideal para agencias de bienes raíces boutique, desarrolladores inmobiliarios de lujo, y estudios de arquitectura que buscan un sitio web de primer nivel sin partir desde cero. También es perfecto para agencias de desarrollo web que quieren entregar proyectos inmobiliarios de alta calidad en tiempo récord.
Arquitectura modular de 6 categorías
El sistema de componentes está organizado en 6 categorías estrictas para máxima escalabilidad:
layout/— Arquitectura global del sitio: Header, Footer, SearchModalproperty/— Elementos especializados para datos de propiedades inmobiliariasmap/— Integraciones de mapas interactivos y gestión de marcadoresui/primitives/— Bloques atómicos reutilizables: Buttons, Badges, Statsui/composed/— Moléculas complejas: LeadForm, PropertyGridsections/— Bloques visuales de página completa: Hero, Philosophy, Featured
Theme Studio PRO — Zutra Picker
El corazón diferenciador del template. Un motor de temas avanzado con:
- Motor de armonía de colores matemático — reglas Split-Complementary, Análogo, Triádico y más
- Auditoría de accesibilidad en vivo — contraste WCAG 2.1 AA calculado en tiempo real entre los colores de marca y el canvas
- Bottom Sheet móvil — arquitectura responsive con soporte de iOS Safe Area para dispositivos móviles
- Persistencia sin parpadeo — script bloqueante inline en BaseLayout elimina el FOUC completamente
- Toggles de producción — habilita/deshabilita el Theme Studio para distribución mediante
site-config.ts
SEO & GEO (Generative Engine Optimization)
- Sitemap automático generado en cada build via
@astrojs/sitemap - llms.txt — manifiesto estructurado para rastreadores LLM (ChatGPT, Claude, Perplexity)
- JSON-LD completo con
@idlinks —Organization›WebSite›RealEstateListing›Place›GeoCoordinates›Offer og:typedinámico — las páginas de detalle usan"product"para compliance con Open Graph Protocol- RAG Citations — biografías de agentes en
<blockquote>/<cite>para atribución como fuente primaria por IAs
Tech Stack
- Astro 6 — zero JS por defecto, arquitectura de islands
- Tailwind CSS v4 — utility-first con inyección de variables
@thememulti-capa - Alpine.js — estados reactivos ligeros para filtros y lógica de formularios
- Leaflet.js — mapas interactivos con branding personalizado para ubicaciones de propiedades
- Swiper.js — carruseles de propiedades fluidos y táctiles con efectos fade
- Lucide — iconografía arquitectónica limpia y consistente
Rendimiento
Lighthouse 100/100 en todas las categorías tras la versión 1.6.0. Imágenes localizadas en src/assets/ para procesamiento WebP/AVIF en build-time. fetchpriority="high" y loading="eager" en todos los elementos hero para LCP óptimo.
Rebranding en minutos
Cambia el nombre de la agencia, logo, colores y datos de contacto editando un solo archivo:
src/site-config.ts
La identidad demo Aura Estates está completamente desacoplada del motor del template — es solo contenido de demostración, no lógica central.