Stylistic changes according to new guidelines

src/pages/index.js

@@ -12,6 +12,7 @@ import ImgIntro from '../images/web-development-agency.svg'
 import ImgDesign from '../images/ux-ui-design.svg'
 import ImgFullstack from '../images/fullstack-web-development.svg'
 import ImgMobile from '../images/mobile-development.svg'
+import ServicesBg from '../images/services-background.svg'
 
 import LogoIBM from '../images/logo-ibm-color.svg'
 import LogoRicoh from '../images/logo-ricoh-color.svg'
@@ -40,7 +41,7 @@ const IndexPage = ({ ...props }) => (
         />
       </section>
 
-      <section className="relative">
+      <section className="bg-saburly relative bg-saburly-fadeout">
         <Service
           img={ImgDesign}
           title="User Experience (UX) Design"
@@ -66,9 +67,18 @@ const IndexPage = ({ ...props }) => (
             standard
             text="More About What We Do"
             url="/services"
-            classes="m-1 rounded-full hover:shadow-md text-grey-darker hover:shadow"
+            classes="mb-8 lg:mb-24 rounded-full hover:shadow-md text-grey-darker hover:shadow"
           />
         </div>
+
+        <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>
       </section>
 
       <section className="container mx-auto max-w-lg text-center p-4 my-12">
@@ -97,8 +107,8 @@ const IndexPage = ({ ...props }) => (
 
         <Button
           filled
-          text="Get a free proposal"
-          url="/proposal"
+          text="Let's Get In Touch"
+          url="/contact"
           classes="text-white font-normal shadow hover:shadow-md rounded-full mt-2 font-light bg-teal hover:bg-teal-dark"
         />
       </section>