website refactor

apps/website/components/layout/HeaderContent.tsx

@@ -5,21 +5,34 @@ import { Text } from '@/ui/Text';
 
 export function HeaderContent() {
   return (
-    <div className="flex items-center justify-between">
-      <div className="flex items-center space-x-3">
-        <Link href="/" className="inline-flex items-center">
-          <Image
-            src="/images/logos/wordmark-rectangle-dark.svg"
-            alt="GridPilot"
-            width={160}
-            height={30}
-            className="h-6 w-auto md:h-8"
-            priority
-          />
+    <div className="flex items-center justify-between h-16 md:h-20">
+      <div className="flex items-center space-x-6">
+        <Link href="/" className="inline-flex items-center group">
+          <div className="relative">
+            <Image
+              src="/images/logos/wordmark-rectangle-dark.svg"
+              alt="GridPilot"
+              width={160}
+              height={30}
+              className="h-6 w-auto md:h-7 transition-opacity group-hover:opacity-80"
+              priority
+            />
+            <div className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary-accent transition-all group-hover:w-full" />
+          </div>
         </Link>
-        <Text size="sm" color="text-gray-400" className="hidden sm:block font-light">
-          Making league racing less chaotic
-        </Text>
+        <div className="hidden sm:flex items-center space-x-2 border-l border-border-gray/50 pl-6">
+          <div className="w-1.5 h-1.5 rounded-full bg-primary-accent animate-pulse" />
+          <Text size="xs" color="text-gray-500" weight="bold" className="uppercase tracking-[0.2em] font-mono">
+            Motorsport Infrastructure
+          </Text>
+        </div>
+      </div>
+      
+      <div className="flex items-center space-x-4">
+        <div className="hidden md:flex items-center space-x-1 px-3 py-1 border border-border-gray/30 bg-panel-gray/20">
+          <Text size="xs" color="text-gray-600" weight="bold" font="mono" className="uppercase">Status:</Text>
+          <Text size="xs" color="text-success-green" weight="bold" font="mono" className="uppercase">Operational</Text>
+        </div>
       </div>
     </div>
   );