Hotel Details Page - Copy this React, Tailwind Component to your project
Design-an-outstanding-and-highly-attractive-hotel-details-page-for-a-hotel-booking-platform.-The-page-should-focus-on-user-engagement-and-showcase-all-the-essential-details-about-a-specific-hotel.-The-design-should-be-clean,-modern,-and-professional,-with-a-layout-optimized-for-both-desktop-and-mobile-users.-Page-Sections:-1.-Hotel-Overview-Section:-At-the-top-of-the-page,-prominently-display-the-Hotel-Name-in-a-bold,-stylish-font.-Include-the-Hotel-Address-with-a-location-icon-next-to-it-for-clarity.-Add-a-large,-high-quality-Hero-Image-or-Slideshow-of-the-hotel-to-visually-captivate-the-user.-Display-key-information,-such-as-the-Number-of-Rooms,-Price-Range,-and-Rating,-as-icon-text-pairs-below-the-hero-image-for-quick-reference.-2.-Description-Section:-Provide-a-detailed-Hotel-Description-in-a-clean,-readable-format.-Use-bullet-points-for-key-highlights,-such-as-amenities-(e.g.,-free-Wi-Fi,-swimming-pool,-parking).-Ensure-the-text-has-enough-spacing-for-readability-and-integrates-subtle-dividers-to-maintain-structure.-3.-Verified-User-Reviews-Section:-Showcase-Verified-Reviews-in-a-dedicated-section-with-a-title-like-"What-Guests-Are-Saying."-Use-a-card-layout-for-reviews,-with:-User-Name-and-Profile-Picture.-Rating-Stars-and-Review-Date-at-the-top-of-each-card.-The-Review-Text-should-be-displayed-below,-with-a-"Read-More"-link-for-longer-reviews.-Include-an-average-Overall-Rating-at-the-top-of-the-section-for-quick-reference.-4.-Call-to-Action-(CTA)-Section:-Add-a-sticky-or-prominently-positioned-"Book-Now"-button-with-a-standout-design,-such-as-a-gradient-or-glowing-effect.-Provide-a-secondary-"Get-Directions"-button-that-links-to-Google-Maps-with-pre-filled-latitude-and-longitude-values.-5.-Map-Location-Section:-Embed-a-Map-Viewer-(using-Leaflet-or-Google-Maps)-showing-the-exact-location-of-the-hotel-with-a-pin.-Include-zoom-and-navigation-controls-for-an-interactive-experience.-Design-Guidelines:-Use-rounded-card-components-for-reviews-and-other-sections-for-a-modern-look.-Incorporate-soft-shadows-and-a-consistent-color-palette-(e.g.,-a-combination-of-white,-blue,-and-soft-grays)-to-create-depth-and-focus.-Utilize-subtle-animations-for-transitions-(e.g.,-fading-in-reviews-or-enlarging-buttons-on-hover)-to-enhance-interactivity.-Ensure-the-layout-is-fully-responsive,-with-a-collapsible-sidebar-or-stackable-elements-for-mobile-devices.-Add-visual-separators-between-sections,-such-as-thin-dividers-or-background-color-shifts.-Additional-Features:-Include-a-Ratings-Summary-Chart-(e.g.,-a-bar-chart-showing-the-percentage-of-users-who-rated-5,-4,-3-stars,-etc.).-Add-a-"Share-This-Hotel"-section-with-social-media-icons-for-easy-sharing.-Provide-a-FAQ-Section-at-the-bottom-for-common-queries-like-cancellation-policies-and-check-in-times.-The-final-design-should-exude-sophistication-and-user-friendliness,-ensuring-users-are-captivated-by-the-page-while-finding-all-the-necessary-information-effortlessly.-You-said:-now-i-want-that-there-is-an-admin-template-for-user-also-and-and-for-hotel-admin-also-give-seaprate-separate-prompts-ChatGPT-said:-ChatGPT-Prompt-for-User-Admin-Template-Design-a-modern-and-user-friendly-User-Dashboard-template-for-a-hotel-booking-platform.-The-dashboard-should-be-tailored-for-individual-users-who-have-registered-on-the-platform,-allowing-them-to-manage-their-bookings,-reviews,-and-preferences.-The-layout-should-prioritize-usability,-clarity,-and-aesthetic-appeal.-Page-Sections:-Dashboard-Header:-Include-a-welcoming-message,-such-as-"Welcome,-[User-Name]!"-Display-a-Profile-Picture-and-quick-links-to-settings-and-logout.-Add-a-Notification-Bell-Icon-for-alerts-about-booking-confirmations-or-updates.-Bookings-Section:-Show-a-list-of-Current-Bookings-in-a-card-based-format-with:-Hotel-Name,-Address,-and-Check-In/Check-Out-Dates.-A-Status-Tag-(e.g.,-"Confirmed,"-"Pending,"-or-"Cancelled").-A-"View-Details"-Button-for-more-information.-Include-a-separate-Booking-History-tab-for-past-reservations.-Reviews-Section:-Provide-a-space-for-users-to-view-and-edit-their-submitted-reviews.-Include-a-button-labeled-"Write-a-Review"-that-opens-a-modal-for-submitting-a-review.-Saved-Hotels-Section:-Display-a-grid-of-Favorited-Hotels,-each-with:-Hotel-Name-and-a-small-thumbnail.-A-"Remove-from-Favorites"-Button.-Account-Settings-Section:-Allow-users-to-update-their-Personal-Information-(e.g.,-name,-email,-phone-number).-Add-a-section-for-Password-Management-with-fields-for-current-and-new-passwords.-Include-options-to-toggle-Notification-Preferences-(e.g.,-email-alerts,-SMS).-Design-Guidelines:-Use-a-two-column-layout-with-a-collapsible-sidebar-for-navigation-(e.g.,-links-to-Dashboard,-Bookings,-Reviews,-Settings).-Apply-a-minimalist-color-scheme-with-subtle-accents-to-highlight-interactive-elements.-Incorporate-icons-alongside-text-for-intuitive-navigation-(e.g.,-suitcase-icon-for-bookings,-star-icon-for-reviews).-Ensure-all-elements-are-mobile-responsive,-with-collapsible-cards-and-reflowed-sections-on-smaller-screens.
