Add video thumbnails extracted at 5-second mark, delete Junk folder

client/src/components/VideoGallery.tsx

@@ -14,31 +14,37 @@ const videoData: VideoItem[] = [
     id: 1,
     videoUrl: '/videos/community-01.mp4',
     title: 'Community Event Video 1',
+    thumbnail: '/videos/community-01-thumb.jpg',
   },
   {
     id: 2,
     videoUrl: '/videos/community-02.mp4',
     title: 'Community Event Video 2',
+    thumbnail: '/videos/community-02-thumb.jpg',
   },
   {
     id: 3,
     videoUrl: '/videos/community-03.mp4',
     title: 'Community Event Video 3',
+    thumbnail: '/videos/community-03-thumb.jpg',
   },
   {
     id: 4,
     videoUrl: '/videos/community-04.mp4',
     title: 'Community Event Video 4',
+    thumbnail: '/videos/community-04-thumb.jpg',
   },
   {
     id: 5,
     videoUrl: '/videos/community-05.mp4',
     title: 'Community Event Video 5',
+    thumbnail: '/videos/community-05-thumb.jpg',
   },
   {
     id: 6,
     videoUrl: '/videos/board-intro-archive.mp4',
     title: 'Board Introduction Archive',
+    thumbnail: '/videos/board-intro-archive-thumb.jpg',
   },
 ];
 
@@ -141,10 +147,10 @@ const VideoGallery: React.FC = () => {
             >
               <div className="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
                 <div className="aspect-video bg-gray-200 flex items-center justify-center relative">
-                  <video
+                  <img
-                    src={item.videoUrl}
+                    src={item.thumbnail}
+                    alt={item.title}
                     className="w-full h-full object-cover"
-                    preload="metadata"
                   />
                   <div className="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-80">
                     <FaPlay size={48} color="white" />