Luxury Hotel Website

This repository contains the code for a luxury hotel booking website. It features a beautiful user interface, a smooth image slider, detailed rooms section, extra services, and much more. The project is built using modern web technologies, including React, Tailwind CSS, and Swiper for sliders.

Live Demo

Check out the live version of the website here: Luxury Hotel Website

Features

• Swiper Image Slider: Includes autoplay, pagination, navigation, and a fade effect for a smooth transition between background images.
• Dynamic Room and Suite Details: Displays various room types and suites with detailed descriptions.
• Hotel Booking System: A responsive hotel booking section allowing users to check availability for their desired dates.
• Extra Services Section: Highlights additional services provided by the hotel.
• Hotel Facilities: A detailed section displaying the hotel’s key facilities.
• Customer Reviews: Displays reviews from past customers.
• Fixed Hero Image: A visually appealing static hero section showcasing the hotel.
• Footer Section: Contains a brand footer and check-in details.

Technologies Used

• React: Frontend framework for building the user interface.
• Tailwind CSS: A utility-first CSS framework used for responsive design and styling.
• Swiper.js: Used for creating the image slider with features like autoplay, pagination, navigation, and fade effects.
• AOS (Animate On Scroll): A library for animating elements as they scroll into view.
• Firebase: (If applicable) Firebase may be used for authentication or hosting.

Installation and Setup

Follow these steps to run the project locally:

1. Clone the repository:

   git clone https://github.com/abssujan/luxury-hotel-v1.git
   cd luxury-hotel-v1
   

2. Install dependencies:: You will need Node.js and npm installed. Run the following command to install all necessary packages:

   npm install
   

3. Install dependencies:: After the installation is complete, you can start the development server:

   npm run dev
   

Project Structure

The project is organized into reusable components:

• NavBar: The navigation bar for the site.
• TitleOne and TitleTwo: Custom components for titles displayed on the home page.
• HotelBooking: Component for handling hotel booking functionality.
• RoomDetails: Displays room and suite information.
• RoomSuites: Contains the Rooms & Suites section.
• ExtraServices: Highlights additional services offered by the hotel.
• FixedHeroImage: A fixed background image component.
• HotelFacilities: Lists various facilities available at the hotel.
• Review: Displays customer reviews.
• CardBox: A card-based UI for additional facilities.
• FooterCheckIn, FooterBrand, and Footer: Various footer sections, including brand information and check-in options.

Future Improvements

• Add authentication for user login and registration using Firebase.
• Implement real-time booking functionality.
• Optimize the site for better performance.
• Add more animations and transitions to improve user engagement.

Contribution

We welcome contributions! Feel free to fork the repository and submit a pull request if you'd like to contribute to the project. Please ensure that your code follows the project's style guide and includes proper documentation.

---

Thank you for visiting and contributing to this project!