246 lines
9.3 KiB
JavaScript
246 lines
9.3 KiB
JavaScript
import React from 'react'
|
|
import Link from 'gatsby-link'
|
|
|
|
import SectionIntro from '../components/SectionIntro'
|
|
import Button from '../components/Button'
|
|
import Card from '../components/Card'
|
|
import Service from '../components/Service'
|
|
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 SEO from '../components/SEO'
|
|
|
|
import ImgIntro from '../images/web-development-company.svg'
|
|
import ImgDesign from '../images/user-experience-design-agency.svg'
|
|
import ImgFullstack from '../images/fullstack-web-development-agency.svg'
|
|
import ImgMobile from '../images/mobile-app-development-company.svg'
|
|
import ServicesBg from '../images/services-background.svg'
|
|
|
|
import LogoIBM from '../images/logo-ibm-color.svg'
|
|
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 LogoIMCG from '../images/logo-imcg.png'
|
|
import LogoColounge from '../images/logo-colounge.svg'
|
|
import LogoHyrma from '../images/logo-hyrma-admin.svg'
|
|
|
|
import PageTransition from 'gatsby-plugin-page-transitions'
|
|
|
|
const IndexPage = ({ ...props }) => (
|
|
<PageTransition>
|
|
<SEO siteTitle="Saburly - App Development & Mobile Design agency that makes you stand out" siteDescription="We're in the business of solving real-world problems with digital solutions. Our mission is to make you stand out with the help of modern technologies" siteImage={ImgIntro} siteUrl="https://saburly.com" />
|
|
<PageIntro
|
|
text="We're in the business of solving real-world problems with digital solutions. 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="my-4 text-3xl xsm:text-4xl text-black md:text-5xl">
|
|
We{' '}
|
|
<Typed
|
|
strings={['imagine', 'design', 'develop', 'maintain']}
|
|
typeSpeed={100}
|
|
backSpeed={50}
|
|
backDelay={3000}
|
|
loop
|
|
/>
|
|
great<br />digital experiences
|
|
</h2>
|
|
</PageIntro>
|
|
|
|
<main>
|
|
<section className="container mx-auto max-w-lg text-center mt-16 p-4">
|
|
<Fade>
|
|
<SectionIntro
|
|
classes="my-10"
|
|
h2Classes="text-2xl sm:text-5xl"
|
|
headline="Because beautiful code makes our heart pound"
|
|
text="What gets us going is our passion for cutting edge technologies and incredible user experiences. We transform frustrations into features and headaches into highlights. And we do it all through our UX design and development process, by coupling form and function to develop world-class websites and apps for businesses of all sizes and sectors."
|
|
/>
|
|
</Fade>
|
|
</section>
|
|
|
|
<section className="relative">
|
|
<Fade>
|
|
<Service
|
|
classes="py-8"
|
|
h2Classes="text-2xl xsm:text-3xl font-medium saburly-color"
|
|
img={ImgDesign}
|
|
title="User Experience Design"
|
|
text="Our approach is simple: focus on how users might use the product in the best ways possible. We offer UX and UI design services for all screens and devices. The solutions are usually shaped through iterative processes of research, prototyping and testing."
|
|
/>
|
|
</Fade>
|
|
|
|
<Fade>
|
|
<Service
|
|
reversed
|
|
classes="py-8"
|
|
h2Classes="text-2xl xsm:text-3xl font-medium saburly-color"
|
|
img={ImgFullstack}
|
|
title="Full-Stack Development"
|
|
text="We love modern web development. Our talented developers work with both client-side and server-side technologies are always up to speed with cutting edge trends. We deliver high-quality, maintainable code on time and know how to balance between cost, time and quality."
|
|
imgClasses=""
|
|
/>
|
|
</Fade>
|
|
|
|
<Fade>
|
|
<Service
|
|
img={ImgMobile}
|
|
classes="py-8"
|
|
h2Classes="text-2xl xsm:text-3xl font-medium saburly-color"
|
|
imgClasses="max-h-sm"
|
|
title="Mobile App Development"
|
|
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>
|
|
</section>
|
|
|
|
<section className="bg-saburly-lighter text-center p-4 my-12">
|
|
<div className="my-8 py-8 container mx-auto max-w-lg">
|
|
<Fade>
|
|
<SectionIntro
|
|
h2Classes="text-2xl md:text-5xl"
|
|
headline="You'll be in great company"
|
|
text="By thinking big, designing smart and developing fast, we're helping organizations of various sizes bring life to ideas. 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/6 p-2">
|
|
<img
|
|
src={LogoColounge}
|
|
className="opacity-50 hover:opacity-100 client-logo p-2"
|
|
alt="Colounge Logo"
|
|
/>
|
|
</div>
|
|
<div className="sm:w-1/2 md:w-1/6 p-2">
|
|
<img
|
|
src={LogoRicoh}
|
|
className="opacity-50 hover:opacity-100 client-logo p-2"
|
|
alt="Ricoh Logo"
|
|
/>
|
|
</div>
|
|
<div className="sm:w-1/3 md:w-1/6 p-2">
|
|
<img
|
|
src={LogoCoor}
|
|
className="opacity-50 hover:opacity-100 client-logo p-2"
|
|
alt="Coor Logo"
|
|
/>
|
|
</div>
|
|
<div className="sm:w-1/3 md:w-1/6 p-2">
|
|
<img
|
|
src={LogoKinnarps}
|
|
className="opacity-50 hover:opacity-100 client-logo p-2"
|
|
alt="Kinnarps Logo"
|
|
/>
|
|
</div>
|
|
<div className="sm:w-1/3 md:w-1/6 p-2">
|
|
<img
|
|
src={LogoIMCG}
|
|
className="opacity-50 hover:opacity-100 client-logo p-2"
|
|
alt="IMCG Logo"
|
|
/>
|
|
</div>
|
|
<div className="sm:w-1/3 md:w-1/6 p-2">
|
|
<img
|
|
src={LogoHyrma}
|
|
className="opacity-50 hover:opacity-100 client-logo p-2"
|
|
alt="Hyrma Logo"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Fade>
|
|
|
|
<Fade>
|
|
<div className="text-center lg:flex justify-center">
|
|
<Button
|
|
standard
|
|
text="More About What We Do"
|
|
url="/services"
|
|
classes="rounded-full m-2 hover:shadow-md text-grey-darker hover:shadow"
|
|
/>
|
|
<Button
|
|
filled
|
|
text="Let's Get In Touch"
|
|
url="/contact"
|
|
classes="text-white shadow hover:shadow-md rounded-full m-2 font-light bg-teal hover:bg-teal-dark"
|
|
/>
|
|
</div>
|
|
</Fade>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="text-center p-4 relative">
|
|
<Fade>
|
|
<SectionIntro
|
|
h2Classes="py-8 text-2xl md:text-5xl"
|
|
headline="Sometimes 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">
|
|
<Link
|
|
to={`blog/${node.slug}`}
|
|
className="pointer no-underline saburly-transition hover:opacity-50"
|
|
>
|
|
<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
|
|
}
|
|
/>
|
|
</Link>
|
|
</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>
|
|
)
|
|
|
|
export const query = graphql`
|
|
query indexPostsQuery {
|
|
allWordpressPost(limit: 2) {
|
|
edges {
|
|
node {
|
|
id
|
|
title
|
|
excerpt
|
|
status
|
|
slug
|
|
date(formatString: "MMMM DD, YYYY")
|
|
featured_media {
|
|
localFile {
|
|
childImageSharp {
|
|
resolutions(width: 700, height: 300) {
|
|
src
|
|
width
|
|
height
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`
|
|
|
|
export default IndexPage
|