From 1966676638068d152b4f81d1ac795cb509288cbc Mon Sep 17 00:00:00 2001 From: Moris Zen Date: Wed, 12 Sep 2018 11:10:09 +0200 Subject: [PATCH] Changing Fonts, adding bolder font and styling fixes --- package.json | 7 ++-- src/components/Footer.js | 4 +-- src/components/Header.js | 6 ++-- src/components/InfoBox.js | 2 +- src/components/SectionIntro.js | 4 ++- src/components/WorkStyle.js | 27 +++++++------- src/images/saburly-logo-bold.svg | 1 + src/layouts/index.js | 5 +-- src/pages/about.js | 2 +- src/pages/contact.js | 6 ++-- src/pages/index.js | 31 +++++++++-------- src/pages/services.js | 45 +++++++++++++----------- src/styles/index.css | 60 ++++++++++++++++---------------- tailwind.config.js | 7 ++-- yarn.lock | 20 +++-------- 15 files changed, 112 insertions(+), 115 deletions(-) create mode 100644 src/images/saburly-logo-bold.svg diff --git a/package.json b/package.json index c77b840..d7bf13f 100644 --- a/package.json +++ b/package.json @@ -33,11 +33,8 @@ "slideout": "^1.0.1", "tiny-slider": "^2.8.5", "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", - "typeface-roboto-condensed": "^0.0.54", + "typeface-montserrat": "^0.0.54", + "typeface-pt-serif": "^0.0.54", "vanilla-tilt": "^1.4.1" }, "keywords": [ diff --git a/src/components/Footer.js b/src/components/Footer.js index 8963129..4d02b63 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -20,10 +20,10 @@ const Footer = () => ( className="p-2 items-center text-white leading-none lg:rounded-full flex lg:inline-flex" role="alert" > - + Let's Connect - + Tell us about your project and get a free proposal
-
    +
    • Services
      • @@ -49,7 +49,7 @@ class Header extends Component {
    diff --git a/src/components/InfoBox.js b/src/components/InfoBox.js index 7435264..f066bb7 100644 --- a/src/components/InfoBox.js +++ b/src/components/InfoBox.js @@ -4,7 +4,7 @@ import Link from 'gatsby-link' const InfoBox = ({ ...props }) => (

    {props.headline}

    -

    +

    {props.text}

    diff --git a/src/components/SectionIntro.js b/src/components/SectionIntro.js index 74dd180..73c124f 100644 --- a/src/components/SectionIntro.js +++ b/src/components/SectionIntro.js @@ -28,7 +28,9 @@ const IntroDefault = ({ ...props }) => (

    {props.text}

    diff --git a/src/components/WorkStyle.js b/src/components/WorkStyle.js index a4e4202..4002349 100644 --- a/src/components/WorkStyle.js +++ b/src/components/WorkStyle.js @@ -9,6 +9,9 @@ import CodeReviews from '../images/code-reviews.svg' import UXResearch from '../images/ux-research.svg' import UnitIntegration from '../images/unit-and-integration-testing.svg' +let headerClasses = "my-2 text-xl md:text-3xl font-medium text-black" +let textClasses="font-serif opacity-80 font-light leading-normal text-black-light text-lg" + const WorkStyle = ({ ...props }) => (
    {props.children} @@ -16,8 +19,8 @@ const WorkStyle = ({ ...props }) => (
    High Quality Code -

    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 @@ -30,8 +33,8 @@ const WorkStyle = ({ ...props }) => ( className="max-w-10" alt="High Quality Code" /> -

    Continuous delivery

    -

    +

    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 @@ -46,8 +49,8 @@ const WorkStyle = ({ ...props }) => ( className="max-w-10" alt="High Quality Code" /> -

    Modern DevOps

    -

    +

    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. @@ -57,8 +60,8 @@ const WorkStyle = ({ ...props }) => (

    High Quality Code -

    Code Reviews

    -

    +

    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 @@ -69,8 +72,8 @@ const WorkStyle = ({ ...props }) => (

    High Quality Code -

    UX testing/research

    -

    +

    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, @@ -84,10 +87,10 @@ const WorkStyle = ({ ...props }) => ( className="max-w-10" alt="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/saburly-logo-bold.svg b/src/images/saburly-logo-bold.svg new file mode 100644 index 0000000..12c97b8 --- /dev/null +++ b/src/images/saburly-logo-bold.svg @@ -0,0 +1 @@ +saburly-logo-bold \ No newline at end of file diff --git a/src/layouts/index.js b/src/layouts/index.js index 22bae75..fd0eea6 100644 --- a/src/layouts/index.js +++ b/src/layouts/index.js @@ -7,8 +7,9 @@ import Footer from '../components/Footer' import SideMenu from '../components/SideMenu' import MessengerCustomerChat from 'react-messenger-customer-chat' -require('typeface-maven-pro') -require('typeface-lato') +require('typeface-montserrat') +require('typeface-pt-serif') + import '../styles/index.css' import '../styles/general.css' diff --git a/src/pages/about.js b/src/pages/about.js index 7760f3e..7bbe710 100644 --- a/src/pages/about.js +++ b/src/pages/about.js @@ -27,7 +27,7 @@ const AboutPage = () => ( headline="We know software" text="Saburly was founded by senior tech leads that understand what it takes to create modern digital solutions. We have managed large software development teams for successful companies in the past and are now recruiting and mentoring the best talents in the industry for Saburly." image={IntroImage} - imgClasses="border-white rounded-lg opacity-100 lg:opacity-70 hover:opacity-100 -mb-12" + imgClasses="border-white rounded-lg -mb-12" />

    diff --git a/src/pages/contact.js b/src/pages/contact.js index ee2ff74..df3b1e4 100644 --- a/src/pages/contact.js +++ b/src/pages/contact.js @@ -19,7 +19,7 @@ const ContactPage = () => ( text="We are always on a lookout for exciting challenges. Feel free to contact us if you want to start something great or just have any questions." sectionClasses="lg:mb-8" image={ContactImage} - imgClasses="-mb-12 border-white rounded-lg opacity-100 lg:opacity-70 hover:opacity-100" + imgClasses="-mb-12 border-white rounded-lg" />
    @@ -121,7 +121,7 @@ const ContactPage = () => ( className="w-full max-w-sm mx-auto pt-16 p-6" method="POST" > - +
    ( value="Send" type="submit" > - Send + SEND
    diff --git a/src/pages/index.js b/src/pages/index.js index a50b329..f6acc00 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -30,7 +30,7 @@ import PageTransition from 'gatsby-plugin-page-transitions' const IndexPage = ({ ...props }) => ( @@ -51,9 +51,10 @@ const IndexPage = ({ ...props }) => (
    @@ -62,10 +63,10 @@ const IndexPage = ({ ...props }) => ( @@ -73,10 +74,10 @@ const IndexPage = ({ ...props }) => ( @@ -85,9 +86,9 @@ const IndexPage = ({ ...props }) => ( @@ -97,8 +98,8 @@ const IndexPage = ({ ...props }) => (
    @@ -153,13 +154,13 @@ const IndexPage = ({ ...props }) => ( standard text="More About What We Do" url="/services" - classes="font-medium rounded-full m-2 hover:shadow-md text-grey-darker hover:shadow" + classes="rounded-full m-2 hover:shadow-md text-grey-darker hover:shadow" />
    @@ -169,8 +170,8 @@ const IndexPage = ({ ...props }) => (
    diff --git a/src/pages/services.js b/src/pages/services.js index f1e9020..4c3e564 100644 --- a/src/pages/services.js +++ b/src/pages/services.js @@ -14,6 +14,9 @@ import HowWeWork from '../images/custom-software-workflow.svg' import PageTransition from 'gatsby-plugin-page-transitions' +let headerClasses = "my-2 text-xl md:text-3xl font-medium text-black" +let textClasses="font-serif opacity-80 font-light leading-normal text-black-light text-lg" + const ServicesPage = () => ( ( 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={IntroImage} - imgClasses="-mb-12 border-white rounded-lg opacity-100 lg:opacity-70 hover:opacity-100" + imgClasses="-mb-12 border-white rounded-lg" />
    @@ -36,7 +39,7 @@ const ServicesPage = () => ( /> -
    -

    +
    +

    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 @@ -63,11 +66,11 @@ const ServicesPage = () => ( for the 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 @@ -89,7 +92,7 @@ const ServicesPage = () => (

    @@ -98,32 +101,32 @@ const ServicesPage = () => ( className="lg:hidden w-full mx-auto text-center content-center align-center p-8" alt="Fullstack Web Development Agency" /> -
    -

    +
    +

    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

    -

    +

    Building competitive applications these days is challenging, but we believe that we have what it takes for both native languages and hybrid solutions. We love using technologies like React Native and Electron to build cross-platform apps.

    -
    -

    +
    +

    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 @@ -141,8 +144,8 @@ const ServicesPage = () => (

    -

    Emerging Technologies

    -

    +

    Emerging Technologies

    +

    We harness a wide array of emerging technologies, such as{' '} AR/VR, AI technologies,{' '} Machine Learning and Blockchain, @@ -164,7 +167,7 @@ const ServicesPage = () => (