Files
267d2f55-5a7d-4207-a805-e2f…/src/app/page.tsx
2026-03-18 16:30:26 +00:00

383 lines
22 KiB
TypeScript

"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroOverlay from "@/components/sections/hero/HeroOverlay";
import MediaAbout from "@/components/sections/about/MediaAbout";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
import FaqBase from "@/components/sections/faq/FaqBase";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterCard from "@/components/sections/footer/FooterCard";
import {
Sparkles,
Award,
Home,
Zap,
CheckCircle,
Smile,
Heart,
HelpCircle,
Waves,
Flower2,
Umbrella,
UtensilsCrossed,
Wifi,
Coffee,
Phone,
ParkingCircle,
Shirt,
Utensils,
Anchor,
MapPin,
Facebook,
Instagram,
Twitter,
Linkedin,
Clock,
MapPinIcon,
} from "lucide-react";
const navItems = [
{ name: "Home", id: "home" },
{ name: "About", id: "about" },
{ name: "Rooms", id: "rooms" },
{ name: "Amenities", id: "amenities" },
{ name: "Services", id: "services" },
{ name: "Activities", id: "activities" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" },
];
export default function HomePage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="medium"
sizing="mediumSizeLargeTitles"
background="circleGradient"
cardStyle="layered-gradient"
primaryButtonStyle="shadow"
secondaryButtonStyle="radial-glow"
headingFontWeight="semibold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Orient Palace Hotel"
navItems={navItems}
button={{
text: "Book Now", href: "https://www.trip.com"}}
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlay
title="استمتع بإقامة فاخرة على شاطئ سوسة"
description="Experience luxury meets comfort at Orient Palace Hotel, your perfect Mediterranean escape. A prestigious 4-star beachfront resort offering world-class amenities, pristine beaches, and authentic Tunisian hospitality."
tag="Luxury Beachfront Resort"
tagIcon={Sparkles}
tagAnimation="slide-up"
buttons={[
{
text: "Book Your Stay", href: "https://www.trip.com"},
{
text: "Explore More", href: "#about"},
]}
buttonAnimation="blur-reveal"
imageSrc="http://img.b2bpic.net/free-photo/hammocks-placed-row_1203-176.jpg?_wi=1"
imageAlt="Orient Palace Hotel beachfront view at sunset"
showDimOverlay={true}
showBlur={true}
/>
</div>
<div id="about" data-section="about">
<MediaAbout
title="Welcome to Orient Palace Hotel"
description="Situated in the picturesque Chott Mariem beachfront, Orient Palace Hotel stands as a beacon of luxury in Sousse, Tunisia. Our 4-star resort is ideally positioned near the bustling Port of Kantaoui and the heart of the city, making it the perfect base for both relaxation and exploration.
Whether you're seeking a romantic escape, a family vacation, or a business retreat, our hotel combines Mediterranean charm with modern comfort. Each detail has been carefully curated to ensure your stay is nothing short of exceptional."
tag="Mediterranean Excellence"
tagIcon={Award}
tagAnimation="opacity"
buttons={[
{
text: "Learn More", href: "#amenities"},
]}
imageSrc="http://img.b2bpic.net/free-photo/umbrella-chair-around-swimming-pool-resort-hotel-leisure-travel-vacation_74190-8220.jpg?_wi=1"
imageAlt="Orient Palace Hotel exterior and architecture"
useInvertedBackground={false}
/>
</div>
<div id="rooms" data-section="rooms">
<ProductCardThree
title="Our Luxurious Rooms & Suites"
description="Choose from our carefully designed accommodations, each offering comfort and elegance with stunning views of the Mediterranean Sea or lush tropical gardens."
tag="Accommodation Types"
tagIcon={Home}
products={[
{
id: "room-sea-1", name: "Sea View Room", price: "From $143 USD", imageSrc:
"http://img.b2bpic.net/free-photo/portraif-caucasian-woman-romantic-elegant-pink-long-dress-vacation-luxury-rich-villa-hotel-with-amazing-tropical-palm-trees-view-female-classic-white-hat_343596-2043.jpg?_wi=1", imageAlt: "Luxury room with sea view balcony", initialQuantity: 1,
},
{
id: "room-garden-1", name: "Garden View Room", price: "From $125 USD", imageSrc:
"http://img.b2bpic.net/free-photo/window_1127-3198.jpg?_wi=1", imageAlt: "Elegant room overlooking tropical gardens", initialQuantity: 1,
},
{
id: "suite-premium", name: "Premium Sea View Suite", price: "From $199 USD", imageSrc:
"http://img.b2bpic.net/free-photo/portraif-caucasian-woman-romantic-elegant-pink-long-dress-vacation-luxury-rich-villa-hotel-with-amazing-tropical-palm-trees-view-female-classic-white-hat_343596-2043.jpg?_wi=2", imageAlt: "Premium suite with panoramic sea views", initialQuantity: 1,
},
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
buttons={[
{
text: "View All Rooms", href: "/rooms"},
]}
/>
</div>
<div id="amenities" data-section="amenities">
<FeatureCardTwentySix
title="World-Class Amenities"
description="Discover an array of premium facilities designed for your ultimate relaxation and enjoyment during your stay with us."
tag="Premium Facilities"
tagIcon={Zap}
features={[
{
title: "Outdoor Swimming Pool", description:
"Sparkling Olympic-size pool overlooking the Mediterranean Sea with lounging areas and poolside bar service.", imageSrc:
"http://img.b2bpic.net/free-photo/travel-beach-filter-water-luxury_1203-3967.jpg?_wi=1", imageAlt: "Luxury outdoor pool with lounge chairs", buttonIcon: Waves,
buttonHref: "#"},
{
title: "Luxurious Spa & Wellness", description:
"Full-service spa offering rejuvenating treatments, massage therapy, sauna, and steam room facilities.", imageSrc:
"http://img.b2bpic.net/free-vector/set-spa-center-banners-with-candles-aromatic-oils_23-2147799980.jpg?_wi=1", imageAlt: "Premium spa and wellness center", buttonIcon: Flower2,
buttonHref: "#"},
{
title: "Private Beach Access", description:
"Exclusive access to a pristine private beach with comfortable sunbeds, umbrellas, and beachside service.", imageSrc:
"http://img.b2bpic.net/free-photo/portrait-beautiful-young-asian-women-happy-smile-relax-around-outdoor-swimming-pool_74190-9787.jpg?_wi=1", imageAlt: "Private beach with sunbeds and umbrellas", buttonIcon: Umbrella,
buttonHref: "#"},
{
title: "Fine Dining Restaurant", description:
"Award-winning restaurant serving international cuisine and local Tunisian specialties with Mediterranean views.", imageSrc:
"http://img.b2bpic.net/free-photo/blue-sea-water-summer-silhouette_1203-3871.jpg?_wi=1", imageAlt: "Elegant dining restaurant with sea view", buttonIcon: UtensilsCrossed,
buttonHref: "#"},
]}
textboxLayout="default"
useInvertedBackground={false}
buttons={[
{
text: "Explore More Amenities", href: "/amenities"},
]}
/>
</div>
<div id="services" data-section="services">
<MetricCardThree
title="Exceptional Services"
description="We provide comprehensive services to make your stay comfortable, convenient, and memorable at every moment."
tag="Guest Services"
tagIcon={CheckCircle}
metrics={[
{
id: "wifi", icon: Wifi,
title: "Free High-Speed WiFi", value: "Throughout Hotel"},
{
id: "breakfast", icon: Coffee,
title: "Complimentary Breakfast", value: "Daily Buffet"},
{
id: "reception", icon: Phone,
title: "24/7 Reception", value: "Always Available"},
{
id: "parking", icon: ParkingCircle,
title: "Free Parking", value: "Secure & Spacious"},
{
id: "laundry", icon: Shirt,
title: "Laundry Service", value: "Express Available"},
{
id: "room-service", icon: Utensils,
title: "Room Service", value: "24-Hour Menu"},
]}
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={true}
/>
</div>
<div id="activities" data-section="activities">
<FeatureCardTwentySix
title="Activities & Nearby Attractions"
description="From thrilling water sports to cultural explorations, discover endless possibilities for adventure and entertainment during your stay."
tag="Entertainment & Recreation"
tagIcon={Smile}
features={[
{
title: "Water Sports & Beach Activities", description:
"Enjoy snorkeling, paddleboarding, jet skiing, and more at our private beach. Professional instructors available upon request.", imageSrc:
"http://img.b2bpic.net/free-photo/front-view-woman-laying-pineapple-floater_23-2149552221.jpg?_wi=1", imageAlt: "Water sports and beach activities", buttonIcon: Waves,
buttonHref: "#"},
{
title: "Aquasplash Water Park", description:
"Just minutes away from the hotel, Aquasplash offers thrilling water slides and pools perfect for family fun and adventure.", imageSrc:
"http://img.b2bpic.net/free-photo/portrait-young-boy-water-park_23-2150773124.jpg?_wi=1", imageAlt: "Water park with slides and attractions", buttonIcon: Zap,
buttonHref: "#"},
{
title: "Port of Kantaoui", description:
"Explore the vibrant marina with luxury yachts, fresh seafood restaurants, and shopping opportunities just a short drive away.", imageSrc:
"http://img.b2bpic.net/free-photo/stillness_181624-27484.jpg?_wi=1", imageAlt: "Marina with boats and waterfront", buttonIcon: Anchor,
buttonHref: "#"},
{
title: "Sousse Medina & Downtown", description:
"Discover the historic medina with traditional souks, cultural landmarks, and authentic Tunisian experiences in the city center.", imageSrc:
"http://img.b2bpic.net/free-photo/montreal-city-skyline-river_649448-3819.jpg?_wi=1", imageAlt: "Historic medina and downtown area", buttonIcon: MapPin,
buttonHref: "#"},
]}
textboxLayout="default"
useInvertedBackground={false}
buttons={[
{
text: "Plan Your Activities", href: "/activities"},
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFive
title="Guest Reviews & Testimonials"
description="Hear from our satisfied guests about their unforgettable experiences at Orient Palace Hotel."
tag="Guest Experiences"
tagIcon={Heart}
testimonials={[
{
id: "1", name: "Sarah Mitchell", date: "March 2024", title: "Perfect Mediterranean Escape", quote:
"Orient Palace exceeded all our expectations. The beachfront location is stunning, the staff is incredibly attentive, and the amenities are top-notch. We'll definitely be returning!", tag: "Family Vacation", avatarSrc:
"http://img.b2bpic.net/free-photo/woman-hat-making-selfie-resort-with-wonderful-smile-beautiful-european-female-tourist-having-fun-near-pool_197531-20922.jpg", avatarAlt: "Sarah Mitchell"},
{
id: "2", name: "Ahmed Hassan", date: "February 2024", title: "Exceptional Hospitality", quote:
"As a frequent traveler, I can confidently say Orient Palace offers exceptional value and service. The spa treatments were rejuvenating, and the food at the restaurant is absolutely delicious.", tag: "Business Traveler", avatarSrc:
"http://img.b2bpic.net/free-photo/sweet-little-girl-her-dad-building-sandcastle-beach-sitting-wet-sand-enjoying-vacation-sea_74855-10420.jpg", avatarAlt: "Ahmed Hassan"},
{
id: "3", name: "Maria Rossi", date: "January 2024", title: "Romantic Getaway Heaven", quote:
"This is the perfect spot for a romantic escape. The sunset views from our sea-view room were breathtaking, and the intimate dining experience was unforgettable. Highly recommended!", tag: "Honeymoon", avatarSrc:
"http://img.b2bpic.net/free-photo/glamorous-young-woman-looking-shoulder-while-drinking-pineapple-cocktail-smiling-blonde-girl-hat-sitting-near-pool-with-fruits_197531-20938.jpg", avatarAlt: "Maria Rossi"},
{
id: "4", name: "James & Emma Wilson", date: "December 2023", title: "Family-Friendly Paradise", quote:
"Our kids absolutely loved the pools and beach activities. The staff made sure everyone felt safe and entertained. Parents got to relax at the spa while kids had a blast!", tag: "Family Stay", avatarSrc:
"http://img.b2bpic.net/free-photo/closeup-shot-male-female-taking-selfie-street-near-river_181624-41893.jpg", avatarAlt: "James Wilson"},
{
id: "5", name: "Fatima Ben Ali", date: "November 2023", title: "World-Class Standards", quote:
"I was impressed by the attention to detail and the world-class facilities. The rooms are comfortable, the views are spectacular, and the service is professional. Well worth the price!", tag: "Luxury Traveler", avatarSrc:
"http://img.b2bpic.net/free-photo/smiling-girl-walking-with-her-parents_171337-6750.jpg", avatarAlt: "Fatima Ben Ali"},
{
id: "6", name: "Lisa Chen", date: "October 2023", title: "Wellness Retreat Success", quote:
"The spa treatments were incredibly relaxing and professional. Combined with the peaceful beach setting and wellness programs, this is truly a destination for rejuvenation and self-care.", tag: "Wellness Guest", avatarSrc:
"http://img.b2bpic.net/free-photo/enjoying-vacation_1098-14477.jpg", avatarAlt: "Lisa Chen"},
]}
textboxLayout="default"
useInvertedBackground={true}
/>
</div>
<div id="booking-info" data-section="booking-info">
<FaqBase
title="Booking Information & FAQs"
description="Find answers to common questions about reservations, amenities, and policies at Orient Palace Hotel."
tag="Guest Information"
tagIcon={HelpCircle}
faqs={[
{
id: "1", title: "What is the check-in and check-out time?", content:
"Check-in is available from 15:00 (3:00 PM), and check-out is until 11:00 AM. Early check-in and late check-out may be available upon request, subject to availability. Please contact our reception desk at +216 73 242 888 for special arrangements."},
{
id: "2", title: "Is breakfast included in the room rate?", content:
"Yes! Complimentary daily breakfast buffet featuring international and local Tunisian specialties is included for all guests. Breakfast is served from 7:00 AM to 10:30 AM in our main dining restaurant overlooking the Mediterranean Sea."},
{
id: "3", title: "What are the room rates and special offers?", content:
"Room rates start from approximately $125 USD for Garden View Rooms to $199 USD for Premium Sea View Suites. Regular rates begin at $143 USD. We offer seasonal discounts, group packages, and special promotions. Please visit Trip.com or contact our reservations team for current rates and available offers."},
{
id: "4", title: "Is WiFi available throughout the hotel?", content:
"Absolutely! High-speed WiFi is complimentary and available throughout the entire hotel, including rooms, lobby, restaurants, and beach areas. Connection is reliable and fast for both leisure and business guests."},
{
id: "5", title: "Can I book water sports and activities in advance?", content:
"Yes, we offer pre-booking for water sports, spa treatments, and guided excursions. Contact our activities desk at the hotel or call +216 73 242 888 to secure your preferred time slots. Group rates are available for organized activities."},
{
id: "6", title: "Is there parking available at the hotel?", content:
"Yes, we provide complimentary secure parking for all guests. Ample parking spaces are available on a first-come, first-served basis. Our parking area is monitored 24/7 for your vehicle's safety."},
]}
faqsAnimation="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
buttons={[
{
text: "Book Now on Trip.com", href: "https://www.trip.com"},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
title="Get in Touch"
description="Have questions or special requests? Our dedicated team is here to assist you. Reach out to us through the contact form or call us at +216 73 242 888. Located in Chott Mariem, Sousse, Tunisia."
inputs={[
{
name: "name", type: "text", placeholder: "Your Full Name", required: true,
},
{
name: "email", type: "email", placeholder: "Your Email Address", required: true,
},
{
name: "phone", type: "tel", placeholder: "Your Phone Number", required: false,
},
{
name: "checkInDate", type: "date", placeholder: "Preferred Check-in Date", required: false,
},
]}
textarea={{
name: "message", placeholder:
"Tell us about your inquiry or special requests...", rows: 5,
required: true,
}}
useInvertedBackground={true}
imageSrc="http://img.b2bpic.net/free-photo/portrait-beautiful-young-asian-women-happy-smile-relax-around-outdoor-swimming-pool_74190-9787.jpg?_wi=2"
imageAlt="Contact us for reservations"
mediaAnimation="slide-up"
buttonText="Send Message"
mediaPosition="right"
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Orient Palace Hotel"
copyrightText="© 2024 Orient Palace Hotel. All rights reserved. Located in Chott Mariem, Sousse, Tunisia. Phone: +216 73 242 888"
socialLinks={[
{
icon: Facebook,
href: "https://www.facebook.com", ariaLabel: "Visit our Facebook page"},
{
icon: Instagram,
href: "https://www.instagram.com", ariaLabel: "Follow us on Instagram"},
{
icon: Twitter,
href: "https://www.twitter.com", ariaLabel: "Follow us on Twitter"},
{
icon: Linkedin,
href: "https://www.linkedin.com", ariaLabel: "Connect on LinkedIn"},
]}
/>
</div>
</ThemeProvider>
);
}