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

Add revealing effects on components

Browse Source
This commit is contained in:
Moris Zen
2018-09-01 14:14:37 +02:00
parent 204a77fde0
commit 5dc905acab
5 changed files with 433 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -20,6 +20,7 @@
"react-headroom": "^2.2.2",
"react-helmet": "^5.2.0",
"react-responsive-mixin": "^0.4.0",
"react-reveal": "^1.2.2",
"react-typed": "^1.0.9",
"slideout": "^1.0.1",
"tiny-slider": "^2.8.5",

9
src/pages/contact.js
View File

@@ -2,6 +2,7 @@ import React from 'react'
import SectionIntro from '../components/SectionIntro'
import PageIntro from '../components/PageIntro'
import Fade from 'react-reveal/fade'
import ContactImage from '../images/saburly-web-agency.jpg'
import Sarajevo from '../images/sarajevo-web-agency.jpg'
@@ -12,6 +13,7 @@ import PageTransition from 'gatsby-plugin-page-transitions'
const ContactPage = () => (
<PageTransition>
<Fade top>
<PageIntro
tiltImage
headline="Let's make it happen"
@@ -20,9 +22,11 @@ const ContactPage = () => (
image={ContactImage}
imgClasses="-mb-12 border-white border-8 rounded"
/>
</Fade>
<section className="container mx-auto my-12 p-4">
<div className="md:flex">
<Fade left>
<div className="p-2 text-center">
<div className="rounded overflow-hidden border-bottom-saburly">
<img className="w-full" src={Stockholm} alt="Stockholm City" />
@@ -64,6 +68,8 @@ const ContactPage = () => (
</div>
</div>
</div>
</Fade>
<Fade right>
<div className="p-2 text-center">
<div className="rounded overflow-hidden border-bottom-saburly">
<img className="w-full" src={Sarajevo} alt="Sarajevo City" />
@@ -105,10 +111,12 @@ const ContactPage = () => (
</div>
</div>
</div>
</Fade>
</div>
</section>
<div className="bg-saburly-lighter p-8">
<Fade>
<section className="container lg:flex justify-between mx-auto">
<form
action="https://formspree.io/info@saburly.com"
@@ -161,6 +169,7 @@ const ContactPage = () => (
/>
</div>
</section>
</Fade>
</div>
</PageTransition>
)

26
src/pages/index.js
View File

@@ -8,6 +8,7 @@ import PageIntro from '../components/PageIntro'
import InfoBox from '../components/InfoBox'
import Technologies from '../components/Technologies'
import Typed from 'react-typed'
import Fade from 'react-reveal/fade'
import ImgIntro from '../images/web-development-company.svg'
import ImgDesign from '../images/user-experience-design-agency.svg'
@@ -26,6 +27,7 @@ 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}
@@ -43,24 +45,30 @@ const IndexPage = ({ ...props }) => (
great<br />digital experiences
</h2>
</PageIntro>
</Fade>
<main>
<section className="container mx-auto max-w-lg text-center mt-16 p-4">
<Fade top>
<SectionIntro
h2Classes="text-3xl"
headline="Because beautiful code makes our heart pound"
text="We have a deep passion for cutting edge technologies and incredible user experiences. Our experienced engineers deliver custom end-to-end software solutions daily and can even help you with initial analysis, architecture design, testing and deployments."
/>
</Fade>
</section>
<section className="bg-saburly relative">
<Fade left>
<Service
h2Classes="text-4xl font-light saburly-color"
img={ImgDesign}
title="User Experience Design"
text="Our approach is simple: focus on how users might use the product in the best way possible. We offer UX and interface design for all screens and devices. The solutions are usually shaped through iterative processes of research, prototyping and testing."
/>
</Fade>
<Fade right>
<Service
reversed
h2Classes="text-4xl font-light saburly-color"
@@ -69,7 +77,9 @@ const IndexPage = ({ ...props }) => (
text="We are experts in modern web development using both client-side and server-side technologies. Our talented developers work with popular languages and are always up to speed on the cutting edge trends in web application development. We deliver high-quality, maintainable code on time and know how to balance between cost, time and quality."
imgClasses=""
/>
</Fade>
<Fade left>
<Service
img={ImgMobile}
h2Classes="text-4xl font-light saburly-color"
@@ -77,7 +87,9 @@ const IndexPage = ({ ...props }) => (
title="Mobile Apps"
text="We have what it takes to develop competitive iOS and Android applications using both native languages and hybrid solutions. Solutions for iOS are built with Swift & Objective-C and Android solutions are built with Java & Kotlin. We love using technologies like React Native to build cross-platform native apps."
/>
</Fade>
<Fade>
<div className="py-8 text-center lg:flex justify-center">
<Button
standard
@@ -86,10 +98,12 @@ const IndexPage = ({ ...props }) => (
classes="font-medium rounded-full hover:shadow-md text-grey-darker hover:shadow"
/>
</div>
</Fade>
</section>
<section className="bg-saburly-lighter text-center p-4 my-12">
<div className="my-8 container mx-auto max-w-lg">
<Fade>
<SectionIntro
h2Classes="text-4xl"
headline="Ambitious projects bring great responsibility"
@@ -132,21 +146,27 @@ const IndexPage = ({ ...props }) => (
/>
</div>
</div>
</Fade>
<Fade>
<Button
filled
text="Let's Get In Touch"
url="/contact"
classes="text-white font-medium shadow hover:shadow-md rounded-full mt-2 font-light bg-teal hover:bg-teal-dark"
/>
</Fade>
</div>
</section>
<section className="text-center p-8 relative">
<Fade>
<SectionIntro
h2Classes="font-light text-4xl"
headline="But occasionally we have fun & publish"
/>
</Fade>
<Fade>
<div className="container mx-auto w-full md:flex md:flex-wrap items-stretch w-full">
{props.data.allWordpressPost.edges.map(({ node }) => (
<div key={node.id} className="md:w-1/2 p-2">
@@ -157,19 +177,23 @@ const IndexPage = ({ ...props }) => (
excerpt={node.excerpt}
image={
node.featured_media
? node.featured_media.localFile.childImageSharp.resolutions
? node.featured_media.localFile.childImageSharp
.resolutions
: undefined
}
/>
</div>
))}
</div>
</Fade>
<Fade>
<Button
standard
text="More Posts"
url="/blog"
classes="mt-2 mb-8 hover:shadow-md rounded-full text-grey-darker"
/>
</Fade>
</section>
</main>
</PageTransition>

57
src/pages/services.js
View File

@@ -5,6 +5,7 @@ import PageIntro from '../components/PageIntro'
import SectionIntro from '../components/SectionIntro'
import WorkStyle from '../components/WorkStyle'
import Technologies from '../components/Technologies'
import Fade from 'react-reveal/fade'
import IntroImage from '../images/agile-practitioners.jpg'
import WebdevServices from '../images/custom-software-development.svg'
@@ -15,6 +16,7 @@ import PageTransition from 'gatsby-plugin-page-transitions'
const ServicesPage = () => (
<PageTransition>
<Fade top>
<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"
@@ -23,7 +25,9 @@ const ServicesPage = () => (
image={IntroImage}
imgClasses="-mb-12 border-white border-8 rounded-lg"
/>
</Fade>
<section className="px-4 py-16">
<Fade left>
<div className="container mx-auto">
<div className="lg:flex">
<img
@@ -31,6 +35,7 @@ const ServicesPage = () => (
className="hidden md:mr-8 lg:block -mt-12"
alt="User Experience Design Agency"
/>
<SectionIntro
h2Classes="text-4xl md:text-5xl saburly-color font-medium"
classes="max-w-lg"
@@ -53,9 +58,10 @@ const ServicesPage = () => (
</h3>
<p className="font-light leading-normal text-black-light text-lg">
Before our designers work on visual details, we start off by
creating a clear understanding of the problem that you're trying
to solve with the project. After collecting and analyzing data,
we develop concept that becomes a guideline for the design.
creating a clear understanding of the problem that you're
trying to solve with the project. After collecting and
analyzing data, we develop concept that becomes a guideline
for the design.
</p>
</div>
<div className="my-4">
@@ -64,21 +70,23 @@ const ServicesPage = () => (
</h3>
<p className="font-light leading-normal text-black-light text-lg">
We love to design pixel-perfect products that are easy to use
and delightful to interact with. From User-Flows, Lo-Fi & Hi-Fi
Wireframes and Prototypes to polished slick end-products, we
create digital experiences that stand out. This is done through
our human-centered UI/UI approach where the main goal is to
effectively communicate the functionality of your product to its
target audience.
and delightful to interact with. From User-Flows, Lo-Fi &
Hi-Fi Wireframes and Prototypes to polished slick
end-products, we create digital experiences that stand out.
This is done through our human-centered UI/UI approach where
the main goal is to effectively communicate the functionality
of your product to its target audience.
</p>
</div>
</SectionIntro>
</div>
</div>
</Fade>
</section>
<section className="bg-saburly relative bg-saburly-lighter px-4 py-16">
<div className="container mx-auto">
<Fade right>
<div className="lg:flex">
<div>
<SectionIntro
@@ -106,20 +114,20 @@ const ServicesPage = () => (
Mobile & desktop apps
</h3>
<p className="font-light leading-normal text-lg text-black-light">
Building competitive applications these days is challenging, but
we believe that we have what it takes for both native languages
and hybrid solutions. We love using technologies like React
Native and Electron to build cross-platform apps.
Building competitive applications these days is challenging,
but we believe that we have what it takes for both native
languages and hybrid solutions. We love using technologies
like React Native and Electron to build cross-platform apps.
</p>
</div>
<div className="my-4">
<h3 className="my-1 text-black text-3xl font-light">DevOps</h3>
<p className="font-light leading-normal text-black-light text-lg">
Our DevOps experience comes from working with leading hosting
providers such as AWS and Google Cloud Platform. We offer setups
and automation to support delivery across all our applications.
We use the most up-to-date tools to enable stable and
predictable processes of continuous delivery.
providers such as AWS and Google Cloud Platform. We offer
setups and automation to support delivery across all our
applications. We use the most up-to-date tools to enable
stable and predictable processes of continuous delivery.
</p>
</div>
</div>
@@ -129,6 +137,8 @@ const ServicesPage = () => (
alt="Fullstack Web Development Agency"
/>
</div>
</Fade>
<Fade bottom>
<div className="p-8 my-4 bg-white border-bottom-saburly">
<h3 className="my-1 text-black text-3xl">Emerging Technologies</h3>
<p className="font-light leading-normal text-black-light text-lg">
@@ -137,17 +147,19 @@ const ServicesPage = () => (
<strong>Machine Learning</strong> and <strong>Blockchain</strong>,
pushing the boundaries of user experience across physical and
digital. Keeping track of emerging technologies is important to us
so that we can deliver forward-thinking solutions, but we understand
that technologies as just tools. That's why we're keen on being
framework agnostic and selecting the best tools for your needs.
Below are some of the technologies that we're currently working with
on a daily basis.
so that we can deliver forward-thinking solutions, but we
understand that technologies as just tools. That's why we're keen
on being framework agnostic and selecting the best tools for your
needs. Below are some of the technologies that we're currently
working with on a daily basis.
</p>
<Technologies />
</div>
</Fade>
</div>
</section>
<Fade>
<div className="px-4 py-16 bg-saburly-fadeout">
<div className="container mx-auto xl:flex justify-center items-center">
<SectionIntro
@@ -164,6 +176,7 @@ const ServicesPage = () => (
</div>
<WorkStyle />
</div>
</Fade>
</PageTransition>
)

6
yarn.lock
View File

@@ -8119,6 +8119,12 @@ react-responsive-mixin@^0.4.0:
enquire.js "^2.1.1"
json2mq "^0.2.0"
react-reveal@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/react-reveal/-/react-reveal-1.2.2.tgz#f47fbc44debc4c185ae2163a215a9e822c7adfef"
dependencies:
prop-types "^15.5.10"
react-router-dom@^4.1.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"