Demo Luxury Real Estate by D2D

A premium single-page real estate landing website for a luxury housing project. It is designed to present the brand, house types, project atmosphere, location advantages, promotions, and appointment booking, while also collecting sales leads and offering a simple admin dashboard.

Hero

The main first-screen section that introduces the project with a luxury visual, key selling points, call-to-action buttons, and a lead registration form.

StatBar & HighlightSection

A quick credibility strip showing headline project numbers such as booking rate, awards, resident families, and security level.

A project highlight section focusing on lifestyle and functional benefits like smart home support, security, EV readiness, and premium facilities.

MortgageCalculator

An interactive payment estimator that helps users calculate home price, down payment, interest, loan term, and estimated monthly payment.

UnitsSection

A section presenting the master plan and available house models, including positioning, house size, bedroom/bathroom counts, and starting prices.

GallerySection

A visual gallery that showcases curated project spaces such as the living area, dining area, clubhouse, and master bedroom.

LocationSection

A location-focused section explaining nearby landmarks and transport convenience, supported by an embedded map.

AppointmentSection

A visit-booking section where interested buyers can schedule a project tour by submitting contact details, date, time, and number of visitors.

Promotion Section

A campaign-focused section highlighting limited-time offers and special booking benefits to encourage faster conversion.

Footer

A closing section containing brand recap, contact information, operating hours, social placeholders, and an email subscription field.

Click here to visit https://d2d-real-estate-luxury-demo.vercel.app/

Tech stack

• Frontend: React 19 + TypeScript

• Build tool: Vite 6

• Styling: Tailwind CSS 4

• Animation: Framer Motion และ motion

• Icons: lucide-react

• Backend entry/server: Express ผ่าน server.ts

• Database / Auth: Firebase โดยใช้ Firestore และ Firebase Auth

• Form/data handling: ฟอร์มใน React state โดย submit เข้า Firestore

• Utility libs: clsx, tailwind-merge, date-fns