Add sponsors page

components/page-logo-header/index.js

@@ -0,0 +1,13 @@
+import { HeaderWrap, Subtitle, Title, Logo } from './style';
+
+const PageLogoHeader = ({ title, subtitle, children, }) => (
+  <HeaderWrap>
+    <Logo src='/brand.png' alt='' />
+    <Title>{ title }</Title>
+    <Subtitle dangerouslySetInnerHTML={{ __html: subtitle }} />
+
+    { children }
+  </HeaderWrap>
+);
+
+export default PageLogoHeader;

components/page-logo-header/style.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+export const HeaderWrap = styled.div`
+  text-align: center;
+  padding: 45px 30px;
+`;
+
+export const Title = styled.h1`
+  font-size: 40px;
+  font-weight: 700;
+  margin-bottom: 12px;
+`;
+
+export const Subtitle = styled.p`
+  font-size: 16px;
+  color: #444;
+  margin-bottom: 0;
+  
+  a {
+    color: inherit;
+    font-weight: 700;
+  }
+`;
+
+
+export const Logo = styled.img`
+  width: 75px;
+  height: 75px;
+  margin-bottom: 26px;
+`;

components/site-nav/index.js

@@ -11,7 +11,7 @@ const SiteNav = () => (
       <div className='nav-links'>
         <a href='/roadmaps'>Roadmaps</a>
         <a href='/guides'>Guides</a>
-        <a href='/jobs'>Jobs</a>
+        <a href='/sponsors'>Sponsors</a>
         <a href='/about' className='d-none d-md-inline-block'>FAQ</a>
         <a href='/signup' className='signup'>Subscribe</a>
       </div>

pages/guides/index.js

@@ -13,7 +13,7 @@ import Helmet from 'components/helmet';
 const PageTitle = "Programming Guides";
 const PageDescription = "Easy to follow guides on complex topics written and maintained by the community";
 
-const Roadmap = () => (
+const GuidesList = () => (
   <DefaultLayout>
     <Helmet title={PageTitle} desciption={PageDescription} />
     <SiteNav />
@@ -46,4 +46,4 @@ const Roadmap = () => (
   </DefaultLayout>
 );
 
-export default Roadmap;
+export default GuidesList;

pages/sponsors/index.js

@@ -0,0 +1,35 @@
+import Helmet from 'components/helmet';
+import SiteNav from 'components/site-nav';
+import PageFooter from 'components/page-footer';
+import DefaultLayout from 'layouts/default/index';
+import PageLogoHeader from 'components/page-logo-header';
+
+const PageTitle = 'Advertise with Us';
+const PageDescription = 'Place your ad in front of 200,000 developers';
+
+const Sponsors = () => (
+  <DefaultLayout>
+    <Helmet title={PageTitle} desciption={PageDescription} />
+    <SiteNav />
+    <PageLogoHeader title={PageTitle} subtitle={PageDescription} />
+
+    <div className='pt-5 pb-5 border-top'>
+      <div className='container' style={{ maxWidth: '800px'}}>
+        <div className='row'>
+          <div className='col'>
+            <p>roadmap.sh is the <strong>#1</strong> place for developers to get the idea about the tech landscape, find out the what they are missing, get the ideas about how and what to learn and stay up to date.</p>
+
+            <p>The roadmap.sh audience consists of over 200,000 developers who visit the site an average of 150,000 times per month. They're developers of all levels (beginner, intermediate, senior) and domains including frontend, backend, fullstack, web and mobile, engineering managers, product managers and CTOs.</p>
+
+            <p>Email <a href="mailto:kamran@roadmap.sh">kamran@roadmap.sh</a> to get in touch about connecting with your potential customers!</p>
+
+            <p>Depending on your product or service, your budget, and your goals, there are several options to choose from when advertising on roadmap.sh:</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <PageFooter />
+  </DefaultLayout>
+);
+
+export default Sponsors;