About the Project: DreamHome is a modern real estate landing page built with Next.js and Tailwind CSS. It showcases premium property listings, services, and amenities in a clean, professional layout — designed to reflect the quality of a real estate brand.
Key Highlights: Fully responsive design with sticky header, mobile sidebar navigation, scrollable property cards, animated amenity grid, and a structured multi-column footer.
- Header — Sticky navigation with top bar and mobile sidebar menu.
- Hero — Welcome section with headline, description, and call-to-action button.
- About — Company overview with image layout and feature highlights.
- Service — Three service cards for buying, renting, and listing properties.
- Property — Horizontally scrollable cards showing featured property listings.
- Features — Amenities grid with icons covering eight premium living features.
- Blog — Latest property insights displayed as scrollable article cards.
- Footer — Multi-column footer with contact details, links, and social icons.
- Sticky Header — Navigation bar sticks to top after scrolling 400px.
- Mobile Sidebar Menu — Slide-in navigation with overlay for small screens.
- Mobile Bottom Nav Bar — Fixed bottom action bar for search, profile, and cart.
- Scrollable Property Cards — Horizontal scroll layout for property and blog sections.
- Hover Animations — Smooth card transitions, image zoom, and color changes on hover.
- Responsive Layout — Optimized for mobile, tablet, and desktop screen sizes.
- Amenities Grid — Eight feature cards with icons, titles, and arrow indicators.
- Custom Fonts — Poppins for headings and Nunito Sans for body text via Next.js fonts.
- Next.js 15 — React framework used for routing, layouts, and image optimization.
- React 19 — Component-based UI with hooks for state and side effects.
- Tailwind CSS 4 — Utility-first CSS framework for all styling and responsiveness.
- Lucide React — Consistent icon library used across all components.
- Google Fonts — Poppins and Nunito Sans loaded via Next.js font optimization.
dream-home/
│
├── public/ # Logos, property images, banners, author avatars, and blog visuals
│
├── src/
│ ├── app/
│ │ ├── layout.jsx # Root layout with fonts and metadata
│ │ ├── page.jsx # Home page importing all sections
│ │ └── globals.css # Tailwind directives and custom styles
│ │
│ └── components/
│ ├── Header.jsx # Top bar, navigation, and mobile menu
│ ├── Hero.jsx # Welcome section with CTA
│ ├── About.jsx # Company overview with features
│ ├── Service.jsx # Service category showcase
│ ├── Property.jsx # Property listing cards
│ ├── Features.jsx # Amenities grid display
│ ├── Blog.jsx # Latest insights section
│ └── Footer.jsx # Site footer with links
│
├── package.json # Dependencies and build scripts
├── tailwind.config.js # Tailwind CSS configuration
├── next.config.js # Next.js configuration
└── README.md # Project documentation
-
Clone the repository:
git clone https://github.com/nawazdevx/dream-home.git
<li>
<strong>Navigate to project folder:</strong>
<pre><code>cd dream-home</code></pre>
</li>
<li>
<strong>Install dependencies:</strong>
<pre><code>npm install</code></pre>
</li>
<li>
<strong>Start development server:</strong>
<pre><code>npm run dev</code></pre>
Then visit the local URL shown in terminal (usually <code>http://localhost:3000</code>)
</li>
<li>
<strong>Build for production:</strong>
<pre><code>npm run build</code></pre>
Production files will be generated in <code>.next/</code> folder
</li>
<li>
<strong>Start production server:</strong>
<pre><code>npm start</code></pre>
Runs the optimized production build locally for testing
</li>
</ol>
License: This project is licensed under the MIT License.
Contact: Connect with me on LinkedIn or visit my Portfolio.
Support: Found this helpful? Give it a ⭐ on GitHub! Thank you.
