coffee/components/products-hero/ProductsHero.jsx

import { Container, Grid, Typography } from '@mui/material';
import { Box } from '@mui/system';
import ProductCard from '../product-card/ProductCard';
import Sort from '../sort/sort';

const ProductsHero = () => {
  return (
    <Box
      sx={{
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      <Container
        sx={{
          width: '1273px',
          height: '300px',
          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 />
      </Box>
      <Container
        sx={{
          mt: 25,
        }}
      >
        <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>
      </Container>
    </Box>
  );
};

export default ProductsHero;