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

Styling and fixing about us bug

Browse Source
This commit is contained in:
Moris Zen
2018-09-06 20:58:11 +02:00
parent a0d97b6a36
commit 3153a129fc
9 changed files with 5290 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/PageIntro.js
View File

@@ -37,12 +37,12 @@ class PageIntro extends Component {
{this.props.children}
<SectionIntro
header
h2Classes="text-2xl md:text-4xl lg:text-5xl"
h2Classes="text-2xl md:text-4xl py-2 lg:text-5xl"
intro={this.props.intro}
classes={`p-4 lg:text-left lg:max-w-sm content-center ${
classes={`md:p-4 lg:text-left lg:max-w-sm content-center ${
this.props.sectionClasses
}`}
textClasses="font-medium opacity-80"
textClasses="text-xl opacity-80"
headline={this.props.headline}
text={this.props.text}
/>

8
src/components/SectionIntro.js
View File

@@ -11,7 +11,7 @@ const IntroDefault = ({ ...props }) => (
className={`
${
props.light ? headlineDark : headlineLight
} opacity-50 text-sm font-light text-black uppercase py-2 pb-1`}
} opacity-50 text-sm font-light text-black uppercase py-1`}
>
{props.intro}
</h3>
@@ -19,7 +19,7 @@ const IntroDefault = ({ ...props }) => (
{props.headline && (
<h2
className={`${props.light ? headlineDark : ''} ${props.h2Classes}
text-black py-4`}
text-black py-1`}
>
{props.headline}
</h2>
@@ -28,7 +28,9 @@ const IntroDefault = ({ ...props }) => (
<p
className={`${props.light ? headlineDark : ''} ${
props.header ? 'saburly-text-intro' : 'text-black-light'
} font-light text-lg leading-normal ${props.textClasses}`}
} font-light text-lg leading-smaller lg:leading-normal ${
props.textClasses
}`}
>
{props.text}
</p>

80
src/pages/about.js
View File

@@ -22,15 +22,13 @@ import Nedim from '../images/developer-nedim.svg'
const AboutPage = () => (
<PageTransition>
<Fade top>
<PageIntro
tiltImage
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."
image={IntroImage}
imgClasses="border-white rounded-lg opacity-100 lg:opacity-70 hover:opacity-100 -mb-12"
/>
</Fade>
<PageIntro
tiltImage
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."
image={IntroImage}
imgClasses="border-white rounded-lg opacity-100 lg:opacity-70 hover:opacity-100 -mb-12"
/>
<section className="container mx-auto p-4 md:p-0 my-20">
<Fade>
@@ -63,40 +61,38 @@ const AboutPage = () => (
textClasses="text-center"
/>
</Fade>
<Fade>
<div className="container mx-auto 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" />
</div>
<div className="md:w-1/3 p-2">
<Card team teamMember={Senad} title="Senad Uka" />
</div>
<div className="md:w-1/3 p-2">
<Card team teamMember={Edin} title="Edin Dazdarevic" />
</div>
<div className="md:w-1/3 p-2">
<Card team teamMember={Mediha} title="Mediha Zukic" />
</div>
<div className="md:w-1/3 p-2">
<Card team teamMember={Mirna} title="Mirna Milic" />
</div>
<div className="md:w-1/3 p-2">
<Card team teamMember={Nina} title="Nina Juresic" />
</div>
<div className="md:w-1/3 p-2">
<Card team teamMember={Bilal} title="Bilal Catic" />
</div>
<div className="md:w-1/3 p-2">
<Card team teamMember={Almira} title="Almira Krdzic" />
</div>
<div className="md:w-1/3 p-2">
<Card team teamMember={Mickey} title="Miralem Halilovic" />
</div>
<div className="md:w-1/3 p-2">
<Card team teamMember={Nedim} title="Nedim Uka" />
</div>
<div className="container mx-auto 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" />
</div>
</Fade>
<div className="md:w-1/3 p-2">
<Card team teamMember={Senad} title="Senad Uka" />
</div>
<div className="md:w-1/3 p-2">
<Card team teamMember={Edin} title="Edin Dazdarevic" />
</div>
<div className="md:w-1/3 p-2">
<Card team teamMember={Mediha} title="Mediha Zukic" />
</div>
<div className="md:w-1/3 p-2">
<Card team teamMember={Mirna} title="Mirna Milic" />
</div>
<div className="md:w-1/3 p-2">
<Card team teamMember={Nina} title="Nina Juresic" />
</div>
<div className="md:w-1/3 p-2">
<Card team teamMember={Bilal} title="Bilal Catic" />
</div>
<div className="md:w-1/3 p-2">
<Card team teamMember={Almira} title="Almira Krdzic" />
</div>
<div className="md:w-1/3 p-2">
<Card team teamMember={Mickey} title="Miralem Halilovic" />
</div>
<div className="md:w-1/3 p-2">
<Card team teamMember={Nedim} title="Nedim Uka" />
</div>
</div>
</section>
</PageTransition>
)

18
src/pages/contact.js
View File

@@ -13,16 +13,14 @@ import PageTransition from 'gatsby-plugin-page-transitions'
const ContactPage = () => (
<PageTransition>
<Fade top>
<PageIntro
tiltImage
headline="Let's connect"
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"
image={ContactImage}
imgClasses="-mb-12 border-white rounded-lg opacity-100 lg:opacity-70 hover:opacity-100"
/>
</Fade>
<PageIntro
tiltImage
headline="Let's connect"
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"
image={ContactImage}
imgClasses="-mb-12 border-white rounded-lg opacity-100 lg:opacity-70 hover:opacity-100"
/>
<section className="container mx-auto my-12 p-4">
<div className="md:flex">

36
src/pages/index.js
View File

@@ -29,25 +29,23 @@ import PageTransition from 'gatsby-plugin-page-transitions'
const IndexPage = ({ ...props }) => (
<PageTransition>
<Fade top>
<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."
image={ImgIntro}
imgClasses="-mb-20 p-2 md:p-8"
>
<h2 className="px-4 text-2xl text-black md:text-4xl xl:text-5xl pt-1">
We{' '}
<Typed
strings={['imagine', 'design', 'develop', 'maintain']}
typeSpeed={100}
backSpeed={50}
backDelay={3000}
loop
/>
great<br />digital experiences
</h2>
</PageIntro>
</Fade>
<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."
image={ImgIntro}
imgClasses="-mb-20 p-2 md:p-8"
>
<h2 className="py-4 text-2xl xsm:text-3xl text-black md:text-4xl xl:text-5xl">
We{' '}
<Typed
strings={['imagine', 'design', 'develop', 'maintain']}
typeSpeed={100}
backSpeed={50}
backDelay={3000}
loop
/>
great<br />digital experiences
</h2>
</PageIntro>
<main>
<section className="container mx-auto max-w-lg text-center mt-16 p-4">

20
src/pages/services.js
View File

@@ -16,17 +16,15 @@ import PageTransition from 'gatsby-plugin-page-transitions'
const ServicesPage = () => (
<PageTransition>
<Fade top>
<PageIntro
tiltImage
straight
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={IntroImage}
imgClasses="-mb-12 border-white rounded-lg opacity-100 lg:opacity-70 hover:opacity-100"
/>
</Fade>
<PageIntro
tiltImage
straight
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={IntroImage}
imgClasses="-mb-12 border-white rounded-lg opacity-100 lg:opacity-70 hover:opacity-100"
/>
<section className="px-4 py-16">
<Fade>
<div className="container mx-auto">

6
src/styles/general.css
View File

@@ -188,3 +188,9 @@ a {
.blog-post p {
margin: 1.5rem 0;
}
@media (max-width: 575px) {
.container {
max-width: 95%;
}
}

5201
src/styles/index.css
View File

File diff suppressed because it is too large Load Diff

3
tailwind.config.js
View File

@@ -165,6 +165,7 @@ module.exports = {
*/
screens: {
xsm: '370px',
sm: '576px',
md: '768px',
lg: '992px',
@@ -314,6 +315,8 @@ module.exports = {
leading: {
none: 1,
tight: 1.25,
smaller: 1.5,
mid: 1.6,
normal: 1.77,
loose: 1.84,
looser: 1.9,