A premium, production-ready real estate platform built with Next.js 15, React 19, and TypeScript. Features a luxury aesthetic with glassmorphism effects, smooth animations, and a professional Light/Dark theme system.
- Overview
- Features
- Tech Stack
- Getting Started
- Project Structure
- Design System
- Theme System
- Components
- Development
- Deployment
Future Home Properties is a modern real estate platform designed to showcase premium properties across Lagos, Nigeria, and beyond. The application features a elegant, futuristic UI with glassmorphism effects, smooth Framer Motion animations, and a fully responsive design that works seamlessly across all devices.
The platform targets users looking for luxury homes, apartments, commercial properties, and investment opportunities. The design draws inspiration from premium brands like Apple, Airbnb, Vercel, and luxury real estate platforms.
- Property Listing — Browse properties with advanced filtering, sorting, and search
- Property Details — Comprehensive property pages with image galleries, amenities, and agent contact
- Blog — Professional blog with categories, search, and related posts
- About — Company story, team profiles, mission, and values
- Contact — Contact forms, company information, and social links
- Wishlist — Save favorite properties
- Compare — Compare up to 4 properties side by side
- Global Search — Quick property and article search
- Responsive Design — Perfect experience on mobile, tablet, desktop, and large screens
- Glassmorphism Effects — Frosted glass navigation, cards, and overlays
- Smooth Animations — Framer Motion page transitions and micro-interactions
- Loading Experience — Custom house construction animation sequence
- Theme Toggle — Professional Light/Dark mode with smooth transitions
- Skeleton Loaders — Elegant loading states for all content
- Form Validation — React Hook Form with Zod schemas
| Category | Technology |
|---|---|
| Framework | Next.js 15 App Router |
| React | React 19 |
| Language | TypeScript (strict) |
| Styling | Tailwind CSS v4 |
| State (Client) | Zustand |
| State (Server) | TanStack React Query |
| Forms | React Hook Form + Zod |
| Animations | Framer Motion |
| Icons | Lucide React |
| Notifications | Sonner |
| Fonts | Inter, Playfair Display, JetBrains Mono |
- Node.js 18+
- npm, yarn, or pnpm
# Clone the repository
git clone <repository-url>
cd future_home
# Install dependencies
npm install
# Start development server
npm run devOpen http://localhost:3000 in your browser.
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLintsrc/
├── app/ # Next.js App Router pages
│ ├── layout.tsx # Root layout with providers
│ ├── page.tsx # Home page
│ ├── globals.css # Global styles and theme
│ ├── robots.ts # Robots.txt generation
│ ├── sitemap.ts # Sitemap generation
│ ├── about/ # About page
│ ├── blog/ # Blog listing and [slug] detail
│ ├── contact/ # Contact page
│ ├── properties/ # Property listing and [id] detail
│ └── wishlist/ # Wishlist page
├── components/
│ ├── layout/ # Navbar, Footer, LoadingScreen, etc.
│ ├── property/ # PropertyCard
│ ├── ui/ # Button, Card, Input, Badge, etc.
│ └── blog/ # Blog-specific components (reserved)
├── constants/ # Navigation items, company info, static data
├── hooks/ # Custom React hooks (reserved)
├── lib/ # Utility functions (cn, formatCurrency, etc.)
├── providers/ # Query, Theme, Loading providers
├── schemas/ # Zod validation schemas (reserved)
├── services/ # API services and mock data
├── stores/ # Zustand stores (Theme, UI, Property, Auth)
├── types/ # TypeScript type definitions
└── asset/ # Remote asset configuration
| Shade | Hex | Usage |
|---|---|---|
| 500 | #14b8b8 |
Interactive elements |
| 600 | #0d9494 |
Hover states |
| 700 | #0c7b7b |
Primary buttons, actions |
| 800 | #116363 |
Active states |
| 900 | #135151 |
Dark accents |
| Usage | Font |
|---|---|
| Display/Headings | Playfair Display |
| Body Text | Inter |
| Mono/Code | JetBrains Mono |
| Usage | Value |
|---|---|
| Buttons, inputs | rounded-xl (12px) |
| Cards | rounded-2xl (16px) |
| Modals, containers | rounded-3xl (24px) |
| Variable | Usage |
|---|---|
--shadow-soft |
Cards, buttons |
--shadow-medium |
Hover states |
--shadow-large |
Modals, popups |
--shadow-glow |
Primary button glow |
.glass-card— Frosted glass cards.glass-nav— Frosted glass navigation.glass— General glass effect.glass-strong— Stronger glass effect
Light Mode is the default. The theme persists in localStorage.
The theme toggle is located in the navbar. It features:
- Smooth spring animations
- Glassmorphism styling
- Sun/Moon icons with color transitions
- Instant preview with animated background
// Theme store (Zustand)
const { theme, setTheme, toggleTheme } = useThemeStore();
// theme: "light" | "dark"The application uses next-themes with a Zustand sync provider:
<NextThemesProvider attribute="class" defaultTheme="light">
<ThemeSync>{children}</ThemeSync>
</NextThemesProvider>All components use semantic color tokens that automatically adapt:
- Light mode: White backgrounds, dark text, subtle borders
- Dark mode: Dark backgrounds, light text, subtle borders
| Component | Description |
|---|---|
Button |
7 variants: default, destructive, outline, secondary, ghost, link, glass |
Card |
Header, Title, Description, Content, Footer |
Input |
With label, error, and hint support |
Textarea |
Multi-line input |
Select |
Custom dropdown with keyboard navigation |
Badge |
Status indicators with color variants |
Dialog |
Modal dialog with overlay |
Drawer |
Side panel (left, right, bottom) |
Tabs |
Tab navigation with animated indicator |
Accordion |
Single/multi expand/collapse |
Skeleton |
Loading placeholders |
| Component | Description |
|---|---|
Navbar |
Sticky navigation with glassmorphism, dropdowns, mobile drawer |
Footer |
Modern footer with links, newsletter, social icons |
SearchModal |
Global search with autocomplete |
LoadingScreen |
House construction animation |
FloatingElements |
WhatsApp button, back-to-top |
ThemeSwitcher |
Light/Dark toggle |
| Component | Description |
|---|---|
PropertyCard |
Luxury property card with hover actions |
- Create folder in
src/app/[route]/ - Add
page.tsxwith proper metadata - Use existing layout components
- Follow the design system in
CONSTITUTION.md
- Place in appropriate
components/folder - Follow the component template in
CONSTITUTION.md - Ensure theme support (Light/Dark)
- Add responsive breakpoints
- Include Framer Motion animations where appropriate
- Zustand for client state (theme, UI, property filters)
- TanStack Query for server state (API calls)
- React Hook Form + Zod for forms
Use Tailwind CSS v4 with the defined theme tokens:
// Good — uses theme tokens
<div className="bg-white text-dark-900 border-light-200">
// Bad — hardcoded colors
<div className="bg-[#ffffff] text-[#171717]">For glassmorphism, use the pre-defined classes:
<div className="glass-card rounded-2xl">npm run buildnpm i -g vercel
vercelNo environment variables are required for the current mock data implementation.
- CONSTITUTION.md — Project development standards and rules
- This README — Project overview and setup guide
Private — Future Home Properties
Built with precision and care by the Future Home engineering team.