coffee/components/products-hero/ProductsHero.jsx

import { Container, Typography } from '@mui/material';
import { Box } from '@mui/system';

const ProductsHero = () => {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      <Container
        maxWidth="lg"
        sx={{
          mt: 25,
          mb: 10,
        }}
      >
        <Typography
          fontFamily={'body1.fontFamily'}
          align="center"
          color="primary.main"
          mb={3}
          sx={{
            fontSize: { md: '64px', sm: '46px', xs: '32px' },
          }}
        >
          Welcome to our Store!
        </Typography>
        <Typography
          sx={{ fontSize: { xs: '16px', sm: '18px', md: '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>
  );
};

export default ProductsHero;