fix: fall back to Bunny Storage for cover images

components/Hero.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Play, Plus, Sparkles } from 'lucide-react';
 import { Course } from '../types';
 import { getCourses } from '../services/db';
+import { CourseCoverImage } from './CourseCoverImage';
 
 interface HeroProps {
   onPlay?: (course: Course) => void;
@@ -20,8 +21,8 @@ export const Hero: React.FC<HeroProps> = ({ onPlay }) => {
     <div className="relative w-full min-h-[75vh] lg:min-h-[82vh] max-h-[800px] h-auto overflow-hidden group flex flex-col justify-end pt-28 pb-12 sm:pb-16 px-6 md:px-12">
       {/* Background Image with Cinematic Gradient Overlay */}
       <div className="absolute inset-0 transition-transform duration-[20s] ease-in-out group-hover:scale-105">
-        <img 
-          src={featuredCourse.thumbnail}
+        <CourseCoverImage
+          source={featuredCourse.thumbnail}
           alt={featuredCourse.title}
           className="w-full h-full object-cover object-center"
           style={{