Use new section components and Hero

src/components/Hero/HeroAside.tsx

@@ -74,7 +74,7 @@ const Aside = styled.aside<HeroAsideProps>`
 `;
 
 const HeroAside: React.FC<HeroAsideProps> = ({ bgColor = "inherit", children}) => (
-  <Aside bgColor={bgColor}>
+  <Aside bgColor={colors[bgColor]}>
     {children}
   </Aside>
 )

src/components/Hero/HeroAsideItem.tsx

@@ -1,56 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import Anchor from "../Anchor";
-import { colors } from "@theme/colors";
-
-interface HeroAsideItemProps {
-  title: string;
-  linkText: string;
-  linkHref: string;
-}
-
-const Section = styled.div`
-  max-width: 300px;
-  line-height: 16px;
-  margin-bottom: 1rem;
-
-  @media screen and (max-width: 600px - 1px) {
-    p,
-    a {
-      font-size: 16px !important;
-      line-height: 20px;
-    }
-  }
-
-  h2 {
-    text-transform: uppercase;
-    letter-spacing: 3px;
-    line-height: 20px;
-  }
-
-  p {
-    font-size: 14px;
-    line-height: 20px;
-  }
-
-  h6 {
-    color: ${colors.blue1};
-    font-weight: 600;
-  }
-
-  h6:hover {
-    color: ${colors.white};
-  }
-`;
-
-const HeroAsideItem: React.FC<HeroAsideItemProps> = ({ title, linkText, linkHref, children }) => (
-  <Section>
-    <h2>{title}</h2>
-    <p>{children}</p>
-    <Anchor to={linkHref}>
-      <h6>{linkText} ›</h6>
-    </Anchor>
-  </Section>
-)
-
-export default HeroAsideItem;

src/components/Hero/HeroAsideSection.tsx

@@ -1,53 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv";
-import { colors } from "@theme/colors";
-
-const Section = styled(ColorDiv)`
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: flex-start;
-  justify-content: center;
-  flex: 4;
-
-  @media screen and (max-width: 800px - 1px) {
-    align-items: center;
-  }
-
-  text-align: left;
-  padding: 3rem 1rem 2rem;
-
-  &.dark-blue {
-    background-color: ${colors.darkBlue};
-
-    h2 {
-      color: ${colors.lightBlue};
-    }
-
-    p {
-      font-weight: 100;
-      color: ${colors.white};
-    }
-  }
-
-  &.light-turquoise {
-    background-color: ${colors.lightTurquoise};
-
-    h2,
-    p {
-      color: ${colors.darkBlue};
-    }
-  }
-
-  &.light-blue {
-    background-color: ${colors.lightBlue};
-  }
-`;
-
-const HeroAsideSection: React.FC<ColorDivProps> = (props) => {
-  return (
-    <Section {...props} />
-  );
-}
-
-export default HeroAsideSection;

src/components/Hero/HeroMainSection.tsx

@@ -1,51 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-const Container = styled.div`
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: center;
-  margin-top: 15vh;
-  flex: 6;
-  text-align: center;
-  font-weight: 100;
-  line-height: 24px;
-
-  & > div {
-    padding: 2rem 1rem 2rem;
-  }
-
-  h1 {
-    max-width: 600px;
-    line-height: 40px;
-
-    @media screen and (max-width: 500px) {
-      font-size: 2rem;
-    }
-  }
-
-  p {
-    max-width: 400px;
-    font-weight: 100;
-  }
-
-  .hero-button-container {
-    display: flex;
-    flex-direction: column;
-    min-width: 20%;
-
-    &-row {
-      flex-direction: row;
-    }
-  }
-`;
-
-const HeroMainSection: React.FC = ({children}) => {
-  return (
-    <Container>
-      {children}
-    </Container>
-  );
-}
-
-export default HeroMainSection;

src/components/Hero/HeroPrimarySection.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 
 interface HeroPrimarySectionProps {
   header: string;
-  text: string;
+  text?: string;
 }
 
 const Section = styled.section`
@@ -29,7 +29,9 @@ const Section = styled.section`
 const HeroPrimarySection: React.FC<HeroPrimarySectionProps> = ({ header, text, children }) => (
   <Section>
     <h1>{header}</h1>
-    <p>{text}</p>
+    {text && (
+      <p>{text}</p>
+    )}
     {children}
   </Section>
 )

src/components/MainSection.tsx

@@ -1,30 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import ColorDiv, { ColorDivProps } from "./ColorDiv/ColorDiv";
-import { colors } from "@theme/colors";
-
-const Section = styled(ColorDiv)`
-  display: flex;
-  flex: 2;
-  flex-flow: column;
-  padding: 0 3rem;
-
-  & > h3 {
-    margin: auto;
-  }
-
-  & > h6 {
-    color: ${colors.orange1};
-  }
-
-  & > p {
-    margin-block-start: 0.5rem;
-    margin-block-end: 1rem;
-  }
-`;
-
-const MainSection: React.FC<ColorDivProps> = (props) => (
-  <Section {...props} />
-);
-
-export default MainSection;

src/views/ActualPage/ActualPageHero.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Hero, HeroPrimarySection, HeroSecondarySection, HeroSecondarySectionItem, HeroAside, HeroAsideItem, HeroPrimaryButtons } from "@components/NewHero";
+import { Hero, HeroPrimarySection, HeroSecondarySection, HeroSecondarySectionItem, HeroAside, HeroAsideItem, HeroPrimaryButtons } from "@components/Hero";
 import Anchor from "@components/Anchor";
 
 const ActualPageHero: React.FC = () => (

src/views/CorporatePage/CorporatePage.scss

@@ -1,5 +0,0 @@
-.corporate-page {
-  display: flex;
-  flex-flow: column wrap;
-  justify-content: flex-start;
-}

src/views/CorporatePage/CorporatePageHero.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Hero, HeroPrimarySection, HeroAside, HeroAsideItem } from "@components/Hero";
+
+const CorporatePageHero: React.FC = () => (
+  <Hero>
+    <div>
+      <HeroPrimarySection
+        header="Tee yhteistyötä tulevaisuuden huippuosaajien kanssa!"
+        text="Aalto-yliopiston Sähköinsinöörikilta on loistava ja hyvinvoiva opiskelijayhteisö, joka vie sähkötekniikan avulla maailmaa eteenpäin. Kilta pitää jäsenistään huolta ja työelämän taitojen oppiminen onkin yksi killan tärkeistä arvoista. Siksi myös yritysyhteistyö on killalle hyvin arvokasta. Kilta järjestää paljon yhteistyötapahtumia, joissa kiltalaiset pääsevät tutustumaan yhteistyöyrityksiin ja killan tärkeänä tehtävänä on jakaa esimerkiksi työpaikkailmoituksia jäsenistölle."
+      />
+    </div>
+
+    <HeroAside bgColor="lightTurquoise">
+      <HeroAsideItem
+        header="Mainos sivulle, opiskelijoita vierailulle?"
+        link="#yhteistyomahdollisuudet"
+        linkText="Yhteistyömahdollisuudet" />
+      <HeroAsideItem
+        header="Kilta tukee työllistymistä"
+        link="#tyopaikat"
+        linkText="Työpaikkailmoitukset" />
+      <HeroAsideItem
+        header="LinkedIn"
+        link="https://linkedin.com/groups/8103057"
+        linkText="Killan LinkedIn ryhmä" />
+    </HeroAside>
+  </Hero>
+);
+
+export default CorporatePageHero;

src/views/CorporatePage/CorporatePageView.tsx

@@ -1,49 +1,30 @@
 import React from "react";
-import "./CorporatePage.scss";
-import PageSection from "@components/PageSection";
-import HeroMainSection from "@components/Hero/HeroMainSection";
-import HeroAsideSection from "@components/Hero/HeroAsideSection";
-import HeroAsideItem from "@components/Hero/HeroAsideItem";
-import AsideSection from "@components/AsideSection";
-import MainSection from "@components/MainSection";
+import CorporatePageHero from "./CorporatePageHero";
 import PageLink from "@components/PageLink";
-import { SossoSection } from "@components/index";
+import { SossoSection, TextSection } from "@components/index";
 import Anchor from "@components/Anchor";
 
-
 const CorporatePageView: React.FC = () => (
-  <div className="corporate-page">
-    <PageSection backgroundColor="dark-blue" fullSize>
-      <HeroMainSection>
-        <h1>Tee yhteistyötä tulevaisuuden huippuosaajien kanssa!</h1>
-        <p>
-          Aalto-yliopiston Sähköinsinöörikilta on loistava ja hyvinvoiva opiskelijayhteisö, joka vie sähkötekniikan avulla maailmaa eteenpäin. Kilta pitää jäsenistään huolta ja työelämän taitojen oppiminen onkin yksi killan tärkeistä arvoista. Siksi myös yritysyhteistyö on killalle hyvin arvokasta. Kilta järjestää paljon yhteistyötapahtumia, joissa kiltalaiset pääsevät tutustumaan yhteistyöyrityksiin ja killan tärkeänä tehtävänä on jakaa esimerkiksi työpaikkailmoituksia jäsenistölle.
-        </p>
-      </HeroMainSection>
-      <HeroAsideSection textColor="dark-blue" backgroundColor="light-turquoise">
-        <HeroAsideItem
-          title="Mainos sivulle, opiskelijoita vierailulle?"
-          linkHref="#yhteistyomahdollisuudet"
-          linkText="Yhteistyömahdollisuudet" />
-        <HeroAsideItem
-          title="Kilta tukee työllistymistä"
-          linkHref="#tyopaikat"
-          linkText="Työpaikkailmoitukset" />
-        <HeroAsideItem
-          title="LinkedIn"
-          linkHref="https://linkedin.com/groups/8103057"
-          linkText="Killan LinkedIn ryhmä" />
-      </HeroAsideSection>
-    </PageSection>
-    <PageSection backgroundColor="white1">
-      <AsideSection backgroundColor="white1" textColor="black1" />
-      <MainSection backgroundColor="white1" textColor="black1">
-        <h3>Lyhyesti killasta ja sen toiminnasta</h3>
-
-        <p><strong>Aalto-yliopiston Sähköinsinöörikillan</strong> jäsenistöstä valmistuvat maan parhaimmat matematiikkaa ja fysiikkaa soveltavat huippuosaajat. Killan tehtävänä on pitää jäsenistään huolta ja edistää aktiivisesti jäsenten ja toimijoiden jaksamista. Killassa opitaan myös tärkeitä työelämätaitoja ammattimaisen killan johtamisen kautta.</p>
-
-        <h3 id="yhteistyomahdollisuudet">Yhteistyömahdollisuudet</h3>
+  <>
+    <CorporatePageHero />
+    <TextSection>
+      <h3>Lyhyesti killasta ja sen toiminnasta</h3>
+      <p><strong>Aalto-yliopiston Sähköinsinöörikillan</strong> jäsenistöstä valmistuvat maan parhaimmat matematiikkaa ja fysiikkaa soveltavat huippuosaajat. Killan tehtävänä on pitää jäsenistään huolta ja edistää aktiivisesti jäsenten ja toimijoiden jaksamista. Killassa opitaan myös tärkeitä työelämätaitoja ammattimaisen killan johtamisen kautta.</p>
+      <aside>
+        <div>
+          <PageLink to="https:https://static.sika.sik.party/saannot/excursiosaannot.pdf" desc="Lue täältä›">
+                  Excursiosäännöt
+          </PageLink>
+          <PageLink to="/jaseneksi/" desc="ja tule mukaan toimintaamme&nbsp;›">
+                  Liity jäseneksi
+          </PageLink>
+        </div>
+      </aside>
+    </TextSection>
 
+    <TextSection>
+      <h3 id="yhteistyomahdollisuudet">Yhteistyömahdollisuudet</h3>
+      <div>
         <p>Yhteistyömahdollisuuksista voi tiedustella lisää killan yrityssuhdemestarilta.</p>
 
         <h6>Yritysbrunssi</h6>
@@ -63,40 +44,34 @@ const CorporatePageView: React.FC = () => (
 
         <h6>Sössö</h6>
         <p>Sössö on Sähköinsinöörikillan hauska ja rakas opiskelijalehti. Sössö on kerännyt suosiota ja kartuttanut lukijamäärää jo vuodesta 1969 asti. Sössö ilmestyy perinteisesti paperisena, mutta myös Netti-Sössössä julkaistaan jatkuvasti uusia artikkeleja. Sössö tavoittaa noin tuhat elektroniikan, sähkötekniikan ja tietoliikennetekniikan opiskelijaa sekä koko tiedekunnan henkilökunnan. Lisäksi lehti lähetetään muille opiskelijajärjestöille. Yritysten on mahdollista saada mainostilaa Sössön sivuilta.</p>
+      </div>
 
-        <h3>Olethan yhteydessä!</h3>
+    </TextSection>
+
+    <TextSection>
+      <h3>Olethan yhteydessä!</h3>
+      <div>
         <p>Yllämainituista mahdollisuuksista, sekä muista ideoista kiinnostuneena, voit olla yhteydessä Yrityssuhdemestariimme Jarnoon.</p>
         <h6>Yrityssuhdemestari</h6>
         <p>Jarno Mustonen <br/>050 123 4567<br/> Jarno.mustonen (ät) aalto.fi</p>
-      </MainSection>
-      <AsideSection backgroundColor="white1" textColor="black1">
-        <div>
-          <PageLink to="https:https://static.sika.sik.party/saannot/excursiosaannot.pdf" desc="Lue täältä›">
-                  Excursiosäännöt
-          </PageLink>
-          <PageLink to="/jaseneksi/" desc="ja tule mukaan toimintaamme&nbsp;›">
-                  Liity jäseneksi
-          </PageLink>
-        </div>
-      </AsideSection>
-    </PageSection>
+      </div>
+    </TextSection>
+
     <SossoSection>
       <h3>Mainos Sössöön?</h3>
       <Anchor to="https://sosso.fi">
         <h4>Killan lehden mediakortin löydät täältä›</h4>
       </Anchor>
     </SossoSection>
-    <PageSection backgroundColor="white1">
-      <AsideSection backgroundColor="white1" textColor="black1" />
-      <MainSection backgroundColor="white1" textColor="black1">
-        <h3 id="tyopaikat">Työpaikkailmoitukset</h3>
-        <p>TODO: Miten listataan yritykset?</p>
-        {/* TODO: Fix links */}
+
+    <TextSection>
+      <h3 id="tyopaikat">Työpaikkailmoitukset</h3>
+      <div>
         <p>Voit saada yrityksesi työpaikkailmoituksen listalle lähettämällä sen osoitteeseen <a style={{color: "black"}} href="mailto:sik-yritys@list.ayy.fi">sik-yritys@list.ayy.fi</a> </p>
-      </MainSection>
-      <AsideSection backgroundColor="white1" textColor="black1" />
-    </PageSection>
-  </div>
+      </div>
+
+    </TextSection>
+  </>
 );
 
 export default CorporatePageView;

src/views/EventPage/EventPageView.tsx

@@ -5,14 +5,12 @@ import { colors } from "@theme/colors";
 import { Event } from "@models/Event";
 import Button from "@components/Button";
 import Anchor from "@components/Anchor";
-import PageSection from "@components/PageSection";
-import MainSection from "@components/MainSection";
 
 interface EventPageViewProps {
   event?: Event;
 }
 
-const StyledSection = styled(MainSection)`
+const StyledSection = styled.section`
   margin: auto;
   max-width: 1000px;
   align-items: center;
@@ -76,33 +74,31 @@ const Content = styled.div`
 const EventPageView: React.FC<EventPageViewProps> = ({ event }) => {
   if (!event) return <div>Loading</div>
   return (
-    <PageSection backgroundColor="white1" textColor="black1" >
-      <StyledSection>
-        <h1>
-          {event.title_fi}
-        </h1>
-        <p>
-          {event.description_fi}
-        </p>
-        <div>
-          <img  src={event.image || event.tags[0].icon} alt={event.title_fi} />
-        </div>
-        <Content>
-          <ReactMarkdown source={event.content_fi} escapeHtml={false} />
-        </Content>
-        {/* We may have multiple signup forms. Generate own Button for each one */}
-        <SignupButtons>
-          {event.signupForm.map(sf => (
-            <Anchor key={sf.id} to={`/signup/${sf.id}`}>
-              <Button type="filled" onClick={() => {}}>
-                {sf.title_fi}
-              </Button>
-            </Anchor>
-          )
-          )}
-        </SignupButtons>
-      </StyledSection>
-    </PageSection>
+    <StyledSection>
+      <h1>
+        {event.title_fi}
+      </h1>
+      <p>
+        {event.description_fi}
+      </p>
+      <div>
+        <img  src={event.image || event.tags[0].icon} alt={event.title_fi} />
+      </div>
+      <Content>
+        <ReactMarkdown source={event.content_fi} escapeHtml={false} />
+      </Content>
+      {/* We may have multiple signup forms. Generate own Button for each one */}
+      <SignupButtons>
+        {event.signupForm.map(sf => (
+          <Anchor key={sf.id} to={`/signup/${sf.id}`}>
+            <Button type="filled" onClick={() => {}}>
+              {sf.title_fi}
+            </Button>
+          </Anchor>
+        )
+        )}
+      </SignupButtons>
+    </StyledSection>
   );
 }
 export default EventPageView;

src/views/FreshmenPage/FreshmenPage.scss

@@ -1,5 +0,0 @@
-.freshmen-page {
-  display: flex;
-  flex-flow: column wrap;
-  justify-content: flex-start;
-}

src/views/FreshmenPage/FreshmenPageHero.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Hero, HeroPrimarySection, HeroAside, HeroAsideItem } from "@components/Hero";
+
+const FreshmenPageHero: React.FC = () => (
+  <Hero>
+    <div>
+      <HeroPrimarySection
+        header="Tervetuloa opiskelemaan Otaniemeen!"
+        text="Tämä on fuksien oma etusivu ja olemmekin keränneet tänne kaikki tärkeimmät tiedot, joita fuksivuotenasi tarvitset. Tietysti kannattaa katsoa myös yleisiä sivuja, sillä tänne ei mahdu kaikki, mitä killassa tapahtuu."
+      />
+    </div>
+
+    <HeroAside bgColor="lightTurquoise">
+      <HeroAsideItem
+        header="Seuraa killan tiedotusta"
+        link="https://t.me/joinchat/GsmJjhst3-BYIHQSefVhHg"
+        linkText="Liity killan Telegram-ryhmiin" />
+      <HeroAsideItem
+        header="Kohti lakkia"
+        link="fOpas_20.pdf"
+        linkText="Lue fuksiopas" />
+      <HeroAsideItem
+        header="Kaikki kunnossa opiskelua varten?"
+        link="https://into.aalto.fi/pages/viewpage.action?pageId=1183171"
+        linkText="Lue korkeakoulun tietopaketti" />
+      <HeroAsideItem
+        header="ISO-ryhmät ja ISO-henkilöt?"
+        link="#isot"
+        linkText="Tsekkaa ISO-henkilöiden tiedot" />
+    </HeroAside>
+  </Hero>
+);
+
+export default FreshmenPageHero;

src/views/FreshmenPage/FreshmenPageView.tsx

@@ -1,60 +1,23 @@
 import React from "react";
 import styled from "styled-components";
-import "./FreshmenPage.scss";
-import PageSection from "@components/PageSection";
-import HeroMainSection from "@components/Hero/HeroMainSection";
-import HeroAsideSection from "@components/Hero/HeroAsideSection";
-import HeroAsideItem from "@components/Hero/HeroAsideItem";
-import AsideSection from "@components/AsideSection";
-import MainSection from "@components/MainSection";
+import FreshmenPageHero from "./FreshmenPageHero";
 import PageLink from "@components/PageLink";
-import TextAnchor from "@components/TextAnchor";
 import InfoBox from "@components/InfoBox";
 import Anchor from "@components/Anchor";
-import { SossoSection } from "@components/index";
+import { SossoSection, TextSection } from "@components/index";
 
 const KippariImage = styled.img`
-max-width:100%;
-
+  max-width:100%;
 `
 
 const FreshmenPageView: React.FC = () => (
-  <div className="freshmen-page">
-    <PageSection backgroundColor="dark-blue" fullSize>
-      <HeroMainSection>
-        <h1>Tervetuloa opiskelemaan Otaniemeen!</h1>
-        <p>
-            Me olemme Emmaleena ja Jonna, sinun Fuksikapteenisi. Päätehtävämme on huolehtia fuksivuodestasi Aalto-yliopiston Sähköinsinöörikillassa.
-        </p>
-        <p>Tämä on fuksien oma etusivu ja olemmekin keränneet tänne kaikki tärkeimmät tiedot, joita fuksivuotenasi tarvitset. Tietysti kannattaa katsoa myös yleisiä sivuja, sillä tänne ei mahdu kaikki, mitä killassa tapahtuu.
-        </p>
-      </HeroMainSection>
-      <HeroAsideSection textColor="dark-blue" backgroundColor="light-turquoise">
-        <HeroAsideItem
-          title="Seuraa killan tiedotusta"
-          linkHref="https://t.me/joinchat/GsmJjhst3-BYIHQSefVhHg"
-          linkText="Liity killan Telegram-ryhmiin" />
-        <HeroAsideItem
-          title="Kohti lakkia"
-          linkHref="fOpas_20.pdf"
-          linkText="Lue fuksiopas" />
-        <HeroAsideItem
-          title="Kaikki kunnossa opiskelua varten?"
-          linkHref="https://into.aalto.fi/pages/viewpage.action?pageId=1183171"
-          linkText="Lue korkeakoulun tietopaketti" />
-        <HeroAsideItem
-          title="ISO-ryhmät ja ISO-henkilöt?"
-          linkHref="#isot"
-          linkText="Tsekkaa ISO-henkilöiden tiedot" />
-      </HeroAsideSection>
-    </PageSection>
-    <PageSection backgroundColor="white1">
-      <AsideSection backgroundColor="white1" textColor="black1" />
-      <MainSection backgroundColor="white1" textColor="black1">
-        <h3 id="abeille">Onnittelut hyvästä opiskeluvalinnasta</h3>
-
+  <>
+    <FreshmenPageHero />
+    <TextSection>
+      <h3 id="abeille">Onnittelut hyvästä opiskeluvalinnasta</h3>
+      <div>
         <p>Olet tehnyt upean valinnan ottamalla askeleen matkalla, jossa sinusta ensin kehkeytyy teekkari ja myöhemmin diplomi-insinööri. Sinusta on juuri tullut tekniikan ylioppilas ja fuksi. Hieno saavutus, jota tietysti on syytä juhlia, ja tähän juhlaan paras sijainti on ehdottomasti Otaniemi. Tervetuloa!</p>
-        <p>Ensi askeleina suosittelen, että liityt teille fukseille tehdyille Telegram-kanaville. Tästä pääset tiedotuskanavalle ja <TextAnchor to="https://t.me/joinchat/GsmJjhst3-BYIHQSefVhHg" textColor="blue1" hoverColor="dark-blue">tästä</TextAnchor> tutustumaan fuksikavereihin ja ISOihisi.</p>
+        <p>Ensi askeleina suosittelen, että liityt teille fukseille tehdyille Telegram-kanaville. Tästä pääset tiedotuskanavalle ja <Anchor to="https://t.me/joinchat/GsmJjhst3-BYIHQSefVhHg">tästä</Anchor> tutustumaan fuksikavereihin ja ISOihisi.</p>
 
         <h6>Matka nimeltä Teekkarius</h6>
         <p>Teekkarin matka on jokaiselle oman näköisensä. Kilta, ylioppilaskunta ja Otaniemen muut järjestöt tarjoavat varmasti jokaiselle omanlaista tekemistä ja harrastusta. Olet nyt osa Aalto-yliopiston Sähköinsinöörikiltaa ja me tulemme tukemaan sinua teekkariuden matkalla, jotta löydät juuri sinulle sopivat paikat, joissa vaikuttaa ja harrastaa. Jotta tämä onnistuisi, olemme esimerkiksi sijoittaneet sinut fuksiryhmään, johon tulet Orientaatioviikolla tutustumaan ja josta saat oman tukiryhmän uusiin seikkailuihin. Fuksiryhmääsi kuuluu myös muutama ISO. Heistä löydät lisää tietoa alempaa.</p>
@@ -71,35 +34,29 @@ const FreshmenPageView: React.FC = () => (
 
         <h6>Jonna</h6>
         <p>0504327695 <br/>jonna.tammikivi (ät) aalto.fi</p>
-
-      </MainSection>
-      <AsideSection backgroundColor="white1" textColor="black1">
+      </div>
+      <aside>
         <div>
           <PageLink to="mailto:sik-ftmk@list.ayy.fi" desc="sik-ftmk@list.ayy.fi">
-                  Fuksikipparit tavoitat
+            Fuksikipparit tavoitat
           </PageLink>
           <PageLink to="/jaseneksi/" desc="ja tule mukaan toimintaamme&nbsp;›">
-                  Liity jäseneksi
+            Liity jäseneksi
           </PageLink>
           <PageLink to="fuksipisteohje.pdf/" desc="Katso fuksipisteitä&nbsp;›">
-                  Fuksipisteohje
+            Fuksipisteohje
           </PageLink>
         </div>
         <KippariImage src="https://static.sika.sik.party/uus_webi/fuksikipparit.jpg"/>
         <div>
           <InfoBox>
             <h6>Telegram?</h6>
-            <p>
-                Telegram on pikaviestinpalvelu, jota käytetään otaniemessä paljon. Hieman samanlainen kuin Whatsapp, mutta ominaisuuksiltaan paremmaksi todettu. Lisätietoja: https://telegram.org/faq
-            </p>
-            <p>
-                  SIK:n fukseilla on oma Telegram-ryhmä, jonne pääset liitymään tästä.
-            </p>
-
+            <p>Telegram on pikaviestinpalvelu, jota käytetään otaniemessä paljon. Hieman samanlainen kuin Whatsapp, mutta ominaisuuksiltaan paremmaksi todettu. Lisätietoja: https://telegram.org/faq</p>
+            <p>SIK:n fukseilla on oma Telegram-ryhmä, jonne pääset liitymään tästä.</p>
           </InfoBox>
         </div>
-      </AsideSection>
-    </PageSection>
+      </aside>
+    </TextSection>
     <SossoSection>
       <h3>Killassa tapahtuu kaikenlaista!</h3>
       <Anchor to="/kilta/toiminta">
@@ -107,22 +64,16 @@ const FreshmenPageView: React.FC = () => (
       </Anchor>
     </SossoSection>
 
-    <PageSection backgroundColor="white1">
-      <AsideSection backgroundColor="white1" textColor="black1" />
-      <MainSection backgroundColor="white1" textColor="black1">
-        <h3 id="isot">Isoryhmät</h3>
+    <TextSection>
+      <h3 id="isot">Isoryhmät</h3>
+      <div>
         <p>SIK:n fuksit nauttivat hurmaavien ISOhenkilöidensä opastuksesta ja hellästä huolenpidosta somissa ja omissa fuksiryhmissään.</p>
-
         <p>ISOt ovat hiukan vanhempia opiskelijoita ja kiltalaisia, joiden tehtävänä on olla tukenasi fuksivuoden ajan. Ensimmäisenä päivänä teidät jaetaan noin kymmenen hengen fuksiryhmiin ja jokaiseen ryhmään kuuluu kolmesta viiteen ISOa, joista yksi toimii opintoISOna. ISOilta voit kysyä mitä vain opiskeluun ja opiskelijaelämään liittyen. Vaikka he eivät tietäisi vastausta, he luultavimmin osaavat auttaa sinua vastausten löytämisessä.</p>
-
         <p>Kuten sanottu ISOt tukevat sinua koko fuksivuoden ajan, mutta eniten tulet näkemään heitä Orientaatioviikolla, jolloin he kulkevat fuksiryhmäsi kanssa ympäri Otaniemeä ja avaavat ovia teekkariuden saloihin. He auttavat sinua myös löytämään opintojen aloittamiseen tarvittavat asiat ja tukevat esimerkiksi lukujärjestyksen tekemisessä ja kirjastokortin, sekä matkakortin ja opiskelijakortin hankkimisessa.</p>
-
         <p>ISOT ovat myös kutsuttuna fuksivuotesi ensimmäiseen tapahtumaan, eli Varaslähtöön. Tule tutustumaan heihin sinne! </p>
-
-      </MainSection>
-      <AsideSection backgroundColor="white1" textColor="black1" />
-    </PageSection>
-  </div>
+      </div>
+    </TextSection>
+  </>
 );
 
 export default FreshmenPageView;

src/views/FrontPage/FrontPageHero.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Anchor from "@components/Anchor";
-import { Hero, HeroPrimarySection, HeroAside, HeroAsideItem, HeroPrimaryButtons } from "@components/NewHero";
+import { Hero, HeroPrimarySection, HeroAside, HeroAsideItem, HeroPrimaryButtons } from "@components/Hero";
 
 const FrontPageHero: React.FC = () => (
   <Hero>

src/views/GuildPage/GuildPage.scss

@@ -1,3 +0,0 @@
-.guild-page {
-  width: inherit;
-}

src/views/GuildPage/GuildPageHero.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import Anchor from "@components/Anchor";
+import { Hero, HeroPrimarySection, HeroAside, HeroAsideItem } from "@components/Hero";
+
+const GuildPageHero: React.FC = () => (
+  <Hero>
+    <div>
+      <HeroPrimarySection
+        header="Kilta koostuu sähkötekniikan ja elektroniikan (ELEC) tutkinto-ohjelmissa opiskelevista opiskelijoista"
+      >
+        <p>Vapaa-ajan <Anchor to="/">jäsenpalvelujen</Anchor> lisäksi killan tehtävänä on edistää jäsentensä <Anchor to="/">opintoja</Anchor>, tarjota uraohjausta ja <Anchor to="/">fuksikasvatusta</Anchor>. Jokaiselle jäsenelle löytyy varmasti jotakin—kaukomaita, opiskelijalehti <Anchor to="https://sosso.fi">Sössöä</Anchor>, ja kiltaaktiivina pääset kartuttamaan kokemusta, josta on hyötyä myös työelämässä.</p>
+        <p>Arvot estrumquias doluptatur aut quam fugiti cus debit landisciis eatemperes eumquibus di blat que sim etus idis dolut labor ad magnat.</p>
+      </HeroPrimarySection>
+    </div>
+
+    <HeroAside>
+      <HeroAsideItem
+        header="Toverielämää ja sähkötekniikkaa"
+        link="#tehtavat"
+        linkText="Killan tehtavat ja tarina&nbsp;›">
+      </HeroAsideItem>
+      <HeroAsideItem
+        header="Aktiivinen hallinto"
+        link="#organisaatio"
+        linkText="Organisaatio&nbsp;›">
+      </HeroAsideItem>
+      <HeroAsideItem
+        header="Kilta-aktiivit järjestävät monipuolista toimintaa"
+        link="#organisaatio"
+        linkText="Toimikunnat ja jaokset&nbsp;›">
+      </HeroAsideItem>
+      <HeroAsideItem
+        header="Edut jäsenille"
+        link="#jasenedut"
+        linkText="Yliopiston jäsenedut&nbsp;›">
+      </HeroAsideItem>
+    </HeroAside>
+  </Hero>
+);
+
+export default GuildPageHero;

src/views/GuildPage/GuildPageView.tsx

@@ -1,225 +1,169 @@
 import React from "react";
-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/Hero/HeroMainSection";
-import HeroAsideSection from "@components/Hero/HeroAsideSection";
-import HeroAsideItem from "@components/Hero/HeroAsideItem";
 import InfoBox from "@components/InfoBox";
 import Accordion from "@components/Accordion";
 import TextAnchor from "@components/TextAnchor";
 import Anchor from "@components/Anchor";
-import { SossoSection } from "@components/index";
+import { SossoSection, TextSection } from "@components/index";
+import GuildPageHero from "./GuildPageHero";
 
 const GuildPageView: React.FC = () => (
-  <div className="guild-page">
-    <div className="front-page">
-      <PageSection backgroundColor="dark-blue" fullSize>
-        <HeroMainSection>
-          <h1>Kilta koostuu sähkötekniikan ja elektroniikan (ELEC) tutkinto-ohjelmissa opiskelevista opiskelijoista</h1>
-          <p>Vapaa-ajan <TextAnchor textColor="blue1" hoverColor="white1" to="/">jäsenpalvelujen</TextAnchor> lisäksi killan tehtävänä on edistää jäsentensä <TextAnchor textColor="blue1" hoverColor="white1" to="/">opintoja</TextAnchor>, tarjota uraohjausta ja <TextAnchor textColor="blue1" hoverColor="white1" to="/">fuksikasvatusta</TextAnchor>. Jokaiselle jäsenelle löytyy varmasti jotakin—kaukomaita, opiskelijalehti <TextAnchor textColor="blue1" hoverColor="white1" to="https://sosso.fi">Sössöä</TextAnchor>, ja kiltaaktiivina pääset kartuttamaan kokemusta, josta on hyötyä myös työelämässä.</p>
-          <p>Arvot estrumquias doluptatur aut quam fugiti cus debit landisciis eatemperes eumquibus di blat que sim etus idis dolut labor ad magnat.</p>
-        </HeroMainSection>
-        <HeroAsideSection textColor="dark-blue" backgroundColor="light-turquoise">
-          <HeroAsideItem
-            title="Toverielämää ja sähkötekniikkaa"
-            linkHref="#tehtavat"
-            linkText="Killan tehtavat ja tarina">
-          </HeroAsideItem>
-          <HeroAsideItem
-            title="Aktiivinen hallinto"
-            linkHref="#organisaatio"
-            linkText="Organisaatio">
-          </HeroAsideItem>
-          <HeroAsideItem
-            title="Kilta-aktiivit järjestävät monipuolista toimintaa"
-            linkHref="#organisaatio"
-            linkText="Toimikunnat ja jaokset">
-          </HeroAsideItem>
-          <HeroAsideItem
-            title="Edut jäsenille"
-            linkHref="#jasenedut"
-            linkText="Yliopiston jäsenedut">
-          </HeroAsideItem>
-        </HeroAsideSection>
-      </PageSection>
-      <PageSection backgroundColor="white1">
-        <AsideSection backgroundColor="white1" textColor="black1" />
-        <MainSection backgroundColor="white1" textColor="black1" >
-          <h3 id="tehtavat">Killan tehtävät ja tarina</h3>
-          <p>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 <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/kalenteri">tapahtumakalenterin</TextAnchor> aktiivisella seuraamisella saattaa olla hyvinkin miellyttäviä seuraamuksia. Voit myös itse järjestää mieleisesi tapahtuman killan tukemana, tai ehdottaa sitä killan toimitsijoille.</p>
+  <>
+    <GuildPageHero />
 
-          <p>Yhteistyössä korkeakoulun kanssa, kilta kehittää <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/opinnot">opetusta</TextAnchor>. Kilta on mukana kurssien kehittämisessä, valvoo kiltalaisten etua korkeakoulussa ja tuo korkeakoulun henkilöstöä lähemmäs kiltalaisia. Kilta avaa oven <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/yritysyhteistyo">yritysmaailmaan</TextAnchor> 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 <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/kiltahuone">kiltahuone</TextAnchor>, 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.</p>
+    <TextSection>
+      <h3 id="tehtavat">Killan tehtävät ja tarina</h3>
+      <div>
+        <p>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 <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/kalenteri">tapahtumakalenterin</TextAnchor> aktiivisella seuraamisella saattaa olla hyvinkin miellyttäviä seuraamuksia. Voit myös itse järjestää mieleisesi tapahtuman killan tukemana, tai ehdottaa sitä killan toimitsijoille.</p>
 
-          <h6>Takana lähes satavuotinen historia</h6>
+        <p>Yhteistyössä korkeakoulun kanssa, kilta kehittää <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/opinnot">opetusta</TextAnchor>. Kilta on mukana kurssien kehittämisessä, valvoo kiltalaisten etua korkeakoulussa ja tuo korkeakoulun henkilöstöä lähemmäs kiltalaisia. Kilta avaa oven <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/yritysyhteistyo">yritysmaailmaan</TextAnchor> 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 <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/kiltahuone">kiltahuone</TextAnchor>, 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.</p>
 
-          <p>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.”.</p>
+        <h6>Takana lähes satavuotinen historia</h6>
 
-          <p>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.</p>
+        <p>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.”.</p>
 
-          <h6>Meitä teekkareita on todella moneen lähtöön</h6>
+        <p>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.</p>
 
-          <p>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 <TextAnchor textColor="blue1" hoverColor="dark-blue" to="https://ayy.fi/yhdistykset/yhdistyslistaus/">AYY:n lukuisista
-              yhdistyksistä</TextAnchor>. 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.</p>
+        <h6>Meitä teekkareita on todella moneen lähtöön</h6>
 
-          <p>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.</p>
-        </MainSection>
-        <AsideSection backgroundColor="white1" textColor="black1">
-          <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 <TextAnchor to="https://issuu.com/studentunionayy/docs/tavoistaan_teekkari_tunnetaan/25">käytöstavat</TextAnchor> on syytä aina pitää mielessä, liikuttiin sitten puku päällä excuilla tai sitseillä tai haalarit päällä Tukholman illassa.
-            </InfoBox>
-          </div>
-        </AsideSection>
-      </PageSection>
-      <SossoSection>
-        <p>Killan hallinto koostuu XXX henkilöstä.</p>
-      </SossoSection>
-      <PageSection backgroundColor="white1">
-        <AsideSection backgroundColor="white1" />
-        <MainSection backgroundColor="white1" textColor="dark-blue" >
-          <h3 id="organisaatio">Organisaatio</h3>
+        <p>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 <TextAnchor textColor="blue1" hoverColor="dark-blue" to="https://ayy.fi/yhdistykset/yhdistyslistaus/">AYY:n lukuisista
+      yhdistyksistä</TextAnchor>. 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.</p>
 
-          <p>Sähköinsinöörikillassa toimeenpanovaltaa käyttää 3–13 kiltalaisen muodostama <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/hallitus">hallitus</TextAnchor> apunaan lukuisa määrä toimihenkilöitä. Hallituksen ja toimihenkilöt valitsee killan <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/valtuusto">valtuusto</TextAnchor>, 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. <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/kuulumiset">Hallituksen kuulumiset</TextAnchor> lorem.</p>
-
-          <h6>Valtuuston toimintaa</h6>
-
-          <p>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. <TextAnchor textColor="blue1" hoverColor="dark-blue" to="https://static.sika.sik.party">Pöytäkirjat ja muut dokumentit</TextAnchor> lorem ipsum.</p>
-
-          <h6>Hallituksen toimintaa</h6>
-          <p>Jokaisella hallituksen jäsenellä on oma vastuualueensa, jota hän hoitaa yhdessä mahdollisen <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/toimikunnat">toimikuntansa</TextAnchor> 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 <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/palaute">parannusehdotus</TextAnchor> mihin tahansa asiaan.</p>
-
-        </MainSection>
-        <AsideSection backgroundColor="white1">
-          <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>
-      <SossoSection>
-        <p>
-          Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <Anchor to="/toimikunnat">toimikunnat</Anchor> ja <Anchor to="/jaokset">jaokset</Anchor>.</p>
-      </SossoSection>
-      <div style={{ display: "flex" }}>
-        <AsideSection textColor="dark-blue" backgroundColor="light-turquoise">
-          <h6>Miksi alkaa kilta-aktiiviksi?</h6>
-          <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 textColor="dark-blue" backgroundColor="light-blue">
-          <h6>Runsaasti erilaisia tehtäviä</h6>
-          <p>
-                Killassa on todella monenlaisia tehtäviä. Olitpa koodaaja, urheilija tai ammattimainen juhlija, killasta löytyy tekemistä juuri sinulle. <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to="/toimikunnat">Toimikunnissa</TextAnchor> sitoudut toimintaan vuodeksi kerrallaan. <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to="/jaostot">Jaostoiminta</TextAnchor> 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 <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to={""}>valtuustoon</TextAnchor>, <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to={""}>hallitukseen</TextAnchor> tai <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to={""}>toimariksi</TextAnchor>?
-          </p>
-          <p>
-                » <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to={""}>Toimihenkilönä</TextAnchor> pääset edistämään opintoja
-          </p>
-          <p>
-                » Lorem ipsum
-          </p>
-        </AsideSection>
+        <p>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.</p>
       </div>
 
-      <PageSection backgroundColor="white1">
-        <AsideSection textColor="black1" backgroundColor="white1">
-          <div>
-            <h3>Sähkötekniikan korkeakoulun toimikunnat</h3>
-            <p>
+      <aside>
+        <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 <TextAnchor to="https://issuu.com/studentunionayy/docs/tavoistaan_teekkari_tunnetaan/25">käytöstavat</TextAnchor> on syytä aina pitää mielessä, liikuttiin sitten puku päällä excuilla tai sitseillä tai haalarit päällä Tukholman illassa.
+          </InfoBox>
+        </div>
+      </aside>
+    </TextSection>
+
+    <SossoSection>
+      <p>Killan hallinto koostuu XXX henkilöstä.</p>
+    </SossoSection>
+
+    <TextSection>
+      <h3 id="organisaatio">Organisaatio</h3>
+      <div>
+        <p>Sähköinsinöörikillassa toimeenpanovaltaa käyttää 3–13 kiltalaisen muodostama <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/hallitus">hallitus</TextAnchor> apunaan lukuisa määrä toimihenkilöitä. Hallituksen ja toimihenkilöt valitsee killan <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/valtuusto">valtuusto</TextAnchor>, 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. <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/kuulumiset">Hallituksen kuulumiset</TextAnchor> lorem.</p>
+
+        <h6>Valtuuston toimintaa</h6>
+
+        <p>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. <TextAnchor textColor="blue1" hoverColor="dark-blue" to="https://static.sika.sik.party">Pöytäkirjat ja muut dokumentit</TextAnchor> lorem ipsum.</p>
+
+        <h6>Hallituksen toimintaa</h6>
+        <p>Jokaisella hallituksen jäsenellä on oma vastuualueensa, jota hän hoitaa yhdessä mahdollisen <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/toimikunnat">toimikuntansa</TextAnchor> 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 <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/palaute">parannusehdotus</TextAnchor> mihin tahansa asiaan.</p>
+      </div>
+
+      <aside>
+        <div>
+          <PageLink to="/yhteystiedot/" desc="yhteystiedot&nbsp;›">Vuoden 2019 hallinto</PageLink>
+          <PageLink to="/saannot/" desc="säännöt&nbsp;›">Dolor sit amet</PageLink>
+        </div>
+      </aside>
+    </TextSection>
+
+    <SossoSection>
+      <p>
+          Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <Anchor to="/toimikunnat">toimikunnat</Anchor> ja <Anchor to="/jaokset">jaokset</Anchor>.</p>
+    </SossoSection>
+
+    <TextSection>
+      <aside>
+        <h6>Miksi alkaa kilta-aktiiviksi?</h6>
+        <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>
+      </aside>
+
+      <aside>
+        <h6>Runsaasti erilaisia tehtäviä</h6>
+        <p>Killassa on todella monenlaisia tehtäviä. Olitpa koodaaja, urheilija tai ammattimainen juhlija, killasta löytyy tekemistä juuri sinulle. <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to="/toimikunnat">Toimikunnissa</TextAnchor> sitoudut toimintaan vuodeksi kerrallaan. <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to="/jaostot">Jaostoiminta</TextAnchor> 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 <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to={""}>valtuustoon</TextAnchor>, <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to={""}>hallitukseen</TextAnchor> tai <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to={""}>toimariksi</TextAnchor>?</p>
+        <p>» <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to={""}>Toimihenkilönä</TextAnchor> pääset edistämään opintoja</p>
+        <p>» Lorem ipsum</p>
+      </aside>
+    </TextSection>
+
+    <AsideSection textColor="black1" backgroundColor="white1">
+      <div>
+        <h3>Sähkötekniikan korkeakoulun toimikunnat</h3>
+        <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>
-          </div>
-          <div className="accordion-list">
-            <Accordion
-              title="Akateeminen komitea">
+        </p>
+      </div>
+      <div className="accordion-list">
+        <Accordion
+          title="Akateeminen komitea">
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus feugiat ante. Nam eget venenatis dui. Morbi purus dui, cursus at velit id, placerat scelerisque turpis. Nulla a mauris odio. Nulla at tempor mi. Maecenas et sapien eu lorem interdum luctus. Proin interdum, tortor eget tempor tristique, massa arcu suscipit ipsum, sit amet lacinia erat lorem sit amet ipsum. Praesent dictum odio auctor odio sodales pharetra. Quisque accumsan iaculis diam, a laoreet odio aliquet eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In hac habitasse platea dictumst. Pellentesque at hendrerit mi. Morbi at lacus finibus, pharetra urna sed, molestie tellus. Duis fermentum sodales leo. Nullam varius, massa in convallis sagittis, mi felis lacinia ipsum, viverra rhoncus nibh ipsum vel mi. Pellentesque ornare hendrerit malesuada.
                   Suspendisse porta diam in massa suscipit congue. Nulla facilisi. Nulla egestas tempus arcu, vitae ultrices risus rhoncus ac. Ut porta orci neque, vel fermentum turpis fermentum in. Curabitur condimentum, mi in tristique pulvinar, mauris nibh bibendum neque, quis tincidunt purus eros quis dolor. Aliquam imperdiet nibh ac quam iaculis, at ullamcorper diam ultricies. Vestibulum egestas consequat justo non vehicula. Nam non egestas tellus.
                   Praesent vel auctor ligula. Phasellus faucibus vulputate erat, non fringilla sem ultrices non. In vitae elit sit amet nisl interdum ultrices nec in ligula. Ut et turpis risus. Sed mattis varius nisl, in euismod diam fringilla ac. Nunc sed eros augue. Donec sit amet quam ex. Integer luctus nulla at est rutrum, a commodo est dapibus. Maecenas sagittis scelerisque blandit. Morbi congue tortor eros, sit amet vestibulum dolor tempor vitae. In pretium tellus at velit porttitor, vitae rutrum lacus suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam bibendum ultricies metus, nec placerat urna efficitur auctor. Morbi non purus magna. Ut at ex nec nunc dictum ultricies.
                   Mauris volutpat nec sem sed malesuada. Sed eu scelerisque libero. Phasellus at mauris in ligula congue interdum et sit amet ante. Sed vestibulum, sem non congue molestie, quam massa euismod sem, non porta sem mauris vitae justo. Donec et fringilla tortor. Cras sed purus eget ante elementum mattis. Nunc elit nunc, volutpat sed congue ac, varius a ligula. Aenean sit amet laoreet dolor. Aenean finibus iaculis diam, quis lacinia nisi semper id. Phasellus eu nulla sed risus accumsan finibus. Nulla vel ante id mi vulputate ultrices. Cras finibus elementum tortor, at fringilla arcu facilisis ut. Cras vitae lectus pretium, posuere risus venenatis, congue metus. Phasellus vel dapibus felis.
                   Maecenas tincidunt orci nulla. Sed maximus tellus nec lorem dignissim aliquet. Maecenas tincidunt dolor sed est laoreet, nec suscipit augue dictum. Vivamus venenatis rutrum molestie. Vestibulum in maximus leo. Duis a euismod nulla. Aenean luctus sodales quam, ut fringilla elit bibendum in. Ut in purus sit amet libero hendrerit hendrerit ac eget nisl. In ac mauris at felis suscipit scelerisque eu eget erat. Fusce accumsan tempus mauris, porta sagittis odio venenatis ac. Integer mollis nulla in velit dignissim imperdiet. Nunc ac magna ullamcorper, pretium mauris et, semper enim. Morbi aliquet accumsan turpis id rutrum. Donec purus tellus, pellentesque non nunc ac, ornare scelerisque ex.
-            </Accordion>
-            <Accordion title="Lorem" />
-            <Accordion title="Ipsum" />
-            <Accordion title="Lorem" />
-            <Accordion title="Ipsum" />
-          </div>
-        </AsideSection>
-        <AsideSection textColor="black1" backgroundColor="white1">
-          <div>
-            <h3>Jaokset—kokeile kiltatoimintaa vapaammin</h3>
-            <p>
+        </Accordion>
+        <Accordion title="Lorem" />
+        <Accordion title="Ipsum" />
+        <Accordion title="Lorem" />
+        <Accordion title="Ipsum" />
+      </div>
+    </AsideSection>
+    <AsideSection textColor="black1" backgroundColor="white1">
+      <div>
+        <h3>Jaokset—kokeile kiltatoimintaa vapaammin</h3>
+        <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>
-          </div>
-        </AsideSection>
-      </PageSection>
-      <SossoSection>
-        <p id="jasenedut">Jäsenedut vuonna 2019</p>
-      </SossoSection>
-      <PageSection backgroundColor="white1">
-        <AsideSection backgroundColor="white1" />
-        <MainSection textColor="black1">
-          <h3>Aalto-yliopiston tarjoamat monenlaiset edut</h3>
-          <p>
-                Sen lisäksi että kilta tarjoaa jäsenilleen palveluja ja aktiviteetteja, Aalto-yliopisto tarjoaa lorem ipsum dolor sit amet.
-          </p>
-          <p>
-                » <TextAnchor textColor="blue1" hoverColor="dark-blue" to={"https://download.aalto.fi"}>Download.aalto.fi</TextAnchor> Täältä voit ladata yliopiston tarjoamia ohjelmia ilmaiseksi.
-          </p>
-        </MainSection>
-        <AsideSection textColor="black1" backgroundColor="white1">
-          <InfoBox>
-            <TextAnchor to={""}>Jäseneksi liittyminen</TextAnchor> on helppoa, hauskaa ja hyödyllistä 8 € jäsenmaksulla pääset nauttimaan kaikista jäseneduista.
-          </InfoBox>
-        </AsideSection>
-      </PageSection>
-    </div>
-  </div>
+        </p>
+      </div>
+    </AsideSection>
+
+    <SossoSection>
+      <p id="jasenedut">Jäsenedut vuonna 2019</p>
+    </SossoSection>
+
+    <TextSection>
+      <h3>Aalto-yliopiston tarjoamat monenlaiset edut</h3>
+      <div>
+        <p>Sen lisäksi että kilta tarjoaa jäsenilleen palveluja ja aktiviteetteja, Aalto-yliopisto tarjoaa lorem ipsum dolor sit amet.</p>
+        <p>» <Anchor to={"https://download.aalto.fi"}>Download.aalto.fi</Anchor> Täältä voit ladata yliopiston tarjoamia ohjelmia ilmaiseksi.</p>
+      </div>
+      <aside>
+        <InfoBox>
+          <Anchor to={""}>Jäseneksi liittyminen</Anchor> on helppoa, hauskaa ja hyödyllistä 8 € jäsenmaksulla pääset nauttimaan kaikista jäseneduista.
+        </InfoBox>
+      </aside>
+    </TextSection>
+  </>
 );
 
 export default GuildPageView;

src/views/InEnglishPage/InEnglishPage.scss

@@ -1,5 +0,0 @@
-.in-english-page {
-  display: flex;
-  flex-flow: column wrap;
-  justify-content: flex-start;
-}

src/views/InEnglishPage/InEnglishPageHero.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Hero, HeroPrimarySection, HeroAside, HeroAsideItem } from "@components/Hero";
+
+const InEnglishPageHero: React.FC = () => (
+  <Hero>
+    <div>
+      <HeroPrimarySection
+        header="Guild of Electrical Engineering"
+        text="is something"
+      />
+    </div>
+
+    <HeroAside>
+      <HeroAsideItem
+        header="Upcoming events"
+        text="Fuksikasvatusta, ISO-toimintaa, lorem ipsum dolor sit ja amet."
+        link="#events"
+        linkText="Calendar&nbsp; ›"
+      />
+      <HeroAsideItem
+        header="About Finland"
+        text="Oletko abi, vaihtamassa uraa tai valmistumassa?"
+        link="#finland"
+        linkText="Quick tour&nbsp; ›"
+      />
+      <HeroAsideItem
+        header="For exchange student"
+        text="Avoimet työpaikat ja excursiot. Infoa yritysten edustajille ja sponsseille."
+        link="#freshmen"
+        linkText="For freshmen&nbsp; ›"
+      />
+    </HeroAside>
+  </Hero>
+);
+
+export default InEnglishPageHero;

src/views/InEnglishPage/InEnglishPageView.tsx

@@ -1,10 +1,21 @@
 import React from "react";
-import "./InEnglishPage.scss";
+import { TextSection } from "@components/index";
+import InEnglishPageHero from "./InEnglishPageHero";
 
 const InEnglishPageView: React.FC = () => (
-  <div className="in-english-page">
-    In English Page
-  </div>
+  <>
+    <InEnglishPageHero />
+    <TextSection>
+      <h3>
+        Hey hey heyy
+      </h3>
+      <div>
+        <p>
+          In English Page
+        </p>
+      </div>
+    </TextSection>
+  </>
 );
 
 export default InEnglishPageView;

src/views/SignUpPage/SignUpPage.scss

@@ -1,61 +0,0 @@
-@import "../../assets/scss/globals";
-@import "../../components//Button/Button.scss";
-
-.sign-up-page {
-  flex: 1 0 auto;
-
-  .sign-up-statusmessage {
-    color: color(orange1);
-  }
-
-  .sign-up-list {
-    justify-content: start;
-    li {
-      padding-bottom: 0.3rem;
-    }
-
-    .reserved {
-      color: color(blue1);
-    }
-  }
-
-  .sign-up-form {
-    legend {
-      display: none;
-    }
-
-    & > div:last-child {
-      display: flex;
-      justify-content: center;
-
-      button[type="submit"] {
-        @extend .button;
-        @extend .filled;
-      }
-    }
-
-    fieldset {
-      border: none;
-      padding: 0;
-      margin: 1rem 0;
-
-      .form-group {
-        padding-bottom: 0.5rem;
-
-        & > label {
-          margin: 0.5rem 0;
-          font-weight: 600;
-          display: block;
-        }
-      }
-
-      input[type="text"], input[type="email"], input[type="number"] {
-        display: block;
-        height: 48px;
-        width: 100%;
-        font-size: 1.5rem;
-        padding: 0 16px;
-      }
-    }
-  }
-}

src/views/SignUpPage/SignUpPageView.tsx

@@ -1,13 +1,12 @@
 import React from "react";
+import styled from "styled-components";
 import Form, { IChangeEvent, ISubmitEvent, ErrorSchema } from "react-jsonschema-form";
-import "./SignUpPage.scss";
-import PageSection from "@components/PageSection";
 import { SignupForm } from "@models/SignupForm";
 import { buildFormSchema, buildUISchema } from "./FormUtils";
-import AsideSection from "@components/AsideSection";
-import MainSection from "@components/MainSection";
 import Checkboxes from "@components/Widgets/Checkbox/Checkboxes";
 import RadioButtonWidget from "@components/Widgets/RadioButton/RadioButtonWidget";
+import { TextSection } from "@components/index";
+import { colors } from "@theme/colors";
 
 const customWidgets = {
   "radio": RadioButtonWidget,
@@ -37,6 +36,65 @@ const renderList = (signUpForm: SignupForm) => {
   )
 }
 
+const StyledSection = styled(TextSection)`
+
+  & > div {
+    & > span {
+      color: ${colors.orange1};
+    }
+  }
+
+  & > aside {
+    justify-content: start;
+    li {
+      padding-bottom: 0.3rem;
+    }
+
+    .reserved {
+      color: color(blue1);
+    }
+  }
+
+  form {
+    legend {
+      display: none;
+    }
+
+    & > div:last-child {
+      display: flex;
+      justify-content: center;
+
+      button[type="submit"] {
+        color: blue;
+      }
+    }
+  }
+
+  fieldset {
+    border: none;
+    padding: 0;
+    margin: 1rem 0;
+
+    .form-group {
+      padding-bottom: 0.5rem;
+
+      & > label {
+        margin: 0.5rem 0;
+        font-weight: 600;
+        display: block;
+      }
+    }
+
+    input[type="text"], input[type="email"], input[type="number"] {
+      display: block;
+      height: 48px;
+      width: 100%;
+      font-size: 1.5rem;
+      padding: 0 16px;
+    }
+  }
+`;
+
 const SignUpPageView: React.FC<SignUpPageViewProps> = ({
   signUpForm,
   formData,
@@ -51,9 +109,6 @@ const SignUpPageView: React.FC<SignUpPageViewProps> = ({
 
     return (
       <>
-        <h1>
-          {signUpForm.title_fi}
-        </h1>
         <Form
           schema={schema as any}
           uiSchema={uiSchema}
@@ -62,7 +117,6 @@ const SignUpPageView: React.FC<SignUpPageViewProps> = ({
           idPrefix="rjsf"
           onChange={onChange}
           onSubmit={onSubmit}
-          className="sign-up-form"
         />
       </>
     );
@@ -74,18 +128,23 @@ const SignUpPageView: React.FC<SignUpPageViewProps> = ({
 
   const signups = signUpForm && signUpForm.signups ? renderList(signUpForm) : null;
   return (
-    <PageSection className="sign-up-page" backgroundColor="white1" textColor="dark-blue">
-      <AsideSection />
-      <MainSection>
+    <StyledSection>
+      <h1>
+        {signUpForm?.title_fi || ""}
+      </h1>
+
+      <div>
         <span className="sign-up-statusmessage">
           {statusMessage}
         </span>
         {form}
-      </MainSection>
-      <AsideSection className="sign-up-list">
-        {signups}
-      </AsideSection>
-    </PageSection>
+      </div>
+      <aside>
+        <div>
+          {signups}
+        </div>
+      </aside>
+    </StyledSection>
   )
 }
 

src/views/StudiesPage/StudiesPage.scss

@@ -1,5 +0,0 @@
-.studies-page {
-  display: flex;
-  flex-flow: column wrap;
-  justify-content: flex-start;
-}

src/views/StudiesPage/StudiesPageHero.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Hero, HeroPrimarySection, HeroAside, HeroAsideItem } from "@components/Hero";
+
+const StudiesPageHero: React.FC = () => (
+  <Hero>
+    <div>
+      <HeroPrimarySection
+        header="Suomen parasta elektroniikan opetusta"
+        text="Aalto-yliopistossa sinulla on mahdollisuus opiskella sähkö- ja elektroniikkatekniikkaa huippu professorien ja opettajien johdolla, vieläpä parhaassa mahdollisessa yhteisössä. Sähkötekniikan korkeakoulusta valmistut matematiikkaa ja fysiikkaa soveltavaksi huippuosaajaksi, jolla on valmiudet vaikka mihin työelämän taitoihin laidasta laitaa. Lue lisää opinnoista, killan roolista yliopistoelämässä ja uramahdollisuuksista alempaa."
+      />
+    </div>
+
+    <HeroAside>
+      <HeroAsideItem
+        header="Opiskelemaan sähkölle"
+        link="#abeille"
+        linkText="Lue lisää&nbsp; ›"
+      />
+      <HeroAsideItem
+        header="Mikä ihmeen Diplomi-insinööri"
+        link="#uratarinoita"
+        linkText="Ura esimerkkejä&nbsp; ›"
+      />
+      <HeroAsideItem
+        header="Aloittelevalle opiskelijalle"
+        link="/kilta/fuksi"
+        linkText="Tietopaketti fukseille&nbsp; ›"
+      />
+    </HeroAside>
+  </Hero>
+);
+
+export default StudiesPageHero;

src/views/StudiesPage/StudiesPageView.tsx

@@ -1,64 +1,23 @@
 import React from "react";
-import "./StudiesPage.scss";
-import PageSection from "@components/PageSection";
-import HeroMainSection from "@components/Hero/HeroMainSection";
-import HeroAsideSection from "@components/Hero/HeroAsideSection";
-import HeroAsideItem from "@components/Hero/HeroAsideItem";
-import AsideSection from "@components/AsideSection";
-import MainSection from "@components/MainSection";
 import PageLink from "@components/PageLink";
 import Anchor from "@components/Anchor";
-import { SossoSection } from "@components/index";
+import { SossoSection, TextSection } from "@components/index";
+import StudiesPageHero from "./StudiesPageHero";
 
 const StudiesPageView: React.FC = () => (
-  <div className="studies-page">
-    <PageSection backgroundColor="dark-blue" fullSize>
-      <HeroMainSection>
-        <h1>Suomen parasta elektroniikan opetusta</h1>
-        <p>
-        Aalto-yliopistossa sinulla on mahdollisuus opiskella sähkö- ja elektroniikkatekniikkaa huippu professorien ja opettajien johdolla, vieläpä parhaassa mahdollisessa yhteisössä. Sähkötekniikan korkeakoulusta valmistut matematiikkaa ja fysiikkaa soveltavaksi huippuosaajaksi, jolla on valmiudet vaikka mihin työelämän taitoihin laidasta laitaa. Lue lisää opinnoista, killan roolista yliopistoelämässä ja uramahdollisuuksista alempaa.
-        </p>
-      </HeroMainSection>
-      <HeroAsideSection textColor="dark-blue" backgroundColor="light-turquoise">
-        <HeroAsideItem
-          title="Opiskelemaan sähkölle"
-          linkHref="#abeille"
-          linkText="Lue lisää" />
-        <HeroAsideItem
-          title="Mikä ihmeen Diplomi-insinööri"
-          linkHref="#uratarinoita"
-          linkText="Ura esimerkkejä" />
-        <HeroAsideItem
-          title="Aloittelevalle opiskelijalle"
-          linkHref="/kilta/fuksi"
-          linkText="Tietopaketti fukseille" />
-      </HeroAsideSection>
-    </PageSection>
-    <PageSection backgroundColor="white1">
-      <AsideSection backgroundColor="white1" textColor="black1" />
-      <MainSection backgroundColor="white1" textColor="black1">
-        <h3 id="abeille">Abeille ja muille kiinnostuneille</h3>
-
-        <h6>MITÄ ON SÄHKÖTEKNIIKAN OPISKELU?</h6>
+  <>
+    <StudiesPageHero />
+    <TextSection>
+      <h3 id="abeille">Abeille ja muille kiinnostuneille</h3>
+      <div>
+        <h6>Mitä on sähkötekniikan opiskelu?</h6>
         <p>Sähkö- ja elektronniikkatekniikan opiskelu antaa valmiudet tehdä työelämässä tehtäviä laidasta laitaan. Sähkön opinnoista saat varmat opit matematiikasta ja fysiikasta ja opit samalla myös hyödyntämään komplekseja ohjelmistoja ja pääset kosketuksiin tulevaisuudessa keskeisten koodaustaitojen kanssa. Opintoja on siis laajasti sähkötekniikan kursseista matematiikan kursseihin ja koodauskursseihin. Lisäksi voit tehdä opinnoistasi yksilölliset valitsemalla sinua kiinnostavan sivuaineen vaikka jonkun toisenkin korkeakoulun puolelta ja testata ihan mitä vain kursseja vapaavalintaisten kurssien muodossa.</p>
 
-        <h6>KILLAN ROOLI OPISKELIJAN ELÄMÄSSÄ</h6>
+        <h6>Killan rooli opiskelijan elämässä</h6>
         <p>Killan pääasiallisena tehtävänä on pitää jäsenistöstään huolta. Tämä tarkoittaa sitä, että kilta järjestää jäsenilleen hyvinvointitapahtumia, urheilumahdollisuuksia, iltajuhlia, yhteyksiä yritysmaailmaan ja tukee tietysti myös opinnoissa. Löydät tietoa kaikista näistä killan tehtävistä lisää, tutustumalla killan toimintaan esimerkiksi täältä. (Tohon vois laittaa linkin siihen KILTA-sivuun, eli: http://web.sik.party:3000/kilta ei ehkä kannata toistaa samoja hommia tähän vai?)</p>
+      </div>
 
-        <h3 id="uratarinoita">Uratarinoita</h3>
-
-        <p>Tähän on kerätty opiskelijoiden ja alumnien uratarinoita. Lue alta esimerkkimahdollisuuksia siitä, mitä sinäkin voisit tehdä tulevaisuudessa ja inspiroidu!</p>
-
-        <h6>OPISKELIJOIDEN KESÄTYÖ- JA OSA-AIKATYÖTARINOITA</h6>
-        <p>Opiskelujen aikana moni tahtoo jo päästä kosketuksiin yritysmaailman kanssa ja sähkötekniikan opiskelijoille töitä tosiaan riittää jo opiskelujen aikaan. Tässä on muutama opiskeluajan uratarina.</p>
-
-        <h6>Emmaleena</h6>
-        <p>Fuksivuoden loppupuolella aloin haaveilla oman alan hommista ja päätin laittaa kesätyöhakemuksia yrityksiin ihan laidasta laitaan. Lopulta taisin laittaa niitä jopa 50… Ei mennyt kauaa, kun Profit Softwarelta oltiin yhteydessä ja pääsin sinne haastatteluun. Ennen pitkää olikin jo kesä ja olin päässyt osaksi Profit Softwaren automaatiotraineeteamiä. Jatkoin kesän jälkeen osa-aikaisena traineenä ja seuraavana kesänä pääsinkin scrum master -roolissa ohjaamaan useita erilaisia traineeprojekteja. Ihastuin projektienhallintaan ja jatkan projekti taitojen harjoittamista töissä edelleen.</p>
-
-        <h6>ALUMNIEN TARINOITA</h6>
-        <p>SIKin alumneja löytyy vaikka mistä! Tässä muutama esimerkki erilaisista työtehtävistä ja tarinoista.</p>
-      </MainSection>
-      <AsideSection backgroundColor="white1" textColor="black1">
+      <aside>
         <div>
           <PageLink to="https:https://static.sika.sik.party/saannot/excursiosaannot.pdf" desc="Lue täältä&nbsp;›">
             Kurssitarjonta
@@ -67,24 +26,40 @@ const StudiesPageView: React.FC = () => (
             Liity jäseneksi
           </PageLink>
         </div>
-      </AsideSection>
-    </PageSection>
+      </aside>
+    </TextSection>
+    <TextSection>
+      <h3 id="uratarinoita">Uratarinoita</h3>
+      <div>
+        <p>Tähän on kerätty opiskelijoiden ja alumnien uratarinoita. Lue alta esimerkkimahdollisuuksia siitä, mitä sinäkin voisit tehdä tulevaisuudessa ja inspiroidu!</p>
+
+        <h6>Opiskelijoiden kesätyö- ja osa-aikatyötarinoita</h6>
+        <p>Opiskelujen aikana moni tahtoo jo päästä kosketuksiin yritysmaailman kanssa ja sähkötekniikan opiskelijoille töitä tosiaan riittää jo opiskelujen aikaan. Tässä on muutama opiskeluajan uratarina.</p>
+
+        <h6>Emmaleena</h6>
+        <p>Fuksivuoden loppupuolella aloin haaveilla oman alan hommista ja päätin laittaa kesätyöhakemuksia yrityksiin ihan laidasta laitaan. Lopulta taisin laittaa niitä jopa 50… Ei mennyt kauaa, kun Profit Softwarelta oltiin yhteydessä ja pääsin sinne haastatteluun. Ennen pitkää olikin jo kesä ja olin päässyt osaksi Profit Softwaren automaatiotraineeteamiä. Jatkoin kesän jälkeen osa-aikaisena traineenä ja seuraavana kesänä pääsinkin scrum master -roolissa ohjaamaan useita erilaisia traineeprojekteja. Ihastuin projektienhallintaan ja jatkan projekti taitojen harjoittamista töissä edelleen.</p>
+
+        <h6>Alumnien tarinoita</h6>
+        <p>SIKin alumneja löytyy vaikka mistä! Tässä muutama esimerkki erilaisista työtehtävistä ja tarinoista.</p>
+      </div>
+
+    </TextSection>
+
     <SossoSection>
       <h3>Hae opiskelemaan!</h3>
       <Anchor to="https://aalto.fi">
         <h4>Lue lisää Aallon sivuilta</h4>
       </Anchor>
     </SossoSection>
-    <PageSection backgroundColor="white1">
-      <AsideSection backgroundColor="white1" textColor="black1" />
-      <MainSection backgroundColor="white1" textColor="black1">
-        <h3 id="yliopisto">Yliopiston järjestelmiä</h3>
+
+    <TextSection>
+      <h3 id="yliopisto">Yliopiston järjestelmiä</h3>
+      <div>
         <p>TODO: Tänne varmaan mielummin Akateemiset komiteat etc.</p>
         <p>Valmistuvalle juttuja, oodi, tenttiarkisto etc.</p>
-      </MainSection>
-      <AsideSection backgroundColor="white1" textColor="black1" />
-    </PageSection>
-  </div>
+      </div>
+    </TextSection>
+  </>
 );
 
 export default StudiesPageView;