feat: apply glassmorphic effect to testimonials

src/components/sections/hero/HeroOverlayTestimonial.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { Star } from "lucide-react";
-import { motion, AnimatePresence } from "motion/react";
+
 import { cls } from "@/lib/utils";
 import Button from "@/components/ui/Button";
 import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
@@ -92,14 +92,14 @@ const HeroOverlayTestimonial = ({
         </div>
       </div>
 
-      <AnimatePresence mode="wait">
-        <motion.div
+      
+        <div
           key={currentIndex}
           initial={{ opacity: 0, y: 10 }}
           animate={{ opacity: 1, y: 0 }}
           exit={{ opacity: 0, y: -10 }}
           transition={{ duration: 0.3 }}
-          className="absolute z-10 bottom-3 left-3 right-3 p-3 xl:p-4 2xl:p-5 card rounded flex flex-col gap-3 xl:gap-4 2xl:gap-5 md:left-auto md:bottom-8 md:right-8 md:max-w-25/100 2xl:max-w-2/10"
+          className="absolute z-10 bottom-3 left-3 right-3 p-3 xl:p-4 2xl:p-5 card rounded flex flex-col gap-3 xl:gap-4 2xl:gap-5 md:left-auto md:bottom-8 md:right-8 md:max-w-25/100 2xl:max-w-2/10 bg-white/10 backdrop-blur-md border border-white/20"
         >
           <div className="flex gap-1">
             {Array.from({ length: 5 }).map((_, index) => (
@@ -124,8 +124,8 @@ const HeroOverlayTestimonial = ({
               <span className="text-sm text-foreground/60">{testimonial.handle}</span>
             </div>
           </div>
-        </motion.div>
-      </AnimatePresence>
+        </div>
+      
     </section>
   );
 };