website refactor

apps/website/ui/BrandMark.tsx

@@ -0,0 +1,41 @@
+import { Box } from '@/ui/primitives/Box';
+import Image from 'next/image';
+import { Link } from '@/ui/Link';
+import React from 'react';
+
+interface BrandMarkProps {
+  href?: string;
+  priority?: boolean;
+}
+
+/**
+ * BrandMark provides the consistent logo/wordmark for the application.
+ * Aligned with "Precision Racing Minimal" theme.
+ */
+export function BrandMark({ href = '/', priority = false }: BrandMarkProps) {
+  return (
+    <Link href={href} variant="inherit" underline="none">
+      <Box position="relative" display="inline-flex" alignItems="center">
+        <Box height={{ base: '1.5rem', md: '1.75rem' }} style={{ transition: 'opacity 0.2s' }}>
+          <Image
+            src="/images/logos/wordmark-rectangle-dark.svg"
+            alt="GridPilot"
+            width={160}
+            height={30}
+            priority={priority}
+            style={{ height: '100%', width: 'auto' }}
+          />
+        </Box>
+        <Box 
+          position="absolute" 
+          bottom="-4px" 
+          left="0" 
+          width="0" 
+          height="2px" 
+          bg="var(--ui-color-intent-primary)" 
+          style={{ transition: 'width 0.2s' }}
+        />
+      </Box>
+    </Link>
+  );
+}