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}>biuro@jazba.pl</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);
+            }
+        }
+    }
 }