DeKal / portfolio-next-js

import React from 'react'

import styled from 'styled-components/macro'

import Container from 'react-bootstrap/Container'

import { WHYME } from '~/modules/home/consts/pages'

import Title from '~/modules/home/components/whyme/Title'

import Quote from '~/modules/home/components/whyme/Quote'

import { Translate } from 'react-localize-redux'

const WhyMe = () => (

  <Section id={WHYME}>

    <Inner>

      <Title>

        <Translate id="Why me: Title" />

      </Title>

      <Quote>

        <Translate id="Why me: Quote" />

      </Quote>

    </Inner>

  </Section>

)

export default WhyMe

const Section = styled(Container)`

  position: relative;

`

const Inner = styled.div`

  text-align: center;

  margin-top: 100px;

  &::after,

  &::before {

    content: '';

    position: absolute;

    top: 15px;

    height: calc(100% - 15px);

  }

  &::before {

    left: 15px;

    border-left: 5px solid ${props => props.theme.colors.colorAccent};

  }

  &::after {

    left: -15px;

    border-right: 5px solid ${props => props.theme.colors.colorAccent};

    width: 100%;

  }

  @media screen and (max-width: 800px) {

    margin-top: 30px;

  }

`