fix

src/components/home/TopProfessionals.tsx

@@ -30,6 +30,7 @@ function ProfessionalCard({
 }: ProfessionalCardProps) {
   const starCount = rating ? Math.round(rating) : 0;
   const [imgLoaded, setImgLoaded] = useState(false);
+  const [imgError, setImgError] = useState(false);
   const placeholder = '/assets/icons/user-placeholder-icon.svg';
   const isPlaceholder = imageUrl === placeholder;
   const INITIAL_TAG_COUNT = 4;
@@ -38,17 +39,20 @@ function ProfessionalCard({
       <div className="bg-white rounded-[15px] overflow-hidden shadow-[0px_4px_20px_rgba(0,0,0,0.08)] h-full flex flex-col">
         {/* Image */}
         <div className="relative h-[226px] w-full overflow-hidden bg-gray-100">
-          {!imgLoaded && !isPlaceholder && (
-            <div className="absolute inset-0 shimmer-loading" />
+          {/* Initials base layer */}
+          <div className="absolute inset-0 bg-[#c4d9d4] flex items-center justify-center">
+            <span className="font-bold text-[#00293d] text-[72px]">{name?.[0]?.toUpperCase() || '?'}</span>
+          </div>
+          {!isPlaceholder && !imgError && (
+            <Image
+              src={imageUrl}
+              alt={name}
+              fill
+              className={`object-cover transition-opacity duration-300 ${imgLoaded ? 'opacity-100' : 'opacity-0'}`}
+              onLoad={() => setImgLoaded(true)}
+              onError={() => setImgError(true)}
+            />
           )}
-          <Image
-            src={imageUrl}
-            alt={name}
-            fill
-            className={`object-cover transition-opacity duration-300 ${isPlaceholder || imgLoaded ? 'opacity-100' : 'opacity-0'}`}
-            onLoad={() => setImgLoaded(true)}
-            onError={() => setImgLoaded(true)}
-          />
         </div>
 
         {/* Content */}