website refactor

apps/website/components/home/HomeHeader.tsx

@@ -5,7 +5,9 @@ import { Container } from '@/ui/Container';
 import { Glow } from '@/ui/Glow';
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
+import { Section } from '@/ui/Section';
+import { ButtonGroup } from '@/ui/ButtonGroup';
 
 interface HomeHeaderProps {
   title: string;
@@ -23,7 +25,6 @@ interface HomeHeaderProps {
 
 /**
  * HomeHeader - Semantic hero section for the landing page.
- * Follows "Precision Racing Minimal" theme.
  */
 export function HomeHeader({
   title,
@@ -33,43 +34,29 @@ export function HomeHeader({
   secondaryAction,
 }: HomeHeaderProps) {
   return (
-    <Stack as="header" position="relative" overflow="hidden" bg="graphite-black" py={{ base: 24, lg: 32 }} borderBottom borderColor="border-gray">
+    <Section variant="dark" padding="lg">
       <Glow color="primary" size="xl" position="top-right" opacity={0.1} />
       
       <Container>
-        <Stack maxWidth="4xl" fullWidth>
-          <Stack direction="row" align="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>
-          </Stack>
+        <Stack gap={8}>
+          <Text size="xs" weight="bold" uppercase variant="primary">
+            {subtitle}
+          </Text>
           
-          <Heading 
-            level={1} 
-            fontSize={{ base: '5xl', md: '7xl', lg: '8xl' }} 
-            weight="bold" 
-            color="text-white" 
-            letterSpacing="tighter" 
-            lineHeight="0.9" 
-            mb={8}
-          >
+          <Heading level={1} weight="bold">
             {title}
           </Heading>
           
-          <Stack 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>
-          </Stack>
+          <Text size="lg" variant="low">
+            {description}
+          </Text>
 
-          <Stack direction={{ base: 'col', md: 'row' }} gap={4}>
+          <ButtonGroup gap={4}>
             <Button
               as="a"
               href={primaryAction.href}
               variant="primary"
-              h="14"
-              px={12}
-              fontSize="xs"
+              size="lg"
             >
               {primaryAction.label}
             </Button>
@@ -77,18 +64,13 @@ export function HomeHeader({
               as="a"
               href={secondaryAction.href}
               variant="secondary"
-              h="14"
-              px={12}
-              fontSize="xs"
-              bg="transparent"
-              borderColor="border-gray"
-              hoverBorderColor="primary-accent/50"
+              size="lg"
             >
               {secondaryAction.label}
             </Button>
-          </Stack>
+          </ButtonGroup>
         </Stack>
       </Container>
-    </Stack>
+    </Section>
   );
 }