Placeholder Hero SecondarySection

src/components/PageSection2.tsx

@@ -7,7 +7,7 @@ const Section = styled.section`
   flex-flow: row wrap;
   justify-content: space-between;
   position: relative;
-  padding: 2rem 1rem 2rem;
+  padding: ${(p) => p.fullSize ? "0" : "2rem 1rem 2rem"};
 
   &.sectionBg-darkBlue {
     color: ${colors.white};

src/views/FrontPage/FrontPageHero.tsx

@@ -5,9 +5,12 @@ import { colors } from "@theme/colors";
 import Anchor from "@components/Anchor";
 
 const HeroSection = styled(PageSection)`
-  padding: 0 1rem;
   min-height: 70vh;
 
+  section, aside {
+    padding: 0 1rem;
+  }
+
   @media screen and (max-width: 800px) {
     flex-direction: column;
 
@@ -23,28 +26,33 @@ const HeroSection = styled(PageSection)`
   }
 `;
 
-const MainSection = styled.section`
+const MainSections = styled.div`
   flex: 8;
+`;
 
-  & > div {
-    margin: 15vh auto 0;
-    max-width: 600px;
-    text-align: center;
-    line-height: 1.5rem;
+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;
+  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`
@@ -121,8 +129,8 @@ const AsideItem = styled.article`
 
 const FrontPageHero: React.FC = () => (
   <HeroSection fullSize>
-    <MainSection>
-      <div>
+    <MainSections>
+      <PrimarySection>
         <h1>Aalto-yliopiston Sähköinsinöörikilta</h1>
         <p>
           on elektroniikan ja sähkötekniikan opiskelijoiden järjestö. Kilta
@@ -141,8 +149,10 @@ const FrontPageHero: React.FC = () => (
             </button>
           </Anchor>
         </Buttons>
-      </div>
-    </MainSection>
+      </PrimarySection>
+      <SecondarySection>
+      </SecondarySection>
+    </MainSections>
 
     <AsideSection>
       <AsideItem>