Restructuring and layout fixes

src/components/Header.js

@@ -11,7 +11,6 @@ let menuClasses =
 class Header extends Component {
   render() {
     return (
-      <div>
         <header className="bg-saburly-indigo">
           <nav className="container mx-auto flex items-center justify-between lg:p-6 p-4">
             <Link to="/">
@@ -50,7 +49,6 @@ class Header extends Component {
             </div>
           </nav>
         </header>
-      </div>
     )
   }
 }

src/components/PageIntro.js

@@ -10,17 +10,19 @@ const PageIntro = ({ ...props }) => (
         <SectionIntro
           light
           intro={props.intro}
-          classes="lg:text-left lg:max-w-xs content-center"
+          classes={`lg:text-left lg:max-w-sm content-center ${
+            props.sectionClasses
+          }`}
           headline={props.headline}
           text={props.text}
         />
-        { props.button && 
+        {props.button && (
           <Button
             text={props.buttonText}
             url={props.url}
             classes={props.buttonClasses}
           />
-        }
+        )}
       </div>
       {props.image && (
         <img

src/pages/index.js

@@ -16,9 +16,10 @@ import LogoKinnarps from '../images/logo-kinnarps-color.svg'
 import LogoCoor from '../images/logo-coor-color.svg'
 
 const IndexPage = ({ ...props }) => (
-  <main>
+  <div>
-    <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} />
+    <PageIntro button buttonText="Let's Build Together" url="/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 daily" image={ImgIntro} />
 
+    <main>
       <section className="container mx-auto text-center my-12 p-4">
         <SectionIntro
           intro="Services"
@@ -140,6 +141,7 @@ const IndexPage = ({ ...props }) => (
         />
       </section>
     </main>
+  </div>
 )
 
 export const query = graphql`

src/templates/blog.js

@@ -9,10 +9,10 @@ class Blog extends Component {
     const data = this.props.data
     return (
       <div>
-        <PageIntro intro="Blog" headline="Occasionally we find the time to have fun and publish" />
+        <PageIntro intro="Blog" headline="Occasionally we find the time to have fun and publish" sectionClasses="mb-16 lg:mb-4" />
         <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">
+            <div key={node.id} className="mt-4 md:w-1/2 p-2">
               <Card
                 url={`blog/${node.slug}`}
                 title={node.title}