Studies page placeholders

src/pages/StudiesPage/StudiesPage.tsx

@@ -1,6 +1,17 @@
 import React from "react";
 import { Helmet } from "react-helmet";
 import "./StudiesPage.scss";
+import PageSection from "../../components/PageSection/index";
+import HeroMainSection from "../../components/HeroMainSection/index";
+import HeroAsideSection from "../../components/HeroAsideSection/index";
+import HeroAsideItem from "../../components/HeroAsideItem/index";
+import AsideSection from "../../components/AsideSection/index";
+import MainSection from "../../components/MainSection/index";
+import { ColorEnum } from "../../components/ColorDiv/ColorDiv";
+import PageLink from "../../components/PageLink/index";
+import Ribbon from "../../components/Ribbon/index";
+import TextAnchor from "../../components/TextAnchor/index";
+import { TextSize } from "../../components/TextAnchor/TextAnchor";
 
 export interface StudiesPageProps {}
 export interface StudiesPageState {}
@@ -12,7 +23,72 @@ class StudiesPage extends React.Component<StudiesPageProps, StudiesPageState> {
         <Helmet>
           <link rel="canonical" href="https://sik.ayy.fi/opinnot" />
         </Helmet>
-        Studies Page
+        <PageSection backgroundColor={ColorEnum.DarkBlue} fullSize>
+          <HeroMainSection>
+            <h1>Suomen parasta elektroniikan opetusta</h1>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula aliquam enim, in lacinia nunc rutrum fringilla. Phasellus dui dolor, pellentesque vitae feugiat non, maximus in felis. Praesent feugiat vehicula mi, sed tincidunt enim venenatis quis. In euismod gravida ullamcorper. Phasellus a sagittis nisi, vitae blandit ipsum. Nunc rhoncus ultrices ante, id commodo dolor convallis id. Morbi ullamcorper vulputate risus id sodales.
+            </p>
+          </HeroMainSection>
+          <HeroAsideSection textColor={ColorEnum.DarkBlue} backgroundColor={ColorEnum.LightTurquoise}>
+            <HeroAsideItem
+              title="Opiskelemaan sähkölle"
+              linkHref="#abeille"
+              linkText="Lue lisää" />
+            <HeroAsideItem
+              title="Mikä ihmeen Diplomi-insinööri"
+              linkHref="#"
+              linkText="Ura esimerkkejä" />
+            <HeroAsideItem
+              title="Aloittelevalle opiskelijalle"
+              linkHref="/kilta/fuksi"
+              linkText="Tietopaketti fukseille" />
+          </HeroAsideSection>
+        </PageSection>
+        <PageSection backgroundColor={ColorEnum.White}>
+          <AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} />
+          <MainSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black}>
+            <h3 id="abeille">Abeille</h3>
+
+            <p><strong>TODO: Tähän nostoja yhteistyöstä!</strong> Yhteistyömahdollisuuksista voi tiedustella lisää killan yrityssuhdemestarilta.</p>
+
+            <h6>Lorem</h6>
+            <p>Yritysbrunssi on Sähköinsinöörikillan ja bioinformaatioteknologian ainejärjestö Inkubion syksyllä järjestämä yritystapahtuma. Tapahtumassa luodaan yrityksille mahdollisuus tavata tulevaisuuden ammattilaisia maukkaan brunssin lomassa.</p>
+
+            <h6>Ipsum</h6>
+            <p>Sähköinsinöörikillan ensimmäisen vuoden opiskelijat saavat opiskelijahaalarinsa heti syksyn ensimmäisenä päivänä. Yrityksien on mahdollista ostaa mainostilaa haalareista ja samalla lunastaa esiintymispaikka haalareiden luovutustilaisuuteen, &quot;Haalarigaalaan&quot;. Tilaisuus on erinomainen paikka jäädä heti uusien opiskelijoiden mieleen.</p>
+
+            <h6>Raketteja ja mikropiirejä</h6>
+            <p>Excursioiden tarkoituksena on tarjota opiskelijoille mahdollisuus tutustua yritysmaailmaan. Pidemmillä excursiolla hauskanpito ja teekkariperinteiden vaaliminen on tärkeä osa excursiota.</p>
+          </MainSection>
+          <AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black}>
+            <div>
+              <PageLink to="https://static.sika.sik.party/saannot/excursiosaannot.pdf" desc="Lue täältä&nbsp;›">
+                  Kurssitarjonta
+              </PageLink>
+              <PageLink to="/jaseneksi/" desc="ja tule mukaan toimintaamme&nbsp;›">
+                  Liity jäseneksi
+              </PageLink>
+            </div>
+          </AsideSection>
+        </PageSection>
+        <PageSection backgroundColor={ColorEnum.Orange1}>
+          <Ribbon>
+            <h3>Hae opiskelemaan!</h3>
+            <TextAnchor textColor={ColorEnum.White} hoverColor={ColorEnum.Blue} size={TextSize.SmallRibbon} to="https://aalto.fi">
+              <h4>Lue lisää Aallon sivuilta</h4>
+            </TextAnchor>
+          </Ribbon>
+        </PageSection>
+        <PageSection backgroundColor={ColorEnum.White}>
+          <AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} />
+          <MainSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black}>
+            <h3 id="yliopisto">Yliopiston järjestelmiä</h3>
+            <p>TODO: Tänne varmaan mielummin Akateemiset komiteat etc.</p>
+            <p>Valmistuvalle juttuja, oodi, tenttiarkisto etc.</p>
+          </MainSection>
+          <AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} />
+        </PageSection>
       </div>
     );
   }