Changing Fonts, adding bolder font and styling fixes

This commit is contained in:
Moris Zen
2018-09-12 11:10:09 +02:00
parent 312e01cde0
commit 1966676638
15 changed files with 112 additions and 115 deletions

View File

@@ -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 = () => (
<PageTransition>
<PageIntro
@@ -23,7 +26,7 @@ const ServicesPage = () => (
headline="Agile practitioners"
text="At Saburly we embrace Agiles 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"
/>
<section className="px-4 py-16">
<Fade>
@@ -36,7 +39,7 @@ const ServicesPage = () => (
/>
<SectionIntro
h2Classes="text-3xl md:text-5xl saburly-color font-light"
h2Classes="text-3xl md:text-5xl saburly-color"
classes="lg:my-20 max-w-lg"
headline="Design services"
text="We offer consistent quality design that extends to every section of the application development. Our approach is simple: focus on how users might use the product
@@ -51,11 +54,11 @@ const ServicesPage = () => (
alt="User Experience Design Agency"
/>
<div className="my-6">
<h3 className="font-medium lg:font-light my-2 text-xl md:text-3xl font-light">
<div className="my-8">
<h3 className={headerClasses}>
Conceptualization & Branding
</h3>
<p className="font-light leading-normal text-black-light text-lg">
<p className="font-light font-serif opacity-80 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
@@ -63,11 +66,11 @@ const ServicesPage = () => (
for the design.
</p>
</div>
<div className="my-6">
<h3 className="text-black font-medium lg:font-light my-2 text-xl md:text-3xl font-light">
<div className="my-8">
<h3 className={headerClasses}>
UX & UI Design
</h3>
<p className="font-light leading-normal text-black-light text-lg">
<p className={textClasses}>
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 = () => (
<div className="lg:flex">
<div>
<SectionIntro
h2Classes="font-light saburly-color text-3xl md:text-5xl"
h2Classes="saburly-color text-3xl 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."
/>
@@ -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"
/>
<div className="my-6">
<h3 className="my-2 text-black font-medium lg:font-light text-xl md:text-3xl">
<div className="my-8">
<h3 className={headerClasses}>
Web development
</h3>
<p className="font-light leading-normal text-lg text-black-light">
<p className={textClasses}>
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-6">
<h3 className="my-2 text-black font-medium lg:font-light text-xl md:text-3xl">
<div className="my-8">
<h3 className={headerClasses}>
Mobile & desktop apps
</h3>
<p className="font-light leading-normal text-lg text-black-light">
<p className={textClasses}>
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.
</p>
</div>
<div className="my-6">
<h3 className="my-2 text-black font-medium lg:font-light text-xl md:text-3xl font-light">
<div className="my-8">
<h3 className={headerClasses}>
DevOps
</h3>
<p className="font-light leading-normal text-black-light text-lg">
<p className={textClasses}>
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 = () => (
</Fade>
<Fade>
<div className="p-8 my-4 bg-white border-bottom-saburly">
<h3 className="my-4 text-black text-3xl">Emerging Technologies</h3>
<p className="font-light leading-normal text-black-light text-lg">
<h3 className={headerClasses}>Emerging Technologies</h3>
<p className={textClasses}>
We harness a wide array of emerging technologies, such as{' '}
<strong>AR/VR</strong>, <strong>AI technologies</strong>,{' '}
<strong>Machine Learning</strong> and <strong>Blockchain</strong>,
@@ -164,7 +167,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-3xl md:text-5xl saburly-color font-light"
h2Classes="text-3xl md:text-5xl saburly-color"
headline="Flexible Workflow"
text="We are helping everything from Fortune 500 companies to startups
and tailor our processes based on your scale and needs. "