new ui change

src/components/Footer/Footer.jsx

 import logoSrc from "../../assets/images/amberlogofooter.png";
 import Grid from '@mui/material/Grid2';
 import InstagramIcon from '@mui/icons-material/Instagram';
-import WhatsAppIcon from '@mui/icons-material/WhatsApp';import customerService from '../../services/CustomerService';
+import WhatsAppIcon from '@mui/icons-material/WhatsApp'; import customerService from '../../services/CustomerService';
 
 const TikTokIcon = ({ color = "#000000" }) => {
   return (
-    <svg  fill={color} width="1.3em" height="1.3em" viewBox="0 0 512 512" id="icons" xmlns="http://www.w3.org/2000/svg"><path d="M412.19,118.66a109.27,109.27,0,0,1-9.45-5.5,132.87,132.87,0,0,1-24.27-20.62c-18.1-20.71-24.86-41.72-27.35-56.43h.1C349.14,23.9,350,16,350.13,16H267.69V334.78c0,4.28,0,8.51-.18,12.69,0,.52-.05,1-.08,1.56,0,.23,0,.47-.05.71,0,.06,0,.12,0,.18a70,70,0,0,1-35.22,55.56,68.8,68.8,0,0,1-34.11,9c-38.41,0-69.54-31.32-69.54-70s31.13-70,69.54-70a68.9,68.9,0,0,1,21.41,3.39l.1-83.94a153.14,153.14,0,0,0-118,34.52,161.79,161.79,0,0,0-35.3,43.53c-3.48,6-16.61,30.11-18.2,69.24-1,22.21,5.67,45.22,8.85,54.73v.2c2,5.6,9.75,24.71,22.38,40.82A167.53,167.53,0,0,0,115,470.66v-.2l.2.2C155.11,497.78,199.36,496,199.36,496c7.66-.31,33.32,0,62.46-13.81,32.32-15.31,50.72-38.12,50.72-38.12a158.46,158.46,0,0,0,27.64-45.93c7.46-19.61,9.95-43.13,9.95-52.53V176.49c1,.6,14.32,9.41,14.32,9.41s19.19,12.3,49.13,20.31c21.48,5.7,50.42,6.9,50.42,6.9V131.27C453.86,132.37,433.27,129.17,412.19,118.66Z"/></svg>
+    <svg fill={color} width="1.3em" height="1.3em" viewBox="0 0 512 512" id="icons" xmlns="http://www.w3.org/2000/svg"><path d="M412.19,118.66a109.27,109.27,0,0,1-9.45-5.5,132.87,132.87,0,0,1-24.27-20.62c-18.1-20.71-24.86-41.72-27.35-56.43h.1C349.14,23.9,350,16,350.13,16H267.69V334.78c0,4.28,0,8.51-.18,12.69,0,.52-.05,1-.08,1.56,0,.23,0,.47-.05.71,0,.06,0,.12,0,.18a70,70,0,0,1-35.22,55.56,68.8,68.8,0,0,1-34.11,9c-38.41,0-69.54-31.32-69.54-70s31.13-70,69.54-70a68.9,68.9,0,0,1,21.41,3.39l.1-83.94a153.14,153.14,0,0,0-118,34.52,161.79,161.79,0,0,0-35.3,43.53c-3.48,6-16.61,30.11-18.2,69.24-1,22.21,5.67,45.22,8.85,54.73v.2c2,5.6,9.75,24.71,22.38,40.82A167.53,167.53,0,0,0,115,470.66v-.2l.2.2C155.11,497.78,199.36,496,199.36,496c7.66-.31,33.32,0,62.46-13.81,32.32-15.31,50.72-38.12,50.72-38.12a158.46,158.46,0,0,0,27.64-45.93c7.46-19.61,9.95-43.13,9.95-52.53V176.49c1,.6,14.32,9.41,14.32,9.41s19.19,12.3,49.13,20.31c21.48,5.7,50.42,6.9,50.42,6.9V131.27C453.86,132.37,433.27,129.17,412.19,118.66Z" /></svg>
   );
 };
 
         }}
       />
 
-      <Grid container spacing={2} justifyContent="space-evenly">
-
+      <Grid container spacing={2} justifyContent="space-between">
+        {/* 
         <Grid item size={{ xs: 12, sm: 6, md: 6, lg: 3 }}>
           <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
             Company
               <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Cotact Us</a>
             </Typography>
           </nav>
+        </Grid> */}
+
+        <Grid item size={{ xs: 12, sm: 6, md: 6, lg: 3, xl: 3 }} sx={{ position: "relative" }}>
+
+          <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
+            Contact Info
+          </Typography>
+          <Typography variant="body2" sx={{ mb: 2 }}><span style={{ fontWeight: "bold" }}>Phone:</span> +4 (509) 120 6705</Typography>
+          <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: 6, lg: 3 }}>
+        <Grid item size={{ xs: 12, sm: 6, md: 6, lg: 4, xl: 4 }} sx={{pl:{xs:0, sm:0, md:0, lg:5, xl:5}}}>
           <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
             Get Help
           </Typography>
           </nav>
         </Grid>
 
-        <Grid item size={{ xs: 12, sm: 6, md: 6, lg: 3 }} sx={{ position: "relative" }}>
-
-          <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
-            Contact Info
-          </Typography>
-          <Typography variant="body2" sx={{ mb: 2 }}><span style={{ fontWeight: "bold" }}>Phone:</span> +4 (509) 120 6705</Typography>
-          <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: 6, lg: 3 }}>
+        <Grid item size={{ xs: 12, sm: 6, md: 6, lg: 4, xl: 4 }}>
           <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
             Let’s stay in touch
           </Typography>
               }}
             />
 
-            <Typography variant="body2" >Keep up to date with our latest  news and <br /> special offers.</Typography>
+            <Typography variant="body2" >Keep up to date with our latest  news and special offers.</Typography>
 
-            <Box sx={{display:"flex", gap:1, justifyContent:"end", cursor:"pointer"}}>
-              <a 
-                href="whatsapp" 
+            <Box sx={{ display: "flex", gap: 1, justifyContent: "end", cursor: "pointer" }}>
+              <a
+                href="whatsapp"
                 style={{
-                  color:"#95AAC5"
+                  color: "#95AAC5"
                 }}><WhatsAppIcon />
               </a>
-              <a 
-                href="instagram" 
+              <a
+                href="instagram"
                 style={{
-                  color:"#95AAC5"
+                  color: "#95AAC5"
                 }}><InstagramIcon />
               </a>
-              <a 
-                href="tiktok" 
+              <a
+                href="tiktok"
                 style={{
-                  color:"#95AAC5"
+                  color: "#95AAC5"
                 }}><TikTokIcon color={"#95AAC5"} />
               </a>
-              
+
             </Box>
-            
+
           </Box>
         </Grid>
       </Grid>

src/components/NewsLetter/NewsLetter.jsx

             onChange={(e) => { setEmail(e.target.value) }}
             sx={{
               backgroundColor: "white",
+              overflow:"hidden",
+              borderRadius:"4px",
               my: 4,
               '& .MuiInputLabel-root': {
                 fontSize: {

src/components/PageTitle/PageTitle.jsx

       />
       
       {/* Title */}
-      <Typography
+      {/* <Typography
         variant="h3"
         className="main-title"
         sx={{
         }}
       >
         {title?.toUpperCase() || " "}
-      </Typography>
+      </Typography> */}
     </Box>
   );
 };

src/components/ProductList/ProductList.jsx

               sx={{
                 fontWeight: "100",
                 fontSize: {
-                  xs: "0.875rem",
-                  sm: "0.875rem",
-                  md: "1.1rem",
+                  xs: "0.75rem",
+                  sm: "0.75rem",
+                  md: "0.75rem",
                 },
               }}
             >
             <Typography
               variant="body2"
               sx={{
-                fontWeight: "400",
+                fontWeight: "500",
                 fontSize: {
                   xs: "0.875rem",
                   sm: "0.875rem",
-                  md: "1.1rem",
+                  md: "0.875rem",
                 },
               }}
             >
                 fontSize: {
                   xs: "0.875rem",
                   sm: "0.875rem",
-                  md: "1.1rem",
+                  md: "0.875rem",
                 },
               }}
             >

src/components/ProductType/ProductType.jsx

           color: '#fff', // Text and button color for visibility
         }}
       >
-        <Typography variant="h5" gutterBottom sx={{ fontWeight: "600", letterSpacing: 7 }}>
+        <Typography variant="h5" gutterBottom sx={{ fontWeight: "600", letterSpacing: 7, marginRight:"-0.4em" }}>
           {title?.toUpperCase()}
         </Typography>
         <Button