initial commit

components/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "group/card flex flex-col rounded-[2.5rem] bg-card backdrop-blur-xl p-8 text-card-foreground ring-1 ring-border shadow-sm transition-all duration-300 hover:ring-border/80 hover:shadow-xl hover:shadow-primary/5",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  // Убираем горизонтальные отступы здесь, так как они уже есть в Card
+  return (
+    <div
+      data-slot="card-header"
+      className={cn("flex flex-col gap-1.5 pb-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("font-bold tracking-tight text-3xl", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-base text-muted-foreground pt-1", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("flex-1 pb-4", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  // CardFooter прозрачный, без верхней границы
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center pt-6", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};