Add revealing effects on components
This commit is contained in:
Moris Zen
@@ -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,150 +27,173 @@ import PageTransition from 'gatsby-plugin-page-transitions'
|
||||
|
||||
const IndexPage = ({ ...props }) => (
|
||||
<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}
|
||||
imgClasses="-mb-20 p-2 md:p-8"
|
||||
>
|
||||
<h2 className="text-black text-4xl xl:text-5xl pt-1 pb-2">
|
||||
We{' '}
|
||||
<Typed
|
||||
strings={['imagine', 'design', 'develop', 'maintain']}
|
||||
typeSpeed={100}
|
||||
backSpeed={50}
|
||||
backDelay={3000}
|
||||
loop
|
||||
/>
|
||||
great<br />digital experiences
|
||||
</h2>
|
||||
</PageIntro>
|
||||
<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="text-black text-4xl xl:text-5xl pt-1 pb-2">
|
||||
We{' '}
|
||||
<Typed
|
||||
strings={['imagine', 'design', 'develop', 'maintain']}
|
||||
typeSpeed={100}
|
||||
backSpeed={50}
|
||||
backDelay={3000}
|
||||
loop
|
||||
/>
|
||||
great<br />digital experiences
|
||||
</h2>
|
||||
</PageIntro>
|
||||
</Fade>
|
||||
|
||||
<main>
|
||||
<section className="container mx-auto max-w-lg text-center mt-16 p-4">
|
||||
<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 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">
|
||||
<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."
|
||||
/>
|
||||
|
||||
<Service
|
||||
reversed
|
||||
h2Classes="text-4xl font-light saburly-color"
|
||||
img={ImgFullstack}
|
||||
title="Full-Stack Development"
|
||||
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=""
|
||||
/>
|
||||
|
||||
<Service
|
||||
img={ImgMobile}
|
||||
h2Classes="text-4xl font-light saburly-color"
|
||||
imgClasses="max-h-sm"
|
||||
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."
|
||||
/>
|
||||
|
||||
<div className="py-8 text-center lg:flex justify-center">
|
||||
<Button
|
||||
standard
|
||||
text="More About What We Do"
|
||||
url="/services"
|
||||
classes="font-medium rounded-full hover:shadow-md text-grey-darker hover:shadow"
|
||||
<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."
|
||||
/>
|
||||
</div>
|
||||
</Fade>
|
||||
|
||||
<Fade right>
|
||||
<Service
|
||||
reversed
|
||||
h2Classes="text-4xl font-light saburly-color"
|
||||
img={ImgFullstack}
|
||||
title="Full-Stack Development"
|
||||
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"
|
||||
imgClasses="max-h-sm"
|
||||
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
|
||||
text="More About What We Do"
|
||||
url="/services"
|
||||
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">
|
||||
<SectionIntro
|
||||
h2Classes="text-4xl"
|
||||
headline="Ambitious projects bring great responsibility"
|
||||
text="By thinking big, designing smart and developing fast, we have helped organizations of various sizes bring life to ideas and existing products. We're now eager to hear what challenges you have for us"
|
||||
/>
|
||||
<div className="p-4 sm:flex flex-wrap items-center max-w-full justify-around">
|
||||
<div className="sm:w-1/2 md:w-1/5 p-2">
|
||||
<img
|
||||
src={LogoColounge}
|
||||
className="opacity-50 hover:opacity-100 client-logo p-1"
|
||||
alt="Colounge Logo"
|
||||
/>
|
||||
<Fade>
|
||||
<SectionIntro
|
||||
h2Classes="text-4xl"
|
||||
headline="Ambitious projects bring great responsibility"
|
||||
text="By thinking big, designing smart and developing fast, we have helped organizations of various sizes bring life to ideas and existing products. We're now eager to hear what challenges you have for us"
|
||||
/>
|
||||
<div className="p-4 sm:flex flex-wrap items-center max-w-full justify-around">
|
||||
<div className="sm:w-1/2 md:w-1/5 p-2">
|
||||
<img
|
||||
src={LogoColounge}
|
||||
className="opacity-50 hover:opacity-100 client-logo p-1"
|
||||
alt="Colounge Logo"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:w-1/2 md:w-1/5 p-2">
|
||||
<img
|
||||
src={LogoRicoh}
|
||||
className="opacity-50 hover:opacity-100 client-logo p-1"
|
||||
alt="Ricoh Logo"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:w-1/3 md:w-1/5 p-2">
|
||||
<img
|
||||
src={LogoCoor}
|
||||
className="opacity-50 hover:opacity-100 client-logo p-1"
|
||||
alt="Coor Logo"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:w-1/3 md:w-1/5 p-2">
|
||||
<img
|
||||
src={LogoKinnarps}
|
||||
className="opacity-50 hover:opacity-100 client-logo p-1"
|
||||
alt="Kinnarps Logo"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:w-1/3 md:w-1/5 p-2">
|
||||
<img
|
||||
src={LogoIMCG}
|
||||
className="opacity-50 hover:opacity-100 client-logo p-1"
|
||||
alt="IMCG Logo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sm:w-1/2 md:w-1/5 p-2">
|
||||
<img
|
||||
src={LogoRicoh}
|
||||
className="opacity-50 hover:opacity-100 client-logo p-1"
|
||||
alt="Ricoh Logo"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:w-1/3 md:w-1/5 p-2">
|
||||
<img
|
||||
src={LogoCoor}
|
||||
className="opacity-50 hover:opacity-100 client-logo p-1"
|
||||
alt="Coor Logo"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:w-1/3 md:w-1/5 p-2">
|
||||
<img
|
||||
src={LogoKinnarps}
|
||||
className="opacity-50 hover:opacity-100 client-logo p-1"
|
||||
alt="Kinnarps Logo"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:w-1/3 md:w-1/5 p-2">
|
||||
<img
|
||||
src={LogoIMCG}
|
||||
className="opacity-50 hover:opacity-100 client-logo p-1"
|
||||
alt="IMCG Logo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<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">
|
||||
<SectionIntro
|
||||
h2Classes="font-light text-4xl"
|
||||
headline="But occasionally we have fun & publish"
|
||||
/>
|
||||
<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">
|
||||
<Card
|
||||
url={`blog/${node.slug}`}
|
||||
title={node.title}
|
||||
date={node.date}
|
||||
excerpt={node.excerpt}
|
||||
image={
|
||||
node.featured_media
|
||||
? node.featured_media.localFile.childImageSharp.resolutions
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Button
|
||||
standard
|
||||
text="More Posts"
|
||||
url="/blog"
|
||||
classes="mt-2 mb-8 hover:shadow-md rounded-full text-grey-darker"
|
||||
/>
|
||||
<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">
|
||||
<Card
|
||||
url={`blog/${node.slug}`}
|
||||
title={node.title}
|
||||
date={node.date}
|
||||
excerpt={node.excerpt}
|
||||
image={
|
||||
node.featured_media
|
||||
? 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>
|
||||
|
||||
Reference in New Issue
Block a user