Enhanced ui and created moving strip for payment modes

.github/workflows/greetings.yml

@@ -13,9 +13,9 @@ jobs:
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           issue-message: |
-            Thank you for opening your first issue.  
+            Thank you for opening your issue.  
             We appreciate your contribution and will review it soon.
 
           pr-message: |
-            Thank you for submitting your first pull request.  
+            Thank you for submitting your pull request.  
             We appreciate your effort and will review it shortly.

src/App.css

@@ -44,4 +44,50 @@ html {
 li,
 button {
   cursor: pointer;
-}
+}
+
+.page-heading::first-letter {
+  color: rgb(93, 93, 231);
+}
+
+hr {
+  border: none;
+  border-top: 1px solid #d5d1d1;
+}
+
+.nav-item.active {
+  color: rgb(93, 93, 231);
+}
+
+.nav-item {
+  position: relative;
+}
+
+.nav-item::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  translate: 0 2px;
+  width: 100%;
+  height: 2px;
+  background-color: rgb(93, 93, 231);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.3s ease;
+}
+
+.nav-item.active::after {
+  transform: scaleX(1);
+}
+
+@keyframes scroll {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-50%); } 
+}
+
+.scroll-strip {
+  display: flex;
+  width: max-content;     
+  animation: scroll 25s linear infinite;
+}

src/components/Footer.tsx

@@ -214,17 +214,50 @@ function Footer() {
               </a>
             </div>
           </div>
+        </div>
+        <div className="flex flex-col flex-wrap justify-start gap-4">
+          <div className={`w-full mb-2 text-center font-bold ${currentTheme.theme === "light" ? "text-gray-800" : "text-gray-300"}`}>
+            Our Payment Gateways
+          </div>
+          <div className="overflow-hidden -translate-x-40 z-100">
+            <div className="flex scroll-strip">
+              {/* first set */}
+              <img src="/svg/pmodes/amex.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/eway.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/paypal.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/ebay.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/stripe.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/unionpay.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/apple-pay.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/bitcoin.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/citi.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/moneygram.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/google-wallet.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/clickbank.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/ebay.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/shopify.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/bluepay.png" className="h-16 w-auto mx-4" />
 
-          <div className="flex flex-wrap justify-start gap-4">
-            <img src="/svg/pmodes/visa.png" alt="Visa" className="h-20 w-16 cursor-pointer" />
-            <img src="/svg/pmodes/amex.png" alt="Amex" className="h-20 w-18 cursor-pointer" />
-            <img src="/svg/pmodes/eway.png" alt="Eway" className="h-20 w-16 cursor-pointer" />
-            <img src="/svg/pmodes/paypal.png" alt="Paypal" className="h-20 w-20 cursor-pointer" />
-            <img src="/svg/pmodes/stripe.png" alt="Stripe" className="h-20 w-20 cursor-pointer" />
-            <img src="/svg/pmodes/unionpay.png" alt="Unionpay" className="h-20 w-18 cursor-pointer" />
+              {/* duplicate set */}
+              <img src="/svg/pmodes/amex.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/eway.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/paypal.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/ebay.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/stripe.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/unionpay.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/apple-pay.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/bitcoin.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/citi.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/moneygram.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/google-wallet.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/clickbank.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/ebay.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/shopify.png" className="h-16 w-auto mx-4" />
+              <img src="/svg/pmodes/bluepay.png" className="h-16 w-auto mx-4" />
+            </div>
           </div>
         </div>
-        <hr />
+        <hr className="mt-5" />
         <div className="mt-8 flex flex-col md:flex-row md:justify-between items-center gap-6">
           <div className="flex flex-wrap gap-8 justify-center md:justify-start items-center">
             <div>
@@ -244,11 +277,15 @@ function Footer() {
             </div>
             <div className="movingbus">
               <a href="https://www.redbus.in">
-                <img
+                {currentTheme.theme === "light" ? <img
+                  src="/svg/redbus-light.png"
+                  alt="RedBus"
+                  className="cursor-pointer h-8 w-13 sm:h-8 sm:w-13 md:h-8 md:w-13"
+                /> : <img
                   src="/svg/redbus.png"
                   alt="RedBus"
                   className="cursor-pointer h-16 w-18 sm:h-16 sm:w-18 md:h-16 md:w-18"
-                />
+                />}
               </a>
             </div>
           </div>

src/components/Navbar.tsx

@@ -3,7 +3,7 @@ import {
   HoverCardTrigger,
   HoverCardContent,
 } from "@radix-ui/react-hover-card";
-import { NavLink } from "react-router-dom";
+import { useLocation, NavLink } from "react-router-dom";
 import {
   Card,
   CardHeader,
@@ -18,6 +18,7 @@ import { ThemeContext } from "@/contexts/ThemeContext";
 function Navbar() {
   const currentTheme = useContext(ThemeContext);
   if (!currentTheme) return null;
+  const location = useLocation();
 
   return (
     <nav
@@ -26,17 +27,22 @@ function Navbar() {
         : "bg-gray-800 text-gray-200"
         } z-50`}
     >
-      <div className="flex items-center justify-between w-full md:w-auto mb-2 md:mb-0">
-        <a href="/" className="flex items-center space-x-2">
+      <div className="flex flex-shrink-0 items-center justify-between w-full md:w-auto mb-2 md:mb-0">
+        <NavLink
+          to="/"
+          className={({ isActive }) =>
+            `flex items-center space-x-2 relative ${isActive ? "active" : ""}`
+          }
+        >
           <img
             src={currentTheme.theme === "light" ? "/logo.png" : "/logo1.png"}
             alt="WanderWise"
             className="h-10 sm:h-12 md:h-14 w-auto"
           />
-        </a>
+        </NavLink>
         <button
           id="theme"
-          className="ml-4 text-gray-400 hover:text-gray-600"
+          className="ml-4 sm:mr-4 text-gray-400 hover:text-gray-600"
           onClick={currentTheme.toggleTheme}
         >
           {currentTheme.theme === "light" ? (
@@ -77,15 +83,23 @@ function Navbar() {
           <NavLink
             key={item.to}
             to={item.to}
-            className="flex flex-col items-center text-center"
+            className={({ isActive }) =>
+              `nav-item flex flex-col items-center text-center ${isActive || (item.to === "/flights" && location.pathname === "/") ? "active" : ""
+              }`
+            }
           >
             <img src={item.icon} alt={item.label} className="w-6 h-6 mb-1" />
             {item.label}
           </NavLink>
         ))}
       </div>
       <div className="flex items-center justify-center gap-4 md:gap-6 mt-3 md:mt-0">
-        <NavLink to="/booking">
+        <NavLink
+          to="/booking"
+          className={({ isActive }) =>
+            `flex items-center text-center flex-shrink-0 sm:ml-12 ${isActive ? "border-2 p-2 border-indigo-500 rounded-md" : ""}`
+          }
+        >
           <HoverCard>
             <HoverCardTrigger>
               <div className="flex items-center text-center">
@@ -124,16 +138,16 @@ function Navbar() {
         <NavLink to="/auth">
           <HoverCard>
             <HoverCardTrigger>
-              <div className="flex items-center border-2 border-indigo-400 text-indigo-400 rounded-lg px-2 py-1 text-xs sm:text-sm font-medium">
+              <div className="flex items-center border-2 border-indigo-400 text-indigo-400 rounded-lg px-2 py-1 text-xs font-medium">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  className="w-4 h-4 text-indigo-400 sm:w-5 sm:h-5 mr-1"
+                  className="w-4 h-4 text-indigo-400 mr-1 sm:translate-0.5"
                   fill="currentColor"
                   viewBox="0 0 24 24"
                 >
                   <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
                 </svg>
-                <span className="whitespace-nowrap">Login/Signup</span>
+                <span className="whitespace-nowrap sm:block md:hidden lg:block">Login/Signup</span>
               </div>
             </HoverCardTrigger>
             <HoverCardContent>
@@ -147,8 +161,7 @@ function Navbar() {
                 <CardContent>
                   <div className="flex justify-center">
                     <Button
-                      variant="secondary"
-                      className="cursor-pointer w-full p-2"
+                      className="cursor-pointer bg-indigo-500 text-white w-full p-2"
                       onClick={() => { }}
                     >
                       Login/Signup

src/pages/Booking.tsx

@@ -9,10 +9,9 @@ export default function Booking() {
     <div
       className={`flex flex-col md:flex-row min-h-screen w-full 
         pt-[250px] sm:pt-[200px] md:pt-[100px] lg:pt-[100px] 
-        overflow-x-hidden ${
-          currentTheme.theme === "light"
-            ? "bg-gradient-to-r from-white to-gray-200"
-            : "bg-gradient-to-r from-gray-800 to-gray-700"
+        overflow-x-hidden ${currentTheme.theme === "light"
+          ? "bg-gradient-to-r from-white to-gray-200"
+          : "bg-gradient-to-r from-gray-800 to-gray-700"
         }`}
     >
       <div className="w-full md:w-1/2 flex justify-center items-center p-4 md:p-8">
@@ -24,18 +23,14 @@ export default function Booking() {
       </div>
       <div className="w-full md:w-1/2 flex flex-col justify-center items-start p-4 md:p-8 lg:p-16 text-left">
         <h1
-          className={`text-3xl sm:text-4xl md:text-5xl font-bold mb-6 leading-snug ${
-            currentTheme.theme === "light" ? "text-gray-800" : "text-gray-300"
-          }`}
-        >
-          <span className="inline-block mr-1 text-indigo-500">S</span>
-          implify Your Bookings
+          className={`page-heading text-3xl sm:text-4xl md:text-5xl font-bold mb-6 leading-snug ${currentTheme.theme === "light" ? "text-gray-800" : "text-gray-300"
+            }`}
+        >Simplify Your Bookings
         </h1>
 
         <p
-          className={`text-sm sm:text-base md:text-lg mb-4 leading-relaxed ${
-            currentTheme.theme === "light" ? "text-gray-700" : "text-gray-400"
-          }`}
+          className={`text-sm sm:text-base md:text-lg mb-4 leading-relaxed ${currentTheme.theme === "light" ? "text-gray-700" : "text-gray-400"
+            }`}
         >
           Planning ahead has never been easier. Our booking section is built to
           help you reserve services quickly and effortlessly, giving you a smooth,
@@ -47,9 +42,8 @@ export default function Booking() {
         </p>
 
         <p
-          className={`text-sm sm:text-base md:text-lg leading-relaxed ${
-            currentTheme.theme === "light" ? "text-gray-700" : "text-gray-400"
-          }`}
+          className={`text-sm sm:text-base md:text-lg leading-relaxed ${currentTheme.theme === "light" ? "text-gray-700" : "text-gray-400"
+            }`}
         >
           We value your time and flexibility. That’s why our system lets you
           easily modify or cancel bookings, putting you in control of your plans.

src/pages/Bus.tsx

@@ -24,11 +24,9 @@ export default function Bus() {
 
       <div className="w-full md:w-1/2 flex flex-col justify-center items-start p-8 md:p-16 text-left">
         <h1
-          className={`text-4xl md:text-5xl font-bold mb-6 leading-tight ${currentTheme.theme === "light" ? "text-gray-800" : "text-gray-300"
+          className={`page-heading text-4xl md:text-5xl font-bold mb-6 leading-tight ${currentTheme.theme === "light" ? "text-gray-800" : "text-gray-300"
             }`}
-        >
-          <span className="inline-block mr-1 text-indigo-500">T</span>
-          ravel Smarter, Ride Easier
+        > Travel Smarter, Ride Easier
         </h1>
 
         <p

src/pages/Cabs.tsx

@@ -24,11 +24,9 @@ export default function Cabs() {
 
       <div className="w-full md:w-1/2 flex flex-col justify-center items-start p-8 md:p-16 text-left">
         <h1
-          className={`text-3xl md:text-5xl font-bold mb-6 leading-tight ${currentTheme.theme === "light" ? "text-gray-800" : "text-gray-300"
+          className={`page-heading text-3xl md:text-5xl font-bold mb-6 leading-tight ${currentTheme.theme === "light" ? "text-gray-800" : "text-gray-300"
             }`}
-        >
-          <span className="inline-block mr-1 text-indigo-500">B</span>
-          ook Your Ride Instantly
+        > Book Your Ride Instantly
         </h1>
 
         <p

src/pages/Flight.tsx

@@ -24,11 +24,10 @@ export default function Flight() {
 
       <div className="w-full md:w-1/2 flex flex-col justify-center items-start p-8 md:p-16 text-left">
         <h1
-          className={`text-3xl md:text-5xl font-bold mb-6 leading-tight ${currentTheme.theme === "light" ? "text-gray-800" : "text-gray-300"
+          className={`page-heading text-3xl md:text-5xl font-bold mb-6 leading-tight ${currentTheme.theme === "light" ? "text-gray-800" : "text-gray-300"
             }`}
         >
-          <span className="inline-block mr-1 text-indigo-500">F</span>
-          ly Smarter, Travel Better
+          Fly Smarter, Travel Better
         </h1>
 
         <p

src/pages/Holidays.tsx

@@ -23,11 +23,10 @@ export default function Holidays() {
       </div>
       <div className="w-full md:w-1/2 flex flex-col justify-center items-start p-8 md:p-16 text-left">
         <h1
-          className={`text-4xl md:text-5xl font-bold mb-6 leading-tight ${currentTheme.theme === "light" ? "text-gray-800" : "text-gray-300"
+          className={`page-heading text-4xl md:text-5xl font-bold mb-6 leading-tight ${currentTheme.theme === "light" ? "text-gray-800" : "text-gray-300"
             }`}
         >
-          <span className="inline-block mr-1 text-indigo-500">U</span>
-          nforgettable Holidays, Just a Click Away
+          Unforgettable Holidays, Just a Click Away
         </h1>
 
         <p

src/pages/Hotel.tsx

@@ -24,11 +24,10 @@ export default function Hotel() {
 
       <div className="w-full md:w-1/2 flex flex-col justify-center items-start p-8 md:p-16 text-left">
         <h1
-          className={`text-3xl md:text-5xl font-bold mb-6 leading-tight ${currentTheme.theme === "light" ? "text-gray-800" : "text-gray-300"
+          className={`page-heading text-3xl md:text-5xl font-bold mb-6 leading-tight ${currentTheme.theme === "light" ? "text-gray-800" : "text-gray-300"
             }`}
         >
-          <span className="inline-block mr-1 text-indigo-500">Y</span>
-          our Ideal Stay, One Click Away
+          Your Ideal Stay, One Click Away
         </h1>
 
         <p

src/pages/Trains.tsx

@@ -24,11 +24,10 @@ export default function Trains() {
 
       <div className="w-full md:w-1/2 flex flex-col justify-center items-start p-8 md:p-16 text-left">
         <h1
-          className={`text-3xl md:text-5xl font-bold mb-6 leading-tight ${currentTheme.theme === "light" ? "text-gray-800" : "text-gray-300"
+          className={`page-heading text-3xl md:text-5xl font-bold mb-6 leading-tight ${currentTheme.theme === "light" ? "text-gray-800" : "text-gray-300"
             }`}
         >
-          <span className="inline-block mr-1 text-indigo-500">Y</span>
-          our Journey, On Track
+          Your Journey, On Track
         </h1>
 
         <p