Refactor code structure for improved readability and maintainability

src/components/CarouselContainer/CarouselContainer.jsx

 import mainImage8 from "../../assets/images/MAINHEADER-08.webp";
 import mainImage10 from "../../assets/images/MAINHEADER-10.png";
 import mainImage11 from "../../assets/images/MAINHEADER-11.webp";
+import mainImage12 from "../../assets/images/MAINHEADER-12.webp";
 
 import mainImageMobile from "../../assets/images/mainwallpaper-mobile.jpg";
 import { Carousel } from 'react-responsive-carousel';
 const CarouselContainer = () => {
 
   const items = [
+    { img_src: mainImage12, alt_name: "Image 12" },
     { img_src: mainImage11, alt_name: "Image 11" },
     { img_src: mainImage10, alt_name: "Image 10" },
     { img_src: mainImage8, alt_name: "Image 8" },
     { img_src: mainImage2, alt_name: "Image 2" },
     { img_src: mainImage1, alt_name: "Image 1" },
 
+    { img_src: mainImage12, alt_name: "Image 12" },
     { img_src: mainImage11, alt_name: "Image 11" },
     { img_src: mainImage10, alt_name: "Image 10" },
     { img_src: mainImage8, alt_name: "Image 8" },

src/pages/Home.jsx

 import ProductService from "../services/ProductService"
 import AmberHomeWallpaper from "../assets/images/amberHomeWallpaper.webp";
 import AmberBeautyWallpaper from "../assets/images/amberBeautyWallpaper.webp";
-import AmberClothing from "../assets/images/MAINHEADER-11.webp"
+import AmberClothing from "../assets/images/MAINHEADER-12.webp"
 
 const Home = () => {