Vale

Sobre Este Template

Vale es una plantilla de real estate de lujo curado para agencias boutique que representan un puñado de propiedades en lugar de un mercado entero. Once rutas cubren el home, un archivo de propiedades y sus fichas individuales con panel de specs de ocho filas, lista de features, galería y CTA de consulta, un índice de barrios con páginas de detalle, un journal, about, servicios, contacto y 404. El hero es una secuencia sticky de 300vh: tres residencias destacadas hacen cross-fade sobre una curva smoothstep ligada al progreso del scroll, cada una con un panel editorial cuyo precio de salida se anima en USD. Más abajo, la sección de barrios se pinnea y hace scroll horizontal con parallax ligado a containerAnimation en cada panel. Tres skins — Parchment & Brass, Midnight Estate y Slate Modern — se cambian desde un control flotante y persisten en localStorage.

Firma

El home abre sobre un escenario sticky de 300vh con tres residencias destacadas. En lugar de un cambio seco, la opacidad de cada capa se calcula con una curva smoothstep contra el valor de progreso de ScrollTrigger, así que las propiedades se disuelven entre sí en ventanas solapadas de 0.28–0.36 y 0.62–0.70 mientras sus imágenes se desplazan en direcciones opuestas. Cuando una capa supera el 80% de opacidad, su panel editorial dispara un tween de GSAP que anima el precio de salida desde cero, formateado en vivo como USD.

Características

• 11 rutas — Inicio, Propiedades, Ficha de propiedad, Barrios, Detalle de barrio, Journal, Post de journal, About, Servicios, Contacto, 404
• Hero sticky de 300vh — tres residencias destacadas hacen cross-fade sobre una curva smoothstep propia impulsada por el progreso de ScrollTrigger con scrub 0.6
• Los precios de salida se animan hasta su valor real con un tween de GSAP formateado en vivo con Intl.NumberFormat USD
• Rail horizontal de barrios pinneado — los paneles se desplazan lateralmente mientras cada imagen escala mediante un ScrollTrigger ligado a containerAnimation
• Revelados de línea con SplitText en el statement de la agencia, el philosophy strip, el testimonio y el CTA final
• Listings destacados con revelados de card en clip-path inset(0 0 100% 0) más parallax con scrub en cada imagen
• 3 colecciones de contenido — 5 propiedades y 3 barrios en JSON tipado, 2 posts de journal en Markdown
• Fichas de propiedad con panel de specs de 8 filas (precio, dormitorios, baños, superficie, tipo, año de construcción, parcela, estado), grilla de features, galería y propiedades relacionadas
• Pills de estado en todo el archivo — disponible, bajo contrato y vendida, controladas por el enum Zod del schema
• View transitions de elemento compartido — la imagen de la card del archivo se transforma en el hero de la propiedad vía transition:name
• 3 skins — Parchment & Brass, Midnight Estate, Slate Modern — desde un switcher flotante, persistidas en localStorage y con grano añadido automáticamente en la skin oscura
• Barra de progreso CSS scroll-driven más un contador de scroll fijo 00–99% en la esquina inferior derecha
• Página de servicios con cuatro bloques narrativos (acquire, represent, invest, manage) y un proceso de cliente por etapas
• Página de contacto con formulario completo — nombre, apellido, email, teléfono opcional, select de área de interés y mensaje, todos con estilo de campo subrayado
• JSON-LD de RealEstateAgent, URLs canónicas, Open Graph, Twitter cards y sitemap conectados desde una sola prop de BaseLayout
• 34 fotografías de propiedades, barrios e interiores incluidas, escala tipográfica fluida con clamp(), TypeScript strict y prefers-reduced-motion respetado

Despliegue