coffee/components/features/Features.jsx

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

const Features = () => {
  return (
    <>
      <Box
        sx={{
          display: 'flex',
          width: '100%',

          height: {
            xs: '100%',
            sm: '100%',
          },
          flexDirection: 'column',
          paddingBottom: '50px',
        }}
      >
        <Container
          sx={{
            width: '100%',
            height: 140,
          }}
        >
          <Typography
            variant="h1"
            sx={{
              fontSize: { xs: '36px', sm: '48px', md: '64px', lg: '86px' },
              color: 'primary.main',
              textAlign: 'center',
              mt: 5,
            }}
          >
            Natural coffee
          </Typography>
        </Container>
        <Container
          sx={{
            width: '100%',
            textAlign: 'center',
            height: 60,
          }}
        >
          <Image src="/images/line.svg" alt="profile" width={150} height={50} />
          <Image
            src="/images/coffee-beans-icon.svg"
            alt="profile"
            width={100}
            height={50}
          />
          <Image src="/images/line.svg" alt="profile" width={150} height={50} />
        </Container>
        <Box
          sx={{
            display: 'flex',
            flexDirection: { xs: 'column', lg: 'row' },
            width: '100%',
            height: '100%',
          }}
        >
          {items.map((item) => (
            <FeatureItem
              key={item.id}
              image={item.image}
              alt={item.alt}
              description={item.description}
            />
          ))}
        </Box>
      </Box>
    </>
  );
};

export default Features;