Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 8323a15bbe | |||
| 8305b65f81 |
@@ -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-2xl group-hover:-translate-y-4" 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>
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user