From 05e9635c7ca79cd03d51d7984778ff18c8f9fa39 Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Sat, 30 Jun 2018 14:56:04 +0200
Subject: [PATCH] Extracting to reusable components

---
 src/components/Button.js       | 10 ++++++++++
 src/components/Header.js       |  2 +-
 src/components/IntroDefault.js | 17 +++++++++++++++++
 src/components/MainIntro.js    | 18 ------------------
 src/pages/index.js             |  7 +++++--
 5 files changed, 33 insertions(+), 21 deletions(-)
 create mode 100644 src/components/Button.js
 create mode 100644 src/components/IntroDefault.js
 delete mode 100644 src/components/MainIntro.js

diff --git a/src/components/Button.js b/src/components/Button.js
new file mode 100644
index 0000000..0ee49f4
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/components/Header.js b/src/components/Header.js
index 23dae7e..868f448 100644
--- a/src/components/Header.js
+++ b/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>
diff --git a/src/components/IntroDefault.js b/src/components/IntroDefault.js
new file mode 100644
index 0000000..93a03cb
--- /dev/null
+++ b/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
diff --git a/src/components/MainIntro.js b/src/components/MainIntro.js
deleted file mode 100644
index 5ffd137..0000000
--- a/src/components/MainIntro.js
+++ /dev/null
@@ -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
diff --git a/src/pages/index.js b/src/pages/index.js
index 222cbb4..97b1ccf 100644
--- a/src/pages/index.js
+++ b/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>
 )