website refactor

apps/website/ui/CategoryDistributionCard.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Box } from './Box';
+import { Text } from './Text';
+import { ProgressBar } from './ProgressBar';
+
+interface CategoryDistributionCardProps {
+  label: string;
+  count: number;
+  percentage: number;
+  color: string;
+  bgColor: string;
+  borderColor: string;
+  progressColor: string;
+}
+
+export function CategoryDistributionCard({
+  label,
+  count,
+  percentage,
+  color,
+  bgColor,
+  borderColor,
+  progressColor,
+}: CategoryDistributionCardProps) {
+  return (
+    <Box p={4} rounded="xl" className={`${bgColor} border ${borderColor}`}>
+      <Box display="flex" alignItems="center" justifyContent="between" mb={3}>
+        <Text size="2xl" weight="bold" className={color}>{count}</Text>
+      </Box>
+      <Text color="text-white" weight="medium" block mb={1}>{label}</Text>
+      <ProgressBar value={percentage} max={100} color={progressColor} bg="bg-deep-graphite/50" />
+      <Text size="xs" color="text-gray-500" block mt={1}>{percentage}% of drivers</Text>
+    </Box>
+  );
+}