Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 3206659f83 | |||
| 7722a14781 |
@@ -87,8 +87,31 @@ const TestimonialCard = memo(({
|
|||||||
companyClassName = "",
|
companyClassName = "",
|
||||||
}: TestimonialCardProps) => {
|
}: TestimonialCardProps) => {
|
||||||
return (
|
return (
|
||||||
<div className={cls("relative h-full aspect-[8/10] rounded-theme-capped overflow-hidden group", cardClassName)}>
|
<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"}}>
|
||||||
<div className="relative w-full h-full transition-all duration-500 ease-out group-hover:shadow-2xl group-hover:-translate-y-4" style={{}}>
|
<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 */}
|
{/* Front of card */}
|
||||||
<div className="absolute w-full h-full">
|
<div className="absolute w-full h-full">
|
||||||
<MediaContent
|
<MediaContent
|
||||||
|
|||||||
Reference in New Issue
Block a user