Hero component

index.js

import React from 'react'
import styled from 'styled-components'
import Logo from './../bigLogo.svg'
import { media } from './../media'

const theme = {
  backgroundColor: {
    primary: '#f8f4eb'
  },
  textColor: {
    primary: '#000000',
    secondary: '#cf2f14'
  }
}

const HeroContainer = styled.div`
  height: 100vh;
  background-color: ${theme.backgroundColor.primary};
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 33px;
  padding-right: 33px;
  ${media.mini`
    padding-left: 35px;
    padding-right: 35px;
  `}
  ${media.xs`
    padding-left: 40px;
    padding-right: 40px;
  `}
  ${media.s`
    padding-left: 154px;
    padding-right: 154px;
  `}
  ${media.m`
    //background-color: aqua
    padding: 0
  `}
  ${media.l`
    //background-color: blue;
    padding: 0
  `}
  ${media.xl`
    //background-color: lightblue;
  `}
  ${media.xxl`
    //background-color: red;
  `}
`

const LogoContainer = styled.img`
  width: 100%;
  padding-top: 20px;
  max-width: 550px;
  ${media.mini`
    padding-top: 25px;    
  `}
  ${media.xs`
    padding-top: 30px;    
  `}
  ${media.s`
    padding-top: 40px;    
  `}
  ${media.m`
    padding-top: 30px;    
  `}
  ${media.l`
    padding-top: 50px;    
  `}
`

const Title = styled.div`
	font-size: 11px;
  color: ${theme.textColor.primary};
  text-transform: uppercase;
  width: 100%;
  text-align: ${(props) => props.align};
  font-family: AkzidenzGroteskBoldExtended;
  ${media.mini`
	  font-size: 12px;    
  `}
  ${media.xs`
	  font-size: 13px;    
  `}
  ${media.s`
	  font-size: 16px;    
  `}
  ${media.l`
	  font-size: 20px;
  `}
  ${media.xxl`
	  font-size: 27px;
  `}
`

const TitlesContainer = styled.div`
  width: 100%;
  display: flex;
  position: absolute;
  bottom: 15%;
`

const Heading = styled.div`
	font-size: 23px;
	line-height: 1.26;
	text-align: center;
  color: ${theme.textColor.secondary};
  position: absolute;
  top: 35%;
  width: 100%;
  font-family: AkzidenzGroteskBoldExtendedItalic;
  ${media.mini`
    font-size: 27px;
  `}
  ${media.xs`
    font-size: 30px;
  `}
  ${media.s`
    font-size: 40px;
  `}
  ${media.m`
    font-size: 45px;
  `}
  ${media.l`
    font-size: 50px;
  `}
  ${media.xl`
    font-size: 60px;
  `}
  ${media.xxl`
    font-size: 80px;
  `}
`

const Wrapper = styled.div`
  position: relative;
`

const Paragraph = styled.div`
  text-align: center;
  margin-top: 40px;
  font-family:AkzidenzGroteskCond;
	font-size: 14px;
	letter-spacing: 1px;
  color: ${theme.textColor.primary};
`

const Hero = (props) => (
  <HeroContainer>
    <Wrapper>
      <Heading>DESIGNING AND DEVELOPING SINCE 2000</Heading>
      <Title align='center'>technology</Title>
      <LogoContainer src={Logo} />
      <TitlesContainer>
        <Title align='left'>business</Title>
        <Title align='right'>design</Title>
      </TitlesContainer>
    </Wrapper>
    {false && <Paragraph>Our aim is to make all solutions viable,<br /> feasible and desirable</Paragraph>}
  </HeroContainer>
)

export default Hero