feat: vollständiges HeroUI v3 Redesign — Types, Utils, Layout, Sections, Dark SaaS Design

frontend/src/components/shared/StatCard.tsx

@@ -0,0 +1,22 @@
+import { Card, CardContent } from '@heroui/react';
+import type { ReactNode } from 'react';
+
+type Props = {
+  icon: ReactNode;
+  label: string;
+  value: string;
+};
+
+export function StatCard({ icon, label, value }: Props) {
+  return (
+    <Card className="border border-default-100 bg-default-50/20">
+      <CardContent className="flex flex-col gap-2 p-4">
+        <div className="flex items-center gap-2 text-tiny uppercase tracking-widest text-default-500">
+          <span className="text-primary-400">{icon}</span>
+          {label}
+        </div>
+        <div className="text-2xl font-bold tracking-tight">{value}</div>
+      </CardContent>
+    </Card>
+  );
+}