Update src/app/page.tsx

This commit is contained in:
2026-05-14 06:11:20 +00:00
parent 73ff512a8b
commit c31f070f37

View File

@@ -29,399 +29,172 @@ export default function LandingPage() {
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Solution",
id: "features",
},
{
name: "Experience",
id: "about",
},
{
name: "Pricing",
id: "pricing",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="TravelTech AI"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "hero" },
{ name: "Solution", id: "features" },
{ name: "Experience", id: "about" },
{ name: "Pricing", id: "pricing" },
{ name: "Contact", id: "contact" },
]}
brandName="TravelTech AI"
button={{ text: "Get Started", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
background={{
variant: "sparkles-gradient",
}}
title="Experience the Legend Before You Arrive. Your Journey Starts Here."
description="The world's first AI-integrated travel ecosystem that merges smart flight planning, seamless visa automation, and premium hotel bookings into a single, intuitive workflow."
buttons={[
{
text: "Start Your Digital Experience",
href: "#",
},
{
text: "Join the Future of Tourism",
href: "#",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/dreamlike-surrealistic-landscape-purplish-tones_23-2150505349.jpg"
imageAlt="Futuristic 3D Landmark Visualization"
mediaAnimation="blur-reveal"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/dreamlike-surrealistic-landscape-purplish-tones_23-2150505346.jpg",
alt: "User avatar",
},
{
src: "http://img.b2bpic.net/free-photo/gazebo-surrounded-by-palm-trees-water-sunset_181624-57249.jpg",
alt: "User avatar",
},
{
src: "http://img.b2bpic.net/free-photo/view-ancient-greek-architecture-with-temple-structure_23-2151664766.jpg",
alt: "User avatar",
},
{
src: "http://img.b2bpic.net/free-photo/dreamy-rainbow-countryside_23-2151625078.jpg",
alt: "User avatar",
},
{
src: "http://img.b2bpic.net/free-vector/location-app-screens_23-2148685899.jpg",
alt: "User avatar",
},
]}
avatarText="Trusted by 5,000+ global explorers"
marqueeItems={[
{
type: "text-icon",
text: "AI-Powered Planning",
icon: Database,
},
{
type: "text-icon",
text: "Secure Booking",
icon: ShieldCheck,
},
{
type: "text-icon",
text: "Visa Automation",
icon: FileText,
},
{
type: "text-icon",
text: "3D Virtual Tours",
icon: MapPin,
},
{
type: "text-icon",
text: "Real-time Support",
icon: Headphones,
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
background={{ variant: "sparkles-gradient" }}
title="Experience the Legend Before You Arrive. Your Journey Starts Here."
description="The world's first AI-integrated travel ecosystem that merges smart flight planning, seamless visa automation, and premium hotel bookings into a single, intuitive workflow."
buttons={[
{ text: "Start Your Digital Experience", href: "#" },
{ text: "Join the Future of Tourism", href: "#" },
]}
imageSrc="http://img.b2bpic.net/free-photo/dreamlike-surrealistic-landscape-purplish-tones_23-2150505349.jpg"
imageAlt="Futuristic 3D Landmark Visualization"
mediaAnimation="blur-reveal"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/dreamlike-surrealistic-landscape-purplish-tones_23-2150505346.jpg", alt: "User avatar" },
{ src: "http://img.b2bpic.net/free-photo/gazebo-surrounded-by-palm-trees-water-sunset_181624-57249.jpg", alt: "User avatar" },
{ src: "http://img.b2bpic.net/free-photo/view-ancient-greek-architecture-with-temple-structure_23-2151664766.jpg", alt: "User avatar" },
{ src: "http://img.b2bpic.net/free-photo/dreamy-rainbow-countryside_23-2151625078.jpg", alt: "User avatar" },
{ src: "http://img.b2bpic.net/free-vector/location-app-screens_23-2148685899.jpg", alt: "User avatar" },
]}
avatarText="Trusted by 5,000+ global explorers"
marqueeItems={[
{ type: "text-icon", text: "AI-Powered Planning", icon: Database },
{ type: "text-icon", text: "Secure Booking", icon: ShieldCheck },
{ type: "text-icon", text: "Visa Automation", icon: FileText },
{ type: "text-icon", text: "3D Virtual Tours", icon: MapPin },
{ type: "text-icon", text: "Real-time Support", icon: Headphones },
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyOne
useInvertedBackground={false}
title="The Old Way vs. Our Smart Workflow"
description="Stop juggling twenty browser tabs. Our automated system handles the complexity of global travel so you don't have to."
accordionItems={[
{
id: "1",
title: "Hours of Manual Searching",
content: "The fragmented old way requires manual verification of flights, visa laws, and hotel proximity on separate, disconnected platforms.",
},
{
id: "2",
title: "Budget uncertainty",
content: "Guesswork leads to hidden fees and overspending. We calculate your entire trip cost based on real-time market data.",
},
{
id: "3",
title: "The Automated Ecosystem",
content: "Our 'Budget-to-Destination' logic synchronizes everything into one booking, providing real-time status updates at every stage of your journey.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/green-plane-sustainable-energy-concept_23-2151582487.jpg"
imageAlt="Travel comparison interface"
mediaAnimation="slide-up"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyOne
useInvertedBackground={false}
title="The Old Way vs. Our Smart Workflow"
description="Stop juggling twenty browser tabs. Our automated system handles the complexity of global travel so you don't have to."
accordionItems={[
{ id: "1", title: "Hours of Manual Searching", content: "The fragmented old way requires manual verification of flights, visa laws, and hotel proximity on separate, disconnected platforms." },
{ id: "2", title: "Budget uncertainty", content: "Guesswork leads to hidden fees and overspending. We calculate your entire trip cost based on real-time market data." },
{ id: "3", title: "The Automated Ecosystem", content: "Our 'Budget-to-Destination' logic synchronizes everything into one booking, providing real-time status updates at every stage of your journey." },
]}
imageSrc="http://img.b2bpic.net/free-photo/green-plane-sustainable-energy-concept_23-2151582487.jpg"
imageAlt="Travel comparison interface"
mediaAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<SplitAbout
textboxLayout="split"
useInvertedBackground={false}
title="Emotional Storytelling Through Tech"
description="We don't just book tickets; we build an emotional connection. Experience your destination through 3D virtual tours and rich historical storytelling long before your flight departs."
bulletPoints={[
{
title: "Immersive Virtual Tours",
description: "Step into your destination's legendary history with interactive 3D landscapes.",
},
{
title: "Emotional Storytelling",
description: "Engage with curated cultural narratives that prepare you for the beauty of your destination.",
},
{
title: "Smart Ecosystem",
description: "Automated planning that learns your travel preferences for a perfectly tailored experience.",
},
]}
imageSrc="http://img.b2bpic.net/free-vector/task-management-app_52683-44675.jpg"
imageAlt="Concierge UI Interface"
mediaAnimation="blur-reveal"
/>
</div>
<div id="about" data-section="about">
<SplitAbout
textboxLayout="split"
useInvertedBackground={false}
title="Emotional Storytelling Through Tech"
description="We don't just book tickets; we build an emotional connection. Experience your destination through 3D virtual tours and rich historical storytelling long before your flight departs."
bulletPoints={[
{ title: "Immersive Virtual Tours", description: "Step into your destination's legendary history with interactive 3D landscapes." },
{ title: "Emotional Storytelling", description: "Engage with curated cultural narratives that prepare you for the beauty of your destination." },
{ title: "Smart Ecosystem", description: "Automated planning that learns your travel preferences for a perfectly tailored experience." },
]}
imageSrc="http://img.b2bpic.net/free-vector/task-management-app_52683-44675.jpg"
imageAlt="Concierge UI Interface"
mediaAnimation="blur-reveal"
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardOne
animationType="depth-3d"
textboxLayout="split"
useInvertedBackground={false}
plans={[
{
id: "essential",
badge: "Core",
price: "$0",
subtitle: "Automated Trip Planner",
features: [
"Budget tracking",
"Flight integration",
"Basic visa guidance",
],
},
{
id: "pro",
badge: "Growth",
price: "$29",
subtitle: "Advanced Concierge",
features: [
"Virtual 3D Tours",
"Priority Support",
"Visa Automation",
"Exclusive Hotel Deals",
],
},
]}
title="Travel on Your Terms"
description="Select the level of concierge support that matches your travel lifestyle."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardOne
animationType="depth-3d"
textboxLayout="split"
useInvertedBackground={false}
plans={[
{ id: "essential", badge: "Core", price: "$0", subtitle: "Automated Trip Planner", features: ["Budget tracking", "Flight integration", "Basic visa guidance"] },
{ id: "pro", badge: "Growth", price: "$29", subtitle: "Advanced Concierge", features: ["Virtual 3D Tours", "Priority Support", "Visa Automation", "Exclusive Hotel Deals"] },
]}
title="Travel on Your Terms"
description="Select the level of concierge support that matches your travel lifestyle."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
animationType="scale-rotate"
textboxLayout="split"
gridVariant="bento-grid"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "98%",
title: "Partner Trust Rate",
description: "Verified providers integrated within our ecosystem.",
icon: Shield,
},
{
id: "m2",
value: "1.2k",
title: "Global Landmarks",
description: "Detailed 3D virtual content available for exploration.",
icon: Globe,
},
{
id: "m3",
value: "24/7",
title: "Concierge Availability",
description: "AI-automated support accessible globally at all times.",
icon: Zap,
},
]}
title="Market Access & Transparency"
description="Investors and service providers benefit from our unified rating system and data-rich infrastructure."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
animationType="scale-rotate"
textboxLayout="split"
gridVariant="bento-grid"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "98%", title: "Partner Trust Rate", description: "Verified providers integrated within our ecosystem.", icon: Shield },
{ id: "m2", value: "1.2k", title: "Global Landmarks", description: "Detailed 3D virtual content available for exploration.", icon: Globe },
{ id: "m3", value: "24/7", title: "Concierge Availability", description: "AI-automated support accessible globally at all times.", icon: Zap },
]}
title="Market Access & Transparency"
description="Investors and service providers benefit from our unified rating system and data-rich infrastructure."
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Sarah Jenkins",
role: "Corporate Lead",
company: "Global Group",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businesswoman-sunglasses-standing-near-business-centre_176420-5665.jpg",
},
{
id: "2",
name: "Marcus Thorne",
role: "Travel Blogger",
company: "Horizon Media",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiley-girl-hills-landscape_23-2148504826.jpg",
},
{
id: "3",
name: "Elena Rodriguez",
role: "Tech Consultant",
company: "Innovate AI",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/pensive-office-girl-enjoying-work-break_1262-19179.jpg",
},
{
id: "4",
name: "David Wu",
role: "Product Designer",
company: "Studio X",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-woman-traveling_23-2148579547.jpg",
},
{
id: "5",
name: "Grace Miller",
role: "Architect",
company: "Urban Space",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/travel-vibes-studio_23-2151919642.jpg",
},
{
id: "6",
name: "Simon Vane",
role: "Fintech Expert",
company: "Bank Future",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-shopping-bags-summer-city_1157-38446.jpg",
},
]}
title="Trusted by Modern Explorers"
description="See why top-tier travelers rely on our smart concierge to navigate the world."
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
testimonials={[
{ id: "1", name: "Sarah Jenkins", role: "Corporate Lead", company: "Global Group", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businesswoman-sunglasses-standing-near-business-centre_176420-5665.jpg" },
{ id: "2", name: "Marcus Thorne", role: "Travel Blogger", company: "Horizon Media", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiley-girl-hills-landscape_23-2148504826.jpg" },
{ id: "3", name: "Elena Rodriguez", role: "Tech Consultant", company: "Innovate AI", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/pensive-office-girl-enjoying-work-break_1262-19179.jpg" },
{ id: "4", name: "David Wu", role: "Product Designer", company: "Studio X", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/low-angle-woman-traveling_23-2148579547.jpg" },
{ id: "5", name: "Grace Miller", role: "Architect", company: "Urban Space", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/travel-vibes-studio_23-2151919642.jpg" },
{ id: "6", name: "Simon Vane", role: "Fintech Expert", company: "Bank Future", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-with-shopping-bags-summer-city_1157-38446.jpg" },
]}
title="Trusted by Modern Explorers"
description="See why top-tier travelers rely on our smart concierge to navigate the world."
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "Is the Budget-to-Destination tool free?",
content: "The core planning features are free. Premium support, 3D tours, and automated visa services are included in the Pro tier.",
},
{
id: "f2",
title: "How is my budget data secured?",
content: "We use enterprise-grade encryption for all financial integrations, ensuring your travel data stays private and protected.",
},
{
id: "f3",
title: "Can I use this for business travel?",
content: "Absolutely. Our business module offers centralized billing and reporting tools perfect for teams and enterprise users.",
},
]}
title="Frequently Asked Questions"
description="Everything you need to know about navigating the future of travel."
faqsAnimation="blur-reveal"
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{ id: "f1", title: "Is the Budget-to-Destination tool free?", content: "The core planning features are free. Premium support, 3D tours, and automated visa services are included in the Pro tier." },
{ id: "f2", title: "How is my budget data secured?", content: "We use enterprise-grade encryption for all financial integrations, ensuring your travel data stays private and protected." },
{ id: "f3", title: "Can I use this for business travel?", content: "Absolutely. Our business module offers centralized billing and reporting tools perfect for teams and enterprise users." },
]}
title="Frequently Asked Questions"
description="Everything you need to know about navigating the future of travel."
faqsAnimation="blur-reveal"
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={false}
background={{
variant: "sparkles-gradient",
}}
tag="Get in touch"
title="Ready to redefine your travel?"
description="Contact us today for a demo or partnership inquiry. Join the next generation of intelligent travel solutions."
buttons={[
{
text: "Contact Support",
href: "#",
},
{
text: "Partner with Us",
href: "#",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={false}
background={{ variant: "sparkles-gradient" }}
tag="Get in touch"
title="Ready to redefine your travel?"
description="Contact us today for a demo or partnership inquiry. Join the next generation of intelligent travel solutions."
buttons={[
{ text: "Contact Support", href: "#" },
{ text: "Partner with Us", href: "#" },
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Product",
items: [
{
label: "Features",
href: "#features",
},
{
label: "Concierge",
href: "#about",
},
{
label: "Pricing",
href: "#pricing",
},
],
},
{
title: "Company",
items: [
{
label: "About Us",
href: "#about",
},
{
label: "Investors",
href: "#",
},
{
label: "Contact",
href: "#contact",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy",
href: "#",
},
{
label: "Terms",
href: "#",
},
{
label: "Security",
href: "#",
},
],
},
]}
logoText="TravelTech AI"
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{ title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Concierge", href: "#about" }, { label: "Pricing", href: "#pricing" }] },
{ title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Investors", href: "#" }, { label: "Contact", href: "#contact" }] },
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }, { label: "Security", href: "#" }] },
]}
logoText="TravelTech AI"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}