fix(layout): resolve algorithmic testimonial avatars on careers page

Author: nishtha-agarwal-211

src/pages/careers/index.tsx

@@ -190,6 +190,29 @@ const testimonials = [
   },
 ];
 
+function TestimonialAvatar({ avatar, name }: { avatar?: string; name: string }) {
+  const [hasError, setHasError] = useState(false);
+
+  useEffect(() => {
+    setHasError(false);
+  }, [avatar]);
+
+  return (
+    <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-blue-400 to-purple-500 shadow-inner overflow-hidden relative">
+      {avatar && !hasError ? (
+        <img
+          src={avatar}
+          alt={name}
+          className="h-full w-full object-cover rounded-full"
+          onError={() => setHasError(true)}
+        />
+      ) : (
+        <User className="h-10 w-10 text-white" />
+      )}
+    </div>
+  );
+}
+
 function CareersContent() {
   const { colorMode, isDark, mounted } = useSafeColorMode();
   const [activeTestimonial, setActiveTestimonial] = useState(0);
@@ -593,9 +616,10 @@ function CareersContent() {
                 variants={fadeIn}
               >
                 <div className="testimonial-content relative z-10 text-center">
-                  <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-blue-400 to-purple-500 shadow-inner">
-                    <User className="h-10 w-10 text-white" />
-                  </div>
+                  <TestimonialAvatar
+                    avatar={testimonials[activeTestimonial].avatar}
+                    name={testimonials[activeTestimonial].name}
+                  />
                   <blockquote className="mb-6 text-lg italic md:text-xl">
                     "{testimonials[activeTestimonial].content}"
                   </blockquote>
@@ -639,9 +663,10 @@ function CareersContent() {
             ) : (
               <div className="testimonial-carousel testimonial-carousel--light rounded-xl p-8 shadow-lg">
                 <div className="testimonial-content relative z-10 text-center">
-                  <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-blue-400 to-purple-500 shadow-inner">
-                    <User className="h-10 w-10 text-white" />
-                  </div>
+                  <TestimonialAvatar
+                    avatar={testimonials[activeTestimonial].avatar}
+                    name={testimonials[activeTestimonial].name}
+                  />
                   <blockquote className="mb-6 text-lg italic md:text-xl">
                     "{testimonials[activeTestimonial].content}"
                   </blockquote>