Add revealing effects on components
This commit is contained in:
Moris Zen
@@ -20,6 +20,7 @@
|
|||||||
"react-headroom": "^2.2.2",
|
"react-headroom": "^2.2.2",
|
||||||
"react-helmet": "^5.2.0",
|
"react-helmet": "^5.2.0",
|
||||||
"react-responsive-mixin": "^0.4.0",
|
"react-responsive-mixin": "^0.4.0",
|
||||||
|
"react-reveal": "^1.2.2",
|
||||||
"react-typed": "^1.0.9",
|
"react-typed": "^1.0.9",
|
||||||
"slideout": "^1.0.1",
|
"slideout": "^1.0.1",
|
||||||
"tiny-slider": "^2.8.5",
|
"tiny-slider": "^2.8.5",
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ import React from 'react'
|
|||||||
|
|
||||||
import SectionIntro from '../components/SectionIntro'
|
import SectionIntro from '../components/SectionIntro'
|
||||||
import PageIntro from '../components/PageIntro'
|
import PageIntro from '../components/PageIntro'
|
||||||
|
import Fade from 'react-reveal/fade'
|
||||||
|
|
||||||
import ContactImage from '../images/saburly-web-agency.jpg'
|
import ContactImage from '../images/saburly-web-agency.jpg'
|
||||||
import Sarajevo from '../images/sarajevo-web-agency.jpg'
|
import Sarajevo from '../images/sarajevo-web-agency.jpg'
|
||||||
@@ -12,155 +13,163 @@ import PageTransition from 'gatsby-plugin-page-transitions'
|
|||||||
|
|
||||||
const ContactPage = () => (
|
const ContactPage = () => (
|
||||||
<PageTransition>
|
<PageTransition>
|
||||||
<PageIntro
|
<Fade top>
|
||||||
tiltImage
|
<PageIntro
|
||||||
headline="Let's make it happen"
|
tiltImage
|
||||||
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."
|
headline="Let's make it happen"
|
||||||
sectionClasses="lg:mb-8"
|
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."
|
||||||
image={ContactImage}
|
sectionClasses="lg:mb-8"
|
||||||
imgClasses="-mb-12 border-white border-8 rounded"
|
image={ContactImage}
|
||||||
/>
|
imgClasses="-mb-12 border-white border-8 rounded"
|
||||||
|
/>
|
||||||
|
</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">
|
||||||
<div className="p-2 text-center">
|
<Fade left>
|
||||||
<div className="rounded overflow-hidden border-bottom-saburly">
|
<div className="p-2 text-center">
|
||||||
<img className="w-full" src={Stockholm} alt="Stockholm City" />
|
<div className="rounded overflow-hidden border-bottom-saburly">
|
||||||
<div className="px-6 py-4">
|
<img className="w-full" src={Stockholm} alt="Stockholm City" />
|
||||||
<div className="uppercase font-medium text-xl mb-6">
|
<div className="px-6 py-4">
|
||||||
office in Stockholm
|
<div className="uppercase font-medium text-xl mb-6">
|
||||||
</div>
|
office in Stockholm
|
||||||
<div className="md:flex text-left justify-around text-black text-base">
|
|
||||||
<div>
|
|
||||||
<h4 className="text-black">Adress</h4>
|
|
||||||
<p className="text-black-light">
|
|
||||||
Saburly AB <br />
|
|
||||||
Vretenvägen 13 <br />
|
|
||||||
171 54 Solna <br />
|
|
||||||
Sweden <br />
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className="md:flex text-left justify-around text-black text-base">
|
||||||
<h4 className="text-black">Contact</h4>
|
<div>
|
||||||
<p className="text-black-light">
|
<h4 className="text-black">Adress</h4>
|
||||||
Phone:{' '}
|
<p className="text-black-light">
|
||||||
<a
|
Saburly AB <br />
|
||||||
className="text-purple-dark hover:text-purple-light no-underline"
|
Vretenvägen 13 <br />
|
||||||
href="tel:+46760477717"
|
171 54 Solna <br />
|
||||||
>
|
Sweden <br />
|
||||||
+46760477717
|
</p>
|
||||||
</a>
|
</div>
|
||||||
<br />
|
<div>
|
||||||
E-mail:{' '}
|
<h4 className="text-black">Contact</h4>
|
||||||
<a
|
<p className="text-black-light">
|
||||||
className="text-purple-dark hover:text-purple-light no-underline"
|
Phone:{' '}
|
||||||
href="mailto:sweden@saburly.com"
|
<a
|
||||||
>
|
className="text-purple-dark hover:text-purple-light no-underline"
|
||||||
sweden@saburly.com
|
href="tel:+46760477717"
|
||||||
</a>{' '}
|
>
|
||||||
</p>
|
+46760477717
|
||||||
|
</a>
|
||||||
|
<br />
|
||||||
|
E-mail:{' '}
|
||||||
|
<a
|
||||||
|
className="text-purple-dark hover:text-purple-light no-underline"
|
||||||
|
href="mailto:sweden@saburly.com"
|
||||||
|
>
|
||||||
|
sweden@saburly.com
|
||||||
|
</a>{' '}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Fade>
|
||||||
<div className="p-2 text-center">
|
<Fade right>
|
||||||
<div className="rounded overflow-hidden border-bottom-saburly">
|
<div className="p-2 text-center">
|
||||||
<img className="w-full" src={Sarajevo} alt="Sarajevo City" />
|
<div className="rounded overflow-hidden border-bottom-saburly">
|
||||||
<div className="px-6 py-4">
|
<img className="w-full" src={Sarajevo} alt="Sarajevo City" />
|
||||||
<div className="uppercase font-medium text-xl mb-6">
|
<div className="px-6 py-4">
|
||||||
office in Sarajevo
|
<div className="uppercase font-medium text-xl mb-6">
|
||||||
</div>
|
office in Sarajevo
|
||||||
<div className="md:flex text-left justify-around text-base">
|
|
||||||
<div>
|
|
||||||
<h4 className="text-black">Adress</h4>
|
|
||||||
<p className="text-black-light">
|
|
||||||
Saburly d.o.o <br />
|
|
||||||
Hakije Turajlica 2 <br />
|
|
||||||
71 000 Sarajevo <br />
|
|
||||||
Bosnia & Herzegovina <br />
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className="md:flex text-left justify-around text-base">
|
||||||
<h4 className="text-black">Contact</h4>
|
<div>
|
||||||
<p className="text-black-light">
|
<h4 className="text-black">Adress</h4>
|
||||||
Phone:{' '}
|
<p className="text-black-light">
|
||||||
<a
|
Saburly d.o.o <br />
|
||||||
className="text-purple-dark hover:text-purple-light no-underline"
|
Hakije Turajlica 2 <br />
|
||||||
href="tel:+38761909238"
|
71 000 Sarajevo <br />
|
||||||
>
|
Bosnia & Herzegovina <br />
|
||||||
+38761909238
|
</p>
|
||||||
</a>{' '}
|
</div>
|
||||||
<br />
|
<div>
|
||||||
E-mail:{' '}
|
<h4 className="text-black">Contact</h4>
|
||||||
<a
|
<p className="text-black-light">
|
||||||
className="text-purple-dark hover:text-purple-light no-underline"
|
Phone:{' '}
|
||||||
href="mailto:bosnia@saburly.com"
|
<a
|
||||||
>
|
className="text-purple-dark hover:text-purple-light no-underline"
|
||||||
bosnia@saburly.com
|
href="tel:+38761909238"
|
||||||
</a>{' '}
|
>
|
||||||
</p>
|
+38761909238
|
||||||
|
</a>{' '}
|
||||||
|
<br />
|
||||||
|
E-mail:{' '}
|
||||||
|
<a
|
||||||
|
className="text-purple-dark hover:text-purple-light no-underline"
|
||||||
|
href="mailto:bosnia@saburly.com"
|
||||||
|
>
|
||||||
|
bosnia@saburly.com
|
||||||
|
</a>{' '}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Fade>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div className="bg-saburly-lighter p-8">
|
<div className="bg-saburly-lighter p-8">
|
||||||
<section className="container lg:flex justify-between mx-auto">
|
<Fade>
|
||||||
<form
|
<section className="container lg:flex justify-between mx-auto">
|
||||||
action="https://formspree.io/info@saburly.com"
|
<form
|
||||||
className="w-full max-w-sm mx-auto pt-16 p-6"
|
action="https://formspree.io/info@saburly.com"
|
||||||
method="POST"
|
className="w-full max-w-sm mx-auto pt-16 p-6"
|
||||||
>
|
method="POST"
|
||||||
<SectionIntro headline="Send us a message" />
|
>
|
||||||
<div className="md:flex flex-wrap">
|
<SectionIntro headline="Send us a message" />
|
||||||
<input
|
<div className="md:flex flex-wrap">
|
||||||
className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2"
|
<input
|
||||||
id="grid-first-name"
|
className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2"
|
||||||
type="text"
|
id="grid-first-name"
|
||||||
placeholder="Name"
|
type="text"
|
||||||
name="name"
|
placeholder="Name"
|
||||||
required
|
name="name"
|
||||||
/>
|
required
|
||||||
|
/>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2"
|
className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2"
|
||||||
id="grid-first-name"
|
id="grid-first-name"
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Email"
|
placeholder="Email"
|
||||||
name="_replyto"
|
name="_replyto"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<textarea
|
<textarea
|
||||||
className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2 border-grey-light"
|
className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2 border-grey-light"
|
||||||
id="grid-last-name"
|
id="grid-last-name"
|
||||||
type="text"
|
type="text"
|
||||||
name="message"
|
name="message"
|
||||||
placeholder="Message"
|
placeholder="Message"
|
||||||
required
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="mt-4 w-full shadow bg-teal hover:bg-teal-light text-white py-2 px-4 rounded"
|
||||||
|
value="Send"
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
Send
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
src={FormImage}
|
||||||
|
alt="Contact Form Image"
|
||||||
|
className="p-10 w-full text-center block md:max-w-lg mx-auto"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
<button
|
</Fade>
|
||||||
className="mt-4 w-full shadow bg-teal hover:bg-teal-light text-white py-2 px-4 rounded"
|
|
||||||
value="Send"
|
|
||||||
type="submit"
|
|
||||||
>
|
|
||||||
Send
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
<div>
|
|
||||||
<img
|
|
||||||
src={FormImage}
|
|
||||||
alt="Contact Form Image"
|
|
||||||
className="p-10 w-full text-center block md:max-w-lg mx-auto"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
</PageTransition>
|
</PageTransition>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ import PageIntro from '../components/PageIntro'
|
|||||||
import InfoBox from '../components/InfoBox'
|
import InfoBox from '../components/InfoBox'
|
||||||
import Technologies from '../components/Technologies'
|
import Technologies from '../components/Technologies'
|
||||||
import Typed from 'react-typed'
|
import Typed from 'react-typed'
|
||||||
|
import Fade from 'react-reveal/fade'
|
||||||
|
|
||||||
import ImgIntro from '../images/web-development-company.svg'
|
import ImgIntro from '../images/web-development-company.svg'
|
||||||
import ImgDesign from '../images/user-experience-design-agency.svg'
|
import ImgDesign from '../images/user-experience-design-agency.svg'
|
||||||
@@ -26,150 +27,173 @@ import PageTransition from 'gatsby-plugin-page-transitions'
|
|||||||
|
|
||||||
const IndexPage = ({ ...props }) => (
|
const IndexPage = ({ ...props }) => (
|
||||||
<PageTransition>
|
<PageTransition>
|
||||||
<PageIntro
|
<Fade top>
|
||||||
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."
|
<PageIntro
|
||||||
image={ImgIntro}
|
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."
|
||||||
imgClasses="-mb-20 p-2 md:p-8"
|
image={ImgIntro}
|
||||||
>
|
imgClasses="-mb-20 p-2 md:p-8"
|
||||||
<h2 className="text-black text-4xl xl:text-5xl pt-1 pb-2">
|
>
|
||||||
We{' '}
|
<h2 className="text-black text-4xl xl:text-5xl pt-1 pb-2">
|
||||||
<Typed
|
We{' '}
|
||||||
strings={['imagine', 'design', 'develop', 'maintain']}
|
<Typed
|
||||||
typeSpeed={100}
|
strings={['imagine', 'design', 'develop', 'maintain']}
|
||||||
backSpeed={50}
|
typeSpeed={100}
|
||||||
backDelay={3000}
|
backSpeed={50}
|
||||||
loop
|
backDelay={3000}
|
||||||
/>
|
loop
|
||||||
great<br />digital experiences
|
/>
|
||||||
</h2>
|
great<br />digital experiences
|
||||||
</PageIntro>
|
</h2>
|
||||||
|
</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">
|
||||||
<SectionIntro
|
<Fade top>
|
||||||
h2Classes="text-3xl"
|
<SectionIntro
|
||||||
headline="Because beautiful code makes our heart pound"
|
h2Classes="text-3xl"
|
||||||
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."
|
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>
|
||||||
|
|
||||||
<section className="bg-saburly relative">
|
<section className="bg-saburly relative">
|
||||||
<Service
|
<Fade left>
|
||||||
h2Classes="text-4xl font-light saburly-color"
|
<Service
|
||||||
img={ImgDesign}
|
h2Classes="text-4xl font-light saburly-color"
|
||||||
title="User Experience Design"
|
img={ImgDesign}
|
||||||
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."
|
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"
|
|
||||||
/>
|
/>
|
||||||
</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>
|
||||||
|
|
||||||
<section className="bg-saburly-lighter text-center p-4 my-12">
|
<section className="bg-saburly-lighter text-center p-4 my-12">
|
||||||
<div className="my-8 container mx-auto max-w-lg">
|
<div className="my-8 container mx-auto max-w-lg">
|
||||||
<SectionIntro
|
<Fade>
|
||||||
h2Classes="text-4xl"
|
<SectionIntro
|
||||||
headline="Ambitious projects bring great responsibility"
|
h2Classes="text-4xl"
|
||||||
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"
|
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">
|
<div className="p-4 sm:flex flex-wrap items-center max-w-full justify-around">
|
||||||
<img
|
<div className="sm:w-1/2 md:w-1/5 p-2">
|
||||||
src={LogoColounge}
|
<img
|
||||||
className="opacity-50 hover:opacity-100 client-logo p-1"
|
src={LogoColounge}
|
||||||
alt="Colounge Logo"
|
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>
|
||||||
<div className="sm:w-1/2 md:w-1/5 p-2">
|
</Fade>
|
||||||
<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>
|
|
||||||
|
|
||||||
<Button
|
<Fade>
|
||||||
filled
|
<Button
|
||||||
text="Let's Get In Touch"
|
filled
|
||||||
url="/contact"
|
text="Let's Get In Touch"
|
||||||
classes="text-white font-medium shadow hover:shadow-md rounded-full mt-2 font-light bg-teal hover:bg-teal-dark"
|
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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="text-center p-8 relative">
|
<section className="text-center p-8 relative">
|
||||||
<SectionIntro
|
<Fade>
|
||||||
h2Classes="font-light text-4xl"
|
<SectionIntro
|
||||||
headline="But occasionally we have fun & publish"
|
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 }) => (
|
</Fade>
|
||||||
<div key={node.id} className="md:w-1/2 p-2">
|
<Fade>
|
||||||
<Card
|
<div className="container mx-auto w-full md:flex md:flex-wrap items-stretch w-full">
|
||||||
url={`blog/${node.slug}`}
|
{props.data.allWordpressPost.edges.map(({ node }) => (
|
||||||
title={node.title}
|
<div key={node.id} className="md:w-1/2 p-2">
|
||||||
date={node.date}
|
<Card
|
||||||
excerpt={node.excerpt}
|
url={`blog/${node.slug}`}
|
||||||
image={
|
title={node.title}
|
||||||
node.featured_media
|
date={node.date}
|
||||||
? node.featured_media.localFile.childImageSharp.resolutions
|
excerpt={node.excerpt}
|
||||||
: undefined
|
image={
|
||||||
}
|
node.featured_media
|
||||||
/>
|
? node.featured_media.localFile.childImageSharp
|
||||||
</div>
|
.resolutions
|
||||||
))}
|
: undefined
|
||||||
</div>
|
}
|
||||||
<Button
|
/>
|
||||||
standard
|
</div>
|
||||||
text="More Posts"
|
))}
|
||||||
url="/blog"
|
</div>
|
||||||
classes="mt-2 mb-8 hover:shadow-md rounded-full text-grey-darker"
|
</Fade>
|
||||||
/>
|
<Fade>
|
||||||
|
<Button
|
||||||
|
standard
|
||||||
|
text="More Posts"
|
||||||
|
url="/blog"
|
||||||
|
classes="mt-2 mb-8 hover:shadow-md rounded-full text-grey-darker"
|
||||||
|
/>
|
||||||
|
</Fade>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
</PageTransition>
|
</PageTransition>
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import PageIntro from '../components/PageIntro'
|
|||||||
import SectionIntro from '../components/SectionIntro'
|
import SectionIntro from '../components/SectionIntro'
|
||||||
import WorkStyle from '../components/WorkStyle'
|
import WorkStyle from '../components/WorkStyle'
|
||||||
import Technologies from '../components/Technologies'
|
import Technologies from '../components/Technologies'
|
||||||
|
import Fade from 'react-reveal/fade'
|
||||||
|
|
||||||
import IntroImage from '../images/agile-practitioners.jpg'
|
import IntroImage from '../images/agile-practitioners.jpg'
|
||||||
import WebdevServices from '../images/custom-software-development.svg'
|
import WebdevServices from '../images/custom-software-development.svg'
|
||||||
@@ -15,155 +16,167 @@ import PageTransition from 'gatsby-plugin-page-transitions'
|
|||||||
|
|
||||||
const ServicesPage = () => (
|
const ServicesPage = () => (
|
||||||
<PageTransition>
|
<PageTransition>
|
||||||
<PageIntro
|
<Fade top>
|
||||||
tiltImage
|
<PageIntro
|
||||||
buttonClasses="text-white font-normal shadow hover:shadow-md rounded-full mt-4 font-light bg-teal hover:bg-teal-dark mb-20"
|
tiltImage
|
||||||
headline="Agile Practitioners"
|
buttonClasses="text-white font-normal shadow hover:shadow-md rounded-full mt-4 font-light bg-teal hover:bg-teal-dark mb-20"
|
||||||
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."
|
headline="Agile Practitioners"
|
||||||
image={IntroImage}
|
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."
|
||||||
imgClasses="-mb-12 border-white border-8 rounded-lg"
|
image={IntroImage}
|
||||||
/>
|
imgClasses="-mb-12 border-white border-8 rounded-lg"
|
||||||
|
/>
|
||||||
|
</Fade>
|
||||||
<section className="px-4 py-16">
|
<section className="px-4 py-16">
|
||||||
<div className="container mx-auto">
|
<Fade left>
|
||||||
<div className="lg:flex">
|
<div className="container mx-auto">
|
||||||
<img
|
<div className="lg:flex">
|
||||||
src={UXdesign}
|
<img
|
||||||
className="hidden md:mr-8 lg:block -mt-12"
|
src={UXdesign}
|
||||||
alt="User Experience Design Agency"
|
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"
|
<SectionIntro
|
||||||
headline="Design services"
|
h2Classes="text-4xl md:text-5xl saburly-color font-medium"
|
||||||
text="We offer consistent quality that extends to every section of the application development. Our approach is simple: focus on how users might use the product
|
classes="max-w-lg"
|
||||||
|
headline="Design services"
|
||||||
|
text="We offer consistent quality that extends to every section of the application development. Our approach is simple: focus on how users might use the product
|
||||||
in the best way possible. The solutions are usually shaped
|
in the best way possible. The solutions are usually shaped
|
||||||
through iterative processes of research, prototyping and
|
through iterative processes of research, prototyping and
|
||||||
testing. All devices and screen sizes are welcome
|
testing. All devices and screen sizes are welcome
|
||||||
here."
|
here."
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src={UXdesign}
|
src={UXdesign}
|
||||||
className="lg:hidden p-8 mx-auto w-full -mt-12"
|
className="lg:hidden p-8 mx-auto w-full -mt-12"
|
||||||
alt="User Experience Design Agency"
|
alt="User Experience Design Agency"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="my-4">
|
<div className="my-4">
|
||||||
<h3 className="font-light my-1 text-3xl font-light">
|
<h3 className="font-light my-1 text-3xl font-light">
|
||||||
Conceptualization & Branding
|
Conceptualization & Branding
|
||||||
</h3>
|
</h3>
|
||||||
<p className="font-light leading-normal text-black-light text-lg">
|
<p className="font-light leading-normal text-black-light text-lg">
|
||||||
Before our designers work on visual details, we start off by
|
Before our designers work on visual details, we start off by
|
||||||
creating a clear understanding of the problem that you're trying
|
creating a clear understanding of the problem that you're
|
||||||
to solve with the project. After collecting and analyzing data,
|
trying to solve with the project. After collecting and
|
||||||
we develop concept that becomes a guideline for the design.
|
analyzing data, we develop concept that becomes a guideline
|
||||||
</p>
|
for the design.
|
||||||
</div>
|
</p>
|
||||||
<div className="my-4">
|
</div>
|
||||||
<h3 className="text-black font-light my-1 text-3xl font-light">
|
<div className="my-4">
|
||||||
UX & UI Design
|
<h3 className="text-black font-light my-1 text-3xl font-light">
|
||||||
</h3>
|
UX & UI Design
|
||||||
<p className="font-light leading-normal text-black-light text-lg">
|
</h3>
|
||||||
We love to design pixel-perfect products that are easy to use
|
<p className="font-light leading-normal text-black-light text-lg">
|
||||||
and delightful to interact with. From User-Flows, Lo-Fi & Hi-Fi
|
We love to design pixel-perfect products that are easy to use
|
||||||
Wireframes and Prototypes to polished slick end-products, we
|
and delightful to interact with. From User-Flows, Lo-Fi &
|
||||||
create digital experiences that stand out. This is done through
|
Hi-Fi Wireframes and Prototypes to polished slick
|
||||||
our human-centered UI/UI approach where the main goal is to
|
end-products, we create digital experiences that stand out.
|
||||||
effectively communicate the functionality of your product to its
|
This is done through our human-centered UI/UI approach where
|
||||||
target audience.
|
the main goal is to effectively communicate the functionality
|
||||||
</p>
|
of your product to its target audience.
|
||||||
</div>
|
</p>
|
||||||
</SectionIntro>
|
</div>
|
||||||
|
</SectionIntro>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Fade>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="bg-saburly relative bg-saburly-lighter px-4 py-16">
|
<section className="bg-saburly relative bg-saburly-lighter px-4 py-16">
|
||||||
<div className="container mx-auto">
|
<div className="container mx-auto">
|
||||||
<div className="lg:flex">
|
<Fade right>
|
||||||
<div>
|
<div className="lg:flex">
|
||||||
<SectionIntro
|
<div>
|
||||||
h2Classes="font-medium saburly-color text-4xl md:text-5xl"
|
<SectionIntro
|
||||||
headline="Software development"
|
h2Classes="font-medium saburly-color text-4xl md:text-5xl"
|
||||||
text="From infrastructure to AI, we develop data-driven Full-Stack applications for both custom software and third party solutions."
|
headline="Software development"
|
||||||
/>
|
text="From infrastructure to AI, we develop data-driven Full-Stack applications for both custom software and third party solutions."
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src={WebdevServices}
|
||||||
|
className="lg:hidden w-full mx-auto text-center content-center align-center p-8"
|
||||||
|
alt="Fullstack Web Development Agency"
|
||||||
|
/>
|
||||||
|
<div className="my-4">
|
||||||
|
<h3 className="my-1 text-black font-light text-3xl">
|
||||||
|
Web development
|
||||||
|
</h3>
|
||||||
|
<p className="font-light leading-normal text-lg text-black-light">
|
||||||
|
We offer full-cycle web development services for the connected
|
||||||
|
world. Our talented developers work with popular languages and
|
||||||
|
are up to speed with cutting edge trends.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="my-4">
|
||||||
|
<h3 className="my-1 text-black font-light text-3xl">
|
||||||
|
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.
|
||||||
|
</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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<img
|
<img
|
||||||
src={WebdevServices}
|
src={WebdevServices}
|
||||||
className="lg:hidden w-full mx-auto text-center content-center align-center p-8"
|
className="hidden lg:block w-full max-h-35 mx-auto text-center content-center align-center p-8"
|
||||||
alt="Fullstack Web Development Agency"
|
alt="Fullstack Web Development Agency"
|
||||||
/>
|
/>
|
||||||
<div className="my-4">
|
|
||||||
<h3 className="my-1 text-black font-light text-3xl">
|
|
||||||
Web development
|
|
||||||
</h3>
|
|
||||||
<p className="font-light leading-normal text-lg text-black-light">
|
|
||||||
We offer full-cycle web development services for the connected
|
|
||||||
world. Our talented developers work with popular languages and
|
|
||||||
are up to speed with cutting edge trends.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="my-4">
|
|
||||||
<h3 className="my-1 text-black font-light text-3xl">
|
|
||||||
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.
|
|
||||||
</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.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<img
|
</Fade>
|
||||||
src={WebdevServices}
|
<Fade bottom>
|
||||||
className="hidden lg:block w-full max-h-35 mx-auto text-center content-center align-center p-8"
|
<div className="p-8 my-4 bg-white border-bottom-saburly">
|
||||||
alt="Fullstack Web Development Agency"
|
<h3 className="my-1 text-black text-3xl">Emerging Technologies</h3>
|
||||||
/>
|
<p className="font-light leading-normal text-black-light text-lg">
|
||||||
</div>
|
We harness a wide array of emerging technologies, such as{' '}
|
||||||
<div className="p-8 my-4 bg-white border-bottom-saburly">
|
<strong>AR/VR</strong>, <strong>AI technologies</strong>,{' '}
|
||||||
<h3 className="my-1 text-black text-3xl">Emerging Technologies</h3>
|
<strong>Machine Learning</strong> and <strong>Blockchain</strong>,
|
||||||
<p className="font-light leading-normal text-black-light text-lg">
|
pushing the boundaries of user experience across physical and
|
||||||
We harness a wide array of emerging technologies, such as{' '}
|
digital. Keeping track of emerging technologies is important to us
|
||||||
<strong>AR/VR</strong>, <strong>AI technologies</strong>,{' '}
|
so that we can deliver forward-thinking solutions, but we
|
||||||
<strong>Machine Learning</strong> and <strong>Blockchain</strong>,
|
understand that technologies as just tools. That's why we're keen
|
||||||
pushing the boundaries of user experience across physical and
|
on being framework agnostic and selecting the best tools for your
|
||||||
digital. Keeping track of emerging technologies is important to us
|
needs. Below are some of the technologies that we're currently
|
||||||
so that we can deliver forward-thinking solutions, but we understand
|
working with on a daily basis.
|
||||||
that technologies as just tools. That's why we're keen on being
|
</p>
|
||||||
framework agnostic and selecting the best tools for your needs.
|
<Technologies />
|
||||||
Below are some of the technologies that we're currently working with
|
</div>
|
||||||
on a daily basis.
|
</Fade>
|
||||||
</p>
|
|
||||||
<Technologies />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div className="px-4 py-16 bg-saburly-fadeout">
|
<Fade>
|
||||||
<div className="container mx-auto xl:flex justify-center items-center">
|
<div className="px-4 py-16 bg-saburly-fadeout">
|
||||||
<SectionIntro
|
<div className="container mx-auto xl:flex justify-center items-center">
|
||||||
h2Classes="text-5xl saburly-color font-light"
|
<SectionIntro
|
||||||
headline="Flexible Workflow"
|
h2Classes="text-5xl saburly-color font-light"
|
||||||
text="We are helping everything from Fortune 500 companies to startups
|
headline="Flexible Workflow"
|
||||||
|
text="We are helping everything from Fortune 500 companies to startups
|
||||||
and tailor our processes based on your scale and needs. We
|
and tailor our processes based on your scale and needs. We
|
||||||
collaborate closely with our clients at each step of the
|
collaborate closely with our clients at each step of the
|
||||||
development process and make sure that the solutions deliver great
|
development process and make sure that the solutions deliver great
|
||||||
value and meets your specific business requirements"
|
value and meets your specific business requirements"
|
||||||
classes="container mx-auto"
|
classes="container mx-auto"
|
||||||
/>
|
/>
|
||||||
<img src={HowWeWork} className="w-full -mb-16" alt="DevOps Agency" />
|
<img src={HowWeWork} className="w-full -mb-16" alt="DevOps Agency" />
|
||||||
|
</div>
|
||||||
|
<WorkStyle />
|
||||||
</div>
|
</div>
|
||||||
<WorkStyle />
|
</Fade>
|
||||||
</div>
|
|
||||||
</PageTransition>
|
</PageTransition>
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|||||||
@@ -8119,6 +8119,12 @@ react-responsive-mixin@^0.4.0:
|
|||||||
enquire.js "^2.1.1"
|
enquire.js "^2.1.1"
|
||||||
json2mq "^0.2.0"
|
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:
|
react-router-dom@^4.1.1:
|
||||||
version "4.3.1"
|
version "4.3.1"
|
||||||
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"
|
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"
|
||||||
|
|||||||
Reference in New Issue
Block a user