Styling for buttons

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

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>