PostService section + little tweaking

components/Contact.tsx

@@ -39,7 +39,7 @@ export const Contact = () => {
           />
         </a>
       </div>
-      <span className={styles.separator} />
+      <span className='separator' />
     </section>
   );
 };

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>
   );
 };

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>
+  );
+};

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>
   );

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;
 }

styles/Header.module.scss

@@ -12,4 +12,8 @@
 
 .subTitleText {
   font-size: 2rem;
+  margin-top: 0;
+  margin-bottom: 0;
+  font-weight: 600;
+  color: #686868;
 }

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;
+}

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;
+}