190 lines
11 KiB
TypeScript
190 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import { Award, Headphones, Instagram, MapPin, ShieldCheck, Twitter } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{ name: "Home", id: "#home" },
|
|
{ name: "About", id: "#about" },
|
|
{ name: "Spots", id: "#spots" },
|
|
{ name: "Hotels", id: "#hotels" },
|
|
{ name: "FAQ", id: "#faq" },
|
|
{ name: "Contact", id: "#contact" },
|
|
]}
|
|
brandName="TravelHub"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogo
|
|
logoText="Explore the World"
|
|
description="Your ultimate companion for unforgettable journeys and seamless travel experiences. Discover hidden gems and luxury escapes."
|
|
buttons={[
|
|
{ text: "Start Journey", href: "#spots" },
|
|
{ text: "Contact Us", href: "#contact" },
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/beach-with-coconut-tree-sunset_268835-4049.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
useInvertedBackground={false}
|
|
tag="About Us"
|
|
title="Crafting Memories Since 2010"
|
|
description="We believe travel is about stories. From the peaks of the Alps to the pristine beaches of Maldives, we curate experiences that linger in your heart."
|
|
subdescription="Our team of experts handles every detail, ensuring your peace of mind while you focus on exploration."
|
|
icon={Award}
|
|
imageSrc="http://img.b2bpic.net/free-photo/young-couple-travelling-together_23-2149121205.jpg"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="spots" data-section="spots">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{ id: "1", brand: "Europe", name: "Eiffel Tower, Paris", price: "From $400", rating: 5, reviewCount: "1.2k", imageSrc: "http://img.b2bpic.net/free-photo/bride-sits-snickers-before-eiffel-tower-paris_8353-7243.jpg" },
|
|
{ id: "2", brand: "Asia", name: "Mount Fuji, Japan", price: "From $600", rating: 4, reviewCount: "800", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-scenery-breathtaking-sunset-montesinho-natural-park-portugal_181624-13969.jpg" },
|
|
{ id: "3", brand: "Maldives", name: "Private Island Stay", price: "From $1200", rating: 5, reviewCount: "2.5k", imageSrc: "http://img.b2bpic.net/free-photo/aerial-wide-shot-beach-with-trees-sea-maldives-sunset_181624-3983.jpg" },
|
|
{ id: "4", brand: "Asia", name: "Angkor Wat, Cambodia", price: "From $350", rating: 4, reviewCount: "400", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-ancient-building-with-ruins-columns_493961-600.jpg" },
|
|
{ id: "5", brand: "Europe", name: "Tokyo Markets", price: "From $500", rating: 5, reviewCount: "600", imageSrc: "http://img.b2bpic.net/free-photo/enjoying-street-food-fest_23-2151543836.jpg" },
|
|
{ id: "6", brand: "Europe", name: "Swiss Alps Resort", price: "From $900", rating: 5, reviewCount: "1.1k", imageSrc: "http://img.b2bpic.net/free-photo/mountain-village-lanscape-beautiful-wheater_482257-36138.jpg" },
|
|
]}
|
|
title="Popular Tourist Spots"
|
|
description="Explore the world's most breathtaking locations curated just for you."
|
|
/>
|
|
</div>
|
|
|
|
<div id="hotels" data-section="hotels">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{ id: "h1", brand: "Luxury", name: "Grand Palace Hotel", price: "From $300/nt", rating: 5, reviewCount: "900", imageSrc: "http://img.b2bpic.net/free-photo/hammocks-spa-with-wooden-boxes_1203-1120.jpg" },
|
|
{ id: "h2", brand: "Resort", name: "Ocean View Suites", price: "From $450/nt", rating: 5, reviewCount: "1.2k", imageSrc: "http://img.b2bpic.net/free-photo/chair-pool_74190-1323.jpg" },
|
|
{ id: "h3", brand: "Boutique", name: "Urban Nest Studio", price: "From $200/nt", rating: 4, reviewCount: "450", imageSrc: "http://img.b2bpic.net/free-photo/cozy-bedroom-with-pendant-lamp-orchid-home-comfort_169016-70987.jpg" },
|
|
{ id: "h4", brand: "Beachfront", name: "Coastal Haven", price: "From $380/nt", rating: 5, reviewCount: "750", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-asian-woman-looking-sea-beach-ocean-relax-holiday-vacation-travel_74190-9048.jpg" },
|
|
{ id: "h5", brand: "Classic", name: "Heritage Inn", price: "From $250/nt", rating: 4, reviewCount: "300", imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-girl-black-skirt-pink-coat-posed-against-vintage-railing-with-column-old-house_627829-8654.jpg" },
|
|
{ id: "h6", brand: "Modern", name: "Skyline Heights", price: "From $550/nt", rating: 5, reviewCount: "2.1k", imageSrc: "http://img.b2bpic.net/free-photo/close-up-romantic-breakfast-bed-arrangement_23-2150956523.jpg" },
|
|
]}
|
|
title="Luxury Hotel Stays"
|
|
description="Comfort meets class in our handpicked hotel accommodations."
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureBento
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "24/7 Support", description: "Round-the-clock assistance anywhere in the world.", bentoComponent: "reveal-icon", icon: Headphones,
|
|
},
|
|
{
|
|
title: "Secure Booking", description: "Encrypted payments and verified stays.", bentoComponent: "reveal-icon", icon: ShieldCheck,
|
|
},
|
|
{
|
|
title: "Expert Guides", description: "Experienced local experts for every tour.", bentoComponent: "reveal-icon", icon: MapPin,
|
|
},
|
|
]}
|
|
title="Travel With Confidence"
|
|
description="Experience superior support and planning with our comprehensive travel services."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonial" data-section="testimonial">
|
|
<TestimonialCardFive
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Alice G.", date: "Jan 2025", title: "Amazing trip!", quote: "Seamless service throughout the Japan trip. Loved every bit of it.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-wearing-hat_23-2148601980.jpg", imageSrc: "http://img.b2bpic.net/free-photo/beach-with-coconut-tree-sunset_268835-4049.jpg", imageAlt: "happy traveller portrait"},
|
|
{
|
|
id: "2", name: "Robert D.", date: "Dec 2024", title: "Highly recommend", quote: "The hotel selection was fantastic. We felt so pampered.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-travelling-woman_23-2148218441.jpg", imageSrc: "http://img.b2bpic.net/free-photo/young-couple-travelling-together_23-2149121205.jpg", imageAlt: "happy traveller portrait"},
|
|
{
|
|
id: "3", name: "Sarah K.", date: "Nov 2024", title: "Simply magical", quote: "The Maldives package was a dream come true for our anniversary.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-happy-male-tourist_23-2147860948.jpg", imageSrc: "http://img.b2bpic.net/free-photo/bride-sits-snickers-before-eiffel-tower-paris_8353-7243.jpg", imageAlt: "happy traveller portrait"},
|
|
{
|
|
id: "4", name: "John M.", date: "Oct 2024", title: "Top-notch planning", quote: "Everything was well organized and professional. Very satisfied.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/side-view-senior-woman-admiring-nature-while-hike_23-2149274886.jpg", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-scenery-breathtaking-sunset-montesinho-natural-park-portugal_181624-13969.jpg", imageAlt: "happy traveller portrait"},
|
|
{
|
|
id: "5", name: "Chloe L.", date: "Sep 2024", title: "Best experience", quote: "I would book again in a heartbeat. Excellent quality.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/lifestyle-young-friends-outdoors_23-2148140866.jpg", imageSrc: "http://img.b2bpic.net/free-photo/aerial-wide-shot-beach-with-trees-sea-maldives-sunset_181624-3983.jpg", imageAlt: "happy traveller portrait"},
|
|
]}
|
|
title="What Travellers Say"
|
|
description="Real stories from our happy customers across the globe."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{ id: "f1", title: "Can I cancel my booking?", content: "Yes, cancellations are possible up to 48 hours before the trip date, minus a processing fee." },
|
|
{ id: "f2", title: "Are meals included?", content: "Depending on your selected package, most tour plans include breakfast and dinner." },
|
|
{ id: "f3", title: "How do I get my tickets?", content: "Tickets are sent via email and are available on your dashboard immediately after booking." },
|
|
]}
|
|
title="Common Questions"
|
|
description="Everything you need to know before you set off on your journey."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={true}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
tag="Get in touch"
|
|
title="Ready for your next trip?"
|
|
description="Contact our experts today and start planning your perfect vacation."
|
|
buttons={[{ text: "Send Message", href: "#" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="TravelHub"
|
|
copyrightText="© 2025 TravelHub. All rights reserved."
|
|
socialLinks={[
|
|
{ icon: Twitter, href: "#", ariaLabel: "Twitter" },
|
|
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|