styled freshmanpage and added fopas

src/views/FreshmenPage/FreshmenPageHero.tsx

@@ -11,6 +11,11 @@ const FreshmenPageHero: React.FC = () => (
     />
 
     <HeroAside bgColor="lightTurquoise">
+      <HeroAsideItem
+        header="Lue killan fuksiopas"
+        link="https://static.sahkoinsinoorikilta.fi/FTMK/Fuksiopas2021.pdf"
+        linkText="lue fuksiopas täältä!"
+      />
       <HeroAsideItem
         header="Seuraa killan tiedotusta"
         link="https://t.me/joinchat/rKg3rCtAVkkyNTdk"

src/views/FreshmenPage/FreshmenPageView.tsx

@@ -15,6 +15,17 @@ const EMAIL_LINK_MAILTO = `mailto:${EMAIL_LINK}`;
 const ImageContainer = styled.div`
   width: 100%;
   display: block;
+  margin: auto;
+`;
+
+const QRImages = styled.img`
+  width: 10em;
+  height: 10em;
+`;
+
+const FopasImage = styled.img`
+  width: 15em;
+  margin-bottom: 1em;
 `;
 
 const FreshmenPageView: React.FC = () => (
@@ -92,6 +103,16 @@ const FreshmenPageView: React.FC = () => (
         </div>
         <div>
           <InfoBox>
+            <Link to="https://static.sahkoinsinoorikilta.fi/FTMK/Fuksiopas2021.pdf">
+              <FopasImage 
+                src="https://static.sahkoinsinoorikilta.fi/FTMK/Fuksiopas2021-kansi.png"
+              />
+            </Link>
+            <h6>Killan Fuksiopas</h6>
+            <p>Ennen opintojen alkua on hyvä tutustua killan fuksioppaaseen. Sitä pääset selailemaan
+              <Link to="https://static.sahkoinsinoorikilta.fi/FTMK/Fuksiopas2021.pdf"> tästä.</Link>
+            </p>
+            <br/>
             <h6>Telegram?</h6>
             <p>
               Telegram on pikaviestinpalvelu, jota käytetään otaniemessä paljon.
@@ -101,23 +122,13 @@ const FreshmenPageView: React.FC = () => (
             <p>
               SIK:n fukseilla on oma Telegram-ryhmä, jonne pääset liitymään tästä:
             </p>
-            <Image
+            <QRImages
               src="https://static.sahkoinsinoorikilta.fi/FTMK/sik-fuksit-2021-tg.png"
-              alt="SIK-Fuksit 2021 TG"
-              layout="responsive"
-              width={0}
-              height={0}
-              objectFit="contain"
             />
             <p>tai <Link to="https://tinyurl.com/sik-fuksit-2021">tästä</Link></p>
             <p>Liity myös samalla SIK-fuksien tiedotuskanavalle tästä:</p>
-            <Image
+            <QRImages
               src="https://static.sahkoinsinoorikilta.fi/FTMK/sik-fuksit-2021-tiedotus-tg.png"
-              alt="SIK-Fuksit 2021 Tiedotus TG"
-              layout="responsive"
-              width={0}
-              height={0}
-              objectFit="contain"
             />
             <p>tai <Link to="https://tinyurl.com/sik-fuksit-2021-tiedotus">tästä</Link></p>
           </InfoBox>