social link

src/components/Header/Header.jsx

     return (
         <Container>
             <Box sx={{color:"white", px:23}}>
-                <Box sx={{display:"flex", gap:1}}>
-                    <InstagramIcon style={headerStyle.icon} />
-                    <FacebookIcon style={headerStyle.icon} />
-                    <TwitterIcon style={headerStyle.icon} />
-                    <PinterestIcon style={headerStyle.icon} />
+                <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>
                 <Typography variant="body2" sx={{position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)" }}>Don’t miss out on our next big thing! Click <Link sx={{color:"white", textDecoration:"underline"}}> here</Link> to subcribe now.</Typography>
             </Box>

src/components/NewsLetter/NewsLetter.jsx

 import bgImage from "../../assets/images/newsletterwallpaper.jpg"
 import { Box, Button, TextField, InputAdornment, Typography } from '@mui/material';
 
-
-
 const NewsLetter = () => {
   return (
     <Box

src/components/SocialMedia/SocialMedia.jsx

 
 const SocialMedia = () => {
   const socialMedia = [
-    { icon: <InstagramIcon color="primary" />, name: 'Instagram' },
-    { icon: <FacebookIcon color="primary" />, name: 'Facebook' },
-    { icon: <TwitterIcon color="primary" />, name: 'Twitter' },
+    { 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' },
   ];
 
   return (
         py: 4,
         borderTop: '1px solid #CFCFCF',
         borderBottom: '1px solid #CFCFCF',
+        cursor: 'pointer'
       }}
     >
       {socialMedia.map((media, index) => (
         <Box
           key={index}
+          onClick={()=>{
+            window.open(media.link, '_blank')
+          }}
           sx={{
             display: 'flex',
             flexDirection: { xs: 'column', sm: 'row' }, // Stack icon and text on small screens
           }}
         >
           {media.icon}
-          <Typography variant="body1" sx={{ fontWeight: 'bold' }}>
+          <Typography variant="body1" sx={{fontWeight: 'bold', color:'#000',':hover':{color:"#95AAC5"}}}>
             {media.name}
           </Typography>
         </Box>