From 7572b1ce3f8132ceba71ce8e6f223ff16baf2f0d Mon Sep 17 00:00:00 2001 From: Kamil Dzieniszewski Date: Wed, 27 Mar 2019 23:38:42 +0100 Subject: [PATCH] feat(Main): add Main section --- src/App.jsx | 4 +- src/assets/Blog.svg | 37 +++++++++++ src/assets/Projects.svg | 37 +++++++++++ src/assets/Team.svg | 120 ++++++++++++++++++++++++++++++++++ src/assets/background.svg | 21 ++++++ src/components/Navigation.jsx | 53 +++++++++++++-- src/sections/Main.jsx | 92 ++++++++++++++++++++++++++ 7 files changed, 359 insertions(+), 5 deletions(-) create mode 100644 src/assets/Blog.svg create mode 100644 src/assets/Projects.svg create mode 100755 src/assets/Team.svg create mode 100644 src/assets/background.svg create mode 100644 src/sections/Main.jsx diff --git a/src/App.jsx b/src/App.jsx index b88b9e2..f2c7e38 100755 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,10 +1,11 @@ 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 = () => ( @@ -12,6 +13,7 @@ const App = () => (
+
); diff --git a/src/assets/Blog.svg b/src/assets/Blog.svg new file mode 100644 index 0000000..d4eeb35 --- /dev/null +++ b/src/assets/Blog.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/Projects.svg b/src/assets/Projects.svg new file mode 100644 index 0000000..1884b5c --- /dev/null +++ b/src/assets/Projects.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/Team.svg b/src/assets/Team.svg new file mode 100755 index 0000000..95b9ed4 --- /dev/null +++ b/src/assets/Team.svg @@ -0,0 +1,120 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/background.svg b/src/assets/background.svg new file mode 100644 index 0000000..511c3e7 --- /dev/null +++ b/src/assets/background.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx index 8ab1d5a..a7c1eae 100644 --- a/src/components/Navigation.jsx +++ b/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 ; +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 ( + + ) }; export default Navigation; diff --git a/src/sections/Main.jsx b/src/sections/Main.jsx new file mode 100644 index 0000000..2c2672d --- /dev/null +++ b/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 () => ( + + {SECTION_INFO.map((section, i) => + + +
{section.header}
+ {section.info} + + Read more + + + + + )} + +);