Structure improved, program added

pages/_app.tsx

@@ -1,8 +1,18 @@
 import '../styles/globals.scss';
 import type { AppProps } from 'next/app';
+import { Footer } from './components/Footer';
+import { Header } from './components/Header';
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <>
+      <Header />
+      <main>
+        <Component {...pageProps} />
+      </main>
+      <Footer />
+    </>
+  );
 }
 
 export default MyApp;

pages/components/Header.tsx

@@ -4,6 +4,7 @@ import styles from '../../styles/Header.module.scss';
 
 export const Header = () => {
   return (
+    <>
       <header className={styles.header}>
         <nav className={styles.navBar}>
           <Link href='/'>
@@ -26,5 +27,18 @@ export const Header = () => {
           </Link>
         </nav>
       </header>
+      <section className={styles.logoContainer}>
+        <div className={styles.logo} id='logo-start'>
+          <img
+            className={styles.logoImage}
+            src='runosaari-logo.jpg'
+            alt='Runosaari logo'
+          />
+          <div className={styles.logoCredits}>
+            <div>@Sanna Hukkanen</div>
+          </div>
+        </div>
+      </section>
+    </>
   );
 };

pages/index.tsx

@@ -1,27 +1,7 @@
 import type { NextPage } from 'next';
-import { Footer } from './components/Footer';
-import { Header } from './components/Header';
-import styles from '../styles/Home.module.scss';
 
 const Home: NextPage = () => {
-  return (
+  return <div>asdsd</div>;
-    <>
-      <Header />
-      <section className={styles.logoContainer}>
-        <div className={styles.logo} id='logo-start'>
-          <img
-            className={styles.logoImage}
-            src='runosaari-logo.jpg'
-            alt='Runosaari logo'
-          />
-          <div className={styles.logoCredits}>
-            <div>@Sanna Hukkanen</div>
-          </div>
-        </div>
-      </section>
-      <Footer />
-    </>
-  );
 };
 
 export default Home;

pages/program.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+
+const Program = () => {
+  return (
+    <section className='page'>
+      <h1 id='program-start'>Ohjelma</h1>
+      <i>OHJELMA PÄIVITTYY KEVÄÄN MITTAAN, PYSYKÄÄ KUULOLLA!</i>
+      <h2>Keskiviikko 20.7.</h2>
+      <p className='performance-paragraph'>
+        18-20 Olen polkuni päässä -illassa Ella Pyhältö lausuu rakastettuja
+        runoja Irja ja Veikko Aro-Heinilän kotipihalla (sateella sisällä).
+      </p>
+      <p className='performance-paragraph'>Sydämellisesti tervetuloa!</p>
+      <p className='performance-paragraph'>
+        Paikka: Huhtakarintie 24, Livonsaari
+      </p>
+      <h2>Torstai 21.7.</h2>
+      <p className='performance-paragraph'>
+        14-16 Ainot ja Lauri esittävät Lähellä-nimisen poikkitaiteellisen
+        kokoonpanon, joka on saanut kolmannen kiinnityksen kiertopalkintoon
+        Willi Kansa -katselmuksessa marraskuussa 2021 Irja ja Veikko
+        Aro-Heinilän pihamaalla. Toisessa osassa iltapäivää kuullaan Irja
+        Aro-Heinilän ja Arto Juurakon tekstejä Ainojen ja Laurin esittäminä.
+      </p>
+      <p className='performance-paragraph'>
+        17-19 Runollinen, musiikillinen ja merellinen matinea Cafe Laiturissa.
+        Esiintymässä mm. Anja Erämaja.
+      </p>
+      <p className='performance-paragraph'>
+        Paikka: Huhtakarintie 24, Livonsaari sekä Cafe Laituri, Voiponlahdentie
+        37, Palva
+      </p>
+      <h2>Perjantai 22.7.</h2>
+      <p className='performance-paragraph'>
+        11-14 Monologityöpaja, vetäjä teatteritaiteen maisteri Kati Urho.
+      </p>
+      <p className='performance-paragraph'>
+        Ympäristöjargonia luovasti -työpaja, vetäjä journalisti ja
+        viestintäkonsultti Laura Rantanen.
+      </p>
+      <p className='performance-paragraph'>
+        14-20 Runoutta, musiikkia ja poikkitaiteellisia yllätyksiä
+        puutarhalavalla tai myrskyn sattuessa Seurantalon salissa.
+      </p>
+      <p className='performance-paragraph'>
+        Esiintymässä mm. Kari Aronpuro, Sanna Karlström, Katariina Vuorinen, Aki
+        Salmela, Heidi Iivari ja Laura Laakso.
+      </p>
+      <p className='performance-paragraph'>
+        Musiikillisesta puolesta vastaa saksofonisti Mikko Innanen sekä
+        Äyräs-kokoonpano: Olga Välimaa (laulu), Kauko Röyhkä (laulu, kitara,
+        basso), Ilkka Turta (kitara), Kimmo Laine (basso, koskettimet), Roberto
+        Lanz (rummut).
+      </p>
+      <p className='performance-paragraph'>
+        Tapahtuman ajan Sinervon talolla pitää majaa kiehtovien kirjojen tori.
+      </p>
+      <p className='performance-paragraph'>
+        Paikka: Sinervon talo, Sauniementie 5, Teersalo
+      </p>
+      <h2>Lauantai 23.7.</h2>
+      <p className='performance-paragraph'>
+        13-17 Runollinen iltapäivä. Romanttinen Velkuanmaa kutsuu mystisen
+        äärelle.
+      </p>
+      <p className='performance-paragraph'>
+        Saaristohotelli Vaihelan terassilla runoilijat vievät kuulijat luomiinsa
+        maailmoihin yhdessä muusikoiden kanssa. Samalla ehtii myös nauttimaan
+        lounasta, juttelemaan muiden festarikävijöiden kanssa ja ihailemaan
+        ympäröivää luontoa.
+      </p>
+      <p className='performance-paragraph'>
+        Juha Kulmala ja Diodi-yhtye, Saila Susiluoto ja Markku Pääskynen
+        (luuttu).
+      </p>
+      <p className='performance-paragraph'>
+        Paikka: Vaihelan saaristohotelli, Velkuanmaantie 168, Velkuanmaa
+      </p>
+    </section>
+  );
+};
+
+export default Program;

styles/Header.module.scss

@@ -34,3 +34,29 @@
     flex-direction: column;
   }
 }
+
+.logoContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.logo {
+  width: 80%;
+  max-width: 1000px;
+  border-radius: 3px 3px 0px 0px;
+  padding-top: 3px;
+}
+
+.logoImage {
+  width: 100%;
+}
+
+.logoCredits {
+  font-size: 90%;
+  display: flex;
+  justify-content: right;
+  max-width: 990px;
+  padding-right: 10px;
+  margin-top: -10px;
+}

styles/globals.scss

@@ -17,3 +17,18 @@ a {
   color: #8962ec;
   text-decoration: underline;
 }
+
+main {
+  display: flex;
+  justify-content: center;
+}
+
+.page {
+  max-width: 40%;
+  text-align: center;
+  margin-bottom: 8rem;
+}
+
+h1 {
+  font-size: 5rem;
+}