ok

src/components/Hero.jsx

@@ -1,28 +1,29 @@
 
-
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
+import Image from 'next/image'
 
 export function Hero() {
   return (
     <section className="relative w-full lg:h-screen bg-transparent  h-[550px] lg:mt-0 mt-0">
       {/* Background Video */}
-      <video
+     <video
         autoPlay
         loop
         muted
         playsInline
         className="absolute top-0 left-0 w-full lg:h-full h-[550px] object-cover z-0 bg-[#FEFFF6] opacity-25"
+        src="/videos/hero4.mp4"
+        type="video/mp4"
       >
-        <source src="/videos/hero4.mp4" type="video/mp4" />
         Your browser does not support the video tag.
       </video>
-      
+
       {/* Welcome Content Overlay */}
       <div className="bg-transparent py-6 mt-0 absolute top-16 sm:top-32 left-0 right-0 z-10">
         <div className="mx-auto max-w-7xl px-6 sm:px-6 lg:px-6">
           <div className="flex items-start justify-start mb-4">
-            <img src="/images/veda_logo_dark.svg" alt="VEDA" width={200} height={60} className="h-8 sm:h-12 w-auto" />
+            <Image src="/images/veda_logo_dark.svg" alt="VEDA" width={200} height={60} className="h-8 sm:h-12 w-auto" />  
           </div>
           <div className="mx-auto max-w-5xl lg:mx-0 mt-4 sm:mt-6">
             <h2 className="text-xl/5 font-medium tracking-[-0.05em] leading-[1.3] lg:leading-[1.4] text-darkgr-800 lg:text-3xl">