Files
dae79e2a-eace-488a-8443-06a…/src/app/page.tsx
2026-03-08 10:43:25 +00:00

463 lines
18 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import AboutMetric from "@/components/sections/about/AboutMetric";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import ContactFaq from "@/components/sections/contact/ContactFaq";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import Link from "next/link";
import {
Globe,
Compass,
Lightbulb,
Users,
Shield,
Zap,
TrendingUp,
Heart,
Clock,
HelpCircle,
ArrowRight,
} from "lucide-react";
export default function HomePage() {
const navItems = [
{ name: "Destinations", id: "destinations" },
{ name: "Trip Planner", id: "planner" },
{ name: "About", id: "about" },
{ name: "Blog", id: "blog" },
{ name: "Contact", id: "contact" },
];
const footerColumns = [
{
title: "Explore",
items: [
{ label: "Destinations", href: "#destinations" },
{ label: "Trip Planner", href: "#planner" },
{ label: "Deals", href: "#" },
{ label: "Guides", href: "#blog" },
],
},
{
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Blog", href: "/blog" },
{ label: "Careers", href: "#" },
{ label: "Press", href: "#" },
],
},
{
title: "Support",
items: [
{ label: "Contact Us", href: "/contact" },
{ label: "FAQ", href: "#faq" },
{ label: "Help Center", href: "#" },
{ label: "Community", href: "#" },
],
},
{
title: "Legal",
items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Cookie Policy", href: "#" },
{ label: "Accessibility", href: "#" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="medium"
sizing="mediumLarge"
background="circleGradient"
cardStyle="gradient-mesh"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="layered"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarStyleApple
brandName="Wanderly"
navItems={navItems}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
title="Plan Your Perfect Trip with Ease"
description="Discover, plan, and book your next adventure with our intuitive trip planning platform. From flights to experiences, we handle the details so you can focus on the memories."
background={{ variant: "glowing-orb" }}
kpis={[
{ value: "50K+", label: "Trips Planned" },
{ value: "180+", label: "Destinations" },
{ value: "98%", label: "Satisfaction" },
]}
enableKpiAnimation={true}
tag="Your Journey Awaits"
tagIcon={Globe}
buttons={[
{ text: "Start Planning", href: "#planner" },
{ text: "Explore Destinations", href: "#destinations" },
]}
mediaAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/globe-with-sticker-father-s-day_23-2147749310.jpg"
imageAlt="Beautiful travel destinations"
imagePosition="right"
/>
</div>
<div id="destinations" data-section="destinations">
<ProductCardThree
title="Featured Destinations"
description="Browse our curated collection of breathtaking destinations worldwide. Each location offers unique experiences and unforgettable memories."
products={[
{
id: "1",
name: "Bali, Indonesia",
price: "From $899",
imageSrc: "http://img.b2bpic.net/free-photo/umbrella-chair_74190-1674.jpg",
imageAlt: "Tropical beaches of Bali",
},
{
id: "2",
name: "Paris, France",
price: "From $1,299",
imageSrc: "http://img.b2bpic.net/free-psd/magnificent-eiffel-tower-paris-france_191095-81558.jpg",
imageAlt: "Iconic Eiffel Tower views",
},
{
id: "3",
name: "Tokyo, Japan",
price: "From $1,099",
imageSrc: "http://img.b2bpic.net/free-photo/modern-exterior-urban-view_23-2149091994.jpg",
imageAlt: "Vibrant Tokyo cityscape",
},
{
id: "4",
name: "Santorini, Greece",
price: "From $1,199",
imageSrc: "http://img.b2bpic.net/free-photo/nature-landscape-with-beach-view_23-2151682987.jpg",
imageAlt: "White cliffs of Santorini",
},
{
id: "5",
name: "New York, USA",
price: "From $799",
imageSrc: "http://img.b2bpic.net/free-photo/new-york-city-manhattan-panorama_649448-1020.jpg",
imageAlt: "Manhattan skyline",
},
{
id: "6",
name: "Dubai, UAE",
price: "From $949",
imageSrc: "http://img.b2bpic.net/free-photo/shanghai-night_649448-3275.jpg",
imageAlt: "Modern Dubai architecture",
},
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
tag="Explore"
/>
</div>
<div id="trust" data-section="trust">
<TestimonialCardThirteen
title="Trusted by Travelers Worldwide"
description="See what our satisfied customers have to say about their planning experience."
testimonials={[
{
id: "1",
name: "Sarah Martinez",
handle: "@sarahwanders",
testimonial:
"Wanderly made planning my honeymoon so effortless. The step-by-step planner and integrated booking system saved me hours of research. Highly recommend!",
rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/beautiful-young-female-with-hair-bun-having-joyful-look-smiling-cheerfully-happy-with-some-positive-news_273609-9042.jpg",
imageAlt: "Sarah Martinez profile",
},
{
id: "2",
name: "James Chen",
handle: "@jamesexplores",
testimonial:
"As a frequent traveler, I appreciate the seamless interface and personalized recommendations. Best travel planning tool I've used.",
rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/cheerful-bearded-man_1098-22109.jpg",
imageAlt: "James Chen profile",
},
{
id: "3",
name: "Emma Thompson",
handle: "@emmadventures",
testimonial:
"The itinerary sharing feature is perfect for group trips. My friends and I coordinated our entire Europe tour in Wanderly.",
rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/portrait-handsome-young-man-close-up-street_1321-25.jpg",
imageAlt: "Emma Thompson profile",
},
{
id: "4",
name: "Michael Rodriguez",
handle: "@miketravel",
testimonial:
"Customer support is exceptional. When I had questions about booking, they responded within minutes. This is the service standard I expect.",
rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/happy-young-handsome-man-sitting-cafe-table_1262-975.jpg",
imageAlt: "Michael Rodriguez profile",
},
{
id: "5",
name: "Lisa Wong",
handle: "@lisaaround",
testimonial:
"Finally, a platform that understands the needs of solo travelers. Safety features and community insights are invaluable.",
rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/portrait-woman-smiling_23-2148648145.jpg",
imageAlt: "Lisa Wong profile",
},
{
id: "6",
name: "David Anderson",
handle: "@davidroams",
testimonial:
"The price tracking for flights and hotels saves me hundreds on every trip. Worth every penny of my subscription.",
rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/serious-concerned-guy-pointing-index-finger-up_74855-3681.jpg",
imageAlt: "David Anderson profile",
},
]}
showRating={true}
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
/>
</div>
<div id="features" data-section="features">
<FeatureCardNineteen
title="How Our Platform Works"
description="Four simple steps to plan your perfect journey"
tag="The Process"
tagIcon={Compass}
features={[
{
id: 1,
tag: "Step 1",
title: "Discover",
subtitle: "Find your perfect destination",
description:
"Browse through hundreds of destinations with detailed information, traveler reviews, and seasonal recommendations. Use our intelligent filters to narrow down by budget, climate, activities, and travel style.",
imageSrc:
"http://img.b2bpic.net/free-photo/close-up-modern-laptop-with-rate-charts-display-while-man-woman-working-business-project-design-computer-screen-with-data-chart-information-finance-analysis-desk_482257-40065.jpg",
imageAlt: "Destination discovery interface",
},
{
id: 2,
tag: "Step 2",
title: "Plan",
subtitle: "Build your itinerary",
description:
"Create a customized day-by-day itinerary with our interactive planner. Add accommodations, activities, restaurants, and transportation. Get AI-powered suggestions based on your preferences and real-time availability.",
imageSrc:
"http://img.b2bpic.net/free-vector/flat-design-ui-kit-collection_23-2149196760.jpg",
imageAlt: "Itinerary planning dashboard",
},
{
id: 3,
tag: "Step 3",
title: "Book",
subtitle: "Secure your reservations",
description:
"Book flights, hotels, and experiences directly through our platform with integrated payment processing. Access exclusive deals and partnerships with trusted providers worldwide.",
imageSrc:
"http://img.b2bpic.net/free-photo/health-care-doctor-help-concept_53876-121205.jpg",
imageAlt: "Booking confirmation screen",
},
{
id: 4,
tag: "Step 4",
title: "Share & Enjoy",
subtitle: "Make memories",
description:
"Share your itinerary with travel companions, get live updates, and access your plans offline. Post trip photos and connect with fellow travelers in our community.",
imageSrc:
"http://img.b2bpic.net/free-photo/lifestyle-people-office_23-2149173739.jpg",
imageAlt: "Shared itinerary collaboration",
},
]}
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
title="Why Choose Wanderly"
description="Our commitment to excellence reflected in numbers"
metrics={[
{
id: "1",
value: "180",
title: "Countries",
description: "Covered worldwide",
icon: Globe,
},
{
id: "2",
value: "50",
title: "thousand",
description: "Successful trips planned",
icon: TrendingUp,
},
{
id: "3",
value: "98",
title: "percent",
description: "Customer satisfaction rate",
icon: Heart,
},
{
id: "4",
value: "24",
title: "hours",
description: "Average support response",
icon: Clock,
},
]}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
/>
</div>
<div id="about" data-section="about">
<AboutMetric
title="Wanderly empowers travelers to discover, plan, and book their perfect journey with confidence. Founded by passionate travelers who understand your needs."
metrics={[
{
icon: Lightbulb,
label: "Innovation",
value: "AI-Powered Planning",
},
{ icon: Users, label: "Community", value: "100K+ Members" },
{ icon: Shield, label: "Security", value: "SSL Protected" },
{ icon: Zap, label: "Performance", value: "Lightning Fast" },
]}
useInvertedBackground={false}
metricsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
title="Frequently Asked Questions"
description="Find answers to common questions about our platform and services"
tag="Help & Support"
tagIcon={HelpCircle}
faqs={[
{
id: "1",
title: "How do I start planning a trip?",
content:
"Simply create a free account, click 'Start Planning', and follow our intuitive step-by-step guide. You can browse destinations, set your budget, and build your itinerary in minutes.",
},
{
id: "2",
title: "What payment methods do you accept?",
content:
"We accept all major credit cards, PayPal, Apple Pay, and Google Pay. All transactions are secured with SSL encryption and PCI compliance.",
},
{
id: "3",
title: "Can I share my itinerary with others?",
content:
"Absolutely! Use our 'Share Itinerary' feature to invite friends and family. They can view, edit, and contribute to the plan in real-time.",
},
{
id: "4",
title: "Is there a mobile app?",
content:
"Yes! Download our iOS and Android apps to access your itineraries offline, receive travel alerts, and manage bookings on the go.",
},
{
id: "5",
title: "What is your refund policy?",
content:
"Refunds depend on the specific booking. Hotel and flight refunds follow the partner's policy. Wanderly service fees are non-refundable unless we fail to provide service.",
},
{
id: "6",
title: "How do I get customer support?",
content:
"Contact us 24/7 via live chat, email, or phone. Our support team typically responds within 2-4 hours during business hours.",
},
]}
textboxLayout="default"
useInvertedBackground={false}
faqsAnimation="slide-up"
animationType="smooth"
/>
</div>
<div id="cta" data-section="cta">
<ContactFaq
ctaTitle="Ready to Start Your Adventure?"
ctaDescription="Join thousands of travelers who trust Wanderly to plan their perfect trips. Get started free today."
ctaButton={{ text: "Start Planning Now", href: "#planner" }}
ctaIcon={ArrowRight}
faqs={[
{
id: "1",
title: "Do I need an account to use the planner?",
content:
"You can browse destinations without an account, but you'll need to create one to save and book trips. Registration is quick and free.",
},
{
id: "2",
title: "What destinations have the best deals?",
content:
"Our 'Trending' section highlights current deals and off-season destinations. Use price alerts to get notified when prices drop for your favorite locations.",
},
{
id: "3",
title: "Can I plan trips for different group sizes?",
content:
"Yes! Adjust your group size at any time. Our planner calculates costs per person and suggests accommodations suitable for your group.",
},
]}
useInvertedBackground={false}
animationType="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={footerColumns}
bottomLeftText="© 2025 Wanderly. All rights reserved."
bottomRightText="Made for travelers, by travelers."
/>
</div>
</ThemeProvider>
);
}