Advanced Landing Page - Hounter Real Estate

A modern and responsive real estate landing page built with HTML, CSS (SCSS), and JavaScript. This project showcases property listings, testimonials, and provides a seamless user experience for finding dream homes.

🚀 Features

🏠 Core Features

• Property Search: Advanced search functionality with location-based filtering
• Featured Properties: Showcase of recommended houses, villas, and apartments
• Property Categories: Filter by House, Villa, and Apartment types
• Interactive Property Cards: Hover effects and detailed property information
• Property Tours: Virtual tour section with detailed house specifications

🎨 User Interface

• Responsive Design: Fully responsive across all device sizes
• Modern UI/UX: Clean, modern design with smooth animations
• Typography Animation: Dynamic typewriter effect for hero text
• Interactive Elements: Hover effects, smooth scrolling, and engaging animations
• Professional Layout: Grid-based layout with beautiful spacing

📱 Interactive Components

• Image Sliders: Property showcase with navigation controls
• Testimonial Carousel: Customer reviews with rating system
• Newsletter Subscription: Email subscription with validation
• Contact Forms: Multi-step contact form with validation
• Cookie Banner: GDPR compliant cookie notification

🔧 Additional Features

• Partnership Showcase: Display of partner company logos
• Statistics Display: Live stats showing success metrics
• Article Section: Real estate tips and guides
• Social Media Integration: Links to social platforms
• SEO Optimized: Proper meta tags and semantic HTML

🛠️ Technologies Used

• HTML5: Semantic markup
• SCSS/CSS3: Modern styling with variables and mixins
• JavaScript (ES6+): Interactive functionality
• Vite: Fast build tool and development server
• Node-SASS: CSS preprocessing
• Typed.js: Typewriter animation effects
• GSAP: Animation library
• RemixIcon: Icon library

📋 Prerequisites

Before running this project, make sure you have the following installed:

• Node.js (version 14 or higher)
• npm (comes with Node.js)

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/rmandalgrid/Advanced-Landing-Page.git
cd Advanced-Landing-Page

2. Install Dependencies

npm install

3. Development Server

To start the development server with hot reloading:

npm run dev

The application will be available at http://localhost:5173

4. SCSS Compilation

To compile SCSS files and watch for changes:

npm run scss

5. Build for Production

To create a production build:

npm run build

6. Preview Production Build

To preview the production build locally:

npm run dev-server

📁 Project Structure

Advanced-Landing-Page/
├── index.html                 # Main HTML file
├── package.json              # Project dependencies and scripts
├── src/
│   ├── js/
│   │   └── index.js          # Main JavaScript file
│   ├── sass/
│   │   ├── main.scss         # Main SCSS file
│   │   ├── _variables.scss   # SCSS variables
│   │   ├── _base.scss        # Base styles
│   │   ├── _layout.scss      # Layout styles
│   │   ├── _utilities.scss   # Utility classes
│   │   ├── _animations.scss  # Animation styles
│   │   └── components/       # Component-specific styles
│   │       ├── _navbar.scss
│   │       ├── _header_section.scss
│   │       ├── _house_section.scss
│   │       ├── _tour_section.scss
│   │       ├── _testimonials_section.scss
│   │       ├── _find-more_section.scss
│   │       ├── _subscribe_section.scss
│   │       ├── _form_section.scss
│   │       ├── _footer_section.scss
│   │       └── _cookie_banner.scss
│   └── css/                  # Compiled CSS files
└── public/
    ├── images/               # Image assets
    ├── icons/                # Icon assets
    └── backgrounds/          # Background images

🎯 Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run dev-server	Preview production build
npm run scss	Compile SCSS and watch for changes
npm run devserver	Start live server

🌟 Key Sections

1. Header Section

• Navigation menu with smooth scrolling
• Hero section with typewriter animation
• Property search functionality
• Partnership logos display

2. Featured Properties

• Property cards with hover effects
• Category filtering (House, Villa, Apartment)
• Carousel navigation
• Property details and pricing

3. Property Tours

• Virtual tour showcase
• Detailed property specifications
• Agent contact information
• Interactive property images

4. Testimonials

• Customer review carousel
• Rating system
• User avatars and information
• Smooth slide transitions

5. Articles Section

• Real estate tips and guides
• Article previews with images
• Author information
• Read time estimates

6. Newsletter Subscription

• Email subscription form
• Validation and feedback
• Beautiful background design

7. Contact Form

• Multi-field contact form
• Form validation
• Character counter
• Privacy policy checkbox

8. Footer

• Company information
• Social media links
• Contact details
• Site navigation

🔧 Customization

Colors and Styling

• Modify src/sass/_variables.scss to change colors, fonts, and spacing
• Update component styles in src/sass/components/

Content

• Update property information in index.html
• Replace images in public/images/ and public/icons/
• Modify testimonials and articles content

Animations

• Customize animations in src/sass/_animations.scss
• Modify JavaScript animations in src/js/index.js

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

👨‍💻 Author

Roshni Mandal