Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 3206659f83 | |||
| 7722a14781 |
@@ -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-2xl group-hover:-translate-y-4" 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
|
||||
|
||||
Reference in New Issue
Block a user