Added contact info to help page

app/routes/pomoc.jsx

@@ -5,9 +5,13 @@ import { json } from '@shopify/remix-oxygen'
 import seoQaPage from '~/seo/seoQaPage'
 
 import { useLoaderData } from '@remix-run/react'
-
+import { Image } from '@shopify/hydrogen'
 import { Link } from "@remix-run/react"
 
+import phone from "~/../public/icons/beige/phone.png"
+import home from "~/../public/icons/beige/home.png"
+import mail from "~/../public/icons/beige/mail.png"
+
 export async function loader({ request }) {
  const seo = seoQaPage({
  title: 'Pomoc',
@@ -26,15 +30,35 @@ export default function Pomoc() {
  return (
  <div className={`${styles.faq} smallContainer`}>
  <h1>Pomoc</h1>
- <SingleFaq question="Zwroty" answer={zwroty} open={requestParamsOpen === "zwroty" ? true : false} />
- <SingleFaq question="Reklamacje" answer={reklamacje} open={requestParamsOpen === "reklamacje" ? true : false} />
- <SingleFaq question="Płatności" answer={platnosci} open={requestParamsOpen === "platnosci" ? true : false} />
- <SingleFaq question="Dlaczego dostawa może być wydłużona?" answer={dlaczegoDostawaWydluzona} open={requestParamsOpen === "wydluzona_dostawa" ? true : false} />
- <SingleFaq question="Ile trwa dostawa?" answer={ileTrwaDostawa} />
- <SingleFaq question="Ile kosztuje dostawa?" answer={ileKosztujeDostawa} />
- <SingleFaq question="Gdzie jest moja paczka?" answer={gdzieJestMojaPaczka} />
- <SingleFaq question="Masz zastrzeżenie co do paczki?" answer={maszZastrzelenieCoDoPaczki} />
- <SingleFaq question="Jak zamówić paczkę za granicę?" answer={jakZamowicPaczkeZaGranice} />
+ <div className={styles.infoTilesSection}>
+ <div className={styles.infoTile}>
+ <Image src={phone} alt="Ikona informacji" width={46} height={46} />
+ <p className={styles.infoTileTitle}>Telefon</p>
+ <p className={styles.infoTileData}>+48 501 721 417</p>
+ </div>
+ <div className={styles.infoTile}>
+ <Image src={mail} alt="Ikona informacji" width={46} height={46} />
+ <p className={styles.infoTileTitle}>Email</p>
+ <p className={styles.infoTileData}>[email protected]</p>
+ </div>
+ <div className={styles.infoTile}>
+ <Image src={home} alt="Ikona informacji" width={46} height={46} />
+ <p className={styles.infoTileTitle}>Adres</p>
+ <p className={styles.infoTileData}>Graniczna 15A</p>
+ <p className={styles.infoTileData}>05-077 Warszawa</p>
+ </div>
+ </div>
+ <div>
+ <SingleFaq question="Zwroty" answer={zwroty} open={requestParamsOpen === "zwroty" ? true : false} />
+ <SingleFaq question="Reklamacje" answer={reklamacje} open={requestParamsOpen === "reklamacje" ? true : false} />
+ <SingleFaq question="Płatności" answer={platnosci} open={requestParamsOpen === "platnosci" ? true : false} />
+ <SingleFaq question="Dlaczego dostawa może być wydłużona?" answer={dlaczegoDostawaWydluzona} open={requestParamsOpen === "wydluzona_dostawa" ? true : false} />
+ <SingleFaq question="Ile trwa dostawa?" answer={ileTrwaDostawa} />
+ <SingleFaq question="Ile kosztuje dostawa?" answer={ileKosztujeDostawa} />
+ <SingleFaq question="Gdzie jest moja paczka?" answer={gdzieJestMojaPaczka} />
+ <SingleFaq question="Masz zastrzeżenie co do paczki?" answer={maszZastrzelenieCoDoPaczki} />
+ <SingleFaq question="Jak zamówić paczkę za granicę?" answer={jakZamowicPaczkeZaGranice} />
+ </div>
  </div>
  )
 }

app/styles/pages/faq.module.css

@@ -8,4 +8,41 @@
  margin-top: 24px;
  text-align: center;
  }
+
+ & .infoTilesSection {
+ margin-bottom: 24px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+ row-gap: 24px;
+ column-gap: 12px;
+
+ @media(max-width: 480px) {
+ width: 100%;
+ max-width: 340px;
+ margin: auto;
+ margin-bottom: 24px;
+ }
+
+ & .infoTile {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ & .infoTileTitle {
+ font-family: "Poppins", sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ margin-bottom: 6px;
+ color: var(--color-beige);
+ }
+
+ & .infoTileData {
+ font-family: "Poppins", sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ color: var(--color-dark);
+ }
+ }
+ }
 }