Update site navigation and header styling

The styling for various components including site navigation and the site header has been updated. Changes include amendments to layout options, color, spacing, and border adaptations to provide better visibility and user interaction. The shadow on the top loading bar indicator has also been relocated to enhance the bar's visibility.

apps/web/app/(marketing)/_components/site-navigation.tsx

@@ -43,15 +43,15 @@ export function SiteNavigation() {
 
   return (
     <>
-      <div className={'hidden items-center lg:flex'}>
+      <div className={'hidden items-center justify-center md:flex'}>
         <NavigationMenu>
-          <NavigationMenuList className={'space-x-4'}>
+          <NavigationMenuList className={'space-x-1'}>
             {NavItems}
           </NavigationMenuList>
         </NavigationMenu>
       </div>
 
-      <div className={'flex items-center lg:hidden'}>
+      <div className={'flex justify-start sm:items-center md:hidden'}>
         <MobileDropdown />
       </div>
     </>
@@ -62,7 +62,7 @@ function MobileDropdown() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger aria-label={'Open Menu'}>
-        <Menu className={'h-9'} />
+        <Menu className={'h-8 w-8'} />
       </DropdownMenuTrigger>
 
       <DropdownMenuContent className={'w-full'}>