A modern, professional real estate website built with Next.js 15, TypeScript, and Tailwind CSS. This project showcases a complete landing page for "handler" with advanced UI components and responsive design.
##🏠 Features
- Responsive Design: Fully responsive across all devices
- Modern UI/UX: Professional design with smooth animations and transitions
- Component-Based Architecture: Modular, reusable components
- TypeScript: Full type safety throughout the application
- Performance Optimized: Built with Next.js 15 for optimal performance
- Header: Fixed navigation with mobile menu
- Hero Section: Eye-catching hero with property search functionality
- Properties Section: Featured and recent property listings
- About Section: Company story, values, and team information
- Services Section: Comprehensive real estate services
- Contact Section: Contact form and company information
- Footer: Complete footer with links and newsletter signup
Header.tsx- Navigation and brandingHero.tsx- Main hero section with searchPropertyCard.tsx- Reusable property listing cardPropertiesSection.tsx- Property listings displayAboutSection.tsx- Company information and teamServicesSection.tsx- Services showcaseContactSection.tsx- Contact form and informationFooter.tsx- Site footer with links
- Node.js 18+
- npm or yarn
-
Clone the repository
git clone <repository-url> cd handler
-
Install dependencies
npm install # or yarn install -
Run the development server
npm run dev # or yarn dev -
Open your browser Navigate to http://localhost:3000
- Framework: Next.js 15
- Language: TypeScript
- Styling: Tailwind CSS v4
- Fonts: Inter & Playfair Display (Google Fonts)
- Icons: Heroicons (SVG)
- Images: Unsplash (placeholder images)
handler/
├── src/
│ ├── app/
│ │ ├── globals.css
│ │ ├── layout.tsx
│ │ └── page.tsx
│ └── components/
│ ├── Header.tsx
│ ├── Hero.tsx
│ ├── PropertyCard.tsx
│ ├── PropertiesSection.tsx
│ ├── AboutSection.tsx
│ ├── ServicesSection.tsx
│ ├── ContactSection.tsx
│ └── Footer.tsx
├── public/
├── package.json
├── tailwind.config.js
└── README.md
- Primary: Blue (#3B82F6) to Purple (#8B5CF6) gradient
- Secondary: Gray scale for text and backgrounds
- Accent: White and light grays for cards and sections
- Headings: Playfair Display (serif)
- Body: Inter (sans-serif)
- Weights: 300-900 for comprehensive typography scale
- Smooth hover effects on cards and buttons
- Gradient text animations
- Transform effects on interactive elements
- Custom scrollbar styling
The website is fully responsive with breakpoints:
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px
Update the color scheme in tailwind.config.js:
colors: {
blue: { /* your blue shades */ },
purple: { /* your purple shades */ },
gray: { /* your gray shades */ }
}- Update company information in respective components
- Replace placeholder images with actual property photos
- Modify contact information and social media links
- Custom CSS classes available in
globals.css - Component-specific styles in each component file
- Tailwind utility classes for rapid styling
- Push your code to GitHub
- Connect your repository to Vercel
- Deploy automatically
The project can be deployed to any platform that supports Next.js:
- Netlify
- AWS Amplify
- DigitalOcean App Platform
- Railway
This project is licensed under the MIT License.
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
For support or questions:
- Email: [email protected]
- Phone: +1 (555) 123-4567
- Property search functionality
- User authentication
- Property management dashboard
- Virtual tour integration
- Mortgage calculator
- Blog section
- Multi-language support
- Dark mode toggle
- Advanced filtering options
- Property comparison tool
Built with ❤️ for handler