From 2df21e68ead239c10a7090cdb299f6b7f7730526 Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Thu, 23 Aug 2018 14:18:31 +0200
Subject: [PATCH] Design Changes and tweaks

---
 src/components/Header.js    |  2 +-
 src/components/PageIntro.js |  2 +-
 src/components/SideMenu.css |  2 +-
 src/components/SideMenu.js  | 10 +++++-----
 src/pages/contact.js        |  8 ++++----
 src/pages/index.js          |  3 +--
 src/styles/general.css      | 10 ++++++++--
 7 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/components/Header.js b/src/components/Header.js
index 3fc9731..8556bbb 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -13,7 +13,7 @@ class Header extends Component {
   render() {
     return (
       <header className="bg-saburly-light-header">
-        <nav className="container mx-auto flex items-center justify-between lg:p-6 p-4">
+        <nav className="container border-saburly-header mx-auto flex items-center justify-between lg:p-6 p-4">
           <Link to="/">
             <div className="max-w-xs mr-8">
               <img
diff --git a/src/components/PageIntro.js b/src/components/PageIntro.js
index 9c847fb..ee7696d 100644
--- a/src/components/PageIntro.js
+++ b/src/components/PageIntro.js
@@ -10,7 +10,7 @@ const PageIntro = ({ ...props }) => (
         props.reversed ? 'flex-col-reverse' : ''
       } p-4`}
     >
-      <div className="text-center lg:text-left lg:mt-4">
+      <div className="text-center lg:text-left">
         <SectionIntro
           intro={props.intro}
           classes={`lg:text-left lg:max-w-sm content-center ${
diff --git a/src/components/SideMenu.css b/src/components/SideMenu.css
index 8d49f93..f3e34e5 100644
--- a/src/components/SideMenu.css
+++ b/src/components/SideMenu.css
@@ -8,7 +8,7 @@
   -webkit-overflow-scrolling: touch;
   z-index: 0;
   display: none;
-  background-color: #5640a6;
+  background-color: #7444cf;
 }
 
 .slideout-menu-left {
diff --git a/src/components/SideMenu.js b/src/components/SideMenu.js
index 317d368..28a824c 100644
--- a/src/components/SideMenu.js
+++ b/src/components/SideMenu.js
@@ -51,7 +51,7 @@ class SideMenu extends Component {
             X
           </button>
           <Link to="/" className="side-close menu-home no-underline">
-            <li className="hover:bg-indigo hover:opacity-100 opacity-80 text-right no-underline text-2xl uppercase p-4 text-white">
+            <li className="hover:bg-indigo hover:opacity-100 text-right no-underline text-2xl uppercase p-4 text-white">
               Home
             </li>
           </Link>
@@ -59,22 +59,22 @@ class SideMenu extends Component {
             to="/services"
             className="side-close menu-services no-underline"
           >
-            <li className="hover:bg-indigo hover:opacity-100 opacity-80 text-right no-underline text-2xl uppercase p-4 text-white">
+            <li className="hover:bg-indigo hover:opacity-100 text-right no-underline text-2xl uppercase p-4 text-white">
               Services
             </li>
           </Link>
           <Link to="/about" className="side-close menu-about no-underline">
-            <li className="hover:bg-indigo hover:opacity-100 opacity-80 text-right no-underline text-2xl uppercase p-4 text-white">
+            <li className="hover:bg-indigo hover:opacity-100 text-right no-underline text-2xl uppercase p-4 text-white">
               About Us
             </li>
           </Link>
           <Link to="/blog" className="side-close menu-blog no-underline">
-            <li className="hover:bg-indigo hover:opacity-100 opacity-80 text-right no-underline text-2xl uppercase p-4 text-white">
+            <li className="hover:bg-indigo hover:opacity-100 text-right no-underline text-2xl uppercase p-4 text-white">
               Blog
             </li>
           </Link>
           <Link to="/contact" className="side-close menu-contact no-underline">
-            <li className="hover:bg-indigo hover:opacity-100 opacity-80 text-right no-underline text-2xl uppercase p-4 text-white">
+            <li className="hover:bg-indigo hover:opacity-100 text-right no-underline text-2xl uppercase p-4 text-white">
               Contact
             </li>
           </Link>
diff --git a/src/pages/contact.js b/src/pages/contact.js
index 9cc87d5..3608828 100644
--- a/src/pages/contact.js
+++ b/src/pages/contact.js
@@ -28,7 +28,7 @@ const ContactPage = () => (
               <div className="font-normal text-xl mb-2">
                 Saburly Office in Sarajevo
               </div>
-              <p className="md:flex text-left justify-around text-grey-darker text-base">
+              <div className="md:flex text-left justify-around text-grey-darker text-base">
                 <div>
                   <h4>Adress</h4>
                   Saburly d.o.o <br />
@@ -54,7 +54,7 @@ const ContactPage = () => (
                     bosnia@saburly.com
                   </a>{' '}
                 </div>
-              </p>
+              </div>
             </div>
           </div>
         </div>
@@ -65,7 +65,7 @@ const ContactPage = () => (
               <div className="font-normal text-xl mb-2">
                 Saburly Office in Stockholm
               </div>
-              <p className="md:flex text-left justify-around text-grey-darker text-base">
+              <div className="md:flex text-left justify-around text-grey-darker text-base">
                 <div>
                   <h4>Adress</h4>
                   Saburly AB <br />
@@ -91,7 +91,7 @@ const ContactPage = () => (
                     sweden@saburly.com
                   </a>{' '}
                 </div>
-              </p>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/pages/index.js b/src/pages/index.js
index 073ab38..3aee753 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -28,8 +28,7 @@ const IndexPage = ({ ...props }) => (
       buttonClasses="text-white font-normal shadow hover:shadow-md rounded-full mt-4 font-light bg-teal hover:bg-teal-dark mb-20"
       intro="Welcome To Saburly"
       headline="We build the right software for you"
-      text="Saburly is a team of highly experienced, creative and passionate engineers. Our mission is to make you stand out and gain competitive advantages with the help of modern technologies."
-      sectionClasses="md:pt-10"
+      text="We're a team of experienced, creative and passionate engineers. Our mission is to make you stand out and gain competitive advantages with the help of modern technologies."
       image={ImgIntro}
       imgClasses="-mb-20 lg:-mt-12"
     />
diff --git a/src/styles/general.css b/src/styles/general.css
index ca807b7..64d4eb3 100644
--- a/src/styles/general.css
+++ b/src/styles/general.css
@@ -21,7 +21,7 @@
 }
 
 .bg-saburly-light-header {
-  background: #5640a6;
+  background: #7444cf;
   @media (min-width: 992px) {
     background: linear-gradient(
       90deg,
@@ -56,7 +56,7 @@
   background: rgb(255, 255, 255);
   background: linear-gradient(
     180deg,
-    RGBA(112, 92, 182, 1) 0%,
+    RGBA(116, 68, 207, 1) 0%,
     RGBA(57, 57, 144, 1) 100%
   );
 }
@@ -111,3 +111,9 @@
 .border-contact {
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
 }
+
+.border-saburly-header {
+  @media (max-width: 991px) {
+    box-shadow: 0 4px 2px -2px #000000;
+  }
+}