Working navbar 99%

src/components/navbar.module.css

@@ -1,87 +1,18 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* navbar.module.css */
 
-
-.navbar {
-    /* position: fixed;
-    @apply transition-all duration-300 top-6 left-6 right-6; */
-    /* background-color: white;
-    border-radius: 0px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 1em 2em;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    z-index: 1000; */
+.navBar {
+    @apply top-6 left-6 right-6 transition-all duration-300 z-50;
   }
   
-/*   .navbar a {
-    color: black;
-    text-decoration: none;
-    margin: 0 0.5em;
-    font-size: 1em;
+  .navBarInitial {
+    @apply bg-transparent text-white absolute;
   }
   
-  .navbar a:hover {
-    color: #555;
+  .navBarScrolledUp {
+    @apply bg-white text-black rounded-lg shadow-lg fixed;
   }
   
-  .left,
-  .right {
-    display: flex;
-    align-items: center;
-  }
-  
-  .navbar .center a {
-    color: black;
-    text-decoration: none;
-    margin: 0 0;
-    font-size: 1em;
-  }
-  .center .logo {
-    height: 50px; /* Adjust the logo size as needed */
-  }
-  
-  .navbar-center .logo {
-    height: 50px; /* Adjust the logo size as needed */
-  }
-  
-  .fa-search,
-  .fa-user {
-    font-size: 1.2em;
-  }
-  
-  @media screen and (max-width: 768px) {
-    .navbar {
-      top: 1em;
-      left: 1em;
-      right: 1em;
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  
-    .navbar-center {
-      margin: 1em 0;
-      align-self: center;
-    }
-  }
-  
-  .navbar a.active {
-    font-weight: bold;
-    border-bottom: 2px solid black;
-  }
-  
-  .navbar {
-    border-radius: 25px; /* Makes the corners more rounded */
-  }
-  
-  .navbar a {
-    font-size: 1.1em;
-  }
-  
-  .fa-search,
-  .fa-user {
-    font-size: 1.4em;
-  }
-   */
+  /* Custom style */
+  .navBarScrolledUp {
+    backdrop-filter: blur(10px); /* Adds a blur effect */
+  }