Section intro structure and styling

src/templates/blog.js

@@ -1,28 +1,32 @@
 import React, { Component } from 'react'
 import Link from 'gatsby-link'
 
+import PageIntro from '../components/PageIntro'
 import Card from '../components/Card'
 
 class Blog extends Component {
   render() {
     const data = this.props.data
     return (
-      <div className="container mx-auto p-4 w-full md:flex md:flex-wrap items-stretch w-full">
-        {data.allWordpressPost.edges.map(({ node }) => (
-          <div key={node.id} className="md:w-1/2 p-2">
-            <Card
-              url={`blog/${node.slug}`}
-              title={node.title}
-              date={node.date}
-              excerpt={node.excerpt}
-              image={
-                node.featured_media
-                  ? node.featured_media.localFile.childImageSharp.resolutions
-                  : undefined
-              }
-            />
-          </div>
-        ))}
+      <div>
+        <PageIntro intro="Blog" headline="Occasionally we find the time to have fun and publish" />
+        <div className="container mx-auto p-4 w-full md:flex md:flex-wrap items-stretch w-full">
+          {data.allWordpressPost.edges.map(({ node }) => (
+            <div key={node.id} className="md:w-1/2 p-2">
+              <Card
+                url={`blog/${node.slug}`}
+                title={node.title}
+                date={node.date}
+                excerpt={node.excerpt}
+                image={
+                  node.featured_media
+                    ? node.featured_media.localFile.childImageSharp.resolutions
+                    : undefined
+                }
+              />
+            </div>
+          ))}
+        </div>
       </div>
     )
   }