Almost all sections with mock data

src/components/performance/LineChart.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+
+interface LineChartProps {
+  className?: string
+  height?: number
+  data?: number[]
+}
+
+export default function LineChart({
+  className,
+  height = 160,
+  data = [],
+}: LineChartProps) {
+  const points = data.length >= 2
+    ? data
+        .map((v, i) => {
+          const x = (i / Math.max(1, data.length - 1)) * 100
+          const y = 100 - Math.min(100, Math.max(0, v))
+          return `${x},${y}`
+        })
+        .join(' ')
+    : '0,100 100,100'
+
+  return (
+    <div
+      className={cn(
+        'rounded-lg bg-dark-200/80 border border-white/5 overflow-hidden',
+        className
+      )}
+      style={{ height }}
+    >
+      {data.length >= 2 ? (
+        <svg
+          viewBox="0 0 100 100"
+          preserveAspectRatio="none"
+          className="w-full h-full text-cyan-500/30"
+        >
+          <polyline
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="0.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            points={points}
+            className="transition-all duration-500"
+          />
+        </svg>
+      ) : (
+        <div className="flex h-full items-center justify-center text-gray-600 text-sm">
+          —
+        </div>
+      )}
+    </div>
+  )
+}