Add styling and restructure of markup

src/components/Header.css

@@ -1,10 +1,10 @@
 .menu_icon [class*='menu_bar-'] {
-  background: #000;
+  background: #ffffff;
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
   -webkit-transition: 0.2s ease all;
   transition: 0.2s ease all;
-  height: 0.17rem;
+  height: 0.18rem;
   display: block;
   margin-bottom: 0.3rem;
 }

src/components/Header.js

@@ -8,7 +8,7 @@ import "./Header.css"
 let menuClasses = "no-underline mt-4 lg:inline-block opacity-50 lg:mt-0 text-white hover:opacity-100 uppercase mr-4"
 
 const Header = () => (
-  <header className="bg-saburly-default">
+  <header className="bg-saburly-blue">
     <nav className="container mx-auto flex justify-between lg:p-6 p-4">
       <Link to="/">
         <img src={LogoSaburly} alt='Saburly Logo' className="max-w-xs" />
@@ -32,7 +32,7 @@ const Header = () => (
             <li className={menuClasses}>BLOG</li>
           </Link>
 
-          <Button text="Contact" standard classes="rounded-full text-white" url="/contact" />
+          <Button text="Contact" standard classes="rounded-full text-white hover:shadow" url="/contact" />
         </ul>
       </div>
     </nav>

src/images/bg-saburly-default.svg

@@ -1,21 +1 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400.8 96.4"><title>bg-saburly-white</title><path d="M417.7,96.4C655.2,93.3,743.6,0,983.1,0h417.7V96.4H417.7Z" transform="translate(0 0)" style={{ fill: '#fff' }}/></svg>
-<svg width="1918px" height="902px" viewBox="0 0 1918 902" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
-    <title>background</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <linearGradient x1="0%" y1="1.11022302e-14%" x2="95.8155954%" y2="80.9164388%" id="linearGradient-1">
-            <stop stop-color="#454CB7" offset="0%"></stop>
-            <stop stop-color="#9DA3FF" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="Moris-version" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Landing-Page" transform="translate(-2.000000, 0.000000)" fill="url(#linearGradient-1)">
-            <g id="Header" transform="translate(2.000000, 0.000000)">
-                <g id="background">
-                    <path d="M1153.8909,770 C828.313018,774.212584 707.10415,902 378.889652,902 C156.412951,902 30.1164004,902 0,902 L0,770 L0,0 L1920,0 L1920,770 L1153.8909,770 Z" id="background_shape"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

src/pages/index.js

@@ -5,7 +5,7 @@ import InfoBox from '../components/InfoBox'
 import Button from '../components/Button'
 import Card from '../components/Card'
 
-import ImgIntro from '../images/programming-company.svg'
+import ImgIntro from '../images/software-consulting.svg'
 import ImgDesign from '../images/ux-ui-design.svg'
 import ImgFullstack from '../images/fullstack-web-development.svg'
 import ImgMobile from '../images/mobile-development.svg'
@@ -16,14 +16,15 @@ import LogoCoor from '../images/logo-coor.svg'
 
 const IndexPage = () => (
   <div>
-    <section className="bg-saburly-default">
+    <section className="bg-saburly-blue relative">
-    <div className="container mx-auto flex lg:flex-row flex-col flex-col-reverse lg:p-4">
+      <div className="container mx-auto flex lg:flex-row flex-col flex-col-reverse lg:p-4">
-      <div className="text-center lg:text-left lg:mt-4">
+        <div className="text-center lg:text-left lg:mt-4">
-        <SectionIntro intro="Welcome To Saburly" classes="lg:text-left content-center" headline="We build the right software for your needs" text="We are a team of creative, open minded, skilled and passionate engineers that ship success every day." />
+          <SectionIntro intro="Welcome To Saburly" classes="lg:text-left content-center" headline="We build the right software for your needs" text="We are a team of creative, open minded, skilled and passionate engineers that ship success every day." />
-        <Button filled text="Let's Build Together" url="/proposal" classes="rounded-full mt-4 font-light btn-saburly-green" />
+          <Button filled text="Let's Build Together" url="/proposal" classes="shadow-md hover:shadow-lg rounded-full mt-4 font-light btn-saburly-green mb-20" />
+        </div>
+        <img src={ImgIntro} className="lg:-mt-4 z-10" alt="Software Development Agency" />
       </div>
-      <img src={ImgIntro} className="lg:-mt-4" alt="Software Development Agency" />
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400.8 96.4"><title>bg-saburly-white</title><path d="M417.7,96.4C655.2,93.3,743.6,0,983.1,0h417.7V96.4H417.7Z" transform="translate(0 0)" style={{ fill: '#fff' }}/></svg>
-    </div>
     </section>
 
     <section className="text-center p-3">

src/styles/custom.css

@@ -1,8 +1,13 @@
-.bg-saburly-default {
+.bg-saburly-blue {
   background: rgb(69,76,183);
   background: linear-gradient(90deg, rgba(69,76,183,1) 0%, rgba(157,163,255,1) 100%);
 }
 
+.bg-saburly-blue svg {
+  position: absolute;
+  bottom: 0;
+}
+
 .btn-saburly-green {
   background: rgb(0,255,252);
   background: linear-gradient(150deg, rgba(0,255,252,1) 0%, rgba(0,177,186,1) 55%);

src/styles/index.css

@@ -3806,6 +3806,26 @@ table {
   box-shadow: none;
 }
 
+.hover\:shadow:hover {
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+}
+
+.hover\:shadow-md:hover {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+}
+
+.hover\:shadow-lg:hover {
+  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+}
+
+.hover\:shadow-inner:hover {
+  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06);
+}
+
+.hover\:shadow-none:hover {
+  box-shadow: none;
+}
+
 .fill-current {
   fill: currentColor;
 }
@@ -7926,6 +7946,26 @@ table {
     box-shadow: none;
   }
 
+  .sm\:hover\:shadow:hover {
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+  }
+
+  .sm\:hover\:shadow-md:hover {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+  }
+
+  .sm\:hover\:shadow-lg:hover {
+    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+  }
+
+  .sm\:hover\:shadow-inner:hover {
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06);
+  }
+
+  .sm\:hover\:shadow-none:hover {
+    box-shadow: none;
+  }
+
   .sm\:text-left {
     text-align: left;
   }
@@ -12039,6 +12079,26 @@ table {
     box-shadow: none;
   }
 
+  .md\:hover\:shadow:hover {
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+  }
+
+  .md\:hover\:shadow-md:hover {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+  }
+
+  .md\:hover\:shadow-lg:hover {
+    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+  }
+
+  .md\:hover\:shadow-inner:hover {
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06);
+  }
+
+  .md\:hover\:shadow-none:hover {
+    box-shadow: none;
+  }
+
   .md\:text-left {
     text-align: left;
   }
@@ -16152,6 +16212,26 @@ table {
     box-shadow: none;
   }
 
+  .lg\:hover\:shadow:hover {
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+  }
+
+  .lg\:hover\:shadow-md:hover {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+  }
+
+  .lg\:hover\:shadow-lg:hover {
+    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+  }
+
+  .lg\:hover\:shadow-inner:hover {
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06);
+  }
+
+  .lg\:hover\:shadow-none:hover {
+    box-shadow: none;
+  }
+
   .lg\:text-left {
     text-align: left;
   }
@@ -20265,6 +20345,26 @@ table {
     box-shadow: none;
   }
 
+  .xl\:hover\:shadow:hover {
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+  }
+
+  .xl\:hover\:shadow-md:hover {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+  }
+
+  .xl\:hover\:shadow-lg:hover {
+    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+  }
+
+  .xl\:hover\:shadow-inner:hover {
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06);
+  }
+
+  .xl\:hover\:shadow-none:hover {
+    box-shadow: none;
+  }
+
   .xl\:text-left {
     text-align: left;
   }

tailwind.config.js

@@ -874,7 +874,7 @@ module.exports = {
     pointerEvents: ['responsive'],
     position: ['responsive'],
     resize: ['responsive'],
-    shadows: ['responsive'],
+    shadows: ['responsive', 'hover'],
     svgFill: [],
     svgStroke: [],
     textAlign: ['responsive'],