<file_sep>import React from 'react'
import css from '../../lib/css/'
import styles from './styles'
import Tabs from 'react-responsive-tabs'

export default ({
  tabs = []
}) => {
  const getTabs = () => tabs.map(tab => ({
    ...tab,
    content: (
      <div
        className={css(styles.content)}
        dangerouslySetInnerHTML={{
          __html: tab.content
        }}
      />
    )
  }))

  return (
    <div className={css(styles.tabs)}>
      <Tabs items={getTabs()} />
    </div>
  )
}
<file_sep>import {
  rhythm,
  colors,
  transitions,
  fonts,
  scale
} from '../../lib/traits'

export default {
  base: {
    display: 'block',
    lineHeight: 1,
    borderRadius: rhythm(0.2),
    textAlign: 'center',
    width: '100%',
    backgroundColor: 'transparent',
    fontFamily: fonts.display,
    transition: `box-shadow ${transitions.easeOut}`
  },
  type: {
    yellow: {
      padding: `${rhythm(0.5)} ${rhythm(0.3)}`,
      backgroundColor: colors.yellow,
      color: colors.blue,
      boxShadow: '0 0 1px transparent',
      position: 'relative',
      flex: '1',
      transform: 'perspective(1px) translateZ(0)',
      transitionProperty: 'color',
      transitionDuration: '0.3s',
      border: '3px solid #FFD800',
      fontSize: scale(3),
      '@media screen and (min-width:860px)': {
        fontSize: scale(5)
      },
      ':before': {
        content: '""',
        position: 'absolute',
        zIndex: '-1',
        top: '0',
        bottom: '0',
        left: '0',
        right: '0',
        backgroundColor: colors.blue,
        transform: 'scaleX(0)',
        transformOrigin: '50%',
        transitionProperty: 'transform',
        transitionDuration: '0.5s',
        transitionTimingFunction: 'ease-out'
      },
      ':hover': {
        color: colors.yellow,
        ':before': {
          transform: 'scaleX(1)'
        }
      }
    },
    nav: {
      backgroundColor: 'transparent',
      color: colors.yellow,
      margin: `${rhythm(0.1)} 0`,
      boxShadow: '0 0 1px transparent',
      textShadow: '1px 2px #333',
      position: 'relative',
      transform: 'perspective(1px) translateZ(0)',
      transitionProperty: 'color',
      transitionDuration: '0.3s',
      border: 'none',
      padding: rhythm(0.1),
      fontSize: scale(1.2),
      textAlign: 'right',
      '@media screen and (min-width:970px)': {
        fontSize: scale(1.5),
        maxWidth: '6.5rem',
        textAlign: 'center',
        backgroundColor: colors.yellow,
        color: colors.grey,
        textShadow: 'none',
        border: '3px solid #FFD800',
        margin: rhythm(0.2),
        padding: `${rhythm(0.2)} ${rhythm(0.4)}`,
        ':hover': {
          color: colors.yellow,
          ':before': {
            transform: 'scaleX(1)'
          }
        }
      },
      ':before': {
        content: '""',
        position: 'absolute',
        zIndex: '-1',
        top: '0',
        bottom: '0',
        left: '0',
        right: '0',
        backgroundColor: colors.grey,
        transform: 'scaleX(0)',
        transformOrigin: '50%',
        transitionProperty: 'transform',
        transitionDuration: '0.5s',
        transitionTimingFunction: 'ease-out'
      },
      ':hover': {
        color: colors.light,
        ':before': {
          transform: 'scaleX(1)'
        }
      }
    },
    select: {
      boxShadow: '0 0 1px transparent',
      position: 'relative',
      transform: 'perspective(1px) translateZ(0)',
      transitionProperty: 'color',
      transitionDuration: '0.3s',
      fontSize: scale(1.5),
      maxWidth: '6.5rem',
      textAlign: 'center',
      backgroundColor: colors.yellow,
      color: colors.blue,
      textShadow: 'none',
      border: '3px solid #FFD800',
      margin: '0 auto',
      padding: `${rhythm(0.2)} ${rhythm(0.4)}`,
      ':before': {
        content: '""',
        position: 'absolute',
        zIndex: '-1',
        top: '0',
        bottom: '0',
        left: '0',
        right: '0',
        backgroundColor: colors.blue,
        transform: 'scaleX(0)',
        transformOrigin: '50%',
        transitionProperty: 'transform',
        transitionDuration: '0.5s',
        transitionTimingFunction: 'ease-out'
      },
      ':hover': {
        color: colors.yellow,
        ':before': {
          transform: 'scaleX(1)'
        }
      }
    },
    readMore: {
      border: '0',
      color: colors.blue,
      textAlign: 'left',
      padding: `${rhythm(0.3)}`,
      fontSize: scale(0.5)
    },
    modal: {
      border: '0',
      color: colors.light,
      textAlign: 'center',
      padding: `${rhythm(0.3)}`,
      fontSize: scale(2),
      fontWeight: '800'
    }
  }
}
<file_sep>import React from 'react'
import css from '../../lib/css/'
import styles from './styles'

export default ({
  title = '',
  footerLinks = [],
  socialLinks = []
}) => (
  <footer className={css(styles.base)}>
    <div className={css(styles.wrapper)}>
      <div>
        <h2 className={css(styles.title)}>{title}</h2>
        {footerLinks.map((link, i) => (
          <div className={css(styles.footerLink)} key={i}><a target='_blank' href={link.link}>{link.label}</a></div>
        ))}
      </div>
      <div>
        <ul className={css(styles.socialLinks)}>
          {socialLinks.map((link, i) => (
            <li key={i}><a className={css(styles.socialLink)} target='_blank' href={link.url}><i className={`fa fa-${link.network}`} /></a></li>
          ))}
        </ul>
      </div>
    </div>
  </footer>
)
<file_sep>import {
  colors,
  rhythm,
  scale,
  fonts
} from '../../lib/traits'

import bgImage from './bg.jpg'

export default {
  wrapper: {
    fontFamily: fonts.interface,
    fontWeight: '300',
    width: '100%',
    backgroundColor: colors.blue,
    backgroundImage: `url(${bgImage})`,
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover'
  },
  titleWrap: {
    backgroundColor: colors.yellow
  },
  heading: {
    position: 'relative',
    fontFamily: fonts.display,
    maxWidth: '70em',
    width: '100%',
    margin: '0 auto'
  },
  title: {
    color: colors.light,
    fontSize: scale(3),
    fontWeight: '800',
    padding: `${rhythm(1)} ${rhythm(0.5)}`,
    textShadow: '1px 1px 1px #ae9300',
    '@media screen and (min-width:1160px)': {
      padding: `${rhythm(1)} 0`
    }
  },
  textWrap: {
    position: 'relative',
    maxWidth: '70em',
    width: '100%',
    margin: '0 auto',
    backgroundColor: 'transparent',
    paddingTop: rhythm(1),
    padding: `${rhythm(1)} ${rhythm(0.5)}`,
    '@media screen and (min-width:1160px)': {
      padding: `${rhythm(1)} 0`
    }
  },
  text: {
    padding: '1rem 0',
    color: colors.light,
    fontWeight: '300',
    'p': {
      paddingBottom: rhythm(1),
      fontSize: scale(1)
    },
    'strong': {
      fontWeight: '800',
      fontSize: scale(2)
    },
    '@media screen and (min-width:860px)': {
      display: 'flex'
    }
  }
}
<file_sep>import {
  fonts
} from '../../lib/traits'

export default {
  wrapper: {
    fontFamily: fonts.display,
    fontWeight: '300',
    width: '100%',
    overflowX: 'hidden'
  },
  slider: {
    width: '100%',
    paddingTop: '50px',
    '.slick-track': {
      display: 'flex'
    }
  },
  banner: {
    'img': {
      width: '100%'
    }
  },
  sliderHidden: {
    display: 'none'
  }
}
<file_sep>import React from 'react'
import { Route, IndexRoute } from 'react-router'

import Home from './Home'
import MCRI from './MCRI'
import GetInvolved from './GetInvolved'
import FAQs from './FAQs'

export default (
  <Route
    path='/'
    component={({ children }) => children}>
    <IndexRoute
      component={Home}
    />
    <Route
      path='mcri'
      component={MCRI}
    />
    <Route
      path='get-involved'
      component={GetInvolved}
    />
    <Route
      path='faqs'
      component={FAQs}
    />
  </Route>
)
<file_sep>import {
  rhythm,
  colors,
  fonts
} from '../../lib/traits'

export default {
  wrapper: {
    width: '100%',
    fontFamily: fonts.display,
    position: 'relative',
    maxWidth: '70em',
    padding: `${rhythm(1.5)} 0 ${rhythm(2)}`,
    margin: 'auto',
    color: colors.blue
  },
  widgets: {
    '@media screen and (min-width:860px)': {
      display: 'flex',
      alignItems: 'center'
    }
  },
  widget: {
    flex: 1
  },
  svg: {
    display: 'block',
    margin: 'auto',
    width: '100%'
  },
  raisedIcon: {},
  label: {
    textTransform: 'uppercase',
    fontSize: '11px'
  },
  labelLarge: {
    fontSize: '16px'
  },
  total: {
    fontSize: '16px'
  },
  indicator: {
    stroke: colors.yellow,
    strokeWidth: 2,
    strokeLinecap: 'round'
  },
  filledIndicator: {
    stroke: colors.blue
  }
}
<file_sep>import {
  rhythm,
  scale,
  colors,
  fonts
} from '../../lib/traits'

export default {
  wrapper: {
    width: '100%',
    fontFamily: fonts.interface,
    fontWeight: '300',
    backgroundColor: colors.blue
  },
  titleWrap: {
    backgroundColor: colors.yellow
  },
  heading: {
    fontFamily: fonts.display,
    position: 'relative',
    maxWidth: '70em',
    width: '100%',
    margin: '0 auto'
  },
  title: {
    color: colors.light,
    fontSize: scale(3),
    fontWeight: '800',
    padding: `${rhythm(1)} ${rhythm(0.5)}`,
    textShadow: '1px 1px 1px #ae9300',
    '@media screen and (min-width:1160px)': {
      padding: `${rhythm(1)} 0`
    }
  },
  tiles: {
    listStyle: 'none',
    display: 'flex',
    justifyContent: 'space-between',
    padding: `${rhythm(0.5)} 0`,
    flexDirection: 'column',
    position: 'relative',
    maxWidth: '70em',
    margin: '0 auto',
    '@media screen and (min-width:1160px)': {
      flexDirection: 'row',
      padding: `${rhythm(1.5)} 0`
    }
  },
  tile: {
    position: 'relative',
    padding: rhythm(0.5),
    display: 'flex',
    alignItems: 'flex-end',
    flexShrink: '1',
    justifyContent: 'space-between',
    alignContent: 'space-between',
    boxSizing: 'border-box',
    width: '100%'
  },
  link: {
    position: 'relative',
    display: 'block',
    overflow: 'hidden',
    width: '100%',
    ':after': {
      content: '""',
      position: 'absolute',
      zIndex: '1',
      top: '0',
      bottom: '0',
      left: '0',
      right: '0',
      backgroundColor: 'rgba(0, 0, 0, 0.1)',
      transition: 'background-color 250ms linear'
    },
    'img': {
      transform: scale(1.2),
      width: '100%',
      transition: 'transform 250ms linear'
    },
    ':hover': {
      ':after': {
        backgroundColor: 'rgba(0, 0, 0, 0.4)'
      }
    }
  },
  overlay: {
    position: 'absolute',
    background: 'transparent',
    color: colors.light,
    fontFamily: fonts.display,
    fontWeight: '800',
    textShadow: '1px 1px 1px #333',
    left: rhythm(0.5),
    width: '100%',
    height: '100%',
    bottom: '0',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'flex-end',
    zIndex: '2',
    transition: 'all 500ms cubic-bezier(0.65, 0.05, 0.36, 1) 0s',
    ':hover': {
      bottom: '20%'
    },
    'h1': {
      textTransform: 'uppercase',
      fontSize: scale(4),
      '@media screen and (min-width:590px)': {
        fontSize: scale(5)
      }
    },
    'p': {
      fontSize: scale(2),
      '@media screen and (min-width:590px)': {
        fontSize: scale(3)
      }
    }
  }
}
<file_sep>import {
  rhythm,
  scale,
  colors,
  fonts
} from '../../lib/traits'

export default {
  wrapper: {
    width: '100%',
    fontFamily: fonts.display,
    position: 'relative',
    maxWidth: '70em',
    margin: '0 auto',
    overflowX: 'hidden'
  },
  tiles: {
    listStyle: 'none',
    display: 'flex',
    justifyContent: 'space-between',
    padding: `${rhythm(0.5)} 0`,
    flexDirection: 'column',
    '@media screen and (min-width:860px)': {
      flexDirection: 'row',
      padding: `${rhythm(1.5)} 0`
    }
  },
  tile: {
    position: 'relative',
    padding: rhythm(0.5),
    display: 'flex',
    flex: '1',
    boxSizing: 'border-box',
    width: '100%'
  },
  link: {
    display: 'block',
    overflow: 'hidden',
    width: '100%',
    'h3': {
      color: colors.blue,
      textShadow: '1px 1px #0c7898',
      fontSize: scale(4),
      textAlign: 'center',
      fontWeight: '800',
      paddingTop: rhythm(1),
      flexShrink: '0'
    },
    'p': {
      textAlign: 'center',
      flexShrink: '0',
      paddingTop: rhythm(0.5),
      marginBottom: 'auto',
      alignSelf: 'baseline'
    },
    'img': {
      position: 'relative',
      display: 'inline-block',
      verticalAlign: 'middle',
      transform: 'perspective(1px) translateZ(0)',
      boxShadow: '0 0 1px transparent'
    },
    '@keyframes pop': {
      '50%': {
        transform: 'scale(1.2)'
      }
    },
    ':hover': {
      'img': {
        animationName: 'pop',
        animationDuration: '0.8s',
        animationTimingFunction: 'linear',
        animationIterationCount: '1'
      },
      ':after': {
        backgroundColor: 'rgba(0, 0, 0, 0.4)'
      }
    }
  }
}
<file_sep>import React from 'react'
import prismicUtils from 'prismic-utils'
import { renderToStaticMarkup } from 'react-dom/server'
import styles from './styles'
import css from '../../../lib/css'

const htmlSerializer = (element, content) => {
  if (element.type === 'hyperlink') {
    return renderToStaticMarkup(
      <a
        href={element.url}
        dangerouslySetInnerHTML={{
          __html: content
        }}
      />
    )
  }

  if (element.type === 'paragraph') {
    return renderToStaticMarkup(
      <p
        className={css(styles.paragraph)}
        dangerouslySetInnerHTML={{
          __html: content
        }}
      />
    )
  }

  if (element.type === 'heading1') {
    return renderToStaticMarkup(
      <h1
        className={css(styles.heading1)}
        dangerouslySetInnerHTML={{
          __html: content
        }}
      />
    )
  }

  if (element.type === 'group-list-item') {
    return renderToStaticMarkup(
      <ul
        className={css(styles.list)}
        dangerouslySetInnerHTML={{
          __html: content
        }}
      />
    )
  }

  if (element.type === 'group-o-list-item') {
    return renderToStaticMarkup(
      <ol
        className={css(styles.list)}
        dangerouslySetInnerHTML={{
          __html: content
        }}
      />
    )
  }

  if (element.type === 'list-item' || element.type === 'o-list-item') {
    return renderToStaticMarkup(
      <li
        className={css(styles.li)}
        dangerouslySetInnerHTML={{
          __html: content
        }}
      />
    )
  }

  return null
}

const deserializeResponse = (gub = {}) => {
  const {
    getText,
    getGroup,
    getStructuredText,
    getNumber
  } = prismicUtils(gub)

  return {
    offset: getNumber('home.raisedOffset'),
    cta: {
      tagline: getText('home.bannerTagline'),
      register: getText('home.registerButton'),
      donate: getText('home.donateButton')
    },
    register: {
      tiles: getGroup('home.tiles')
      .map((tile) => {
        const prismic = prismicUtils(tile)
        return {
          heading: prismic.getText('heading'),
          text: prismic.getText('text'),
          image: prismic.getImage('image'),
          link: prismic.getLink('link')
        }
      })
    },
    about: {
      aboutTitle: getText('home.aboutTitle'),
      aboutText: getStructuredText('home.aboutText', htmlSerializer)
    },
    stories: {
      storiesTitle: getText('home.storiesTitle'),
      storiesTiles: getGroup('home.storiesTiles')
        .map((tile) => {
          const prismic = prismicUtils(tile)
          return {
            image: prismic.getImage('image'),
            title: prismic.getText('title'),
            label: prismic.getText('modalLabel'),
            text: prismic.getStructuredText('modalContent', htmlSerializer)
          }
        })
    },
    ambassadors: {
      ambassadorsTitle: getText('home.ambassadorsTitle'),
      ambassadorsTiles: getGroup('home.ambassadorsTiles')
        .map((tile) => {
          const prismic = prismicUtils(tile)
          return {
            image: prismic.getImage('image'),
            title: prismic.getStructuredText('title', htmlSerializer)
          }
        })
    },
    sponsors: {
      sponsorsTitle: getText('home.sponsorsTitle'),
      sponsorsTiles: getGroup('home.sponsorsTiles')
        .map((tile) => {
          const prismic = prismicUtils(tile)
          return {
            image: prismic.getImage('image'),
            title: prismic.getText('title')
          }
        })
    }
  }
}

const fetchHome = (home) => {
  return {
    ...home,
    status: 'fetching'
  }
}

const receiveHomeFailure = (home, { error = '' }) => {
  return {
    ...home,
    error,
    status: 'failed'
  }
}

const receiveHomeSuccess = (home, { data }) => {
  return {
    ...deserializeResponse(data),
    status: 'fetched'
  }
}

export default (home = {}, { type, payload }) => {
  switch (type) {
    case 'FETCH_HOME':
      return fetchHome(home, payload)
    case 'RECEIVE_HOME_FAILURE':
      return receiveHomeFailure(home, payload)
    case 'RECEIVE_HOME_SUCCESS':
      return receiveHomeSuccess(home, payload)
    default:
      return home
  }
}
<file_sep>import Prismic from 'prismic.io'

export const fetchFaqs = (dispatch) => () => {
  dispatch({
    type: 'FETCH_FAQS'
  })

  return Prismic.api('https://step-a-thon.cdn.prismic.io/api').then((Api) => (
    Api.form('everything')
      .ref(Api.master())
      .query(Prismic.Predicates.at('document.type', 'faqs'))
      .submit()
  )).then((response) => (
    response.results[0]
  )).then((json) => {
    dispatch(receiveFaqsSuccess(json))
  }).catch((error) => {
    dispatch(receiveFaqsFailure(error))
    return Promise.reject(error)
  })
}

const receiveFaqsFailure = (error) => (
  {
    type: 'RECEIVE_FAQS_FAILURE',
    payload: {
      error
    }
  }
)

const receiveFaqsSuccess = (data) => (
  {
    type: 'RECEIVE_FAQS_SUCCESS',
    payload: {
      data
    }
  }
)
<file_sep>import {
  rhythm,
  scale,
  colors,
  fonts
} from '../../lib/traits'

export default {
  wrapper: {
    width: '100%',
    fontFamily: fonts.interface,
    fontWeight: '300'
  },
  titleWrap: {
    backgroundColor: colors.yellow
  },
  heading: {
    fontFamily: fonts.display,
    position: 'relative',
    maxWidth: '70em',
    width: '100%',
    margin: '0 auto'
  },
  title: {
    color: colors.light,
    fontSize: scale(3),
    fontWeight: '800',
    padding: `${rhythm(1)} ${rhythm(0.5)}`,
    textShadow: '1px 1px 1px #ae9300',
    '@media screen and (min-width:1160px)': {
      padding: `${rhythm(1)} 0`
    }
  },
  tiles: {
    listStyle: 'none',
    display: 'flex',
    justifyContent: 'space-between',
    // padding: `${rhythm(0.5)} 0`,
    // flexDirection: 'column',
    position: 'relative',
    maxWidth: '70em',
    margin: '0 auto',
    '@media screen and (min-width:860px)': {
      flexDirection: 'row',
      padding: `${rhythm(1.5)} 0`
    }
  },
  tile: {
    position: 'relative',
    padding: rhythm(0.5),
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    alignContent: 'space-between',
    boxSizing: 'border-box',
    width: '100%'
  },
  link: {
    flex: '1',
    position: 'relative',
    display: 'block',
    'h3': {
      background: 'transparent',
      color: colors.dark,
      fontSize: scale(0.5),
      paddingBottom: rhythm(0.5)
    },
    'img': {
      display: 'inline-block',
      verticalAlign: 'middle',
      flexShrink: '0',
      width: '100%'
    }
  },
  slider: {
    padding: `${rhythm(0.5)} 0`,
    flex: '1',
    width: '100%',
    '@media screen and (min-width:860px)': {
      padding: `${rhythm(1)} 0`
    },
    '.slick-slider': {
      width: '100% !important'
    },
    '.slick-track': {
      width: '700% !important',
      display: 'inline-flex',
      '@media screen and (min-width:860px)': {
        width: '100% !important'
      }
    },
    '.slick-dots': {
      display: 'flex !important',
      justifyContent: 'center',
      bottom: '10px'
    }
  }
}
<file_sep>import {
  colors,
  rhythm,
  scale,
  fonts
} from '../../lib/traits'

export default {
  wrapper: {
    fontFamily: fonts.interface,
    fontWeight: '300',
    width: '100%',
    backgroundColor: colors.light,
    overflowX: 'hidden'
  },
  titleWrap: {
    backgroundColor: colors.yellow
  },
  heading: {
    fontFamily: fonts.display,
    position: 'relative',
    maxWidth: '70em',
    width: '100%',
    margin: '0 auto'
  },
  title: {
    color: colors.light,
    fontSize: scale(3),
    fontWeight: '800',
    padding: `${rhythm(1)} ${rhythm(0.5)}`,
    textShadow: '1px 1px 1px #ae9300',
    '@media screen and (min-width:1160px)': {
      padding: `${rhythm(1)} 0`
    }
  },
  textWrap: {
    position: 'relative',
    maxWidth: '70em',
    width: '100%',
    margin: '0 auto',
    paddingTop: rhythm(1),
    padding: `${rhythm(1)} ${rhythm(0.5)}`,
    '@media screen and (min-width:1160px)': {
      padding: `${rhythm(1)} 0`
    }
  },
  text: {
    padding: '1rem 0',
    color: colors.dark,
    fontWeight: '300',
    'p': {
      paddingBottom: rhythm(1),
      fontSize: scale(1)
    },
    'strong': {
      fontWeight: '800',
      fontSize: scale(2.5),
      color: colors.blue
    },
    'a': {
      color: colors.blue,
      ':hover': {
        textDecoration: 'underline'
      }
    }
  },
  socialNetworks: {
    display: 'flex',
    marginBottom: rhythm(1),
    listStyle: 'none',
    fontSize: scale(2)
  },
  shareIcon: {
    display: 'flex',
    borderRadius: rhythm(0.2),
    alignItems: 'center',
    textAlign: 'center',
    justifyContent: 'space-around',
    padding: `${rhythm(0.5)} ${rhythm(1)}`,
    marginRight: rhythm(0.5),
    color: colors.light,
    listStyleType: 'none',
    'i': {
      marginRight: rhythm(0.5)
    }
  },
  facebookShare: {
    backgroundColor: '#3B5998',
    ':hover': {
      backgroundColor: '#5573B2'
    }
  },
  twitterShare: {
    backgroundColor: '#1DA1F2',
    ':hover': {
      backgroundColor: '#50D4FF'
    }
  }
}
<file_sep>import React from 'react'
import { provideHooks } from 'redial'
import { connect } from 'react-redux'
import Helmet from 'react-helmet'

import GILayout from '../../layouts/GIPage'

import { fetchGetInvolved } from '../../store/actions/getInvolved'
import { fetchWrapper } from '../../store/actions/pageWrapper'

const isFetched = ({ status } = {}) => status === 'fetched'

const unlessFetched = (resource = {}, fetcher) => (
  isFetched(resource)
    ? Promise.resolve()
    : fetcher()
)

export const fetchGetInvolvedPageContent = ({
  dispatch,
  getInvolved = {},
  wrapper = {}
}) => {
  return Promise.all([
    unlessFetched(getInvolved, () => fetchGetInvolved(dispatch)()),
    unlessFetched(wrapper, () => fetchWrapper(dispatch)())
  ]).catch((err) => (
    Promise.reject(err)
  ))
}

const hooks = {
  fetch: ({
    dispatch,
    getInvolved,
    wrapper
  }) => (
    fetchGetInvolvedPageContent({
      dispatch,
      getInvolved,
      wrapper
    })
  )
}

const mapStateToProps = ({
  getInvolved = {},
  wrapper = {}
}) => ({
  getInvolved,
  wrapper
})

export default connect(
  mapStateToProps
)(provideHooks(hooks)(
  ({
    getInvolved = {},
    wrapper = {},
    location = {}
  }) => {
    const { hash } = location
    const { meta = {
      title: '',
      meta: []
    } } = wrapper

    return (
      <div>
        <Helmet
          title={meta.title}
          meta={meta.tags}
        />
        <GILayout
          {...getInvolved}
          {...wrapper}
          currentHash={hash}
        />
      </div>
    )
  })
 )
<file_sep>import {
  scale,
  rhythm
} from '../../../lib/traits'

export default {
  heading1: {
    fontSize: scale(3),
    textTransform: 'uppercase',
    fontWeight: 'bold',
    marginBottom: rhythm(0.5),
    marginTop: rhythm(0.5)
  },
  paragraph: {
    lineHeight: 'normal',
    paddingBottom: rhythm(0.5)
  },
  list: {
    paddingLeft: `${rhythm(1)}`
  },
  li: {
    padding: `${rhythm(0.125)} 0`
  }
}
<file_sep>import React from 'react'
import DocumentTitle from 'react-document-title'
import styles from './styles.css'
import './reset.css'

import Header from '../Header'
import Banner from '../Banner'
import Footer from '../Footer'

export default ({
  title = 'Stepathon',
  header = {},
  banner = {},
  footer = {},
  children
}) => (
  <DocumentTitle title={title}>
    <article className={styles.base}>
      <Header
        {...header}
      />
      <Banner
        {...banner}
      />
      {children}
      <Footer
        {...footer}
      />
    </article>
  </DocumentTitle>
)
<file_sep>import React from 'react'
import { provideHooks } from 'redial'
import { connect } from 'react-redux'

import MCRILayout from '../../layouts/MCRIPage'
import Helmet from 'react-helmet'

import { fetchMcri } from '../../store/actions/mcri'
import { fetchWrapper } from '../../store/actions/pageWrapper'

const isFetched = ({ status } = {}) => status === 'fetched'

const unlessFetched = (resource = {}, fetcher) => (
  isFetched(resource)
    ? Promise.resolve()
    : fetcher()
)

export const fetchMcriPageContent = ({
  dispatch,
  mcri = {},
  wrapper = {}
}) => {
  return Promise.all([
    unlessFetched(mcri, () => fetchMcri(dispatch)()),
    unlessFetched(wrapper, () => fetchWrapper(dispatch)())
  ]).catch((err) => (
    Promise.reject(err)
  ))
}

const hooks = {
  fetch: ({
    dispatch,
    mcri,
    wrapper
  }) => (
    fetchMcriPageContent({
      dispatch,
      mcri,
      wrapper
    })
  )
}

const mapStateToProps = ({
  mcri = {},
  wrapper = {}
}) => ({
  mcri,
  wrapper
})

export default connect(
  mapStateToProps
)(provideHooks(hooks)(
  ({
    mcri = {},
    wrapper = {},
    location = {}
  }) => {
    const { hash } = location
    const { meta = {
      title: '',
      meta: []
    } } = wrapper

    return (
      <div>
        <Helmet
          title={meta.title}
          meta={meta.tags}
        />
        <MCRILayout
          {...mcri}
          {...wrapper}
          currentHash={hash}
        />
      </div>
    )
  })
 )
<file_sep>import React from 'react'
import css from '../../lib/css/'
import styles from './styles'
import Button from '../../components/Button'

export default ({
  tagline = '',
  register = ''
}) => (
  <section className={css(styles.wrapper)}>
    <div className={css(styles.ctaWrap)}>
      <div className={css(styles.cta)}>
        <h2 className={css(styles.title)}>{tagline}</h2>
        <Button type='yellow' href='https://registration.everydayhero.com/ps/event/Stepathon2017'>{register}</Button>
      </div>
    </div>
  </section>
)
<file_sep>import {
  rhythm,
  fonts,
  scale,
  colors
} from '../../lib/traits'

export default {
  wrapper: {
    fontFamily: fonts.interface,
    fontWeight: '300',
    width: '100%'
  },
  titleWrap: {
    backgroundColor: colors.yellow
  },
  heading: {
    fontFamily: fonts.display,
    position: 'relative',
    maxWidth: '70em',
    width: '100%',
    margin: '0 auto'
  },
  title: {
    color: colors.light,
    fontSize: scale(3),
    fontWeight: '800',
    padding: `${rhythm(1)} ${rhythm(0.5)}`,
    textShadow: '1px 1px 1px #ae9300',
    '@media screen and (min-width:1160px)': {
      padding: `${rhythm(1)} 0`
    }
  },
  tileWrap: {
    width: '100%',
    overflowX: 'scroll'
  },
  tiles: {
    listStyle: 'none',
    display: 'flex',
    width: '700%',
    padding: rhythm(0.5),
    '@media screen and (min-width:860px)': {
      padding: rhythm(1),
      width: '150%'
    }
  }
}
<file_sep>import React from 'react'
import { provideHooks } from 'redial'
import { connect } from 'react-redux'
import { compose } from 'redux'
import Helmet from 'react-helmet'

import unlessFetched from '../../lib/unlessFetched'

import { fetchHome } from '../../store/actions/home'
import { fetchWrapper } from '../../store/actions/pageWrapper'
import { fetchCampaign } from '../../store/actions/campaign'
import { fetchLeaderboards } from '../../store/actions/leaderboards'
import { fetchIndividualSteps } from '../../store/actions/individualSteps'
import { fetchTeamSteps } from '../../store/actions/teamSteps'

import HomeLayout from '../../layouts/Home'

const hooks = {
  fetch ({
    dispatch,
    state,
    query
  }) {
    return Promise.all([
      unlessFetched(state.home, () => fetchHome(dispatch)()),
      unlessFetched(state.wrapper, () => fetchWrapper(dispatch)()),
      dispatch(fetchCampaign(process.env.CAMPAIGN_UID)),
      dispatch(fetchLeaderboards(process.env.CAMPAIGN_UID)),
      dispatch(fetchIndividualSteps(process.env.CAMPAIGN_UID)),
      dispatch(fetchTeamSteps(process.env.CAMPAIGN_UID))
    ]).catch((err) => (
      Promise.reject(err)
    ))
  }
}

const mapStateToProps = ({
  home = {},
  wrapper = {},
  campaign = {},
  leaderboards = {}
}) => ({
  home,
  wrapper,
  campaign,
  fundraisers: leaderboards.fundraisers,
  teams: leaderboards.teams
})

const Home = ({
  home = {},
  wrapper = {},
  campaign = {},
  fundraisers = [],
  teams = [],
  location = {}
}) => {
  const { hash } = location
  const { meta = {
    title: '',
    meta: []
  } } = wrapper

  return (
    <div>
      <Helmet
        title={meta.title}
        meta={meta.tags}
        link={[
          {'rel': 'shortcut icon', 'href': 'https://www.mcri.edu.au/sites/default/files/favicon_0.ico'}
        ]}
      />
      <HomeLayout
        {...home}
        {...wrapper}
        campaign={campaign}
        fundraisers={fundraisers}
        teams={teams}
        currentHash={hash}
      />
    </div>
  )
}

export default compose(
  connect(mapStateToProps),
  provideHooks(hooks)
)(Home)
<file_sep>import React from 'react'

import Main from '../Main'
import CTA from '../CTA'
import Register from '../Register'
import Progress from '../Progress'
import Leaderboards from '../Leaderboards'
import About from '../About'
import Stories from '../Stories'
import Ambassadors from '../Ambassadors'
import Sponsors from '../Sponsors'

export default ({
  header = {},
  banner = {},
  about = {},
  cta = {},
  register = {},
  campaign = {},
  stories = {},
  ambassadors = {},
  sponsors = {},
  footer = {},
  fundraisers = [],
  teams = [],
  offset = 0,
  currentHash = ''
}) => (
  <Main
    header={header}
    banner={banner}
    footer={footer}
  >
    <CTA
      {...cta}
    />
    <Register
      {...register}
    />
    <About
      {...about}
    />
    <Progress campaign={campaign} offset={offset} />
    <Leaderboards
      fundraisers={fundraisers}
      teams={teams}
    />
    <Stories
      {...stories}
    />
    <Ambassadors
      {...ambassadors}
    />
    <Sponsors
      {...sponsors}
    />
  </Main>
)
<file_sep>import React from 'react'
import css from '../../lib/css/'
import styles from './styles'
import Section from '../../components/Section'

export default ({
  giTitle = '',
  giIntro = '',
  giContent = '',
  currentHash
}) => {
  const shareUrl = typeof window !== 'undefined' ? `${encodeURIComponent(`${window.location.origin}${window.location.pathname}`)}` : ''
  return (
    <Section id='getInvolved' currentHash={currentHash} className={css(styles.wrapper)}>
      <div className={css(styles.titleWrap)}>
        <div className={css(styles.heading)}>
          <h2 className={css(styles.title)}>{giTitle}</h2>
        </div>
      </div>
      <div className={css(styles.textWrap)}>
        <div
          className={css(styles.text)}
          dangerouslySetInnerHTML={{
            __html: giIntro
          }}
        />
        <ul className={css(styles.socialNetworks)}>
          <li>
            <a className={`${css(styles.facebookShare)} ${css(styles.shareIcon)}`} href={`https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`} target='_blank'>
              <i className='fa fa-facebook' aria-hidden='true' />
              <p>Share</p>
            </a>
          </li>
          <li>
            <a className={`${css(styles.twitterShare)} ${css(styles.shareIcon)}`} href={`http://www.twitter.com/share?url=${shareUrl}`} target='_blank'>
              <i className='fa fa-twitter' aria-hidden='true' />
              <p>Share</p>
            </a>
          </li>
        </ul>
        <div
          className={css(styles.text)}
          dangerouslySetInnerHTML={{
            __html: giContent
          }}
        />
      </div>
    </Section>
  )
}
<file_sep>import {
  colors,
  scale,
  rhythm,
  fonts
} from '../../lib/traits'

export default {
  base: {
    color: colors.light
  },
  content: {
    color: colors.light,
    lineHeight: '1.2em',
    fontSize: scale(1)
  },
  tabs: {
    '.Tab--selected': {
      background: `${colors.yellow} !important`,
      border: '0'
    },
    '.Tab': {
      background: colors.blue,
      fontFamily: fonts.display,
      color: colors.light,
      fontSize: scale(1.5),
      border: `3px solid ${colors.yellow}`,
      borderBottom: `1px solid ${colors.yellow}`,
      padding: rhythm(0.5),
      marginLeft: '0',
      ':nth-child(1)': {
        border: `3px solid ${colors.yellow}`,
        borderRadius: `${rhythm(0.2)} ${rhythm(0.2)} 0 0`,
        '@media screen and (min-width:860px)': {
          borderRight: '0',
          borderRadius: `${rhythm(0.2)} 0 0 0`,
          borderBottom: `1px solid ${colors.yellow}`
        }
      },
      ':nth-child(5)': {
        borderLeft: `1px solid ${colors.yellow}`,
        border: `3px solid ${colors.yellow}`,
        borderRadius: '0',
        '@media screen and (min-width:860px)': {
          borderRadius: `0 ${rhythm(0.2)} 0 0`,
          borderLeft: `1px solid ${colors.yellow}`,
          borderBottom: `1px solid ${colors.yellow}`
        }
      }
    },
    '.Tab-panel': {
      border: `3px solid ${colors.yellow}`,
      borderRadius: '0',
      background: colors.blue,
      '@media screen and (min-width:860px)': {
        borderRadius: `0 ${rhythm(0.2)} ${rhythm(0.2)} ${rhythm(0.2)}`
      }
    },
    '.Tabs__show-more': {
      background: colors.yellow,
      color: colors.light,
      border: '0'
    },
    '.Tabs__show-more-label--selected': {
      background: colors.yellow,
      border: '0',
      height: '100%',
      bottom: '0'
    },
    'strong': {
      fontSize: scale(1.6)
    },
    'a': {
      textDecoration: 'underline'
    }
  }
}
<file_sep>import React from 'react'
import { provideHooks } from 'redial'
import { connect } from 'react-redux'
import Helmet from 'react-helmet'

import FAQsLayout from '../../layouts/FAQsPage'

import { fetchFaqs } from '../../store/actions/faq'
import { fetchWrapper } from '../../store/actions/pageWrapper'

const isFetched = ({ status } = {}) => status === 'fetched'

const unlessFetched = (resource = {}, fetcher) => (
  isFetched(resource)
    ? Promise.resolve()
    : fetcher()
)

export const fetchFaqsPageContent = ({
  dispatch,
  faqs = {},
  wrapper = {}
}) => {
  return Promise.all([
    unlessFetched(faqs, () => fetchFaqs(dispatch)()),
    unlessFetched(wrapper, () => fetchWrapper(dispatch)())
  ]).catch((err) => (
    Promise.reject(err)
  ))
}

const hooks = {
  fetch: ({
    dispatch,
    faqs,
    wrapper
  }) => (
    fetchFaqsPageContent({
      dispatch,
      faqs,
      wrapper
    })
  )
}

const mapStateToProps = ({
  faqs = {},
  wrapper = {}
}) => ({
  faqs,
  wrapper
})

export default connect(
  mapStateToProps
)(provideHooks(hooks)(
  ({
    faqs = {},
    wrapper = {},
    location = {}
  }) => {
    const { hash } = location
    const { meta = {
      title: '',
      meta: []
    } } = wrapper

    return (
      <div>
        <Helmet
          title={meta.title}
          meta={meta.tags}
        />
        <FAQsLayout
          {...faqs}
          {...wrapper}
          currentHash={hash}
        />
      </div>
    )
  })
 )
<file_sep>export const rhythm = (value = 1, unit = 'rem', basis = 1.5) => (
  `${basis * value}${unit}`
)

export const scale = (exponent = 0, scale = 1.2) => (
  `${Math.pow(scale, exponent)}rem`
)

export const radiuses = {
  round: rhythm(100),
  rounded: rhythm(0.125)
}

export const transitions = {
  easeOut: 'ease-out .25s'
}

export const fonts = {
  interface: 'Varela, Helvetica Neue, Helvetica, Arial, sans-serif',
  display: 'Varela Round, sans-serif'
}

export const colors = {
  dark: '#333',
  grey: '#535353',
  light: '#fff',
  blue: '#009FCF',
  darkBlue: '#0194c1',
  lightBlue: '#00a6d9',
  yellow: '#FFD800'
}
<file_sep>import prismicUtils from 'prismic-utils'

const deserializeResponse = (gub = {}) => {
  const {
    getText,
    getImage,
    getGroup,
    getLink
  } = prismicUtils(gub)

  return {
    meta: {
      title: getText('wrapper.title'),
      tags: [
        getText('wrapper.metaDescription') && {'name': 'description', 'content': getText('wrapper.metaDescription')},
        getText('wrapper.ogTitle') && {'property': 'og:title', 'content': getText('wrapper.ogTitle')},
        getText('wrapper.ogDescription') && {'property': 'og:description', 'content': getText('wrapper.ogDescription')},
        getImage('wrapper.ogImage') && {'property': 'og:image', 'content': getImage('wrapper.ogImage').url},
        getLink('wrapper.ogUrl') && {'property': 'og:url', 'content': getLink('wrapper.ogUrl')}
      ].filter(tag => tag)
    },
    header: {
      logo: getImage('wrapper.logo'),
      logoLink: getLink('wrapper.logoLink'),
      navLinks: getGroup('wrapper.navLinks')
        .map((link) => {
          const prismic = prismicUtils(link)
          return {
            label: prismic.getText('label'),
            link: prismic.getText('link')
          }
        }),
      banner: getImage('wrapper.bannerBackground'),
      tagline: getText('wrapper.bannerTagline'),
      register: getText('wrapper.registerButton'),
      donate: getText('wrapper.donateButton')
    },
    banner: {
      bannerSlider: getGroup('wrapper.bannerSlider')
       .map((image) => {
         const prismic = prismicUtils(image)
         return {
           image: prismic.getImage('image')
         }
       })
    },
    footer: {
      title: getText('wrapper.footerTitle'),
      footerLinks: getGroup('wrapper.footerLinks')
        .map((link) => {
          const prismic = prismicUtils(link)
          return {
            label: prismic.getText('label'),
            link: prismic.getLink('link')
          }
        }),
      socialLinks: getGroup('wrapper.socialLinks')
        .map((link) => {
          const prismic = prismicUtils(link)
          return {
            network: prismic.getText('network'),
            url: prismic.getLink('link')
          }
        })
    }
  }
}

const fetchWrapper = (wrapper) => {
  return {
    ...wrapper,
    status: 'fetching'
  }
}

const receiveWrapperFailure = (wrapper, { error = '' }) => {
  return {
    ...wrapper,
    error,
    status: 'failed'
  }
}

const receiveWrapperSuccess = (wrapper, { data }) => {
  return {
    ...deserializeResponse(data),
    status: 'fetched'
  }
}

export default (wrapper = {}, { type, payload }) => {
  switch (type) {
    case 'FETCH_WRAPPER':
      return fetchWrapper(wrapper, payload)
    case 'RECEIVE_WRAPPER_FAILURE':
      return receiveWrapperFailure(wrapper, payload)
    case 'RECEIVE_WRAPPER_SUCCESS':
      return receiveWrapperSuccess(wrapper, payload)
    default:
      return wrapper
  }
}
<file_sep>import flatten from 'lodash/flatten'
import deserializePages from '../../../lib/deserializePages'

const fetchSteps = (steps) => {
  return {
    ...steps,
    ...{ status: 'fetching' }
  }
}

const receiveStepsFailure = (steps, { error = '' }) => {
  return {
    ...steps,
    ...{ error, status: 'failed' }
  }
}

const receiveStepsSuccess = (steps, { data }) => {
  return {
    steps: deserializePages(flatten(data)),
    status: 'fetched'
  }
}

export default (steps = {}, { type, payload }) => {
  switch (type) {
    case 'FETCH_INDIVIDUAL_STEPS':
      return fetchSteps(steps, payload)
    case 'FETCH_INDIVIDUAL_STEPS_FAILURE':
      return receiveStepsFailure(steps, payload)
    case 'FETCH_INDIVIDUAL_STEPS_SUCCESS':
      return receiveStepsSuccess(steps, payload)
    default:
      return steps
  }
}
<file_sep>import React from 'react'
import { Link } from 'react-router'
import css from '../../lib/css'
import styles from './styles.js'

export default ({
  type = '',
  style = {},
  to = '',
  href = '',
  children = '',
  ...props
}) => {
  if (href) {
    return <a {...{...props, href}} className={`${css(style, styles.base, styles.type[type])}`}>{children}</a>
  } else if (to) {
    return <Link {...props} to={to} className={`${css(style, styles.base, styles.type[type])}`}>{children}</Link>
  } else {
    return <button {...props} to={to} className={`${css(style, styles.base, styles.type[type])}`}>{children}</button>
  }
}
<file_sep>import React from 'react'
import css from '../../lib/css/'
import styles from './styles'
import Section from '../../components/Section'
import Leaderboard from '../../components/Leaderboard'

export default ({
  fundraisers = [],
  teams = [],
  currentHash
}) => {
  return (
    <Section id='about' currentHash={currentHash} className={css(styles.wrapper)}>
      <div className={css(styles.titleWrap)}>
        <div className={css(styles.heading)}>
          <h2 className={css(styles.title)}>Leaderboards</h2>
        </div>
      </div>
      <div className={css(styles.textWrap)}>
        <div className={css(styles.text)}>
          <Leaderboard title='Top individuals' type='fundraisers' leaders={fundraisers} />
          <Leaderboard title='Top Teams' type='teams' leaders={teams} />
        </div>
      </div>
    </Section>
  )
}
<file_sep>import React from 'react'
import prismicUtils from 'prismic-utils'
import { renderToStaticMarkup } from 'react-dom/server'
import styles from '../home/styles'
import css from '../../../lib/css'

const htmlSerializer = (element, content) => {
  if (element.type === 'hyperlink') {
    return renderToStaticMarkup(
      <a
        href={element.url}
        dangerouslySetInnerHTML={{
          __html: content
        }}
      />
    )
  }

  if (element.type === 'paragraph') {
    return renderToStaticMarkup(
      <p
        className={css(styles.paragraph)}
        dangerouslySetInnerHTML={{
          __html: content
        }}
      />
    )
  }

  if (element.type === 'heading1') {
    return renderToStaticMarkup(
      <h1
        className={css(styles.heading1)}
        dangerouslySetInnerHTML={{
          __html: content
        }}
      />
    )
  }

  if (element.type === 'group-list-item') {
    return renderToStaticMarkup(
      <ul
        className={css(styles.list)}
        dangerouslySetInnerHTML={{
          __html: content
        }}
      />
    )
  }

  if (element.type === 'group-o-list-item') {
    return renderToStaticMarkup(
      <ol
        className={css(styles.list)}
        dangerouslySetInnerHTML={{
          __html: content
        }}
      />
    )
  }

  if (element.type === 'list-item' || element.type === 'o-list-item') {
    return renderToStaticMarkup(
      <li
        className={css(styles.li)}
        dangerouslySetInnerHTML={{
          __html: content
        }}
      />
    )
  }

  return null
}

const deserializeResponse = (gub = {}) => {
  const {
    getText,
    getStructuredText
  } = prismicUtils(gub)

  return {
    getInvolved: {
      giTitle: getText('get-involved.giTitle'),
      giIntro: getStructuredText('get-involved.giIntro', htmlSerializer),
      giContent: getStructuredText('get-involved.giContent', htmlSerializer)
    }
  }
}

const fetchGetInvolved = (getInvolved) => {
  return {
    ...getInvolved,
    status: 'fetching'
  }
}

const receiveGetInvolvedFailure = (getInvolved, { error = '' }) => {
  return {
    ...getInvolved,
    error,
    status: 'failed'
  }
}

const receiveGetInvolvedSuccess = (getInvolved, { data }) => {
  return {
    ...getInvolved,
    ...deserializeResponse(data),
    status: 'fetched'
  }
}

export default (getInvolved = {}, { type, payload }) => {
  switch (type) {
    case 'FETCH_GET_INVOLVED':
      return fetchGetInvolved(getInvolved, payload)
    case 'RECEIVE_GET_INVOLVED_FAILURE':
      return receiveGetInvolvedFailure(getInvolved, payload)
    case 'RECEIVE_GET_INVOLVED_SUCCESS':
      return receiveGetInvolvedSuccess(getInvolved, payload)
    default:
      return getInvolved
  }
}
<file_sep>import Prismic from 'prismic.io'

export const fetchMcri = (dispatch) => () => {
  dispatch({
    type: 'FETCH_MCRI'
  })

  return Prismic.api('https://step-a-thon.cdn.prismic.io/api').then((Api) => (
    Api.form('everything')
      .ref(Api.master())
      .query(Prismic.Predicates.at('document.type', 'mcri'))
      .submit()
  )).then((response) => (
    response.results[0]
  )).then((json) => {
    dispatch(receiveMcriSuccess(json))
  }).catch((error) => {
    dispatch(receiveMcriFailure(error))
    return Promise.reject(error)
  })
}

const receiveMcriFailure = (error) => (
  {
    type: 'RECEIVE_MCRI_FAILURE',
    payload: {
      error
    }
  }
)

const receiveMcriSuccess = (data) => (
  {
    type: 'RECEIVE_MCRI_SUCCESS',
    payload: {
      data
    }
  }
)
<file_sep>import Prismic from 'prismic.io'

export const fetchPages = (dispatch) => (pageType) => {
  dispatch({
    type: 'FETCH_PAGES'
  })

  return Prismic.api('https://step-a-thon.cdn.prismic.io/api').then((Api) => (
    Api.form('everything')
      .ref(Api.master())
      .query(Prismic.Predicates.at('document.type', pageType))
      .submit()
  )).then((response) => (
    response.results[0]
  )).then((json) => {
    dispatch(receivePagesSuccess(pageType, json))
  }).catch((error) => {
    dispatch(receivePagesFailure(pageType, error))
    return Promise.reject(error)
  })
}

const receivePagesFailure = (error) => (
  {
    type: 'RECEIVE_PAGES_FAILURE',
    payload: {
      error
    }
  }
)

const receivePagesSuccess = (pageType, data) => (
  {
    type: 'RECEIVE_PAGES_SUCCESS',
    payload: {
      pageType,
      data
    }
  }
)
<file_sep>import axios from 'axios'

export const fetchLeaderboards = (uid) => (dispatch) => {
  dispatch({
    type: 'FETCH_LEADERBOARDS'
  })

  return Promise.all([
    axios.get(`${process.env.SUPPORTER_URL}/api/v2/search/pages_totals`, { params: {
      campaign_id: uid,
      group_by: 'individuals',
      limit: 10,
      page: 1
    }}).then((res) => res.data.results),
    axios.get(`${process.env.SUPPORTER_URL}/api/v2/search/pages_totals`, { params: {
      campaign_id: uid,
      group_by: 'teams',
      limit: 10,
      page: 1
    }}).then((res) => res.data.results)
  ]).then((res) => {
    dispatch(receiveLeaderboardsSuccess(res))
  }).catch((error) => {
    dispatch(receiveLeaderboardsFailure(error))
    return Promise.reject(error)
  })
}

const receiveLeaderboardsFailure = (error) => ({
  type: 'RECEIVE_LEADERBOARDS_FAILURE',
  payload: {
    error
  }
})

const receiveLeaderboardsSuccess = (data) => {
  return {
    type: 'RECEIVE_LEADERBOARDS_SUCCESS',
    payload: {
      data
    }
  }
}
<file_sep>import React from 'react'
import css from '../../lib/css/'
import styles from './styles'
import Section from '../../components/Section'

export default ({
  aboutTitle = '',
  aboutText = '',
  currentHash
}) => (
  <Section id='about' currentHash={currentHash} className={css(styles.wrapper)}>
    <div className={css(styles.titleWrap)}>
      <div className={css(styles.heading)}>
        <h2 className={css(styles.title)}>{aboutTitle}</h2>
      </div>
    </div>
    <div className={css(styles.textWrap)}>
      <div
        className={css(styles.text)}
        dangerouslySetInnerHTML={{
          __html: aboutText
        }}
      />
    </div>
  </Section>
)
<file_sep>import {
  fonts,
  colors,
  scale,
  rhythm
} from '../../lib/traits'

export default {
  wrapper: {
    background: colors.gradient,
    fontFamily: fonts.interface,
    fontWeight: '300',
    width: '100%'
  },
  ctaWrap: {
    backgroundColor: colors.blue,
    width: '100%',
    position: 'relative',
    padding: rhythm(1),
    display: 'flex',
    justifyContent: 'center',
    '@media screen and (min-width:660px)': {
      flexDirection: 'row'
    }
  },
  cta: {
    maxWidth: '1140px',
    color: colors.yellow,
    fontFamily: fonts.interface,
    fontWeight: '800',
    fontSize: scale(2),
    textAlign: 'left',
    lineHeight: '1.3',
    display: 'flex',
    flex: '1',
    flexDirection: 'column',
    '@media screen and (min-width:660px)': {
      flexDirection: 'row'
    },
    '@media screen and (min-width:960px)': {
      minWidth: '42rem',
      fontSize: scale(4)
    },
    '> *': {
      alignSelf: 'center',
      padding: rhythm(1)
    }
  },
  title: {
    fontFamily: fonts.display,
    textShadow: '2px 3px #0c7898',
    minWidth: '0',
    flex: '1',
    padding: `0 0 ${rhythm(1)} 0`,
    '@media screen and (min-width:660px)': {
      padding: `0 ${rhythm(1)}`
    },
    '@media screen and (min-width:960px)': {
      minWidth: '42rem',
      padding: `0 ${rhythm(1)}`
    }
  }
}
<file_sep>import {
  rhythm,
  colors,
  scale,
  fonts,
  transitions
} from '../../lib/traits'

export default {
  tile: {
    flex: '1',
    padding: `${rhythm(1)} ${rhythm(0.5)}`
  },
  container: {
    boxSizing: 'border-box',
    overflow: 'hidden',
    boxShadow: '0 0 10px rgba(0,0,0,.3)'
  },
  tileTitle: {
    fontFamily: fonts.display,
    fontSize: scale(1.5),
    fontWeight: '700',
    color: colors.blue,
    margin: `${rhythm(0.3)}`
  },
  textWrap: {
    overflow: 'hidden',
    maxHeight: '9em',
    lineHeight: '1.4em',
    position: 'relative',
    ':after': {
      content: '""',
      position: 'absolute',
      bottom: '0',
      right: '0',
      width: '70%',
      height: '1.4em',
      textAlign: 'left',
      background: 'linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%)'
    }
  },
  excerpt: {
    color: colors.dark,
    margin: `${rhythm(0.3)}`
  },
  image: {
    width: '100%',
    minWidth: '16rem',
    height: rhythm(7.5),
    backgroundSize: 'cover',
    backgroundPosition: 'top center',
    display: 'block',
    flex: '1',
    marginRight: rhythm(1),
    '@media screen and (min-width:860px)': {
      minWidth: '20rem'
    }
  },
  modal: {
  },
  modalWrapper: {
    background: colors.light,
    width: '80% !important',
    maxWidth: '80em',
    position: 'absolute',
    color: colors.dark,
    margin: '2% auto !important',
    fontFamily: fonts.interface,
    padding: '0 !important',
    'h2': {
      fontFamily: fonts.display,
      color: colors.blue,
      fontSize: scale(2),
      paddingBottom: rhythm(1)
    },
    'h3': {
      fontSize: scale(1),
      padding: `${rhythm(0.5)} ${rhythm(0)}`
    },
    'strong': {
      fontWeight: '700'
    },
    'em': {
      fontStyle: 'italic'
    },
    'a': {
      color: colors.blue,
      transition: `box-shadow ${transitions.easeOut}`
    },
    'img': {
      width: '100%'
    }
  },
  modalContainer: {
    overflow: 'auto',
    boxSizing: 'border-box',
    padding: rhythm(1)
  },
  closeStyle: {
    margin: '1rem',
    fontSize: `${scale(2)} !important`,
    float: 'right',
    cursor: 'pointer',
    fontFamily: fonts.display,
    color: colors.blue,
    border: 'none !important'
  }
}
<file_sep>import React from 'react'
import css from '../../lib/css/'
import styles from './styles'

export default ({
  ambassadorsTitle = '',
  ambassadorsTiles = []
}) => (
  <div className={css(styles.wrapper)}>
    <div className={css(styles.titleWrap)}>
      <div className={css(styles.heading)}>
        <h2 className={css(styles.title)}>{ambassadorsTitle}</h2>
      </div>
    </div>
    <ul className={css(styles.tiles)}>
      {ambassadorsTiles.map((tile, i) => (
        <li className={css(styles.tile)} key={i}>
          <div className={css(styles.link)}>
            <div
              className={css(styles.overlay)}
              dangerouslySetInnerHTML={{
                __html: tile.title
              }}
            />
            <img src={tile.image.url} />
          </div>
        </li>
        ))}
    </ul>
  </div>
)
<file_sep>import React from 'react'
import css from '../../lib/css/'
import styles from './styles'
import Slider from 'react-slick'

const sliderSettings = {
  dots: false,
  arrows: false,
  infinite: true,
  draggable: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 5000
}

export default class extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
      sliderLoaded: false
    }
  }

  componentDidMount () {
    this.setState({
      sliderLoaded: true
    })
  }

  render () {
    const {
      bannerSlider = []
    } = this.props
    return (
      <div className={this.state.sliderLoaded ? null : css(styles.sliderHidden)}>
        <div className={css(styles.wrapper)}>
          <Slider {...sliderSettings} className={css(styles.slider)}>
            {bannerSlider.map((image, i) => (
              <div className={css(styles.banner)} key={i}><img src={image.image.url} /></div>
              ))}
          </Slider>
        </div>
      </div>
    )
  }
}
<file_sep>const defaultConfig = require('boiler-room-builder/config/webpack.shared.config')
const DotenvPlugin = require('webpack-dotenv-plugin')
const { assign } = Object

module.exports = assign({}, defaultConfig, {
  plugins: [
    new DotenvPlugin({
      sample: './.env.sample',
      path: `./${process.env.ENV_FILE}`
    })
  ],
  entry: ['babel-polyfill']
})
