Move everything into a same index component

components/Contact.tsx

@@ -1,45 +0,0 @@
-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='separator' />
-    </section>
-  );
-};

components/Header.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import styles from '../styles/Header.module.scss';
-import Image from 'next/image';
-
-export const Header = () => {
-  return (
-    <header className={styles.mainContainer}>
-      <span className={styles.addressText}>
-        Velkuantie 988, 21180 Livonsaari
-      </span>
-      <Image
-        src='/big-logo.webp'
-        layout='responsive'
-        alt='main'
-        width={528}
-        height={237}
-      />
-      <h1 className={styles.subTitleText}>Kauppa&Ravintola&Kahvila&Baari</h1>
-    </header>
-  );
-};

components/OpenHours.tsx

@@ -1,15 +0,0 @@
-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>
-  );
-};

components/PostService.tsx

@@ -1,20 +0,0 @@
-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,17 +1,83 @@
-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';
+import styles from '../styles/Index.module.scss';
+import Image from 'next/image';
 
-export default function Home() {
+export default function Index() {
   return (
     <div className={styles.outerContainer}>
       <div className={styles.innerContainer}>
-        <Header />
-        <OpenHours />
-        <Contact />
-        <PostService />
+        <header className={styles.sectionContainer}>
+          <span className={styles.addressText}>
+            Velkuantie 988, 21180 Livonsaari
+          </span>
+          <Image
+            src='/big-logo.webp'
+            layout='responsive'
+            alt='main'
+            width={528}
+            height={237}
+          />
+          <h1 className={styles.title}>Kauppa&Ravintola&Kahvila&Baari</h1>
+        </header>
+        <section className={styles.sectionContainer}>
+          <h2 className={styles.openHoursTitle}>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>{' '}
+        <section className={styles.sectionContainer}>
+          <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.socialMediaContainer}>
+            <a href='https://www.facebook.com/LivonsaarenOsuuskauppa/'>
+              <Image
+                className={styles.socialMediaIcon}
+                src='/fb-icon.png'
+                layout='responsive'
+                alt='facebook'
+                width={300}
+                height={300}
+              />
+            </a>
+            <a href='https://www.instagram.com/livonsaaren_osuuskauppa/'>
+              <Image
+                className={styles.socialMediaIcon}
+                src='/insta-icon.png'
+                layout='responsive'
+                alt='facebook'
+                width={300}
+                height={300}
+              />
+            </a>
+          </div>
+          <span className='separator' />
+        </section>
+        <section className={styles.sectionContainer}>
+          <h1 className={styles.title}>Postin automaattipalvelu</h1>
+          <p className={styles.postServiceDesc}>
+            Lähetä tai nouda paketti Postin pakettiautomaatista Livonsaaren
+            Osuuskaupasta
+          </p>
+          <span className={styles.postServiceInfo}>ma-la 12:00-19:00</span>
+          <span className={styles.postServiceInfo}>
+            Velkuantie 988, 21180 Livonsaari
+          </span>
+          <a href='https://www.smartpost.fi/' className={styles.link}>
+            Lisätietoja
+          </a>
+          <span className='separator' />
+        </section>
       </div>
     </div>
   );

styles/Contact.module.scss

@@ -1,28 +0,0 @@
-.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;
-  margin-bottom: 0;
-}

styles/Header.module.scss

@@ -1,19 +0,0 @@
-.mainContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.addressText {
-  font-weight: lighter;
-  margin-top: 1rem;
-  font-size: 1.1rem;
-}
-
-.subTitleText {
-  font-size: 2rem;
-  margin-top: 0;
-  margin-bottom: 0;
-  font-weight: 600;
-  color: #686868;
-}

styles/Home.module.scss

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

styles/Index.module.scss

@@ -0,0 +1,88 @@
+.outerContainer {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.innerContainer {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  max-width: 50%;
+}
+
+.sectionContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.address {
+  font-weight: lighter;
+  margin-top: 1rem;
+  font-size: 1.1rem;
+}
+
+.title {
+  font-size: 2rem;
+  margin-top: 0;
+  margin-bottom: 0;
+  font-weight: 600;
+  color: #686868;
+}
+
+.openHoursTitle {
+  font-weight: bold;
+  margin: 0;
+  font-size: 1.2rem;
+}
+
+.openHoursText {
+  margin-top: 0.5rem;
+}
+
+.openHoursDesc {
+  max-width: 15rem;
+  text-align: center;
+}
+
+.keepersImage {
+  max-width: 150px;
+  margin-top: 1.5rem;
+}
+
+.emailAddress,
+.phone {
+  margin-top: 1rem;
+}
+
+.socialMediaContainer {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 1rem;
+}
+
+.socialMediaIcon {
+  max-width: 30px;
+  margin: 15px;
+  margin-bottom: 0;
+}
+
+.postServiceDesc {
+  margin-top: 0.5rem;
+  margin-bottom: 0;
+}
+
+.postServiceInfo {
+  margin-top: 0.7rem;
+}
+
+.link {
+  color: #0274be;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.link:hover {
+  color: #3a3a3a;
+}

styles/OpenHours.module.scss

@@ -1,22 +0,0 @@
-.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;
-}

styles/PostService.module.scss

@@ -1,34 +0,0 @@
-.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;
-}