From 6eb6e571658300e06166182e3ba580462b33f5e9 Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Sun, 1 Jul 2018 10:55:11 +0200
Subject: [PATCH] Add work page, stylistic changes and dynamic classes to
 buttons

---
 src/components/Button.js | 10 ++++++++--
 src/components/Header.js |  2 +-
 src/pages/how-we-work.js |  9 +++++++++
 src/pages/index.js       |  6 +++---
 4 files changed, 21 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/how-we-work.js

diff --git a/src/components/Button.js b/src/components/Button.js
index 0ee49f4..2f3a02b 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -1,9 +1,15 @@
 import React from 'react'
 import Link from 'gatsby-link'
 
-const Button = ({ text, url, classes}) => (
+let defaultClasses = 'px-4 py-2 leading-none inline-block text-sm no-underline uppercase'
+
+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 }) => (
   <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>
+    <Link to={props.url} className={`${props.standard ? standardBtn : ''} ${props.filled ? filledBtn : ''} ${defaultClasses} ${props.classes}`}>{props.text}</Link>
   </div>
 )
 
diff --git a/src/components/Header.js b/src/components/Header.js
index cbcb167..163cfb0 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -36,7 +36,7 @@ const Header = () => (
           </Link>
         </ul>
 
-        <Button text="Contact" classes="rounded-full" url="/contact" />
+        <Button text="Contact" standard classes="rounded-full" url="/contact" />
 
       </div>
     </nav>
diff --git a/src/pages/how-we-work.js b/src/pages/how-we-work.js
new file mode 100644
index 0000000..3e0eb4f
--- /dev/null
+++ b/src/pages/how-we-work.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const HowWeWork = () => (
+  <div>
+    <h1>How We Work Page</h1>
+  </div>
+)
+
+export default HowWeWork
diff --git a/src/pages/index.js b/src/pages/index.js
index cff74a5..0e415fc 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -10,7 +10,7 @@ const IndexPage = () => (
     <section className="lg:flex items-center p-3">
       <div>
         <IntroDefault intro="Welcome To Saburly" classes="lg:max-w-xs" 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." />
-        <Button text="Let's Get In Touch" url="/proposal" classes="rounded-full" />
+        <Button filled text="Let's Get In Touch" url="/proposal" classes="rounded-full" />
       </div>
       <img src={ImgBuildSite} className="overflow-hidden" />
     </section>
@@ -25,8 +25,8 @@ const IndexPage = () => (
 
     <InfoBox headline="Mobile Development" text="We develop for both iOS and Android. For iOS we use Swift and Objective-C. Android applications are built in Java and Kotlin. We also enjoy working with React Native technology because it allows writing native apps for both platform at once." />
 
-    <Button text="More ABout What We Do" url="/services" classes="rounded-full" />
-    <Button text="How We Work" url="/work" classes="rounded-full" />
+    <Button standard text="More ABout What We Do" url="/services" classes="rounded-full" />
+    <Button standard text="How We Work" url="/work" classes="rounded-full" />
 
     <section className="text-center p-3">
       <IntroDefault intro="Showcase" headline="We don’t descriminate, all screens & devices are welcome" />