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

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