amber/src/components/Footer/Footer.jsx

import React from 'react';
import { Box, Typography, TextField, Button, InputAdornment } from '@mui/material';
import logoSrc from "../../assets/images/amberlogofooter.png";
import Grid from '@mui/material/Grid2';

const Footer = () => {
  return (
    <Box
      sx={{
        backgroundColor: 'background.default',
        mb: 10,
        mt: 15,
        px: {
          xs: 2,
          md: 12,
          lg: 20
        }
      }}
    >
      <img src={logoSrc} alt="Logo"
        style={{
          width: 150,
          height: 23,
          marginBottom: 25
        }}
      />

      <Grid container spacing={2} justifyContent="space-evenly">

        <Grid item size={{ xs: 12, sm: 6, md: 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: 3 }}>
          <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
            Get Help
          </Typography>
          <nav>
            <Typography variant="body2" sx={{ mb: 1 }}>
              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Delivery Information</a>
            </Typography>
            <Typography variant="body2" sx={{ mb: 1 }}>
              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Sale Terms & Conditions</a>
            </Typography>
            <Typography variant="body2" sx={{ mb: 1 }}>
              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Returns & Refunds</a>
            </Typography>
            <Typography variant="body2" sx={{ mb: 1 }}>
              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Privacy Notice</a>
            </Typography>
            <Typography variant="body2" sx={{ mb: 1 }}>
              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Shopping FAQs</a>
            </Typography>
          </nav>
        </Grid>

        <Grid item size={{ xs: 12, sm: 6, md: 3 }}>
          <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
            Popular Categories
          </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>
        </Grid>



        <Grid item size={{ xs: 12, sm: 6, md: 3 }}>
          <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
            Let’s stay in touch
          </Typography>
          <Box
            component="form"
            sx={{
              display: 'flex',
              flexDirection: 'column',
              gap: 1,
            }}
            noValidate
          >
            <TextField
              variant="outlined"
              placeholder="your email address"
              sx={{ p: 0, mb: 2 }}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="end">
                    <Button variant='contained' sx={{position:"absolute", right:0, height:"100%" }}>
                      Subscribe
                    </Button>
                  </InputAdornment>
                ),
              }}
            />

            <Typography variant="body2" >Keep up to date with our latest  news and <br /> special offers.</Typography>


          </Box>
        </Grid>
      </Grid>
    </Box>
  );
};

export default Footer;