@rocketsofawesome/mirage/src/components/aboutUs/aboutUs.js

[Live Demo of the Pattern Library](https://rocketsofawesome.github.io/mirage/)

import React from 'react'
import styled from 'styled-components'

import {
  H1,
  H2,
  P,
  FlexCol
} from 'SRC'

import defaultProps from './defaultProps'

const BaseAboutUs = ({ className, header, sections, footer, ...props }) => {
  return (
    <section className={className}>
      <FlexCol mobile={{ width: 4 }} desktop={{ width: 6, span: 3 }}>
        <H1>{header}</H1>
      </FlexCol>
      <FlexCol className='flexDiv' mobile={{ width: 4 }} desktop={{ width: 10, span: 1 }}>
        {sections.map((section, i) => {
          return (
            <FlexCol mobile={{ width: 4 }} desktop={{ width: 4 }} key={`about-us-${i}`}>
              <div>
                <H2>{section.title}</H2>
                <P>{section.body}</P>
              </div>
            </FlexCol>
          )
        })}
      </FlexCol>
      <FlexCol mobile={{ width: 4 }} desktop={{ width: 12 }}>
        <H2>{footer}</H2>
      </FlexCol>
    </section>
  )
}

const AboutUs = styled(BaseAboutUs)`
  ${H1}, ${H2} {
    text-align: center;
    text-transform: uppercase;
    @media (max-width: 958px) { font-size: 3.4rem; }
  }
  ${H1} {
    margin: 0 auto;
    margin-bottom: 20px;
  }
  ${H2} {
    color: ${props => props.theme.colors.rocketBlue};
    margin-top: 40px;
    margin-bottom: 10px;
  }
  ${P} {
    text-align: center;
    line-height: 1.5;
    max-width: 450px;
    margin: 0 auto;
    font-size: 18px;
    letter-spacing: 1px;
  }
  .flexDiv {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: 60px;
  }
`

AboutUs.defaultProps = {
  ...defaultProps,
  padding: true,
  constrained: true
}

/** @component */
export default AboutUs