extract components from website

apps/website/components/charts/CircularProgress.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+interface CircularProgressProps {
+  value: number;
+  max: number;
+  label: string;
+  color: string;
+  size?: number;
+}
+
+export default function CircularProgress({ value, max, label, color, size = 80 }: CircularProgressProps) {
+  const percentage = Math.min((value / max) * 100, 100);
+  const strokeWidth = 6;
+  const radius = (size - strokeWidth) / 2;
+  const circumference = radius * 2 * Math.PI;
+  const strokeDashoffset = circumference - (percentage / 100) * circumference;
+
+  return (
+    <div className="flex flex-col items-center">
+      <div className="relative" style={{ width: size, height: size }}>
+        <svg className="transform -rotate-90" width={size} height={size}>
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            stroke="currentColor"
+            strokeWidth={strokeWidth}
+            fill="transparent"
+            className="text-charcoal-outline"
+          />
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            stroke="currentColor"
+            strokeWidth={strokeWidth}
+            fill="transparent"
+            strokeDasharray={circumference}
+            strokeDashoffset={strokeDashoffset}
+            strokeLinecap="round"
+            className={color}
+            style={{ transition: 'stroke-dashoffset 0.5s ease-in-out' }}
+          />
+        </svg>
+        <div className="absolute inset-0 flex items-center justify-center">
+          <span className="text-lg font-bold text-white">{percentage.toFixed(0)}%</span>
+        </div>
+      </div>
+      <span className="text-xs text-gray-400 mt-2">{label}</span>
+    </div>
+  );
+}

apps/website/components/charts/FinishDistributionChart.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+interface FinishDistributionProps {
+  wins: number;
+  podiums: number;
+  topTen: number;
+  total: number;
+}
+
+export default function FinishDistributionChart({ wins, podiums, topTen, total }: FinishDistributionProps) {
+  const outsideTopTen = total - topTen;
+  const podiumsNotWins = podiums - wins;
+  const topTenNotPodium = topTen - podiums;
+
+  const segments = [
+    { label: 'Wins', value: wins, color: 'bg-performance-green', textColor: 'text-performance-green' },
+    { label: 'Podiums', value: podiumsNotWins, color: 'bg-warning-amber', textColor: 'text-warning-amber' },
+    { label: 'Top 10', value: topTenNotPodium, color: 'bg-primary-blue', textColor: 'text-primary-blue' },
+    { label: 'Other', value: outsideTopTen, color: 'bg-gray-600', textColor: 'text-gray-400' },
+  ].filter(s => s.value > 0);
+
+  return (
+    <div className="space-y-3">
+      <div className="h-4 rounded-full overflow-hidden flex bg-charcoal-outline">
+        {segments.map((segment, index) => (
+          <div
+            key={segment.label}
+            className={`${segment.color} transition-all duration-500`}
+            style={{ width: `${(segment.value / total) * 100}%` }}
+          />
+        ))}
+      </div>
+      <div className="flex flex-wrap gap-4 justify-center">
+        {segments.map((segment) => (
+          <div key={segment.label} className="flex items-center gap-2">
+            <div className={`w-3 h-3 rounded-full ${segment.color}`} />
+            <span className={`text-xs ${segment.textColor}`}>
+              {segment.label}: {segment.value} ({((segment.value / total) * 100).toFixed(0)}%)
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/website/components/charts/HorizontalBarChart.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface BarChartProps {
+  data: { label: string; value: number; color: string }[];
+  maxValue: number;
+}
+
+export default function HorizontalBarChart({ data, maxValue }: BarChartProps) {
+  return (
+    <div className="space-y-3">
+      {data.map((item) => (
+        <div key={item.label}>
+          <div className="flex justify-between text-sm mb-1">
+            <span className="text-gray-400">{item.label}</span>
+            <span className="text-white font-medium">{item.value}</span>
+          </div>
+          <div className="h-2 bg-charcoal-outline rounded-full overflow-hidden">
+            <div
+              className={`h-full rounded-full ${item.color} transition-all duration-500 ease-out`}
+              style={{ width: `${Math.min((item.value / maxValue) * 100, 100)}%` }}
+            />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}