Contacts section

components/Contact.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import Image from 'next/image';
+import styles from '../styles/Contact.module.scss';
+
+export const Contact = () => {
+  return (
+    <section className={styles.mainContainer}>
+      <Image
+        className={styles.keepersImage}
+        src='/elvira-iveta.png'
+        layout='responsive'
+        alt='shop keepers'
+        width={251}
+        height={251}
+      />
+      <span className={styles.emailAddress}>
+        info@livonsaarenosuuskauppa.fi
+      </span>
+      <span className={styles.phone}>+358 40 0460600</span>
+      <div className={styles.someContainer}>
+        <a href='https://www.facebook.com/LivonsaarenOsuuskauppa/'>
+          <Image
+            className={styles.someIcon}
+            src='/fb-icon.png'
+            layout='responsive'
+            alt='facebook'
+            width={300}
+            height={300}
+          />
+        </a>
+        <a href='https://www.instagram.com/livonsaaren_osuuskauppa/'>
+          <Image
+            className={styles.someIcon}
+            src='/insta-icon.png'
+            layout='responsive'
+            alt='facebook'
+            width={300}
+            height={300}
+          />
+        </a>
+      </div>
+      <span className={styles.separator} />
+    </section>
+  );
+};

pages/index.tsx

@@ -1,3 +1,4 @@
+import { Contact } from '../components/Contact';
 import { Header } from '../components/Header';
 import { OpenHours } from '../components/OpenHours';
 import styles from '../styles/Home.module.scss';
@@ -8,6 +9,7 @@ export default function Home() {
       <div className={styles.innerContainer}>
         <Header />
         <OpenHours />
+        <Contact />
       </div>
     </div>
   );

styles/Contact.module.scss

@@ -0,0 +1,33 @@
+.mainContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.keepersImage {
+  max-width: 150px;
+  margin-top: 1.5rem;
+}
+
+.emailAddress,
+.phone {
+  margin-top: 1rem;
+}
+
+.someContainer {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 1rem;
+}
+
+.someIcon {
+  max-width: 30px;
+  margin: 15px;
+}
+
+.separator {
+  background-color: #fff;
+  width: 100%;
+  height: 0.05rem;
+}