partnerships and footer

src/App.js

@@ -4,6 +4,7 @@ import LandingPage from "./pages/LandingPage";
 import Challenges from "./pages/Challenges";
 import {BrowserRouter, Route, Routes} from "react-router-dom";
 import NavBar from "./components/elements/NavBar";
+import Footer from "./components/sections/Footer";
 
 const App = () => {
     return (
@@ -15,6 +16,7 @@ const App = () => {
                     <Route exact path='/' element={<LandingPage/>}/>
                     <Route element={<LandingPage/>}/>
                 </Routes>
+                <Footer/>
             </ThemeProvider>
         </BrowserRouter>
     );

src/components/elements/Placeholder.js

@@ -0,0 +1,14 @@
+import React from "react";
+import {FlexColumn} from "../../utils/containers";
+import theme from "../../utils/theme";
+
+const Placeholder = (props) => {
+    return (
+        <FlexColumn width='200px' height='200px'
+                    backgroundColor={theme.colors.dark} color={theme.colors.white}>
+            {props.children}
+        </FlexColumn>
+    );
+}
+
+export default Placeholder;

src/components/sections/Footer.js

@@ -0,0 +1,39 @@
+import React from "react";
+import {Container, FlexRow} from "../../utils/containers";
+import styled from "styled-components";
+import {Medium} from "../../utils/fonts";
+import {Link} from "react-router-dom";
+
+const FooterStyle = styled(FlexRow)`
+  width: 100%;
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${({theme}) => theme.colors.green};
+
+  * {
+    color: ${({theme}) => theme.colors.white}
+  }
+
+  a {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+`;
+
+const Footer = () => {
+    return (
+        <FooterStyle as='footer'>
+            <Medium as='p'>
+                Read more about&nbsp;
+                <Container as='a' display='inline' target='_blank'
+                           href='https://wmi.amu.edu.pl/wiadomosci/wmi-w-mediach/centrum-sztucznej-inteligencji'>
+                    CSI
+                </Container>
+            </Medium>
+        </FooterStyle>
+    );
+}
+
+export default Footer;

src/components/sections/Hero.js

@@ -8,7 +8,7 @@ import {Link} from "react-router-dom";
 const Hero = () => {
     return (
         <FlexColumn alignmentX='flex-start' gap='24px'
-                    width='80%' maxWidth='452px' margin='90px 0 0 0'>
+                    width='80%' maxWidth='452px'>
             <H1 as="h1">
                 Welcome to
                 <Container display="inline" color={theme.colors.green}>

src/components/sections/Partnerships.js

@@ -0,0 +1,32 @@
+import React from "react";
+import {FlexColumn, Grid} from "../../utils/containers";
+import {H2} from "../../utils/fonts";
+import Placeholder from "../elements/Placeholder";
+
+const Partnerships = () => {
+    return (
+        <FlexColumn as='section' alignmentX='flex-start' width='80%' maxWidth='452px' gap='32px'>
+            <H2 as='h2'>
+                Our partnerships
+            </H2>
+            <FlexColumn width='100%'>
+                <Grid gridGap='32px 0'>
+                    <Placeholder>
+                        1
+                    </Placeholder>
+                    <Placeholder>
+                        2
+                    </Placeholder>
+                    <Placeholder>
+                        3
+                    </Placeholder>
+                    <Placeholder>
+                        4
+                    </Placeholder>
+                </Grid>
+            </FlexColumn>
+        </FlexColumn>
+    );
+}
+
+export default Partnerships;

src/pages/LandingPage.js

@@ -4,14 +4,17 @@ import Motivation from "../components/sections/Motivation";
 import Csi from "../components/sections/Csi";
 import Commercial from "../components/sections/Commercial";
 import Hero from "../components/sections/Hero";
+import Partnerships from "../components/sections/Partnerships";
 
 const LandingPage = () => {
     return (
-        <FlexColumn alignmentY='flex-start' width='100%' minHeight='100vh' as='main' gap='48px'>
+        <FlexColumn as='main' alignmentY='flex-start' width='100%'
+                    minHeight='100vh' padding='90px 0 32px 0' gap='48px'>
             <Hero/>
             <Motivation/>
             <Csi/>
             <Commercial/>
+            <Partnerships/>
         </FlexColumn>
     );
 }