menu changes on login page

src/layouts/AuthLayout.jsx

@@ -23,7 +23,79 @@ const AuthLayout = () => {
         style={{ background: "white", width: "65%", zIndex: "100" }}
       >
         {" "}
-        <nav
+        <nav class="navbar navbar-expand-lg">
+          <div class="container-fluid">
+            {/* <a class="navbar-brand" href="#">
+              Login
+            </a> */}
+            <button
+              class="navbar-toggler"
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="#navbarNav"
+              aria-controls="navbarNav"
+              aria-expanded="false"
+              aria-label="Toggle navigation"
+            >
+              <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a
+                    class="nav-link custom-border-bottom"
+                    aria-current="page"
+                    href="/"
+                  >
+                    Home
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a
+                    class="nav-link custom-border-bottom"
+                    href="/#landingFeatures"
+                  >
+                    Features
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a
+                    class="nav-link custom-border-bottom"
+                    href="/#landingPricing"
+                  >
+                    Pricing
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link custom-border-bottom" href="/#landingFAQ">
+                    FAQ
+                  </a>
+                </li>{" "}
+                <li class="nav-item">
+                  <a class="nav-link custom-border-bottom" href="/#sectionBlog">
+                    Blogs
+                  </a>
+                </li>{" "}
+                <li class="nav-item">
+                  <a class="nav-link custom-border-bottom" href="/#landingCTA">
+                    Contact Us
+                  </a>
+                </li>{" "}
+                {/* <li class="nav-item">
+                  <a
+                    class="nav-link custom-border-bottom disabled"
+                    href="#"
+                    tabindex="-1"
+                    aria-disabled="true"
+                  >
+                    Disabled
+                  </a>
+                </li> */}
+              </ul>
+            </div>
+          </div>
+        </nav>
+        {/* <nav
           class="navbar navbar-light ms-10 w-auto justify-content-start"
           style={{ opacity: "100%" }}
         >
@@ -45,7 +117,7 @@ const AuthLayout = () => {
           <a class="navbar-brand" href="/#landingCTA">
             Contact Us
           </a>
-        </nav>{" "}
+        </nav>{" "} */}
       </div>
 
       {/* <Link

src/pages/authentication/MainLogin.css

@@ -99,3 +99,25 @@ ul.more-features-list {
   height: 100%; /* Image takes full height of the slide (which is 70vh) */
   object-fit: contain; /* Ensures the entire image is visible without stretching, maintaining aspect ratio */
 }
+
+/* Custom class for the nav link */
+.custom-border-bottom {
+  /* This ensures the link is treated like a block for border/padding purposes */
+  display: inline-block;
+  /* Initial border state (e.g., transparent so there's no visible line) */
+  border-bottom: 2px solid transparent;
+  /* Add padding to lift the text above the line */
+  padding-bottom: 5px !important;
+  /* Add a transition for a smooth hover effect */
+  transition: border-bottom 0.3s ease-in-out;
+}
+
+/* Hover effect: show the border when the user hovers */
+.custom-border-bottom:hover {
+  border-bottom: 2px solid #007bff; /* Use your desired color, e.g., Bootstrap primary blue */
+}
+
+/* Active item effect: keep the border visible for the active page */
+.custom-border-bottom.active {
+  border-bottom: 2px solid #6c757d; /* A different color for the active item */
+}