Merge version_4 into main

Merge version_4 into main

src/app/admin/dashboard/page.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function AdminDashboardPage() {
+  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: "Dashboard", id: "#" },
+                { name: "Reports", id: "#" },
+                { name: "Settings", id: "#" },
+              ]}
+              brandName="YatraAdmin"
+            />
+        </div>
+
+        <div id="metrics" data-section="metrics" className="py-20">
+          <MetricCardFourteen
+            title="Admin Analytics"
+            tag="System Overview"
+            metrics={[
+              { id: "1", value: "852", description: "Total Bookings Today" },
+              { id: "2", value: "Rs 4.2L", description: "Revenue Collected" },
+              { id: "3", value: "98%", description: "Payment Reconciliation Rate" },
+            ]}
+            metricsAnimation="slide-up"
+            useInvertedBackground={false}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="YatraAdmin"
+            leftLink={{ text: "Support", href: "#" }}
+            rightLink={{ text: "Logout", href: "/" }}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/admin/page.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function AdminDashboardPage() {
+  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: "/" },
+                { name: "Dashboard", id: "/admin" },
+              ]}
+              brandName="YatraNepal Admin"
+            />
+        </div>
+
+        <main style={{ padding: "4rem 2rem", minHeight: "80vh" }}>
+          <h1 style={{ fontSize: "2.5rem", fontWeight: "bold", marginBottom: "2rem" }}>Admin Dashboard</h1>
+          <div style={{ display: "grid", gap: "2rem", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))" }}>
+            <div style={{ padding: "2rem", borderRadius: "1rem", border: "1px solid #e5e7eb" }}>
+                <h2 style={{ fontSize: "1.5rem", fontWeight: "bold" }}>Bus Management</h2>
+                <p style={{ marginTop: "1rem" }}>Manage fleet, registration numbers, and bus types.</p>
+            </div>
+            <div style={{ padding: "2rem", borderRadius: "1rem", border: "1px solid #e5e7eb" }}>
+                <h2 style={{ fontSize: "1.5rem", fontWeight: "bold" }}>Route Management</h2>
+                <p style={{ marginTop: "1rem" }}>Configure routes, schedules, and stop points.</p>
+            </div>
+            <div style={{ padding: "2rem", borderRadius: "1rem", border: "1px solid #e5e7eb" }}>
+                <h2 style={{ fontSize: "1.5rem", fontWeight: "bold" }}>Driver Management</h2>
+                <p style={{ marginTop: "1rem" }}>Assign drivers, track certifications, and performance.</p>
+            </div>
+          </div>
+        </main>
+
+        <div id="footer" data-section="footer">
+            <FooterLogoReveal
+            logoText="YatraNepal"
+            leftLink={{ text: "Privacy Policy", href: "#" }}
+            rightLink={{ text: "Terms of Service", href: "#" }}
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/driver/page.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function DriverDashboardPage() {
+  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: "/" },
+              { name: "Dashboard", id: "#dashboard" },
+              { name: "Trips", id: "#trips" },
+              { name: "Passengers", id: "#passengers" }
+            ]}
+            brandName="YatraNepal Driver"
+          />
+        </div>
+
+        <div id="dashboard" data-section="dashboard">
+          <FeatureCardTwelve
+            title="Driver Dashboard"
+            description="Manage your daily trips, track your GPS, and oversee passenger lists."
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            features={[
+              { id: "1", label: "Status", title: "Active", items: ["GPS: Online", "Status: Available", "Next Trip: 2:00 PM"], buttons: [{ text: "Update Status" }] },
+              { id: "2", label: "Trips", title: "Upcoming", items: ["KT-PKR (14:00)", "PKR-BTL (18:00)"], buttons: [{ text: "View Details" }] },
+              { id: "3", label: "Passengers", title: "Current List", items: ["Sita Sharma (Seat 1A)", "Ram Thapa (Seat 2B)"], buttons: [{ text: "View Manifest" }] }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="YatraNepal Driver"
+            leftLink={{ text: "Privacy Policy", href: "#" }}
+            rightLink={{ text: "Terms of Service", href: "#" }}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/login/page.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+export default function LoginPage() {
+  const [isLogin, setIsLogin] = useState(true);
+  
+  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"
+    >
+      <div className="min-h-screen flex items-center justify-center p-6">
+        <div className="w-full max-w-md p-8 border rounded-2xl bg-card shadow-lg">
+          <h1 className="text-3xl font-bold mb-6 text-center">{isLogin ? "Admin Login" : "Admin Signup"}</h1>
+          <form className="flex flex-col gap-4">
+            {!isLogin && (
+              <input type="text" placeholder="Admin Name" className="p-3 border rounded-lg" />
+            )}
+            <input type="email" placeholder="Admin Email" className="p-3 border rounded-lg" />
+            <input type="password" placeholder="Password" className="p-3 border rounded-lg" />
+            <button type="submit" className="w-full bg-primary p-3 rounded-lg text-white font-semibold">{isLogin ? "Login" : "Sign Up"}</button>
+          </form>
+          <p className="mt-4 text-center text-sm">
+            {isLogin ? "Don't have an account?" : "Already have an account?"} 
+            <button onClick={() => setIsLogin(!isLogin)} className="ml-1 text-primary underline">{isLogin ? "Sign Up" : "Login"}</button>
+          </p>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -12,7 +12,6 @@ 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';
-import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
 
 export default function LandingPage() {
   return (
@@ -34,10 +33,10 @@ export default function LandingPage() {
       navItems={[
         { name: "Home", id: "hero" },
         { name: "Services", id: "features" },
-        { name: "Admin Dashboard", id: "admin" },
         { name: "Booking", id: "product" },
         { name: "Testimonials", id: "testimonials" },
         { name: "FAQ", id: "faq" },
+        { name: "Admin", id: "/admin/dashboard" },
       ]}
       brandName="YatraNepal"
     />
@@ -49,23 +48,32 @@ export default function LandingPage() {
       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={[]}
-      buttons={[{ text: "Book Now", href: "#product" }, { text: "Learn More", href: "#about" }]}
+      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"
-    />
-  </div>
-
-  <div id="admin" data-section="admin">
-    <FeatureCardEight
-      title="Admin Control Panel"
-      description="Monitor your fleet, manage updates, and analyze performance data in real-time."
-      textboxLayout="split"
-      useInvertedBackground={true}
-      features={[
-        { title: "Live GPS Tracking", description: "Monitor the real-time location and status of every bus in your fleet directly from the dashboard.", imageSrc: "http://img.b2bpic.net/free-photo/travel-navigation-journey-vacation-trip-laptop-concept_53876-125037.jpg" },
-        { title: "System Management", description: "Update schedules, bus availability, and pricing configuration with automated deployment.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-person-doing-internet-shopping-using-cellphone_482257-115489.jpg" },
-        { title: "Performance Analytics", description: "Access detailed passenger data, route popularity, and revenue insights for strategic decision-making.", imageSrc: "http://img.b2bpic.net/free-photo/woman-with-curly-hair-using-her-mobile-phone-bus_23-2148753445.jpg" }
+      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>
@@ -73,8 +81,14 @@ export default function LandingPage() {
   <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" }]}
+      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>
 
@@ -100,7 +114,11 @@ export default function LandingPage() {
       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: "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."
@@ -112,7 +130,11 @@ export default function LandingPage() {
       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" }]}
+      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>
@@ -122,7 +144,13 @@ export default function LandingPage() {
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={true}
-      testimonials={[]}
+      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."
     />
@@ -132,7 +160,16 @@ export default function LandingPage() {
       <FaqSplitMedia
       textboxLayout="split"
       useInvertedBackground={false}
-      faqs={[]}
+      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>
@@ -142,7 +179,9 @@ export default function LandingPage() {
       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" }]}
+      buttons={[
+        { text: "Contact Support", href: "mailto:hello@yatranepal.com" },
+      ]}
     />
   </div>
 

src/app/qr-ticket/page.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import TextBox from '@/components/Textbox';
+import ButtonShiftHover from '@/components/button/ButtonShiftHover/ButtonShiftHover';
+import { useState } from 'react';
+
+export default function QRTicketPage() {
+  const [ticketGenerated, setTicketGenerated] = useState(false);
+
+  const handleDownload = () => {
+    alert("QR Digital Ticket downloaded successfully!");
+  };
+
+  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: "/" },
+              { name: "Services", id: "/" },
+              { name: "Booking", id: "/" },
+              { name: "Testimonials", id: "/" },
+              { name: "FAQ", id: "/" },
+            ]}
+            brandName="YatraNepal"
+          />
+        </div>
+
+        <div className="pt-32 pb-20 px-6 max-w-4xl mx-auto text-center">
+          <TextBox
+            title="Digital QR Ticket"
+            description="Your journey details are ready. Display the QR code at boarding time."
+            textboxLayout="default"
+            center={true}
+          />
+
+          <div className="mt-12 p-8 border-2 border-dashed rounded-3xl bg-white shadow-sm">
+            {!ticketGenerated ? (
+              <div className="space-y-6">
+                <p className="text-lg">Generate your ticket for entry.</p>
+                <ButtonShiftHover text="Generate Ticket" onClick={() => setTicketGenerated(true)} />
+              </div>
+            ) : (
+              <div className="space-y-8">
+                <div className="w-64 h-64 bg-gray-900 mx-auto rounded-lg flex items-center justify-center">
+                  <span className="text-white">[QR CODE IMAGE]</span>
+                </div>
+                <div className="text-left space-y-2 border-t pt-6">
+                  <p><strong>Route:</strong> Kathmandu to Pokhara</p>
+                  <p><strong>Date:</strong> 2025-05-15</p>
+                  <p><strong>Seat:</strong> 12A</p>
+                </div>
+                <ButtonShiftHover text="Download Ticket" onClick={handleDownload} />
+              </div>
+            )}
+          </div>
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/search/page.tsx

@@ -1,40 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import Input from '@/components/form/Input';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-
-export default function BusSearchPage() {
-  const [from, setFrom] = useState("");
-  const [to, setTo] = useState("");
-
-  return (
-    <ThemeProvider>
-      <NavbarStyleFullscreen
-        navItems={[{ name: "Home", id: "/" }, { name: "Search Buses", id: "/search" }]} 
-        brandName="YatraNepal"
-      />
-      <div className="min-h-screen pt-32 pb-20 px-6 max-w-4xl mx-auto">
-        <h1 className="text-4xl font-bold mb-8 text-center">Search Your Journey</h1>
-        <div className="grid gap-6 md:grid-cols-2 p-8 bg-white/5 rounded-2xl">
-          <Input value={from} onChange={setFrom} placeholder="From (e.g. Kathmandu)" />
-          <Input value={to} onChange={setTo} placeholder="To (e.g. Pokhara)" />
-          <button className="md:col-span-2 px-6 py-3 bg-primary text-white rounded-full font-bold hover:opacity-90 transition">
-            Find Buses
-          </button>
-        </div>
-        <div className="mt-12">
-            {/* Placeholder for future bus results */}
-            <p className="text-center opacity-60">Enter details to search for available buses.</p>
-        </div>
-      </div>
-      <FooterLogoReveal
-        logoText="YatraNepal"
-        leftLink={{ text: "Privacy Policy", href: "#" }}
-        rightLink={{ text: "Terms of Service", href: "#" }}
-      />
-    </ThemeProvider>
-  );
-}

src/app/signup/page.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ContactForm from '@/components/form/ContactForm';
+
+export default function SignupPage() {
+  const [email, setEmail] = useState("");
+
+  const handleSignup = (email: string) => {
+    console.log("Signing up:", email);
+  };
+
+  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"
+    >
+      <NavbarStyleFullscreen
+        navItems={[{ name: "Home", id: "/" }, { name: "Login", id: "/login" }]}
+        brandName="YatraNepal"
+      />
+      <div className="min-h-screen flex items-center justify-center pt-24">
+        <ContactForm
+          title="Join YatraNepal"
+          description="Create your account to start booking bus tickets."
+          tag="Sign Up"
+          buttonText="Create Account"
+          onSubmit={handleSignup}
+          useInvertedBackground={false}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}