Don't look at this

package.json

@@ -5,6 +5,7 @@
   "version": "0.1.0",
   "author": "Kyle Mathews <[email protected]>",
   "dependencies": {
+    "animejs": "^3.2.0",
     "gatsby": "^2.23.12",
     "gatsby-image": "^2.4.9",
     "gatsby-plugin-manifest": "^2.4.14",
@@ -18,6 +19,7 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-helmet": "^6.1.0",
+    "scrollmonitor-hooks": "^1.0.2",
     "styled-components": "^5.1.1"
   },
   "devDependencies": {

src/components/Footer.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import styled from "styled-components"
+import logo from '../images/ clearLogo.png';
+
+const Layout = styled.div`
+  display: flex;
+  flex-direction: row;
+  `
+
+const Title = styled.div`
+font-style: normal;
+font-weight: normal;
+font-size: 18px;
+line-height: 25px;
+color: #D9E2FF;
+`
+
+const Cosmo = styled.div`
+font-style: italic;
+font-weight: bold;
+font-size: 20px;
+line-height: 27px;
+color: #FFFFFF;
+`
+
+const Footer = () => {
+    return(
+        <div className="main-footer">
+            <Layout style={{justifyContent: 'space-between'}}>
+<Layout>
+                    <Layout >
+                    <div>
+                    <img src={logo} alt="website logo" height="90" width="90"/>
+                    </div>
+                    </Layout>
+                    <Layout>
+                    <div>
+                       <Title>Northeastern University</Title>
+                       <Cosmo>Computer Science Mentoring Organization</Cosmo>
+                    </div>
+                    </Layout>
+                    </Layout>
+                    <Layout>
+                        <Title >Follow us on social media!</Title>
+                    </Layout>
+            </Layout>
+            <div className="container">
+
+            </div>
+        </div>
+    )
+}
+
+export default Footer;

src/components/animated-svg.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+import useWindowDimensions from '../hooks/useWindowDimensions';
+const MorphWrap = styled.div`
+    position: relative;
+    overflow: visible;
+    width:100%;
+    height:100%;
+    min-width: 1800px`
+    const Morph = styled.svg`
+    position: absolute;
+    margin: auto;`
+const AnimatedSVG = (props) => {
+    const { height, width } = useWindowDimensions();
+    const scale = 1.1;
+    const style = {
+        top: (height/2) - 550
+    };
+    return (
+        <MorphWrap>
+            <Morph style={style} className="morph" viewBox={`${0} 0 ${1800} ${1100}`}>
+                <path className="front-path" d={props.frontPath} />
+                <path className="back-path" d={props.backPath} />
+            </Morph>
+        </MorphWrap>
+    );
+}
+export default AnimatedSVG;

src/components/header/header.js

@@ -0,0 +1,55 @@
+import { Link } from "gatsby"
+import React from "react"
+
+import styled from "styled-components"
+import logo from "./logo.svg"
+
+const LogoContainer = styled.img`
+  height: 100px;
+  width: 105px;
+  margin-bottom: 0;
+`
+
+const HeaderContainer = styled.div`
+  margin: 0 auto;
+  max-width: 1400px;
+  padding: 1rem 1.0875rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`
+
+const Links = styled.div`
+  display: flex;
+  align-items: baseline;
+`
+
+const LinkContainer = styled(Link)`
+  color: #d9e2ff;
+  text-decoration: none;
+  &:not(:last-child) {
+    padding-right: 49px;
+  }
+`
+
+const Header = () => (
+  <header
+    style={{
+      background: `#020a39`,
+    }}
+  >
+    <HeaderContainer>
+      <Link to="/">
+        <LogoContainer src={logo} />
+      </Link>
+      <Links>
+        <LinkContainer to="/">about</LinkContainer>
+        <LinkContainer to="/mentors">mentors</LinkContainer>
+        <LinkContainer to="/">news</LinkContainer>
+        <LinkContainer to="/">team</LinkContainer>
+      </Links>
+    </HeaderContainer>
+  </header>
+)
+
+export default Header

src/components/landing.js

@@ -0,0 +1,67 @@
+import styled from "styled-components";
+import SectionContainer from "./section-container";
+import { useScrollMonitor } from 'scrollmonitor-hooks';
+import React, { useRef } from "react"
+
+const TitleContainer = styled.div`
+padding: 100px 100px 0px 100px;
+`
+const University = styled.p`
+font-family: Nunito Sans;
+font-style: normal;
+font-weight: normal;
+font-size: 36px;
+line-height: 49px;
+color: #D9E2FF;
+`
+
+const Name = styled.p`
+width: 530px;
+font-family: Nunito Sans;
+font-style: italic;
+font-weight: bold;
+font-size: 48px;
+line-height: 65px;
+color: #FFFFFF;
+margin-bottom: 100px;
+`
+const InfoSection = styled.div`
+max-width: 600px;
+font-family: Nunito Sans;
+font-style: normal;
+font-weight: normal;
+font-size: 24px;
+line-height: 33px;
+text-align: right;
+color: white;
+text-wrap: pre;
+margin-bottom: 30px;
+`
+const InfoContainer = styled.div`
+display: flex;
+flex-direction: column;
+align-items: flex-end;
+position: relative;
+height: 100%;
+width: 100%;
+`
+
+const Landing = ({callbacks}) => {
+    const ref = useRef(null);
+    useScrollMonitor(ref, callbacks);
+    return (
+        <SectionContainer callbacks={callbacks}>
+            <TitleContainer>
+                <University>Northeastern University</University>
+                <Name ref={ref}>Computer Science Mentoring Organization</Name>
+                <InfoContainer>
+                    <InfoSection>Northeastern's Computer Science Mentoring Organization serves to better connect Northeastern students who are interested in computer science.</InfoSection>
+                    <InfoSection>We run a mentorship program every semester where undergraduates who are interested in computer science can get the help they need with classes, co-ops, and more.</InfoSection>
+                    <InfoSection>CoSMO is open to all. No prior CS experience required!</InfoSection>
+                </InfoContainer>
+            </TitleContainer>
+        </SectionContainer>
+    )
+}
+
+export default Landing;

src/components/mentor/mentor-container.js

@@ -2,6 +2,7 @@ import React from "react"
 import styled from "styled-components"
 import Mentor from "./mentor"
 import ContactBox from "./contactBox"
+import Footer from "../Footer"
 
 /*
 Mentor format:
@@ -110,6 +111,7 @@ const MajorContainer = props => {
           <ContactBox />
         </ContactContainer>
       </MentorsContainer>
+      <Footer></Footer>
     </div>
   )
 }

src/components/mentor/mentor.js

@@ -75,6 +75,7 @@ const Mentor = ({
           <Info>{`${strYear} Year`}</Info>
           <Info>{email}</Info>
           {!isOpen && <p>{skills.map(skill => `#${skill} `)}</p>}
+
         </Layout>
         {isOpen && (
           <div>

src/components/section-container.js

@@ -0,0 +1,19 @@
+import styled from "styled-components"
+import React from "react"
+
+
+const SectionContainerBase = styled.div`
+width: 100%;
+height: 900px;
+max-width: 1600px;
+margin: auto;
+`
+
+const SectionContainer = ({children}) => {
+    return (
+        <SectionContainerBase className="content-wrap">
+            {children}
+        </SectionContainerBase>
+    );
+}
+export default SectionContainer;