init

components/stat-card.tsx

@@ -10,16 +10,25 @@ type StatCardProps = {
 export function StatCard({ label, value, hint, highlight }: StatCardProps) {
   return (
     <div
-      className={
+      className={`group relative overflow-hidden rounded-2xl border bg-surface/55 shadow-lg shadow-black/10 backdrop-blur-md p-4 transition-all duration-200 hover:-translate-y-0.5 ${
         highlight
-          ? "rounded-lg border border-l-2 border-muted/30 border-l-accent/70 bg-surface p-4"
-          : "rounded-lg border border-muted/40 bg-surface px-3 py-2.5"
-      }
+          ? "border-accent/30 shadow-accent/5"
+          : "border-white/10 hover:border-white/20"
+      }`}
     >
-      <div className={highlight ? "text-xs font-medium uppercase tracking-widest text-fg/50" : "text-xs text-fg/55"}>
+      {highlight && (
+        <div className="pointer-events-none absolute -right-8 -top-10 h-24 w-24 rounded-full bg-accent/20 blur-2xl" />
+      )}
+      <div className="text-xs font-medium uppercase tracking-widest text-fg/50">
         {label}
       </div>
-      <div className={highlight ? "mt-1.5 text-2xl font-bold text-fg" : "mt-0.5 text-base font-semibold text-fg"}>{value}</div>
+      <div
+        className={`mt-1.5 font-display font-bold tabular-nums text-fg ${
+          highlight ? "text-2xl" : "text-xl"
+        }`}
+      >
+        {value}
+      </div>
       {hint ? <div className="mt-1 text-xs text-fg/50">{hint}</div> : null}
     </div>
   );