"use client"; import React, { useState, useRef } from "react"; import { motion } from "framer-motion"; import { CreditCard, Zap, Shield } from "lucide-react"; export function Hover3DCard() { return (

} /> } /> } />

); } function Card3D({ title, description, icon }: { title: string, description: string, icon: React.ReactNode }) { const ref = useRef(null); const [position, setPosition] = useState({ x: 0, y: 0 }); const [isHovered, setIsHovered] = useState(false); const handleMouseMove = (e: React.MouseEvent) => { if (!ref.current) return; const rect = ref.current.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; // Calculate rotation (-15deg to 15deg) const rotateX = ((y / rect.height) - 0.5) * -30; const rotateY = ((x / rect.width) - 0.5) * 30; setPosition({ x: rotateY, y: rotateX }); }; return ( setIsHovered(true)} onMouseLeave={() => { setIsHovered(false); setPosition({ x: 0, y: 0 }); }} animate={{ rotateX: position.y, rotateY: position.x, scale: isHovered ? 1.05 : 1 }} transition={{ type: "spring", stiffness: 400, damping: 30 }} className="relative w-72 h-80 rounded-2xl bg-zinc-900 border border-zinc-800 p-8 flex flex-col justify-center items-center text-center cursor-pointer overflow-hidden shadow-2xl [transform-style:preserve-3d]" > {/* Glare Effect */} {isHovered && (

)} {icon} {title} {description} ); }

Lightning Fast

Bank-grade Security

Smart Payments