"use client"; import { MapPin } from "lucide-react"; import React, { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; const MaskCard = () => { const [isHovered, setIsHovered] = useState(false); // Common transition configs const springConfig = { type: "spring", stiffness: 400, damping: 25 }; const quickSpring = { type: "spring", stiffness: 600, damping: 30 }; // Animation variants const cardVariants = { initial: { opacity: 0, y: 50, scale: 0.95 }, animate: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.6, type: "spring", stiffness: 100, damping: 15, }, }, hover: { scale: 1.02, transition: { duration: 0.3, ...springConfig } }, tap: { scale: 0.98, transition: { duration: 0.1, ...quickSpring } }, }; const staggeredEntrance = { location: { delay: 0.3, duration: 0.5 }, button: { delay: 0.4, duration: 0.5 }, bottomBar: { delay: 0.5, duration: 0.5 }, }; return ( setIsHovered(true)} onHoverEnd={() => setIsHovered(false)} > {/* Main Card Container */}

{/* Background Image */} {/* Gradient Overlay */} {/* Shimmer Effect */} {isHovered && ( )}

{/* Top Content */}

{/* Location Badge */} Athens, Gr {/* Top Rated Button */} Top Rated

{/* Bottom Action Bar */}

Perla Casa Book Now

); }; export default MaskCard;

Mask Card