update social media link

src/components/Footer/Footer.jsx

@@ -3,7 +3,8 @@ 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 customerService from '../../services/CustomerService';
+import WhatsAppIcon from '@mui/icons-material/WhatsApp'; 
+import customerService from '../../services/CustomerService';
 
 const TikTokIcon = ({ color = "#000000" }) => {
   return (
@@ -100,7 +101,7 @@ const Footer = () => {
           >
             <TextField
               variant="outlined"
-              placeholder="your email address"
+              placeholder="Your email address"
               value={email}
               type='email'
               onChange={(e) => { setEmail(e.target.value) }}

src/components/Header/Header.jsx

@@ -2,26 +2,30 @@ import React from 'react';
 import { createStyles, styled } from '@mui/material/styles';
 import { Box, Typography, Link } from '@mui/material';
 import InstagramIcon from '@mui/icons-material/Instagram';
-import FacebookIcon from '@mui/icons-material/Facebook';
-import TwitterIcon from '@mui/icons-material/Twitter';
-import PinterestIcon from '@mui/icons-material/Pinterest';
+import WhatsAppIcon from '@mui/icons-material/WhatsApp'; 
 
-const Container = styled(Box)(({theme})=>({
+const TikTokIcon = ({ color = "#000000" }) => {
+    return (
+        <svg fill={color} width="1em" height="1em" 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>
+    );
+};
+
+const Container = styled(Box)(({ theme }) => ({
     backgroundColor: theme.palette.primary.main,
     paddingTop: 10,
     paddingBottom: 10,
     width: "100%",
-    display:"flex",
-    position:"relative",
-    minHeight:"fit-content",
+    display: "flex",
+    position: "relative",
+    minHeight: "fit-content",
     [`@media (max-width: ${theme.breakpoints.values.md}px)`]: {
         display: "none"
     },
 }))
 
 const headerStyle = createStyles({
-    icon:{
-        fontSize:17
+    icon: {
+        fontSize: 17
     }
 })
 
@@ -30,13 +34,16 @@ const Header = () => {
 
     return (
         <Container>
-            <Box sx={{color:"white", px:6.1}}>
-                <Box sx={{display:"flex", gap:1, cursor:"pointer"}}>
-                    <InstagramIcon sx={{":hover":{color:"gray"}}} style={headerStyle.icon} onClick={()=>{window.open('https://www.instagram.com/amber.officials/?hl=en', '_blank')}} />
-                    <FacebookIcon sx={{":hover":{color:"gray"}}} style={headerStyle.icon} onClick={()=>{window.open('https://www.facebook.com/amber.officials/', '_blank')}}/>
-                    <TwitterIcon sx={{":hover":{color:"gray"}}} style={headerStyle.icon} onClick={()=>{window.open('https://twitter.com/amber.officials', '_blank')}}/>
+            <Box sx={{ color: "white", px: 6.1 }}>
+                <Box sx={{ display: "flex", gap: 1, cursor: "pointer" }}>
+                    <WhatsAppIcon sx={{ ":hover": { color: "gray" } }} style={headerStyle.icon} onClick={() => { window.open('https://wa.me/+60172282072', '_blank') }} />
+                    <InstagramIcon sx={{ ":hover": { color: "gray" } }} style={headerStyle.icon} onClick={() => { window.open('https://www.instagram.com/amber.officials/?hl=en', '_blank') }} />
+                    <a onClick={() => { window.open('https://www.tiktok.com/@ambermodeofficial', '_blank') }}>
+                    <TikTokIcon color={"#FFF"}/>
+                    </a>
+                    
                 </Box>
-                <Typography variant="body2" sx={{position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)" }}>Don’t miss out on our next big thing! Click <a style={{color:"white", textDecoration:"underline", cursor:'pointer'}}> here</a> to subcribe now.</Typography>
+                <Typography variant="body2" sx={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)" }}>Don’t miss out on our next big thing! Click <a style={{ color: "white", textDecoration: "underline", cursor: 'pointer' }}> here</a> to subcribe now.</Typography>
             </Box>
         </Container>
     );

src/components/SocialMedia/SocialMedia.jsx

@@ -1,14 +1,18 @@
 import React from 'react';
 import { Box, Typography } from '@mui/material';
 import InstagramIcon from '@mui/icons-material/Instagram';
-import FacebookIcon from '@mui/icons-material/Facebook';
-import TwitterIcon from '@mui/icons-material/Twitter';
+import WhatsAppIcon from '@mui/icons-material/WhatsApp';
+
+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>
+  );
+};
 
 const SocialMedia = () => {
   const socialMedia = [
-    { icon: <InstagramIcon color="primary" />, name: 'Instagram', link: 'https://www.instagram.com/amber.officials/?hl=en'  },
-    { icon: <FacebookIcon color="primary" />, name: 'Facebook', link: 'https://www.facebook.com/amber.officials/' },
-    { icon: <TwitterIcon color="primary" />, name: 'Twitter', link: 'https://twitter.com/amber.officials' },
+    { icon: <WhatsAppIcon color="primary" />, name: 'Whatsapp', link: 'https://wa.me/+60172282072' },
+    { icon: <InstagramIcon color="primary" />, name: 'Instagram', link: 'https://www.instagram.com/amber.officials/?hl=en' },
   ];
 
   return (
@@ -28,7 +32,7 @@ const SocialMedia = () => {
       {socialMedia.map((media, index) => (
         <Box
           key={index}
-          onClick={()=>{
+          onClick={() => {
             window.open(media.link, '_blank')
           }}
           sx={{
@@ -39,11 +43,29 @@ const SocialMedia = () => {
           }}
         >
           {media.icon}
-          <Typography variant="body1" sx={{fontWeight: 'bold', color:'#000',':hover':{color:"#95AAC5"}}}>
+          <Typography variant="body1" sx={{ fontWeight: 'bold', color: '#000', ':hover': { color: "#95AAC5" } }}>
             {media.name}
           </Typography>
         </Box>
       ))}
+
+      <Box
+        onClick={() => {
+          window.open('https://www.tiktok.com/@ambermodeofficial', '_blank')
+        }}
+        sx={{
+          display: 'flex',
+          flexDirection: { xs: 'column', sm: 'row' }, // Stack icon and text on small screens
+          alignItems: 'center',
+          gap: 1,
+        }}
+      >
+        <TikTokIcon color={"#95AAC5"}></TikTokIcon>
+        <Typography variant="body1" sx={{ fontWeight: 'bold', color: '#000', ':hover': { color: "#95AAC5" } }}>
+          {'TikTok'}
+        </Typography>
+      </Box>
+      
     </Box>
   );
 };