website refactor

apps/website/components/landing/FeatureGrid.tsx

@@ -12,6 +12,9 @@ import { Heading } from '@/ui/Heading';
 import { Stack } from '@/ui/Stack';
 import { Section } from '@/ui/Section';
 import { Text } from '@/ui/Text';
+import { Surface } from '@/ui/Surface';
+import { Box } from '@/ui/Box';
+import { Grid } from '@/ui/Grid';
 
 const features = [
   {
@@ -48,68 +51,79 @@ const features = [
 
 function FeatureCard({ feature, index }: { feature: typeof features[0], index: number }) {
   return (
-    <Stack
-      display="flex"
-      flexDirection="column"
-      gap={6}
-      className="p-8 bg-panel-gray/20 border border-border-gray/20 rounded-none hover:border-primary-accent/20 transition-all duration-300 ease-smooth group relative overflow-hidden"
+    <Surface
+      variant="muted"
+      padding={8}
+      rounded="none"
+      border
+      borderColor="var(--ui-color-border-low)"
+      hoverBorderColor="var(--ui-color-intent-primary)"
+      transition="all 0.3s ease"
+      group
+      position="relative"
+      overflow="hidden"
     >
-      <Stack aspectRatio="video" fullWidth position="relative" className="bg-graphite-black rounded-none overflow-hidden border border-border-gray/20">
+      <Stack aspectRatio="video" fullWidth position="relative" bg="var(--ui-color-bg-base)" rounded="none" overflow="hidden" border borderColor="var(--ui-color-border-low)">
         <MockupStack index={index}>
           <feature.MockupComponent />
         </MockupStack>
       </Stack>
-      <Stack gap={4}>
-        <Stack display="flex" alignItems="center" gap={3}>
-          <Stack w="1" h="3" bg="primary-accent" />
-          <Heading level={3} weight="bold" fontSize="lg" className="tracking-tighter uppercase">
+      <Stack gap={4} mt={6}>
+        <Stack direction="row" align="center" gap={3}>
+          <Box w="1" h="3" bg="var(--ui-color-intent-primary)" />
+          <Heading level={3} weight="bold" fontSize="lg" letterSpacing="-0.05em" uppercase>
             {feature.title}
           </Heading>
         </Stack>
-        <Text size="sm" color="text-gray-500" leading="relaxed" weight="normal" className="group-hover:text-gray-400 transition-colors">
+        <Text size="sm" variant="low" leading="relaxed" weight="normal" groupHoverTextColor="var(--ui-color-text-med)">
           {feature.description}
         </Text>
       </Stack>
       {/* Subtle hover effect */}
-      <Stack 
+      <Box 
         position="absolute" 
         bottom="0" 
         left="0" 
         w="full" 
         h="0.5" 
-        bg="primary-accent" 
-        className="scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left" 
+        bg="var(--ui-color-intent-primary)" 
+        transform="scaleX(0)"
+        groupHoverScale={true}
+        transition="transform 0.5s ease"
+        style={{ transformOrigin: 'left' }}
       />
-    </Stack>
+    </Surface>
   );
 }
 
 export function FeatureGrid() {
   return (
-    <Section className="bg-graphite-black border-b border-border-gray/20 py-32">
-      <Container position="relative" zIndex={10}>
+    <Box borderBottom borderColor="var(--ui-color-border-low)">
+      <Section variant="dark" py={32}>
+        <Container position="relative" zIndex={10}>
         <Stack gap={16}>
           <Stack maxWidth="2xl">
-            <Stack borderLeft borderStyle="solid" borderColor="primary-accent" pl={4} mb={4} bg="primary-accent/5" py={1}>
-              <Text size="xs" weight="bold" color="text-primary-accent" className="uppercase tracking-[0.3em]">
+            <Stack borderLeft borderStyle="solid" borderColor="var(--ui-color-intent-primary)" pl={4} mb={4} bg="rgba(25, 140, 255, 0.05)" py={1}>
+              <Text size="xs" weight="bold" variant="primary" uppercase letterSpacing="0.3em">
                 Engineered for Competition
               </Text>
             </Stack>
-            <Heading level={2} weight="bold" fontSize={{ base: '3xl', md: '5xl' }} className="tracking-tighter uppercase leading-none">
+            <Heading level={2} weight="bold" fontSize={{ base: '3xl', md: '5xl' }} letterSpacing="-0.05em" uppercase>
               Building for League Racing
             </Heading>
-            <Text size="lg" color="text-gray-500" block mt={6} leading="relaxed" className="border-l border-border-gray/20 pl-6">
+            <Text size="lg" variant="low" block mt={6} leading="relaxed" borderLeft borderColor="var(--ui-color-border-low)" pl={6}>
               Every feature is designed to reduce friction and increase immersion. Join our Discord to help shape the future of the platform.
             </Text>
           </Stack>
           
-          <Stack display="grid" gridCols={{ base: 1, md: 2, lg: 3 }} gap={6}>
+          <Grid cols={{ base: 1, md: 2, lg: 3 }} gap={6}>
             {features.map((feature, index) => (
               <FeatureCard key={feature.title} feature={feature} index={index} />
             ))}
-          </Stack>
+          </Grid>
         </Stack>
       </Container>
-    </Section>
+      </Section>
+    </Box>
   );
 }