change footer info

src/components/Footer/Footer.jsx

@@ -3,9 +3,12 @@ import { Box, Typography, TextField, Button, InputAdornment } from '@mui/materia
 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 WhatsAppIcon from '@mui/icons-material/WhatsApp';
+import LocalPhoneIcon from '@mui/icons-material/LocalPhone';
+
 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>
@@ -53,17 +56,25 @@ const Footer = () => {
           </nav>
         </Grid> */}
 
-        <Grid item size={{ xs: 12, sm: 6, md: 6, lg: 3, xl: 3 }} sx={{ position: "relative" }}>
+        <Grid item size={{ xs: 12, sm: 6, md: 6, lg: 4, xl: 4 }} 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>
+          <Typography variant="body2" sx={{ maxWidth: 350, mb: 2 }}><span style={{ fontWeight: "bold" }}>AMBER MODE (M) SDN BHD (1109469-M) <br /> </span> Lot G-77, Wangsa Walk Mall, <br />Wangsa Avenue, <br />No.9, Jalan Wangsa Perdana 1, <br />Bandar Wangsa Maju, <br />53300 Kuala Lumpur, <br />Malaysia</Typography>
+          <Typography
+            variant="body2"
+            sx={{ display: "flex", alignItems: "center" }}
+          >
+            <LocalPhoneIcon sx={{ mr: 1 }} />
+            +4 (509) 120 6705
+          </Typography>
+
+
         </Grid>
 
 
-        <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}}}>
+        <Grid item size={{ xs: 12, sm: 6, md: 6, lg: 3, xl: 3 }} sx={{ pl: { xs: 0, sm: 0, md: 0, lg: 5, xl: 5 } }}>
           <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
             Get Help
           </Typography>
@@ -105,11 +116,11 @@ const Footer = () => {
               value={email}
               type='email'
               onChange={(e) => { setEmail(e.target.value) }}
-              sx={{ 
-                p: 0, 
+              sx={{
+                p: 0,
                 mb: 2,
-                overflow:"hidden",
-                borderRadius:"4px",
+                overflow: "hidden",
+                borderRadius: "4px",
               }}
               InputProps={{
                 startAdornment: (