From d4e662be82045b9a2aeab06e3c6d6835cd78bf7e Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Wed, 4 Jul 2018 20:37:35 +0200
Subject: [PATCH] Styling for buttons

---
 src/components/Button.js | 14 +++++++++++---
 src/pages/index.js       | 25 +++++++++++++++++++------
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/components/Button.js b/src/components/Button.js
index 6e20ed6..5b3a6e3 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -1,14 +1,22 @@
 import React from 'react'
 import Link from 'gatsby-link'
 
-let defaultClasses = 'px-6 py-3 leading-none inline-block text-sm no-underline uppercase'
+let defaultClasses =
+  'px-6 py-3 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 }) => (
-    <Link to={props.url} className={`${props.standard ? standardBtn : ''} ${props.filled ? filledBtn : ''} ${defaultClasses} ${props.classes}`}>{props.text}</Link>
+  <Link
+    to={props.url}
+    className={`${props.standard ? standardBtn : ''} ${
+      props.filled ? filledBtn : ''
+    } ${defaultClasses} ${props.classes}`}
+  >
+    {props.text}
+  </Link>
 )
 
-export default Button
\ No newline at end of file
+export default Button
diff --git a/src/pages/index.js b/src/pages/index.js
index f2cb322..1e3c871 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -69,24 +69,37 @@ const IndexPage = () => (
         />
       </svg>
 
-      <Service img={ImgDesign} title="UX & UI Design" text="Our approach is simple: focus on how people will actually use the products. We offer prototyping, UI and UX design for web and mobile products. We shape UX through research, data & content analysis" />
+      <Service
+        img={ImgDesign}
+        title="UX & UI Design"
+        text="Our approach is simple: focus on how people will actually use the products. We offer prototyping, UI and UX design for web and mobile products. We shape UX through research, data & content analysis"
+      />
 
-      <Service img={ImgFullstack} title="Fullstack Web Development" text="We build web applications using the technologies such as JavaScript, React, Ruby on Rails, Python, Node.js, and Elixir. We write high-quality code that is maintainable and will stand the test of time" />
+      <Service
+        img={ImgFullstack}
+        title="Fullstack Web Development"
+        text="We build web applications using the technologies such as JavaScript, React, Ruby on Rails, Python, Node.js, and Elixir. We write high-quality code that is maintainable and will stand the test of time"
+      />
 
-      <Service img={ImgMobile} imgClasses="max-h-sm" title="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" />
+      <Service
+        img={ImgMobile}
+        imgClasses="max-h-sm"
+        title="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"
+      />
 
-      <div className="lg:flex justify-center">
+      <div className="p-8 text-center lg:flex justify-center">
         <Button
           standard
           text="More About What We Do"
           url="/services"
-          classes="rounded-full"
+          classes="m-1 rounded-full text-black hover:shadow"
         />
         <Button
           standard
           text="How We Work"
           url="/work"
-          classes="rounded-full"
+          classes="m-1 rounded-full text-black hover:shadow"
         />
       </div>
     </section>