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

Changes in font, illustrations and various design tweaks

Browse Source
This commit is contained in:
Moris Zen
2018-08-31 02:29:46 +02:00
parent d6f21c567e
commit d9aa8c404b
12 changed files with 55 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Card.js
View File

@@ -15,7 +15,7 @@ const Card = ({ ...props }) => (
<img className="w-full" src={ImgSprint} alt="Sprint Work" />
)}
<div className="px-6 py-4">
<h3 className="text-black font-bold text-xl mb-2">{props.title}</h3>
<h3 className="text-black font-bold text-3xl mb-2">{props.title}</h3>
<p
className="text-black-light text-base"
dangerouslySetInnerHTML={{ __html: props.excerpt }}

2
src/components/InfoBox.js
View File

@@ -3,7 +3,7 @@ import Link from 'gatsby-link'
const InfoBox = ({ ...props }) => (
<div className={`${props.classes}`}>
<h2 className="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 text-lg font-light">
{props.text}
</p>

1
src/components/PageIntro.js
View File

@@ -37,6 +37,7 @@ class PageIntro extends Component {
{this.props.children}
<SectionIntro
header
h2Classes="text-4xl md:text-5xl"
intro={this.props.intro}
classes={`lg:text-left lg:max-w-sm content-center ${
this.props.sectionClasses

2
src/components/SectionIntro.js
View File

@@ -18,7 +18,7 @@ const IntroDefault = ({ ...props }) => (
)}
{props.headline && (
<h2
className={`${props.light ? headlineDark : ''}
className={`${props.light ? headlineDark : ''} ${props.h2Classes}
text-black pt-1 pb-2`}
>
{props.headline}

1
src/components/Service.js
View File

@@ -13,6 +13,7 @@ const Service = ({ ...props }) => (
alt={`${props.title} agency`}
/>
<InfoBox
h2Classes={props.h2Classes}
classes="p-4 md:max-w-sm"
headline={props.title}
text={props.text}

16
src/components/WorkStyle.js
View File

@@ -2,7 +2,7 @@ import React from 'react'
import SectionIntro from './SectionIntro'
import HQCode from '../images/high-quality-code.svg'
import HQCode from '../images/coder-awards.svg'
import ContDelivery from '../images/continuous-delivery.svg'
import ModernDevops from '../images/modern-devops.svg'
import CodeReviews from '../images/code-reviews.svg'
@@ -16,7 +16,7 @@ const WorkStyle = ({ ...props }) => (
<div className="flex flex-wrap text-black">
<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" />
<h3 className="text-xl my-2">High Quality Code</h3>
<h3 className="text-2xl saburly-color my-2">High Quality Code</h3>
<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
@@ -30,7 +30,7 @@ const WorkStyle = ({ ...props }) => (
className="max-w-10"
alt="High Quality Code"
/>
<h3 className="text-xl my-2">Continuous delivery</h3>
<h3 className="text-2xl saburly-color my-2">Continuous delivery</h3>
<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
@@ -46,7 +46,7 @@ const WorkStyle = ({ ...props }) => (
className="max-w-10"
alt="High Quality Code"
/>
<h3 className="text-xl my-2">Modern DevOps</h3>
<h3 className="text-2xl saburly-color my-2">Modern DevOps</h3>
<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
@@ -57,7 +57,7 @@ const WorkStyle = ({ ...props }) => (
</div>
<div className="w-full md:w-1/2 p-8">
<img src={CodeReviews} className="max-w-10" alt="High Quality Code" />
<h3 className="text-xl my-2">Code Reviews</h3>
<h3 className="text-2xl saburly-color my-2">Code Reviews</h3>
<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
@@ -69,7 +69,7 @@ const WorkStyle = ({ ...props }) => (
<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">
<img src={UXResearch} className="max-w-10" alt="High Quality Code" />
<h3 className="text-xl my-2">UX testing/research</h3>
<h3 className="text-2xl saburly-color my-2">UX testing/research</h3>
<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
@@ -84,7 +84,9 @@ const WorkStyle = ({ ...props }) => (
className="max-w-10"
alt="High Quality Code"
/>
<h3 className="text-xl my-2">Unit & Integration testing</h3>
<h3 className="text-2xl saburly-color my-2">
Unit & Integration testing
</h3>
<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

9
src/images/high-quality-code.svg → src/images/coder-awards.svg
View File

@@ -5,9 +5,8 @@
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#92DEE2;}
.st2{fill:#646EF2;}
.st3{fill:#5763AB;}
.st4{fill:none;}
.st2{fill:#5763AB;}
.st3{fill:none;}
</style>
<title>High_quality_code</title>
<desc>Created with Sketch.</desc>
@@ -59,9 +58,9 @@
S86.2,92.1,80.4,92z"/>
</g>
</g>
<circle id="Oval-3" class="st3" cx="47" cy="29" r="28"/>
<circle id="Oval-3" class="st2" cx="47" cy="29" r="28"/>
<g id="ic_code" transform="translate(17.000000, 0.000000)">
<polygon id="Bounds" class="st4" points="0,0 58,0 58,58 0,58 "/>
<polygon id="Bounds" class="st3" points="0,0 58,0 58,58 0,58 "/>
<path id="Icon" class="st0" d="M24,38.2L14.7,29l9.3-9.2L21.2,17L9,29l12.2,12L24,38.2L24,38.2z M34,38.2l9.3-9.2L34,19.8
l2.8-2.8L49,29L36.8,41L34,38.2L34,38.2z"/>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

6
src/pages/about.js
View File

@@ -13,7 +13,7 @@ const AboutPage = () => (
<PageIntro
tiltImage
headline="Founded by developers"
text="Saburly was founded in 2017 by experienced software developers that understand what it takes to create modern digital solutions. Our focus is on gathering and guiding the best talents in the industry in order to create digital experiences that make valuable impact."
text="Saburly was founded in 2017 by experienced software developers that understand what it takes to create modern digital solutions. Our focus is on gathering and mentoring the best talents in the industry in order to create digital experiences that make valuable impact."
image={IntroImage}
imgClasses="border-white border-8 rounded -mb-12"
/>
@@ -26,7 +26,8 @@ const AboutPage = () => (
alt="User Experience Design Agency"
/>
<SectionIntro
headline="Meaning of Saburly"
h2Classes="text-4xl"
headline="Meaning"
text="...Patience. ...Our goal is long-term engagement."
/>
</div>
@@ -34,6 +35,7 @@ const AboutPage = () => (
<section className="container mx-auto my-12 p-4">
<SectionIntro
h2Classes="text-5xl"
headline="The Team"
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."
/>

2
src/pages/contact.js
View File

@@ -14,7 +14,7 @@ const ContactPage = () => (
<PageTransition>
<PageIntro
tiltImage
headline="Let's make things happen"
headline="Let's start something great"
text="We are always on a lookout for exciting challenges. Feel free to contact us if you want to start something great or just find out more about what we do."
sectionClasses="lg:mb-8"
image={ContactImage}

18
src/pages/index.js
View File

@@ -31,7 +31,7 @@ const IndexPage = ({ ...props }) => (
image={ImgIntro}
imgClasses="-mb-20 p-2 md:p-8"
>
<h2 className="text-black pt-1 pb-2">
<h2 className="text-black text-4xl xl:text-5xl pt-1 pb-2">
We{' '}
<Typed
strings={['imagine', 'design', 'develop', 'maintain']}
@@ -40,13 +40,14 @@ const IndexPage = ({ ...props }) => (
backDelay={3000}
loop
/>
great experiences
great<br />digital experiences
</h2>
</PageIntro>
<main>
<section className="container mx-auto max-w-lg text-center mt-16 p-4">
<SectionIntro
h2Classes="text-3xl"
headline="Because beautiful code makes our heart pound"
text="We have a deep passion for cutting edge technologies and incredible user experiences. Our experienced engineers deliver custom end-to-end software solutions daily and can even help you with initial analysis, architecture design, testing and deployments."
/>
@@ -54,6 +55,7 @@ const IndexPage = ({ ...props }) => (
<section className="bg-saburly relative">
<Service
h2Classes="text-4xl font-light saburly-color"
img={ImgDesign}
title="User Experience Design"
text="Our approach is simple: focus on how users might use the product in the best way possible. We offer UX and interface design for all screens and devices. The solutions are usually shaped through iterative processes of research, prototyping and testing."
@@ -61,16 +63,18 @@ const IndexPage = ({ ...props }) => (
<Service
reversed
h2Classes="text-4xl font-light saburly-color"
img={ImgFullstack}
title="Full-Stack Web 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."
imgClasses=""
/>
<Service
img={ImgMobile}
h2Classes="text-4xl font-light saburly-color"
imgClasses="max-h-sm"
title="Mobile App Development"
title="Mobile 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."
/>
@@ -87,6 +91,7 @@ const IndexPage = ({ ...props }) => (
<section className="bg-saburly-lighter text-center p-4 my-12">
<div className="my-8 container mx-auto max-w-lg">
<SectionIntro
h2Classes="text-4xl"
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"
/>
@@ -138,7 +143,10 @@ const IndexPage = ({ ...props }) => (
</section>
<section className="text-center p-8 relative">
<SectionIntro headline="Occasionally we have fun & publish" />
<SectionIntro
h2Classes="font-light text-4xl"
headline="But occasionally we have fun & publish"
/>
<div className="container mx-auto w-full md:flex md:flex-wrap items-stretch w-full">
{props.data.allWordpressPost.edges.map(({ node }) => (
<div key={node.id} className="md:w-1/2 p-2">

25
src/pages/services.js
View File

@@ -32,6 +32,7 @@ const ServicesPage = () => (
alt="User Experience Design Agency"
/>
<SectionIntro
h2Classes="text-4xl md:text-5xl saburly-color font-medium"
classes="max-w-lg"
headline="Design services"
text="We offer consistent quality that extends to every section of the application development. Our approach is simple: focus on how users might use the product
@@ -47,7 +48,9 @@ const ServicesPage = () => (
/>
<div className="my-4">
<h3 className="text-black my-1">Conceptualization & Branding</h3>
<h3 className="font-light my-1 text-3xl font-light">
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
@@ -56,7 +59,9 @@ const ServicesPage = () => (
</p>
</div>
<div className="my-4">
<h3 className="text-black my-1">UX & UI Design</h3>
<h3 className="text-black font-light my-1 text-3xl font-light">
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
@@ -77,7 +82,8 @@ const ServicesPage = () => (
<div className="lg:flex">
<div>
<SectionIntro
headline="Full-stack software development"
h2Classes="font-medium saburly-color text-4xl 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."
/>
<img
@@ -86,7 +92,9 @@ const ServicesPage = () => (
alt="Fullstack Web Development Agency"
/>
<div className="my-4">
<h3 className="my-1 text-black">Web development</h3>
<h3 className="my-1 text-black font-light text-3xl">
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
@@ -94,7 +102,9 @@ const ServicesPage = () => (
</p>
</div>
<div className="my-4">
<h3 className="my-1 text-black">Mobile & desktop apps</h3>
<h3 className="my-1 text-black font-light text-3xl">
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
@@ -103,7 +113,7 @@ const ServicesPage = () => (
</p>
</div>
<div className="my-4">
<h3 className="my-1 text-black">DevOps</h3>
<h3 className="my-1 text-black text-3xl font-light">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
@@ -120,7 +130,7 @@ const ServicesPage = () => (
/>
</div>
<div className="p-8 my-4 bg-white border-bottom-saburly">
<h3 className="my-1 text-black">Emerging Technologies</h3>
<h3 className="my-1 text-black text-3xl">Emerging Technologies</h3>
<p className="font-light leading-normal text-black-light text-lg">
We harness a wide array of emerging technologies, such as{' '}
<strong>AR/VR</strong>, <strong>AI technologies</strong>,{' '}
@@ -141,6 +151,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-5xl saburly-color font-light"
headline="Flexible Workflow"
text="We are helping everything from Fortune 500 companies to startups
and tailor our processes based on your scale and needs. We

1
src/styles/general.css
View File

@@ -149,6 +149,7 @@ body {
color: #1f2443;
}
.saburly-color,
h2 span {
color: #5763ab;
}