1  import React from 'react';
 2  import getConfig from 'next/config';
 3  import Headroom from 'react-headroom';
 4  import PageHeaderNav from '../pageHeaderNav';
 5  import './style.scss';
 6  
 7  const { publicRuntimeConfig } = getConfig();
 8  
 9  const PageHeader = () => (
10    <div className="page-header" style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/header-bg.jpg)` }}>
11      <Headroom disableInlineStyles downTolerance={120}>
12        <div className="sticky-header">
13          <div className="container">
14            <div className="logo">
15              <img src={`${publicRuntimeConfig.subDirPath}/static/img/ETHPrize-logo.png`} alt="ETHPrize logo" />
16            </div>
17            <PageHeaderNav />
18          </div>
19        </div>
20      </Headroom>
21      <img className="page-header-bg" src={`${publicRuntimeConfig.subDirPath}/static/img/header-bg.jpg`} alt="Header background" />
22      <div className="inline-header">
23        <div className="container">
24          <div className="logo">
25            <img src={`${publicRuntimeConfig.subDirPath}/static/img/ETHPrize-logo.png`} alt="ETHPrize logo" />
26          </div>
27          <div className="page-header-content">
28            <h1 className="main-heading" style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/heading-textured-bg.jpg)` }}>
29              Eth Report <br />2018
30            </h1>
31            <p>
32              We&rsquo;ve interviewed 100+ developers to showcase the biggest opportunities in the
33              Ethereum ecosystem
34            </p>
35            <p>
36              Help us <a href="https://goo.gl/forms/lw5i2Ku9F0tMBWPD3">answer these questions</a> to be included on this site and add your voice
37              to the distributed future!
38            </p>
39          </div>
40          <PageHeaderNav />
41        </div>
42      </div>
43    </div>
44  );
45  
46  export default PageHeader;