Section intro structure and styling

src/components/Button.js

@@ -6,14 +6,10 @@ let defaultClasses =
 
 let standardBtn = 'border hover:bg-teal hover:text-white hover:border-teal'
 
-let filledBtn = 'text-grey-lightest bg-grey-darkest hover:bg-teal'
-
 const Button = ({ ...props }) => (
   <Link
     to={props.url}
-    className={`${props.standard ? standardBtn : ''} ${
-      props.filled ? filledBtn : ''
-    } ${defaultClasses} ${props.classes}`}
+    className={`${props.standard ? standardBtn : ''} ${defaultClasses} ${props.classes}`}
   >
     {props.text}
   </Link>

src/components/PageIntro.js

@@ -9,23 +9,26 @@ const PageIntro = ({ ...props }) => (
       <div className="text-center lg:text-left lg:mt-4">
         <SectionIntro
           light
-          intro="Welcome To Saburly"
+          intro={props.intro}
           classes="lg:text-left lg:max-w-xs content-center"
-          headline="We build the right software for your needs"
-          text="We are a team of creative, open minded, skilled and passionate engineers that ship success every day."
+          headline={props.headline}
+          text={props.text}
         />
+        { props.button && 
         <Button
-          filled
-          text="Let's Build Together"
-          url="/proposal"
-          classes="shadow-md hover:shadow-lg rounded-full mt-4 font-light btn-saburly-green mb-20"
+          text={props.buttonText}
+          url={props.url}
+          classes={props.buttonClasses}
         />
+        }
       </div>
-      <img
-        src={props.image}
-        className="lg:-mt-4 md:max-w-md xl:max-w-full z-10"
-        alt="Software Development Agency"
-      />
+      {props.image && (
+        <img
+          src={props.image}
+          className="lg:-mt-4 md:max-w-md xl:max-w-full z-10"
+          alt="Software Development Agency"
+        />
+      )}
     </div>
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400.8 96.4">
       <title>bg-saburly-white</title>

src/components/SectionIntro.js

@@ -6,26 +6,32 @@ let headlineLight = 'text-indigo'
 
 const IntroDefault = ({ ...props }) => (
   <div className={`${props.classes}`}>
-    <h3
-      className={`
+    {props.intro && (
+      <h3
+        className={`
       ${
         props.light ? headlineDark : headlineLight
       } opacity-50 text-sm font-light uppercase pt-2 pb-1`}
-    >
-      {props.intro}
-    </h3>
-    <h1
-      className={`${props.light ? headlineDark : ''}
+      >
+        {props.intro}
+      </h3>
+    )}
+    {props.headline && (
+      <h1
+        className={`${props.light ? headlineDark : ''}
      font-light pt-1 pb-2`}
-    >
-      {props.headline}
-    </h1>
-    <p
-      className={`${props.light ? headlineDark : ''} 
+      >
+        {props.headline}
+      </h1>
+    )}
+    {props.text && (
+      <p
+        className={`${props.light ? headlineDark : ''} 
     font-light leading-normal opacity-70`}
-    >
-      {props.text}
-    </p>
+      >
+        {props.text}
+      </p>
+    )}
   </div>
 )
 

src/pages/index.js

@@ -17,7 +17,7 @@ import LogoCoor from '../images/logo-coor-color.svg'
 
 const IndexPage = ({ ...props }) => (
   <main>
-    <PageIntro image={ImgIntro} />
+    <PageIntro button buttonText="Let's Build Together" buttonUrl="/proposal" buttonClasses="text-white shadow-md hover:shadow-lg rounded-full mt-4 font-light btn-saburly-green mb-20" intro="Welcome To Saburly" headline="We build the right software for your needs" text="We are a team of creative, open minded, skilled and passionate engineers that ship success every day" image={ImgIntro} />
 
     <section className="container mx-auto text-center my-12 p-4">
       <SectionIntro
@@ -106,7 +106,7 @@ const IndexPage = ({ ...props }) => (
         filled
         text="Get a free proposal"
         url="/proposal"
-        classes="shadow-md hover:shadow-lg rounded-full mt-4 font-light btn-saburly-green"
+        classes="text-white shadow-md hover:shadow-lg rounded-full mt-4 font-light btn-saburly-green"
       />
     </section>
 

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>
     )
   }