new amber Raya 2025 content

src/components/CarouselContainer/CarouselContainer.jsx

@@ -6,16 +6,20 @@ import mainImage1 from "../../assets/images/MAINHEADER-01.webp";
 import mainImage2 from "../../assets/images/MAINHEADER-02.webp";
 import mainImage3 from "../../assets/images/MAINHEADER-03.webp";
 import mainImage4 from "../../assets/images/MAINHEADER-04.webp";
+import mainImage5 from "../../assets/images/MAINHEADER-05.webp";
 import mainImageMobile from "../../assets/images/mainwallpaper-mobile.jpg";
 import { Carousel } from 'react-responsive-carousel';
 
 const CarouselContainer = () => {
 
   const items = [
+    { img_src: mainImage5, alt_name: "Image 5" },
     { img_src: mainImage3, alt_name: "Image 3" },
     { img_src: mainImage4, alt_name: "Image 4" },
     { img_src: mainImage2, alt_name: "Image 2" },
     { img_src: mainImage1, alt_name: "Image 1" },
+
+    { img_src: mainImage5, alt_name: "Image 5" },
     { img_src: mainImage3, alt_name: "Image 3" },
     { img_src: mainImage4, alt_name: "Image 4" },
     { img_src: mainImage2, alt_name: "Image 2" },
@@ -35,6 +39,7 @@ const CarouselContainer = () => {
             width: "100%",
             height: "100%",
             zIndex: 0,
+            filter:"brightness(0.9)"
           }}
         />
       ))}

src/components/VideoAds/VideoAds.jsx

@@ -1,7 +1,7 @@
 import { useRef, useState, useEffect  } from 'react';
 import { Box, Button } from '@mui/material';
 import PropTypes from 'prop-types';
-import videoAds from "../../assets/video/amberads.mp4";
+import videoAds from "../../assets/video/amberadsraya.mp4";
 
 const VideoAds = ({ video_url, height, width }) => {
   const videoRef = useRef(null);
@@ -51,7 +51,8 @@ const VideoAds = ({ video_url, height, width }) => {
           top: 0,
           left: 0,
           width: '100%',
-          height: 'auto',
+          height: '100%', // Ensures the video fills the container
+          objectFit: 'cover', // Maintains aspect ratio and covers the area
         }}
       />
       <Button