footer style

src/components/Footer/Footer.jsx

@@ -2,7 +2,22 @@ import { useState } from 'react';
 import { Box, Typography, TextField, Button, InputAdornment } from '@mui/material';
 import logoSrc from "../../assets/images/amberlogofooter.png";
 import Grid from '@mui/material/Grid2';
-import customerService from '../../services/CustomerService';
+import InstagramIcon from '@mui/icons-material/Instagram';
+import WhatsAppIcon from '@mui/icons-material/WhatsApp';import customerService from '../../services/CustomerService';
+
+const TikTokIcon = ({ color = "#000000" }) => {
+  return (
+    <svg
+      fill={color}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 50 50"
+      width="1.5em"
+      height="1.5em"
+    >
+      <path d="M41,4H9C6.243,4,4,6.243,4,9v32c0,2.757,2.243,5,5,5h32c2.757,0,5-2.243,5-5V9C46,6.243,43.757,4,41,4z M37.006,22.323 c-0.227,0.021-0.457,0.035-0.69,0.035c-2.623,0-4.928-1.349-6.269-3.388c0,5.349,0,11.435,0,11.537c0,4.709-3.818,8.527-8.527,8.527 s-8.527-3.818-8.527-8.527s3.818-8.527,8.527-8.527c0.178,0,0.352,0.016,0.527,0.027v4.202c-0.175-0.021-0.347-0.053-0.527-0.053 c-2.404,0-4.352,1.948-4.352,4.352s1.948,4.352,4.352,4.352s4.527-1.894,4.527-4.298c0-0.095,0.042-19.594,0.042-19.594h4.016 c0.378,3.591,3.277,6.425,6.901,6.685V22.323z" />
+    </svg>
+  );
+};
 
 const Footer = () => {
 
@@ -17,7 +32,7 @@ const Footer = () => {
         px: {
           xs: 2,
           md: 5,
-          lg: 5
+          lg: 20
         }
       }}
     >
@@ -31,16 +46,22 @@ const Footer = () => {
 
       <Grid container spacing={2} justifyContent="space-evenly">
 
-        <Grid item size={{ xs: 12, sm: 6, md: 3 }} sx={{ position: "relative" }}>
-
+        <Grid item size={{ xs: 12, sm: 6, md: 6, lg: 3 }}>
           <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
-            Contact Info
+            Company
           </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>
+          <nav>
+            <Typography variant="body2" sx={{ mb: 1 }}>
+              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>About Us</a>
+            </Typography>
+            <Typography variant="body2" sx={{ mb: 1 }}>
+              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Cotact Us</a>
+            </Typography>
+          </nav>
         </Grid>
 
-        <Grid item size={{ xs: 12, sm: 6, md: 3 }}>
+
+        <Grid item size={{ xs: 12, sm: 6, md: 6, lg: 3 }}>
           <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
             Get Help
           </Typography>
@@ -63,32 +84,17 @@ const Footer = () => {
           </nav>
         </Grid>
 
-        <Grid item size={{ xs: 12, sm: 6, md: 3 }}>
+        <Grid item size={{ xs: 12, sm: 6, md: 6, lg: 3 }} sx={{ position: "relative" }}>
+
           <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
-            Popular Categories
+            Contact Info
           </Typography>
-          <nav>
-            <Typography variant="body2" sx={{ mb: 1 }}>
-              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Dresses <span>(45)</span></a>
-            </Typography>
-            <Typography variant="body2" sx={{ mb: 1 }}>
-              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Tops <span>(45)</span></a>
-            </Typography>
-            <Typography variant="body2" sx={{ mb: 1 }}>
-              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Skirts <span>(45)</span></a>
-            </Typography>
-            <Typography variant="body2" sx={{ mb: 1 }}>
-              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Scarves <span>(45)</span></a>
-            </Typography>
-            <Typography variant="body2" sx={{ mb: 1 }}>
-              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Mens <span>(45)</span></a>
-            </Typography>
-          </nav>
+          <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: 3 }}>
+        <Grid item size={{ xs: 12, sm: 6, md: 6, lg: 3 }}>
           <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
             Let’s stay in touch
           </Typography>
@@ -111,37 +117,37 @@ const Footer = () => {
               InputProps={{
                 startAdornment: (
                   <InputAdornment position="end">
-                    <Button 
-                      variant='contained' 
+                    <Button
+                      variant='contained'
                       sx={{ position: "absolute", right: 0, height: "100%" }}
                       onClick={() => {
 
                         const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-  
+
                         if (!email || email.trim() === "") {
                           alert("Email is required");
                           return;
                         }
-  
+
                         if (!emailRegex.test(email)) {
                           alert("Invalid Email");
                           return;
                         }
-  
-                        if(customerService.createCustomer({
+
+                        if (customerService.createCustomer({
                           "email": email,
                           "firstName": email,
                           "lastName": "customer",
                           "password": "securePassword123"
-                        })){
-  
+                        })) {
+
                           alert(`SUCCESS ADD: ${email}`)
                           setEmail('')
-  
-                        }else{
+
+                        } else {
                           alert("ALREADY ADDED");
                         }
-  
+
                       }}
                     >
                       Subscribe
@@ -153,7 +159,28 @@ const Footer = () => {
 
             <Typography variant="body2" >Keep up to date with our latest  news and <br /> special offers.</Typography>
 
-
+            <Box sx={{display:"flex", gap:1, justifyContent:"end", cursor:"pointer"}}>
+              <a 
+                href="whatsapp" 
+                style={{
+                  color:"#95AAC5"
+                }}><WhatsAppIcon />
+              </a>
+              <a 
+                href="instagram" 
+                style={{
+                  color:"#95AAC5"
+                }}><InstagramIcon />
+              </a>
+              <a 
+                href="tiktok" 
+                style={{
+                  color:"#95AAC5"
+                }}><TikTokIcon color={"#95AAC5"} />
+              </a>
+              
+            </Box>
+            
           </Box>
         </Grid>
       </Grid>