Merge pull request #17 from Nona-Creative/feat/resources-styling

Resources styling
2025-02-23 19:28:14 +00:00 · 2018-07-18 12:47:02 +02:00 · 2018-07-18 12:47:02 +02:00 · 082bafdffc
commit 082bafdffc
parent 85000b65fe 03d18388ee
21 changed files with 377 additions and 292 deletions
--- a/assets/styles/base/type.scss
+++ b/assets/styles/base/type.scss
@ -35,6 +35,12 @@ strong {
  color: $red;
  letter-spacing: 4px;
  line-height: 1.1;
+  transition: font-size 0.2s ease, letter-spacing 0.2s ease;
+  background-repeat: no-repeat;
+  background-position: top center;
+  background-size: cover;
+  -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;

  @media (min-width: $desktop) {
    font-size: calculateRem(68);
--- a/assets/styles/base/variables.scss
+++ b/assets/styles/base/variables.scss
@ -4,7 +4,7 @@ $bigMobile: 480px;
 $tablet: 768px;
 $toDesktop: 1023px;
 $desktop: 1024px;
-$monitor: 1220px;
+$monitor: 1200px;
 $big: 1440px;

 // colors
@ -24,6 +24,6 @@ $primary-font: 'Roboto Mono', monospace;
 $secondary-font: 'bebas_neuebold', sans-serif;

 // layout
-$container-width: 600;
-$browse-left-width: 180;
+$container-width: 740;
+$browse-left-width: 200;
 $container-padding: 24;
--- a/components/browseArchives/style.scss
+++ b/components/browseArchives/style.scss
@ -3,7 +3,7 @@
 .browse-content-wrap.container {
  margin-bottom: calculateRem(48);

-  @media (min-width: $desktop) {
+  @media (min-width: $monitor) {
    display: flex;
    max-width: calculateRem($container-width + $browse-left-width*2 + $container-padding*2);
  }
@ -20,7 +20,7 @@
 .browse-content-left {
  display: none;

-  @media (min-width: $desktop) {
+  @media (min-width: $monitor) {
    display: block;
    width: calculateRem($browse-left-width);
  }
@ -28,7 +28,7 @@

 .browse-content-right {

-  @media (min-width: $desktop) {
+  @media (min-width: $monitor) {
    display: flex;
    flex-direction: column;
    width: calculateRem($container-width);
--- a/components/contentBlurb/index.js
+++ b/components/contentBlurb/index.js
@ -0,0 +1,14 @@
+import React from 'react';
+import Parser from 'html-react-parser';
+import Data from '../../data/content/content';
+import './style.scss';
+
+const ContentBlurb = () => (
+  <div className="content-blurb">
+    <div className="container">
+      { Parser(Data.blurb) }
+    </div>
+  </div>
+);
+
+export default ContentBlurb;
--- a/components/contentBlurb/style.scss
+++ b/components/contentBlurb/style.scss
@ -0,0 +1,10 @@
+@import './assets/styles/global.scss';
+
+.content-blurb {
+  margin-bottom: calculateRem(60);
+
+  p {
+    margin-bottom: calculateRem(16);
+    font-size: calculateRem(15);
+  }
+}
--- a/components/interviews/interviewsList/style.scss
+++ b/components/interviews/interviewsList/style.scss
@ -43,7 +43,7 @@
    left: 0;
    height: 100%;
    overflow: auto;
-    width: 94%;
+    width: 95%;
  }

  /* width */
--- a/components/interviews/relatedInterviewsList/style.scss
+++ b/components/interviews/relatedInterviewsList/style.scss
@ -2,6 +2,7 @@

 .related-interviews-list {
  margin-bottom: calculateRem(24);
+  padding-right: calculateRem(24);

  h5 {
    font-size: calculateRem(30);
--- a/components/interviews/singleInterview/style.scss
+++ b/components/interviews/singleInterview/style.scss
@ -44,7 +44,7 @@

  .answer {
    color: #ddd;
-    font-size: calculateRem(14);
+    font-size: calculateRem(15);

    p {
      padding-left: calculateRem(16);
--- a/components/modal/style.scss
+++ b/components/modal/style.scss
@ -52,14 +52,15 @@
 }

 .modal-close {
-  position: absolute;
+  position: fixed;
  top: calculateRem(16);
  right: calculateRem(16);
  z-index: 4;

  @media (min-width: $desktop) {
    top: calculateRem(72);
-    right: calculateRem(-20);
+    right: inherit;
+    left: calc(370px + 50%);

    svg {
      width: calculateRem(30);
--- a/components/pageHeader/index.js
+++ b/components/pageHeader/index.js
@ -13,7 +13,9 @@ const PageHeader = () => (
        <AnchorLink href="#browse">Browse Archives</AnchorLink>
      </nav>
      <img className="logo" src={`${publicRuntimeConfig.subDirPath}/static/img/ETHPrize-logo.png`} alt="ETHPrize logo" />
-      <h1 className="main-heading">Eth Report 2018</h1>
+      <h1 className="main-heading" style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/heading-textured-bg.jpg)` }}>
+        Eth Report 2018
+      </h1>
      <p>
        We&rsquo;ve interviewed 100+ developers to showcase the biggest opportunities in the
        Ethereum ecosystem
--- a/components/resources/index.js
+++ b/components/resources/index.js
@ -1,108 +1,29 @@
 import React from 'react';
-import Parser from 'html-react-parser';
-import Slider from 'react-slick';
-import Modal from '../modal';
+import getConfig from 'next/config';
 import WordCloud from '../wordCloud';
 import Data from '../../data/resources/wordclouds';
 import './style.scss';

-class Resources extends React.Component {
-  constructor(props) {
-    super(props);
+const { publicRuntimeConfig } = getConfig();

-    this.state = {
-      isWordCloudModalOpen: false,
-      activeSlide: 0,
-    };
-    this.openWordCloudModal = this.openWordCloudModal.bind(this);
-    this.closeWordCloudModal = this.closeWordCloudModal.bind(this);
-  }
-
-  openWordCloudModal(event) {
-    /*
-     * Check if clicked element is a child and doesn't have a data-index,
-     * then go get data-index from the parentNode
-     */
-    let clickedElement = event.target;
-    while (clickedElement.dataset.index === undefined) {
-      clickedElement = clickedElement.parentNode;
-    }
-    const clickedIndex = clickedElement.dataset.index;
-    this.slider.slickGoTo(clickedIndex);
-
-    this.setState({
-      isWordCloudModalOpen: true,
-      activeSlide: clickedIndex,
-    });
-  }
-
-  closeWordCloudModal() {
-    this.setState({ isWordCloudModalOpen: false });
-  }
-
-  render() {
-    const { isWordCloudModalOpen, activeSlide } = this.state;
-    const settings = {
-      infinite: true,
-      speed: 500,
-      slidesToShow: 1,
-      slidesToScroll: 1,
-      initialSlide: activeSlide,
-      className: 'resources-content-slider',
-      arrows: false,
-    };
-
-    return (
-      <div className="resources-wrap" id="resources">
-        <div className="container">
-          <h2 className="main-heading">Resources</h2>
-          <div className="wordclouds-wrap">
-            {
-              Data.map((wordCloud, index) =>
-                (<WordCloud
-                  index={index}
-                  openWordCloudModal={this.openWordCloudModal}
-                  key={wordCloud.title}
-                  words={wordCloud}
-                />))
-            }
-          </div>
-          <Modal
-            isModalOpen={isWordCloudModalOpen}
-            closeModal={this.closeWordCloudModal}
-          >
-            <Slider ref={slider => (this.slider = slider)} {...settings}> {/* eslint-disable-line */}
-              {
-                Data.map((slide, index, array) => {
-                  const prevItemIndex = index - 1 === -1 ? array.length - 1 : index - 1;
-                  const nextItemIndex = index + 1 === array.length ? 0 : index + 1;
-
-                  return (
-                    <div key={slide.title}>
-                      <div className="slide-inner">
-                        <div className="slide-header">
-                          <div className="slide-arrow" role="button" tabIndex="0" onClick={() => this.slider.slickGoTo(prevItemIndex)}> {/* eslint-disable-line */}
-                            &lt; <span>{ array[prevItemIndex].title }</span>
-                          </div>
-                          <h3>{ slide.title }</h3>
-                          <div className="slide-arrow" role="button" tabIndex="0" onClick={() => this.slider.slickGoTo(nextItemIndex)}> {/* eslint-disable-line */}
-                            <span>{ array[nextItemIndex].title }</span> &gt;
-                          </div>
-                        </div>
-                        <div className="slide-content">
-                          { Parser(slide.slideContent) }
-                        </div>
-                      </div>
-                    </div>
-                  );
-                })
-              }
-            </Slider>
-          </Modal>
-        </div>
+const Resources = () => (
+  <div className="resources-wrap" id="resources">
+    <div className="container">
+      <h2 className="main-heading" style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/heading-textured-bg.jpg)` }}>
+        Resources
+      </h2>
+      <div className="wordclouds-wrap">
+        {
+          Data.map((wordCloud, index) =>
+            (<WordCloud
+              index={index}
+              key={wordCloud.title}
+              words={wordCloud}
+            />))
+        }
      </div>
-    );
-  }
-}
+    </div>
+  </div>
+);

 export default Resources;
--- a/components/resources/style.scss
+++ b/components/resources/style.scss
@ -1,78 +1,28 @@
@import './assets/styles/global.scss';

 .resources-wrap {
-  padding: calculateRem(40) 0;
+  padding: calculateRem(40) 0 calculateRem(60);

  h2 {
-    text-align: center;
    margin-bottom: calculateRem(24);
+
+    @media (min-width: $tablet) {
+      text-align: center;
+    }
+  }
+
+  .container {
+    max-width: calculateRem(846);
  }
 }

 .wordclouds-wrap {
-  margin-bottom: calculateRem(24);
+  display: grid;
+  grid-gap: calculateRem(24);
+  grid-template-columns: repeat(1fr);

-  @media (min-width: $bigMobile) {
-    display: grid;
+  @media (min-width: $tablet) {
+    grid-gap: calculateRem(16);
    grid-template-columns: repeat(2, 1fr);
  }
 }
-
-.resources-content-slider {
-
-  @media (min-width: $tablet) {
-
-    .slick-arrow {
-      top: calculateRem(8);
-    }
-  }
-
-  .slide-inner {
-    text-align: center;
-    outline: none;
-
-    &:focus,
-    &:active {
-      outline: none;
-    }
-  }
-
-  .slide-header {
-    display: flex;
-    justify-content: space-between;
-
-    @media (min-width: $tablet) {
-      margin-bottom: calculateRem(24);
-    }
-
-    h3 {
-      margin: 0 calculateRem(40);
-    }
-  }
-
-  .slide-content {
-    max-width: calculateRem(1024);
-    margin: 0 auto;
-    padding: 0 calculateRem(32);
-  }
-
-  .slide-arrow {
-    cursor: pointer;
-    margin-top: calculateRem(32);
-    outline: none;
-
-    @media (min-width: $tablet) {
-      margin-top: 0;
-    }
-
-    span {
-      display: none;
-
-      @media (min-width: $tablet) {
-        display: inline-block;
-        margin: 0 calculateRem(8);
-        font-size: calculateRem(12);
-      }
-    }
-  }
-}
--- a/components/searchBar/index.js
+++ b/components/searchBar/index.js
@ -8,7 +8,9 @@ const { publicRuntimeConfig } = getConfig();
 const SearchBar = props => (
  <div className="search-bar" style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/header-bg.jpg)` }}>
    <div className="container">
-      <h3 className="main-heading">Archives</h3>
+      <h3 className="main-heading" style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/heading-textured-bg.jpg)` }}>
+        Archives
+      </h3>
      <form className="search-form">
        <input
          className="search-input"
--- a/components/wordCloud/index.js
+++ b/components/wordCloud/index.js
@ -3,25 +3,27 @@ import { PropTypes } from 'prop-types';
 import './style.scss';

 const WordCloud = props => (
-  // eslint-disable-next-line
  <div
    className="wordcloud"
    data-index={props.index}
-    onClick={props.openWordCloudModal}
-    role="button"
-    tabIndex="0"
  >
-    <h3>{ props.words.title }</h3>
    <div>
-      { props.words.cloud.map(word => (
-        <span
-          key={word.word}
-          className={`size-${word.size}`}
-        >
-          { word.word }
-        </span>
-        ))
-      }
+      <p className="number">{ (props.index + 1).toString().padStart(3, '0') }</p>
+      <h3>{ props.words.title }</h3>
+      <div className="words-wrap">
+        { props.words.cloud.map(word => (
+          <span
+            key={word.word}
+            className={`size-${word.size}`}
+          >
+            { word.url ?
+              (<a href={word.url} target="_blank" rel="noopener noreferrer">{ word.word }</a>) :
+              <span>{ word.word }</span>
+            }
+          </span>
+          ))
+        }
+      </div>
    </div>
  </div>
 );
@ -32,7 +34,6 @@ WordCloud.propTypes = {
    title: PropTypes.string,
    cloud: PropTypes.array,
  }).isRequired,
-  openWordCloudModal: PropTypes.func.isRequired,
 };

 export default WordCloud;
--- a/components/wordCloud/style.scss
+++ b/components/wordCloud/style.scss
@ -1,33 +1,95 @@
@import './assets/styles/global.scss';

 .wordcloud {
-  text-align: center;
-  padding: calculateRem(24);
-  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: calculateRem(24) 0 calculateRem(24) calculateRem(24);
  outline: none;
+  background-color: $navy;

-  h3{
-    margin-bottom: calculateRem(8);
+  @media (min-width: $tablet) {
+    padding-top: calculateRem(40);
+    padding-bottom: calculateRem(40);
  }

-  span {
-    display: inline-block;
-    padding: 0 calculateRem(8);
+  h3 {
+    @include hasRedUnderline;
+    position: relative;
+    margin: calculateRem(-24) 0 calculateRem(60) calculateRem(40);
+    color: #fff;
+    font-family: $secondary-font;
+    font-size: calculateRem(22);
+    line-height: 1;
+    letter-spacing: 2px;
+    padding-right: calculateRem(24);
+    transition: font-size 0.2s ease;

-    &.size-1 {
-      font-size: calculateRem(30);
+    @media (min-width: $tablet) {
+      font-size: calculateRem(38);
    }

-    &.size-2 {
-      font-size: calculateRem(25);
+    &::before {
+      z-index: 0;
+      bottom: calculateRem(-8);
    }
+  }

-    &.size-3 {
-      font-size: calculateRem(20);
-    }
+  p {
+    font-family: $secondary-font;
+    color: $blue-light;
+    font-size: calculateRem(100);
+    line-height: 0.8;
+  }

-    &.size-4 {
-      font-size: calculateRem(15);
+  .words-wrap {
+    text-align: center;
+    padding-right: calculateRem(24);
+
+    > span {
+      display: inline-block;
+      line-height: 1.2;
+      padding: calculateRem(4) calculateRem(12);
+      transform: scale(1);
+      transition: transform 0.2s ease-in-out;
+
+      &.size-1 {
+        font-size: calculateRem(30);
+      }
+
+      &.size-2 {
+        font-size: calculateRem(25);
+      }
+
+      &.size-3 {
+        font-size: calculateRem(20);
+      }
+
+      &.size-4 {
+        font-size: calculateRem(15);
+      }
+
+      &:hover {
+        transform: scale(1.05);
+      }
+
+      > span,
+      > a {
+        color: $text-color;
+        transition: color 0.2s ease;
+
+        &:hover {
+          color: #fff;
+          text-shadow: 0 0 11px #000;
+        }
+      }
+
+      > a {
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
    }
  }
 }
--- a/data/archives/projects.js
+++ b/data/archives/projects.js
@ -1,16 +1,14 @@
 const data = [
-  'Project 1',
-  'Project 2',
-  'Project 3',
-  'Project 4',
-  'Project 5',
-  'Project 6',
-  'Project 7',
-  'Project 8',
-  'Project 9',
-  'Project 10',
-  'Project 11',
-  'Project 12'
+  'Ethereum Foundation',
+  'Ethereum Community Fund',
+  'Solidity',
+  'Go-ethereum',
+  'Parity',
+  'Remix',
+  'Swarm',
+  'Vyper',
+  'eWASM',
+  'Casper/PoS'
 ];

 export default data;
--- a/data/content/content.js
+++ b/data/content/content.js
@ -0,0 +1,5 @@
+const data = {
+  blurb: '<p>The community behind ETHPrize has interviewed over 100 developers in order to produce this website which showcases the biggest frustrations and opportunities in the ecosystem.</p><p>We invite all developers, product managers, designers and #buidlers to use the ideas here and figure out what to make next so that we can all continue to build the world’s best cryptocurrency community and ship great products that actually improve the lives of as many people as possible.</p>',
+};
+
+export default data;
--- a/data/resources/wordclouds.js
+++ b/data/resources/wordclouds.js
@ -1,107 +1,218 @@
 const data = [
  {
-    title: 'Resources Title 1',
+    title: 'Common Frustrations and Problems',
    cloud: [
      {
-        'word': 'testing',
-        'size': 3
+        'word': 'Testing',
+        'size': 1,
+        'url': '',
      },
      {
-        'word': 'Solidity',
-        'size': 2
+        'word': 'Verification',
+        'size': 3,
+        'url': '',
      },
      {
-        'word': 'Gas',
-        'size': 3
-      },
-      {
-        'word': 'Ethereum',
-        'size': 1
-      },
-      {
-        'word': 'load speed',
+        'word': 'Instability',
        'size': 4,
-      },
-    ],
-    slideContent: '<p>Slide 1 content goes here. Slide 1 content goes here. Slide 1 content goes here.</p>',
-  },
-  {
-    title: 'Resources Title 2',
-    cloud: [
-      {
-        'word': 'load speed',
-        'size': 4
-      },
-      {
-        'word': 'Gas',
-        'size': 3
-      },
-      {
-        'word': 'Ethereum',
-        'size': 2
-      },
-      {
-        'word': 'testing',
-        'size': 1
+        'url': '',
      },
      {
        'word': 'Solidity',
        'size': 2,
-      },
-    ],
-    slideContent: '<p>Slide 2 content goes here. Slide 2 content goes here. Slide 2 content goes here.</p>',
-  },
-  {
-    title: 'Resources Title 3',
-    cloud: [
-      {
-        'word': 'load speed',
-        'size': 4
+        'url': '',
      },
      {
-        'word': 'Gas',
-        'size': 3
-      },
-      {
-        'word': 'Ethereum',
-        'size': 2
-      },
-      {
-        'word': 'testing',
-        'size': 1
-      },
-      {
-        'word': 'Solidity',
+        'word': 'Deployment',
        'size': 2,
+        'url': '',
+      },
+      {
+        'word': 'Speed',
+        'size': 3,
+        'url': '',
+      },
+      {
+        'word': 'Expense',
+        'size': 4,
+        'url': '',
+      },
+      {
+        'word': 'Documentation',
+        'size': 1,
+        'url': '',
+      },
+      {
+        'word': 'Debugging',
+        'size': 2,
+        'url': '',
      },
    ],
-    slideContent: '<p>Slide 3 content goes here. Slide 3 content goes here. Slide 3 content goes here.</p>',
  },
  {
-    title: 'Resources Title 4',
+    title: 'Commonly Used Tools',
    cloud: [
      {
-        'word': 'testing',
-        'size': 3
+        'word': 'Truffle',
+        'size': 1,
+        'url': '//truffleframework.com',
      },
      {
-        'word': 'Solidity',
-        'size': 2
+        'word': 'Embark',
+        'size': 3,
+        'url': '//embark.status.im',
      },
      {
-        'word': 'Gas',
-        'size': 3
+        'word': 'Remix',
+        'size': 1,
+        'url': '//remix.ethereum.org',
      },
      {
-        'word': 'Ethereum',
-        'size': 1
+        'word': 'Ganache',
+        'size': 2,
+        'url': '//truffleframework.com/ganache',
      },
      {
-        'word': 'load speed',
+        'word': 'Ethers.js',
+        'size': 2,
+        'url': '//docs.ethers.io/ethers.js/html',
+      },
+      {
+        'word': 'Web3.js',
+        'size': 1,
+        'url': '//web3js.readthedocs.io/en/1.0/index.html',
+      },
+      {
+        'word': 'Mythril',
        'size': 4,
+        'url': '//github.com/ConsenSys/mythril',
+      },
+      {
+        'word': 'Trail of Bits',
+        'size': 4,
+        'url': '//blog.trailofbits.com/2018/03/23/use-our-suite-of-ethereum-security-tools',
+      },
+      {
+        'word': 'Code coverage',
+        'size': 4,
+        'url': '//0xproject.com/docs/sol-cov',
+      },
+      {
+        'word': 'MetaMask',
+        'size': 2,
+        'url': '//metamask.io',
+      },
+      {
+        'word': 'Infura',
+        'size': 3,
+        'url': '//infura.io',
+      },
+    ],
+  },
+  {
+    title: 'Best Educational Resources',
+    cloud: [
+      {
+        'word': 'Cryptozombies',
+        'size': 1,
+        'url': '//cryptozombies.io',
+      },
+      {
+        'word': 'Ethernauts',
+        'size': 2,
+        'url': '//ethernaut.zeppelin.solutions',
+      },
+      {
+        'word': 'Gas Golf',
+        'size': 4,
+        'url': '//g.solidity.cc',
+      },
+      {
+        'word': 'Readthedocs',
+        'size': 1,
+        'url': '//solidity.readthedocs.io/en/latest',
+      },
+      {
+        'word': 'Ethresear.ch',
+        'size': 1,
+        'url': '//ethresear.ch',
+      },
+      {
+        'word': 'Mastering Ethereum',
+        'size': 4,
+        'url': '//github.com/ethereumbook/ethereumbook',
+      },
+      {
+        'word': 'Github',
+        'size': 2,
+        'url': '//github.com/ConsenSysLabs/ethereum-developer-tools-list',
+      },
+      {
+        'word': 'Cryptoeconomics',
+        'size': 4,
+        'url': '//cryptoeconomics.study',
+      },
+      {
+        'word': 'Reddit',
+        'size': 3,
+        'url': '//www.reddit.com/r/ethereum',
+      },
+      {
+        'word': 'Stackexchange',
+        'size': 3,
+        'url': '//ethereum.stackexchange.com',
+      },
+      {
+        'word': 'Vitalik',
+        'size': 2,
+        'url': '//vitalik.ca',
+      },
+    ],
+  },
+  {
+    title: 'Other Great Ideas',
+    cloud: [
+      {
+        'word': 'Mainnet Fork Testing Instance',
+        'size': 1,
+        'url': '',
+      },
+      {
+        'word': 'Solidity IDE with Visual Debugger',
+        'size': 2,
+        'url': '',
+      },
+      {
+        'word': 'Solidity Interpreter',
+        'size': 2,
+        'url': '',
+      },
+      {
+        'word': 'Better Debuggers',
+        'size': 1,
+        'url': '',
+      },
+      {
+        'word': 'Fuzz Testing Tools',
+        'size': 3,
+        'url': '',
+      },
+      {
+        'word': 'Decentralized Infura',
+        'size': 3,
+        'url': '',
+      },
+      {
+        'word': 'Event Monitoring Service',
+        'size': 4,
+        'url': '',
+      },
+      {
+        'word': 'Dappnode',
+        'size': 4,
+        'url': '//github.com/dappnode/DAppNode',
      },
    ],
-    slideContent: '<p>Slide 4 content goes here. Slide 4 content goes here. Slide 4 content goes here. </p>',
  },
 ];

--- a/package.json
+++ b/package.json
@ -44,8 +44,7 @@
    "prop-types": "^15.6.1",
    "react": "^16.3.2",
    "react-anchor-link-smooth-scroll": "^1.0.10",
-    "react-dom": "^16.3.2",
-    "react-slick": "^0.23.1"
+    "react-dom": "^16.3.2"
  },
  "devDependencies": {
    "babel-eslint": "^8.0.1",
--- a/pages/index.js
+++ b/pages/index.js
@ -2,6 +2,7 @@ import React from 'react';
 import PageHeader from '../components/pageHeader';
 import PageFooter from '../components/pageFooter';
 import Resources from '../components/resources';
+import ContentBlurb from '../components/contentBlurb';
 import BrowseArchives from '../components/browseArchives';
 import '../styles.scss';

@ -12,6 +13,7 @@ class PageWrapper extends React.Component {
      <div className="page-wrapper">
        <PageHeader />
        <Resources />
+        <ContentBlurb />
        <BrowseArchives />
        <PageFooter />
      </div>
--- a/static/img/heading-textured-bg.jpg
+++ b/static/img/heading-textured-bg.jpg