feat: nav v2

app/layout.tsx

@@ -8,7 +8,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en">
       <body className="bg-[#0f172a] ">
-        <Navbar logoSrc="/images/image-removebg-preview (1).png" />
+        <Navbar logoSrc="/images/logo.webp" />
         {children}
         <Footer />
       </body>

components/Navbar/Navbar.tsx

@@ -1,12 +1,12 @@
 "use client"
-interface NavbarProps {
-  logoSrc: string // Path to your logo image
-}
-
 import { useState, useEffect } from "react"
 import { Button } from "components/Button/Button"
 import { FaArrowRight } from "react-icons/fa"
 
+interface NavbarProps {
+  logoSrc: string // Path to your logo image
+}
+
 const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
   const [showBackground, setShowBackground] = useState(false)
   const TOP_OFFSET = 50
@@ -36,13 +36,18 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
   return (
     <nav
       className={`${
-        showBackground ? "backdrop-blur" : "bg-transparent"
+        showBackground ? "backdrop-blur-2xl" : "bg-transparent"
-      } fixed left-0 top-0 z-50 flex h-20 w-full items-center justify-between px-4 text-white`}
+      } fixed left-0 top-0 z-50 flex h-20 w-full items-center justify-between px-4 px-[8.5rem] py-[1rem] text-white transition-all`}
     >
       <a href="/">
-        <img src={logoSrc} alt="Your Logo" className="h-20 text-white" />
+        <img
+          src={logoSrc}
+          alt="Vizole Labs"
+          className="h-8
+       text-white"
+        />
       </a>
-      <ul className="hidden space-x-4 text-lg font-medium md:flex">
+      <ul className="text-md font-ligth hidden space-x-4 md:flex">
         <li>
           <a href="/" className="hover:text-vizoleG2">
             Home