components/ui/card.tsx

@@ -0,0 +1,42 @@
+import type { HTMLAttributes } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+/**
+ * 卡片变体，对应 DESIGN.md：
+ * - base    → card-base（白底 + hairline 描边）
+ * - feature → card-feature（surface 底、无描边）
+ * - mockup  → hero-product-mockup（含大扩散阴影，仅 Hero 使用）
+ */
+export const cardVariants = cva("", {
+	variants: {
+		variant: {
+			base: "bg-canvas border border-hairline rounded-lg",
+			feature: "bg-surface rounded-lg",
+			mockup: "bg-canvas border border-hairline-soft rounded-lg shadow-mockup",
+		},
+		padding: {
+			none: "p-0",
+			sm: "p-md",
+			md: "p-xl",
+			lg: "p-xxl",
+		},
+	},
+	defaultVariants: {
+		variant: "base",
+		padding: "md",
+	},
+});
+
+export type CardProps = HTMLAttributes<HTMLDivElement> &
+	VariantProps<typeof cardVariants>;
+
+/** 通用卡片容器 */
+export function Card({ className, variant, padding, ...props }: CardProps) {
+	return (
+		<div
+			className={cn(cardVariants({ variant, padding }), className)}
+			{...props}
+		/>
+	);
+}