From 418ff0a2b2a8b20d1b873ebca637af45593ef2eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Veikko=20Lintuj=C3=A4rvi?= <veikko@lintujarvi.fi>
Date: Thu, 3 Nov 2022 18:23:23 +0200
Subject: [PATCH] PostService section + little tweaking

---
 components/Contact.tsx         |  2 +-
 components/Header.tsx          |  4 +---
 components/PostService.tsx     | 20 ++++++++++++++++++++
 pages/index.tsx                |  2 ++
 styles/Contact.module.scss     |  7 +------
 styles/Header.module.scss      |  4 ++++
 styles/PostService.module.scss | 34 ++++++++++++++++++++++++++++++++++
 styles/globals.scss            | 13 +++++++++++--
 8 files changed, 74 insertions(+), 12 deletions(-)
 create mode 100644 components/PostService.tsx
 create mode 100644 styles/PostService.module.scss

diff --git a/components/Contact.tsx b/components/Contact.tsx
index 0f8e7a2..b5b5e27 100644
--- a/components/Contact.tsx
+++ b/components/Contact.tsx
@@ -39,7 +39,7 @@ export const Contact = () => {
           />
         </a>
       </div>
-      <span className={styles.separator} />
+      <span className='separator' />
     </section>
   );
 };
diff --git a/components/Header.tsx b/components/Header.tsx
index e02572c..c82c44b 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -15,9 +15,7 @@ export const Header = () => {
         width={528}
         height={237}
       />
-      <span className={styles.subTitleText}>
-        Kauppa&Ravintola&Kahvila&Baari
-      </span>
+      <h1 className={styles.subTitleText}>Kauppa&Ravintola&Kahvila&Baari</h1>
     </header>
   );
 };
diff --git a/components/PostService.tsx b/components/PostService.tsx
new file mode 100644
index 0000000..dd89ae4
--- /dev/null
+++ b/components/PostService.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import styles from '../styles/PostService.module.scss';
+
+export const PostService = () => {
+  return (
+    <section className={styles.mainContainer}>
+      <h1 className={styles.title}>Postin automaattipalvelu</h1>
+      <p className={styles.desc}>
+        Lähetä tai nouda paketti Postin pakettiautomaatista Livonsaaren
+        Osuuskaupasta
+      </p>
+      <span className={styles.info}>ma-la 12:00-19:00</span>
+      <span className={styles.info}>Velkuantie 988, 21180 Livonsaari</span>
+      <a href='https://www.smartpost.fi/' className={styles.link}>
+        Lisätietoja
+      </a>
+      <span className='separator' />
+    </section>
+  );
+};
diff --git a/pages/index.tsx b/pages/index.tsx
index d9c80cb..d6679bf 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,6 +1,7 @@
 import { Contact } from '../components/Contact';
 import { Header } from '../components/Header';
 import { OpenHours } from '../components/OpenHours';
+import { PostService } from '../components/PostService';
 import styles from '../styles/Home.module.scss';
 
 export default function Home() {
@@ -10,6 +11,7 @@ export default function Home() {
         <Header />
         <OpenHours />
         <Contact />
+        <PostService />
       </div>
     </div>
   );
diff --git a/styles/Contact.module.scss b/styles/Contact.module.scss
index a36855f..41eeef0 100644
--- a/styles/Contact.module.scss
+++ b/styles/Contact.module.scss
@@ -24,10 +24,5 @@
 .someIcon {
   max-width: 30px;
   margin: 15px;
-}
-
-.separator {
-  background-color: #fff;
-  width: 100%;
-  height: 0.05rem;
+  margin-bottom: 0;
 }
diff --git a/styles/Header.module.scss b/styles/Header.module.scss
index 6aaa3f1..40c337d 100644
--- a/styles/Header.module.scss
+++ b/styles/Header.module.scss
@@ -12,4 +12,8 @@
 
 .subTitleText {
   font-size: 2rem;
+  margin-top: 0;
+  margin-bottom: 0;
+  font-weight: 600;
+  color: #686868;
 }
diff --git a/styles/PostService.module.scss b/styles/PostService.module.scss
new file mode 100644
index 0000000..a0c4641
--- /dev/null
+++ b/styles/PostService.module.scss
@@ -0,0 +1,34 @@
+.mainContainer {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}
+
+.title {
+  font-size: 2rem;
+  margin-bottom: 0;
+  margin-top: 0;
+  font-weight: 600;
+  color: #686868;
+}
+
+.desc {
+  margin-top: 0.5rem;
+  margin-bottom: 0;
+}
+
+.info {
+  margin-top: 0.7rem;
+}
+
+.link {
+  color: #0274be;
+  text-decoration: none;
+  font-weight: bold;
+  margin-top: 0.7rem;
+}
+
+.link:hover {
+  color: #3a3a3a;
+}
diff --git a/styles/globals.scss b/styles/globals.scss
index 19ea9b5..d4de7e4 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -3,6 +3,7 @@ body {
   padding: 0;
   margin: 0;
   font-family: 'Quicksand';
+  letter-spacing: 0.8px;
 }
 
 @font-face {
@@ -15,7 +16,15 @@ body {
     color-scheme: dark;
   }
   body {
-    color: white;
-    background: black;
+    color: black;
+    background: white;
   }
 }
+
+.separator {
+  background-color: #c1c1c1;
+  width: 100%;
+  height: 0.05rem;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}