website refactor

apps/website/ui/GoalCard.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Box } from './Box';
+import { Stack } from './Stack';
+import { Text } from './Text';
+import { Heading } from './Heading';
+import { Card } from './Card';
+import { ProgressBar } from './ProgressBar';
+
+interface GoalCardProps {
+  title: string;
+  icon: string;
+  goalLabel: string;
+  currentValue: number;
+  maxValue: number;
+  color?: string;
+}
+
+export function GoalCard({
+  title,
+  icon,
+  goalLabel,
+  currentValue,
+  maxValue,
+  color = 'text-primary-blue',
+}: GoalCardProps) {
+  return (
+    <Card bg="bg-charcoal-200/50" borderColor="border-primary-blue/30">
+      <Box display="flex" alignItems="center" gap={3} mb={3}>
+        <Text size="2xl">{icon}</Text>
+        <Heading level={3}>{title}</Heading>
+      </Box>
+      <Stack gap={2}>
+        <Box display="flex" alignItems="center" justifyContent="between">
+          <Text size="sm" color="text-gray-400">{goalLabel}</Text>
+          <Text size="sm" className={color}>{currentValue}/{maxValue}</Text>
+        </Box>
+        <ProgressBar value={currentValue} max={maxValue} />
+      </Stack>
+    </Card>
+  );
+}