"use client" import * as React from "react" import Link from "next/link" import { motion, useMotionValue, useSpring, useTransform } from "framer-motion" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Section } from "@/components/marketing/section" import { CtaProps } from "./cta" /** Interactive 3D keycard call-to-action with tilt effect. */ export function CtaKeycard({ heading, description, ctaHref = "/login", className }: CtaProps) { const x = useMotionValue(0) const y = useMotionValue(0) const mouseXSpring = useSpring(x, { stiffness: 100, damping: 20 }) const mouseYSpring = useSpring(y, { stiffness: 100, damping: 20 }) const rotateX = useTransform(mouseYSpring, [-0.5, 0.5], ["15deg", "-15deg"]) const rotateY = useTransform(mouseXSpring, [-0.5, 0.5], ["-15deg", "15deg"]) const handleMouseMove = (e: React.MouseEvent) => { const rect = e.currentTarget.getBoundingClientRect() const width = rect.width const height = rect.height const mouseX = e.clientX - rect.left const mouseY = e.clientY - rect.top const xPct = mouseX / width - 0.5 const yPct = mouseY / height - 0.5 x.set(xPct) y.set(yPct) } const handleMouseLeave = () => { x.set(0) y.set(0) } return (

Option 3

The Keycard

{heading}

{description}

Pro Pass

ID: BK-001

LIFETIME

{/* Soft sheen effect */}

) }