Homestay Landing Page - Copy this Html, Bootstrap Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HomeStay Hub - Your Perfect Stay Awaits</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"> <!-- Add AOS for scroll animations --> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <link rel="stylesheet" href="css/index.css"> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top"> <div class="container"> <a class="navbar-brand" href="#">HomeStay Hub</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"><a class="nav-link" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="#">Explore</a></li> <li class="nav-item"><a class="nav-link" href="#">Host</a></li> <li class="nav-item"><a class="nav-link btn btn-primary text-white px-3">Sign In</a></li> </ul> </div> </div> </nav> <header class="hero-section"> <div class="container h-100"> <div class="row h-100 align-items-center"> <div class="col-lg-6"> <h1 class="display-4 fw-bold">Find Your Perfect Homestay</h1> <p class="lead">Experience authentic local living with our curated homestays worldwide.</p> <div class="search-box p-4 bg-white rounded-3 shadow"> <form class="row g-3"> <div class="col-md-4"> <select id="location" class="form-select"> <option selected>Select Branch</option> <option>Branch 1</option> <option>Branch 2</option> <option>Branch 3</option> </select> </div> <div class="col-md-3"> <input type="date" class="form-control"> </div> <div class="col-md-3"> <select class="form-select"> <option>2 Guests</option> <option>3 Guests</option> <option>4 Guests</option> </select> </div> <div class="col-md-2"> <button class="btn btn-primary w-100">Search</button> </div> </form> </div> </div> </div> </div> </header> <div class="featured-stays py-5" data-aos="fade-up"> <div class="container"> <h2 class="mb-4">Featured Homestays</h2> <div class="row g-4"> <div class="col-md-4"> <div class="card h-100"> <img src="https://images.unsplash.com/photo-1501876725168-00c445821c9e" class="card-img-top" alt="Homestay"> <div class="card-body"> <h5 class="card-title">Luxury Villa</h5> <p class="card-text">Beautiful beachfront villa with private pool</p> <div class="d-flex justify-content-between align-items-center"> <span class="price">$200/night</span> <button class="btn btn-outline-primary">View Details</button> </div> </div> </div> </div> <div class="col-md-4"> <div class="card h-100"> <img src="https://images.unsplash.com/photo-1502672260266-1c1ef2d93688" class="card-img-top" alt="Homestay"> <div class="card-body"> <h5 class="card-title">Mountain Retreat</h5> <p class="card-text">Cozy cabin with stunning mountain views</p> <div class="d-flex justify-content-between align-items-center"> <span class="price">$150/night</span> <button class="btn btn-outline-primary">View Details</button> </div> </div> </div> </div> <div class="col-md-4"> <div class="card h-100"> <img src="https://images.unsplash.com/photo-1464146072230-91cabc968266" class="card-img-top" alt="Homestay"> <div class="card-body"> <h5 class="card-title">Urban Loft</h5> <p class="card-text">Modern city living in the heart of downtown</p> <div class="d-flex justify-content-between align-items-center"> <span class="price">$180/night</span> <button class="btn btn-outline-primary">View Details</button> </div> </div> </div> </div> </div> </div> </div> <div class="testimonials py-5 bg-light" data-aos="fade-up"> <div class="container"> <h2 class="text-center mb-5">What Our Guests Say</h2> <div class="row g-4"> <div class="col-md-4"> <div class="card h-100"> <div class="card-body"> <div class="d-flex align-items-center mb-3"> <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde" class="rounded-circle me-3" alt="Guest" style="width: 50px; height: 50px;"> <div> <h6 class="mb-0">John Doe</h6> <small class="text-muted">October 2023</small> </div> </div> <p class="card-text">"Amazing experience! The villa was exactly as described, and the host was very accommodating."</p> <div class="text-warning"> <i class="bi bi-star-fill"></i> <i class="bi bi-star-fill"></i> <i class="bi bi-star-fill"></i> <i class="bi bi-star-fill"></i> <i class="bi bi-star-fill"></i> </div> </div> </div> </div> <div class="col-md-4"> <div class="card h-100"> <div class="card-body"> <div class="d-flex align-items-center mb-3"> <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" class="rounded-circle me-3" alt="Guest" style="width: 50px; height: 50px;"> <div> <h6 class="mb-0">Jane Smith</h6> <small class="text-muted">September 2023</small> </div> </div> <p class="card-text">"The mountain retreat was perfect for a relaxing getaway. Highly recommend!"</p> <div class="text-warning"> <i class="bi bi-star-fill"></i> <i class="bi bi-star-fill"></i> <i class="bi bi-star-fill"></i> <i class="bi bi-star-fill"></i> <i class="bi bi-star-half"></i> </div> </div> </div> </div> <div class="col-md-4"> <div class="card h-100"> <div class="card-body"> <div class="d-flex align-items-center mb-3"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d" class="rounded-circle me-3" alt="Guest" style="width: 50px; height: 50px;"> <div> <h6 class="mb-0">Alex Johnson</h6> <small class="text-muted">August 2023</small> </div> </div> <p class="card-text">"The urban loft was stylish and comfortable. Great location and amenities!"</p> <div class="text-warning"> <i class="bi bi-star-fill"></i> <i class="bi bi-star-fill"></i> <i class="bi bi-star-fill"></i> <i class="bi bi-star-fill"></i> <i class="bi bi-star-fill"></i> </div> </div> </div> </div> </div> </div> </div> <div class="why-choose-us py-5" data-aos="fade-up"> <div class="container"> <h2 class="text-center mb-5">Why Choose HomeStay Hub?</h2> <div class="row g-4"> <div class="col-md-4 text-center"> <i class="bi bi-house-door fs-1 text-primary mb-3"></i> <h5>Authentic Stays</h5> <p>Experience local culture and hospitality with our curated homestays.</p> </div> <div class="col-md-4 text-center"> <i class="bi bi-shield-check fs-1 text-primary mb-3"></i> <h5>Safe & Secure</h5> <p>Verified hosts and secure payments for peace of mind.</p> </div> <div class="col-md-4 text-center"> <i class="bi bi-headset fs-1 text-primary mb-3"></i> <h5>24/7 Support</h5> <p>Our team is always here to assist you.</p> </div> </div> </div> </div> <div class="cta-section py-5 bg-primary text-white text-center"> <div class="container"> <h2 class="mb-4">Ready to Find A Place To Rest During Your Vacation?</h2> <p class="lead mb-4">Join thousands of happy guests and start your journey today.</p> <a href="#" class="btn btn-light btn-lg">Sign Up Now</a> </div> </div> <footer class="footer py-5 bg-dark text-white"> <div class="container"> <div class="row"> <div class="col-md-4 mb-4"> <h5>HomeStay Hub</h5> <p class="text-muted">Your gateway to authentic local living.</p> </div> <div class="col-md-4 mb-4"> <h5>Quick Links</h5> <ul class="list-unstyled"> <li><a href="#" class="text-white text-decoration-none">Home</a></li> <li><a href="#" class="text-white text-decoration-none">Explore</a></li> <li><a href="#" class="text-white text-decoration-none">Host</a></li> <li><a href="#" class="text-white text-decoration-none">Sign In</a></li> </ul> </div> <div class="col-md-4 mb-4"> <h5>Follow Us</h5> <div class="d-flex gap-3"> <a href="#" class="text-white"><i class="bi bi-facebook fs-4"></i></a> <a href="#" class="text-white"><i class="bi bi-twitter fs-4"></i></a> <a href="#" class="text-white"><i class="bi bi-instagram fs-4"></i></a> <a href="#" class="text-white"><i class="bi bi-linkedin fs-4"></i></a> </div> </div> </div> <hr class="text-muted"> <p class="text-center mb-0">© 2025 HomeStay Hub. All rights reserved.</p> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> <!-- Add this before the closing body tag --> <script> AOS.init(); // Smooth scroll document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); }); // Back to top button const backToTopButton = document.createElement('button'); backToTopButton.innerHTML = '<i class="bi bi-arrow-up"></i>'; backToTopButton.classList.add('btn', 'btn-primary', 'back-to-top'); document.body.appendChild(backToTopButton); window.addEventListener('scroll', () => { if (window.scrollY > 300) { backToTopButton.style.display = 'block'; } else { backToTopButton.style.display = 'none'; } }); backToTopButton.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); </script> </body> </html>I want to add these features: room status (available, booked, cleaning, etc.). following search result 1. **Amenities & Extra Services Management:** - Add/Edit/Delete amenities. - Manage additional services (e.g., airport pickup, breakfast). 1. **FAQs Management:** - Add/Edit/Delete FAQs for customer support. 1. **Reports & Customer Support:** - Report issues regarding service quality. - Live chat support via chatbot or staff. - Customer satisfaction rating system for service improvement.