3 Commits

View File

@@ -88,6 +88,9 @@ const TestimonialCard = memo(({
}: 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={{}}>
{/* Front of card */}
<div className="absolute w-full h-full">
<MediaContent
imageSrc={testimonial.imageSrc}
videoSrc={testimonial.videoSrc}
@@ -97,6 +100,7 @@ const TestimonialCard = memo(({
/>
<div className={cls("!absolute z-1 bottom-6 left-6 right-6 card backdrop-blur-xs p-6 flex flex-col gap-3 rounded-theme-capped", overlayClassName)}>
=======
<div className={cls("relative z-1 flex gap-1", ratingClassName)}>
{Array.from({ length: 5 }).map((_, index) => (
<Star
@@ -124,6 +128,20 @@ const TestimonialCard = memo(({
</div>
</div>
</div>
{/* Back of card */}
<div style={{ backfaceVisibility: "hidden", transform: "rotateY(180deg)" }} className="absolute w-full h-full bg-gradient-to-br from-accent/10 to-accent/5 backdrop-blur-xs rounded-theme-capped p-6 flex flex-col justify-center items-center gap-4">
<div className="text-center">
<p className="text-sm text-foreground/80 mb-4">
{testimonial.testimonial || "Exceptional results and outstanding service delivery."}
</p>
<button className="px-6 py-2 bg-accent text-accent-foreground rounded-theme-capped font-medium text-sm hover:bg-accent/90 transition-colors duration-300">
Learn More
</button>
</div>
</div>
</div>
</div>
);
});