241 lines
9.1 KiB
TypeScript
241 lines
9.1 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
|
|
import MediaAbout from "@/components/sections/about/MediaAbout";
|
|
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import FaqBase from "@/components/sections/faq/FaqBase";
|
|
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
|
import FooterBase from "@/components/sections/footer/FooterBase";
|
|
import Link from "next/link";
|
|
import { Zap } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "Live Status", id: "live-status" },
|
|
{ name: "PNR Check", id: "pnr-status" },
|
|
{ name: "How It Works", id: "how-it-works" },
|
|
{ name: "Support", id: "contact" },
|
|
];
|
|
|
|
const footerColumns = [
|
|
{
|
|
title: "Service",
|
|
items: [
|
|
{ label: "Track Train", href: "/" },
|
|
{ label: "Check PNR", href: "/pnr" },
|
|
{ label: "Live Status", href: "#live-status" },
|
|
{ label: "FAQ", href: "#faq" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{ label: "About Us", href: "/about" },
|
|
{ label: "Contact", href: "/contact" },
|
|
{ label: "Blog", href: "/blog" },
|
|
{ label: "Careers", href: "/careers" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal",
|
|
items: [
|
|
{ label: "Privacy Policy", href: "/privacy" },
|
|
{ label: "Terms of Service", href: "/terms" },
|
|
{ label: "Disclaimer", href: "/disclaimer" },
|
|
{ label: "Cookie Policy", href: "/cookies" },
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="small"
|
|
sizing="largeSmall"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="RailTrack"
|
|
navItems={navItems}
|
|
button={{ text: "Track Now", href: "#hero" }}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
title="Track Your Train in Real-Time"
|
|
description="Enter your 5-digit train number and get instant live status updates including current location, delay information, and station arrivals. Simple, fast, and reliable train tracking."
|
|
tag="Live Tracking"
|
|
tagIcon={Zap}
|
|
background={{ variant: "plain" }}
|
|
buttons={[
|
|
{ text: "Track Status", href: "#live-status" },
|
|
{ text: "Check PNR", href: "/pnr" },
|
|
]}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/empty-railroad-platform_1359-702.jpg",
|
|
imageAlt: "Train tracking interface",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-vector/underground-infographic-set_1284-16818.jpg",
|
|
imageAlt: "Real-time status visualization",
|
|
},
|
|
]}
|
|
rating={5}
|
|
ratingText="Trusted by 500K+ Indian Travelers"
|
|
/>
|
|
</div>
|
|
|
|
<div id="live-status" data-section="live-status">
|
|
<MediaAbout
|
|
title="Live Status Timeline"
|
|
description="View your train's journey station by station. See passed stations in grey, upcoming stations highlighted in bold blue, real-time delays in red, and platform numbers in green badges. Every detail you need at a glance."
|
|
tag="Status Tracking"
|
|
imageSrc="http://img.b2bpic.net/free-vector/underground-infographic-set_1284-16818.jpg"
|
|
imageAlt="Live status timeline display"
|
|
buttons={[{ text: "Start Tracking", href: "#hero" }]}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pnr-section" data-section="pnr-section">
|
|
<FeatureCardSixteen
|
|
title="PNR Status Lookup"
|
|
description="Enter your 10-digit PNR number to get complete booking and journey details in one card view."
|
|
tag="Passenger Info"
|
|
negativeCard={{
|
|
items: [
|
|
"Manual phone calls to enquiry",
|
|
"Waiting hours for information",
|
|
"Unclear booking status",
|
|
"No real-time updates",
|
|
],
|
|
}}
|
|
positiveCard={{
|
|
items: [
|
|
"Instant PNR status check",
|
|
"Live booking confirmation",
|
|
"Current passenger status",
|
|
"Seat and coach details",
|
|
"Confirmed vs RAC status",
|
|
],
|
|
}}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
names={[
|
|
"Indian Railways",
|
|
"IRCTC",
|
|
"Ministry of Railways",
|
|
"Railway Board",
|
|
"Transportation Ministry",
|
|
]}
|
|
title="Trusted by Official Partners"
|
|
description="Verified integration with Indian Railways official systems and government transportation authorities."
|
|
tag="Official Partners"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
faqs={[
|
|
{
|
|
id: "1",
|
|
title: "How do I track my train?",
|
|
content:
|
|
"Enter your 5-digit train number and the journey date in the search bar on our home page. You'll instantly see live location, all station stops, delays, and platform information.",
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "What is a PNR number?",
|
|
content:
|
|
"A Passenger Name Record (PNR) is a unique 10-digit confirmation number given when you book a train ticket. Use it to check your exact booking status, seat number, and passenger details.",
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "Is the data real-time?",
|
|
content:
|
|
"Yes! Our system is integrated with official Indian Railways data and updates every 2-3 minutes. You get the most current train location and status information available.",
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "Can I use this for multiple trains?",
|
|
content:
|
|
"Absolutely! Track unlimited trains simultaneously. Each search gives you complete real-time details about that specific train's journey.",
|
|
},
|
|
{
|
|
id: "5",
|
|
title: "What does the red delay time mean?",
|
|
content:
|
|
"Red delay time shows how many minutes the train is running late from its scheduled time. Green indicates the train is on schedule.",
|
|
},
|
|
{
|
|
id: "6",
|
|
title: "How accurate are platform numbers?",
|
|
content:
|
|
"Platform numbers are displayed in green badges and are updated based on the latest railway authority information, typically confirmed 1-2 hours before arrival.",
|
|
},
|
|
]}
|
|
title="Frequently Asked Questions"
|
|
description="Get quick answers about train tracking, PNR status, and how to use our service."
|
|
tag="Help & Support"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="monetization" data-section="monetization">
|
|
<ContactSplitForm
|
|
title="Book Your Meal & Travel Better"
|
|
description="Reserve meals for your journey through our partner food service. Enjoy delicious food delivered to your seat."
|
|
inputs={[
|
|
{ name: "train_number", type: "text", placeholder: "Train Number", required: true },
|
|
{ name: "pnr", type: "text", placeholder: "PNR Number", required: true },
|
|
]}
|
|
textarea={{
|
|
name: "food_preference",
|
|
placeholder: "Meal preferences and dietary requirements",
|
|
rows: 3,
|
|
required: false,
|
|
}}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/people-traveling-subway-winter-time_23-2149217900.jpg"
|
|
imageAlt="Meal booking service"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
buttonText="Book Meal & Earn Rewards"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
columns={footerColumns}
|
|
logoText="RailTrack"
|
|
copyrightText="© 2025 RailTrack. Unofficial Indian Railway Tracking Tool. Not affiliated with Indian Railways."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |