coffee/components/products-hero/ProductsHero.jsx

import { Button, Container, Grid, Typography } from '@mui/material';
import { Box } from '@mui/system';
import Image from 'next/image';
import ProductCard from '../product-card/ProductCard';
import ProductType from '../product-type/ProductType';
import Sort from '../sort/sort';

const ProductsHero = () => {
  return (
    <Box
      sx={{
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      <Container
        sx={{
          width: '1273px',
          height: '350px',
          mt: 25,
        }}
      >
        <Typography
          fontFamily={'body1.fontFamily'}
          height="120px"
          fontSize="64px"
          align="center"
          color="primary.main"
        >
          Welcome to our Store!
        </Typography>
        <Typography fontSize="24px" align="center">
          Our focus is to bring you the very best in the world of coffee.
          Everything from fresh coffee beans, the best coffee powders and
          capsules as well as other miscellaneous items such as cups and mugs.
          Take a look to see if anything takes your fancy.
        </Typography>
      </Container>
      <Box textAlign="center" width="100%">
        <Sort />
        <ProductType />
      </Box>
      <Container
        sx={{
          mt: 10,
        }}
      >
        <Grid container spacing={2}>
          <Grid item md={4} xs={12} sx={{ height: '500px' }}>
            <ProductCard />
          </Grid>
          <Grid item md={4} xs={12}>
            <ProductCard />
          </Grid>
          <Grid item md={4} xs={12}>
            <ProductCard />
          </Grid>
          <Grid item md={4} xs={12}>
            <ProductCard />
          </Grid>
          <Grid item md={4} xs={12}>
            <ProductCard />
          </Grid>
          <Grid item md={4} xs={12}>
            <ProductCard />
          </Grid>
          <Grid item md={4} xs={12}>
            <ProductCard />
          </Grid>
          <Grid item md={4} xs={12}>
            <ProductCard />
          </Grid>
          <Grid item md={4} xs={12}>
            <ProductCard />
          </Grid>
        </Grid>
        <Box textAlign="center" mt={-3} mb={5}>
          <Button
            startIcon={
              <Image
                src="/images/arrow.svg"
                alt="arrow down"
                width={29}
                height={29}
              />
            }
            sx={{
              backgroundColor: 'primary.main',
              height: 50,
              width: 150,
              color: 'white',
              ':hover': {
                bgcolor: 'primary.main', // theme.palette.primary.main
                color: 'white',
              },
            }}
          >
            Load More
          </Button>
        </Box>
      </Container>
    </Box>
  );
};

export default ProductsHero;