senaduka/old-v2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changing Fonts, adding bolder font and styling fixes

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

7
package.json
View File

@@ -33,11 +33,8 @@
"slideout": "^1.0.1", "slideout": "^1.0.1",
"tiny-slider": "^2.8.5", "tiny-slider": "^2.8.5",
"tiny-slider-react": "0.3.4", "tiny-slider-react": "0.3.4",
"typeface-lato": "^0.0.54", "typeface-montserrat": "^0.0.54",
"typeface-maven-pro": "^0.0.54", "typeface-pt-serif": "^0.0.54",
"typeface-quicksand": "^0.0.54",
"typeface-roboto": "^0.0.54",
"typeface-roboto-condensed": "^0.0.54",
"vanilla-tilt": "^1.4.1" "vanilla-tilt": "^1.4.1"
}, },
"keywords": [ "keywords": [

4
src/components/Footer.js
View File

@@ -20,10 +20,10 @@ const Footer = () => (
className="p-2 items-center text-white leading-none lg:rounded-full flex lg:inline-flex" className="p-2 items-center text-white leading-none lg:rounded-full flex lg:inline-flex"
role="alert" role="alert"
> >
<span className="flex bg-teal hover:bg-teal-dark saburly-transition rounded-full uppercase px-3 py-2 text-xs font-bold mr-3"> <span className="flex bg-teal hover:bg-teal-dark saburly-transition rounded-full uppercase px-3 py-2 text-xs mr-3">
Let's Connect Let's Connect
</span> </span>
<span className="font-normal mr-2 hover:opacity-80 saburly-transition text-left flex-auto"> <span className="mr-2 hover:opacity-80 saburly-transition text-left flex-auto">
Tell us about your project and get a free proposal Tell us about your project and get a free proposal
</span> </span>
<svg <svg

6
src/components/Header.js
View File

@@ -8,7 +8,7 @@ import Headroom from 'react-headroom'
import './Header.css' import './Header.css'
let menuClasses = let menuClasses =
'no-underline mt-4 lg:inline-block text-white font-medium lg:mt-0 hover:opacity-80 uppercase mr-4' 'no-underline mt-4 lg:inline-block text-white lg:mt-0 hover:opacity-80 uppercase mr-4'
class Header extends Component { class Header extends Component {
render() { render() {
@@ -35,7 +35,7 @@ class Header extends Component {
</div> </div>
<div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-right lg:w-auto justify-end lg:flex-grow"> <div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-right lg:w-auto justify-end lg:flex-grow">
<ul className="list-reset font- text-sm"> <ul className="list-reset text-sm">
<Link to="/services"> <Link to="/services">
<li className={menuClasses}>Services</li> <li className={menuClasses}>Services</li>
</Link> </Link>
@@ -49,7 +49,7 @@ class Header extends Component {
<Button <Button
text="Contact" text="Contact"
standard standard
classes="rounded-full font-medium text-white hover:shadow" classes="rounded-full text-white hover:shadow"
url="/contact" url="/contact"
/> />
</ul> </ul>

2
src/components/InfoBox.js
View File

@@ -4,7 +4,7 @@ import Link from 'gatsby-link'
const InfoBox = ({ ...props }) => ( const InfoBox = ({ ...props }) => (
<div className={`${props.classes}`}> <div className={`${props.classes}`}>
<h2 className={`${props.h2Classes} text-black my-2`}>{props.headline}</h2> <h2 className={`${props.h2Classes} text-black my-2`}>{props.headline}</h2>
<p className="text-black-light leading-normal lg:text-lg font-light"> <p className="text-black-light leading-normal lg:text-lg font-light font-serif opacity-80">
{props.text} {props.text}
</p> </p>
</div> </div>

4
src/components/SectionIntro.js
View File

@@ -28,7 +28,9 @@ const IntroDefault = ({ ...props }) => (
<p <p
className={`${props.light ? headlineDark : ''} ${ className={`${props.light ? headlineDark : ''} ${
props.header ? 'saburly-text-intro' : 'text-black-light' props.header ? 'saburly-text-intro' : 'text-black-light'
} font-light leading-normal md:text-lg ${props.textClasses}`} } font-light font-serif opacity-80 leading-normal md:text-lg ${
props.textClasses
}`}
> >
{props.text} {props.text}
</p> </p>

27
src/components/WorkStyle.js
View File

@@ -9,6 +9,9 @@ import CodeReviews from '../images/code-reviews.svg'
import UXResearch from '../images/ux-research.svg' import UXResearch from '../images/ux-research.svg'
import UnitIntegration from '../images/unit-and-integration-testing.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 }) => ( const WorkStyle = ({ ...props }) => (
<section className="container rounded overflow-hidden border-bottom-saburly mx-auto my-4 bg-white"> <section className="container rounded overflow-hidden border-bottom-saburly mx-auto my-4 bg-white">
{props.children} {props.children}
@@ -16,8 +19,8 @@ const WorkStyle = ({ ...props }) => (
<div className="flex flex-wrap text-black"> <div className="flex flex-wrap text-black">
<div className="w-full md:w-1/2 p-8 md:border-r-2 border-grey-lighter"> <div className="w-full md:w-1/2 p-8 md:border-r-2 border-grey-lighter">
<img src={HQCode} className="max-w-10" alt="High Quality Code" /> <img src={HQCode} className="max-w-10" alt="High Quality Code" />
<h3 className="text-2xl saburly-color my-2">High Quality Code</h3> <h3 className={headerClasses}>High Quality Code</h3>
<p className="leading-normal font-light text-lg"> <p className={textClasses}>
We have deep understanding of software engineering & computer We have deep understanding of software engineering & computer
science and we know what it takes to write high-quality, performant science and we know what it takes to write high-quality, performant
and maintainable code. Clean, readable, robust code is something we and maintainable code. Clean, readable, robust code is something we
@@ -30,8 +33,8 @@ const WorkStyle = ({ ...props }) => (
className="max-w-10" className="max-w-10"
alt="High Quality Code" alt="High Quality Code"
/> />
<h3 className="text-2xl saburly-color my-2">Continuous delivery</h3> <h3 className={headerClasses}>Continuous delivery</h3>
<p className="leading-normal font-light text-lg"> <p className={textClasses}>
Deploying new code to production should not take weeks. We know how Deploying new code to production should not take weeks. We know how
to build pipelines that allow code changes to be pushed to different to build pipelines that allow code changes to be pushed to different
cloud environments automatically. Deploying to production is as easy cloud environments automatically. Deploying to production is as easy
@@ -46,8 +49,8 @@ const WorkStyle = ({ ...props }) => (
className="max-w-10" className="max-w-10"
alt="High Quality Code" alt="High Quality Code"
/> />
<h3 className="text-2xl saburly-color my-2">Modern DevOps</h3> <h3 className={headerClasses}>Modern DevOps</h3>
<p className="leading-normal font-light text-lg"> <p className={textClasses}>
We like a "release early, release often" philosophy and to achieve We like a "release early, release often" philosophy and to achieve
this we use modern DevOps tools like Docker. But DevOps is not only this we use modern DevOps tools like Docker. But DevOps is not only
about development and operations, it is also about quality. about development and operations, it is also about quality.
@@ -57,8 +60,8 @@ const WorkStyle = ({ ...props }) => (
</div> </div>
<div className="w-full md:w-1/2 p-8"> <div className="w-full md:w-1/2 p-8">
<img src={CodeReviews} className="max-w-10" alt="High Quality Code" /> <img src={CodeReviews} className="max-w-10" alt="High Quality Code" />
<h3 className="text-2xl saburly-color my-2">Code Reviews</h3> <h3 className={headerClasses}>Code Reviews</h3>
<p className="leading-normal font-light text-lg"> <p className={textClasses}>
“Two Heads are Better Than One”. Code reviews are integrated part of “Two Heads are Better Than One”. Code reviews are integrated part of
our process which makes catching bugs early before they event get our process which makes catching bugs early before they event get
merged into the code. We make sure each change is reviewed by merged into the code. We make sure each change is reviewed by
@@ -69,8 +72,8 @@ const WorkStyle = ({ ...props }) => (
<div className="flex flex-wrap md:border-t-2 border-grey-lighter text-black"> <div className="flex flex-wrap md:border-t-2 border-grey-lighter text-black">
<div className="w-full md:w-1/2 p-8 md:border-r-2 border-grey-lighter"> <div className="w-full md:w-1/2 p-8 md:border-r-2 border-grey-lighter">
<img src={UXResearch} className="max-w-10" alt="High Quality Code" /> <img src={UXResearch} className="max-w-10" alt="High Quality Code" />
<h3 className="text-2xl saburly-color my-2">UX testing/research</h3> <h3 className={headerClasses}>UX testing/research</h3>
<p className="leading-normal font-light text-lg"> <p className={textClasses}>
We know it takes more than just an user video or a survey to 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 understand your user experience. We improve UX by watching how real
customers interact with your interface (websites, mobile devices, customers interact with your interface (websites, mobile devices,
@@ -84,10 +87,10 @@ const WorkStyle = ({ ...props }) => (
className="max-w-10" className="max-w-10"
alt="High Quality Code" alt="High Quality Code"
/> />
<h3 className="text-2xl saburly-color my-2"> <h3 className={headerClasses}>
Unit & Integration testing Unit & Integration testing
</h3> </h3>
<p className="leading-normal font-light text-lg"> <p className={textClasses}>
Unit and integration testing are vital parts of the testing process. Unit and integration testing are vital parts of the testing process.
Having automated unit & integration tests is the key prerequisite Having automated unit & integration tests is the key prerequisite
for writing high-quality code at a fast pace. for writing high-quality code at a fast pace.

1
src/images/saburly-logo-bold.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 889.1 113.6"><title>saburly-logo-bold</title><path d="M178.9,188.1h-1.5c-15.9-.4-24.7-9.9-24.7-26s8.8-25.6,24.7-26h71.7v-11H177.5c-23.8.5-35.7,13.1-35.7,37s11.9,36.5,35.4,37h.9" transform="translate(-141.8 -124.3)" style="fill:#fff"/><path d="M212.1,174.7h1.6c15.8.4,24.7,9.9,24.7,26s-8.9,25.6-24.8,26.1H141.9v11h71.7c23.8-.5,35.7-13.1,35.7-37s-11.9-36.5-35.4-37h-.9" transform="translate(-141.8 -124.3)" style="fill:#fff"/><polygon points="220.9 113.6 176 22.1 131.1 113.6 120.2 110.2 176 0.1 231.8 110.2 220.9 113.6" style="fill:#fff"/><path d="M466.1,162.7h-.4s0,4-.1,12h.9c15.6.4,24.2,9.7,24.2,25.6s-8.6,25.1-24.2,25.5H405.8V199.5H394.2v38.3h72.2c20-.6,36.1-17.4,36.1-37.5s-16.1-37-35.8-37.5Z" transform="translate(-141.8 -124.3)" style="fill:#fff"/><path d="M466,187.6l-60.2-1V136.4h60.7c15.6.5,24.2,9.7,24.2,25.6s-8.6,25.1-24.2,25.6Zm.1-63.1H394.3v75h72.2c20-.5,36.1-17.3,36.1-37.5s-16.1-37-35.8-37.5Z" transform="translate(-141.8 -124.3)" style="fill:#fff"/><path d="M528.3,181.9v-1.2a27.2,27.2,0,0,1-.1-2.8V124.3h11.7v55.8a10.9,10.9,0,0,1,.1,1.8c0,26.5,16.8,44.1,42.3,44.1s41-16,42.4-41.5v-3.9l-.2-3.4,11.7-.3v3.3c0,.5.1,1,.1,1.5s-.1,1-.1,1.5v2.7c-2.1,29.2-25.9,52-54,52C552.5,237.9,528.3,212.7,528.3,181.9Z" transform="translate(-141.8 -124.3)" style="fill:#fff"/><path d="M558.3,164a8,8,0,1,1,8,8.2,8.1,8.1,0,0,1-8-8.2" transform="translate(-141.8 -124.3)" style="fill:#fff"/><path d="M595.9,164a8,8,0,1,1,8,8.2,8.1,8.1,0,0,1-8-8.2" transform="translate(-141.8 -124.3)" style="fill:#fff"/><path d="M734.8,198.5h-.7l-13.7,1,37.1,38.4h14.4l-36.8-39.4Z" transform="translate(-141.8 -124.3)" style="fill:#fff"/><polygon points="528.5 8.1 524.4 8.1 524.4 67.3 524.4 19.2 570.9 67.3 585.7 67.3 528.5 8.1" style="fill:#fff"/><polygon points="516.8 75.2 516.8 45.4 516.7 113.5 528.4 113.5 528.4 75.2 524.4 75.2 516.8 75.2" style="fill:#fff"/><path d="M730.5,124.5H658.7v75h11.6V136.4h60.7c15.6.5,24.2,9.7,24.2,25.6s-8.6,25.1-24.2,25.6H708.7l11.7,11.9h10.4c20.1-.5,36.1-17.3,36.1-37.5s-16.1-37-35.8-37.5Z" transform="translate(-141.8 -124.3)" style="fill:#fff"/><path d="M811.9,136.6h33.8v89.3H812.9ZM800.2,237.9h57.3V124.7H800.2Z" transform="translate(-141.8 -124.3)" style="fill:#fff"/><polygon points="766.5 113.5 658.3 113.5 658.3 77.5 666.1 77.5 666.1 101.6 755 101.6 755 77.5 766.5 77.5 766.5 113.5" style="fill:#fff"/><polygon points="858.7 113.4 858.7 0.8 847 0.8 847 101.5 804.3 101.6 804.3 113.4 858.7 113.4" style="fill:#fff"/><path d="M1030.8,124.8l-11.7.3.2,3.4v3.9c-1.4,25.5-17.8,41.5-42.4,41.5s-42.3-17.6-42.3-44.2a10.3,10.3,0,0,0-.1-1.7v-3.6H922.7v1.3a28.1,28.1,0,0,0,.1,2.9v1.1c0,30.9,24.2,56,54,56,28.1,0,51.9-22.8,54-51.9V131c0-.5.1-1,.1-1.4s-.1-1-.1-1.5Z" transform="translate(-141.8 -124.3)" style="fill:#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

5
src/layouts/index.js
View File

@@ -7,8 +7,9 @@ import Footer from '../components/Footer'
import SideMenu from '../components/SideMenu' import SideMenu from '../components/SideMenu'
import MessengerCustomerChat from 'react-messenger-customer-chat' import MessengerCustomerChat from 'react-messenger-customer-chat'
require('typeface-maven-pro') require('typeface-montserrat')
require('typeface-lato') require('typeface-pt-serif')
import '../styles/index.css' import '../styles/index.css'
import '../styles/general.css' import '../styles/general.css'

2
src/pages/about.js
View File

@@ -27,7 +27,7 @@ const AboutPage = () => (
headline="We know software" 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." 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} image={IntroImage}
imgClasses="border-white rounded-lg opacity-100 lg:opacity-70 hover:opacity-100 -mb-12" imgClasses="border-white rounded-lg -mb-12"
/> />
<section className="container mx-auto p-4 md:p-0 my-20"> <section className="container mx-auto p-4 md:p-0 my-20">

6
src/pages/contact.js
View File

@@ -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." 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" sectionClasses="lg:mb-8"
image={ContactImage} image={ContactImage}
imgClasses="-mb-12 border-white rounded-lg opacity-100 lg:opacity-70 hover:opacity-100" imgClasses="-mb-12 border-white rounded-lg"
/> />
<section className="container mx-auto my-12 p-4"> <section className="container mx-auto my-12 p-4">
@@ -121,7 +121,7 @@ const ContactPage = () => (
className="w-full max-w-sm mx-auto pt-16 p-6" className="w-full max-w-sm mx-auto pt-16 p-6"
method="POST" method="POST"
> >
<SectionIntro headline="Send us a message" /> <SectionIntro headline="We'd love to hear from you" />
<div className="md:flex flex-wrap"> <div className="md:flex flex-wrap">
<input <input
className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2" className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2"
@@ -156,7 +156,7 @@ const ContactPage = () => (
value="Send" value="Send"
type="submit" type="submit"
> >
Send SEND
</button> </button>
</form> </form>
<div> <div>

31
src/pages/index.js
View File

@@ -30,7 +30,7 @@ import PageTransition from 'gatsby-plugin-page-transitions'
const IndexPage = ({ ...props }) => ( const IndexPage = ({ ...props }) => (
<PageTransition> <PageTransition>
<PageIntro <PageIntro
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." text="We're in the business of solving real-world problems with digital solutions. Our mission is to make you stand out and gain competitive advantages with the help of modern technologies."
image={ImgIntro} image={ImgIntro}
imgClasses="-mb-20 p-2 md:p-8" imgClasses="-mb-20 p-2 md:p-8"
> >
@@ -51,9 +51,10 @@ const IndexPage = ({ ...props }) => (
<section className="container mx-auto max-w-lg text-center mt-16 p-4"> <section className="container mx-auto max-w-lg text-center mt-16 p-4">
<Fade> <Fade>
<SectionIntro <SectionIntro
h2Classes="text-2xl sm:text-3xl" classes="my-10"
h2Classes="text-2xl sm:text-5xl"
headline="Because beautiful code makes our heart pound" headline="Because beautiful code makes our heart pound"
text="What gets us going is our passion for cutting edge technologies and incredible user experiences. Our developers deliver custom end-to-end software solutions daily and can even help you with initial analysis, architecture design, testing and deployments." text="What gets us going is our passion for cutting edge technologies and incredible user experiences. We transform frustrations into features and headaches into highlights. And we do it all through our UX design and development process, by coupling form and function to develop world-class websites and apps for businesses of all sizes and sectors."
/> />
</Fade> </Fade>
</section> </section>
@@ -62,10 +63,10 @@ const IndexPage = ({ ...props }) => (
<Fade> <Fade>
<Service <Service
classes="py-8" classes="py-8"
h2Classes="text-2xl xsm:text-3xl sm:text-4xl font-light text-black" h2Classes="text-2xl xsm:text-3xl font-medium saburly-color"
img={ImgDesign} img={ImgDesign}
title="User Experience Design" title="User Experience Design"
text="Our approach is simple: focus on how users might use the product in the best ways possible. We offer UX and interface design services for all screens and devices. The solutions are usually shaped through iterative processes of research, prototyping and testing." text="Our approach is simple: focus on how users might use the product in the best ways possible. We offer UX and UI design services for all screens and devices. The solutions are usually shaped through iterative processes of research, prototyping and testing."
/> />
</Fade> </Fade>
@@ -73,10 +74,10 @@ const IndexPage = ({ ...props }) => (
<Service <Service
reversed reversed
classes="py-8" classes="py-8"
h2Classes="text-2xl xsm:text-3xl sm:text-4xl font-light text-black" h2Classes="text-2xl xsm:text-3xl font-medium saburly-color"
img={ImgFullstack} img={ImgFullstack}
title="Full-Stack Development" title="Full-Stack Development"
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." text="We love modern web development. Our talented developers work with both client-side and server-side technologies are always up to speed with cutting edge trends. We deliver high-quality, maintainable code on time and know how to balance between cost, time and quality."
imgClasses="" imgClasses=""
/> />
</Fade> </Fade>
@@ -85,9 +86,9 @@ const IndexPage = ({ ...props }) => (
<Service <Service
img={ImgMobile} img={ImgMobile}
classes="py-8" classes="py-8"
h2Classes="text-2xl xsm:text-3xl sm:text-4xl font-light text-black" h2Classes="text-2xl xsm:text-3xl font-medium saburly-color"
imgClasses="max-h-sm" imgClasses="max-h-sm"
title="Mobile Apps" title="Mobile App Development"
text="We have what it takes to develop competitive iOS and Android applications using both native languages and hybrid solutions. Solutions for iOS are built with Swift & Objective-C and Android solutions are built with Java & Kotlin. We love using technologies like React Native to build cross-platform native apps." text="We have what it takes to develop competitive iOS and Android applications using both native languages and hybrid solutions. Solutions for iOS are built with Swift & Objective-C and Android solutions are built with Java & Kotlin. We love using technologies like React Native to build cross-platform native apps."
/> />
</Fade> </Fade>
@@ -97,8 +98,8 @@ const IndexPage = ({ ...props }) => (
<div className="my-8 py-8 container mx-auto max-w-lg"> <div className="my-8 py-8 container mx-auto max-w-lg">
<Fade> <Fade>
<SectionIntro <SectionIntro
h2Classes="text-2xl md:text-4xl" h2Classes="text-2xl md:text-5xl"
headline="Ambitious projects bring great responsibility" headline="You'll be in great company"
text="By thinking big, designing smart and developing fast, we're helping organizations of various sizes bring life to ideas. We're now eager to hear what challenges you have for us." text="By thinking big, designing smart and developing fast, we're helping organizations of various sizes bring life to ideas. We're now eager to hear what challenges you have for us."
/> />
<div className="p-4 sm:flex flex-wrap items-center max-w-full justify-around"> <div className="p-4 sm:flex flex-wrap items-center max-w-full justify-around">
@@ -153,13 +154,13 @@ const IndexPage = ({ ...props }) => (
standard standard
text="More About What We Do" text="More About What We Do"
url="/services" 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"
/> />
<Button <Button
filled filled
text="Let's Get In Touch" text="Let's Get In Touch"
url="/contact" url="/contact"
classes="text-white font-medium shadow hover:shadow-md rounded-full m-2 font-light bg-teal hover:bg-teal-dark" classes="text-white shadow hover:shadow-md rounded-full m-2 font-light bg-teal hover:bg-teal-dark"
/> />
</div> </div>
</Fade> </Fade>
@@ -169,8 +170,8 @@ const IndexPage = ({ ...props }) => (
<section className="text-center p-4 relative"> <section className="text-center p-4 relative">
<Fade> <Fade>
<SectionIntro <SectionIntro
h2Classes="py-8 text-2xl md:text-4xl" h2Classes="py-8 text-2xl md:text-5xl"
headline="Yet sometimes we have fun & publish" headline="Sometimes we have fun & publish"
/> />
</Fade> </Fade>
<Fade> <Fade>

45
src/pages/services.js
View File

@@ -14,6 +14,9 @@ import HowWeWork from '../images/custom-software-workflow.svg'
import PageTransition from 'gatsby-plugin-page-transitions' 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 = () => ( const ServicesPage = () => (
<PageTransition> <PageTransition>
<PageIntro <PageIntro
@@ -23,7 +26,7 @@ const ServicesPage = () => (
headline="Agile practitioners" 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." 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} 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"> <section className="px-4 py-16">
<Fade> <Fade>
@@ -36,7 +39,7 @@ const ServicesPage = () => (
/> />
<SectionIntro <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" classes="lg:my-20 max-w-lg"
headline="Design services" 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 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" alt="User Experience Design Agency"
/> />
<div className="my-6"> <div className="my-8">
<h3 className="font-medium lg:font-light my-2 text-xl md:text-3xl font-light"> <h3 className={headerClasses}>
Conceptualization & Branding Conceptualization & Branding
</h3> </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 Before our designers work on visual details, we start off by
creating a clear understanding of the problem that you're creating a clear understanding of the problem that you're
trying to solve with the project. After collecting and trying to solve with the project. After collecting and
@@ -63,11 +66,11 @@ const ServicesPage = () => (
for the design. for the design.
</p> </p>
</div> </div>
<div className="my-6"> <div className="my-8">
<h3 className="text-black font-medium lg:font-light my-2 text-xl md:text-3xl font-light"> <h3 className={headerClasses}>
UX & UI Design UX & UI Design
</h3> </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 We love to design pixel-perfect products that are easy to use
and delightful to interact with. From User-Flows, Lo-Fi & and delightful to interact with. From User-Flows, Lo-Fi &
Hi-Fi Wireframes and Prototypes to polished slick Hi-Fi Wireframes and Prototypes to polished slick
@@ -89,7 +92,7 @@ const ServicesPage = () => (
<div className="lg:flex"> <div className="lg:flex">
<div> <div>
<SectionIntro <SectionIntro
h2Classes="font-light saburly-color text-3xl md:text-5xl" h2Classes="saburly-color text-3xl md:text-5xl"
headline="Software development" headline="Software development"
text="From infrastructure to AI, we develop data-driven Full-Stack applications for both custom software and third party solutions." 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" className="lg:hidden w-full mx-auto text-center content-center align-center p-8"
alt="Fullstack Web Development Agency" alt="Fullstack Web Development Agency"
/> />
<div className="my-6"> <div className="my-8">
<h3 className="my-2 text-black font-medium lg:font-light text-xl md:text-3xl"> <h3 className={headerClasses}>
Web development Web development
</h3> </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 We offer full-cycle web development services for the connected
world. Our talented developers work with popular languages and world. Our talented developers work with popular languages and
are up to speed with cutting edge trends. are up to speed with cutting edge trends.
</p> </p>
</div> </div>
<div className="my-6"> <div className="my-8">
<h3 className="my-2 text-black font-medium lg:font-light text-xl md:text-3xl"> <h3 className={headerClasses}>
Mobile & desktop apps Mobile & desktop apps
</h3> </h3>
<p className="font-light leading-normal text-lg text-black-light"> <p className={textClasses}>
Building competitive applications these days is challenging, Building competitive applications these days is challenging,
but we believe that we have what it takes for both native but we believe that we have what it takes for both native
languages and hybrid solutions. We love using technologies languages and hybrid solutions. We love using technologies
like React Native and Electron to build cross-platform apps. like React Native and Electron to build cross-platform apps.
</p> </p>
</div> </div>
<div className="my-6"> <div className="my-8">
<h3 className="my-2 text-black font-medium lg:font-light text-xl md:text-3xl font-light"> <h3 className={headerClasses}>
DevOps DevOps
</h3> </h3>
<p className="font-light leading-normal text-black-light text-lg"> <p className={textClasses}>
Our DevOps experience comes from working with leading hosting Our DevOps experience comes from working with leading hosting
providers such as AWS and Google Cloud Platform. We offer providers such as AWS and Google Cloud Platform. We offer
setups and automation to support delivery across all our setups and automation to support delivery across all our
@@ -141,8 +144,8 @@ const ServicesPage = () => (
</Fade> </Fade>
<Fade> <Fade>
<div className="p-8 my-4 bg-white border-bottom-saburly"> <div className="p-8 my-4 bg-white border-bottom-saburly">
<h3 className="my-4 text-black text-3xl">Emerging Technologies</h3> <h3 className={headerClasses}>Emerging Technologies</h3>
<p className="font-light leading-normal text-black-light text-lg"> <p className={textClasses}>
We harness a wide array of emerging technologies, such as{' '} We harness a wide array of emerging technologies, such as{' '}
<strong>AR/VR</strong>, <strong>AI technologies</strong>,{' '} <strong>AR/VR</strong>, <strong>AI technologies</strong>,{' '}
<strong>Machine Learning</strong> and <strong>Blockchain</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="px-4 py-16 bg-saburly-fadeout">
<div className="container mx-auto xl:flex justify-center items-center"> <div className="container mx-auto xl:flex justify-center items-center">
<SectionIntro <SectionIntro
h2Classes="text-3xl md:text-5xl saburly-color font-light" h2Classes="text-3xl md:text-5xl saburly-color"
headline="Flexible Workflow" headline="Flexible Workflow"
text="We are helping everything from Fortune 500 companies to startups text="We are helping everything from Fortune 500 companies to startups
and tailor our processes based on your scale and needs. " and tailor our processes based on your scale and needs. "

60
src/styles/index.css
View File

@@ -2747,15 +2747,15 @@ table {
} }
.font-sans { .font-sans {
font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; font-family: Montserrat, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
} }
.font-text { .font-text {
font-family: Roboto Condensed, 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-serif { .font-serif {
font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif; font-family: PT Serif, Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;
} }
.font-mono { .font-mono {
@@ -2763,7 +2763,7 @@ table {
} }
.font-body { .font-body {
font-family: roboto-condensed; font-family: PT Serif;
} }
.font-hairline { .font-hairline {
@@ -5483,7 +5483,7 @@ table {
} }
.text-5xl { .text-5xl {
font-size: 3rem; font-size: 3.07rem;
} }
.italic { .italic {
@@ -7917,15 +7917,15 @@ table {
} }
.xsm\:font-sans { .xsm\:font-sans {
font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; font-family: Montserrat, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
} }
.xsm\:font-text { .xsm\:font-text {
font-family: Roboto Condensed, 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;
} }
.xsm\:font-serif { .xsm\:font-serif {
font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif; font-family: PT Serif, Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;
} }
.xsm\:font-mono { .xsm\:font-mono {
@@ -7933,7 +7933,7 @@ table {
} }
.xsm\:font-body { .xsm\:font-body {
font-family: roboto-condensed; font-family: PT Serif;
} }
.xsm\:font-hairline { .xsm\:font-hairline {
@@ -10637,7 +10637,7 @@ table {
} }
.xsm\:text-5xl { .xsm\:text-5xl {
font-size: 3rem; font-size: 3.07rem;
} }
.xsm\:italic { .xsm\:italic {
@@ -13072,15 +13072,15 @@ table {
} }
.sm\:font-sans { .sm\:font-sans {
font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; font-family: Montserrat, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
} }
.sm\:font-text { .sm\:font-text {
font-family: Roboto Condensed, 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-serif { .sm\:font-serif {
font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif; font-family: PT Serif, Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;
} }
.sm\:font-mono { .sm\:font-mono {
@@ -13088,7 +13088,7 @@ table {
} }
.sm\:font-body { .sm\:font-body {
font-family: roboto-condensed; font-family: PT Serif;
} }
.sm\:font-hairline { .sm\:font-hairline {
@@ -15792,7 +15792,7 @@ table {
} }
.sm\:text-5xl { .sm\:text-5xl {
font-size: 3rem; font-size: 3.07rem;
} }
.sm\:italic { .sm\:italic {
@@ -18227,15 +18227,15 @@ table {
} }
.md\:font-sans { .md\:font-sans {
font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; font-family: Montserrat, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
} }
.md\:font-text { .md\:font-text {
font-family: Roboto Condensed, 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-serif { .md\:font-serif {
font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif; font-family: PT Serif, Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;
} }
.md\:font-mono { .md\:font-mono {
@@ -18243,7 +18243,7 @@ table {
} }
.md\:font-body { .md\:font-body {
font-family: roboto-condensed; font-family: PT Serif;
} }
.md\:font-hairline { .md\:font-hairline {
@@ -20947,7 +20947,7 @@ table {
} }
.md\:text-5xl { .md\:text-5xl {
font-size: 3rem; font-size: 3.07rem;
} }
.md\:italic { .md\:italic {
@@ -23382,15 +23382,15 @@ table {
} }
.lg\:font-sans { .lg\:font-sans {
font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; font-family: Montserrat, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
} }
.lg\:font-text { .lg\:font-text {
font-family: Roboto Condensed, 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-serif { .lg\:font-serif {
font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif; font-family: PT Serif, Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;
} }
.lg\:font-mono { .lg\:font-mono {
@@ -23398,7 +23398,7 @@ table {
} }
.lg\:font-body { .lg\:font-body {
font-family: roboto-condensed; font-family: PT Serif;
} }
.lg\:font-hairline { .lg\:font-hairline {
@@ -26102,7 +26102,7 @@ table {
} }
.lg\:text-5xl { .lg\:text-5xl {
font-size: 3rem; font-size: 3.07rem;
} }
.lg\:italic { .lg\:italic {
@@ -28537,15 +28537,15 @@ table {
} }
.xl\:font-sans { .xl\:font-sans {
font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; font-family: Montserrat, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
} }
.xl\:font-text { .xl\:font-text {
font-family: Roboto Condensed, 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-serif { .xl\:font-serif {
font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif; font-family: PT Serif, Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;
} }
.xl\:font-mono { .xl\:font-mono {
@@ -28553,7 +28553,7 @@ table {
} }
.xl\:font-body { .xl\:font-body {
font-family: roboto-condensed; font-family: PT Serif;
} }
.xl\:font-hairline { .xl\:font-hairline {
@@ -31257,7 +31257,7 @@ table {
} }
.xl\:text-5xl { .xl\:text-5xl {
font-size: 3rem; font-size: 3.07rem;
} }
.xl\:italic { .xl\:italic {

7
tailwind.config.js
View File

@@ -192,6 +192,7 @@ module.exports = {
fonts: { fonts: {
sans: [ sans: [
'Montserrat',
'system-ui', 'system-ui',
'BlinkMacSystemFont', 'BlinkMacSystemFont',
'-apple-system', '-apple-system',
@@ -206,7 +207,6 @@ module.exports = {
'sans-serif', 'sans-serif',
], ],
text: [ text: [
'Roboto Condensed',
'system-ui', 'system-ui',
'BlinkMacSystemFont', 'BlinkMacSystemFont',
'-apple-system', '-apple-system',
@@ -221,6 +221,7 @@ module.exports = {
'sans-serif', 'sans-serif',
], ],
serif: [ serif: [
'PT Serif',
'Constantia', 'Constantia',
'Lucida Bright', 'Lucida Bright',
'Lucidabright', 'Lucidabright',
@@ -240,7 +241,7 @@ module.exports = {
'Courier New', 'Courier New',
'monospace', 'monospace',
], ],
body: ['roboto-condensed'], body: ['PT Serif'],
}, },
/* /*
@@ -271,7 +272,7 @@ module.exports = {
'2xl': '1.5rem', // 24px '2xl': '1.5rem', // 24px
'3xl': '1.875rem', // 30px '3xl': '1.875rem', // 30px
'4xl': '2.25rem', // 36px '4xl': '2.25rem', // 36px
'5xl': '3rem', // 48px '5xl': '3.07rem', // 48px
}, },
/* /*

20
yarn.lock
View File

@@ -10358,25 +10358,13 @@ typedarray@^0.0.6:
version "0.0.6" version "0.0.6"
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
typeface-lato@^0.0.54: typeface-montserrat@^0.0.54:
version "0.0.54" version "0.0.54"
resolved "https://registry.yarnpkg.com/typeface-lato/-/typeface-lato-0.0.54.tgz#6ea56309a8b0cfdb7e8246e05de4b58b8272b47c" resolved "https://registry.yarnpkg.com/typeface-montserrat/-/typeface-montserrat-0.0.54.tgz#3fc338db6428d73485b75aa7bd2af8c9a55b9ab3"
typeface-maven-pro@^0.0.54: typeface-pt-serif@^0.0.54:
version "0.0.54" version "0.0.54"
resolved "https://registry.yarnpkg.com/typeface-maven-pro/-/typeface-maven-pro-0.0.54.tgz#7ef991257cf53c0fa75142d2aefcddcbd867ff7c" resolved "https://registry.yarnpkg.com/typeface-pt-serif/-/typeface-pt-serif-0.0.54.tgz#139269d821f44c675bd3713169808cfc51a07d9e"
typeface-quicksand@^0.0.54:
version "0.0.54"
resolved "https://registry.yarnpkg.com/typeface-quicksand/-/typeface-quicksand-0.0.54.tgz#d8f60bcfbea663cda97a0e973f24e6c35d76561a"
typeface-roboto-condensed@^0.0.54:
version "0.0.54"
resolved "https://registry.yarnpkg.com/typeface-roboto-condensed/-/typeface-roboto-condensed-0.0.54.tgz#4e0d5d24ed95e1e2efa7fcf55b8a9ceaa5bd2be7"
typeface-roboto@^0.0.54:
version "0.0.54"
resolved "https://registry.yarnpkg.com/typeface-roboto/-/typeface-roboto-0.0.54.tgz#8f02c9a18d1cfa7f49381a6ff0d21ff061f38ad2"
ua-parser-js@^0.7.18: ua-parser-js@^0.7.18:
version "0.7.18" version "0.7.18"