text: import React from 'react';
  import { withPrefix } from 'gatsby';
  import styled from 'styled-components';
  import siteConfig from '../../../data/siteConfig';
  
  const HeroContainer = styled.div`
    position: relative;
    display: table;
    width: 100%;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  `;
  
  const TitleContainer = styled.div`
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
  `;
  
  const HeroTitle = styled.h1`
    font-weight: 700;
    font-size: 3rem;
    margin: 10px;
    color: #fff;
    text-shadow: 1px 1px 4px rgba(34, 34, 34, 0.6);
  `;
  
  const Hero = ({ title, className }) => (
    <HeroContainer className={className}>
      <TitleContainer>
        <HeroTitle>{title}</HeroTitle>
      </TitleContainer>
    </HeroContainer>
  );
  
  export default styled(Hero)`
    ${p =>
      `background-image: url(${p.heroImg || withPrefix(siteConfig.siteCover)});`}
    height: 70vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  `;
  