Arden
a real-estate landing page with a scroll-played hero film, live property search and a booking form
ARDEN is a one-page landing page template for a real-estate agency, shown as a fictional agency called Arden Homes. It opens on a headline over a framed hero film; scrolling opens the frame to full screen and plays the film frame by frame, then a caption rises over it. The property search has Buy, Rent, New developments and Commercial tabs with country, condition, price and size filters plus bedrooms and must-haves; the listings re-sort with an animation, monthly prices show when renting, and the search is kept in the URL so it can be shared. A How it works section pins on desktop and wipes through four steps, each with its own photo and inset card, and stacks on phones. An agents row slides with arrow buttons, and each phone number stays half hidden until it is tapped. The investors section fills its heading in word by word as it scrolls and counts up three figures over bar charts, followed by three investment offers showing entry, IRR and five-year return, each with a downloadable one-page brochure. A booking dialog checks every field inline and confirms the request; there is no backend, so you connect your own form handler. Listings, agents, figures and offers are in src/data.ts. The layout works down to small phones, with 16px form fields and a bottom-sheet dialog, and reduced-motion settings are respected. All photos and the hero film, with a lighter version for phones, are included, and Instrument Sans loads from Google Fonts. Built with TypeScript, HTML and CSS plus GSAP and Lenis, with Vite included.
$26.25 — one-time price, free updates
- A website template
- Plain HTML, CSS and JavaScript · no framework
- Build unlimited client sites with it
Built with Plain JavaScript, CSS, SVG, GSAP, Lenis smooth scroll.
What is in the zip
- app.css
- index.html
- src/data.ts
- src/main.ts
- src/rec.ts
- tsconfig.json
Version history
- v1.0.0, 2026-10-14 — First release. Arden shipped, with the reel recorded from the real page.