Card

<div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px] p-6"><h3 className="font-semibold text-lg">Simple Card</h3><p className="text-sm text-muted-foreground mt-2">Just a basic card with some text.</p></div>

"use client";

import React, { useState } from "react";

interface CardSimpleProps {
  className?: string;
  children?: React.ReactNode;
}

export default function CardSimple({
  className = "",
  children,
}: CardSimpleProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px] p-6"><h3 className="font-semibold text-lg">Simple Card</h3><p className="text-sm text-muted-foreground mt-2">Just a basic card with some text.</p></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedCardSimple() {
  return (
    <motion.div
      whileHover={{ y: -6, boxShadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)" }}
      transition={{ type: "spring", stiffness: 300, damping: 20 }}
      className="w-full max-w-sm rounded-2xl border border-border bg-card p-6 shadow-xs cursor-pointer"
    >
      <h3 className="font-bold text-base text-foreground mb-1">Animated Card</h3>
      <p className="text-xs text-muted-foreground leading-relaxed">
        Hover to trigger realistic physical lift and elevation shadow transitions.
      </p>
    </motion.div>
  );
}

<div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px]"><div className="p-6 pb-2"><h3 className="font-semibold text-lg">Header</h3></div><div className="p-6 pt-0"><p className="text-sm text-muted-foreground">Content area.</p></div></div>

"use client";

import React, { useState } from "react";

interface CardHeaderProps {
  className?: string;
  children?: React.ReactNode;
}

export default function CardHeader({
  className = "",
  children,
}: CardHeaderProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px]"><div className="p-6 pb-2"><h3 className="font-semibold text-lg">Header</h3></div><div className="p-6 pt-0"><p className="text-sm text-muted-foreground">Content area.</p></div></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedCardHeader() {
  return (
    <motion.div
      whileHover={{ y: -6, boxShadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)" }}
      transition={{ type: "spring", stiffness: 300, damping: 20 }}
      className="w-full max-w-sm rounded-2xl border border-border bg-card p-6 shadow-xs cursor-pointer"
    >
      <h3 className="font-bold text-base text-foreground mb-1">Animated Card</h3>
      <p className="text-xs text-muted-foreground leading-relaxed">
        Hover to trigger realistic physical lift and elevation shadow transitions.
      </p>
    </motion.div>
  );
}

<div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px]"><div className="p-6"><h3 className="font-semibold text-lg">Main Content</h3></div><div className="p-6 pt-0 flex justify-end"><button className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">Action</button></div></div>

"use client";

import React, { useState } from "react";

interface CardFooterProps {
  className?: string;
  children?: React.ReactNode;
}

export default function CardFooter({
  className = "",
  children,
}: CardFooterProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px]"><div className="p-6"><h3 className="font-semibold text-lg">Main Content</h3></div><div className="p-6 pt-0 flex justify-end"><button className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">Action</button></div></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedCardFooter() {
  return (
    <motion.div
      whileHover={{ y: -6, boxShadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)" }}
      transition={{ type: "spring", stiffness: 300, damping: 20 }}
      className="w-full max-w-sm rounded-2xl border border-border bg-card p-6 shadow-xs cursor-pointer"
    >
      <h3 className="font-bold text-base text-foreground mb-1">Animated Card</h3>
      <p className="text-xs text-muted-foreground leading-relaxed">
        Hover to trigger realistic physical lift and elevation shadow transitions.
      </p>
    </motion.div>
  );
}

<div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px] overflow-hidden"><img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&q=80" className="w-full h-40 object-cover" / alt="Image description" width="800" height="600"><div className="p-6"><h3 className="font-semibold">Image Card</h3></div></div>

"use client";

import React, { useState } from "react";

interface CardImageProps {
  className?: string;
  children?: React.ReactNode;
}

export default function CardImage({
  className = "",
  children,
}: CardImageProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px] overflow-hidden"><img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&q=80" className="w-full h-40 object-cover" / alt="Image description" width="800" height="600"><div className="p-6"><h3 className="font-semibold">Image Card</h3></div></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedCardImage() {
  return (
    <motion.div
      whileHover={{ y: -6, boxShadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)" }}
      transition={{ type: "spring", stiffness: 300, damping: 20 }}
      className="w-full max-w-sm rounded-2xl border border-border bg-card p-6 shadow-xs cursor-pointer"
    >
      <h3 className="font-bold text-base text-foreground mb-1">Animated Card</h3>
      <p className="text-xs text-muted-foreground leading-relaxed">
        Hover to trigger realistic physical lift and elevation shadow transitions.
      </p>
    </motion.div>
  );
}

<div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px] p-6 cursor-pointer transition-colors hover:bg-muted/50"><h3 className="font-semibold">Hover me</h3></div>

"use client";

import React, { useState } from "react";

interface CardInteractiveProps {
  className?: string;
  children?: React.ReactNode;
}

export default function CardInteractive({
  className = "",
  children,
}: CardInteractiveProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px] p-6 cursor-pointer transition-colors hover:bg-muted/50"><h3 className="font-semibold">Hover me</h3></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedCardInteractive() {
  return (
    <motion.div
      whileHover={{ y: -6, boxShadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)" }}
      transition={{ type: "spring", stiffness: 300, damping: 20 }}
      className="w-full max-w-sm rounded-2xl border border-border bg-card p-6 shadow-xs cursor-pointer"
    >
      <h3 className="font-bold text-base text-foreground mb-1">Animated Card</h3>
      <p className="text-xs text-muted-foreground leading-relaxed">
        Hover to trigger realistic physical lift and elevation shadow transitions.
      </p>
    </motion.div>
  );
}

<div className="rounded-xl border border-transparent bg-primary text-primary-foreground shadow w-[350px] p-6"><h3 className="font-semibold">Colored Card</h3><p className="text-sm opacity-90 mt-2">Primary background color.</p></div>

"use client";

import React, { useState } from "react";

interface CardColoredProps {
  className?: string;
  children?: React.ReactNode;
}

export default function CardColored({
  className = "",
  children,
}: CardColoredProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="rounded-xl border border-transparent bg-primary text-primary-foreground shadow w-[350px] p-6"><h3 className="font-semibold">Colored Card</h3><p className="text-sm opacity-90 mt-2">Primary background color.</p></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedCardColored() {
  return (
    <motion.div
      whileHover={{ y: -6, boxShadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)" }}
      transition={{ type: "spring", stiffness: 300, damping: 20 }}
      className="w-full max-w-sm rounded-2xl border border-border bg-card p-6 shadow-xs cursor-pointer"
    >
      <h3 className="font-bold text-base text-foreground mb-1">Animated Card</h3>
      <p className="text-xs text-muted-foreground leading-relaxed">
        Hover to trigger realistic physical lift and elevation shadow transitions.
      </p>
    </motion.div>
  );
}

<div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px] p-6 text-center"><h3 className="font-semibold text-lg">Pro Plan</h3><div className="mt-4 text-4xl font-bold">$29<span className="text-lg text-muted-foreground">/mo</span></div><button className="mt-6 w-full bg-primary text-primary-foreground px-4 py-2 rounded-md">Subscribe</button></div>

"use client";

import React, { useState } from "react";

interface CardPricingProps {
  className?: string;
  children?: React.ReactNode;
}

export default function CardPricing({
  className = "",
  children,
}: CardPricingProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px] p-6 text-center"><h3 className="font-semibold text-lg">Pro Plan</h3><div className="mt-4 text-4xl font-bold">$29<span className="text-lg text-muted-foreground">/mo</span></div><button className="mt-6 w-full bg-primary text-primary-foreground px-4 py-2 rounded-md">Subscribe</button></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedCardPricing() {
  return (
    <motion.div
      whileHover={{ y: -6, boxShadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)" }}
      transition={{ type: "spring", stiffness: 300, damping: 20 }}
      className="w-full max-w-sm rounded-2xl border border-border bg-card p-6 shadow-xs cursor-pointer"
    >
      <h3 className="font-bold text-base text-foreground mb-1">Animated Card</h3>
      <p className="text-xs text-muted-foreground leading-relaxed">
        Hover to trigger realistic physical lift and elevation shadow transitions.
      </p>
    </motion.div>
  );
}

<div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px] p-6 text-center"><img src="https://i.pravatar.cc/150?u=a" className="w-20 h-20 rounded-full mx-auto mb-4" / alt="Image description" width="150" height="150"><h3 className="font-semibold text-lg">John Doe</h3><p className="text-sm text-muted-foreground">Software Engineer</p></div>

"use client";

import React, { useState } from "react";

interface CardProfileProps {
  className?: string;
  children?: React.ReactNode;
}

export default function CardProfile({
  className = "",
  children,
}: CardProfileProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px] p-6 text-center"><img src="https://i.pravatar.cc/150?u=a" className="w-20 h-20 rounded-full mx-auto mb-4" / alt="Image description" width="150" height="150"><h3 className="font-semibold text-lg">John Doe</h3><p className="text-sm text-muted-foreground">Software Engineer</p></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedCardProfile() {
  return (
    <motion.div
      whileHover={{ y: -6, boxShadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)" }}
      transition={{ type: "spring", stiffness: 300, damping: 20 }}
      className="w-full max-w-sm rounded-2xl border border-border bg-card p-6 shadow-xs cursor-pointer"
    >
      <h3 className="font-bold text-base text-foreground mb-1">Animated Card</h3>
      <p className="text-xs text-muted-foreground leading-relaxed">
        Hover to trigger realistic physical lift and elevation shadow transitions.
      </p>
    </motion.div>
  );
}

<div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px] p-6 flex justify-between items-center"><div><p className="text-sm text-muted-foreground">Total Revenue</p><h3 className="text-2xl font-bold mt-1">$45,231.89</h3></div><div className="h-10 w-10 bg-primary/10 rounded-full flex items-center justify-center text-primary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></div></div>

"use client";

import React, { useState } from "react";

interface CardStatsProps {
  className?: string;
  children?: React.ReactNode;
}

export default function CardStats({
  className = "",
  children,
}: CardStatsProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px] p-6 flex justify-between items-center"><div><p className="text-sm text-muted-foreground">Total Revenue</p><h3 className="text-2xl font-bold mt-1">$45,231.89</h3></div><div className="h-10 w-10 bg-primary/10 rounded-full flex items-center justify-center text-primary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></div></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedCardStats() {
  return (
    <motion.div
      whileHover={{ y: -6, boxShadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)" }}
      transition={{ type: "spring", stiffness: 300, damping: 20 }}
      className="w-full max-w-sm rounded-2xl border border-border bg-card p-6 shadow-xs cursor-pointer"
    >
      <h3 className="font-bold text-base text-foreground mb-1">Animated Card</h3>
      <p className="text-xs text-muted-foreground leading-relaxed">
        Hover to trigger realistic physical lift and elevation shadow transitions.
      </p>
    </motion.div>
  );
}

<div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px] p-6"><h3 className="font-semibold text-lg mb-4">Login</h3><div className="space-y-4"><input className="w-full h-10 px-3 border rounded-md" placeholder="Email" /><input type="password" className="w-full h-10 px-3 border rounded-md" placeholder="Password" /><button className="w-full h-10 bg-primary text-primary-foreground rounded-md">Sign In</button></div></div>

"use client";

import React, { useState } from "react";

interface CardFormProps {
  className?: string;
  children?: React.ReactNode;
}

export default function CardForm({
  className = "",
  children,
}: CardFormProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px] p-6"><h3 className="font-semibold text-lg mb-4">Login</h3><div className="space-y-4"><input className="w-full h-10 px-3 border rounded-md" placeholder="Email" /><input type="password" className="w-full h-10 px-3 border rounded-md" placeholder="Password" /><button className="w-full h-10 bg-primary text-primary-foreground rounded-md">Sign In</button></div></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedCardForm() {
  return (
    <motion.div
      whileHover={{ y: -6, boxShadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)" }}
      transition={{ type: "spring", stiffness: 300, damping: 20 }}
      className="w-full max-w-sm rounded-2xl border border-border bg-card p-6 shadow-xs cursor-pointer"
    >
      <h3 className="font-bold text-base text-foreground mb-1">Animated Card</h3>
      <p className="text-xs text-muted-foreground leading-relaxed">
        Hover to trigger realistic physical lift and elevation shadow transitions.
      </p>
    </motion.div>
  );
}