434 lines
14 KiB
TypeScript
434 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="largeSizeMediumTitles"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "Services",
|
|
id: "features",
|
|
},
|
|
{
|
|
name: "Booking",
|
|
id: "product",
|
|
},
|
|
{
|
|
name: "Testimonials",
|
|
id: "testimonials",
|
|
},
|
|
{
|
|
name: "FAQ",
|
|
id: "faq",
|
|
},
|
|
]}
|
|
brandName="YatraNepal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitTestimonial
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "gradient-bars",
|
|
}}
|
|
title="Travel Across Nepal with YatraNepal"
|
|
description="Seamless, real-time, and secure bus booking. Experience the best way to travel between cities with live tracking, e-tickets, and verified comfort."
|
|
testimonials={[
|
|
{
|
|
name: "Anil K.",
|
|
handle: "@anilk",
|
|
testimonial: "Best bus booking service I've ever used in Nepal. Real-time GPS is a game changer!",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-confused-young-woman-looking-her-smartphone-app-with-shocked-disappointed-face-sh_1258-151526.jpg?_wi=1",
|
|
imageAlt: "luxury bus travel Nepal",
|
|
},
|
|
{
|
|
name: "Sunita R.",
|
|
handle: "@sunitar",
|
|
testimonial: "The digital QR ticket saved so much time. Highly recommend YatraNepal.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/western-female-backpacker-using-her-phone-indian-train_53876-65348.jpg",
|
|
imageAlt: "luxury bus travel Nepal",
|
|
},
|
|
{
|
|
name: "Bimal T.",
|
|
handle: "@bimalt",
|
|
testimonial: "Very convenient, payment through eSewa worked seamlessly. Five stars.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-curly-hair-using-her-mobile-phone-bus_23-2148753445.jpg?_wi=1",
|
|
imageAlt: "luxury bus travel Nepal",
|
|
},
|
|
{
|
|
name: "Rina M.",
|
|
handle: "@rinam",
|
|
testimonial: "Safe, reliable, and comfortable. My go-to for Kathmandu-Pokhara trips.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/travel-navigation-journey-vacation-trip-laptop-concept_53876-125037.jpg?_wi=1",
|
|
imageAlt: "luxury bus travel Nepal",
|
|
},
|
|
{
|
|
name: "Sajan P.",
|
|
handle: "@sajanp",
|
|
testimonial: "Excellent service and arrival updates kept me informed throughout the journey.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-person-doing-internet-shopping-using-cellphone_482257-115489.jpg?_wi=1",
|
|
imageAlt: "luxury bus travel Nepal",
|
|
},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Book Now",
|
|
href: "#product",
|
|
},
|
|
{
|
|
text: "Learn More",
|
|
href: "#about",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/portrait-confused-young-woman-looking-her-smartphone-app-with-shocked-disappointed-face-sh_1258-151526.jpg?_wi=2"
|
|
mediaAnimation="slide-up"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/handsome-man-standing-near-airport_1157-28060.jpg",
|
|
alt: "Traveller portrait",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/handsome-man-standing-near-airport_1157-28059.jpg",
|
|
alt: "Traveller portrait",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/businessman-with-luggage-using-mobile-phone_107420-95917.jpg",
|
|
alt: "Traveller portrait",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-girl-sitting-reading-book-drinking-coffee-outside-street_1303-21688.jpg",
|
|
alt: "Traveller portrait",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/passenger-waiting-station-smiles_23-2148770986.jpg",
|
|
alt: "Traveller portrait",
|
|
},
|
|
]}
|
|
marqueeItems={[
|
|
{
|
|
type: "text",
|
|
text: "Trusted by 50,000+ passengers",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "150+ Verified Buses",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Real-time GPS tracking",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Instant QR e-tickets",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "24/7 Customer Support",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
useInvertedBackground={true}
|
|
heading={[
|
|
{
|
|
type: "text",
|
|
content: "Redefining Travel in ",
|
|
},
|
|
{
|
|
type: "image",
|
|
src: "http://img.b2bpic.net/free-photo/western-female-backpacker-using-her-phone-indian-train_53876-65348.jpg",
|
|
alt: "Yatra Bus",
|
|
},
|
|
{
|
|
type: "text",
|
|
content: " Nepal",
|
|
},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Explore Features",
|
|
href: "#features",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNineteen
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
tag: "Digital",
|
|
title: "QR Digital Tickets",
|
|
subtitle: "Seamless entry",
|
|
description: "No paper needed. Use your smartphone to display your QR ticket at boarding.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-curly-hair-using-her-mobile-phone-bus_23-2148753445.jpg?_wi=2",
|
|
},
|
|
{
|
|
tag: "Live",
|
|
title: "GPS Tracking",
|
|
subtitle: "Real-time updates",
|
|
description: "Know exactly where your bus is at any moment during your journey.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/travel-navigation-journey-vacation-trip-laptop-concept_53876-125037.jpg?_wi=2",
|
|
},
|
|
{
|
|
tag: "Secure",
|
|
title: "Integrated Payments",
|
|
subtitle: "eSewa, Khalti, IME",
|
|
description: "Multiple secure payment gateways for a frictionless booking experience.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-person-doing-internet-shopping-using-cellphone_482257-115489.jpg?_wi=2",
|
|
},
|
|
]}
|
|
title="Comprehensive Travel Features"
|
|
description="Everything you need for a comfortable and efficient journey."
|
|
/>
|
|
</div>
|
|
|
|
<div id="product" data-section="product">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "1",
|
|
brand: "Luxury",
|
|
name: "Kathmandu to Pokhara",
|
|
price: "Rs. 1,200",
|
|
rating: 5,
|
|
reviewCount: "120",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/yellow-admission-ticket_1101-3251.jpg",
|
|
},
|
|
{
|
|
id: "2",
|
|
brand: "Standard",
|
|
name: "Kathmandu to Chitwan",
|
|
price: "Rs. 950",
|
|
rating: 4,
|
|
reviewCount: "85",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/copy-space-small-sign-with-black-friday-design_23-2148313146.jpg",
|
|
},
|
|
{
|
|
id: "3",
|
|
brand: "Luxury",
|
|
name: "Pokhara to Butwal",
|
|
price: "Rs. 1,500",
|
|
rating: 5,
|
|
reviewCount: "40",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-working-as-travel-agent_23-2150455559.jpg",
|
|
},
|
|
{
|
|
id: "4",
|
|
brand: "Standard",
|
|
name: "Kathmandu to Dharan",
|
|
price: "Rs. 1,800",
|
|
rating: 4,
|
|
reviewCount: "60",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-sitting-back-car-talking-phone_1303-20472.jpg",
|
|
},
|
|
{
|
|
id: "5",
|
|
brand: "Luxury",
|
|
name: "Pokhara to Janakpur",
|
|
price: "Rs. 2,100",
|
|
rating: 5,
|
|
reviewCount: "35",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-man-travelling-by-city-bus-using-smartphone_23-2148958082.jpg",
|
|
},
|
|
{
|
|
id: "6",
|
|
brand: "Standard",
|
|
name: "Kathmandu to Biratnagar",
|
|
price: "Rs. 1,900",
|
|
rating: 4,
|
|
reviewCount: "55",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/magician-s-hand-wearing-white-gloves-performing-trick-playing-cards_23-2147880760.jpg",
|
|
},
|
|
]}
|
|
title="Popular Routes"
|
|
description="Book your seat for these high-demand routes today."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardFourteen
|
|
useInvertedBackground={false}
|
|
title="YatraNepal in Numbers"
|
|
tag="Trusted by Thousands"
|
|
metrics={[
|
|
{
|
|
id: "1",
|
|
value: "50,000+",
|
|
description: "Happy Passengers",
|
|
},
|
|
{
|
|
id: "2",
|
|
value: "150+",
|
|
description: "Verified Buses",
|
|
},
|
|
{
|
|
id: "3",
|
|
value: "45+",
|
|
description: "Daily Routes",
|
|
},
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Anil K.",
|
|
role: "Traveler",
|
|
testimonial: "Amazing experience, very helpful app for Nepal travel.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/elegant-businesswoman-with-her-red-suitcase_1139-425.jpg",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Sunita R.",
|
|
role: "Student",
|
|
testimonial: "Reliable and fast. Love the notification features.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cute-woman-with-old-camera-smiling_23-2147846985.jpg",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Bimal T.",
|
|
role: "Business Owner",
|
|
testimonial: "Booking system is very intuitive.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/tourism-vacation-excited-guy-tourist-going-holiday-trip-showing-passport-with-tickets-hol_1258-155516.jpg",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Rina M.",
|
|
role: "Tourist",
|
|
testimonial: "Great service throughout the trip.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-traveling-woman-with-hat-backpack-holding-thermos_23-2148648661.jpg",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Sajan P.",
|
|
role: "Professional",
|
|
testimonial: "Best bus service, GPS tracking is accurate.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/black-businessman-happy-expression_1194-2623.jpg",
|
|
},
|
|
]}
|
|
title="Passenger Reviews"
|
|
description="What our users say about us."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "1",
|
|
title: "Can I book a seat for someone else?",
|
|
content: "Yes, you can enter the passenger's details during the booking process.",
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "What payment methods are supported?",
|
|
content: "We support eSewa, Khalti, IME Pay, and major credit cards via Stripe.",
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "How do I get my ticket?",
|
|
content: "Your ticket is generated digitally and sent to your email and accessible via the app.",
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "Can I track my bus?",
|
|
content: "Yes, our app includes live GPS tracking for all buses on our platform.",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/happy-men-elbow-bumping-while-greeting-bus-station_637285-12240.jpg"
|
|
mediaAnimation="slide-up"
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about YatraNepal."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "rotated-rays-animated",
|
|
}}
|
|
text="Need assistance? Our support team is ready to help 24/7."
|
|
buttons={[
|
|
{
|
|
text: "Contact Support",
|
|
href: "mailto:hello@yatranepal.com",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="YatraNepal"
|
|
leftLink={{
|
|
text: "Privacy Policy",
|
|
href: "#",
|
|
}}
|
|
rightLink={{
|
|
text: "Terms of Service",
|
|
href: "#",
|
|
}}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|