refactor(header): update header bg color and hover effects

- added section id to nav items href

Author: usmonovshohruxmirzo

src/components/common/Navbar.astro

@@ -2,7 +2,7 @@
 import { FaBars, FaGithub } from "react-icons/fa"
 ---
 
-<nav class="bg-[#FC485033] w-[90%] fixed z-10 top-5 left-1/2 -translate-x-1/2 backdrop-blur-xl border border-white/10 rounded-full">
+<nav class="bg-[#222222]/80 w-[90%] fixed z-10 top-5 left-1/2 -translate-x-1/2 backdrop-blur-xl border border-white/10 rounded-full">
   <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
     <div class="relative flex h-16 items-center justify-between">
       <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
@@ -18,16 +18,16 @@ import { FaBars, FaGithub } from "react-icons/fa"
         </div>
         <div class="hidden sm:ml-6 sm:block">
           <div class="flex space-x-4">
-            <a href="#" aria-current="page" class="block rounded-full bg-[#FC485050] px-3 py-2 text-base font-medium text-white">Docs</a>
-            <a href="#" class="block rounded-full px-3 py-2 text-base font-medium text-gray-300 hover:bg-[#FC485033] hover:text-white">Themes</a>
-            <a href="#" class="block rounded-full px-3 py-2 text-base font-medium text-gray-300 hover:bg-[#FC485033] hover:text-white">Features</a>
-            <a href="#" class="block rounded-full px-3 py-2 text-base font-medium text-gray-300 hover:bg-[#FC485033] hover:text-white">Updates</a>
+            <a href="#" aria-current="page" class="block rounded-full px-3 py-2 text-base font-medium text-gray-300 hover:bg-[#333333] hover:text-white">Docs</a>
+            <a href="#themes" class="block rounded-full px-3 py-2 text-base font-medium text-gray-300 hover:bg-[#333333] hover:text-white">Themes</a>
+            <a href="#features" class="block rounded-full px-3 py-2 text-base font-medium text-gray-300 hover:bg-[#333333] hover:text-white">Features</a>
+            <a href="#updates" class="block rounded-full px-3 py-2 text-base font-medium text-gray-300 hover:bg-[#333333] hover:text-white">Updates</a>
           </div>
         </div>
       </div>
       <ul class="list-none absolute inset-y-0 right-0 flex gap-2 items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
         <li>
-          <a href="https://github.com/NitroVim/NitroVim" target="_blank" class="relative text-white cursor-pointer hover:text-[#FC4850] text-2xl">
+          <a href="https://github.com/NitroVim/NitroVim" target="_blank" class="relative text-white cursor-pointer text-2xl">
             <span class="absolute -inset-1.5"></span>
             <span class="sr-only">Github</span>
             <FaGithub />