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 : ''} ${
+    className={`${props.standard ? standardBtn : ''} ${defaultClasses} ${props.classes}`}
-      props.filled ? filledBtn : ''
-    } ${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"
+          headline={props.headline}
-          text="We are a team of creative, open minded, skilled and passionate engineers that ship success every day."
+          text={props.text}
         />
+        { props.button && 
         <Button
-          filled
+          text={props.buttonText}
-          text="Let's Build Together"
+          url={props.url}
-          url="/proposal"
+          classes={props.buttonClasses}
-          classes="shadow-md hover:shadow-lg rounded-full mt-4 font-light btn-saburly-green mb-20"
         />
+        }
       </div>
+      {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,6 +6,7 @@ let headlineLight = 'text-indigo'
 
 const IntroDefault = ({ ...props }) => (
   <div className={`${props.classes}`}>
+    {props.intro && (
       <h3
         className={`
       ${
@@ -14,18 +15,23 @@ const IntroDefault = ({ ...props }) => (
       >
         {props.intro}
       </h3>
+    )}
+    {props.headline && (
       <h1
         className={`${props.light ? headlineDark : ''}
      font-light pt-1 pb-2`}
       >
         {props.headline}
       </h1>
+    )}
+    {props.text && (
       <p
         className={`${props.light ? headlineDark : ''} 
     font-light leading-normal opacity-70`}
       >
         {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,12 +1,15 @@
 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>
+        <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">
@@ -24,6 +27,7 @@ class Blog extends Component {
             </div>
           ))}
         </div>
+      </div>
     )
   }
 }