Design Changes and tweaks

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

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 ${

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 {

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>

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>

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."
+      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."
-      sectionClasses="md:pt-10"
       image={ImgIntro}
       imgClasses="-mb-20 lg:-mt-12"
     />

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;
+  }
+}