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

Adding page transitions, image tilting option and design tweaks

Browse Source
This commit is contained in:
Moris Zen
2018-08-30 11:07:16 +02:00
parent 7b76680ec4
commit b925c2d7ea
10 changed files with 163 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
gatsby-config.js
View File

@@ -4,6 +4,7 @@ module.exports = {
},
plugins: [
'gatsby-plugin-netlify',
'gatsby-plugin-page-transitions',
'gatsby-plugin-react-helmet',
{
resolve: 'gatsby-source-wordpress',

2
package.json
View File

@@ -4,10 +4,12 @@
"version": "0.1.0",
"author": "Saburly <info@saburly.com>",
"dependencies": {
"aos": "^2.3.3",
"gatsby": "^1.9.247",
"gatsby-image": "^1.0.54",
"gatsby-link": "^1.6.40",
"gatsby-plugin-netlify": "^1.0.21",
"gatsby-plugin-page-transitions": "^1.0.7",
"gatsby-plugin-react-helmet": "^2.0.10",
"gatsby-plugin-sharp": "^1.6.48",
"gatsby-remark-prismjs": "^2.0.5",

109
src/components/PageIntro.js
View File

@@ -1,51 +1,72 @@
import React from 'react'
import React, { Component } from 'react'
import SectionIntro from './SectionIntro'
import Button from './Button'
const PageIntro = ({ ...props }) => (
<section className="saburly-intro bg-saburly-light relative">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400.8 96.4">
<title>bg-saburly-white</title>
<path
d="M417.7,96.4C655.2,93.3,743.6,0,983.1,0h417.7V96.4H417.7Z"
transform="translate(0 0)"
style={{ fill: '#fff' }}
/>
</svg>
<div
className={`relative container mx-auto items-center flex lg:flex-row flex-col ${
props.reversed ? 'flex-col-reverse' : ''
} p-4`}
>
<div className="text-center lg:text-left">
{props.children}
<SectionIntro
header
intro={props.intro}
classes={`lg:text-left lg:max-w-sm content-center ${
props.sectionClasses
}`}
headline={props.headline}
text={props.text}
/>
{props.button && (
<Button
text={props.buttonText}
url={props.url}
classes={props.buttonClasses}
class PageIntro extends Component {
componentDidMount() {
let tiltjs = require('vanilla-tilt')
if (this.props.tiltImage) {
tiltjs.init(document.querySelector('.tiltImage'), {
max: 20,
speed: 400,
easing: 'cubic-bezier(.03,.98,.52,.99)',
glare: true,
'max-glare': 0.8,
'glare-prerender': false,
})
}
}
render() {
return (
<section className="saburly-intro bg-saburly-light relative">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400.8 96.4">
<title>bg-saburly-white</title>
<path
d="M417.7,96.4C655.2,93.3,743.6,0,983.1,0h417.7V96.4H417.7Z"
transform="translate(0 0)"
style={{ fill: '#fff' }}
/>
)}
</div>
{props.image && (
<img
src={props.image}
className={`${props.imgClasses} md:max-h-sm md:max-w-md mx-auto`}
alt="Software Development Agency"
/>
)}
</div>
</section>
)
</svg>
<div
className={`relative container mx-auto items-center flex lg:flex-row flex-col ${
this.props.reversed ? 'flex-col-reverse' : ''
} p-4`}
>
<div className="text-center lg:text-left">
{this.props.children}
<SectionIntro
header
intro={this.props.intro}
classes={`lg:text-left lg:max-w-sm content-center ${
this.props.sectionClasses
}`}
headline={this.props.headline}
text={this.props.text}
/>
{this.props.button && (
<Button
text={this.props.buttonText}
url={this.props.url}
classes={this.props.buttonClasses}
/>
)}
</div>
{this.props.image && (
<div>
<img
src={this.props.image}
className={`${
this.props.imgClasses
} tiltImage md:max-h-sm md:max-w-md mx-auto`}
alt="Software Development Agency"
/>
</div>
)}
</div>
</section>
)
}
}
export default PageIntro

76
src/pages/about.js
View File

@@ -6,53 +6,39 @@ import SectionIntro from '../components/SectionIntro'
import IntroImage from '../images/web-development-consultancy.jpg'
import MeaningSaburly from '../images/coding-practice.svg'
class AboutPage extends Component {
componentDidMount() {
let tiltjs = require('vanilla-tilt')
tiltjs.init(document.querySelector('.tiltImage'), {
max: 35,
speed: 400,
scale: 1.1,
glare: true,
'max-glare': 0.8,
'glare-prerender': false,
easing: 'cubic-bezier(.03,.98,.52,.99)',
})
}
import PageTransition from 'gatsby-plugin-page-transitions'
render() {
return (
<div>
<PageIntro
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."
image={IntroImage}
imgClasses="border-white border-8 rounded tiltImage -mb-12"
const AboutPage = () => (
<PageTransition>
<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."
image={IntroImage}
imgClasses="border-white border-8 rounded -mb-12"
/>
<section className="container mx-auto my-12 p-4">
<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."
/>
<section className="container mx-auto my-12 p-4">
<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 team consists of handpicked expert software developers, designers and system architects - all highly motivated to help you succeed."
/>
</section>
</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 team consists of handpicked expert software developers, designers and system architects - all highly motivated to help you succeed."
/>
</section>
</PageTransition>
)
export default AboutPage

6
src/pages/contact.js
View File

@@ -8,8 +8,10 @@ import Sarajevo from '../images/sarajevo-web-agency.jpg'
import Stockholm from '../images/stockholm-web-agency.jpg'
import FormImage from '../images/contact-web-consultancy.svg'
import PageTransition from 'gatsby-plugin-page-transitions'
const ContactPage = () => (
<div>
<PageTransition>
<PageIntro
headline="Let's make things happen"
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."
@@ -155,7 +157,7 @@ const ContactPage = () => (
className="text-center block m-x-auto md:max-w-lg mx-auto"
/>
</section>
</div>
</PageTransition>
)
export default ContactPage

6
src/pages/index.js
View File

@@ -20,8 +20,10 @@ import LogoRicoh from '../images/logo-ricoh-color.svg'
import LogoKinnarps from '../images/logo-kinnarps-color.svg'
import LogoCoor from '../images/logo-coor-color.svg'
import PageTransition from 'gatsby-plugin-page-transitions'
const IndexPage = ({ ...props }) => (
<div>
<PageTransition>
<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}
@@ -138,7 +140,7 @@ const IndexPage = ({ ...props }) => (
/>
</section>
</main>
</div>
</PageTransition>
)
export const query = graphql`

7
src/pages/services.js
View File

@@ -11,9 +11,12 @@ import WebdevServices from '../images/custom-software-development.svg'
import UXdesign from '../images/user-experience-design-services.svg'
import HowWeWork from '../images/flexible-workflow.svg'
import PageTransition from 'gatsby-plugin-page-transitions'
const ServicesPage = () => (
<div>
<PageTransition>
<PageIntro
tiltImage
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."
@@ -150,7 +153,7 @@ const ServicesPage = () => (
</div>
<WorkStyle />
</div>
</div>
</PageTransition>
)
export default ServicesPage

6
src/templates/blog.js
View File

@@ -4,11 +4,13 @@ import Link from 'gatsby-link'
import PageIntro from '../components/PageIntro'
import Card from '../components/Card'
import PageTransition from 'gatsby-plugin-page-transitions'
class Blog extends Component {
render() {
const data = this.props.data
return (
<main>
<PageTransition>
<PageIntro
headline="Bugs keep us busy"
text="but occasionally we have fun & publish"
@@ -31,7 +33,7 @@ class Blog extends Component {
</div>
))}
</div>
</main>
</PageTransition>
)
}
}

6
src/templates/post-default.js
View File

@@ -4,6 +4,8 @@ import Prism from 'prismjs'
require('prismjs/themes/prism-solarizedlight.css')
import PageTransition from 'gatsby-plugin-page-transitions'
class PostDefault extends Component {
componentDidMount() {
Prism.highlightAll()
@@ -11,7 +13,7 @@ class PostDefault extends Component {
render() {
const { data } = this.props
return (
<div>
<PageTransition>
<Helmet
title={`${data.wordpressPost.title} - Saburly.com`}
meta={[
@@ -32,7 +34,7 @@ class PostDefault extends Component {
}}
/>
</main>
</div>
</PageTransition>
)
}
}

45
yarn.lock
View File

@@ -260,6 +260,14 @@ anymatch@^1.3.0:
micromatch "^2.1.5"
normalize-path "^2.0.0"
aos@^2.3.3:
version "2.3.3"
resolved "https://registry.yarnpkg.com/aos/-/aos-2.3.3.tgz#bddbe68fc73f7e90ff95f5d0f3810fee5acacbe2"
dependencies:
classlist-polyfill "^1.0.3"
lodash.debounce "^4.0.6"
lodash.throttle "^4.0.1"
aproba@^1.0.3:
version "1.2.0"
resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
@@ -1950,6 +1958,10 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
classlist-polyfill@^1.0.3:
version "1.2.0"
resolved "https://registry.yarnpkg.com/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz#935bc2dfd9458a876b279617514638bcaa964a2e"
cli-boxes@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
@@ -2828,7 +2840,7 @@ dom-converter@~0.1:
dependencies:
utila "~0.3"
dom-helpers@^3.2.1:
dom-helpers@^3.2.1, dom-helpers@^3.3.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
@@ -3871,6 +3883,14 @@ gatsby-plugin-page-creator@^1.0.1:
parse-filepath "^1.0.1"
slash "^1.0.0"
gatsby-plugin-page-transitions@^1.0.7:
version "1.0.7"
resolved "https://registry.yarnpkg.com/gatsby-plugin-page-transitions/-/gatsby-plugin-page-transitions-1.0.7.tgz#e6c5a858d3c59fbccfefb19d0bd0834c36535d48"
dependencies:
history "^4.7.2"
prop-types "^15.6.2"
react-transition-group "^2.4.0"
gatsby-plugin-react-helmet@^2.0.10:
version "2.0.11"
resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-2.0.11.tgz#a2db81755f5b41d54e0e535ca1d9a008d3ccff0a"
@@ -5778,6 +5798,10 @@ lodash.clonedeep@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
lodash.debounce@^4.0.6:
version "4.0.8"
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
lodash.defaults@^4.0.1:
version "4.2.0"
resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
@@ -5926,6 +5950,10 @@ lodash.templatesettings@^4.0.0:
dependencies:
lodash._reinterpolate "~3.0.0"
lodash.throttle@^4.0.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
lodash.toarray@^4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
@@ -7833,7 +7861,7 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"
prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1:
prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
version "15.6.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
dependencies:
@@ -8073,6 +8101,10 @@ react-hot-loader@^3.0.0-beta.6:
redbox-react "^1.3.6"
source-map "^0.6.1"
react-lifecycles-compat@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
react-proxy@^3.0.0-alpha.0:
version "3.0.0-alpha.1"
resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-3.0.0-alpha.1.tgz#4400426bcfa80caa6724c7755695315209fa4b07"
@@ -8117,6 +8149,15 @@ react-side-effect@^1.1.0:
exenv "^1.2.1"
shallowequal "^1.0.1"
react-transition-group@^2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.4.0.tgz#1d9391fabfd82e016f26fabd1eec329dbd922b5a"
dependencies:
dom-helpers "^3.3.1"
loose-envify "^1.3.1"
prop-types "^15.6.2"
react-lifecycles-compat "^3.0.4"
react-typed@^1.0.9:
version "1.0.9"
resolved "https://registry.yarnpkg.com/react-typed/-/react-typed-1.0.9.tgz#ad06dc0c7283b1869b9f0e012244ab3eb1a03be1"