amber-fe/src/components/Footer/Footer.jsx

import React from 'react';
import { Box, Typography, TextField, Button, InputAdornment } from '@mui/material';
import SearchIcon from "@mui/icons-material/Search";
import Grid from '@mui/material/Grid2';

const Footer = () => {
  return (
    <Box
      sx={{
        backgroundColor: 'background.default',
        mb: 10,
        mt: 15
      }}
    >

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

        <Grid item xs={12} sm={6} md={3} sx={{ position: "relative" }}>

          <Typography variant="h5" sx={{
            color: 'primary.main', // Use primary color
            letterSpacing: 15,
            fontWeight: "bold",
            position: "absolute",
            top:-60
          }}>
            AMBER
          </Typography>

          <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 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 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 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={{ mr: 2 }}>
                      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;