first commit

web/src/components/CustomCard.tsx

@@ -0,0 +1,29 @@
+import { Card } from "@heroui/react";
+import { tv, type VariantProps } from "tailwind-variants";
+import React from "react";
+
+// Define custom styles
+export const customStyles = tv({
+  variants: {
+    variant: {
+      glass: "bg-white/70 backdrop-blur-md border-white/20 shadow-xl dark:bg-black/70 dark:border-white/10",
+      neon: "border border-blue-500 shadow-[0_0_15px_rgba(59,130,246,0.5)] bg-gray-900/90 text-white",
+      minimal: "border-none shadow-none bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
+    },
+  },
+});
+
+type CustomCardProps = React.ComponentProps<typeof Card> & VariantProps<typeof customStyles>;
+
+// Create the custom component
+export function CustomCard({ className, variant, ...props }: CustomCardProps) {
+  // Use custom styles and merge with className
+  return <Card className={customStyles({ variant, className })} {...props} />;
+}
+
+// Attach subcomponents to the custom component for easier usage
+CustomCard.Header = Card.Header;
+CustomCard.Content = Card.Content;
+CustomCard.Footer = Card.Footer;
+CustomCard.Title = Card.Title;
+CustomCard.Description = Card.Description;