Merge branch 'kirsten/landing'

public/index.html

@@ -12,7 +12,10 @@
 	<link rel="preconnect" href="https://fonts.googleapis.com">
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 	<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
-
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Moul&display=swap" rel="stylesheet">
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-1S5BF4RKRZ"></script>
     <script>

src/components/Landing.js

@@ -1,12 +1,14 @@
 import React from "react";
 import styled from "styled-components";
+import StarIcon from "../images/Star.svg";
 
 const Container = styled.div`
   width: 100%;
   height: fit-content;
   position: relative;
   margin: auto;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   background: #d5e7f2;
@@ -15,17 +17,73 @@ const Container = styled.div`
   z-index: 1;
 `;
 
+const TitleContainer = styled.div`
+  width: 100%;
+  justify-content: center;
+  background: #265ca9;
+  background-position: center;
+  display: flex;
+`;
+
+const Star = styled.div`
+  background-image: url(${StarIcon});
+  background-size: contain; 
+  background-repeat: no-repeat; 
+  background-position: center; 
+  z-index: 2;
+  width: 3em;
+  margin-bottom: 0.75em;
+`;
+
+const Title = styled.div`
+    width: auto;
+    font-family: "Moul";
+    font-size: clamp(40px, 5vw, 75px);
+    font-weight: 400;
+    line-height: normal;
+    text-align: center;
+    color: #FBFBFB;
+    margin: 0 1.25em;
+`
+
+const WhiteStripe = styled.div`
+  width: 100%;
+  height: 1em;
+  margin: 0 auto;
+  background: #ffffff;
+  position: relative;
+  z-index: 1;
+`;
+
+const RedStripe = styled.div`
+  width: 100%;
+  height: 1em;
+  margin: 0 auto;
+  background: #cd2027;
+  position: relative;
+  z-index: 1;
+`;
+
+
 const Landing = () => {
 
     return (
         <>
             <Container>
+            <TitleContainer>
+            <Star />
+            <Title>POLLING AVERAGES</Title>
+            <Star />
+            </TitleContainer>
+            <WhiteStripe />
+            <RedStripe />
             <iframe src="https://public.flourish.studio/visualisation/20011174/embed" 
         width="100%" 
         height="600px" 
         frameborder="0" 
         scrolling="no" 
-        allowfullscreen>
+        allowfullscreen
+        title="polling averages">
         </iframe>
             </Container>
         </>