feat(Main): add Main section

src/App.jsx

@@ -1,17 +1,19 @@
 import React from "react";
 import { ThemeProvider } from "styled-components";
-import { ButtonPrimary, ButtonSecondary } from "./components/Button";
 import theme from "./styles/theme";
 import { GlobalStyle } from "./styles/global";
 import Header from "./sections/Header";
 import Hero from "./sections/Hero";
+import Main from "./sections/Main";
+
 
 const App = () => (
   <ThemeProvider theme={theme}>
     <main>
       <GlobalStyle />
       <Header />
       <Hero />
+      <Main />
     </main>
   </ThemeProvider>
 );

src/components/Navigation.jsx

@@ -1,9 +1,54 @@
-import React, { useState } from "react";
+import React from "react";
+import styled from "styled-components";
 
-const Navigation = () => {
-  const [isOpen, setIsOpen] = useState(false);
+const NavigationContainer = styled.ul`
+  display: flex;
+  list-style: none;
+  color: ${({ theme }) => theme.colors.white};
+`;
+
+const NavigationElement = styled.li`
+  color: ${({ theme }) => theme.colors.white};
+  margin-right: 1rem;
+`;
 
-  return <nav>Test</nav>;
+const MENU_ELEMNTS = [
+  {
+    link: '/',
+    name: 'Home'
+  },
+  {
+    link: '#team',
+    name: 'Team'
+  },
+  {
+    link: '#projects',
+    name: 'Projects'
+  },
+  {
+    link: '#blog',
+    name: 'Blog'
+  },
+  {
+    link: '#contact',
+    name: 'Contact'
+  }
+]
+
+const Navigation = () => {
+  return (
+    <nav>
+      <NavigationContainer>
+        {MENU_ELEMNTS.map((el, i) =>
+          <NavigationElement key={i}>
+            <a href={el.link}>
+              {el.name}
+            </a>
+          </NavigationElement>
+        )}
+      </NavigationContainer>
+    </nav>
+  )
 };
 
 export default Navigation;

src/sections/Main.jsx

@@ -0,0 +1,92 @@
+import React from "react";
+import styled from "styled-components";
+import colors from "../styles/colors";
+import { breakpoints } from "../styles/variables";
+import { space, media } from "../styles/helpers";
+import { ButtonPrimary } from "../components/Button";
+import teamImage from "../assets/Team.svg";
+import projectsImage from "../assets/Projects.svg";
+import blogImage from "../assets/Blog.svg"
+
+const MainContainer = styled.section`
+  width: ${breakpoints.desktop};
+  padding: ${space(8)} ${space(2)} ${space(4)};
+`;
+
+const SectionContainer = styled.div`
+  display: flex;
+  flex-direction: row
+  ${media.lessThan('tablet')`
+     flex-direction: column-reverse
+  `}
+`;
+
+const Info = styled.div`
+  width: 50%
+  ${media.lessThan('desktop')`
+    width: 100%
+  `}
+`;
+
+const Image = styled.img`
+  width: 50%
+  ${media.lessThan('desktop')`
+    width: 100%
+  `}
+`;
+
+
+const Header = styled.h2`
+  margin: 0;
+  font-weight: bold;
+  font-size: 59px;
+  line-height: 71px;
+  color: ${colors.oceanBlue};
+`;
+
+const Paragraph = styled.p`
+  font-size: 25px;
+  line-height: 35px;
+  color: ${colors.oceanBlue};
+`;
+
+const SECTION_INFO = [
+  {
+    id: '#team',
+    header: 'Get to know us better.',
+    info: 'We are a teams of friends who combines passion for their work. Each of us is unique and has different experience.',
+    link: '/asd',
+    image: teamImage
+  },
+  {
+    id: '#project',
+    header: 'See our projects.',
+    info: 'We create with passion, we approach each project creatively. We focus on making a  functional and looking good product.',
+    link: '/asd',
+    image: projectsImage
+  },
+  {
+    id: '#blog',
+    header: `We're writing a blog!`,
+    info: 'We have a blog where you can read about the curiosities from our industry and you will learn a bit more about what we do!',
+    link: '/asd',
+    image: blogImage
+  }
+]
+
+export default () => (
+  <MainContainer>
+    {SECTION_INFO.map((section, i) =>
+      <SectionContainer id={section.id}>
+        <Info>
+          <Header>{section.header}</Header>
+          <Paragraph>{section.info}</Paragraph>
+          <ButtonPrimary as='a' href={section.link}>
+            Read more
+          </ButtonPrimary>
+        </Info>
+        <Image src={section.image} />
+      </SectionContainer>
+    )}
+  </MainContainer>
+);