From 906f73b34f04471260dce0754f1d94429141155d Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Wed, 1 Aug 2018 22:33:10 +0200
Subject: [PATCH] Stylistic changes according to new guidelines

---
 src/components/Header.js                      |   2 +-
 src/components/PageIntro.js                   |   2 +-
 src/components/Service.js                     |   2 +-
 src/images/saburly-logo-purple.svg            |  34 ++++++
 ...background.svg => services-background.svg} |   0
 src/pages/contact.js                          | 110 +++++++++++-------
 src/pages/index.js                            |  18 ++-
 src/styles/general.css                        |  28 ++++-
 8 files changed, 144 insertions(+), 52 deletions(-)
 create mode 100644 src/images/saburly-logo-purple.svg
 rename src/images/{serviecs-background.svg => services-background.svg} (100%)

diff --git a/src/components/Header.js b/src/components/Header.js
index 0a82d83..e611f47 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import Link, { withPrefix } from 'gatsby-link'
-import LogoSaburly from '../images/logo-saburly-colorful.svg'
+import LogoSaburly from '../images/saburly-logo-purple.svg'
 import Button from './Button'
 
 import './Header.css'
diff --git a/src/components/PageIntro.js b/src/components/PageIntro.js
index 3fa7883..7ee846b 100644
--- a/src/components/PageIntro.js
+++ b/src/components/PageIntro.js
@@ -26,7 +26,7 @@ const PageIntro = ({ ...props }) => (
       {props.image && (
         <img
           src={props.image}
-          className="lg:-mt-4 md:max-w-md xl:max-w-full z-10"
+          className="md:max-w-md xl:max-w-full z-10"
           alt="Software Development Agency"
         />
       )}
diff --git a/src/components/Service.js b/src/components/Service.js
index 553bd26..2a7059c 100644
--- a/src/components/Service.js
+++ b/src/components/Service.js
@@ -13,7 +13,7 @@ const Service = ({ ...props }) => (
       alt={`${props.title} agency`}
     />
     <InfoBox
-      classes="bg-white md:m-0 opacity-70 md:max-w-sm"
+      classes="p-4 md:m-0 opacity-70 md:max-w-sm"
       headline={props.title}
       text={props.text}
     />
diff --git a/src/images/saburly-logo-purple.svg b/src/images/saburly-logo-purple.svg
new file mode 100644
index 0000000..c1f05af
--- /dev/null
+++ b/src/images/saburly-logo-purple.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="275px" height="35px" viewBox="0 0 275 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.1 (57501) - http://www.bohemiancoding.com/sketch -->
+    <title>Saburly-Logo-Colors@2x</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="verson-2/desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Desktop/Blog" transform="translate(-316.000000, -51.000000)" fill="#8448F7" fill-rule="nonzero">
+            <g id="top_navigation" transform="translate(316.000000, 51.000000)">
+                <g id="Saburly-Logo-Colors">
+                    <g id="g26" transform="translate(137.500000, 17.500000) scale(-1, 1) rotate(-180.000000) translate(-137.500000, -17.500000) ">
+                        <path d="M11.7165253,14.2930659 C11.6671794,14.2912922 11.6201834,14.2918834 11.5720125,14.2930659 L11.4756706,14.2936571 C11.4439482,14.2936571 11.4128134,14.296022 11.3816785,14.298978 C11.3329201,14.3019341 11.2847491,14.3054814 11.2330535,14.3066639 C6.34370243,14.4373226 2.3654872,18.5445017 2.3654872,23.4628294 C2.3654872,28.3805659 6.34370243,32.4877449 11.2354033,32.6184037 C11.2847491,32.6195861 11.3329201,32.6231334 11.3816785,32.6260895 C11.4128134,32.6284544 11.4439482,32.6314105 11.4756706,32.6314105 L11.5720125,32.6320017 C11.5966854,32.6320017 11.6207709,32.6320017 11.6477936,32.6320017 C11.6748163,32.6320017 11.7041889,32.6320017 11.7394359,32.6314105 L29.6936875,32.6314105 L33.4169492,32.6314105 L33.425761,34.7538767 L11.4756706,34.7538767 C11.4081137,34.7538767 11.3411444,34.7497382 11.2747625,34.7450084 L11.1925194,34.7402787 C5.16233936,34.5871537 0.256539662,29.5287078 0.256539662,23.4628294 C0.256539662,17.396951 5.16233936,12.3373226 11.1936943,12.1847889 L11.2747625,12.1800591 C11.3411444,12.1753294 11.4081137,12.1711909 11.4756706,12.1711909" id="path34"></path>
+                        <path d="M11.475788,12.0234459 C11.4041191,12.0234459 11.3347999,12.0275845 11.2643059,12.0323142 L11.1855875,12.0370439 C5.08021376,12.1919426 0.109794511,17.3171959 0.109794511,23.4628885 C0.109794511,29.6073986 5.0796263,34.7332432 11.1885247,34.8881419 L11.2660682,34.8922804 C11.3347999,34.8970101 11.4041191,34.9017399 11.475788,34.9017399 L33.5733286,34.9017399 L33.5633419,32.4830743 L11.4763755,32.4830743 C11.4481779,32.4830743 11.4211552,32.4813007 11.3941324,32.4789358 L11.3541858,32.4759797 C11.3160015,32.4736149 11.2778172,32.47125 11.238458,32.4700676 C6.42723791,32.3423649 2.51246733,28.301402 2.51246733,23.4628885 C2.51246733,18.6237838 6.42606299,14.5828209 11.2372831,14.454527 C11.2772298,14.4533446 11.3165889,14.4509797 11.3553607,14.4486149 L11.3941324,14.44625 C11.4211552,14.4438851 11.4481779,14.4415203 11.475788,14.4415203 L11.5733048,14.4409291 C11.6214758,14.4391554 11.6661221,14.4397466 11.7119432,14.4409291 L11.7207549,14.1453209 C11.6690593,14.1435473 11.619126,14.1441385 11.5686053,14.1453209 L11.4752006,14.1459122 C11.4399536,14.1459122 11.4041191,14.1488682 11.3694595,14.1518243 C11.3019027,14.1553716 11.2666556,14.1577365 11.2302337,14.1589189 C6.26098938,14.2913514 2.21874204,18.4653378 2.21874204,23.4628885 C2.21874204,28.459848 6.26157684,32.6332432 11.2308212,32.7656757 C11.2666556,32.7668581 11.3013153,32.7686318 11.3359748,32.7709966 L11.3729842,32.7733615 C11.4041191,32.7763176 11.4399536,32.7786824 11.475788,32.7786824 L11.6479111,32.7798649 L11.744253,32.7786824 L33.2707915,32.7786824 L33.2784284,34.6061318 L11.475788,34.6061318 C11.4111685,34.6061318 11.3477238,34.601402 11.2842792,34.5972635 L11.2008612,34.5925338 C5.24528737,34.4411824 0.403519794,29.4489527 0.403519794,23.4628885 C0.403519794,17.4762331 5.24587483,12.4834122 11.1973365,12.3320608 L11.2825168,12.3273311 C11.3477238,12.3231926 11.4111685,12.3190541 11.475788,12.3190541 L11.475788,12.0234459 Z" id="path38"></path>
+                        <path d="M21.9659516,20.8074409 C22.0152974,20.8092145 22.0622935,20.8086233 22.1104644,20.8074409 L22.2068063,20.8068497 C22.2385286,20.8068497 22.2696635,20.8044848 22.3007984,20.8015287 C22.3495568,20.7985726 22.3977277,20.7950253 22.4494234,20.7938429 C27.3387744,20.6631841 31.3169897,16.5560051 31.3169897,11.6376774 C31.3169897,6.71994089 27.3387744,2.61276182 22.4470736,2.48210304 C22.3977277,2.48092061 22.3495568,2.47737331 22.3007984,2.47441723 C22.2696635,2.47205236 22.2385286,2.46909628 22.2068063,2.46909628 L22.1104644,2.46850507 C22.0857915,2.46850507 22.061706,2.46850507 22.0346833,2.46850507 C22.0076605,2.46850507 21.978288,2.46850507 21.943041,2.46909628 L3.98878934,2.46909628 L0.265527656,2.46909628 L0.256715897,0.346630068 L22.2068063,0.346630068 C22.2743631,0.346630068 22.3413325,0.350768581 22.4077144,0.355498311 L22.4899575,0.360228041 C28.5201375,0.51335304 33.4259372,5.57179899 33.4259372,11.6376774 C33.4259372,17.7035557 28.5201375,22.7631841 22.4887826,22.9157179 L22.4077144,22.9204476 C22.3413325,22.9251774 22.2743631,22.9293159 22.2068063,22.9293159" id="path42"></path>
+                        <polygon id="path46" points="69.7481232 0.338412162 54.6406571 29.724223 39.5331908 0.338412162 37.3972205 1.37717905 54.6406571 34.9174662 71.8840934 1.37717905"></polygon>
+                        <path d="M100.627756,23.2301858 L100.549038,23.2343243 C100.52084,23.236098 100.492642,23.2366892 100.464444,23.2378716 L100.464444,23.2431926 L100.341668,23.2431926 C100.340493,23.2431926 100.339318,23.2431926 100.337555,23.2431926 L100.294671,23.2431926 L100.294671,20.8168412 L100.464444,20.8168412 L100.464444,20.8180236 C100.500866,20.8156588 100.537876,20.8132939 100.576648,20.8121115 C105.38728,20.6838176 109.301464,16.6428547 109.301464,11.8043412 C109.301464,6.96523649 105.386693,2.92427365 100.574885,2.79597973 C100.533764,2.79538851 100.49323,2.79302365 100.418623,2.78829392 C100.391601,2.78592905 100.365166,2.78356419 100.336968,2.78356419 L80.589817,2.78356419 L80.589817,12.0349155 L78.2400148,12.0349155 L78.2400148,0.365489865 L100.337555,0.365489865 C100.408637,0.365489865 100.479131,0.369628378 100.546688,0.374358108 L100.624819,0.379087838 C106.733717,0.533986488 111.703549,5.65923988 111.703549,11.8043412 C111.703549,17.9494426 106.73313,23.0746959 100.627756,23.2301858" id="path50"></path>
+                        <path d="M100.574944,14.4542905 C100.533823,14.4531081 100.493288,14.4507432 100.418095,14.4460135 C100.391659,14.4436486 100.365224,14.441875 100.337027,14.441875 L80.5898758,14.441875 L80.5898758,32.4745608 L100.464503,32.4745608 L100.464503,32.4757432 C100.500925,32.4733784 100.537935,32.4716047 100.576119,32.4704223 C105.387339,32.3421284 109.300935,28.3011655 109.300935,23.4620608 C109.300935,18.6235473 105.386164,14.5825845 100.574944,14.4542905 M100.627815,34.8884966 L100.549096,34.8920439 C100.520899,34.8944088 100.492114,34.8944088 100.464503,34.8961824 L100.464503,34.9015034 L100.341726,34.9015034 C100.340551,34.9015034 100.339376,34.9015034 100.337614,34.9015034 L80.5898758,34.9015034 L78.2647464,34.9015034 L78.2400736,34.9015034 L78.2400736,12.0238007 L80.5898758,12.0238007 L100.337614,12.0238007 C100.408696,12.0238007 100.47919,12.0279392 100.546747,12.0320777 L100.624877,12.0368074 C106.733776,12.1922973 111.703608,17.3175507 111.703608,23.4620608 C111.703608,29.6077534 106.733189,34.7330068 100.627815,34.8884966" id="path54"></path>
+                        <path d="M136.348921,0.346807432 C127.154732,0.346807432 119.674724,8.00305742 119.674724,17.4140372 C119.674724,17.5275507 119.668262,17.6457939 119.662388,17.7646284 C119.645939,18.0543243 119.630666,18.3363345 119.648876,18.6236655 L119.646527,34.9453716 L122.019239,34.9453716 L122.019239,18.545625 C122.006316,18.3055912 122.018652,18.1246791 122.029226,17.9461318 C122.039213,17.7587162 122.048025,17.5825338 122.048025,17.4140372 C122.048025,9.32324322 128.463572,2.74182432 136.348921,2.74182432 C143.952294,2.74182432 150.252701,8.82662161 150.692702,16.5952027 L150.710913,17.0941892 C150.715612,17.241402 150.718549,17.350777 150.718549,17.4607432 C150.718549,17.5713007 150.715612,17.6818581 150.712087,17.7912331 L150.671554,18.8329561 L153.054253,18.9127703 L153.081863,17.9082939 C153.08715,17.7598986 153.091263,17.6115034 153.091263,17.4607432 C153.091263,17.3105743 153.08715,17.1621791 153.081863,17.0131926 L153.042504,16.1659797 C152.37986,7.28472972 145.048476,0.346807432 136.348921,0.346807432" id="path58"></path>
+                        <path d="M128.936705,22.2392483 C128.936705,23.2803801 129.774997,24.1240456 130.809497,24.1240456 C131.84341,24.1240456 132.681702,23.2803801 132.681702,22.2392483 C132.681702,21.1981166 131.84341,20.354451 130.809497,20.354451 C129.774997,20.354451 128.936705,21.1981166 128.936705,22.2392483" id="path62"></path>
+                        <path d="M140.549839,22.2392483 C140.549839,23.2803801 141.388131,24.1240456 142.422631,24.1240456 C143.456544,24.1240456 144.294837,23.2803801 144.294837,22.2392483 C144.294837,21.1981166 143.456544,20.354451 142.422631,20.354451 C141.388131,20.354451 140.549839,21.1981166 140.549839,22.2392483" id="path66"></path>
+                        <path d="M182.245788,12.0320777 C182.178231,12.027348 182.107737,12.0232095 182.036655,12.0232095 L179.027733,12.0232095 L190.478907,0.346689189 L193.692262,0.346689189 L182.336255,12.0373986 C182.331556,12.0373986 182.328031,12.0368074 182.323919,12.0368074 L182.245788,12.0320777 Z" id="path70"></path>
+                        <polygon id="path74" points="162.310947 32.4746199 162.288623 32.4746199 162.288623 14.4413429 162.299785 14.4413429 162.299785 29.0946368 176.658252 14.4413429 179.980872 14.4413429"></polygon>
+                        <polygon id="path78" points="159.938997 12.0233868 159.938997 21.1056503 159.913737 0.346866554 162.292324 0.346866554 162.299961 12.0233868 162.2888 12.0233868"></polygon>
+                        <path d="M182.32668,34.8880236 L182.247961,34.8921622 C182.219764,34.8939358 182.191566,34.894527 182.163369,34.8957095 L182.163369,34.9010304 L182.040591,34.9010304 C182.039416,34.9010304 182.038242,34.9010304 182.036479,34.9010304 L162.288741,34.9010304 L159.964199,34.9010304 L159.938939,34.9010304 L159.938939,21.1055912 L159.938939,12.0233277 L162.288741,12.0233277 L162.299902,12.0233277 L162.299902,14.441402 L162.288741,14.441402 L162.288741,32.4746791 L162.311064,32.4746791 L182.163369,32.4746791 L182.163369,32.4758615 C182.19979,32.4734966 182.237387,32.4711318 182.275571,32.4699493 C187.086204,32.3416554 191.000387,28.3006926 191.000387,23.4621791 C191.000387,18.6230743 187.085617,14.5821115 182.273809,14.4538176 C182.232687,14.4532264 182.192154,14.4508615 182.117547,14.4461318 C182.090525,14.4437669 182.064089,14.441402 182.035892,14.441402 L179.980402,14.441402 L176.658369,14.441402 L179.027558,12.0233277 L182.036479,12.0233277 C182.107561,12.0233277 182.178055,12.0274662 182.245611,12.0321959 L182.323743,12.0369257 C182.327854,12.0369257 182.331967,12.0375169 182.336079,12.0375169 C188.439103,12.1995101 193.402473,17.3212162 193.402473,23.4621791 C193.402473,29.6072804 188.432053,34.7325338 182.32668,34.8880236" id="path82"></path>
+                        <path d="M206.060035,32.4181588 L218.993934,32.4181588 L218.993934,2.76748311 L206.060035,2.76748311 L206.060035,32.4181588 Z M203.676748,0.347043919 L221.377221,0.347043919 L221.377221,34.8397804 L203.676748,34.8397804 L203.676748,0.347043919 Z" id="path84"></path>
+                        <polygon id="path88" points="237.111027 0.346807432 203.676866 0.346807432 203.676866 11.3392905 206.060152 11.3392905 206.060152 2.76783784 234.773561 2.76310811 234.773561 11.3392905 237.111027 11.3392905"></polygon>
+                        <polygon id="path92" points="265.591982 0.4025 265.591982 34.7166892 263.208695 34.7166892 263.208695 2.80638514 248.769747 2.77032095 248.772097 0.4025"></polygon>
+                        <path d="M274.978032,33.7971115 L274.949834,34.8015878 L272.567722,34.7217736 L272.607669,33.6800507 C272.611194,33.5706757 272.614718,33.4607095 272.614718,33.3495608 C272.614718,33.2395946 272.611194,33.1302196 272.606494,32.9830068 L272.588283,32.4840203 C272.14887,24.7160304 265.847875,18.6306419 258.24509,18.6306419 C250.359154,18.6306419 243.943606,25.212652 243.943606,33.3034459 C243.943606,33.4713514 243.934794,33.648125 243.924808,33.8349493 C243.914821,34.0134966 243.902484,34.1944088 243.915409,34.4344426 L243.915409,34.9133277 L241.545045,34.9133277 L241.545045,34.5124831 C241.526247,34.225152 241.542108,33.9431419 241.557969,33.6534459 C241.564431,33.5346115 241.570306,33.4163682 241.570306,33.3034459 C241.570306,23.8924662 249.050313,16.235625 258.24509,16.235625 C266.944058,16.235625 274.276028,23.1735473 274.938085,32.0547973 L274.978032,32.9020101 C274.982731,33.0509966 274.987431,33.1993919 274.987431,33.3495608 C274.987431,33.5003209 274.982731,33.6493074 274.978032,33.7971115" id="path96"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/images/serviecs-background.svg b/src/images/services-background.svg
similarity index 100%
rename from src/images/serviecs-background.svg
rename to src/images/services-background.svg
diff --git a/src/pages/contact.js b/src/pages/contact.js
index d788ddd..b48886d 100644
--- a/src/pages/contact.js
+++ b/src/pages/contact.js
@@ -1,56 +1,82 @@
 import React from 'react'
 
 import PageIntro from '../components/PageIntro'
-import SectionIntro from '../components/SectionIntro'
 
 const ContactPage = () => (
   <div>
-  <PageIntro intro="Contact" headline="Let's connect" text="and build something awesome together" sectionClasses="mb-16 lg:mb-8" />
-
-  <section className="container mx-auto my-12 p-4">
-    <SectionIntro
-      headline="Use the form below or any of the alternatives to connect"
+    <PageIntro
+      intro="Contact"
+      headline="Let's connect"
+      text="and build something awesome together"
+      sectionClasses="mb-16 lg:mb-8"
     />
 
-    <p>Request a Proposal</p>
-    <p>Request a Video Call</p>
-    <p>Old-fashioned phone calls work as well: - +...</p>
-  </section>
+    <section className="container mx-auto my-12 p-4">
+      <form className="p-6 w-1/2">
+        <div className="flex flex-wrap -mx-3">
+          <div className="w-full md:w-1/2 p-3">
+            <label
+              className="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2"
+              for="grid-first-name"
+            >
+              Name
+            </label>
+            <input
+              className="appearance-none block w-full bg-grey-lightest text-grey-darker border rounded py-3 px-4"
+              id="grid-first-name"
+              type="text"
+              placeholder="Jane"
+              required
+            />
+          </div>
 
-  <form className="container mx-auto max-w-md p-6">
-    <div className="flex flex-wrap -mx-3">
+          <div className="w-full md:w-1/2 p-3">
+            <label
+              className="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2"
+              for="grid-first-name"
+            >
+              E-mail
+            </label>
+            <input
+              className="appearance-none block w-full bg-grey-lightest text-grey-darker border rounded py-3 px-4"
+              id="grid-last-name"
+              type="email"
+              placeholder="Doe"
+              required
+            />
+          </div>
 
-      <div className="w-full md:w-1/2 p-3">
-        <label className="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-first-name">
-          Name
-        </label>
-        <input className="appearance-none block w-full bg-grey-lightest text-grey-darker border rounded py-3 px-4" id="grid-first-name" type="text" placeholder="Jane" required />
+          <div className="w-full p-3">
+            <label
+              className="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2"
+              for="grid-first-name"
+            >
+              Message
+            </label>
+            <textarea
+              className="appearance-none block w-full bg-grey-lightest text-grey-darker border rounded py-3 px-4"
+              id="grid-last-name"
+              type="text"
+              placeholder="Doe"
+              required
+            />
+          </div>
+        </div>
+
+        <button
+          className="w-full shadow bg-green hover:bg-green-light text-white font-bold py-2 px-4 rounded"
+          type="submit"
+        >
+          Send Mail
+        </button>
+      </form>
+
+      <div className="w-1/2">
+        <p>Request a Proposal</p>
+        <p>Request a Video Call</p>
+        <p>Old-fashioned phone calls work as well: - +...</p>
       </div>
-
-      <div className="w-full md:w-1/2 p-3">
-        <label className="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-first-name">
-          E-mail
-        </label>
-        <input className="appearance-none block w-full bg-grey-lightest text-grey-darker border rounded py-3 px-4" id="grid-last-name" type="email" placeholder="Doe" required />
-      </div>
-
-      <div className="w-full p-3">
-        <label className="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-first-name">
-          Message
-        </label>
-        <textarea className="appearance-none block w-full bg-grey-lightest text-grey-darker border rounded py-3 px-4" id="grid-last-name" type="text" placeholder="Doe" required />
-      </div>
-
-    </div>
-
-    <div className="w-full">
-      <button className="w-full shadow bg-purple hover:bg-purple-light text-white font-bold py-2 px-4 rounded" type="submit">
-        Send Mail
-      </button>
-    </div>
-
-</form>
-
+    </section>
   </div>
 )
 
diff --git a/src/pages/index.js b/src/pages/index.js
index 53e19fb..d943a07 100644
--- a/src/pages/index.js
+++ b/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>
diff --git a/src/styles/general.css b/src/styles/general.css
index be8cd0f..d437f78 100644
--- a/src/styles/general.css
+++ b/src/styles/general.css
@@ -18,25 +18,47 @@ body {
 }
 
 .bg-saburly-light {
-  background: #faf9fc;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 1) 1%,
+    rgba(250, 249, 252, 1) 49%,
+    rgba(237, 233, 245, 1) 100%
+  );
+}
+
+.bg-saburly-fadeout {
+  background: rgb(255, 255, 255);
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 1) 0%,
+    rgba(237, 233, 245, 1) 100%
+  );
+}
+
+.bg-saburly svg {
+  -moz-transform: scaleX(-1);
+  -o-transform: scaleX(-1);
+  -webkit-transform: scaleX(-1);
+  transform: scaleX(-1);
+  filter: FlipH;
+  -ms-filter: 'FlipH';
 }
 
 .bg-saburly-dark {
   background-color: #210b44;
 }
 
+.bg-saburly svg,
 .bg-saburly-light svg,
 .bg-saburly-indigo svg {
   position: absolute;
   bottom: 0;
-  margin-bottom: -1px;
 }
 
 .bg-saburly-indigolight svg {
   position: absolute;
   top: 0;
   transform: rotate(180deg);
-  margin-top: -1px;
 }
 
 .bg-saburly-indigolight {