diff --git a/package.json b/package.json index 6fa17e4..70bba4d 100644 --- 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", diff --git a/src/components/Header.css b/src/components/Header.css index 387b623..3206fc6 100644 --- 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; diff --git a/src/components/InfoBox.js b/src/components/InfoBox.js index 3b78707..778e4cc 100644 --- a/src/components/InfoBox.js +++ b/src/components/InfoBox.js @@ -3,8 +3,10 @@ import Link from 'gatsby-link' const InfoBox = ({ ...props }) => (
-

{props.headline}

-

{props.text}

+

{props.headline}

+

+ {props.text} +

) diff --git a/src/components/PageIntro.js b/src/components/PageIntro.js index a084bab..cd23523 100644 --- a/src/components/PageIntro.js +++ b/src/components/PageIntro.js @@ -11,6 +11,7 @@ const PageIntro = ({ ...props }) => ( } p-4`} >
+ {props.children} ( {props.text && (

{props.text}

diff --git a/src/components/Service.js b/src/components/Service.js index 5ffeda1..28f7f19 100644 --- a/src/components/Service.js +++ b/src/components/Service.js @@ -13,7 +13,7 @@ const Service = ({ ...props }) => ( alt={`${props.title} agency`} /> diff --git a/src/components/WorkStyle.js b/src/components/WorkStyle.js index 39425d6..6e978f1 100644 --- a/src/components/WorkStyle.js +++ b/src/components/WorkStyle.js @@ -17,7 +17,7 @@ const WorkStyle = ({ ...props }) => (
High Quality Code

High Quality Code

-

+

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 }) => (

High Quality Code

Continuous delivery

-

+

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 }) => (

High Quality Code

Modern DevOps

-

+

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 }) => (

High Quality Code

Code Reviews

-

+

“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 }) => (

High Quality Code

UX testing/research

-

+

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 }) => (

High Quality Code

Unit & Integration testing

-

+

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. diff --git a/src/images/coding-practice.svg b/src/images/coding-practice.svg new file mode 100644 index 0000000..e605c0e --- /dev/null +++ b/src/images/coding-practice.svg @@ -0,0 +1,363 @@ + + + + Group 10 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/images/web-development-consultancy.jpg b/src/images/web-development-consultancy.jpg new file mode 100644 index 0000000..74696bd Binary files /dev/null and b/src/images/web-development-consultancy.jpg differ diff --git a/src/layouts/index.js b/src/layouts/index.js index 70f3c0e..a496596 100644 --- 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' diff --git a/src/pages/about.js b/src/pages/about.js index 31502dc..a7a2873 100644 --- 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 {

- +
+ User Experience Design Agency + +
diff --git a/src/pages/contact.js b/src/pages/contact.js index 217017c..fc012c6 100644 --- a/src/pages/contact.js +++ b/src/pages/contact.js @@ -21,7 +21,7 @@ const ContactPage = () => (
-
+
Stockholm City
@@ -62,7 +62,7 @@ const ContactPage = () => (
-
+
Sarajevo City
diff --git a/src/pages/index.js b/src/pages/index.js index 3461f12..fbfc100 100644 --- 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 }) => (
- + imgClasses="-mb-20 lg:-mt-12" + > +

+ We{' '} + + great digital experiences +

+
@@ -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 }) => (
diff --git a/src/pages/services.js b/src/pages/services.js index 682fe5e..3e73a9a 100644 --- 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" />
@@ -44,10 +45,8 @@ const ServicesPage = () => ( />
-

- Conceptualization & Branding -

-

+

Conceptualization & Branding

+

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 = () => (

-

UX & UI Design

-

+

UX & UI Design

+

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 = () => (

- Fullstack Web Development Agency
+ Fullstack Web Development Agency
-

Web development

-

+

Web development

+

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.

-

Mobile & desktop apps

-

+

Mobile & desktop apps

+

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.

-

DevOps

-

- 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. +

DevOps

+

+ 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.

+ Fullstack Web Development Agency
-

Emerging Technologies

-

+

Emerging Technologies

+

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 diff --git a/src/styles/general.css b/src/styles/general.css index 6479b85..78b596c 100644 --- 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; } diff --git a/src/styles/index.css b/src/styles/index.css index 46b8f42..2322822 100644 --- 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; } diff --git a/src/templates/blog.js b/src/templates/blog.js index 9db26dd..44a70f5 100644 --- a/src/templates/blog.js +++ b/src/templates/blog.js @@ -11,7 +11,7 @@ class Blog extends Component {

diff --git a/tailwind.config.js b/tailwind.config.js index 1f90750..fcca5b7 100644 --- 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, }, /* diff --git a/yarn.lock b/yarn.lock index 6667c06..67090a3 100644 --- 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"