website refactor

apps/website/components/mockups/StandingsTableMockup.tsx

@@ -2,8 +2,11 @@
 
 import { motion, useReducedMotion, useMotionValue, useSpring } from 'framer-motion';
 import { useEffect, useState } from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
 
-export default function StandingsTableMockup() {
+export function StandingsTableMockup() {
   const shouldReduceMotion = useReducedMotion();
   const [hoveredRow, setHoveredRow] = useState<number | null>(null);
   const [isMobile, setIsMobile] = useState(false);
@@ -14,59 +17,89 @@ export default function StandingsTableMockup() {
 
   if (isMobile) {
     return (
-      <div className="relative w-full h-full bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite rounded-lg p-3 overflow-hidden">
-        <div className="mb-3">
-          <div className="flex items-center gap-2 pb-2 border-b border-charcoal-outline">
-            <div className="text-xs font-mono text-gray-400">#</div>
-            <div className="text-xs flex-1 font-semibold text-white">Driver</div>
-            <div className="text-xs font-mono text-gray-400">Pts</div>
-          </div>
-        </div>
-
-        <div className="space-y-2">
-          {[1, 2, 3, 4, 5].map((i) => (
-            <div
-              key={i}
-              className={`flex items-center gap-2 py-2 px-2 rounded-lg border ${
-                i <= 3
-                  ? 'bg-gradient-to-r from-performance-green/10 to-iron-gray border-performance-green/20'
-                  : 'bg-iron-gray border-charcoal-outline'
-              }`}
+      <Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" p={3} overflow="hidden">
+        <Box mb={3}>
+          <Box display="flex" alignItems="center" gap={2} pb={2} borderBottom borderColor="border-charcoal-outline">
+            <Text 
+              // eslint-disable-next-line gridpilot-rules/component-classification
+              style={{ fontSize: '12px' }} 
+              font="mono" 
+              color="text-gray-400"
             >
-              <div
-                className={`h-7 w-7 rounded-full flex items-center justify-center font-semibold text-xs ${
-                  i <= 3
-                    ? 'bg-primary-blue text-white shadow-glow'
-                    : 'bg-charcoal-outline text-gray-400'
-                }`}
+              #
+            </Text>
+            <Text size="xs" flexGrow={1} weight="semibold" color="text-white">Driver</Text>
+            <Text 
+              // eslint-disable-next-line gridpilot-rules/component-classification
+              style={{ fontSize: '12px' }} 
+              font="mono" 
+              color="text-gray-400"
+            >
+              Pts
+            </Text>
+          </Box>
+        </Box>
+
+        <Stack gap={2}>
+          {[1, 2, 3, 4, 5].map((i) => (
+            <Box
+              key={i}
+              display="flex"
+              alignItems="center"
+              gap={2}
+              py={2}
+              px={2}
+              rounded="lg"
+              border
+              bg={i <= 3 ? 'bg-gradient-to-r from-performance-green/10 to-iron-gray' : 'bg-iron-gray'}
+              borderColor={i <= 3 ? 'border-performance-green/20' : 'border-charcoal-outline'}
+            >
+              <Box
+                h="7"
+                w="7"
+                rounded="full"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+                weight="semibold"
+                // eslint-disable-next-line gridpilot-rules/component-classification
+                style={{ fontSize: '12px' }}
+                bg={i <= 3 ? 'bg-primary-blue' : 'bg-charcoal-outline'}
+                color={i <= 3 ? 'text-white' : 'text-gray-400'}
+                shadow={i <= 3 ? '0_0_12px_rgba(25,140,255,0.3)' : undefined}
               >
                 {i}
-              </div>
-              <div className="flex-1 flex items-center gap-2">
-                <div className="h-5 w-5 rounded-full bg-charcoal-outline border border-primary-blue/20 flex items-center justify-center text-xs">
-                  🏎️
-                </div>
-                <div className="h-2.5 w-full max-w-[100px] bg-white/10 rounded"></div>
-              </div>
-              <div className="relative w-16 h-5 bg-charcoal-outline rounded border border-primary-blue/20 overflow-hidden">
-                <div
-                  className={`absolute inset-y-0 left-0 ${
-                    i <= 3
-                      ? 'bg-gradient-to-r from-performance-green/40 to-performance-green/20'
-                      : 'bg-gradient-to-r from-iron-gray to-charcoal-outline'
-                  }`}
+              </Box>
+              <Box flexGrow={1} display="flex" alignItems="center" gap={2}>
+                <Box h="5" w="5" rounded="full" bg="bg-charcoal-outline" border borderColor="border-primary-blue/20" display="flex" alignItems="center" justifyContent="center">
+                  <Text 
+                    // eslint-disable-next-line gridpilot-rules/component-classification
+                    style={{ fontSize: '12px' }}
+                  >
+                    🏎️
+                  </Text>
+                </Box>
+                <Box h="2.5" fullWidth maxWidth="100px" bg="bg-white/10" rounded="sm" />
+              </Box>
+              <Box position="relative" w="16" h="5" bg="bg-charcoal-outline" rounded="sm" border borderColor="border-primary-blue/20" overflow="hidden">
+                <Box
+                  position="absolute"
+                  insetY="0"
+                  left="0"
+                  bg={i <= 3 ? 'bg-gradient-to-r from-performance-green/40 to-performance-green/20' : 'bg-gradient-to-r from-iron-gray to-charcoal-outline'}
+                  // eslint-disable-next-line gridpilot-rules/component-classification
                   style={{ width: `${100 - (i - 1) * 15}%` }}
                 />
-                <div className="relative h-full flex items-center justify-center">
-                  <span className="text-xs font-mono font-semibold text-white">
+                <Box position="relative" h="full" display="flex" alignItems="center" justifyContent="center">
+                  <Text size="xs" font="mono" weight="semibold" color="text-white">
                     {300 - i * 20}
-                  </span>
-                </div>
-              </div>
-            </div>
+                  </Text>
+                </Box>
+              </Box>
+            </Box>
           ))}
-        </div>
-      </div>
+        </Stack>
+      </Box>
     );
   }
 
@@ -85,32 +118,84 @@ export default function StandingsTableMockup() {
   });
 
   return (
-    <div className="relative w-full h-full bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite rounded-lg p-1.5 sm:p-3 md:p-4 lg:p-6 overflow-hidden">
-      <div className="mb-1.5 sm:mb-2 md:mb-3 lg:mb-4">
-        <div className="text-[8px] sm:text-[10px] md:text-xs text-white/50 mb-1.5 sm:mb-2 md:mb-3">Real-time standings updated after every race</div>
-        <div className="flex items-center gap-1.5 sm:gap-2 md:gap-3 lg:gap-4 pb-1.5 sm:pb-2 md:pb-3 border-b border-charcoal-outline">
-          <div className="text-[8px] sm:text-[10px] md:text-xs font-mono text-gray-400">#</div>
-          <div className="text-[8px] sm:text-[10px] md:text-xs flex-1 font-semibold text-white">Driver</div>
-          <div className="text-[8px] sm:text-[10px] md:text-xs font-mono text-gray-400 hidden md:block">Wins</div>
-          <div className="text-[8px] sm:text-[10px] md:text-xs font-mono text-gray-400 flex items-center gap-1">
-            <span>Points</span>
-            <span className="text-performance-green text-[8px]">●</span>
-          </div>
-        </div>
-      </div>
+    <Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" p={{ base: 1.5, sm: 3, md: 4, lg: 6 }} overflow="hidden">
+      <Box mb={{ base: 1.5, sm: 2, md: 3, lg: 4 }}>
+        <Text 
+          // eslint-disable-next-line gridpilot-rules/component-classification
+          style={{ fontSize: '10px' }} 
+          color="text-white" 
+          opacity={0.5} 
+          mb={{ base: 1.5, sm: 2, md: 3 }} 
+          block
+        >
+          Real-time standings updated after every race
+        </Text>
+        <Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }} pb={{ base: 1.5, sm: 2, md: 3 }} borderBottom borderColor="border-charcoal-outline">
+          <Text 
+            // eslint-disable-next-line gridpilot-rules/component-classification
+            style={{ fontSize: '10px' }} 
+            font="mono" 
+            color="text-gray-400"
+          >
+            #
+          </Text>
+          <Text 
+            // eslint-disable-next-line gridpilot-rules/component-classification
+            style={{ fontSize: '10px' }} 
+            flexGrow={1} 
+            weight="semibold" 
+            color="text-white"
+          >
+            Driver
+          </Text>
+          <Text 
+            // eslint-disable-next-line gridpilot-rules/component-classification
+            style={{ fontSize: '10px' }} 
+            font="mono" 
+            color="text-gray-400" 
+            // eslint-disable-next-line gridpilot-rules/component-classification
+            className="hidden md:block"
+          >
+            Wins
+          </Text>
+          <Box display="flex" alignItems="center" gap={1}>
+            <Text 
+              // eslint-disable-next-line gridpilot-rules/component-classification
+              style={{ fontSize: '10px' }} 
+              font="mono" 
+              color="text-gray-400"
+            >
+              Points
+            </Text>
+            <Text color="text-performance-green" 
+              // eslint-disable-next-line gridpilot-rules/component-classification
+              style={{ fontSize: '8px' }}
+            >
+              ●
+            </Text>
+          </Box>
+        </Box>
+      </Box>
 
-      <div className="space-y-0.5">
+      <Stack gap={0.5}>
         {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
-          <motion.div
+          <Box
             key={i}
+            as={motion.div}
             variants={getRowAnimation(i)}
             initial="hidden"
             animate="visible"
-            className={`relative flex items-center gap-1.5 sm:gap-2 md:gap-3 lg:gap-4 py-1.5 sm:py-2 md:py-2.5 lg:py-3 px-1.5 sm:px-2 md:px-3 rounded-lg border transition-all duration-150 ${
-              i <= 3
-                ? 'bg-gradient-to-r from-performance-green/10 to-iron-gray border-performance-green/20'
-                : 'bg-iron-gray border-charcoal-outline'
-            }`}
+            position="relative"
+            display="flex"
+            alignItems="center"
+            gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }}
+            py={{ base: 1.5, sm: 2, md: 2.5, lg: 3 }}
+            px={{ base: 1.5, sm: 2, md: 3 }}
+            rounded="lg"
+            border
+            transition
+            bg={i <= 3 ? 'bg-gradient-to-r from-performance-green/10 to-iron-gray' : 'bg-iron-gray'}
+            borderColor={i <= 3 ? 'border-performance-green/20' : 'border-charcoal-outline'}
             onHoverStart={() => !shouldReduceMotion && setHoveredRow(i)}
             onHoverEnd={() => setHoveredRow(null)}
             whileHover={shouldReduceMotion ? {} : {
@@ -119,12 +204,19 @@ export default function StandingsTableMockup() {
               transition: { duration: 0.15 }
             }}
           >
-            <motion.div
-              className={`h-6 w-6 sm:h-7 sm:w-7 rounded-full flex items-center justify-center font-semibold text-[10px] sm:text-xs ${
-                i <= 3
-                  ? 'bg-primary-blue text-white shadow-glow'
-                  : 'bg-charcoal-outline text-gray-400'
-              }`}
+            <Box
+              as={motion.div}
+              h={{ base: 6, sm: 7 }}
+              w={{ base: 6, sm: 7 }}
+              rounded="full"
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+              weight="semibold"
+              // eslint-disable-next-line gridpilot-rules/component-classification
+              style={{ fontSize: '12px' }}
+              bg={i <= 3 ? 'bg-primary-blue' : 'bg-charcoal-outline'}
+              color={i <= 3 ? 'text-white' : 'text-gray-400'}
               animate={
                 shouldReduceMotion ? {} : i <= 3 && hoveredRow === i
                   ? { scale: 1.15, boxShadow: '0 0 28px rgba(25,140,255,0.5)' }
@@ -132,25 +224,28 @@ export default function StandingsTableMockup() {
               }
             >
               {i}
-            </motion.div>
-            <div className="flex-1 flex items-center gap-1 sm:gap-1.5 md:gap-2">
-              <div className="h-4 w-4 sm:h-5 sm:w-5 md:h-6 md:w-6 rounded-full bg-charcoal-outline border border-primary-blue/20 flex items-center justify-center text-[8px] sm:text-[10px] md:text-xs aspect-square">
-                🏎️
-              </div>
-              <div className="h-1.5 sm:h-2 md:h-2.5 lg:h-3 w-full max-w-[80px] sm:max-w-[100px] md:max-w-[140px] bg-white/10 rounded"></div>
-            </div>
-            <div className="h-1.5 sm:h-2 md:h-2.5 lg:h-3 w-10 sm:w-12 md:w-16 bg-white/5 rounded font-mono hidden md:block"></div>
-            <div className="relative">
+            </Box>
+            <Box flexGrow={1} display="flex" alignItems="center" gap={{ base: 1, sm: 1.5, md: 2 }}>
+              <Box h={{ base: 4, sm: 5, md: 6 }} w={{ base: 4, sm: 5, md: 6 }} rounded="full" bg="bg-charcoal-outline" border borderColor="border-primary-blue/20" display="flex" alignItems="center" justifyContent="center">
+                <Text size={{ base: 'xs', sm: 'sm' }}>🏎️</Text>
+              </Box>
+              <Box h={{ base: 1.5, sm: 2, md: 2.5, lg: 3 }} fullWidth maxWidth={{ base: '80px', sm: '100px', md: '140px' }} bg="bg-white/10" rounded="sm" />
+            </Box>
+            <Box h={{ base: 1.5, sm: 2, md: 2.5, lg: 3 }} w={{ base: 10, sm: 12, md: 16 }} bg="bg-white/5" rounded="sm" font="mono" 
+              // eslint-disable-next-line gridpilot-rules/component-classification
+              className="hidden md:block" 
+            />
+            <Box position="relative">
               <AnimatedPoints
                 points={300 - i * 20}
                 position={i}
                 shouldReduceMotion={shouldReduceMotion ?? false}
               />
-            </div>
-          </motion.div>
+            </Box>
+          </Box>
         ))}
-      </div>
-    </div>
+      </Stack>
+    </Box>
   );
 }
 
@@ -177,22 +272,28 @@ function AnimatedPoints({
   const percentage = (points / 300) * 100;
 
   return (
-    <div className="relative w-12 sm:w-16 md:w-20 lg:w-24 h-4 sm:h-5 md:h-6 lg:h-7 bg-charcoal-outline rounded border border-primary-blue/20 overflow-hidden">
-      <motion.div
-        className={`absolute inset-y-0 left-0 ${
-          position <= 3
-            ? 'bg-gradient-to-r from-performance-green/40 to-performance-green/20'
-            : 'bg-gradient-to-r from-iron-gray to-charcoal-outline'
-        }`}
+    <Box position="relative" w={{ base: 12, sm: 16, md: 20, lg: 24 }} h={{ base: 4, sm: 5, md: 6, lg: 7 }} bg="bg-charcoal-outline" rounded="sm" border borderColor="border-primary-blue/20" overflow="hidden">
+      <Box
+        as={motion.div}
+        position="absolute"
+        insetY="0"
+        left="0"
+        bg={position <= 3 ? 'bg-gradient-to-r from-performance-green/40 to-performance-green/20' : 'bg-gradient-to-r from-iron-gray to-charcoal-outline'}
         initial={{ width: '0%' }}
         animate={{ width: `${percentage}%` }}
         transition={{ duration: shouldReduceMotion ? 0 : 0.8, ease: 'easeOut', delay: 0.1 + position * 0.05 }}
       />
-      <div className="relative h-full flex items-center justify-center">
-        <motion.span className="text-[8px] sm:text-[10px] md:text-xs font-mono font-semibold text-white">
-          {shouldReduceMotion ? points : <motion.span>{spring}</motion.span>}
-        </motion.span>
-      </div>
-    </div>
+      <Box position="relative" h="full" display="flex" alignItems="center" justifyContent="center">
+        <Box as={motion.span} 
+          // eslint-disable-next-line gridpilot-rules/component-classification
+          style={{ fontSize: '10px' }} 
+          font="mono" 
+          weight="semibold" 
+          color="text-white"
+        >
+          {shouldReduceMotion ? points : <Box as={motion.span}>{spring}</Box>}
+        </Box>
+      </Box>
+    </Box>
   );
-}
+}