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} {this.props.children}
<SectionIntro <SectionIntro
header 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} 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 this.props.sectionClasses
}`} }`}
textClasses="font-medium opacity-80" textClasses="text-xl opacity-80"
headline={this.props.headline} headline={this.props.headline}
text={this.props.text} text={this.props.text}
/> />

8
src/components/SectionIntro.js
View File

@@ -11,7 +11,7 @@ const IntroDefault = ({ ...props }) => (
className={` className={`
${ ${
props.light ? headlineDark : headlineLight 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} {props.intro}
</h3> </h3>
@@ -19,7 +19,7 @@ const IntroDefault = ({ ...props }) => (
{props.headline && ( {props.headline && (
<h2 <h2
className={`${props.light ? headlineDark : ''} ${props.h2Classes} className={`${props.light ? headlineDark : ''} ${props.h2Classes}
text-black py-4`} text-black py-1`}
> >
{props.headline} {props.headline}
</h2> </h2>
@@ -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 text-lg leading-normal ${props.textClasses}`} } font-light text-lg leading-smaller lg:leading-normal ${
props.textClasses
}`}
> >
{props.text} {props.text}
</p> </p>

80
src/pages/about.js
View File

@@ -22,15 +22,13 @@ import Nedim from '../images/developer-nedim.svg'
const AboutPage = () => ( const AboutPage = () => (
<PageTransition> <PageTransition>
<Fade top> <PageIntro
<PageIntro tiltImage
tiltImage 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 opacity-100 lg:opacity-70 hover:opacity-100 -mb-12" />
/>
</Fade>
<section className="container mx-auto p-4 md:p-0 my-20"> <section className="container mx-auto p-4 md:p-0 my-20">
<Fade> <Fade>
@@ -63,40 +61,38 @@ const AboutPage = () => (
textClasses="text-center" textClasses="text-center"
/> />
</Fade> </Fade>
<Fade> <div className="container mx-auto w-full md:flex md:flex-wrap items-stretch w-full">
<div className="container mx-auto w-full md:flex md:flex-wrap items-stretch w-full"> <div className="md:w-1/3 p-2">
<div className="md:w-1/3 p-2"> <Card team teamMember={Moris} title="Moris Pasic" />
<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> </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> </section>
</PageTransition> </PageTransition>
) )

18
src/pages/contact.js
View File

@@ -13,16 +13,14 @@ import PageTransition from 'gatsby-plugin-page-transitions'
const ContactPage = () => ( const ContactPage = () => (
<PageTransition> <PageTransition>
<Fade top> <PageIntro
<PageIntro tiltImage
tiltImage headline="Let's connect"
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."
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 opacity-100 lg:opacity-70 hover:opacity-100" />
/>
</Fade>
<section className="container mx-auto my-12 p-4"> <section className="container mx-auto my-12 p-4">
<div className="md:flex"> <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 }) => ( const IndexPage = ({ ...props }) => (
<PageTransition> <PageTransition>
<Fade top> <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 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}
image={ImgIntro} imgClasses="-mb-20 p-2 md:p-8"
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">
<h2 className="px-4 text-2xl text-black md:text-4xl xl:text-5xl pt-1"> We{' '}
We{' '} <Typed
<Typed strings={['imagine', 'design', 'develop', 'maintain']}
strings={['imagine', 'design', 'develop', 'maintain']} typeSpeed={100}
typeSpeed={100} backSpeed={50}
backSpeed={50} backDelay={3000}
backDelay={3000} loop
loop />
/> great<br />digital experiences
great<br />digital experiences </h2>
</h2> </PageIntro>
</PageIntro>
</Fade>
<main> <main>
<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">

20
src/pages/services.js
View File

@@ -16,17 +16,15 @@ import PageTransition from 'gatsby-plugin-page-transitions'
const ServicesPage = () => ( const ServicesPage = () => (
<PageTransition> <PageTransition>
<Fade top> <PageIntro
<PageIntro tiltImage
tiltImage straight
straight buttonClasses="text-white font-normal shadow hover:shadow-md rounded-full mt-4 font-light bg-teal hover:bg-teal-dark mb-20"
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"
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 opacity-100 lg:opacity-70 hover:opacity-100" />
/>
</Fade>
<section className="px-4 py-16"> <section className="px-4 py-16">
<Fade> <Fade>
<div className="container mx-auto"> <div className="container mx-auto">

6
src/styles/general.css
View File

@@ -188,3 +188,9 @@ a {
.blog-post p { .blog-post p {
margin: 1.5rem 0; 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: { screens: {
xsm: '370px',
sm: '576px', sm: '576px',
md: '768px', md: '768px',
lg: '992px', lg: '992px',
@@ -314,6 +315,8 @@ module.exports = {
leading: { leading: {
none: 1, none: 1,
tight: 1.25, tight: 1.25,
smaller: 1.5,
mid: 1.6,
normal: 1.77, normal: 1.77,
loose: 1.84, loose: 1.84,
looser: 1.9, looser: 1.9,