A modern, production-quality real estate website built with Next.js 14, TypeScript, Framer Motion, and Vanilla CSS. Featuring a premium dark navy & gold design system, interactive AI chat, property finder quiz, and 11+ innovative UX features.
| Page | Description |
|---|---|
| Home | Hero slideshow, search bar, featured properties, services, stats, neighborhoods, testimonials, CTA |
| Properties | Search, filters (type/status/bedrooms), sort, grid/list toggle |
| Property Detail | Image gallery, tabbed content, mortgage calculator, agent contact form, similar properties |
| About | Company story, core values, leadership team, timeline milestones |
| Contact | Contact form, office info, Google Maps embed |
| Feature | Description |
|---|---|
| ⌨️ Typewriter Hero | Rotating text animation — "Dream Home → Perfect Villa → Luxury Condo → Ideal Space" |
| ✨ Floating Particles | Ambient gold particles in the hero section |
| 📊 Scroll Progress | Gold gradient progress bar at the top |
| 💬 AI Chat Widget | Floating chatbot with quick-reply suggestions & smart responses |
| 🧩 Property Finder Quiz | 5-step interactive questionnaire with personalized recommendations |
| 🌙 Dark/Light Mode | Theme toggle with smooth transition & localStorage persistence |
| 🔮 Cursor Glow | Subtle gold radial glow follows your mouse |
| 📰 Live Ticker | Infinite scrolling marquee with real-time listing updates |
| ⬆️ Back-to-Top | Animated scroll-to-top button |
| 🎬 Page Transitions | Smooth fade-up entry animations |
| 📈 Animated Counters | Stats that count up when scrolled into view |
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Vanilla CSS with custom design system
- Animations: Framer Motion
- Carousel: Swiper.js
- Icons: React Icons (HeroIcons, BoxIcons, FontAwesome)
| Token | Value |
|---|---|
| Primary | #0a1628 (Dark Navy) |
| Accent | #c8a55a (Gold) |
| Headings | Playfair Display |
| Body | Inter |
| Effects | Glassmorphism, parallax, hover zoom |
# Clone the repo
git clone https://github.com/Sanjaykumar-2005/RealEstate_App.git
cd RealEstate_App
# Install dependencies
npm install
# Start development server
npm run devOpen http://localhost:3000 to view the website.
src/
├── app/
│ ├── page.tsx # Home page
│ ├── layout.tsx # Root layout + global widgets
│ ├── globals.css # Design system + dark mode
│ ├── properties/
│ │ ├── page.tsx # Properties listing
│ │ └── [id]/page.tsx # Property detail
│ ├── about/page.tsx # About page
│ └── contact/page.tsx # Contact page
├── components/
│ ├── Navbar/ # Sticky navigation
│ ├── Hero/ # Typewriter + slideshow
│ ├── PropertyCard/ # Reusable property card
│ ├── FeaturedProperties/ # Featured grid section
│ ├── Services/ # Buy/Sell/Rent cards
│ ├── Stats/ # Animated counters
│ ├── Testimonials/ # Swiper carousel
│ ├── Neighborhoods/ # Area cards grid
│ ├── PropertyQuiz/ # Interactive finder quiz
│ ├── FloatingChat/ # AI chatbot widget
│ ├── ThemeToggle/ # Dark/light mode
│ ├── ScrollProgress/ # Progress bar
│ ├── Ticker/ # News marquee
│ ├── CursorGlow/ # Mouse follow effect
│ ├── BackToTop/ # Scroll-to-top
│ ├── CTA/ # Call-to-action
│ └── Footer/ # Site footer
└── data/
├── properties.ts # 12 mock properties
├── testimonials.ts # Client reviews
└── neighborhoods.ts # Area data
This project is open source and available under the MIT License.
Built with ❤️ by Sanjaykumar