Files
gridpilot.gg/apps/website/components/layout/HeaderContent.tsx
2026-01-17 02:32:34 +01:00

39 lines
1.6 KiB
TypeScript

import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { Text } from '@/ui/Text';
export function HeaderContent() {
return (
<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>
<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>
);
}