Update src/App.tsx

This commit is contained in:
2026-05-17 07:46:10 +00:00
parent 9b6dd0fbe1
commit b4e180971f

View File

@@ -1,66 +1,69 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarDropdown from "@/components/ui/NavbarDropdown";
import HeroSplitMediaGrid from "@/components/sections/hero/HeroSplitMediaGrid";
import AboutTextSplit from "@/components/sections/about/AboutTextSplit";
import FeaturesMediaCarousel from "@/components/sections/features/FeaturesMediaCarousel";
import ProductMediaCards from "@/components/sections/product/ProductMediaCards";
import TestimonialRatingCards from "@/components/sections/testimonial/TestimonialRatingCards";
import React from "react";
import { ThemeProvider } from "@/providers/ThemeProvider/ThemeProvider";
import NavbarFloating from "@/components/ui/NavbarFloating";
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
import AboutFeaturesSplit from "@/components/sections/about/AboutFeaturesSplit";
import FeaturesDetailedSteps from "@/components/sections/features/FeaturesDetailedSteps";
import ProductQuantityCards from "@/components/sections/product/ProductQuantityCards";
import TestimonialAvatarCard from "@/components/sections/testimonial/TestimonialAvatarCard";
import SocialProofMarquee from "@/components/sections/social-proof/SocialProofMarquee";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import FaqSimple from "@/components/sections/faq/FaqSimple";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import FooterBasic from "@/components/sections/footer/FooterBasic";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="outline"
defaultTextAnimation="slide-up"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="comfortable"
background="none"
cardStyle="inset"
primaryButtonStyle="flat"
defaultButtonVariant="secondary"
defaultTextAnimation="slide-in"
borderRadius="soft"
contentWidth="compact"
sizing="default"
background="solid"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="solid"
headingFontWeight="bold"
>
<div
id="nav"
data-section="nav"
data-webild-component="NavbarDropdown"
data-webild-component-path="@/components/ui/NavbarDropdown"
data-webild-component="NavbarFloating"
data-webild-component-path="@/components/ui/NavbarFloating"
>
<NavbarDropdown
logo="The Grandeur Hotel"
<NavbarFloating
logo="The Grand Haven Hotel"
navItems={[
{ name: "Home", href: "#hero" },
{ name: "About Us", href: "#about" },
{ name: "Rooms & Suites", href: "#accommodations" },
{ name: "Amenities", href: "#amenities" },
{ name: "Reviews", href: "#reviews" },
{ name: "About", href: "#about" },
{ name: "Amenities", href: "#features" },
{ name: "Rooms", href: "#rooms" },
{ name: "Reviews", href: "#testimonials" },
{ name: "Contact", href: "#contact" }
]}
ctaButton={{ text: "Book Now", href: "#accommodations" }}
ctaButton={{ text: "Book Now", href: "#contact" }}
/>
</div>
<div
id="hero"
data-section="hero"
data-webild-component="HeroSplitMediaGrid"
data-webild-component-path="@/components/sections/hero/HeroSplitMediaGrid"
data-webild-component="HeroBillboardCarousel"
data-webild-component-path="@/components/sections/hero/HeroBillboardCarousel"
>
<HeroSplitMediaGrid
tag="Welcome to Luxury"
title="Experience Unmatched Elegance at The Grandeur"
description="Discover a world of sophisticated comfort, exquisite dining, and personalized service, tailored for an unforgettable escape."
primaryButton={{ text: "Book Your Stay", href: "#accommodations" }}
secondaryButton={{ text: "Explore Our Hotel", href: "#about" }}
<HeroBillboardCarousel
tag="Welcome to Paradise"
title="Experience Unrivaled Luxury at The Grand Haven"
description="Discover a sanctuary of elegance and comfort, where every stay is a journey of refined indulgence and impeccable service."
primaryButton={{ text: "Explore Rooms", href: "#rooms" }}
secondaryButton={{ text: "Book Your Stay", href: "#contact" }}
items={[
{ imageSrc: "http://img.b2bpic.net/free-photo/young-girl-two-her-multiracial-male-friends-relaxing-sunbeds-near-swimming-pool-girl-wearing-white-swimwear-sunglasses_1157-49689.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/hallway-modern-style_1127-3391.jpg" }
{ imageSrc: "http://img.b2bpic.net/free-photo/architecture_1122-1804.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/boston-public-library_649448-622.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/silhouette-woman-walking-water-surface-infinity-pool-expensive-rich-luxury-villa-mountain-with-sea-view_343596-2993.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/appetizer-served-with-cucumber-sauce-wine_140725-7763.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/mortar-pestle-near-spa-stuff_23-2147809212.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/asian-girl-dancing-nightclub-feeling-funky-dance-floor-enjoying-night-out-group-friends-having-fun-club-partying-spotlights-disco-music-tripod-shot_482257-61907.jpg" }
]}
/>
</div>
@@ -68,107 +71,94 @@ export default function LandingPage() {
<div
id="about"
data-section="about"
data-webild-component="AboutTextSplit"
data-webild-component-path="@/components/sections/about/AboutTextSplit"
data-webild-component="AboutFeaturesSplit"
data-webild-component-path="@/components/sections/about/AboutFeaturesSplit"
>
<AboutTextSplit
title="About The Grandeur Hotel"
descriptions={[
"Nestled in the heart of the city, The Grandeur Hotel has been a beacon of luxury and hospitality for decades. Our commitment to excellence is reflected in every detail, from our meticulously designed rooms to our unparalleled guest services. We pride ourselves on creating an ambiance that combines classic charm with modern amenities, ensuring a stay that is both comfortable and memorable.", "Our philosophy centers around providing a truly bespoke experience. Whether you're here for a romantic getaway, a business retreat, or a family vacation, our dedicated team is on hand to cater to your every need. Indulge in our world-class facilities, savor gourmet cuisine, and discover the true meaning of refined living at The Grandeur."
<AboutFeaturesSplit
tag="Our Story"
title="A Legacy of Timeless Hospitality"
description="The Grand Haven Hotel seamlessly blends classic elegance with contemporary luxury, offering a bespoke experience for discerning travelers. Our commitment to impeccable service and exquisite amenities ensures every moment of your stay is truly unforgettable."
items={[
{ icon: "Building", title: "Elegant Suites", description: "Spacious and beautifully appointed suites designed for ultimate comfort and sophistication." },
{ icon: "Utensils", title: "Gourmet Dining", description: "Indulge in culinary masterpieces crafted by world-renowned chefs at our signature restaurant." },
{ icon: "Sparkles", title: "World-Class Spa", description: "Rejuvenate your senses with bespoke treatments and serene relaxation at our luxurious spa." }
]}
primaryButton={{ text: "Our Story", href: "#" }}
secondaryButton={{ text: "Virtual Tour", href: "#" }}
imageSrc="http://img.b2bpic.net/free-photo/empty-therapist-office-with-modern-furniture-decorations_482257-108008.jpg"
/>
</div>
<div
id="amenities"
data-section="amenities"
data-webild-component="FeaturesMediaCarousel"
data-webild-component-path="@/components/sections/features/FeaturesMediaCarousel"
id="features"
data-section="features"
data-webild-component="FeaturesDetailedSteps"
data-webild-component-path="@/components/sections/features/FeaturesDetailedSteps"
>
<FeaturesMediaCarousel
tag="Hotel Amenities"
<FeaturesDetailedSteps
tag="Amenities"
title="Indulge in Premium Comfort & Service"
description="From serene spa treatments to exquisite dining, every facility at The Grandeur is designed to elevate your stay."
items={[
description="Every detail at The Grand Haven Hotel is meticulously crafted to elevate your stay. Discover our curated services and facilities designed for your ultimate relaxation and convenience."
steps={[
{
title: "Luxury Spa & Wellness", description: "Rejuvenate your senses with bespoke treatments and therapies in our tranquil spa.", buttonIcon: "Sparkles", buttonHref: "#", imageSrc: "http://img.b2bpic.net/free-photo/back-view-girl-posing-bathing-suit_23-2148345663.jpg"
tag: "Rejuvenate", title: "Serene Spa & Wellness", subtitle: "A sanctuary for mind and body.", description: "Unwind with personalized spa treatments, modern fitness facilities, and tranquil relaxation zones.", imageSrc: "http://img.b2bpic.net/free-photo/spa-equipments-with-soap-cotton-flower_23-2147844979.jpg"
},
{
title: "Gourmet Dining", description: "Experience culinary artistry with exquisite dishes crafted by our award-winning chefs.", buttonIcon: "Utensils", buttonHref: "#", imageSrc: "http://img.b2bpic.net/free-photo/professional-chef-preparing-food-kitchen_23-2149728018.jpg"
tag: "Savor", title: "Exquisite Culinary Journey", subtitle: "Taste the difference of fine dining.", description: "From sophisticated breakfast to gourmet dinners, our chefs promise an unforgettable gastronomic experience.", imageSrc: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081860.jpg"
},
{
title: "State-of-the-Art Fitness", description: "Maintain your routine in our modern gym, equipped with the latest exercise technology.", buttonIcon: "Dumbbell", buttonHref: "#", imageSrc: "http://img.b2bpic.net/free-photo/side-view-girl-learning-boxing_23-2150400004.jpg"
tag: "Assist", title: "Personalized Concierge", subtitle: "Your wish is our command.", description: "Our dedicated concierge team is available 24/7 to cater to your needs, from reservations to local excursions.", imageSrc: "http://img.b2bpic.net/free-photo/professional-women-stylish-suit-office-with-tablet-device_23-2150167803.jpg"
}
]}
/>
</div>
<div
id="accommodations"
data-section="accommodations"
data-webild-component="ProductMediaCards"
data-webild-component-path="@/components/sections/product/ProductMediaCards"
id="rooms"
data-section="rooms"
data-webild-component="ProductQuantityCards"
data-webild-component-path="@/components/sections/product/ProductQuantityCards"
>
<ProductMediaCards
tag="Our Accommodations"
title="Luxurious Rooms & Suites"
description="Choose from our exquisite collection of rooms and suites, each meticulously designed for ultimate comfort and sophistication."
<ProductQuantityCards
tag="Accommodations"
title="Choose Your Perfect Retreat"
description="From lavish suites to cozy rooms, each space at The Grand Haven is meticulously designed with comfort, style, and your utmost relaxation in mind. Find your ideal sanctuary."
products={[
{
name: "Deluxe Room", price: "From $350/night", imageSrc: "http://img.b2bpic.net/free-photo/asian-woman-enjoying-with-breakfast-bed_74190-9856.jpg"
name: "Deluxe Room", price: "$350/night", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-beautiful-comtemporary-luxury-bedroom-suite-hotel-with-tv_105762-2058.jpg", onAddToCart: (quantity) => console.log('Add to cart Deluxe Room', quantity)
},
{
name: "Executive Suite", price: "From $580/night", imageSrc: "http://img.b2bpic.net/free-photo/bedroom-with-bed-chair-front-sliding-glass-door_1340-25294.jpg"
name: "Executive Suite", price: "$550/night", imageSrc: "http://img.b2bpic.net/free-photo/businessmen-suit-taking-notes-visit-international-headquarters-shareholders-meeting-corporate-ceo-attendance-executive-associate-doing-last-minute-changes-speech_482257-72949.jpg", onAddToCart: (quantity) => console.log('Add to cart Executive Suite', quantity)
},
{
name: "Grand Suite", price: "From $900/night", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-luxury-comfortable-white-pillow-bed-decoration-bedroom_74190-8670.jpg"
name: "Premium Suite", price: "$800/night", imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-couple-playing-with-their-baby-bedroom_23-2147923003.jpg", onAddToCart: (quantity) => console.log('Add to cart Premium Suite', quantity)
},
{
name: "Family Suite", price: "From $620/night", imageSrc: "http://img.b2bpic.net/free-photo/nature-holiday-travel-relaxation-resort_1203-5032.jpg"
name: "Family Suite", price: "$700/night", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-talking-her-smartphone-hotel-room_23-2149304122.jpg", onAddToCart: (quantity) => console.log('Add to cart Family Suite', quantity)
},
{
name: "Room with Balcony", price: "From $420/night", imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-fit-woman-with-abs-blue-jeans-red-top_343596-3136.jpg"
name: "Accessible Room", price: "$380/night", imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-wheelchair-looking-his-dog-while-working-laptop-home_637285-3026.jpg", onAddToCart: (quantity) => console.log('Add to cart Accessible Room', quantity)
},
{
name: "Penthouse", price: "From $1500/night", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-going-up-stairs-walking-down-city_176420-4026.jpg"
name: "The Penthouse", price: "$1200/night", imageSrc: "http://img.b2bpic.net/free-photo/pool-with-city-background_1203-692.jpg", onAddToCart: (quantity) => console.log('Add to cart The Penthouse', quantity)
}
]}
/>
</div>
<div
id="reviews"
data-section="reviews"
data-webild-component="TestimonialRatingCards"
data-webild-component-path="@/components/sections/testimonial/TestimonialRatingCards"
id="testimonials"
data-section="testimonials"
data-webild-component="TestimonialAvatarCard"
data-webild-component-path="@/components/sections/testimonial/TestimonialAvatarCard"
>
<TestimonialRatingCards
tag="Guest Testimonials"
<TestimonialAvatarCard
tag="Guest Reviews"
title="What Our Valued Guests Say"
description="Hear from those who've experienced the unparalleled hospitality and charm of The Grandeur Hotel."
testimonials={[
{
name: "Sarah J.", role: "Frequent Traveler", quote: "The Grandeur Hotel exceeded all my expectations. The service was impeccable, and the room was a sanctuary of comfort.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/stylish-background-person-brunette-shirt_1157-3873.jpg"
},
{
name: "Michael C.", role: "Business Executive", quote: "A truly five-star experience. The amenities are top-notch, and the staff anticipates your every need. Highly recommended.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/caucasian-woman-with-large-pink-suitcase-vacation-tropical-country_343596-3045.jpg"
},
{
name: "Emily R.", role: "Leisure Guest", quote: "Our romantic getaway was made perfect by The Grandeur. The dining was exquisite, and the ambiance truly luxurious.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-couple-spend-time-home_1157-30977.jpg"
},
{
name: "David K.", role: "Family Vacationer", quote: "Family-friendly yet incredibly elegant. The kids loved the pool, and we appreciated the serene atmosphere.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/girls-rising-hands-playing-with-pillows-summer-party-outdoors_8353-12211.jpg"
},
{
name: "Jessica L.", role: "Event Planner", quote: "Hosted our corporate event here, and everything ran flawlessly. The team was exceptional, and the venue stunning.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/mature-couple-looking-tablet-bed_23-2148404436.jpg"
}
avatars={[
{ name: "Alice J.", imageSrc: "http://img.b2bpic.net/free-photo/young-co-worker-spending-time-office_23-2149328341.jpg" },
{ name: "Bob K.", imageSrc: "http://img.b2bpic.net/free-photo/successful-senior-businessman-standing-window_1262-3120.jpg" },
{ name: "Carol L.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-corporate-woman-looks-dreamy-smiles-stands-outside-street-leans-her-head-hands_1258-193990.jpg" },
{ name: "David M.", imageSrc: "http://img.b2bpic.net/free-photo/attractive-cheerful-african-american-girl-cozy-sweater-happily-looking-camera-blue-background-happy-expression_574295-2850.jpg" },
{ name: "Eve N.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-smiling_23-2148673423.jpg" }
]}
/>
</div>
@@ -180,11 +170,11 @@ export default function LandingPage() {
data-webild-component-path="@/components/sections/social-proof/SocialProofMarquee"
>
<SocialProofMarquee
tag="Recognized Excellence"
title="Trusted by Experts, Adored by Guests"
description="Proudly acknowledged by leading travel organizations and industry authorities for our commitment to luxury and service."
tag="Accolades"
title="Recognized Excellence in Hospitality"
description="Proudly acclaimed by leading travel publications and guest experiences worldwide. Our commitment to unparalleled service has earned us numerous distinctions."
names={[
"Luxury Travel Magazine", "World's Best Hotels", "Global Hospitality Awards", "Connoisseur's Choice", "Elite Destinations", "Golden Key Awards", "Traveller's Digest", "Premier Hotel Alliance"
"Luxury Travel Magazine", "Conde Nast Traveler", "Forbes Travel Guide", "AAA Five Diamond Award", "World Travel Awards", "Michelin Guide Hotels", "Gourmet & Leisure", "Hotel Excellence Awards"
]}
/>
</div>
@@ -192,28 +182,19 @@ export default function LandingPage() {
<div
id="faq"
data-section="faq"
data-webild-component="FaqSplitMedia"
data-webild-component-path="@/components/sections/faq/FaqSplitMedia"
data-webild-component="FaqSimple"
data-webild-component-path="@/components/sections/faq/FaqSimple"
>
<FaqSplitMedia
tag="Quick Answers"
<FaqSimple
tag="Questions"
title="Frequently Asked Questions"
description="Find answers to common questions about your stay, bookings, and our hotel services."
description="Find quick answers to the most common inquiries about your stay, amenities, and services at The Grand Haven Hotel."
items={[
{
question: "What are the check-in and check-out times?", answer: "Check-in is at 3:00 PM, and check-out is at 12:00 PM. Early check-in or late check-out may be available upon request, subject to availability and additional charges."
},
{
question: "Does the hotel offer airport transportation?", answer: "Yes, we offer luxury airport transfer services. Please contact our concierge desk in advance to arrange your transportation and confirm pricing."
},
{
question: "Are pets allowed at The Grandeur Hotel?", answer: "We welcome small, well-behaved pets. Please inform us at the time of booking, as a pet fee and certain restrictions apply to ensure the comfort of all our guests."
},
{
question: "Is there parking available at the hotel?", answer: "Valet parking is available for all guests at a daily rate. Self-parking options may also be available nearby. Please inquire upon arrival."
}
{ question: "What are your check-in and check-out times?", answer: "Check-in is at 3:00 PM, and check-out is at 12:00 PM. Early check-in or late check-out may be available upon request, subject to availability and additional charges." },
{ question: "Is breakfast included in the room rate?", answer: "Breakfast inclusion varies by room package. Please refer to your booking confirmation or inquire with our reception team upon arrival for details regarding your reservation." },
{ question: "Do you offer airport transportation?", answer: "Yes, we offer luxurious airport transfer services. Please contact our concierge desk at least 24 hours in advance to arrange your transportation needs." },
{ question: "Are pets allowed at the hotel?", answer: "The Grand Haven Hotel is a pet-friendly establishment. Please inform us in advance if you plan to bring a pet, as certain room types and fees may apply. Service animals are always welcome." }
]}
imageSrc="http://img.b2bpic.net/free-photo/travelers-reception_1098-14597.jpg"
/>
</div>
@@ -224,64 +205,63 @@ export default function LandingPage() {
data-webild-component-path="@/components/sections/contact/ContactSplitForm"
>
<ContactSplitForm
tag="Get in Touch"
title="Contact The Grandeur Hotel"
description="Have a question, special request, or wish to arrange a bespoke experience? Our dedicated team is here to assist you with every detail of your stay."
tag="Reservations"
title="Plan Your Luxurious Escape"
description="Contact us directly to arrange your unforgettable stay, inquire about special packages, or request personalized services. Our team is here to assist you."
inputs={[
{
name: "name", type: "text", placeholder: "Your Name", required: true
},
{
name: "email", type: "email", placeholder: "Your Email", required: true
},
{
name: "phone", type: "tel", placeholder: "Phone Number (Optional)"
}
{ name: "name", type: "text", placeholder: "Your Name", required: true },
{ name: "email", type: "email", placeholder: "Your Email", required: true },
{ name: "phone", type: "tel", placeholder: "Phone Number" },
{ name: "checkIn", type: "date", placeholder: "Check-in Date", required: true },
{ name: "checkOut", type: "date", placeholder: "Check-out Date", required: true },
{ name: "guests", type: "number", placeholder: "Number of Guests", required: true }
]}
textarea={{
name: "message", placeholder: "Your Message or Request", rows: 5,
required: true
}}
buttonText="Send Message"
imageSrc="http://img.b2bpic.net/free-photo/portrait-young-attractive-woman-elegant-hotel-cafeteria_657883-397.jpg"
textarea={{ name: "message", placeholder: "Special Requests or Inquiry Details", rows: 4 }}
buttonText="Send Inquiry"
imageSrc="http://img.b2bpic.net/free-photo/receptionist-assists-athletic-people_482257-96938.jpg"
/>
</div>
<div
id="footer"
data-section="footer"
data-webild-component="FooterSimple"
data-webild-component-path="@/components/sections/footer/FooterSimple"
data-webild-component="FooterBasic"
data-webild-component-path="@/components/sections/footer/FooterBasic"
>
<FooterSimple
brand="The Grandeur Hotel"
<FooterBasic
columns={[
{
title: "Explore", items: [
{ label: "Home", href: "#hero" },
{ label: "About Us", href: "#about" },
{ label: "Rooms & Suites", href: "#accommodations" },
{ label: "Amenities", href: "#amenities" }
{ label: "Rooms & Suites", href: "#rooms" },
{ label: "Amenities", href: "#features" }
]
},
{
title: "Guest Services", items: [
{ label: "Concierge", href: "#" },
title: "Services", items: [
{ label: "Dining", href: "#" },
{ label: "Spa & Wellness", href: "#" }
{ label: "Spa & Wellness", href: "#" },
{ label: "Concierge", href: "#" },
{ label: "Events", href: "#" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" }
]
},
{
title: "Connect", items: [
{ label: "Contact Us", href: "#contact" },
{ label: "Careers", href: "#" }
{ label: "Facebook", href: "https://facebook.com" },
{ label: "Instagram", href: "https://instagram.com" },
{ label: "Twitter", href: "https://twitter.com" }
]
}
]}
copyright="© 2024 The Grandeur Hotel. All rights reserved."
links={[
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" }
]}
leftText="© 2024 The Grand Haven Hotel. All rights reserved."
rightText="Designed with Distinction."
/>
</div>
</ThemeProvider>