feat: add resilient cover previews and zoom

components/CourseCard.tsx

@@ -44,6 +44,7 @@ export const CourseCard: React.FC<CourseCardProps> = ({
           draggable={false}
           onDragStart={(e) => e.preventDefault()}
           className="h-full w-full object-cover transition-opacity duration-300 opacity-90 group-hover:opacity-100 rounded-[8px] select-none pointer-events-none"
+          style={{ transform: `scale(${course.coverImageZoom || 1})` }}
         />
 
         {/* Badges on Thumbnail */}

components/Hero.tsx

@@ -24,6 +24,7 @@ export const Hero: React.FC<HeroProps> = ({ onPlay }) => {
           src={featuredCourse.thumbnail}
           alt={featuredCourse.title}
           className="w-full h-full object-cover object-center"
+          style={{ transform: `scale(${featuredCourse.coverImageZoom || 1})` }}
         />
         {/* Gradients for text readability and seamless transition */}
         <div className="absolute inset-0 bg-gradient-to-t from-black via-black/60 to-black/75" />

components/SearchModal.tsx

@@ -136,6 +136,7 @@ export const SearchModal: React.FC<SearchModalProps> = ({ isOpen, onClose, onPla
                               src={course.thumbnail} 
                               alt={course.title} 
                               className="w-full h-full object-cover opacity-80 group-hover:opacity-100 group-hover:scale-105 transition-all duration-300 rounded-[8px]" 
+                              style={{ transform: `scale(${course.coverImageZoom || 1})` }}
                             />
                             <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/40">
                               <PlayCircle className="w-10 h-10 text-orange-500" />