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

frontend/src/components/shared/SectionCard.tsx

@@ -0,0 +1,24 @@
+import { Card, CardHeader, CardContent } from '@heroui/react';
+import type { ReactNode } from 'react';
+
+type Props = {
+  title: string;
+  subtitle?: string;
+  children: ReactNode;
+  action?: ReactNode;
+};
+
+export function SectionCard({ title, subtitle, children, action }: Props) {
+  return (
+    <Card className="border border-default-100 bg-gradient-to-b from-default-50/40 to-background">
+      <CardHeader className="flex items-start justify-between gap-4 px-6 pt-6 pb-0">
+        <div className="min-w-0">
+          <h2 className="text-xl font-bold tracking-tight">{title}</h2>
+          {subtitle && <p className="mt-1 text-small text-default-500">{subtitle}</p>}
+        </div>
+        {action && <div className="shrink-0">{action}</div>}
+      </CardHeader>
+      <CardContent className="px-6 py-5">{children}</CardContent>
+    </Card>
+  );
+}