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

Add typewriter library, restructure and design

Browse Source
This commit is contained in:
Moris Zen
2018-08-24 00:08:54 +02:00
parent 2ba9fe23fd
commit bd3d3724da
19 changed files with 482 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/pages/about.js
View File

@@ -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 {
<div>
<PageIntro
headline="Founded by developers"
text="Saburly was born in 2017 by experienced developers. We know the challenges and pitfalls when creating modern software. Focused on creating solutions that make valuable impact"
text="...We know the challenges and pitfalls when creating modern software. ...Focused on creating solutions that make valuable impact"
image={IntroImage}
imgClasses="border-white border-8 rounded postImgContainer -mb-12"
/>
<section className="container mx-auto my-12 p-4">
<SectionIntro
headline="Meaning of Saburly"
text="Patience = Our goal is long-term engagement."
/>
<div className="md:flex justify-center items-center">
<img
src={MeaningSaburly}
className="hidden lg:block max-h-xs"
alt="User Experience Design Agency"
/>
<SectionIntro
headline="Meaning of Saburly"
text="...Patience. ...Our goal is long-term engagement."
/>
</div>
</section>
<section className="container mx-auto my-12 p-4">
<SectionIntro
headline="The Team"
text="We are a small company with a personal touch that knows our stuff. Our people have T-shaped profiles which means that they combine a deep specialism with a broad range of knowledge and skills."
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."
/>
</section>
</div>

4
src/pages/contact.js
View File

@@ -21,7 +21,7 @@ const ContactPage = () => (
<section className="container mx-auto my-12 p-4">
<div className="md:flex">
<div className="p-2 text-center">
<div className="rounded overflow-hidden shadow">
<div className="rounded overflow-hidden border-bottom-saburly">
<img className="w-full" src={Stockholm} alt="Stockholm City" />
<div className="px-6 py-4">
<div className="uppercase font-medium text-xl mb-6">
@@ -62,7 +62,7 @@ const ContactPage = () => (
</div>
</div>
<div className="p-2 text-center">
<div className="rounded overflow-hidden shadow">
<div className="rounded overflow-hidden border-bottom-saburly">
<img className="w-full" src={Sarajevo} alt="Sarajevo City" />
<div className="px-6 py-4">
<div className="uppercase font-medium text-xl mb-6">

28
src/pages/index.js
View File

@@ -23,16 +23,22 @@ import LogoCoor from '../images/logo-coor-color.svg'
const IndexPage = ({ ...props }) => (
<div>
<PageIntro
button
buttonText="Let's Connect"
url="/contact"
buttonClasses="text-white font-normal shadow hover:shadow-md rounded-full mt-4 font-light bg-teal hover:bg-teal-dark mb-20"
headline="We build great software"
text="We're a team of experienced, creative and passionate engineers. Our mission is to make you stand out and gain competitive advantages with the help of modern technologies."
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."
image={ImgIntro}
imgClasses="-mb-20 md:-mt-12"
/>
<Typed strings={['Here you can find anything']} typeSpeed={40} />
imgClasses="-mb-20 lg:-mt-12"
>
<h2 className="text-black pt-1 pb-2">
We{' '}
<Typed
strings={['discover', 'code', 'design', 'maintain']}
typeSpeed={100}
backSpeed={50}
backDelay={3000}
loop
/>
great digital experiences
</h2>
</PageIntro>
<main>
<section className="container mx-auto max-w-lg text-center my-12 p-4">
@@ -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 }) => (
<section className="container mx-auto max-w-lg text-center p-4 my-12">
<SectionIntro
headline="With ambitious projects comes great responsibility"
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"
/>
<div className="p-4 md:flex items-center max-w-full justify-center">

62
src/pages/services.js
View File

@@ -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"
/>
<section className="px-4 py-16">
<div className="container mx-auto">
@@ -44,10 +45,8 @@ const ServicesPage = () => (
/>
<div className="my-4">
<h3 className="font-normal text-black">
Conceptualization & Branding
</h3>
<p className="font-light leading-normal text-black-light">
<h3 className="text-black my-1">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
to solve with the project. After collecting and analyzing data,
@@ -55,8 +54,8 @@ const ServicesPage = () => (
</p>
</div>
<div className="my-4">
<h3 className="font-normal text-black">UX & UI Design</h3>
<p className="font-light leading-normal text-black-light">
<h3 className="text-black my-1">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
Wireframes and Prototypes to polished slick end-products, we
@@ -74,50 +73,53 @@ const ServicesPage = () => (
<section className="bg-saburly relative bg-saburly-lighter px-4 py-16">
<div className="container mx-auto">
<div className="lg:flex">
<img
src={FullstackDev}
className="w-full mx-auto text-center content-center align-center p-8"
alt="Fullstack Web Development Agency"
/>
<div>
<SectionIntro
headline="Full-stack software development"
text="From infrastructure to AI, we develop data-driven Full-Stack applications for both custom software and third party solutions."
/>
<img
src={WebdevServices}
className="lg:hidden w-full mx-auto text-center content-center align-center p-8"
alt="Fullstack Web Development Agency"
/>
<div className="my-4">
<h3 className="font-normal text-black">Web development</h3>
<p className="font-light leading-normal text-black-light">
<h3 className="my-1 text-black">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
are up to speed with cutting edge trends.
</p>
</div>
<div className="my-4">
<h3 className="font-normal text-black">Mobile & desktop apps</h3>
<p className="font-light leading-normal text-black-light">
<h3 className="my-1 text-black">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
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.
</p>
</div>
<div className="my-4">
<h3 className="font-normal text-black">DevOps</h3>
<p className="font-light leading-normal text-black-light">
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.
<h3 className="my-1 text-black">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
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.
</p>
</div>
</div>
<img
src={WebdevServices}
className="hidden lg:block w-full mx-auto text-center content-center align-center p-8"
alt="Fullstack Web Development Agency"
/>
</div>
<div className="p-8 my-4 bg-white border-bottom-saburly">
<h3 className="font-normal text-black">Emerging Technologies</h3>
<p className="font-light text-black-light leading-normal">
<h3 className="my-1 text-black">Emerging Technologies</h3>
<p className="font-light leading-normal text-black-light text-lg">
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