Next.js · React · TypeScript · Tailwind CSS · GSAP · Lenis
- 3areas covered
- 4listing statuses
- 6property videos
- Challenge
- A real-estate agent with a large short-video audience needed a website that turns that attention into property enquiries, and that appears when people search for homes in the exact neighbourhoods the agent covers. Social profiles alone could not show listings, build trust in one place or rank in search.
- Solution
- A fast, editorial-style site built around the agent. The hero layers the agent’s portrait over the headline with two floating info cards, then flows into an about section, featured listings, a short-video section, a career timeline and a one-tap WhatsApp contact block.
What I built
- Listings that are easy to run. Every property is one entry with a slug, type (for sale, for rent or commercial), area, price, size, a status badge (featured, new, hot, available) and a photo set. A friendly empty state sends visitors to WhatsApp when nothing is live.
- Video as proof. Three vertical clips from the agent’s social feed play inside the page, with a full videos page behind them, so visitors see the agent at work before they ever message.
- SEO set up once, used everywhere. A single metadata builder gives every page a canonical link, Open Graph and Twitter cards and search-robot rules. A sitemap, a robots file and an llms.txt file help search engines and AI assistants read the site correctly, and the keywords cover the three neighbourhoods and common spellings of the agent’s name.
- Motion with restraint. Smooth scrolling with Lenis, GSAP reveal animations, and a mobile menu that traps focus, closes on Escape and locks page scroll while open.
- One contact path. A single config file holds the phone number and the pre-filled WhatsApp links, so changing the number or the message updates the whole site.