Extracting to reusable components

src/components/Button.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import Link from 'gatsby-link'
+
+const Button = ({ text, url, classes}) => (
+  <div>
+    <Link to={url} className={`no-underline inline-block text-sm px-4 py-2 leading-none border rounded text-grey-lightest hover:border-transparent hover:text-white hover:bg-white mt-4 lg:mt-0 uppercase bg-grey-darkest hover:bg-teal ${classes}`}>{text}</Link>
+  </div>
+)
+
+export default Button

src/components/Header.js

@@ -7,7 +7,7 @@ import "./Header.css"
 const Header = () => (
   <header>
     <nav className="flex items-center justify-between flex-wrap lg:p-6">
-      <div class="flex items-center flex-no-shrink text-white mr-6">
+      <div className="flex items-center flex-no-shrink text-white mr-6">
         <Link to="/">
           <img src={SaburlyLogo} alt='Saburly Logo' style={{ maxWidth: '300px' }} />
         </Link>

src/components/IntroDefault.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import Link from 'gatsby-link'
+
+import Button from './Button'
+
+const IntroDefault = ({ intro, headline, text }) => (
+  <section className="lg:flex items-center p-3">
+    <div className="max-w-xs">
+      <h3>{intro}</h3>
+      <h1>{headline}</h1>
+      <p>{text}</p>
+      <Button text="Let's Get In Touch" url="/proposal" classes="rounded-full" />
+    </div>
+  </section >
+)
+
+export default IntroDefault

src/components/MainIntro.js

@@ -1,18 +0,0 @@
-import React from 'react'
-import Link from 'gatsby-link'
-
-import ImgBuildSite from '../images/programming-company.svg'
-
-const MainIntro = () => (
-  <section className="lg:flex items-center p-3">
-    <div className="max-w-xs">
-      <h3>Welcome To Saburly</h3>
-      <h1>We build the right software for your needs</h1>
-      <p>We are a team of creative, open minded, skilled and passionate engineers that ship success every day.</p>
-      <Link to="/proposal" className="no-underline inline-block text-sm px-4 py-2 leading-none border rounded text-grey-lightest border-grey-darkest hover:border-transparent hover:text-white hover:bg-white mt-4 lg:mt-0 uppercase bg-grey-darkest hover:bg-teal rounded-full ">Let's Get In Touch</Link>
-    </div>
-    <img src={ImgBuildSite} className="overflow-hidden" />
-  </section>
-)
-
-export default MainIntro

src/pages/index.js

@@ -1,10 +1,13 @@
 import React from 'react'
 
-import MainIntro from '../components/MainIntro'
+import IntroDefault from '../components/IntroDefault'
+
+import ImgBuildSite from '../images/programming-company.svg'
 
 const IndexPage = () => (
   <div>
-    <MainIntro />
+    <IntroDefault 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." />
+      <img src={ImgBuildSite} className="overflow-hidden" />
   </div>
 )