Rename Header to NavBar and add it to the bottom too

pages/_app.tsx

@@ -2,17 +2,18 @@ import '../styles/globals.scss';
 import '../styles/transitions.scss';
 import type { AppProps } from 'next/app';
 import Footer from './components/Footer';
-import Header from './components/Header';
+import NavBar from './components/NavBar';
 import { Logo } from './components/Logo';
 
 function Runosaari({ Component, pageProps }: AppProps) {
   return (
     <>
-      <Header />
+      <NavBar />
       <Logo />
       <main>
         <Component {...pageProps} />
       </main>
+      <NavBar />
       <Footer />
     </>
   );

pages/components/NavBar.tsx

@@ -1,10 +1,10 @@
 import Link from 'next/link';
-import styles from '../../styles/Header.module.scss';
+import styles from '../../styles/NavBar.module.scss';
 
-const Header = () => {
+const NavBar = () => {
   return (
     <>
-      <header className={styles.header}>
+      <div className={styles.navBarContainer}>
         <nav className={styles.navBar}>
           <Link href='/'>
             <a className={styles.navBarLink}>Etusivu</a>
@@ -25,9 +25,9 @@ const Header = () => {
             <a className={styles.navBarLink}>Arkisto</a>
           </Link>
         </nav>
-      </header>
+      </div>
     </>
   );
 };
 
-export default Header;
+export default NavBar;

pages/index.tsx

@@ -2,8 +2,6 @@ import type { NextPage } from 'next';
 import Performers from './performers';
 import Program from './program';
 import Info from './info';
-import Archive from './archive';
-import Safety from './safety';
 import styles from '../styles/Index.module.scss';
 import Lead from './components/Lead';
 
@@ -15,8 +13,6 @@ const Home: NextPage = () => {
       <Performers />
       <Program />
       <Info />
-      <Archive />
-      <Safety />
     </div>
   );
 };

styles/Footer.module.scss

@@ -3,6 +3,7 @@
   flex-direction: column;
   align-items: center;
   margin-bottom: 30px;
+  margin-top: 3rem;
 }
 
 .container {

styles/Index.module.scss

@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: center;
   text-align: center;
-  margin-bottom: 8rem;
   width: 47rem;
   max-width: 100%;
+  margin-bottom: 4rem;
 }

styles/NavBar.module.scss

@@ -1,12 +1,15 @@
-.header {
+.navBarContainer {
   display: flex;
   flex-direction: column;
   align-items: center;
+  margin-bottom: 1rem;
+  margin-top: 1rem;
 }
 
 .navBar {
   display: flex;
   justify-content: center;
+  flex-wrap: wrap;
 }
 
 .navBarLink {
@@ -14,10 +17,7 @@
   padding-right: 15px;
   color: #2f273e;
   text-decoration: none;
-}
+  font-size: 1.4rem;
-
-.navBarLink:hover {
-  color: #69568b;
 }
 
 @media screen and (max-width: 600px) {
@@ -32,10 +32,4 @@
     margin-right: 1rem;
     width: auto;
   }
-
-  .navBar {
-    flex-wrap: wrap;
-    margin-bottom: 1rem;
-    margin-top: 1rem;
-  }
 }

styles/Shared.module.scss

@@ -16,7 +16,6 @@
   flex-direction: column;
   align-items: center;
   text-align: center;
-  margin-bottom: 8rem;
   width: 47rem;
   max-width: 100%;
 }