From 191c298a491401a0ed5d964cd210432e09814e48 Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Fri, 6 Jul 2018 17:49:35 +0200
Subject: [PATCH] CSS tweaks, add reverse properties to services

---
 src/components/Service.js | 10 +++++++---
 src/pages/index.js        |  2 +-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/Service.js b/src/components/Service.js
index 6b065bf..b601e56 100644
--- a/src/components/Service.js
+++ b/src/components/Service.js
@@ -2,14 +2,18 @@ import React from 'react'
 import InfoBox from './InfoBox'
 
 const Service = ({ ...props }) => (
-  <div className="lg:flex items-center justify-center m-auto">
+  <div
+    className={`md:flex ${
+      props.reversed ? 'flex-row-reverse' : ''
+    } items-center justify-center m-auto`}
+  >
     <img
       src={props.img}
-      className={`w-full lg:max-w-sm p-4 z-10 ${props.imgClasses}`}
+      className={`w-full md:max-w-sm p-4 z-10 ${props.imgClasses}`}
       alt={`${props.title} agency`}
     />
     <InfoBox
-      classes="bg-white p-8 shadow lg:m-0 opacity-70 lg:max-w-sm"
+      classes="bg-white p-8 shadow md:m-0 opacity-70 md:max-w-sm"
       headline={props.title}
       text={props.text}
     />
diff --git a/src/pages/index.js b/src/pages/index.js
index f58a784..9110fdb 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,7 +1,6 @@
 import React from 'react'
 
 import SectionIntro from '../components/SectionIntro'
-import InfoBox from '../components/InfoBox'
 import Button from '../components/Button'
 import Card from '../components/Card'
 import Service from '../components/Service'
@@ -45,6 +44,7 @@ const IndexPage = ({ ...props }) => (
       />
 
       <Service
+        reversed
         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"