Open hours

components/OpenHours.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from '../styles/OpenHours.module.scss';
+
+export const OpenHours = () => {
+  return (
+    <section className={styles.mainContainer}>
+      <h2 className={styles.openHoursBold}>Auki:</h2>
+      <span className={styles.openHours}>ma-la 12:00-19:00</span>
+      <p className={styles.openHoursDesc}>
+        kysynnän ja sään salliessa myös pidempään
+      </p>
+      <h2 className={styles.openHoursBold}>Tervetuloa!</h2>
+    </section>
+  );
+};

pages/index.tsx

@@ -1,10 +1,14 @@
 import { Header } from '../components/Header';
+import { OpenHours } from '../components/OpenHours';
 import styles from '../styles/Home.module.scss';
 
 export default function Home() {
   return (
     <div className={styles.outerContainer}>
+      <div className={styles.innerContainer}>
         <Header />
+        <OpenHours />
+      </div>
     </div>
   );
 }

styles/Home.module.scss

@@ -1,9 +1,12 @@
 .outerContainer {
   display: flex;
-  justify-content: center;
+  align-items: center;
+  flex-direction: column;
 }
 
 .innerContainer {
   display: flex;
   align-items: center;
+  flex-direction: column;
+  max-width: 50%;
 }

styles/OpenHours.module.scss

@@ -0,0 +1,22 @@
+.mainContainer {
+  margin-top: 1.5rem;
+  font-size: 1.2rem;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.openHoursBold {
+  font-weight: bold;
+  margin: 0;
+  font-size: 1.2rem;
+}
+
+.openHours {
+  margin-top: 0.5rem;
+}
+
+.openHoursDesc {
+  max-width: 15rem;
+  text-align: center;
+}