From 3a4cb6382d394db93505743e26e463600e58e663 Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Mon, 6 Aug 2018 00:12:09 +0200
Subject: [PATCH] Stylistic and text changes

---
 src/components/Card.js   |  4 ++--
 src/components/Footer.js | 24 +++++++++++++++++++++++-
 src/pages/index.js       |  8 ++++----
 src/pages/services.js    | 25 +------------------------
 src/styles/general.css   | 14 ++++++++++++++
 5 files changed, 44 insertions(+), 31 deletions(-)

diff --git a/src/components/Card.js b/src/components/Card.js
index 2ad2c93..767aca0 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -5,14 +5,14 @@ import ImgSprint from '../images/wow-we-did-design-sprint-remotely.png'
 
 const Card = ({ ...props }) => (
   <article className="h-full w-full rounded overflow-hidden shadow-md hover:shadow-lg">
-  <Link to={props.url}>
+    <Link to={props.url}>
       {props.image ? (
         <img className="w-full" src={props.image.src} />
       ) : (
         <img className="w-full" src={ImgSprint} alt="Sprint Work" />
       )}
     </Link>
-    <div className="px-6 py-4">
+    <div className="px-6 py-4 bg-white">
       <Link className="no-underline" to={props.url}>
         <h3 className="text-black font-bold text-xl mb-2">{props.title}</h3>
       </Link>
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 2a69ef4..92192f1 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -14,7 +14,29 @@ let menuClasses =
 
 const Footer = () => (
   <footer className="bg-saburly-dark">
-    <div className="container mx-auto py-10 lg:flex">
+    <div className="text-center py-4 lg:px-4">
+      <Link className="no-underline text-white" to="/contact">
+        <div
+          className="p-2 items-center text-indigo-lightest leading-none lg:rounded-full flex lg:inline-flex"
+          role="alert"
+        >
+          <span className="flex rounded-full bg-indigo uppercase px-2 py-1 text-xs font-bold mr-3">
+            Let's Connect
+          </span>
+          <span className="font-semibold mr-2 text-left flex-auto">
+            Tell us about your project and get a free proposal
+          </span>
+          <svg
+            className="fill-current opacity-75 h-4 w-4"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+          >
+            <path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" />
+          </svg>
+        </div>
+      </Link>
+    </div>
+    <div className="container mx-auto lg:flex">
       <div className="lg:w-1/4 p-4">
         <img
           src={LogoSaburly}
diff --git a/src/pages/index.js b/src/pages/index.js
index 891ca7c..194fdda 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -28,7 +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 clear: to make you stand out and gain competitive advantages with the help of modern technologies."
+      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."
       image={ImgIntro}
     />
 
@@ -37,7 +37,7 @@ const IndexPage = ({ ...props }) => (
         <SectionIntro
           intro="What We Offer"
           headline="Because great code makes our heart pound"
-          text="We have a deep passion for cutting edge technologies and incredible user experiences. We create custom end-to-end solutions that will make you stand out. Our experienced tech leads can even help you with initial analysis, architecture design, testing and deployments"
+          text="We have a deep passion for cutting edge technologies and incredible user experiences. Our experienced engineers deliver custom end-to-end software solutions daily and can even help you with initial analysis, architecture design, testing and deployments."
         />
       </section>
 
@@ -85,7 +85,7 @@ const IndexPage = ({ ...props }) => (
         <SectionIntro
           intro="Clients"
           headline="With ambitious projects comes great responsibility"
-          text="We think big, design smart and develop fast. We have helped organizations of various sizes bring life to ideas and existing products. We're now really interested in hearing how we can help you"
+          text="By thinking big, designing smart and developing fast, we have helped organizations of various sizes bring life to ideas and existing products. We're now eager to hear what challenges you have for us"
         />
         <div className="p-4 md:flex items-center max-w-full justify-center">
           <img
@@ -113,7 +113,7 @@ const IndexPage = ({ ...props }) => (
         />
       </section>
 
-      <section className="container mx-auto text-center p-4">
+      <section className="text-center p-8 relative bg-saburly-fadeout-up">
         <SectionIntro
           intro="Blog & Social Media"
           headline="Occasionally we find the time to have fun and publish"
diff --git a/src/pages/services.js b/src/pages/services.js
index 171aa6b..932c420 100644
--- a/src/pages/services.js
+++ b/src/pages/services.js
@@ -68,34 +68,11 @@ const ServicesPage = () => (
       <section className="container mx-auto mt-8 max-w-lg text-center">
         <SectionIntro
           headline="How We Work"
-          text="We are serving everything from Fortune 500 companies to startups and tailor our processes based on your scale and needs. We collaborate closely with our clients at each step of the development process and make sure that the solutions delivery great value and meet your specific business requirements"
+          text="We are helping everything from Fortune 500 companies to startups and tailor our processes based on your scale and needs. We collaborate closely with our clients at each step of the development process and make sure that the solutions deliver great value and meets your specific business requirements"
         />
       </section>
       <WorkStyle />
     </div>
-
-    <div className="bg-saburly-dark text-center py-4 lg:px-4">
-      <Link className="no-underline text-white" to="/contact">
-        <div
-          className="p-2 bg-saburly-dark items-center text-indigo-lightest leading-none lg:rounded-full flex lg:inline-flex"
-          role="alert"
-        >
-          <span className="flex rounded-full bg-indigo uppercase px-2 py-1 text-xs font-bold mr-3">
-            Let's Connect
-          </span>
-          <span className="font-semibold mr-2 text-left flex-auto">
-            Tell us about your project and get a free proposal
-          </span>
-          <svg
-            className="fill-current opacity-75 h-4 w-4"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-          >
-            <path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" />
-          </svg>
-        </div>
-      </Link>
-    </div>
   </div>
 )
 
diff --git a/src/styles/general.css b/src/styles/general.css
index 7c76647..05d3c97 100644
--- a/src/styles/general.css
+++ b/src/styles/general.css
@@ -35,6 +35,20 @@ body {
   );
 }
 
+.bg-saburly-fadeout-up {
+  background: rgb(255, 255, 255);
+  background: linear-gradient(
+    180deg,
+    rgba(237, 233, 245, 0.5) 0%,
+    rgba(255, 255, 255, 1) 100%
+  );
+}
+
+.bg-saburly-fadeout-up svg {
+  position: absolute;
+  top: 0;
+}
+
 .bg-saburly svg {
   -moz-transform: scaleX(-1);
   -o-transform: scaleX(-1);