ok

next.config.js

@@ -20,15 +20,18 @@ const nextConfig = {
         },
     },
     webpack(config, options) {
-      // Add file-loader for .mp4 files
+      // Add url-loader for video files
       config.module.rules.push({
         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)$/,
         use: [
           {
-            loader: 'file-loader',
+            loader: 'url-loader',
             options: {
+              limit: 8192,
+              fallback: 'file-loader',
+              publicPath: '/_next/static/media/',
+              outputPath: 'static/media/',
               esModule: false,
-              name: '[path][name].[ext]',
             },
           },
         ],

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">

src/images/veda_logo_dark.svg

@@ -0,0 +1,18 @@
+<svg width="1803" height="488" viewBox="0 0 1803 488" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_98_56)">
+<circle cx="200" cy="144" r="100" fill="#245527" fill-opacity="0.7"/>
+<circle cx="100" cy="244" r="100" fill="#245527" fill-opacity="0.7"/>
+<circle cx="300" cy="244" r="100" fill="#245527" fill-opacity="0.7"/>
+<circle cx="270.71" cy="314.71" r="100" fill="#245527" fill-opacity="0.7"/>
+<circle cx="129.29" cy="314.71" r="100" fill="#245527" fill-opacity="0.7"/>
+<circle cx="200" cy="344" r="100" fill="#245527" fill-opacity="0.7"/>
+<circle cx="129.29" cy="173.29" r="100" fill="#245527" fill-opacity="0.7"/>
+<circle cx="270.71" cy="173.29" r="100" fill="#245527" fill-opacity="0.7"/>
+<path d="M620.4 387L498 107H554.4L663.6 360.2H631.2L741.6 107H793.6L671.6 387H620.4ZM911.538 223.4H1050.74V266.2H911.538V223.4ZM915.538 343.4H1073.54V387H863.538V107H1067.94V150.6H915.538V343.4ZM1171.51 387V107H1293.91C1324.31 107 1350.97 112.867 1373.91 124.6C1396.84 136.333 1414.71 152.6 1427.51 173.4C1440.31 194.2 1446.71 218.733 1446.71 247C1446.71 275 1440.31 299.533 1427.51 320.6C1414.71 341.4 1396.84 357.667 1373.91 369.4C1350.97 381.133 1324.31 387 1293.91 387H1171.51ZM1223.51 343H1291.51C1312.57 343 1330.71 339 1345.91 331C1361.37 323 1373.24 311.8 1381.51 297.4C1390.04 283 1394.31 266.2 1394.31 247C1394.31 227.533 1390.04 210.733 1381.51 196.6C1373.24 182.2 1361.37 171 1345.91 163C1330.71 155 1312.57 151 1291.51 151H1223.51V343ZM1498.47 387L1624.47 107H1675.67L1802.07 387H1747.67L1639.27 134.6H1660.07L1552.07 387H1498.47ZM1556.47 322.2L1570.47 281.4H1721.67L1735.67 322.2H1556.47Z" fill="#245527"/>
+</g>
+<defs>
+<clipPath id="clip0_98_56">
+<rect width="1803" height="488" fill="white"/>
+</clipPath>
+</defs>
+</svg>