Add typewriter library, restructure and design

2018-08-24 00:08:54 +02:00
parent 2ba9fe23fd
commit bd3d3724da
19 changed files with 482 additions and 78 deletions
--- a/package.json
+++ b/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",
--- a/src/components/Header.css
+++ b/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;
--- a/src/components/InfoBox.js
+++ b/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>
-    <p className="text-black-light leading-normal font-light">{props.text}</p>
+    <h2 className="text-black text-3xl my-2">{props.headline}</h2>
+    <p className="text-black-light leading-normal text-lg font-light">
+      {props.text}
+    </p>
  </div>
 )

--- a/src/components/PageIntro.js
+++ b/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 ${
--- a/src/components/SectionIntro.js
+++ b/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>
--- a/src/components/Service.js
+++ b/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}
    />
--- a/src/components/WorkStyle.js
+++ b/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.
--- a/src/images/coding-practice.svg
+++ b/src/images/coding-practice.svg
--- a/src/images/web-development-consultancy.jpg
+++ b/src/images/web-development-consultancy.jpg
--- a/src/layouts/index.js
+++ b/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'

--- a/src/pages/about.js
+++ b/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">
-          <SectionIntro
-            headline="Meaning of Saburly"
-            text="Patience = Our goal is long-term engagement."
-          />
+          <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."
+            />
+          </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>
--- a/src/pages/contact.js
+++ b/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">
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -23,16 +23,22 @@ import LogoCoor from '../images/logo-coor-color.svg'
 const IndexPage = ({ ...props }) => (
  <div>
    <PageIntro
-      button
-      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."
+      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."
      image={ImgIntro}
-      imgClasses="-mb-20 md:-mt-12"
-    />
-    <Typed strings={['Here you can find anything']} typeSpeed={40} />
+      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
+        />
+        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">
--- a/src/pages/services.js
+++ b/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}
-      imgClasses="-mb-20 lg:-mt-12 md:p-10"
+      image={IntroImage}
+      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">
-                Conceptualization & Branding
-              </h3>
-              <p className="font-light leading-normal text-black-light">
+              <h3 className="text-black my-1">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
                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>
-              <p className="font-light leading-normal text-black-light">
+              <h3 className="text-black my-1">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
                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>
-              <p className="font-light leading-normal text-black-light">
+              <h3 className="my-1 text-black">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
                are up to speed with cutting edge trends.
              </p>
            </div>
            <div className="my-4">
-              <h3 className="font-normal text-black">Mobile & desktop apps</h3>
-              <p className="font-light leading-normal text-black-light">
+              <h3 className="my-1 text-black">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
-                and hybrid solutions. Native mobile solutions for iOS are built
-                with Swift & Objective-C and Android solutions are built with
-                Java & Kotlin. We love using technologies like React Native and
-                Electron to build cross-platform apps.
+                and hybrid solutions. 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>
-              <p className="font-light leading-normal text-black-light">
-                Our DevOps team has experience working with the world leading
-                hosting providers such as AWS and Google Cloud Platform. We
-                offer setups and automation to support delivery across all our
-                applications. We use the most up-to-date tools to enable stable
-                and predictable processes of continuous delivery.
+              <h3 className="my-1 text-black">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
+                and automation to support delivery across all our applications.
+                We use the most up-to-date tools to enable stable and
+                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>
-          <p className="font-light text-black-light leading-normal">
+          <h3 className="my-1 text-black">Emerging Technologies</h3>
+          <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
--- a/src/styles/general.css
+++ b/src/styles/general.css
@@ -16,10 +16,7 @@
 }

 .bg-saburly-light-header {
-  background: #393990;
-  @media (min-width: 992px) {
-    background: RGBA(248, 248, 248, 1);
-  }
+  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 {
-  @media (max-width: 991px) {
-    box-shadow: 0 4px 2px -2px #777777;
-  }
+.typed-cursor {
+  color: #8e7cb7;
 }
--- a/src/styles/index.css
+++ b/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;
  }

--- a/src/templates/blog.js
+++ b/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">
--- a/tailwind.config.js
+++ b/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,
  },

  /*
--- a/yarn.lock
+++ b/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"