pages/index.js
// Component that shows one advantage: one image plus text
Component that shows one advantage: one image plus text
Component that shows one advantage : one image plus text
function AdvantagesItem({ url, text }) {
  const isTabletOrMobile = useMediaQuery({ query: "(max-width: 767px)" });
  return (
    <Container
      className={
        isTabletOrMobile
          ? styles.advantagesCol
          : `${styles.advantagesCol} ${styles.desktop}`
      }>
      <Row xs={2} sm={1}>
        <Col xs={4} sm={12} className={styles.advantageText}>
          <Image src={url} />
        </Col>
        <Col className={styles.advantageText} xs={8} sm={12}>
          {text}
        </Col>
      </Row>
    </Container>
  );
}
function AdvantagesItem ( { url , text } ) { const isTabletOrMobile = useMediaQuery ( { query : "(max-width: 767px)" } ) ; return ( < Container className = { isTabletOrMobile ? styles . advantagesCol : ` ${ styles . advantagesCol } ${ styles . desktop } ` } > < Row xs = { 2 } sm = { 1 } > < Col xs = { 4 } sm = { 12 } className = { styles . advantageText } > < Image src = { url } / > < / Col > < Col className = { styles . advantageText } xs = { 8 } sm = { 12 } > { text } < / Col > < / Row > < / Container > ) ; }
Component that shows one advantage: one image plus text
Component that shows one advantage : one image plus text