Unify shared site header across blog pages

Author: VeldtJumper

src/components/Navbar.astro

@@ -11,27 +11,17 @@ const hoverColor = isAccent ? 'hover:text-brand-accent' : 'hover:text-brand-teal
 const activeColor = isAccent ? 'text-brand-accent' : 'text-brand-teal';
 const borderColor = isAccent ? 'border-brand-accent/60' : 'border-brand-teal/60';
 const hoverBg = isAccent ? 'hover:bg-brand-accent/10' : 'hover:bg-brand-teal/10';
-const hoverBorder = isAccent ? 'hover:border-brand-accent' : 'hover:border-brand-teal';
+
+const brandHref = variant === 'default' ? '#hero' : '/';
+const brandTextClass = variant === 'blog' ? 'font-arcane text-lg text-white' : 'font-arcane text-lg text-white';
 ---
 
 <nav class="fixed top-0 left-0 right-0 z-50 border-b border-dark-700/50 bg-dark-950/80 backdrop-blur-md" aria-label="Main navigation">
   <div class="mx-auto max-w-6xl px-6 py-4 flex items-center justify-between">
-    {variant === 'labcoat' ? (
-      <a href="/" class="flex items-center gap-3 group">
-        <img src="/images/logo-v2.svg" alt="Commit 451 logo" width="36" height="36" class="transition-transform group-hover:scale-105">
-        <span class="font-arcane text-lg text-white group-hover:text-brand-accent transition-colors">Commit 451</span>
-      </a>
-    ) : variant === 'blog' ? (
-      <a href="/" class="flex items-center gap-3 group">
-        <img src="/images/avatar.png" alt="Commit 451 logo" width="36" height="36" class={`rounded-full border border-dark-700 group-${hoverBorder} transition-colors`}>
-        <span class={`font-fira font-bold text-lg text-white group-${hoverColor} transition-colors`}>Commit 451</span>
-      </a>
-    ) : (
-      <a href="#hero" class="flex items-center gap-3 group">
-        <img src="/images/logo-v2.svg" alt="Commit 451 logo" width="36" height="36" class="transition-transform group-hover:scale-105">
-        <span class="font-arcane text-lg text-white group-hover:text-brand-accent transition-colors">Commit 451</span>
-      </a>
-    )}
+    <a href={brandHref} class="flex items-center gap-3 group">
+      <img src="/images/logo-v2.svg" alt="Commit 451 logo" width="36" height="36" class="transition-transform group-hover:scale-105">
+      <span class={`${brandTextClass} group-hover:text-brand-accent transition-colors`}>Commit 451</span>
+    </a>
 
     {variant === 'labcoat' ? (
       <div class="hidden sm:flex items-center gap-8 text-sm font-medium">
@@ -43,8 +33,9 @@ const hoverBorder = isAccent ? 'hover:border-brand-accent' : 'hover:border-brand
       <div class="hidden sm:flex items-center gap-8 text-sm font-medium">
         <a href="/#work" class={`text-gray-400 ${hoverColor} transition-colors`}>Work</a>
         <a href="/#about" class={`text-gray-400 ${hoverColor} transition-colors`}>About</a>
+        <a href="/#services" class={`text-gray-400 ${hoverColor} transition-colors`}>Services</a>
         <a href="/blog/" class={`${activeColor} transition-colors`}>Blog</a>
-        <a href="/#contact" class={`rounded-lg border ${borderColor} px-4 py-2 ${activeColor} ${hoverBg} transition-all`}>Contact</a>
+        <a href="https://cal.com/commit451/15min" target="_blank" rel="noopener noreferrer" class={`rounded-lg border ${borderColor} px-4 py-2 ${activeColor} ${hoverBg} transition-all`}>Book a Call</a>
       </div>
     ) : (
       <div class="hidden sm:flex items-center gap-8 text-sm font-medium">
@@ -73,16 +64,17 @@ const hoverBorder = isAccent ? 'hover:border-brand-accent' : 'hover:border-brand
         <>
           <a href="/#work" class={`text-gray-400 ${hoverColor} transition-colors`}>Work</a>
           <a href="/#about" class={`text-gray-400 ${hoverColor} transition-colors`}>About</a>
+          <a href="/#services" class={`text-gray-400 ${hoverColor} transition-colors`}>Services</a>
           <a href="/blog/" class={`${activeColor} transition-colors`}>Blog</a>
-          <a href="/#contact" class={activeColor}>Contact</a>
+          <a href="https://cal.com/commit451/15min" target="_blank" rel="noopener noreferrer" class={activeColor}>Book a Call</a>
         </>
       ) : (
         <>
           <a href="#work" class={`text-gray-400 ${hoverColor} transition-colors`}>Work</a>
           <a href="#about" class={`text-gray-400 ${hoverColor} transition-colors`}>About</a>
           <a href="#services" class={`text-gray-400 ${hoverColor} transition-colors`}>Services</a>
           <a href="/blog/" class={`text-gray-400 ${hoverColor} transition-colors`}>Blog</a>
-          <a href="#contact" class={activeColor}>Contact</a>
+          <a href="https://cal.com/commit451/15min" target="_blank" rel="noopener noreferrer" class={activeColor}>Book a Call</a>
         </>
       )}
     </div>