Some Guild Page content

src/components/AsideSection/AsideSection.scss

@@ -0,0 +1,9 @@
+@import "../../assets/scss/globals";
+
+.aside-section {
+  display: flex;
+  flex: 1;
+  flex-flow: column;
+  justify-content: space-between;
+  padding: 4rem;
+}

src/components/AsideSection/AsideSection.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import "./AsideSection.scss";
+
+export interface AsideSectionProps {}
+export interface AsideSectionState {}
+
+class AsideSection extends React.Component<AsideSectionProps, AsideSectionState> {
+  constructor(props: AsideSectionProps) {
+    super(props);
+  }
+  render() {
+    const {children} = this.props;
+    return (
+      <div className="aside-section">
+        {children}
+      </div>
+    );
+  }
+}
+
+export default AsideSection;

src/components/AsideSection/index.ts

@@ -0,0 +1,2 @@
+import AsideSection from "./AsideSection";
+export default AsideSection;

src/components/InfoBox/InfoBox.scss

@@ -0,0 +1,6 @@
+@import "../../assets/scss/globals";
+
+.info-box {
+  justify-content: flex-end;
+  text-align: center;
+}

src/components/InfoBox/InfoBox.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import "./InfoBox.scss";
+
+export interface InfoBoxProps {}
+export interface InfoBoxState {}
+
+class InfoBox extends React.Component<InfoBoxProps, InfoBoxState> {
+  constructor(props: InfoBoxProps) {
+    super(props);
+  }
+  render() {
+    const {children} = this.props;
+    return (
+      <div className="info-box">
+        {children}
+      </div>
+    );
+  }
+}
+
+export default InfoBox;

src/components/InfoBox/index.ts

@@ -0,0 +1,2 @@
+import InfoBox from "./InfoBox";
+export default InfoBox;

src/components/MainSection/MainSection.scss

@@ -0,0 +1,8 @@
+@import "../../assets/scss/globals";
+
+.main-section {
+  display: flex;
+  flex: 2;
+  flex-flow: column;
+  padding: 3rem;
+}

src/components/MainSection/MainSection.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import "./MainSection.scss";
+
+export interface MainSectionProps {}
+export interface MainSectionState {}
+
+class MainSection extends React.Component<MainSectionProps, MainSectionState> {
+  constructor(props: MainSectionProps) {
+    super(props);
+  }
+  render() {
+    const {children} = this.props;
+    return (
+      <div className="main-section">
+        {children}
+      </div>
+    );
+  }
+}
+
+export default MainSection;

src/components/MainSection/index.ts

@@ -0,0 +1,2 @@
+import MainSection from "./MainSection";
+export default MainSection;

src/components/PageSection/PageSection.scss

@@ -32,6 +32,16 @@
     color: $white;
   }
 
+  &.light-turquoise {
+    background-color: $light-turquoise;
+    color: $dark-blue;
+  }
+
+  &.light-blue {
+    background-color: $light-blue;
+    color: $black;
+  }
+
   &.center {
     justify-content: center;
   }

src/components/PageSection/PageSection.tsx

@@ -5,6 +5,8 @@ export enum BackgroundColor {
   DarkBlue,
   White,
   Orange,
+  LightTurquoise,
+  LightBlue,
 }
 
 export interface PageSectionProps {
@@ -20,6 +22,8 @@ const colors = new Map<BackgroundColor, string>([
   [BackgroundColor.DarkBlue, "dark-blue"],
   [BackgroundColor.White, "white"],
   [BackgroundColor.Orange, "orange"],
+  [BackgroundColor.LightTurquoise, "light-turquoise"],
+  [BackgroundColor.LightBlue, "light-blue"],
 ]);
 
 class PageSection extends React.Component<PageSectionProps, PageSectionState> {

src/pages/GuildPage/GuildPage.tsx

@@ -2,12 +2,14 @@ import * as React from "react";
 import Helmet from "react-helmet";
 import "./GuildPage.scss";
 import PageSection from "../../components/PageSection";
+import MainSection from "../../components/MainSection";
+import AsideSection from "../../components/AsideSection";
+import PageLink from "../../components/PageLink";
 import HeroMainSection from "../../components/HeroMainSection";
 import HeroAsideSection from "../../components/HeroAsideSection";
 import HeroAsideItem from "../../components/HeroAsideItem";
-import Button from "../../components/Button";
-import { ButtonType } from "../../components/Button";
-
+import Ribbon from "../../components/Ribbon";
+import InfoBox from "../../components/InfoBox";
 import { BackgroundColor as PageSectionColor } from "../../components/PageSection/PageSection";
 import { BackgroundColor as HeroAsideColor } from "../../components/HeroAsideSection/HeroAsideSection";
 
@@ -61,6 +63,131 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
               </HeroAsideItem>
             </HeroAsideSection>
           </PageSection>
+          <PageSection backgroundColor={PageSectionColor.White}>
+            <AsideSection>
+            </AsideSection>
+            <MainSection>
+              <h2>Killan tehtävät ja tarina</h2>
+              Kilta tukee jäsentensä hyvinvointia ja tarjoaa vastapainoa opiskelulle. Kilta järjestää
+              esimerkiksi urheilutapahtumia, kulttuurielämyksiä ja näiden lisäksi sitsejä ja
+              saunailtoja. Valinnanvaraa on, joten tapahtumakalenterin aktiivisella seuraamisella
+              saattaa olla hyvinkin miellyttäviä seuraamuksia. Voit myös itse järjestää mieleisesi
+              tapahtuman killan tukemana, tai ehdottaa sitä killan toimitsijoille.
+
+              Yhteistyössä korkeakoulun kanssa, kilta kehittää opetusta. Kilta on mukana
+              kurssien kehittämisessä, valvoo kiltalaisten etua korkeakoulussa ja tuo korkeakoulun
+              henkilöstöä lähemmäs kiltalaisia.
+              Kilta avaa oven yritysmaailmaan järjestämällä yritysten kanssa excursioita,
+              saunailtoja ja yritystapahtumia. Lisäksi killan kautta kuulee ensimmäisten joukossa
+              uusista avoimista työpaikoista.
+              Killalla on Otaniemen mukavin kiltahuone, jossa voi käydä hengähtämässä
+              luentojen välillä, hakea apua vaikeisiin tehtäviin tai järjestää vaikka leffailtoja. Tämän
+              lisäksi killalla on myös haastavampaan elektroniikkaharrasteluun sopivat tilat.
+
+              <h3>Takana lähes satavuotinen historia</h3>
+
+              Vaikka kilta onkin ajan hermolla, on sillä takana lähes satavuotinen historia.
+              Sähköinsinööriklubin tuore puheenjohtaja lausahti klubin ensimmäisessä
+              varsinaisessa kokouksessa 16. helmikuuta 1921: “Koska klubi nyt ensi kerran
+              kokoontuu, niin pyydän lausua toivomuksena, että klubin jäsenillä aina tulisi
+              olemaan hauskaa, että toverielämä kukoistaisi ja että myös sähkötekniikkaa
+              klubissa harrastettaisiin.”.
+
+              Vaikka ajat ovat muuttuneet, klubi on muuttunut killaksi ja jäsenmäärä kasvanut
+              alkuajoista valtavasti, ohjaavat nämä kolme asiaa edelleen killan toimintaa. Vaikka
+              pitkästä historiasta kannattaa olla ylpeä, ei sitä tarvitse kokea taakkana. Uutta
+              historiaa luodaan koko ajan ja tässä on meillä kaikilla mahdollista olla mukana. Ole
+              aktiivinen, ota asioista selvää ja osallistu kaikkeen mahdolliseen. Tulet varmasti
+              yllättymään kaikesta siitä mitä täältä keskuudestamme löytyy.
+
+              <h3>Meitä teekkareita on todella moneen lähtöön</h3>
+
+              Minkäänlaista perus- tai ihanneteekkaria ei ole olemassa, vaan paras teekkariuden
+              määritelmä kuuluukin: “teekkarius on kaikkea sitä, mitä teekkarit tekevät”. Yksi asia
+              meitä kaikkia kuitenkin yhdistää. Opiskelemme jotain tekniikkaan liittyvää täällä
+              Aalto-yliopistossa.
+              Teekkariutta on vaikkapa toimiminen killoissa tai jossain AYY:n lukuisista
+              yhdistyksistä. Teekkariutta on yhtä lailla SIK:n tapahtumien järjestäminen tai niihin
+              osallistuminen kuin vaikkapa laulaminen Polyteknikkojen Kuorossa tai sukeltaminen
+              Polyteknikkojen sukelluskerho Kuplassa. Kaikille varmasti löytyy jotain itseä
+              kiinnostavaa.
+
+              Teekkareilla, varsinkin otaniemeläisillä, on pitkä ja vahva historia. Siihen kannattaa
+              tutustua, jotta saa jonkinlaisen kuvan siitä vahvasta teekkarihengestä, joka
+              meillä täällä opinahjossamme vallitsee ja on vallinnut koko sen historian ajan.
+              Teekkariuteen kuuluu olennaisena osana mukautuminen ajan vaatimuksiin. Jos asiat
+              tehtäisiin aina vanhaa toistaen, ei voitaisi enää edes puhua teekkariudesta.
+            </MainSection>
+            <AsideSection>
+              <div>
+                <PageLink to="/jasenedut/" desc="vuonna 2018&nbsp;›">
+                  Yliopiston jäsenedut
+                </PageLink>
+                <PageLink to="/jaseneksi/" desc="ja tule mukaan toimintaamme&nbsp;›">
+                  Liity jäseneksi
+                </PageLink>
+              </div>
+              <div>
+                <InfoBox>
+                  Herrasmies- tai herrasnaisuus kuuluu olennaisena osana teekkariuteen. Hyvät käytöstavat on syytä aina pitää mielessä, liikuttiin sitten puku päällä excuilla tai sitseillä tai haalarit päällä Tukholman illassa.
+                </InfoBox>
+              </div>
+            </AsideSection>
+          </PageSection>
+          <PageSection backgroundColor={PageSectionColor.LightBlue}>
+            <Ribbon>
+              <p>Killan hallinto koostuu XXX henkilöstä.</p>
+            </Ribbon>
+          </PageSection>
+          <PageSection backgroundColor={PageSectionColor.White}>
+            <AsideSection />
+            <MainSection>
+              <h2>Organisaatio</h2>
+
+              Sähköinsinöörikillassa toimeenpanovaltaa käyttää 3–13 kiltalaisen muodostama hallitus apunaan lukuisa määrä toimihenkilöitä. Hallituksen ja toimihenkilöt valitsee killan valtuusto, joka myös valvoo näiden toimintaa. Käytännössä valtuusto valitsee vaalikokouksessaan ensin uuden puheenjohtajan ja jää 1–2 viikon mittaiselle kokoustauolle. Tauon jälkeen puheenjohtaja esittelee valtuustolle ehdotuksensa hallitukseksi ja toimihenkilöiksi, ja valtuusto joko hyväksyy tai hylkää ehdotuksen noin tunnin kestävän kysely- ja esittelytuokion jälkeen. Hallituksen kuulumiset lorem.
+
+              <h3>Valtuuston toimintaa</h3>
+
+              Killan valtuusto valitaan marraskuussa pidettävillä vaaleilla yhdeksi vuodeksi kerrallaan. Vaaleissa ovat vaalikelpoisia ja äänioikeutettuja kaikki SIK:n varsinaiset jäsenet. Uuden valtuuston toiminta alkaa varsin pian valitsemisen jälkeen vaalikokouksessa, jossa todetaan uusi kokoonpano, valitaan puhemiehistö, killan hallituksen puheenjohtaja ja muut hallituksen jäsenet, toimihenkilöt, toimikuntien puheenjohtajat sekä tilintarkastajat. Toinen sääntömääräinen valtuuston kokous on helmikuinen vuosikokous, jossa käsitellään mm. edellisen vuoden toimintakertomus ja tilinpäätös, sekä kuluvan vuoden toimintasuunnitelma ja budjetti. Lisäksi valtuusto pitää tarpeelliseksi katsomanssa määrän kokouksia pitkin vuotta. Pöytäkirjat ja muut dokumentit lorem ipsum.
+
+              <h3>Hallituksen toimintaa</h3>
+              Jokaisella hallituksen jäsenellä on oma vastuualueensa, jota hän hoitaa yhdessä mahdollisen toimikuntansa kanssa. Puheenjohtajan tehtävä on pitää langat käsissään, ja olla perillä kaikesta, mitä killassa tapahtuu. Hallitus tekee päätökset ja sopii menettelytavat viikottaisessa kokouksessaan. Hallitus on vastuussa kaikesta killan näkyvästä ja näkymättömästä toiminnasta, ja se on myös oikea osoite, jos joku asia vaivaa mieltä, tai mielessä on parannusehdotus mihin tahansa asiaan.
+
+            </MainSection>
+            <AsideSection>
+              <div>
+                <PageLink to="/yhteystiedot/" desc="yhteystiedot&nbsp;›">
+                  Vuoden 2019 hallinto
+                </PageLink>
+                <PageLink to="/saannot/" desc="säännöt&nbsp;›">
+                  Dolor sit amet
+                </PageLink>
+              </div>
+            </AsideSection>
+          </PageSection>
+          <PageSection backgroundColor={PageSectionColor.DarkBlue}>
+            <Ribbon>
+              <p>Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, toimikunnat ja jaokset.</p>
+            </Ribbon>
+          </PageSection>
+          <PageSection backgroundColor={PageSectionColor.White}>
+          </PageSection>
+          <PageSection backgroundColor={PageSectionColor.Orange}>
+            <Ribbon>
+              <p>Jäsenedut vuonna 2019</p>
+            </Ribbon>
+          </PageSection>
+          <PageSection backgroundColor={PageSectionColor.White}>
+            <AsideSection />
+            <MainSection>
+
+            </MainSection>
+            <AsideSection>
+              <InfoBox>
+
+              </InfoBox>
+            </AsideSection>
+          </PageSection>
         </div>
       </div>
     );