New Hero on ActualPage

src/components/NewHero/Hero.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import styled from "styled-components";
+import { colors } from "@theme/colors";
+
+const Container = styled.div`
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  position: relative;
+  padding: 0;
+
+  min-height: 70vh;
+
+  section {
+    padding: 2rem 1rem;
+  }
+
+  aside {
+    padding: 0 2rem;
+  }
+
+  & > div {
+    flex: 8;
+  }
+
+  & > aside {
+
+    flex: 4;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  @media screen and (max-width: 800px) {
+    flex-direction: column;
+
+    & > aside {
+      margin: 48px auto;
+    }
+  }
+
+  color: ${colors.white};
+  background-color: ${colors.darkBlue};
+  a:hover {
+    color: ${colors.white};
+  }
+`;
+
+const Hero: React.FC = ({ children }) => (
+  <Container>
+    {children}
+  </Container>
+)
+
+export default Hero;

src/components/NewHero/HeroAsideItem.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import styled from "styled-components";
+import { colors } from "@theme/colors";
+import Anchor from "@components/Anchor";
+
+interface HeroAsideItemProps {
+  header: string;
+  text?: string;
+  link: string;
+  linkText: string;
+}
+
+const Article = styled.article`
+  max-width: 300px;
+  line-height: 1rem;
+  margin-bottom: 1rem;
+
+  h2 {
+    color: ${colors.lightBlue};
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    line-height: 20px;
+  }
+
+  p, a {
+    color: ${colors.lightBlue};
+    font-size: 14px;
+    font-weight: 300;
+    line-height: 20px;
+  }
+
+  a {
+    color: ${colors.blue1};
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.1rem;
+
+    &:hover {
+      color: ${colors.white};
+    }
+  }
+`;
+
+const HeroAsideItem: React.FC<HeroAsideItemProps> = ({ header, text, link, linkText }) => (
+  <Article>
+    <h2>{header}</h2>
+    {text && (
+      <p>{text}</p>
+    )}
+    <Anchor to={link}>
+      {linkText}
+    </Anchor>
+  </Article>
+)
+
+export default HeroAsideItem;

src/components/NewHero/HeroPrimaryButtons.tsx

@@ -0,0 +1,38 @@
+import styled from "styled-components";
+import { colors } from "@theme/colors";
+
+const Buttons = styled.div<{row?: boolean}>`
+  min-width: 20%;
+  max-width: fit-content;
+  margin: auto;
+  display: flex;
+  flex-direction: ${(p) => p.row ? "row" : "column"};
+
+  a {
+    display: contents;
+  }
+
+  button {
+    color: ${colors.blue1};
+    background-color: transparent;
+    padding: 0.8rem 2rem;
+    margin: 0.5rem;
+    font-size: 0.8rem;
+    font-weight: 800;
+    letter-spacing: .1em;
+    text-transform: uppercase;
+    border: 1px solid ${colors.lightTurquoise};
+
+    &:hover {
+      cursor: pointer;
+      color: ${colors.white};
+    }
+
+    &:active,
+    &:focus {
+      outline: none;
+    }
+  }
+`;
+
+export default Buttons;

src/components/NewHero/HeroPrimarySection.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import styled from "styled-components";
+
+interface HeroPrimarySectionProps {
+  header: string;
+  text: string;
+}
+
+const Section = styled.section`
+  margin: 10vh auto 0;
+  max-width: 600px;
+  text-align: center;
+  line-height: 1.5rem;
+
+  h1 {
+    line-height: 40px;
+    @media screen and (max-width: 500px) {
+      font-size: 2rem;
+    }
+  }
+
+  p {
+    max-width: 400px;
+    margin: 1em auto;
+    font-weight: 100;
+  }
+`;
+
+const HeroPrimarySection: React.FC<HeroPrimarySectionProps> = ({ header, text, children }) => (
+  <Section>
+    <h1>{header}</h1>
+    <p>{text}</p>
+    {children}
+  </Section>
+)
+
+export default HeroPrimarySection;

src/components/NewHero/HeroSecondarySection.tsx

@@ -1,10 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import ColorDiv from "../ColorDiv/ColorDiv";
-
-interface HeroSecondarySectionItemProps {
-  note?: string;
-}
+import { colors } from "@theme/colors";
 
 const Note = styled.span`
   color: white;
@@ -25,6 +21,10 @@ const Item = styled.div`
   margin: 1rem 2rem 1rem;
 `;
 
+interface HeroSecondarySectionItemProps {
+  note?: string;
+}
+
 export const HeroSecondarySectionItem: React.FC<HeroSecondarySectionItemProps> = ({note, children}) => (
   <Item>
     <Note>
@@ -34,14 +34,13 @@ export const HeroSecondarySectionItem: React.FC<HeroSecondarySectionItemProps> =
   </Item>
 )
 
-const Container = styled(ColorDiv)`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+const Section = styled.section`
+  background-color: ${colors.green1};
+  color: ${colors.darkBlue};
 
   h1 {
-    padding: 1em 0;
+    padding: 1rem 0;
+    text-align: center;
   }
 `;
 
@@ -51,16 +50,16 @@ const Items = styled.div`
 `;
 
 interface HeroSecondarySectionProps {
-  title: string;
+  heading: string;
 }
 
-const HeroSecondarySection: React.FC<HeroSecondarySectionProps> = ({title, children}) => (
-  <Container textColor="dark-blue" backgroundColor="green1">
-    <h1>{title}</h1>
+const HeroSecondarySection: React.FC<HeroSecondarySectionProps> = ({ heading, children }) => (
+  <Section>
+    <h1>{heading}</h1>
     <Items>
       {children}
     </Items>
-  </Container>
+  </Section>
 )
 
-export default HeroSecondarySection;
+export default HeroSecondarySection;

src/components/NewHero/index.tsx

@@ -0,0 +1,6 @@
+export { default as Hero } from "./Hero";
+export { default as HeroPrimarySection } from "./HeroPrimarySection";
+export { default as HeroSecondarySection } from "./HeroSecondarySection";
+export { HeroSecondarySectionItem } from "./HeroSecondarySection";
+export { default as HeroAsideItem } from "./HeroAsideItem";
+export { default as HeroPrimaryButtons } from "./HeroPrimaryButtons";

src/views/ActualPage/ActualPageHero.tsx

@@ -1,27 +1,31 @@
 import React from "react";
-import HeroMainSection from "@components/Hero/HeroMainSection";
-import HeroAsideSection from "@components/Hero/HeroAsideSection";
-import HeroAsideItem from "@components/Hero/HeroAsideItem";
-import HeroSecondarySection, { HeroSecondarySectionItem } from "@components/Hero/HeroSecondarySection";
-import Button from "@components/Button";
-import PageSection from "@components/PageSection";
+import { Hero, HeroPrimarySection, HeroSecondarySection, HeroSecondarySectionItem, HeroAsideItem, HeroPrimaryButtons } from "@components/NewHero";
+import Anchor from "@components/Anchor";
 
 const ActualPageHero: React.FC = () => (
-  <PageSection backgroundColor="dark-blue" fullSize className="lander-hero">
-    <HeroMainSection>
-      <h1>Yritystapahtumia ja vastapainoa opiskelulle</h1>
-      <p>
-        Teekkarielämä ei ole pelkkää saunomista, juhlimista ja muita huvituksia—tai no, on se sitäkin.
-      </p>
-      <div className="hero-button-container-row">
-        <Button type="hero" onClick={() => { }}>
-          <h6>Tapahtumat&nbsp;›</h6>
-        </Button>
-        <Button type="hero" onClick={() => { }}>
-          <h6>Uutiset&nbsp;›</h6>
-        </Button>
-      </div>
-      <HeroSecondarySection title="Kiltahuone sijaitsee Tuas-talossa (Maarintie 8)">
+  <Hero>
+    <div>
+      <HeroPrimarySection
+        header="Yritystapahtumia ja vastapainoa opiskelulle"
+        text="Teekkarielämä ei ole pelkkää saunomista, juhlimista ja muita huvituksia—tai no, on se sitäkin."
+      >
+        <HeroPrimaryButtons row>
+          <Anchor to="/kilta">
+            <button onClick={() => { }}>
+              <span>Tapahtumat&nbsp;›</span>
+            </button>
+          </Anchor>
+          <Anchor to="/kilta">
+            <button onClick={() => { }}>
+              <span>Uutiset&nbsp;›</span>
+            </button>
+          </Anchor>
+        </HeroPrimaryButtons>
+      </HeroPrimarySection>
+
+      <HeroSecondarySection
+        heading="Kiltahuone sijaitsee Tuas-talossa (Maarintie 8)"
+      >
         <HeroSecondarySectionItem note="Ma">
           <span>Killan hallitus päivystää kiltahuoneella <strong>maanantaisin klo 12.15–13.15.</strong> Tuolloin voit ostaa kiltatuotteita, kuten esim. haalarimerkkejä tai laulukirjoja.</span>
         </HeroSecondarySectionItem>
@@ -29,38 +33,38 @@ const ActualPageHero: React.FC = () => (
           <span>Kiltapäiväkerho Kiltis kokoontuu <strong>torstaisin klo XX.XX kiltahuoneella.</strong> Lorem ipsum dolor sit amet. Lämpimästi tervetuloa kaikki SIKkiläiset ja SIK-mieliset!</span>
         </HeroSecondarySectionItem>
       </HeroSecondarySection>
-    </HeroMainSection>
-    <HeroAsideSection textColor="dark-blue" backgroundColor="light-turquoise">
+    </div>
+    <aside>
       <p>
         Kilta järjestää jäsenilleen jos jonkinlaista projektia ja toimintaa, muun muassa:
       </p>
       <HeroAsideItem
-        title="keksimistä ja rakentelua"
-        linkHref="#elepaja"
+        header="Keksimistä ja rakentelua"
+        link="#elepaja"
         linkText="Elektroniikkapaja">
       </HeroAsideItem>
       <HeroAsideItem
-        title="Tiimipelejä ja liikuntaa"
-        linkHref="#urheilu"
+        header="Tiimipelejä ja liikuntaa"
+        link="#urheilu"
         linkText="Urheilu">
       </HeroAsideItem>
       <HeroAsideItem
-        title="Konsertteja ja teatterivierailuja"
-        linkHref="#kulttuuri"
+        header="Konsertteja ja teatterivierailuja"
+        link="#kulttuuri"
         linkText="Kulttuuri">
       </HeroAsideItem>
       <HeroAsideItem
-        title="Verkostoitumista"
-        linkHref="#yritysyhteistyö"
+        header="Verkostoitumista"
+        link="#yritysyhteistyö"
         linkText="Yritysyhteistyö">
       </HeroAsideItem>
       <HeroAsideItem
-        title="Uusia suhteita ulkopaikkakuntalaisten kanssa"
-        linkHref="#ulkosuhteet"
+        header="Uusia suhteita ulkopaikkakuntalaisten kanssa"
+        link="#ulkosuhteet"
         linkText="Ulkoiset suhteet">
       </HeroAsideItem>
-    </HeroAsideSection>
-  </PageSection>
+    </aside>
+  </Hero>
 )
 
 export default ActualPageHero;

src/views/FrontPage/FrontPageHero.tsx

@@ -1,143 +1,15 @@
 import React from "react";
-import styled from "styled-components";
-import { PageSection } from "@components/index";
-import { colors } from "@theme/colors";
 import Anchor from "@components/Anchor";
-
-const HeroSection = styled(PageSection)`
-  min-height: 70vh;
-
-  section, aside {
-    padding: 0 1rem;
-  }
-
-  @media screen and (max-width: 800px) {
-    flex-direction: column;
-
-    aside {
-      margin: 48px auto;
-    }
-  }
-
-  color: ${colors.white};
-  background-color: ${colors.darkBlue};
-  a:hover {
-    color: ${colors.white};
-  }
-`;
-
-const MainSections = styled.div`
-  flex: 8;
-`;
-
-const PrimarySection = styled.section`
-  margin: 15vh auto 0;
-  max-width: 600px;
-  text-align: center;
-  line-height: 1.5rem;
-
-  h1 {
-    line-height: 40px;
-    @media screen and (max-width: 500px) {
-      font-size: 2rem;
-    }
-  }
-
-  p {
-    max-width: 400px;
-    margin: 1em auto;
-    font-weight: 100;
-  }
-`;
-
-const SecondarySection = styled.section`
-  background-color: blue;
-  /* height: 100%; */
-`;
-
-const Buttons = styled.div`
-  min-width: 20%;
-  max-width: fit-content;
-  margin: auto;
-  display: flex;
-  flex-direction: column;
-
-  a {
-    display: contents;
-  }
-
-  button {
-    color: ${colors.blue1};
-    background-color: transparent;
-    padding: 0.8rem 2rem;
-    margin: 0.5rem;
-    font-size: 0.8rem;
-    font-weight: 800;
-    letter-spacing: .1em;
-    text-transform: uppercase;
-    border: 1px solid ${colors.lightTurquoise};
-
-    &:hover {
-      cursor: pointer;
-      color: ${colors.white};
-    }
-
-    &:active,
-    &:focus {
-      outline: none;
-    }
-  }
-`;
-
-const AsideSection = styled.aside`
-  flex: 4;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-`;
-
-const AsideItem = styled.article`
-  max-width: 300px;
-  line-height: 1rem;
-  margin-bottom: 1rem;
-
-  h2 {
-    color: ${colors.lightBlue};
-    text-transform: uppercase;
-    letter-spacing: 3px;
-    line-height: 20px;
-  }
-
-  p, a {
-    color: ${colors.lightBlue};
-    font-size: 14px;
-    font-weight: 300;
-    line-height: 20px;
-  }
-
-  a {
-    color: ${colors.blue1};
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.1rem;
-
-    &:hover {
-      color: ${colors.white};
-    }
-  }
-`;
+import { Hero, HeroPrimarySection, HeroAsideItem, HeroPrimaryButtons } from "@components/NewHero";
 
 const FrontPageHero: React.FC = () => (
-  <HeroSection fullSize>
-    <MainSections>
-      <PrimarySection>
-        <h1>Aalto-yliopiston Sähköinsinöörikilta</h1>
-        <p>
-          on elektroniikan ja sähkötekniikan opiskelijoiden järjestö. Kilta
-          kasaa yhteen yli 600 alansa huippua, jotka ovat avainasemassa
-          vauhdilla sähköistyvän maailmamme kehityksessä.
-        </p>
-        <Buttons>
+  <Hero>
+    <div>
+      <HeroPrimarySection
+        header="Aalto-yliopiston Sähköinsinöörikilta"
+        text="on elektroniikan ja sähkötekniikan opiskelijoiden järjestö. Kilta kasaa yhteen yli 600 alansa huippua, jotka ovat avainasemassa vauhdilla sähköistyvän maailmamme kehityksessä."
+      >
+        <HeroPrimaryButtons>
           <Anchor to="/kilta">
             <button onClick={() => { }}>
               <span>Killan tehtävät&nbsp;›</span>
@@ -148,42 +20,31 @@ const FrontPageHero: React.FC = () => (
               <span>Vastapainoa opiskelulle&nbsp;›</span>
             </button>
           </Anchor>
-        </Buttons>
-      </PrimarySection>
-      <SecondarySection>
-      </SecondarySection>
-    </MainSections>
+        </HeroPrimaryButtons>
+      </HeroPrimarySection>
+    </div>
 
-    <AsideSection>
-      <AsideItem>
-        <h2>Vasta-aloittanut opiskelija</h2>
-        <p>
-          Fuksikasvatusta, ISO-toimintaa, lorem ipsum dolor sit ja amet.
-        </p>
-        <Anchor to={"/kilta/fuksi"}>
-          Fuksit&nbsp; ›
-        </Anchor>
-      </AsideItem>
-      <AsideItem>
-        <h2>Harkitsetko uraa alalla?</h2>
-        <p>
-          Oletko abi, vaihtamassa uraa tai valmistumassa?
-        </p>
-        <Anchor to={"/opinnot_ja_ura"}>
-          Opinnot ja ura&nbsp; ›
-        </Anchor>
-      </AsideItem>
-      <AsideItem>
-        <h2>Yhteistyö yritysten kanssa</h2>
-        <p>
-          Avoimet työpaikat ja excursiot. Infoa yritysten edustajille ja sponsseille.
-        </p>
-        <Anchor to={"/yritysyhteistyo"}>
-          Yritysyhteistyö&nbsp; ›
-        </Anchor>
-      </AsideItem>
-    </AsideSection>
-  </HeroSection>
+    <aside>
+      <HeroAsideItem
+        header="Vasta-aloittanut opiskelija"
+        text="Fuksikasvatusta, ISO-toimintaa, lorem ipsum dolor sit ja amet."
+        link="/kilta/fuksi"
+        linkText="Fuksit&nbsp; ›"
+      />
+      <HeroAsideItem
+        header="Harkitsetko uraa alalla?"
+        text="Oletko abi, vaihtamassa uraa tai valmistumassa?"
+        link="/opinnot_ja_ura"
+        linkText="Opinnot ja ura&nbsp; ›"
+      />
+      <HeroAsideItem
+        header="Yhteistyö yritysten kanssa"
+        text="Avoimet työpaikat ja excursiot. Infoa yritysten edustajille ja sponsseille."
+        link="/yritysyhteistyo"
+        linkText="Yritysyhteistyö&nbsp; ›"
+      />
+    </aside>
+  </Hero>
 );
 
 export default FrontPageHero;