diff --git a/src/components/sections/testimonial/TestimonialCardSixteen.tsx b/src/components/sections/testimonial/TestimonialCardSixteen.tsx index 65c65bc..f4a1a89 100644 --- a/src/components/sections/testimonial/TestimonialCardSixteen.tsx +++ b/src/components/sections/testimonial/TestimonialCardSixteen.tsx @@ -1,6 +1,8 @@ "use client"; -import { memo } from "react"; +"use client" + +import { memo, useState, useRef, useEffect } from "react"; import CardStack from "@/components/cardStack/CardStack"; import MediaContent from "@/components/shared/MediaContent"; import { cls } from "@/lib/utils"; @@ -86,8 +88,34 @@ const TestimonialCard = memo(({ roleClassName = "", companyClassName = "", }: TestimonialCardProps) => { + const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); + const [scrollY, setScrollY] = useState(0); + const cardRef = useRef(null); + + useEffect(() => { + const handleScroll = () => setScrollY(window.scrollY); + window.addEventListener("scroll", handleScroll); + return () => window.removeEventListener("scroll", handleScroll); + }, []); + + const handleMouseMove = (e: React.MouseEvent) => { + if (!cardRef.current) return; + const rect = cardRef.current.getBoundingClientRect(); + setMousePosition({ + x: e.clientX - rect.left, + y: e.clientY - rect.top, + }); + }; + + const parallaxOffset = scrollY * 0.05; + return ( -
+
-
+
+ {/* Rotating border effect */} +
+ {/* Sparkle particles */} + {[...Array(6)].map((_, i) => ( +
+ ))} {/* Front of card */}