Guild Page placeholder text

src/components/AsideSection/AsideSection.scss

@@ -6,4 +6,29 @@
   flex-flow: column;
   justify-content: space-between;
   padding: 4rem;
+
+  &.dark-blue {
+    background-color: $dark-blue;
+
+    h2 {
+      color: $light-blue;
+    }
+
+    p {
+      color: $white;
+    }
+  }
+
+  &.light-turquoise {
+    background-color: $light-turquoise;
+
+    h2,
+    p {
+      color: $dark-blue;
+    }
+  }
+
+  &.light-blue {
+    background-color: $light-blue;
+  }
 }

src/components/AsideSection/AsideSection.tsx

@@ -1,17 +1,34 @@
 import * as React from "react";
 import "./AsideSection.scss";
 
-export interface AsideSectionProps {}
+export enum BackgroundColor {
+  DarkBlue,
+  LightTurquoise,
+  LightBlue,
+}
+
+export interface AsideSectionProps {
+  backgroundColor: BackgroundColor;
+}
 export interface AsideSectionState {}
 
+const colors = new Map<BackgroundColor, string>([
+  [BackgroundColor.DarkBlue, "dark-blue"],
+  [BackgroundColor.LightTurquoise, "light-turquoise"],
+  [BackgroundColor.LightBlue, "light-blue"],
+]);
+
 class AsideSection extends React.Component<AsideSectionProps, AsideSectionState> {
   constructor(props: AsideSectionProps) {
     super(props);
   }
   render() {
     const {children} = this.props;
+    const { backgroundColor } = this.props;
+    const bgClass = colors.get(backgroundColor);
+    const className = `aside-section ${bgClass}`;
     return (
-      <div className="aside-section">
+      <div className={className}>
         {children}
       </div>
     );

src/components/CustomLink/CustomLink.scss

@@ -0,0 +1,5 @@
+@import "../../assets/scss/globals";
+
+.custom-link {
+  text-decoration: underline;
+}

src/components/CustomLink/CustomLink.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { Link } from "react-router-dom";
+import "./CustomLink.scss";
+
+export interface CustomLinkProps {
+  linkText: string;
+  linkHref: string;
+}
+export interface CustomLinkState {}
+
+class CustomLink extends React.Component<CustomLinkProps, CustomLinkState> {
+  render() {
+    const { linkText, linkHref } = this.props;
+    return (
+      <Link className="custom-link" to={linkHref}>{linkText}</Link>
+    );
+  }
+}
+
+export default CustomLink;

src/components/CustomLink/index.ts

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

src/components/HeroAsideSection/HeroAsideSection.scss

@@ -34,4 +34,8 @@
       color: $dark-blue;
     }
   }
+
+  &.light-blue {
+    background-color: $light-blue;
+  }
 }

src/components/HeroAsideSection/HeroAsideSection.tsx

@@ -1,19 +1,20 @@
 import * as React from "react";
 import "./HeroAsideSection.scss";
-import HeroAsideItem from "../HeroAsideItem";
 
 export enum BackgroundColor {
   DarkBlue,
   LightTurquoise,
+  LightBlue,
 }
 export interface HeroAsideSectionProps {
-  backgroundColor: BackgroundColor;
+  backgroundColor?: BackgroundColor;
 }
 export interface HeroAsideSectionState {}
 
 const colors = new Map<BackgroundColor, string>([
   [BackgroundColor.DarkBlue, "dark-blue"],
   [BackgroundColor.LightTurquoise, "light-turquoise"],
+  [BackgroundColor.LightBlue, "light-blue"],
 ]);
 
 class HeroAsideSection extends React.Component<HeroAsideSectionProps, HeroAsideSectionState> {

src/pages/GuildPage/GuildPage.tsx

@@ -12,6 +12,9 @@ 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";
+import { BackgroundColor } from "../../components/AsideSection/AsideSection";
+import {Link} from "react-router";
+import CustomLink from "../../components/CustomLink";
 
 export interface GuildPageProps {}
 export interface GuildPageState {}
@@ -170,7 +173,52 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
               <p>Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, toimikunnat ja jaokset.</p>
             </Ribbon>
           </PageSection>
+          <div style={{display: "flex"}}>
+            <AsideSection backgroundColor={BackgroundColor.LightTurquoise}>
+              <h3>Miksi alkaa kilta-aktiiviksi?</h3>
+              <p>
+                Näitä töitä tehdessä saa väkisinkin paljon uusia kavereita ja oppii monia palkallisessa työelämässä tarpeellisia taitoja. Eikä laajasta tuttavapiiristä ja monista kontakteista varmasti haittaa ole tulevaa työuraakaan ajatellen. Rahallista tai materiaalista hyötyä kiltatoiminnasta ei saa, eikä kukaan killan toimintaan mukaan tuleva sitä pyrikään tavoittelemaan. Mikä tärkeintä, kiltatoiminta on kivaa!
+              </p>
+              <p>
+                » Uusia ystäviä, samanhenkistä seuraa
+              </p>
+              <p>
+                » Loistava mahdollisuus kokeilla omia kykyjään
+              </p>
+              <p>
+                » Voit kokeilla ja oppia jotain sellaista, mitä et ikinä aikaisemmin ole tehnyt
+              </p>
+            </AsideSection>
+            <AsideSection backgroundColor={BackgroundColor.LightBlue}>
+              <h3>Runsaasti erilaisia tehtäviä</h3>
+              <p>
+                Killassa on todella monenlaisia tehtäviä. Olitpa koodaaja, urheilija tai ammattimainen juhlija, killasta löytyy tekemistä juuri sinulle. Toimikunnissa sitoudut toimintaan vuodeksi kerrallaan. Jaostoiminta mahdollistaa kiltatoiminnan kokeilun pienemmässä mittakaavassa. Tehtäväkuvaukset lorem ipsum dolor sit amet alla. Jos ei löydy sopivaa lorem ipsum dolor sit amet, voit perustaa myös oman.
+              </p>
+              <p>
+                » Haluatko <CustomLink linkHref={""} linkText={"valtuustoon"}/>, <CustomLink linkHref={""} linkText={"hallitukseen"}/> tai <CustomLink linkHref={""} linkText={"toimariksi"}/>?
+              </p>
+              <p>
+                » <CustomLink linkHref={""} linkText={"Toimihenkilönä"}/> pääset edistämään opintoja
+              </p>
+              <p>
+                » Lorem ipsum
+              </p>
+            </AsideSection>
+          </div>
+
           <PageSection backgroundColor={PageSectionColor.White}>
+            <AsideSection>
+              <h2>Sähkötekniikan korkeakoulun toimikunnat</h2>
+              <p>
+                Ylioppilaskunnalla on edustus suuressa osassa Aalto-yliopiston tiedekuntia. Elektroniikan, tietoliikenteen ja automaation tiedekunnan toimikuntiin eli hallopedeihin opiskelijavalinna EST- ja TLT-tutkinto-ohjelmien osalta tehdään osin ylioppilaskunnan edustajistossa Sähköinsinöörikillan esityksestä ja osin Sähköinsinöörikillassa.
+              </p>
+            </AsideSection>
+            <AsideSection>
+              <h2>Jaokset—kokeile kiltatoimintaa vapaammin</h2>
+              <p>
+                Kiinnostaako kiltatoiminta, mutta vuoden kestävä sitoutuminen pelottaa? Jaokset mahdollistavat kiltatoiminnan kokeilemisen pienemmässä mittakaavassa. Jaokset toimivat varsin vapaamuotoisesti, mutta siltikin hyvässä hengessä. Mikäli Sinulla olisi hyvä idea, mitä kilta voisi jaosmaisesti toteuttaa, voit myös perustaa oman jaoksen.
+              </p>
+            </AsideSection>
           </PageSection>
           <PageSection backgroundColor={PageSectionColor.Orange}>
             <Ribbon>
@@ -180,11 +228,17 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
           <PageSection backgroundColor={PageSectionColor.White}>
             <AsideSection />
             <MainSection>
-
+              <h2>Aalto-yliopiston tarjoamat monenlaiset edut</h2>
+              <p>
+                Sen lisäksi että kilta tarjoaa jäsenilleen palveluja ja aktiviteetteja, Aalto-yliopisto tarjoaa lorem ipsum dolor sit amet.
+              </p>
+              <p>
+              » <CustomLink linkHref={"https://download.aalto.fi"} linkText={"Download.aalto.fi"}/> Täältä voit ladata yliopiston tarjoamia ohjelmia ilmaiseksi.
+              </p>
             </MainSection>
             <AsideSection>
               <InfoBox>
-
+                <CustomLink linkHref={""} linkText={"Jäseneksi liittyminen"}/> on helppoa, hauskaa ja hyödyllistä 8 € jäsenmaksulla pääset nauttimaan kaikista jäseneduista.
               </InfoBox>
             </AsideSection>
           </PageSection>