1
npm i framer-motion

1
import { useState } from 'react';
2
import { motion } from 'framer-motion';
3

4
type LumeCardProps = {
5
  title?: string;
6
  paragraph?: string;
7
  image?: string;
8
  className?: string;
9
};
10

11
const LumeCard = ({ title, paragraph, image, className }: LumeCardProps) => {
12
  const [isExpanded, setIsExpanded] = useState(false);
13

14
  return (
15
    <div className={`w-full max-w-[250px] sm:max-w-sm md:max-w-md ${className}`}>
16
      {/* Card */}
17
      <motion.div
18
        className="relative w-full h-[250px] rounded-2xl overflow-hidden shadow-lg cursor-pointer"
19
        onMouseEnter={() => setIsExpanded(true)}
20
        onMouseLeave={() => setIsExpanded(false)}
21
        initial={{ scale: 1 }}
22
        animate={{ scale: isExpanded ? 1.05 : 1 }}
23
        whileTap={{ scale: 0.98 }}
24
        transition={{ duration: 0.6, ease: 'backOut' }}
25
      >
26
        {/* Background Image */}
27
        <motion.div
28
          className="absolute inset-0 bg-cover bg-center"
29
          style={{ backgroundImage: `url(${image})` }}
30
          initial={{ scale: 1 }}
31
          animate={{ scale: isExpanded ? 1.15 : 1 }}
32
          transition={{ duration: 0.8 }}
33
        ></motion.div>
34

35
        {/* Subtle Overlay */}
36
        <motion.div
37
          className="absolute inset-0 bg-white/10 backdrop-blur-md rounded-2xl border border-white/10"
38
          initial={{ opacity: 0.3 }}
39
          animate={{ opacity: isExpanded ? 0 : 0.5 }}
40
          transition={{ duration: 0.5 }}
41
        ></motion.div>
42
      </motion.div>
43

44
      <motion.h2
45
        className="mt-2 text-white sm:text-lg md:text-2xl font-bold tracking-wide"
46
        initial={{ opacity: 0 }}
47
        whileInView={{ opacity: 1 }}
48
        viewport={{ once: true }}
49
        transition={{ duration: 0.2 }}
50
      >
51
        {title}
52
      </motion.h2>
53

54
      {/* Paragraph Below the Card */}
55
      <motion.div
56
        className="text-white/60 text-sm sm:text-base opacity-90"
57
        initial={{ opacity: 0, y: 10 }}
58
        whileInView={{ opacity: 1, y: 0 }}
59
        viewport={{ once: true }}
60
        transition={{ duration: 0.6, delay: 0.2 }}
61
      >
62
        {paragraph}
63
      </motion.div>
64
    </div>
65
  );
66
};
67

68
export default LumeCard;