Add typewriter library, restructure and design

package.json

@@ -19,6 +19,7 @@
     "slideout": "^1.0.1",
     "tiny-slider": "^2.8.3",
     "tiny-slider-react": "0.3.4",
+    "typeface-lato": "^0.0.54",
     "typeface-maven-pro": "^0.0.54",
     "typeface-quicksand": "^0.0.54",
     "typeface-roboto": "^0.0.54",

src/components/Header.css

@@ -1,5 +1,5 @@
 .menu_icon [class*='menu_bar-'] {
-  background: #fff;
+  background: #393990;
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
   -webkit-transition: 0.2s ease all;

src/components/InfoBox.js

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

src/components/PageIntro.js

@@ -11,6 +11,7 @@ const PageIntro = ({ ...props }) => (
       } p-4`}
     >
       <div className="text-center lg:text-left">
+        {props.children}
         <SectionIntro
           intro={props.intro}
           classes={`lg:text-left lg:max-w-sm content-center ${

src/components/SectionIntro.js

@@ -27,7 +27,7 @@ const IntroDefault = ({ ...props }) => (
     {props.text && (
       <p
         className={`${props.light ? headlineDark : ''} 
-    font-light text-black-light leading-normal`}
+    font-light text-black-light text-lg leading-normal`}
       >
         {props.text}
       </p>

src/components/Service.js

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

src/components/WorkStyle.js

@@ -17,7 +17,7 @@ const WorkStyle = ({ ...props }) => (
         <div className="w-full md:w-1/2 p-8 md:border-r-2 border-grey-lighter">
           <img src={HQCode} alt="High Quality Code" />
           <h3 className="text-xl my-2">High Quality Code</h3>
-          <p className="leading-normal font-light">
+          <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
             and maintainable code. Clean, readable, robust code is something we
@@ -27,7 +27,7 @@ const WorkStyle = ({ ...props }) => (
         <div className="w-full md:w-1/2 p-8">
           <img src={ContDelivery} alt="High Quality Code" />
           <h3 className="text-xl my-2">Continuous delivery</h3>
-          <p className="leading-normal font-light">
+          <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
             cloud environments automatically. Deploying to production is as easy
@@ -39,7 +39,7 @@ const WorkStyle = ({ ...props }) => (
         <div className="w-full md:w-1/2 p-8 md:border-r-2 border-grey-lighter">
           <img src={ModernDevops} alt="High Quality Code" />
           <h3 className="text-xl my-2">Modern DevOps</h3>
-          <p className="leading-normal font-light">
+          <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
             about development and operations, it is also about quality.
@@ -50,7 +50,7 @@ const WorkStyle = ({ ...props }) => (
         <div className="w-full md:w-1/2 p-8">
           <img src={CodeReviews} alt="High Quality Code" />
           <h3 className="text-xl my-2">Code Reviews</h3>
-          <p className="leading-normal font-light">
+          <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
             merged into the code. We make sure each change is reviewed by
@@ -62,7 +62,7 @@ const WorkStyle = ({ ...props }) => (
         <div className="w-full md:w-1/2 p-8 md:border-r-2 border-grey-lighter">
           <img src={UXResearch} alt="High Quality Code" />
           <h3 className="text-xl my-2">UX testing/research</h3>
-          <p className="leading-normal font-light">
+          <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
             customers interact with your interface (websites, mobile devices,
@@ -73,7 +73,7 @@ const WorkStyle = ({ ...props }) => (
         <div className="w-full md:w-1/2 p-8">
           <img src={UnitIntegration} alt="High Quality Code" />
           <h3 className="text-xl my-2">Unit & Integration testing</h3>
-          <p className="leading-normal font-light">
+          <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
             for writing high-quality code at a fast pace.

src/layouts/index.js

@@ -6,6 +6,7 @@ import Header from '../components/Header'
 import Footer from '../components/Footer'
 import SideMenu from '../components/SideMenu'
 require('typeface-maven-pro')
+require('typeface-lato')
 import '../styles/index.css'
 import '../styles/general.css'
 

src/pages/about.js

@@ -3,7 +3,8 @@ import React, { Component } from 'react'
 import PageIntro from '../components/PageIntro'
 import SectionIntro from '../components/SectionIntro'
 
-import IntroImage from '../images/saburly-web-agency-group.jpg'
+import IntroImage from '../images/web-development-consultancy.jpg'
+import MeaningSaburly from '../images/coding-practice.svg'
 
 class AboutPage extends Component {
   componentDidMount() {
@@ -19,22 +20,29 @@ class AboutPage extends Component {
       <div>
         <PageIntro
           headline="Founded by developers"
-          text="Saburly was born in 2017 by experienced developers. We know the challenges and pitfalls when creating modern software. Focused on creating solutions that make valuable impact"
+          text="...We know the challenges and pitfalls when creating modern software. ...Focused on creating solutions that make valuable impact"
           image={IntroImage}
           imgClasses="border-white border-8 rounded postImgContainer -mb-12"
         />
 
         <section className="container mx-auto my-12 p-4">
+          <div className="md:flex justify-center items-center">
+            <img
+              src={MeaningSaburly}
+              className="hidden lg:block max-h-xs"
+              alt="User Experience Design Agency"
+            />
             <SectionIntro
               headline="Meaning of Saburly"
-            text="Patience = Our goal is long-term engagement."
+              text="...Patience. ...Our goal is long-term engagement."
             />
+          </div>
         </section>
 
         <section className="container mx-auto my-12 p-4">
           <SectionIntro
             headline="The Team"
-            text="We are a small company with a personal touch that knows our stuff. Our people have T-shaped profiles which means that they combine a deep specialism with a broad range of knowledge and skills."
+            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."
           />
         </section>
       </div>

src/pages/contact.js

@@ -21,7 +21,7 @@ const ContactPage = () => (
     <section className="container mx-auto my-12 p-4">
       <div className="md:flex">
         <div className="p-2 text-center">
-          <div className="rounded overflow-hidden shadow">
+          <div className="rounded overflow-hidden border-bottom-saburly">
             <img className="w-full" src={Stockholm} alt="Stockholm City" />
             <div className="px-6 py-4">
               <div className="uppercase font-medium text-xl mb-6">
@@ -62,7 +62,7 @@ const ContactPage = () => (
           </div>
         </div>
         <div className="p-2 text-center">
-          <div className="rounded overflow-hidden shadow">
+          <div className="rounded overflow-hidden border-bottom-saburly">
             <img className="w-full" src={Sarajevo} alt="Sarajevo City" />
             <div className="px-6 py-4">
               <div className="uppercase font-medium text-xl mb-6">

src/pages/index.js

@@ -23,16 +23,22 @@ import LogoCoor from '../images/logo-coor-color.svg'
 const IndexPage = ({ ...props }) => (
   <div>
     <PageIntro
-      button
+      text="We're a team of experienced, creative and passionate engineers and designers. Our mission is to make you stand out and gain competitive advantages with the help of modern technologies."
-      buttonText="Let's Connect"
-      url="/contact"
-      buttonClasses="text-white font-normal shadow hover:shadow-md rounded-full mt-4 font-light bg-teal hover:bg-teal-dark mb-20"
-      headline="We build great software"
-      text="We're a team of 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}
-      imgClasses="-mb-20 md:-mt-12"
+      imgClasses="-mb-20 lg:-mt-12"
+    >
+      <h2 className="text-black pt-1 pb-2">
+        We{' '}
+        <Typed
+          strings={['discover', 'code', 'design', 'maintain']}
+          typeSpeed={100}
+          backSpeed={50}
+          backDelay={3000}
+          loop
         />
-    <Typed strings={['Here you can find anything']} typeSpeed={40} />
+        great digital experiences
+      </h2>
+    </PageIntro>
 
     <main>
       <section className="container mx-auto max-w-lg text-center my-12 p-4">
@@ -53,7 +59,7 @@ const IndexPage = ({ ...props }) => (
           reversed
           img={ImgFullstack}
           title="Full-Stack Web Development"
-          text="At Saburly, 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."
+          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="-ml-12"
         />
 
@@ -76,7 +82,7 @@ const IndexPage = ({ ...props }) => (
 
       <section className="container mx-auto max-w-lg text-center p-4 my-12">
         <SectionIntro
-          headline="With ambitious projects comes great responsibility"
+          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"
         />
         <div className="p-4 md:flex items-center max-w-full justify-center">

src/pages/services.js

@@ -7,6 +7,7 @@ import WorkStyle from '../components/WorkStyle'
 import Technologies from '../components/Technologies'
 
 import FullstackDev from '../images/fullstack-web-development.svg'
+import IntroImage from '../images/saburly-web-agency-group.jpg'
 import WebdevServices from '../images/web-development-agency.svg'
 import UXdesign from '../images/ux-ui-design-services.svg'
 import HowWeWork from '../images/how-we-work.svg'
@@ -17,8 +18,8 @@ const ServicesPage = () => (
       buttonClasses="text-white font-normal shadow hover:shadow-md rounded-full mt-4 font-light bg-teal hover:bg-teal-dark mb-20"
       headline="Agile Practitioners"
       text="At Saburly we embrace Agile’s methodologies for every project and business environment, no matter the size, scale, or complexity. Our flexible processes ensure high productivity and we know how to balance between cost, time and quality."
-      image={WebdevServices}
+      image={IntroImage}
-      imgClasses="-mb-20 lg:-mt-12 md:p-10"
+      imgClasses="-mb-12 lg:-mt-8 border-white border-8 rounded"
     />
     <section className="px-4 py-16">
       <div className="container mx-auto">
@@ -44,10 +45,8 @@ const ServicesPage = () => (
             />
 
             <div className="my-4">
-              <h3 className="font-normal text-black">
+              <h3 className="text-black my-1">Conceptualization & Branding</h3>
-                Conceptualization & Branding
+              <p className="font-light leading-normal text-black-light text-lg">
-              </h3>
-              <p className="font-light leading-normal text-black-light">
                 Before our designers work on visual details, we start off by
                 creating a clear understanding of the problem that you're trying
                 to solve with the project. After collecting and analyzing data,
@@ -55,8 +54,8 @@ const ServicesPage = () => (
               </p>
             </div>
             <div className="my-4">
-              <h3 className="font-normal text-black">UX & UI Design</h3>
+              <h3 className="text-black my-1">UX & UI Design</h3>
-              <p className="font-light leading-normal text-black-light">
+              <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
                 Wireframes and Prototypes to polished slick end-products, we
@@ -74,50 +73,53 @@ const ServicesPage = () => (
     <section className="bg-saburly relative bg-saburly-lighter px-4 py-16">
       <div className="container mx-auto">
         <div className="lg:flex">
-          <img
-            src={FullstackDev}
-            className="w-full mx-auto text-center content-center align-center p-8"
-            alt="Fullstack Web Development Agency"
-          />
           <div>
             <SectionIntro
               headline="Full-stack software development"
               text="From infrastructure to AI, we develop data-driven Full-Stack applications for both custom software and third party solutions."
             />
+            <img
+              src={WebdevServices}
+              className="lg:hidden w-full mx-auto text-center content-center align-center p-8"
+              alt="Fullstack Web Development Agency"
+            />
             <div className="my-4">
-              <h3 className="font-normal text-black">Web development</h3>
+              <h3 className="my-1 text-black">Web development</h3>
-              <p className="font-light leading-normal text-black-light">
+              <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
                 are up to speed with cutting edge trends.
               </p>
             </div>
             <div className="my-4">
-              <h3 className="font-normal text-black">Mobile & desktop apps</h3>
+              <h3 className="my-1 text-black">Mobile & desktop apps</h3>
-              <p className="font-light leading-normal text-black-light">
+              <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
-                and hybrid solutions. Native mobile solutions for iOS are built
+                and hybrid solutions. We love using technologies like React
-                with Swift & Objective-C and Android solutions are built with
+                Native and Electron to build cross-platform apps.
-                Java & Kotlin. We love using technologies like React Native and
-                Electron to build cross-platform apps.
               </p>
             </div>
             <div className="my-4">
-              <h3 className="font-normal text-black">DevOps</h3>
+              <h3 className="my-1 text-black">DevOps</h3>
-              <p className="font-light leading-normal text-black-light">
+              <p className="font-light leading-normal text-black-light text-lg">
-                Our DevOps team has experience working with the world leading
+                Our DevOps experience comes from working with leading hosting
-                hosting providers such as AWS and Google Cloud Platform. We
+                providers such as AWS and Google Cloud Platform. We offer setups
-                offer setups and automation to support delivery across all our
+                and automation to support delivery across all our applications.
-                applications. We use the most up-to-date tools to enable stable
+                We use the most up-to-date tools to enable stable and
-                and predictable processes of continuous delivery.
+                predictable processes of continuous delivery.
               </p>
             </div>
           </div>
+          <img
+            src={WebdevServices}
+            className="hidden lg:block w-full mx-auto text-center content-center align-center p-8"
+            alt="Fullstack Web Development Agency"
+          />
         </div>
         <div className="p-8 my-4 bg-white border-bottom-saburly">
-          <h3 className="font-normal text-black">Emerging Technologies</h3>
+          <h3 className="my-1 text-black">Emerging Technologies</h3>
-          <p className="font-light text-black-light leading-normal">
+          <p className="font-light leading-normal text-black-light text-lg">
             We harness a wide array of emerging technologies, such as AR/VR, AI
             technologies, Machine Learning and Blockchain, pushing the
             boundaries of user experience across physical and digital. Keeping

src/styles/general.css

@@ -16,10 +16,7 @@
 }
 
 .bg-saburly-light-header {
-  background: #393990;
-  @media (min-width: 992px) {
   background: RGBA(248, 248, 248, 1);
-  }
 }
 
 .bg-saburly-fadeout {
@@ -94,15 +91,14 @@
 }
 
 .border-bottom-saburly {
-  border-bottom: 2px solid #e3e3e3;
+  box-shadow: 0 6px 14px 0 rgba(51, 6, 13, 0.04),
+    0 2px 3px 0 rgba(51, 6, 13, 0.12);
 }
 
 .border-contact {
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
 }
 
-.bg-saburly-light-header {
+.typed-cursor {
-  @media (max-width: 991px) {
+  color: #8e7cb7;
-    box-shadow: 0 4px 2px -2px #777777;
-  }
 }

src/styles/index.css

@@ -2741,7 +2741,7 @@ table {
 }
 
 .font-sans {
-  font-family: Maven Pro, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }
 
 .font-text {
@@ -2913,6 +2913,10 @@ table {
 }
 
 .leading-loose {
+  line-height: 1.75;
+}
+
+.leading-looser {
   line-height: 2;
 }
 
@@ -7875,7 +7879,7 @@ table {
   }
 
   .sm\:font-sans {
-    font-family: Maven Pro, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   }
 
   .sm\:font-text {
@@ -8047,6 +8051,10 @@ table {
   }
 
   .sm\:leading-loose {
+    line-height: 1.75;
+  }
+
+  .sm\:leading-looser {
     line-height: 2;
   }
 
@@ -12994,7 +13002,7 @@ table {
   }
 
   .md\:font-sans {
-    font-family: Maven Pro, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   }
 
   .md\:font-text {
@@ -13166,6 +13174,10 @@ table {
   }
 
   .md\:leading-loose {
+    line-height: 1.75;
+  }
+
+  .md\:leading-looser {
     line-height: 2;
   }
 
@@ -18113,7 +18125,7 @@ table {
   }
 
   .lg\:font-sans {
-    font-family: Maven Pro, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   }
 
   .lg\:font-text {
@@ -18285,6 +18297,10 @@ table {
   }
 
   .lg\:leading-loose {
+    line-height: 1.75;
+  }
+
+  .lg\:leading-looser {
     line-height: 2;
   }
 
@@ -23232,7 +23248,7 @@ table {
   }
 
   .xl\:font-sans {
-    font-family: Maven Pro, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   }
 
   .xl\:font-text {
@@ -23404,6 +23420,10 @@ table {
   }
 
   .xl\:leading-loose {
+    line-height: 1.75;
+  }
+
+  .xl\:leading-looser {
     line-height: 2;
   }
 

src/templates/blog.js

@@ -11,7 +11,7 @@ class Blog extends Component {
       <main>
         <PageIntro
           headline="We are busy coding"
-          text="but occasionally we find the time to have fun & publish stuff"
+          text="but occasionally we find the time to have fun & publish"
           sectionClasses="mb-16 lg:mb-4"
         />
         <div className="container mx-auto p-4 w-full md:flex md:flex-wrap items-stretch w-full">

tailwind.config.js

@@ -191,7 +191,6 @@ module.exports = {
 
   fonts: {
     sans: [
-      'Maven Pro',
       'system-ui',
       'BlinkMacSystemFont',
       '-apple-system',
@@ -316,7 +315,8 @@ module.exports = {
     none: 1,
     tight: 1.25,
     normal: 1.5,
-    loose: 2,
+    loose: 1.75,
+    looser: 2,
   },
 
   /*

yarn.lock

@@ -9375,6 +9375,10 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
+typeface-lato@^0.0.54:
+  version "0.0.54"
+  resolved "https://registry.yarnpkg.com/typeface-lato/-/typeface-lato-0.0.54.tgz#6ea56309a8b0cfdb7e8246e05de4b58b8272b47c"
+
 typeface-maven-pro@^0.0.54:
   version "0.0.54"
   resolved "https://registry.yarnpkg.com/typeface-maven-pro/-/typeface-maven-pro-0.0.54.tgz#7ef991257cf53c0fa75142d2aefcddcbd867ff7c"