coffee/components/features/Features.jsx

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

const Features = () => {
  return (
    <>
      <Box
        sx={{
          display: 'flex',
          width: '100%',
          height: '100%',
          flexDirection: 'column',
        }}
      >
        <Container
          sx={{
            width: '100%',
            height: 140,
          }}
        >
          <Typography
            variant="h1"
            sx={{ color: 'primary.main', textAlign: 'center', mt: 5 }}
          >
            Natural coffee
          </Typography>
        </Container>
        <Container
          sx={{
            width: '100%',
            textAlign: 'center',
            height: 60,
          }}
        >
          <Image
            src="/images/Line 4.svg"
            alt="profile"
            width={150}
            height={50}
          />
          <Image
            src="/images/coffee-beans-icon.svg"
            alt="profile"
            width={100}
            height={50}
          />
          <Image
            src="/images/Line 4.svg"
            alt="profile"
            width={150}
            height={50}
          />
        </Container>
        <Box
          sx={{
            display: 'flex',
            width: '100%',
            height: '100%',
            pt: 10,
          }}
        >
          <Container
            sx={{
              textAlign: 'center',
              display: 'flex',
              flexDirection: 'column',
            }}
          >
            <Image
              src="/images/factory.svg"
              alt="profile"
              width={100}
              height={100}
            />
            <Typography
              sx={{
                mt: 6,
                px: 6,
              }}
            >
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Suspendisse euismod libero sit amet dui fermentum, vulputate
              interdum massa pulvinar. Etiam tincidunt elit sed euismod
              tincidunt. Etiam maximus, justo molestie condimentum tincidunt,
              arcu velit tempus est, at auctor risus lectus at nunc.
            </Typography>
          </Container>
          <Container
            sx={{
              textAlign: 'center',
              display: 'flex',
              flexDirection: 'column',
            }}
          >
            <Image
              src="/images/coffee-machine.svg"
              alt="profile"
              width={100}
              height={100}
            />
            <Typography
              sx={{
                mt: 6,
                px: 6,
              }}
            >
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Suspendisse euismod libero sit amet dui fermentum, vulputate
              interdum massa pulvinar. Etiam tincidunt elit sed euismod
              tincidunt. Etiam maximus, justo molestie condimentum tincidunt,
              arcu velit tempus est, at auctor risus lectus at nunc.
            </Typography>
          </Container>
          <Container
            sx={{
              textAlign: 'center',
              display: 'flex',
              flexDirection: 'column',
            }}
          >
            <Image
              src="/images/coffee-beans.svg"
              alt="profile"
              width={100}
              height={100}
            />
            <Typography
              sx={{
                mt: 6,
                px: 6,
              }}
            >
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Suspendisse euismod libero sit amet dui fermentum, vulputate
              interdum massa pulvinar. Etiam tincidunt elit sed euismod
              tincidunt. Etiam maximus, justo molestie condimentum tincidunt,
              arcu velit tempus est, at auctor risus lectus at nunc.
            </Typography>
          </Container>
        </Box>
      </Box>
    </>
  );
};

export default Features;