A high-end real estate landing page showcasing luxury apartments with a Framer Motion image gallery, location-based filtering, and interactive Leaflet.js maps.
Real estate platforms need to make an immediate visual impression and help users narrow down properties by location and price without unnecessary friction or page loads.
Built a Next.js page with smooth Framer Motion transitions on the gallery carousel, client-side location and price filters that instantly update the visible listings, and Leaflet.js embedded maps pinned to each property for spatial context.
Next.js App Router for routing and page structure. Framer Motion's AnimatePresence handles image gallery transitions (fade + slide) with exit animations for a premium feel. Location and price filters are managed with React useState, deriving filtered listings from a static data array on every state change — no re-fetch needed. Leaflet.js renders an interactive map tile layer with a custom marker for each listing's coordinates.
None — fully static client-side application.
None — listing data is a static JSON array. Future versions will integrate a real-estate API.