Changed illustrations and styling

src/components/PageIntro.js

@@ -26,7 +26,7 @@ const PageIntro = ({ ...props }) => (
       {props.image && (
         <img
           src={props.image}
-          className={`${props.imgClasses} md:max-w-md z-10`}
+          className={`${props.imgClasses} md:max-w-md p-8 z-10`}
           alt="Software Development Agency"
         />
       )}

src/pages/index.js

@@ -8,7 +8,7 @@ import PageIntro from '../components/PageIntro'
 import InfoBox from '../components/InfoBox'
 import Technologies from '../components/Technologies'
 
-import ImgIntro from '../images/web-development-company.svg'
+import ImgIntro from '../images/web-development-agency.svg'
 import ImgDesign from '../images/ux-ui-design-company.svg'
 import ImgFullstack from '../images/fullstack-web-development-company.svg'
 import ImgMobile from '../images/mobile-development-company.svg'

src/pages/services.js

@@ -7,7 +7,7 @@ import WorkStyle from '../components/WorkStyle'
 import Technologies from '../components/Technologies'
 
 import FullstackDev from '../images/fullstack-web-development.svg'
-import WebdevServices from '../images/web-development-services-company.svg'
+import WebdevServices from '../images/web-development-services.svg'
 import UXdesign from '../images/ux-ui-design-services.svg'
 import HowWeWork from '../images/how-we-work.svg'
 
@@ -25,9 +25,14 @@ const ServicesPage = () => (
       image={WebdevServices}
       imgClasses="-mb-16 md:-mt-6"
     />
-    <section className="py-16">
+    <section className="px-4 py-16">
       <div className="container mx-auto">
         <div className="lg:flex">
+          <img
+            src={UXdesign}
+            className="-mt-12"
+            alt="User Experience Design Agency"
+          />
           <SectionIntro
             classes="max-w-lg"
             headline="Design services"
@@ -61,16 +66,11 @@ const ServicesPage = () => (
               </p>
             </div>
           </SectionIntro>
-          <img
-            src={UXdesign}
-            className="-mt-12"
-            alt="User Experience Design Agency"
-          />
         </div>
       </div>
     </section>
 
-    <section className="relative bg-saburly-lighter py-16">
+    <section className="bg-saburly relative bg-saburly-lighter px-4 py-16">
       <div className="container mx-auto">
         <div className="lg:flex">
           <img
@@ -132,7 +132,7 @@ const ServicesPage = () => (
       </div>
     </section>
 
-    <div className="py-16 bg-saburly-fadeout">
+    <div className="px-4 py-16 bg-saburly-fadeout">
       <div className="container mx-auto lg:flex">
         <SectionIntro
           headline="Flexible Workflow"