1 Commits

View File

@@ -87,8 +87,31 @@ const TestimonialCard = memo(({
companyClassName = "",
}: TestimonialCardProps) => {
return (
<div className={cls("relative h-full aspect-[8/10] rounded-theme-capped overflow-hidden group", cardClassName)}>
<div className="relative w-full h-full transition-all duration-500 ease-out group-hover:shadow-xl group-hover:-translate-y-8" style={{}}>
<div className={cls("relative h-full aspect-[8/10] rounded-theme-capped overflow-hidden group", cardClassName)} style={{animation: "cardEntrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards"}}>
<style>{`
@keyframes cardEntrance {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes glowPulse {
0%, 100% {
box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.3), 0 20px 40px rgba(0, 0, 0, 0.15);
}
50% {
box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.5), 0 25px 50px rgba(0, 0, 0, 0.2);
}
}
.group:hover .testimonial-inner {
animation: glowPulse 2s ease-in-out infinite;
}
`}</style>
<div className="testimonial-inner relative w-full h-full transition-all duration-500 ease-out group-hover:shadow-2xl group-hover:-translate-y-12 group-hover:scale-105 group-hover:[transform:perspective(1000px)_rotateX(2deg)_rotateY(-3deg)_translateY(-48px)_scale(1.05)]" style={{}}>
{/* Front of card */}
<div className="absolute w-full h-full">
<MediaContent