change image on home page

src/components/ProductType/ProductType.jsx

@@ -8,7 +8,7 @@ const ProductType = ({ title, img_url }) => {
         position: 'relative',
         width: '100%',
         height: 0,
-        paddingTop: '600px', // This sets the height based on top padding
+        paddingTop: '700px', // This sets the height based on top padding
         backgroundImage: `url(${img_url})`,
         overflow: 'hidden',
         backgroundSize: 'cover',
@@ -22,7 +22,7 @@ const ProductType = ({ title, img_url }) => {
           left: 0,
           width: '100%',
           height: '100%',
-          backgroundColor: 'rgba(0, 0, 0, 0.5)', // Filter overlay
+          backgroundColor: 'rgba(0, 0, 0, 0.3)', // Filter overlay
           display: 'flex',
           flexDirection: 'column',
           justifyContent: 'center',

src/index.js

@@ -18,6 +18,8 @@ import '@fontsource/roboto/700.css';
 
 // JS MODULE STUFF
 
+import Maintainance from './pages/Maintainance';
+
 /**
  * NOTE: Dear future programmer of this project, before you judge me on how fucked up this codebase is, I already take everything into consideration and 
  * this code is really the most spegatthi that you'll ever seen, I only have 2 weeks to figure everything out
@@ -31,6 +33,7 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <Provider store={store}>
     <App />
+    {/* <Maintainance/> */}
   </Provider>
 );
 

src/pages/Home.jsx

@@ -10,9 +10,9 @@ import VideoAds from '../components/VideoAds'
 import ProductType from '../components/ProductType';
 import NewsLetter from '../components/NewsLetter';
 import ProductService from "../services/ProductService"
-import AmberHomeWallpaper from "../assets/images/titleBg.jpg";
-import AmberBeautyWallpaper from "../assets/images/amberBeautyWallpaper.jpg";
-import AmberClothing from "../assets/images/amberClothing.jpg"
+import AmberHomeWallpaper from "../assets/images/amberHomeWallpaper.webp";
+import AmberBeautyWallpaper from "../assets/images/amberBeautyWallpaper.webp";
+import AmberClothing from "../assets/images/amberClothing.webp"
 
 const Home = () => {
 

src/pages/Maintainance.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Box } from '@mui/material'
+
+const Maintainance = () => {
+    return (
+        <Box
+            sx={{
+                height:"100vh",
+                width:"100%",
+                backgroundColor:"red"
+            }}
+        >
+        </Box>
+    )
+}
+
+export default Maintainance