pages/index.js
//Component that lists the advantages with Images and texts
Component that lists the advantages with Images and texts
Component that lists the advantages with Images and texts
function Advantages() {
  const isTabletOrMobile = useMediaQuery({ query: "(max-width: 767px)" });
  const lang = useSelector((state) => state.lang);
  const itemsEnglish = [
    {
      id: 1,
      url: "/imgs/icons8-hands.svg",
      text: "Connect with your local urban gardening community.",
    },
    {
      id: 2,
      url: "/imgs/icons8-shovel.svg",
      text: "Find useful tools in your local neighborhood and share yours.",
    },
    {
      id: 3,
      url: "/imgs/icons8-plant.svg",
      text: "Grow the urban garden together!",
    },
  ];
  const itemsGerman = [
    {
      id: 1,
      url: "/imgs/icons8-hands.svg",
      text: "Verbinde dich mit der Urban Gardening Community in deiner Stadt.",
    },
    {
      id: 2,
      url: "/imgs/icons8-shovel.svg",
      text: "Leihe nützliches Werkzeug und teile deines mit anderen Gärter*innen",
    },
    {
      id: 3,
      url: "/imgs/icons8-plant.svg",
      text: "Lasst uns gemeinsam die Stadt grüne machen!",
    },
  ];
  return (
    <Container className={styles.firstSiteElement}>
      <div
        className={
          isTabletOrMobile
            ? styles.advantages
            : `${styles.advantages} ${styles.desktop}`
        }>
        <h2>{lang === "eng" ? "WHAT IS GARDEN UP?" : "WAS IST GARDEN UP?"}</h2>
        <Container className={styles.advantagesContainer}>
          <Row xs={1} sm={3}>
            {lang === "eng"
              ? itemsEnglish.map((item) => (
                  <Col key={item.id}>
                    <AdvantagesItem url={item.url} text={item.text} />
                  </Col>
                ))
              : itemsGerman.map((item) => (
                  <Col key={item.id}>
                    <AdvantagesItem url={item.url} text={item.text} />
                  </Col>
                ))}
          </Row>
        </Container>
      </div>
    </Container>
  );
}
function Advantages ( ) { const isTabletOrMobile = useMediaQuery ( { query : "(max-width: 767px)" } ) ; const lang = useSelector ( ( state ) => state . lang ) ; const itemsEnglish = [ { id : 1 , url : "/imgs/icons8-hands.svg" , text : "Connect with your local urban gardening community." , } , { id : 2 , url : "/imgs/icons8-shovel.svg" , text : "Find useful tools in your local neighborhood and share yours." , } , { id : 3 , url : "/imgs/icons8-plant.svg" , text : "Grow the urban garden together!" , } , ] ; const itemsGerman = [ { id : 1 , url : "/imgs/icons8-hands.svg" , text : "Verbinde dich mit der Urban Gardening Community in deiner Stadt." , } , { id : 2 , url : "/imgs/icons8-shovel.svg" , text : "Leihe nützliches Werkzeug und teile deines mit anderen Gärter*innen", } , { id : 3 , url : "/imgs/icons8-plant.svg" , text : "Lasst uns gemeinsam die Stadt grüne machen!", } , ] ; return ( < Container className = { styles . firstSiteElement } > < div className = { isTabletOrMobile ? styles . advantages : ` ${ styles . advantages } ${ styles . desktop } ` } > < h2 > { lang === "eng" ? "WHAT IS GARDEN UP?" : "WAS IST GARDEN UP?" } < / h2 > < Container className = { styles . advantagesContainer } > < Row xs = { 1 } sm = { 3 } > { lang === "eng" ? itemsEnglish . map ( ( item ) => ( < Col key = { item . id } > < AdvantagesItem url = { item . url } text = { item . text } / > < / Col > ) ) : itemsGerman . map ( ( item ) => ( < Col key = { item . id } > < AdvantagesItem url = { item . url } text = { item . text } / > < / Col > ) ) } < / Row > < / Container > < / div > < / Container > ) ; }
Component that lists the advantages with Images and texts
Component that lists the advantages with Images and texts