Vercel Build

app/medya/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import Image from 'next/image';
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
 
@@ -156,9 +157,11 @@ export default function MediaGallery() {
                 >
                   {/* Thumbnail */}
                   <div className="relative h-56 overflow-hidden">
-                    <img
+                    <Image
                       src={item.thumbnail}
                       alt={item.title}
+                      width={400}
+                      height={224}
                       className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                     />
                     {/* Video Badge */}
@@ -231,9 +234,11 @@ export default function MediaGallery() {
                   </div>
                 ) : (
                   <div className="mb-6 rounded-lg overflow-hidden">
-                    <img
-                      src={selectedMediaItem?.thumbnail}
-                      alt={selectedMediaItem?.title}
+                    <Image
+                      src={selectedMediaItem?.thumbnail || ''}
+                      alt={selectedMediaItem?.title || ''}
+                      width={800}
+                      height={600}
                       className="w-full h-auto"
                     />
                   </div>