Changes in font, illustrations and various design tweaks

src/components/Card.js

@@ -15,7 +15,7 @@ const Card = ({ ...props }) => (
         <img className="w-full" src={ImgSprint} alt="Sprint Work" />
       )}
       <div className="px-6 py-4">
-        <h3 className="text-black font-bold text-xl mb-2">{props.title}</h3>
+        <h3 className="text-black font-bold text-3xl mb-2">{props.title}</h3>
         <p
           className="text-black-light text-base"
           dangerouslySetInnerHTML={{ __html: props.excerpt }}

src/components/InfoBox.js

@@ -3,7 +3,7 @@ import Link from 'gatsby-link'
 
 const InfoBox = ({ ...props }) => (
   <div className={`${props.classes}`}>
-    <h2 className="text-black my-2">{props.headline}</h2>
+    <h2 className={`${props.h2Classes} text-black my-2`}>{props.headline}</h2>
     <p className="text-black-light leading-normal text-lg font-light">
       {props.text}
     </p>

src/components/PageIntro.js

@@ -37,6 +37,7 @@ class PageIntro extends Component {
             {this.props.children}
             <SectionIntro
               header
+              h2Classes="text-4xl md:text-5xl"
               intro={this.props.intro}
               classes={`lg:text-left lg:max-w-sm content-center ${
                 this.props.sectionClasses

src/components/SectionIntro.js

@@ -18,7 +18,7 @@ const IntroDefault = ({ ...props }) => (
     )}
     {props.headline && (
       <h2
-        className={`${props.light ? headlineDark : ''}
+        className={`${props.light ? headlineDark : ''} ${props.h2Classes}
     text-black pt-1 pb-2`}
       >
         {props.headline}

src/components/Service.js

@@ -13,6 +13,7 @@ const Service = ({ ...props }) => (
       alt={`${props.title} agency`}
     />
     <InfoBox
+      h2Classes={props.h2Classes}
       classes="p-4 md:max-w-sm"
       headline={props.title}
       text={props.text}

src/components/WorkStyle.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 import SectionIntro from './SectionIntro'
 
-import HQCode from '../images/high-quality-code.svg'
+import HQCode from '../images/coder-awards.svg'
 import ContDelivery from '../images/continuous-delivery.svg'
 import ModernDevops from '../images/modern-devops.svg'
 import CodeReviews from '../images/code-reviews.svg'
@@ -16,7 +16,7 @@ const WorkStyle = ({ ...props }) => (
       <div className="flex flex-wrap text-black">
         <div className="w-full md:w-1/2 p-8 md:border-r-2 border-grey-lighter">
           <img src={HQCode} className="max-w-10" alt="High Quality Code" />
-          <h3 className="text-xl my-2">High Quality Code</h3>
+          <h3 className="text-2xl saburly-color my-2">High Quality Code</h3>
           <p className="leading-normal font-light text-lg">
             We have deep understanding of software engineering & computer
             science and we know what it takes to write high-quality, performant
@@ -30,7 +30,7 @@ const WorkStyle = ({ ...props }) => (
             className="max-w-10"
             alt="High Quality Code"
           />
-          <h3 className="text-xl my-2">Continuous delivery</h3>
+          <h3 className="text-2xl saburly-color my-2">Continuous delivery</h3>
           <p className="leading-normal font-light text-lg">
             Deploying new code to production should not take weeks. We know how
             to build pipelines that allow code changes to be pushed to different
@@ -46,7 +46,7 @@ const WorkStyle = ({ ...props }) => (
             className="max-w-10"
             alt="High Quality Code"
           />
-          <h3 className="text-xl my-2">Modern DevOps</h3>
+          <h3 className="text-2xl saburly-color my-2">Modern DevOps</h3>
           <p className="leading-normal font-light text-lg">
             We like a "release early, release often" philosophy and to achieve
             this we use modern DevOps tools like Docker. But DevOps is not only
@@ -57,7 +57,7 @@ const WorkStyle = ({ ...props }) => (
         </div>
         <div className="w-full md:w-1/2 p-8">
           <img src={CodeReviews} className="max-w-10" alt="High Quality Code" />
-          <h3 className="text-xl my-2">Code Reviews</h3>
+          <h3 className="text-2xl saburly-color my-2">Code Reviews</h3>
           <p className="leading-normal font-light text-lg">
             “Two Heads are Better Than One”. Code reviews are integrated part of
             our process which makes catching bugs early before they event get
@@ -69,7 +69,7 @@ const WorkStyle = ({ ...props }) => (
       <div className="flex flex-wrap md:border-t-2 border-grey-lighter text-black">
         <div className="w-full md:w-1/2 p-8 md:border-r-2 border-grey-lighter">
           <img src={UXResearch} className="max-w-10" alt="High Quality Code" />
-          <h3 className="text-xl my-2">UX testing/research</h3>
+          <h3 className="text-2xl saburly-color my-2">UX testing/research</h3>
           <p className="leading-normal font-light text-lg">
             We know it takes more than just an user video or a survey to
             understand your user experience. We improve UX by watching how real
@@ -84,7 +84,9 @@ const WorkStyle = ({ ...props }) => (
             className="max-w-10"
             alt="High Quality Code"
           />
-          <h3 className="text-xl my-2">Unit & Integration testing</h3>
+          <h3 className="text-2xl saburly-color my-2">
+            Unit & Integration testing
+          </h3>
           <p className="leading-normal font-light text-lg">
             Unit and integration testing are vital parts of the testing process.
             Having automated unit & integration tests is the key prerequisite

src/images/coder-awards.svg

@@ -5,9 +5,8 @@
 <style type="text/css">
 	.st0{fill:#FFFFFF;}
 	.st1{fill:#92DEE2;}
-	.st2{fill:#646EF2;}
+	.st2{fill:#5763AB;}
-	.st3{fill:#5763AB;}
+	.st3{fill:none;}
-	.st4{fill:none;}
 </style>
 <title>High_quality_code</title>
 <desc>Created with Sketch.</desc>
@@ -59,9 +58,9 @@
 							S86.2,92.1,80.4,92z"/>
 					</g>
 				</g>
-				<circle id="Oval-3" class="st3" cx="47" cy="29" r="28"/>
+				<circle id="Oval-3" class="st2" cx="47" cy="29" r="28"/>
 				<g id="ic_code" transform="translate(17.000000, 0.000000)">
-					<polygon id="Bounds" class="st4" points="0,0 58,0 58,58 0,58 					"/>
+					<polygon id="Bounds" class="st3" points="0,0 58,0 58,58 0,58 					"/>
 					<path id="Icon" class="st0" d="M24,38.2L14.7,29l9.3-9.2L21.2,17L9,29l12.2,12L24,38.2L24,38.2z M34,38.2l9.3-9.2L34,19.8
 						l2.8-2.8L49,29L36.8,41L34,38.2L34,38.2z"/>
 				</g>

src/pages/about.js

@@ -13,7 +13,7 @@ const AboutPage = () => (
     <PageIntro
       tiltImage
       headline="Founded by developers"
-      text="Saburly was founded in 2017 by experienced software developers that understand what it takes to create modern digital solutions. Our focus is on gathering and guiding the best talents in the industry in order to create digital experiences that make valuable impact."
+      text="Saburly was founded in 2017 by experienced software developers that understand what it takes to create modern digital solutions. Our focus is on gathering and mentoring the best talents in the industry in order to create digital experiences that make valuable impact."
       image={IntroImage}
       imgClasses="border-white border-8 rounded -mb-12"
     />
@@ -26,7 +26,8 @@ const AboutPage = () => (
           alt="User Experience Design Agency"
         />
         <SectionIntro
-          headline="Meaning of Saburly"
+          h2Classes="text-4xl"
+          headline="Meaning"
           text="...Patience. ...Our goal is long-term engagement."
         />
       </div>
@@ -34,6 +35,7 @@ const AboutPage = () => (
 
     <section className="container mx-auto my-12 p-4">
       <SectionIntro
+        h2Classes="text-5xl"
         headline="The Team"
         text="We are a small company with a personal touch that knows our stuff. Our team consists of handpicked expert software developers, designers and system architects - all highly motivated to help you succeed."
       />

src/pages/contact.js

@@ -14,7 +14,7 @@ const ContactPage = () => (
   <PageTransition>
     <PageIntro
       tiltImage
-      headline="Let's make things happen"
+      headline="Let's start something great"
       text="We are always on a lookout for exciting challenges. Feel free to contact us if you want to start something great or just find out more about what we do."
       sectionClasses="lg:mb-8"
       image={ContactImage}

src/pages/index.js

@@ -31,7 +31,7 @@ const IndexPage = ({ ...props }) => (
       image={ImgIntro}
       imgClasses="-mb-20 p-2 md:p-8"
     >
-      <h2 className="text-black pt-1 pb-2">
+      <h2 className="text-black text-4xl xl:text-5xl pt-1 pb-2">
         We{' '}
         <Typed
           strings={['imagine', 'design', 'develop', 'maintain']}
@@ -40,13 +40,14 @@ const IndexPage = ({ ...props }) => (
           backDelay={3000}
           loop
         />
-        great experiences
+        great<br />digital experiences
       </h2>
     </PageIntro>
 
     <main>
       <section className="container mx-auto max-w-lg text-center mt-16 p-4">
         <SectionIntro
+          h2Classes="text-3xl"
           headline="Because beautiful code makes our heart pound"
           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."
         />
@@ -54,6 +55,7 @@ const IndexPage = ({ ...props }) => (
 
       <section className="bg-saburly relative">
         <Service
+          h2Classes="text-4xl font-light saburly-color"
           img={ImgDesign}
           title="User Experience Design"
           text="Our approach is simple: focus on how users might use the product in the best way possible. We offer UX and interface design for all screens and devices. The solutions are usually shaped through iterative processes of research, prototyping and testing."
@@ -61,16 +63,18 @@ const IndexPage = ({ ...props }) => (
 
         <Service
           reversed
+          h2Classes="text-4xl font-light saburly-color"
           img={ImgFullstack}
-          title="Full-Stack Web Development"
+          title="Full-Stack Development"
           text="We are experts in modern web development using both client-side and server-side technologies. Our talented developers work with popular languages and are always up to speed on the cutting edge trends in web application development. We deliver high-quality, maintainable code on time and know how to balance between cost, time and quality."
           imgClasses=""
         />
 
         <Service
           img={ImgMobile}
+          h2Classes="text-4xl font-light saburly-color"
           imgClasses="max-h-sm"
-          title="Mobile App Development"
+          title="Mobile Apps"
           text="We have what it takes to develop competitive iOS and Android applications using both native languages and hybrid solutions. Solutions for iOS are built with Swift & Objective-C and Android solutions are built with Java & Kotlin. We love using technologies like React Native to build cross-platform native apps."
         />
 
@@ -87,6 +91,7 @@ const IndexPage = ({ ...props }) => (
       <section className="bg-saburly-lighter text-center p-4 my-12">
         <div className="my-8 container mx-auto max-w-lg">
           <SectionIntro
+            h2Classes="text-4xl"
             headline="Ambitious projects bring great responsibility"
             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"
           />
@@ -138,7 +143,10 @@ const IndexPage = ({ ...props }) => (
       </section>
 
       <section className="text-center p-8 relative">
-        <SectionIntro headline="Occasionally we have fun & publish" />
+        <SectionIntro
+          h2Classes="font-light text-4xl"
+          headline="But occasionally we have fun & publish"
+        />
         <div className="container mx-auto w-full md:flex md:flex-wrap items-stretch w-full">
           {props.data.allWordpressPost.edges.map(({ node }) => (
             <div key={node.id} className="md:w-1/2 p-2">

src/pages/services.js

@@ -32,6 +32,7 @@ const ServicesPage = () => (
             alt="User Experience Design Agency"
           />
           <SectionIntro
+            h2Classes="text-4xl md:text-5xl saburly-color font-medium"
             classes="max-w-lg"
             headline="Design services"
             text="We offer consistent quality that extends to every section of the application development. Our approach is simple: focus on how users might use the product
@@ -47,7 +48,9 @@ const ServicesPage = () => (
             />
 
             <div className="my-4">
-              <h3 className="text-black my-1">Conceptualization & Branding</h3>
+              <h3 className="font-light my-1 text-3xl font-light">
+                Conceptualization & Branding
+              </h3>
               <p className="font-light leading-normal text-black-light text-lg">
                 Before our designers work on visual details, we start off by
                 creating a clear understanding of the problem that you're trying
@@ -56,7 +59,9 @@ const ServicesPage = () => (
               </p>
             </div>
             <div className="my-4">
-              <h3 className="text-black my-1">UX & UI Design</h3>
+              <h3 className="text-black font-light my-1 text-3xl font-light">
+                UX & UI Design
+              </h3>
               <p className="font-light leading-normal text-black-light text-lg">
                 We love to design pixel-perfect products that are easy to use
                 and delightful to interact with. From User-Flows, Lo-Fi & Hi-Fi
@@ -77,7 +82,8 @@ const ServicesPage = () => (
         <div className="lg:flex">
           <div>
             <SectionIntro
-              headline="Full-stack software development"
+              h2Classes="font-medium saburly-color text-4xl md:text-5xl"
+              headline="Software development"
               text="From infrastructure to AI, we develop data-driven Full-Stack applications for both custom software and third party solutions."
             />
             <img
@@ -86,7 +92,9 @@ const ServicesPage = () => (
               alt="Fullstack Web Development Agency"
             />
             <div className="my-4">
-              <h3 className="my-1 text-black">Web development</h3>
+              <h3 className="my-1 text-black font-light text-3xl">
+                Web development
+              </h3>
               <p className="font-light leading-normal text-lg text-black-light">
                 We offer full-cycle web development services for the connected
                 world. Our talented developers work with popular languages and
@@ -94,7 +102,9 @@ const ServicesPage = () => (
               </p>
             </div>
             <div className="my-4">
-              <h3 className="my-1 text-black">Mobile & desktop apps</h3>
+              <h3 className="my-1 text-black font-light text-3xl">
+                Mobile & desktop apps
+              </h3>
               <p className="font-light leading-normal text-lg text-black-light">
                 Building competitive applications these days is challenging, but
                 we believe that we have what it takes for both native languages
@@ -103,7 +113,7 @@ const ServicesPage = () => (
               </p>
             </div>
             <div className="my-4">
-              <h3 className="my-1 text-black">DevOps</h3>
+              <h3 className="my-1 text-black text-3xl font-light">DevOps</h3>
               <p className="font-light leading-normal text-black-light text-lg">
                 Our DevOps experience comes from working with leading hosting
                 providers such as AWS and Google Cloud Platform. We offer setups
@@ -120,7 +130,7 @@ const ServicesPage = () => (
           />
         </div>
         <div className="p-8 my-4 bg-white border-bottom-saburly">
-          <h3 className="my-1 text-black">Emerging Technologies</h3>
+          <h3 className="my-1 text-black text-3xl">Emerging Technologies</h3>
           <p className="font-light leading-normal text-black-light text-lg">
             We harness a wide array of emerging technologies, such as{' '}
             <strong>AR/VR</strong>, <strong>AI technologies</strong>,{' '}
@@ -141,6 +151,7 @@ const ServicesPage = () => (
     <div className="px-4 py-16 bg-saburly-fadeout">
       <div className="container mx-auto xl:flex justify-center items-center">
         <SectionIntro
+          h2Classes="text-5xl saburly-color font-light"
           headline="Flexible Workflow"
           text="We are helping everything from Fortune 500 companies to startups
           and tailor our processes based on your scale and needs. We

src/styles/general.css

@@ -149,6 +149,7 @@ body {
   color: #1f2443;
 }
 
+.saburly-color,
 h2 span {
   color: #5763ab;
 }