From 623a9e5cd2c63353be04e26625b209fd469d82d7 Mon Sep 17 00:00:00 2001
From: Aarni Halinen <aarni.halinen@gmail.com>
Date: Mon, 6 Jul 2020 16:03:01 +0300
Subject: [PATCH] Some ActualPage layout

---
 src/components/Accordion/Accordion.tsx        |   6 +-
 .../HeroMainSection/HeroMainSection.scss      |   4 +
 src/pages/ActualPage/ActualPage.tsx           | 119 +++++++++++++++++-
 3 files changed, 125 insertions(+), 4 deletions(-)

diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index 15fc857..49dcbda 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -26,9 +26,9 @@ class Accordion extends React.Component<AccordionProps, AccordionState> {
   }
 
   handleClick() {
-    this.setState({
-      isOpen: !this.state.isOpen,
-    });
+    this.setState((prevState) => ({
+      isOpen: !prevState.isOpen,
+    }));
   }
 
   render() {
diff --git a/src/components/HeroMainSection/HeroMainSection.scss b/src/components/HeroMainSection/HeroMainSection.scss
index f753026..38c3198 100644
--- a/src/components/HeroMainSection/HeroMainSection.scss
+++ b/src/components/HeroMainSection/HeroMainSection.scss
@@ -30,4 +30,8 @@
   display: flex;
   flex-direction: column;
   min-width: 20%;
+
+  &-row {
+    flex-direction: row;
+  }
 }
diff --git a/src/pages/ActualPage/ActualPage.tsx b/src/pages/ActualPage/ActualPage.tsx
index 5967204..d9ae78a 100644
--- a/src/pages/ActualPage/ActualPage.tsx
+++ b/src/pages/ActualPage/ActualPage.tsx
@@ -1,6 +1,19 @@
 import React from "react";
 import { Helmet } from "react-helmet";
 import "./ActualPage.scss";
+import PageSection from "../../components/PageSection";
+import { ColorEnum } from "../../components/ColorDiv/ColorDiv";
+import HeroMainSection from "../../components/HeroMainSection";
+import HeroAsideSection from "../../components/HeroAsideSection";
+import HeroAsideItem from "../../components/HeroAsideItem";
+import AsideSection from "../../components/AsideSection";
+import MainSection from "../../components/MainSection/index";
+import PageLink from "../../components/PageLink/index";
+import Ribbon from "../../components/Ribbon/index";
+import TextAnchor from "../../components/TextAnchor/index";
+import { TextSize } from "../../components/TextAnchor/TextAnchor";
+import Button, { ButtonType } from "../../components/Button/index";
+import Accordion from "../../components/Accordion";
 
 export interface ActualPageProps {}
 export interface ActualPageState {}
@@ -12,7 +25,111 @@ class ActualPage extends React.Component<ActualPageProps, ActualPageState> {
         <Helmet>
           <link rel="canonical" href="https://sik.ayy.fi/kilta/toiminta" />
         </Helmet>
-        Actual Page
+        <PageSection backgroundColor={ColorEnum.DarkBlue} fullSize className="lander-hero">
+          <HeroMainSection>
+            <div>
+              <h1>Yritystapahtumia ja vastapainoa opiskelulle</h1>
+              <p>
+              Teekkarielämä ei ole pelkkää saunomista, juhlimista ja muita huvituksia—tai no, on se sitäkin.
+              </p>
+              <div className="hero-button-container-row">
+                <Button type={ButtonType.Hero} onClick={() => { }}>
+                  <h6>Tapahtumat&nbsp;›</h6>
+                </Button>
+                <Button type={ButtonType.Hero} onClick={() => { }}>
+                  <h6>Uutiset&nbsp;›</h6>
+                </Button>
+              </div>
+            </div>
+            <div className="hero-secondary-section">
+              <h1>Kiltahuone sijaitsee Tuas-talossa (Maarintie 8)</h1>
+              <p>Killan hallitus päivystää kiltahuoneella maanantaisin klo 12.15–13.15. Tuolloin voit ostaa kiltatuotteita, kuten esim. haalarimerkkejä tai laulukirjoja.</p>
+              <p>Kiltapäiväkerho Kiltis kokoontuu torstaisin klo XX.XX kiltahuoneella. Lorem ipsum dolor sit amet. Lämpimästi tervetuloa kaikki SIKkiläiset ja SIK-mieliset!</p>
+            </div>
+          </HeroMainSection>
+          <HeroAsideSection textColor={ColorEnum.DarkBlue} backgroundColor={ColorEnum.LightTurquoise}>
+            <p>
+            Kilta järjestää jäsenilleen jos jonkinlaista projektia ja toimintaa, muun muassa:
+            </p>
+            <HeroAsideItem
+              title="keksimistä ja rakentelua"
+              linkHref="#elepaja"
+              linkText="Elektroniikkapaja">
+            </HeroAsideItem>
+            <HeroAsideItem
+              title="Tiimipelejä ja liikuntaa"
+              linkHref="#urheilu"
+              linkText="Urheilu">
+            </HeroAsideItem>
+            <HeroAsideItem
+              title="Konsertteja ja teatterivierailuja"
+              linkHref="#kulttuuri"
+              linkText="Kulttuuri">
+            </HeroAsideItem>
+            <HeroAsideItem
+              title="Verkostoitumista"
+              linkHref="#yritysyhteistyö"
+              linkText="Yritysyhteistyö">
+            </HeroAsideItem>
+            <HeroAsideItem
+              title="Uusia suhteita ulkopaikkakuntalaisten kanssa"
+              linkHref="#ulkosuhteet"
+              linkText="Ulkoiset suhteet">
+            </HeroAsideItem>
+          </HeroAsideSection>
+        </PageSection>
+        <PageSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black}>
+          <MainSection>
+            <h3>Tapahtumat</h3>
+          </MainSection>
+        </PageSection>
+        <PageSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black}>
+          <MainSection>
+            <h3>Uutiset</h3>
+          </MainSection>
+        </PageSection>
+        <PageSection backgroundColor={ColorEnum.LightTurquoise} textColor={ColorEnum.DarkBlue}>
+          <Ribbon>
+            <h3>Kuvia tapahtumista.</h3>
+            <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.Blue} size={TextSize.SmallRibbon} to="https://sosso.fi">
+              <h6>Kuvagalleria&nbsp;›</h6>
+            </TextAnchor>
+          </Ribbon>
+        </PageSection>
+          Kuva-galleriasta hyviä kuvia 3kpl. (Esim. wireframen kuvat)
+        <PageSection backgroundColor={ColorEnum.Blue}>
+          <Ribbon>
+            <h3>Sinustako kilta-aktiivi?</h3>
+            <TextAnchor textColor={ColorEnum.White} hoverColor={ColorEnum.Blue} size={TextSize.SmallRibbon} to="https://sosso.fi">
+              <h6>Tule mukaan kiltatoimintaan&nbsp;›</h6>
+            </TextAnchor>
+          </Ribbon>
+        </PageSection>
+        <PageSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black}>
+          <AsideSection />
+          <MainSection>
+            <h3>Yritystapahtumia ja vastapainoa opiskelulle</h3>
+            <p>
+            Toimintaa ylläpitää ja järjestää jaokset ja toimikunnat.
+            </p>
+            <Accordion title="Rakenna kaikkea elektroniikkaan liittyvää">
+            Jotain elepajasta
+            </Accordion>
+            <Accordion title="Urheilua ja lajikokeiluja">
+            Jotain elepajasta
+            </Accordion>
+            <Accordion title="Kulttuuria kulinarismista teatteriin">
+            Jotain elepajasta
+            </Accordion>
+            <Accordion title="Yhteistyö yritysten kanssa">
+            Jotain elepajasta
+            </Accordion>
+            <Accordion title="Kansainvälisty ja luo suhteita">
+            Jotain elepajasta
+            </Accordion>
+          </MainSection>
+          <AsideSection />
+        </PageSection>
       </div>
     );
   }