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

Design changes, add portraits, about page changes, tweaks

Browse Source
This commit is contained in:
Moris Zen
2018-09-05 00:07:15 +02:00
parent b1236f42d3
commit cdd5c84e08
26 changed files with 473 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/pages/about.js
View File

@@ -4,11 +4,22 @@ import SectionIntro from '../components/SectionIntro'
import PageTransition from 'gatsby-plugin-page-transitions'
import Fade from 'react-reveal/Fade'
import Card from '../components/Card'
import IntroImage from '../images/web-development-consultants.jpg'
import MeaningSaburly from '../images/coding-tutorials-patience.svg'
import Nina from '../images/ux-developer-nina.jpg'
import Nina from '../images/ux-designer-nina.jpg'
import Edin from '../images/coo-edin.jpg'
import Moris from '../images/ceo-moris.jpg'
import Senad from '../images/cto-senad.jpg'
import Bilal from '../images/developer-bilal.jpg'
import Mediha from '../images/developer-mediha.jpg'
import Almira from '../images/developer-almira.jpg'
import Mirna from '../images/developer-mirna.jpg'
import Mickey from '../images/developer-mickey.svg'
import Nedim from '../images/developer-nedim.svg'
import Emil from '../images/manager-emil.svg'
const AboutPage = () => (
<PageTransition>
@@ -16,25 +27,29 @@ 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 mentoring the best talents in the industry in order to create digital experiences that make valuable impact."
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 border-8 rounded -mb-12"
/>
</Fade>
<section className="container mx-auto my-12 p-4">
<Fade left>
<Fade>
<div className="md:flex justify-center items-center">
<img
src={MeaningSaburly}
className="hidden lg:block max-h-xs"
alt="User Experience Design Agency"
/>
<SectionIntro
h2Classes="text-4xl"
headline="Meaning"
text="...Patience. ...Our goal is long-term engagement."
/>
<div>
<p className="font-light text-grey-darkest text-center">
Saburly comes from an old Bosnian saying and is about
</p>
<h5 className="mt-2 text-center text-4xl italic font-light text-black">
"Achieving success through patience, strategic planning and
perseverance"
</h5>
</div>
</div>
</Fade>
</section>
@@ -42,37 +57,92 @@ const AboutPage = () => (
<section className="container mx-auto my-12 p-4">
<Fade>
<SectionIntro
h2Classes="text-5xl"
classes="max-w-lg mx-auto"
h2Classes="text-5xl text-center"
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."
text="We are a small company with a personal touch that knows our stuff. Our team consists of expert developers and designers, all highly motivated to help you succeed."
textClasses="text-center"
/>
<div className="w-1/2 lg:flex">
<div
className="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden"
style={{
backgroundImage: `url(${Nina})`,
}}
title="Woman holding a mug"
/>
<div className="border-r border-b border-l border-grey-light lg:border-l-0 lg:border-t lg:border-grey-light bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
<div className="mb-8">
<div className="text-black font-bold text-xl">Nina</div>
<p className="text-sm text-grey-dark flex items-center">
UX & UI Designer
</p>
<p className="text-grey-darker text-base py-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatibus quia, nulla! Maiores et perferendis eaque,
exercitationem praesentium nihil.
</p>
</div>
<div className="flex items-center">
<div className="text-sm">
<p className="text-black leading-none">Favorite Technologies</p>
<p className="text-grey-dark">Sketch, Adobe</p>
</div>
</div>
</Fade>
<Fade>
<div className="container mx-auto p-4 w-full md:flex md:flex-wrap items-stretch w-full">
<div className="md:w-1/3 p-2">
<Card team teamMember={Moris} title="Moris Pasic" subtitle="CEO" />
</div>
<div className="md:w-1/3 p-2">
<Card team teamMember={Senad} title="Senad Uka" subtitle="CEO" />
</div>
<div className="md:w-1/3 p-2">
<Card
team
teamMember={Edin}
title="Edin Dazdarevic"
subtitle="CEO"
/>
</div>
<div className="md:w-1/3 p-2">
<Card
team
teamMember={Mediha}
title="Edin Dazdarevic"
subtitle="CEO"
/>
</div>
<div className="md:w-1/3 p-2">
<Card
team
teamMember={Mirna}
title="Edin Dazdarevic"
subtitle="CEO"
/>
</div>
<div className="md:w-1/3 p-2">
<Card
team
teamMember={Nina}
title="Edin Dazdarevic"
subtitle="CEO"
/>
</div>
<div className="md:w-1/3 p-2">
<Card
team
teamMember={Bilal}
title="Edin Dazdarevic"
subtitle="CEO"
/>
</div>
<div className="md:w-1/3 p-2">
<Card
team
teamMember={Almira}
title="Edin Dazdarevic"
subtitle="CEO"
/>
</div>
<div className="md:w-1/3 p-2">
<Card
team
teamMember={Mickey}
title="Edin Dazdarevic"
subtitle="CEO"
/>
</div>
<div className="md:w-1/2 p-2">
<Card
team
teamMember={Nedim}
title="Edin Dazdarevic"
subtitle="CEO"
/>
</div>
<div className="md:w-1/2 p-2">
<Card
team
teamMember={Emil}
title="Edin Dazdarevic"
subtitle="CEO"
/>
</div>
</div>
</Fade>