Initial next app

pages/components/Footer.tsx

@@ -0,0 +1,43 @@
+import Link from 'next/link';
+import React from 'react';
+import styles from '../../styles/Footer.module.scss';
+
+export const Footer = () => {
+  return (
+    <footer>
+      <div className={styles.mobileMiddle}>
+        <Link href='/#nav-bar'>
+          <img src='small-logo.png' alt='small logo' />
+        </Link>
+      </div>
+      <div className={styles.container}>
+        <div className={styles.left}>
+          Livonsaari & Palva & Velkuanmaa
+          <br />
+          Naantalin saaristo
+          <br />
+        </div>
+        <div className={styles.middle}>
+          <Link href='/#nav-bar'>
+            <img src='small-logo.png' alt='small logo' />
+          </Link>
+        </div>
+        <div className={styles.right}>
+          Katariina Vuorinen <br />
+          <a className='generic-link' href='mailto:runosaari@gmail.com'>
+            runosaari@gmail.com
+          </a>
+        </div>
+      </div>
+      <div>
+        <a
+          className='generic-link'
+          href='https://github.com/codevictory/runosaari.net'
+        >
+          lähdekoodi
+        </a>
+        by codevictory
+      </div>
+    </footer>
+  );
+};

pages/components/Header.tsx

@@ -0,0 +1,29 @@
+import Link from 'next/link';
+import React from 'react';
+import styles from '../../styles/Header.module.scss';
+
+export const Header = () => {
+  return (
+    <header>
+      <nav className={styles.mainNavBar}>
+        <Link href='/'>Etusivu</Link>
+        <Link href='/program'>Ohjelma</Link>
+        <Link href='/performers'>Esiintyjät</Link>
+        <Link href='/info'>Info</Link>
+        <Link href='/safety'>Turvallisuus</Link>
+        <Link href='/archive'>Arkisto</Link>
+      </nav>
+      <h1 className={styles.mobileMainTitle}>
+        <Link href='/'>Runosaari 2022</Link>
+      </h1>
+      <nav className={styles.mobileMainNavBar} id='nav-bar'>
+        <Link href='/#logo-start'>Etusivu</Link>
+        <Link href='/program#program-start'>Ohjelma</Link>
+        <Link href='/performers#performers-start'>Esiintyjät</Link>
+        <Link href='/info#contact-start'>Info</Link>
+        <Link href='/safety#safety-start'>Turvallisuus</Link>
+        <Link href='/archive#archive-start'>Arkisto</Link>
+      </nav>
+    </header>
+  );
+};