temp homepage assets

src/assets/svg/logo.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="194" height="45" viewBox="0 0 194 45">
-  <text id="AMBER" transform="translate(97 37)" fill="#fff" font-size="37" font-family="Lato-Bold, Lato" font-weight="700" letter-spacing="0.426em"><tspan x="-96.57" y="0">AMBER</tspan></text>
-</svg>
+  <text id="AMBER" transform="translate(97 37)" fill="#fff" font-size="37" font-family="Lato-Bold, Lato" font-weight="700" letter-spacing="0.426em"><tspan x="-96" y="0">AMBER</tspan></text>
+</svg>

src/assets/svg/logofooter.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="194" height="45" viewBox="0 0 194 45">
+  <text id="AMBER" transform="translate(97 37)" fill="#93abc7" font-size="37" font-family="Lato-Bold, Lato" font-weight="700" letter-spacing="0.426em"><tspan x="-96.57" y="0">AMBER</tspan></text>
+</svg>

src/components/Carousel/Carousel.jsx

@@ -2,13 +2,12 @@ import React from "react";
 import { Box, IconButton } from "@mui/material";
 import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
 import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+import mainImage from "../../assets/images/mainwallpaper.jpg"
 
 const Carousel = () => {
 
   const items = [
-    { img_src: "https://via.placeholder.com/600x300", alt_name: "Image 1" },
-    { img_src: "https://via.placeholder.com/600x300/ff0000", alt_name: "Image 2" },
-    { img_src: "https://via.placeholder.com/600x300/00ff00", alt_name: "Image 3" },
+    { img_src: mainImage, alt_name: "Image 1" }
   ]
 
   const [currentIndex, setCurrentIndex] = React.useState(0);

src/components/Footer/Footer.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, Typography, TextField, Button, InputAdornment } from '@mui/material';
-import SearchIcon from "@mui/icons-material/Search";
+import logoSrc from "../../assets/svg/logofooter.svg";
 import Grid from '@mui/material/Grid2';
 
 const Footer = () => {
@@ -10,27 +10,23 @@ const Footer = () => {
         backgroundColor: 'background.default',
         mb: 10,
         mt: 15,
-        px:{
-          xs:2,
-          md:12,
-          lg:20
+        px: {
+          xs: 2,
+          md: 12,
+          lg: 20
         }
       }}
     >
+      <img src={logoSrc} alt="Logo"
+        style={{
+          width: 150,
+          height: 50,
+        }}
+      />
 
       <Grid container spacing={2} justifyContent="space-evenly">
 
-        <Grid item size={{xs:12, sm:6, md:3}} sx={{ position: "relative" }}>
-
-          <Typography variant="h5" sx={{
-            color: 'primary.main', // Use primary color
-            letterSpacing: 15,
-            fontWeight: "bold",
-            position: "absolute",
-            top:-60
-          }}>
-            AMBER
-          </Typography>
+        <Grid item size={{ xs: 12, sm: 6, md: 3 }} sx={{ position: "relative" }}>
 
           <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
             Contact Info
@@ -39,7 +35,7 @@ const Footer = () => {
           <Typography variant="body2" sx={{ maxWidth: 250 }}><span style={{ fontWeight: "bold" }}>Address:</span> Lot G-77, Wangsa Walk Mall, Wangsa Avenue, No.9, Jalan Wangsa Perdana 1, Bandar Wangsa Maju, 53300 Kuala Lumpur, Malaysia</Typography>
         </Grid>
 
-        <Grid item size={{xs:12, sm:6, md:3}}>
+        <Grid item size={{ xs: 12, sm: 6, md: 3 }}>
           <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
             Get Help
           </Typography>
@@ -62,7 +58,7 @@ const Footer = () => {
           </nav>
         </Grid>
 
-        <Grid item size={{xs:12, sm:6, md:3}}>
+        <Grid item size={{ xs: 12, sm: 6, md: 3 }}>
           <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
             Popular Categories
           </Typography>
@@ -87,7 +83,7 @@ const Footer = () => {
 
 
 
-        <Grid item size={{xs:12, sm:6, md:3}}>
+        <Grid item size={{ xs: 12, sm: 6, md: 3 }}>
           <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
             Let’s stay in touch
           </Typography>

src/components/VideoAds/VideoAds.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Box } from '@mui/material';
 import PropTypes from 'prop-types';
+import videoAds from "../../assets/video/amberads.mp4"
 
 const VideoAds = ({ video_url, height, width }) => {
   return (
@@ -14,7 +15,7 @@ const VideoAds = ({ video_url, height, width }) => {
       }}
     >
       <video
-        src={video_url}
+        src={videoAds}
         autoPlay
         loop
         muted

src/pages/Home.jsx

@@ -45,7 +45,6 @@ const Home = () => {
         }}>
 
           {/* OFFSET PURPOSE */}
-          <Grid size={{xs:12, md:2}} sx={{display:"flex", alignItems:"center" }}></Grid>
 
           <Grid size={{xs:12, md:4}} sx={{mx:"auto", display:"flex", alignItems:"center", justifyContent:"center" }}>
             {/* Icon at the start */}
@@ -57,10 +56,6 @@ const Home = () => {
             <KeyboardArrowRightIcon sx={{ ml: 3, color: "#B7B7B7" }} />
           </Grid>
 
-          <Grid size={{xs:12, md:2}} sx={{display:"flex", alignItems:"center", py:{xs:2, md:0} }}>
-            <Link href="/product" sx={{ color:"#000", textDecoration: "underline", m:{xs:"auto auto auto auto", md:"0 0 0 auto"}}}>VIEW ALL</Link>
-          </Grid>
-
         </Grid>
 
         <ProductSelected />