showcase-card

1"use client"
2 
3import * as React from "react"
4import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"
5import { cn } from "@/lib/utils"
6 
7interface ShowcaseCardProps {
8    /** Top tagline text */
9    tagline?: string
10    /** Main heading text */
11    heading: string
12    /** Description text below heading */
13    description?: string
14    /** Image URL for the hero section */
15    imageUrl: string
16    /** Alt text for the image */
17    imageAlt?: string
18    /** CTA button text */
19    ctaText?: string
20    /** CTA button click handler */
21    onCtaClick?: () => void
22    /** Brand name or logo text */
23    brandName?: string
24    /** Array of service tags */
25    services?: string[]
26    /** Custom class name */
27    className?: string
28    /** Enable 3D tilt effect on hover */
29    enableTilt?: boolean
30    /** Maximum tilt angle in degrees */
31    maxTilt?: number
32    /** Enable parallax effect on image */
33    enableParallax?: boolean
34}
35 
36function ShowcaseCard({
37    tagline,
38    heading,
39    description,
40    imageUrl,
41    imageAlt = "Showcase image",
42    ctaText,
43    onCtaClick,
44    brandName,
45    services = [],
46    className,
47    enableTilt = true,
48    maxTilt = 8,
49    enableParallax = true,
50}: ShowcaseCardProps) {
51    const cardRef = React.useRef<HTMLDivElement>(null)
52    const [isHovered, setIsHovered] = React.useState(false)
53 
54    // Mouse position for tilt effect
55    const mouseX = useMotionValue(0)
56    const mouseY = useMotionValue(0)
57 
58    // Smooth spring animation for tilt
59    const springConfig = { damping: 25, stiffness: 150 }
60    const rotateX = useSpring(useTransform(mouseY, [-0.5, 0.5], [maxTilt, -maxTilt]), springConfig)
61    const rotateY = useSpring(useTransform(mouseX, [-0.5, 0.5], [-maxTilt, maxTilt]), springConfig)
62 
63    // Parallax transform for image
64    const parallaxX = useSpring(useTransform(mouseX, [-0.5, 0.5], [-15, 15]), springConfig)
65    const parallaxY = useSpring(useTransform(mouseY, [-0.5, 0.5], [-15, 15]), springConfig)
66 
67    // Glow effect position
68    const glowX = useSpring(useTransform(mouseX, [-0.5, 0.5], [0, 100]), springConfig)
69    const glowY = useSpring(useTransform(mouseY, [-0.5, 0.5], [0, 100]), springConfig)
70 
71    const handleMouseMove = React.useCallback(
72        (e: React.MouseEvent<HTMLDivElement>) => {
73            if (!cardRef.current || !enableTilt) return
74 
75            const rect = cardRef.current.getBoundingClientRect()
76            const x = (e.clientX - rect.left) / rect.width - 0.5
77// … truncated