website refactor

apps/website/components/drivers/DriverStats.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+
+interface DriverStatsProps {
+  rating: number;
+  wins: number;
+  podiums: number;
+  winRate: string;
+}
+
+export function DriverStats({ rating, wins, podiums, winRate }: DriverStatsProps) {
+  return (
+    <Stack direction="row" align="center" gap={8} textAlign="center">
+      <Box>
+        <Text size="2xl" weight="bold" color="text-primary-blue" block>{rating}</Text>
+        <Text size="xs" color="text-gray-400" block>Rating</Text>
+      </Box>
+      <Box>
+        <Text size="2xl" weight="bold" color="text-green-400" block>{wins}</Text>
+        <Text size="xs" color="text-gray-400" block>Wins</Text>
+      </Box>
+      <Box>
+        <Text size="2xl" weight="bold" color="text-warning-amber" block>{podiums}</Text>
+        <Text size="xs" color="text-gray-400" block>Podiums</Text>
+      </Box>
+      <Box>
+        <Text size="sm" color="text-gray-400" block>{winRate}%</Text>
+        <Text size="xs" color="text-gray-500" block>Win Rate</Text>
+      </Box>
+    </Stack>
+  );
+}