Card

<Card className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Welcome to HextaUI</CardTitle>
    <CardDescription>
      Beautiful components for modern web applications with elegant design
      and smooth interactions.
    </CardDescription>
  </CardHeader>
  <CardContent>
    <p className="text-sm text-[hsl(var(--hu-muted-foreground))]">
      Experience the perfect blend of aesthetics and functionality with our
      comprehensive component library.
    </p>
  </CardContent>
  <CardFooter>
    <Button className="w-full">Get Started</Button>
  </CardFooter>
</Card>

"use client";

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const cardVariants = cva(
  "relative rounded-[var(--radius)] bg-[hsl(var(--hu-card))] text-[hsl(var(--hu-card-foreground))] transition-all duration-300 ease-out overflow-hidden",
  {
    variants: {
      variant: {
        default:
          "border border-[hsl(var(--hu-border))] shadow-sm hover:shadow-lg hover:shadow-[hsl(var(--hu-primary))]/5 hover:-translate-y-0.5",
        outline:
          "border-2 border-[hsl(var(--hu-border))] shadow-sm hover:border-[hsl(var(--hu-primary))]/30 hover:shadow-lg hover:-translate-y-0.5",
        ghost:
          "border-transparent shadow-none hover:bg-[hsl(var(--hu-accent))] hover:shadow-md",
        elevated:
          "border border-[hsl(var(--hu-border))]/50 shadow-lg shadow-[hsl(var(--hu-primary))]/5 hover:shadow-xl hover:shadow-[hsl(var(--hu-primary))]/10 hover:-translate-y-1",
        gradient:
          "border border-[hsl(var(--hu-border))]/30 bg-gradient-to-br from-[hsl(var(--hu-card))] via-[hsl(var(--hu-card))] to-[hsl(var(--hu-accent))]/20 shadow-lg hover:shadow-xl hover:-translate-y-0.5",
        glass:
          "border border-[hsl(var(--hu-border))]/20 bg-[hsl(var(--hu-card))]/80 backdrop-blur-sm shadow-lg hover:bg-[hsl(var(--hu-card))]/90 hover:shadow-xl hover:-translate-y-0.5",
      },
      size: {
        sm: "p-4",
        default: "p-6",
        lg: "p-8",
        xl: "p-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  },
);

export interface CardProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof cardVariants> {}

const Card = React.forwardRef<HTMLDivElement, CardProps>(
  ({ className, variant, size, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(cardVariants({ variant, size }), className)}
      {...props}
    />
  ),
);
Card.displayName = "Card";

const CardHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex flex-col space-y-2 pb-4", className)}
    {...props}
  />
));
CardHeader.displayName = "CardHeader";

const CardTitle = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
  <h3
    ref={ref}
    className={cn(
      "text-xl font-semibold leading-tight tracking-tight text-[hsl(var(--hu-foreground))]",
      className,
    )}
    {...props}
  />
));
CardTitle.displayName = "CardTitle";

const CardDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <p
    ref={ref}
    className={cn(
      "text-sm text-[hsl(var(--hu-muted-foreground))] leading-relaxed",
      className,
    )}
    {...props}
  />
));
CardDescription.displayName = "CardDescription";

const CardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("space-y-4", className)} {...props} />
));
CardContent.displayName = "CardContent";

const CardFooter = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "flex items-center justify-between pt-4 mt-6 border-t border-[hsl(var(--hu-border))]/30",
      className,
    )}
    {...props}
  />
));
CardFooter.displayName = "CardFooter";

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardDescription,
  CardContent,
  cardVariants,
};

<Card className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Notifications</CardTitle>
    <CardDescription>You have 3 unread messages.</CardDescription>
  </CardHeader>
  <CardContent>
    <div className="flex items-center space-x-4 rounded-md border border-[hsl(var(--hu-border))] p-4">
      <Bell className="h-4 w-4" />
      <div className="flex-1 space-y-1">
        <p className="text-sm font-medium leading-none">
          Push Notifications
        </p>
        <p className="text-sm text-[hsl(var(--hu-muted-foreground))]">
          Send notifications to device.
        </p>
      </div>
    </div>
  </CardContent>
  <CardFooter>
    <Button className="w-full">
      <Settings className="mr-2 h-4 w-4" />
      Settings
    </Button>
  </CardFooter>
</Card>

<Card variant="default">
  <CardHeader>
    <CardTitle>Default Card</CardTitle>
    <CardDescription>Standard card styling</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Default card content with standard border.</p>
  </CardContent>
</Card>

<Card variant="outline">
  <CardHeader>
    <CardTitle>Outline Card</CardTitle>
    <CardDescription>Card with thicker border</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Outline card with emphasized border.</p>
  </CardContent>
</Card>

<Card variant="ghost">
  <CardHeader>
    <CardTitle>Ghost Card</CardTitle>
    <CardDescription>Card without border</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Ghost card with no border or shadow.</p>
  </CardContent>
</Card>

<Card variant="elevated">
  <CardHeader>
    <CardTitle>Elevated Card</CardTitle>
    <CardDescription>Card with enhanced shadow</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Elevated card with larger shadow effect.</p>
  </CardContent>
</Card>

<Card size="sm">
  <CardHeader>
    <CardTitle>Small Card</CardTitle>
    <CardDescription>Compact padding</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Small card with reduced padding.</p>
  </CardContent>
</Card>

<Card size="default">
  <CardHeader>
    <CardTitle>Default Card</CardTitle>
    <CardDescription>Standard padding</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Default card with standard padding.</p>
  </CardContent>
</Card>

<Card size="lg">
  <CardHeader>
    <CardTitle>Large Card</CardTitle>
    <CardDescription>Increased padding</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Large card with increased padding.</p>
  </CardContent>
</Card>

<Card className="w-full max-w-sm">
  <CardHeader className="text-center pb-2">
    <div className="w-20 h-20 rounded-full bg-[hsl(var(--hu-accent))] mx-auto mb-4 flex items-center justify-center">
      <User className="h-10 w-10 text-[hsl(var(--hu-accent-foreground))]" />
    </div>
    <CardTitle>John Doe</CardTitle>
    <CardDescription>Software Engineer at HextaUI</CardDescription>
  </CardHeader>
  <CardContent className="space-y-4">
    <div className="flex items-center space-x-2">
      <Mail className="h-4 w-4 text-[hsl(var(--hu-muted-foreground))]" />
      <span className="text-sm">john@example.com</span>
    </div>
    <div className="flex items-center space-x-2">
      <Phone className="h-4 w-4 text-[hsl(var(--hu-muted-foreground))]" />
      <span className="text-sm">+1 (555) 123-4567</span>
    </div>
    <div className="flex items-center space-x-2">
      <Calendar className="h-4 w-4 text-[hsl(var(--hu-muted-foreground))]" />
      <span className="text-sm">Joined January 2024</span>
    </div>
  </CardContent>
  <CardFooter className="flex gap-2">
    <Button variant="outline" className="flex-1">
      Message
    </Button>
    <Button className="flex-1">Follow</Button>
  </CardFooter>
</Card>

<Card className="w-full max-w-md">
  <CardHeader>
    <CardTitle>Sign In</CardTitle>
    <CardDescription>
      Enter your credentials to access your account
    </CardDescription>
  </CardHeader>
  <CardContent className="space-y-4">
    <div className="space-y-2">
      <Label htmlFor="email">Email</Label>
      <Input
        id="email"
        type="email"
        placeholder="Enter your email"
        leftIcon={<Mail />}
      />
    </div>
    <div className="space-y-2">
      <Label htmlFor="password">Password</Label>
      <Input
        id="password"
        type="password"
        placeholder="Enter your password"
      />
    </div>
  </CardContent>
  <CardFooter className="flex flex-col space-y-2">
    <Button className="w-full">Sign In</Button>
    <Button variant="outline" className="w-full">
      Sign Up
    </Button>
  </CardFooter>
</Card>

<Card className="w-full max-w-md">
  <CardContent className="pt-6">
    <div className="text-center space-y-2">
      <h3 className="text-lg font-semibold">Welcome!</h3>
      <p className="text-sm text-[hsl(var(--hu-muted-foreground))]">
        This is a simple card without header or footer.
      </p>
      <Button className="mt-4">Get Started</Button>
    </div>
  </CardContent>
</Card>