website refactor

apps/website/components/home/HomeHeader.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import React from 'react';
+import { Button } from '@/ui/Button';
+import { Glow } from '@/ui/Glow';
+import { Box } from '@/ui/Box';
+import { Container } from '@/ui/Container';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+
+interface HomeHeaderProps {
+  title: string;
+  subtitle: string;
+  description: string;
+  primaryAction: {
+    label: string;
+    href: string;
+  };
+  secondaryAction: {
+    label: string;
+    href: string;
+  };
+}
+
+/**
+ * HomeHeader - Semantic hero section for the landing page.
+ * Follows "Precision Racing Minimal" theme.
+ */
+export function HomeHeader({
+  title,
+  subtitle,
+  description,
+  primaryAction,
+  secondaryAction,
+}: HomeHeaderProps) {
+  return (
+    <Box as="header" position="relative" overflow="hidden" bg="graphite-black" py={{ base: 24, lg: 32 }} borderBottom borderColor="border-gray">
+      <Glow color="primary" size="xl" position="top-right" opacity={0.1} />
+      
+      <Container>
+        <Box maxWidth="4xl">
+          <Box display="flex" alignItems="center" gap={3} borderLeft borderStyle="solid" borderWidth="2px" borderColor="primary-accent" bg="primary-accent/5" px={4} py={1} mb={8}>
+            <Text size="xs" weight="bold" uppercase letterSpacing="0.3em" color="text-primary-accent">
+              {subtitle}
+            </Text>
+          </Box>
+          
+          <Heading 
+            level={1} 
+            fontSize={{ base: '5xl', md: '7xl', lg: '8xl' }} 
+            weight="bold" 
+            color="text-white" 
+            letterSpacing="tighter" 
+            lineHeight="0.9" 
+            mb={8}
+          >
+            {title}
+          </Heading>
+          
+          <Box borderLeft borderStyle="solid" borderColor="border-gray" pl={8} mb={12} maxWidth="2xl">
+            <Text size="lg" color="text-gray-400" leading="relaxed" opacity={0.8}>
+              {description}
+            </Text>
+          </Box>
+
+          <Box display="flex" flexDirection={{ base: 'col', sm: 'row' }} gap={4}>
+            <Button
+              as="a"
+              href={primaryAction.href}
+              variant="primary"
+              h="14"
+              px={12}
+              fontSize="xs"
+            >
+              {primaryAction.label}
+            </Button>
+            <Button
+              as="a"
+              href={secondaryAction.href}
+              variant="secondary"
+              h="14"
+              px={12}
+              fontSize="xs"
+              bg="transparent"
+              borderColor="border-gray"
+              hoverBorderColor="primary-accent/50"
+            >
+              {secondaryAction.label}
+            </Button>
+          </Box>
+        </Box>
+      </Container>
+    </Box>
+  );
+}