Bob AI: Add multiple fancy animations to testimonial cards: enhance

src/components/sections/testimonial/TestimonialCardSixteen.tsx

@@ -87,7 +87,33 @@ const TestimonialCard = memo(({
     companyClassName = "",
 }: TestimonialCardProps) => {
     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"}}>
+            <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
                         imageSrc={testimonial.imageSrc}
                         videoSrc={testimonial.videoSrc}
@@ -97,6 +123,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 +151,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>
     );
 });