Bob AI: Increase the vertical lift/elevation of testimonial cards on

src/components/sections/testimonial/TestimonialCardSixteen.tsx

@@ -88,39 +88,57 @@ const TestimonialCard = memo(({
 }: TestimonialCardProps) => {
     return (
         <div className={cls("relative h-full aspect-[8/10] rounded-theme-capped overflow-hidden group", cardClassName)}>
-            <MediaContent
-                imageSrc={testimonial.imageSrc}
-                videoSrc={testimonial.videoSrc}
-                imageAlt={testimonial.imageAlt || testimonial.name}
-                videoAriaLabel={testimonial.videoAriaLabel || testimonial.name}
-                imageClassName={cls("relative z-1 w-full h-full object-cover!", imageClassName)}
-            />
+            <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}
+                        imageAlt={testimonial.imageAlt || testimonial.name}
+                        videoAriaLabel={testimonial.videoAriaLabel || testimonial.name}
+                        imageClassName={cls("relative z-1 w-full h-full object-cover!", imageClassName)}
+                    />
 
-            <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
-                            key={index}
-                            className={cls(
-                                "h-5 w-auto text-accent",
-                                index < testimonial.rating ? "fill-accent" : "fill-transparent"
-                            )}
-                            strokeWidth={1.5}
-                        />
-                    ))}
+                    <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
+                                    key={index}
+                                    className={cls(
+                                        "h-5 w-auto text-accent",
+                                        index < testimonial.rating ? "fill-accent" : "fill-transparent"
+                                    )}
+                                    strokeWidth={1.5}
+                                />
+                            ))}
+                        </div>
+
+                        <h3 className={cls("relative z-1 text-2xl font-medium text-foreground leading-[1.1] mt-1", nameClassName)}>
+                            {testimonial.name}
+                        </h3>
+
+                        <div className="relative z-1 flex flex-col gap-1">
+                            <p className={cls("text-base text-foreground leading-[1.1]", roleClassName)}>
+                                {testimonial.role}
+                            </p>
+                            <p className={cls("text-base text-foreground leading-[1.1]", companyClassName)}>
+                                {testimonial.company}
+                            </p>
+                        </div>
+                    </div>
                 </div>
 
-                <h3 className={cls("relative z-1 text-2xl font-medium text-foreground leading-[1.1] mt-1", nameClassName)}>
-                    {testimonial.name}
-                </h3>
-
-                <div className="relative z-1 flex flex-col gap-1">
-                    <p className={cls("text-base text-foreground leading-[1.1]", roleClassName)}>
-                        {testimonial.role}
-                    </p>
-                    <p className={cls("text-base text-foreground leading-[1.1]", companyClassName)}>
-                        {testimonial.company}
-                    </p>
+                {/* 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>