182 lines
8.4 KiB
JavaScript
182 lines
8.4 KiB
JavaScript
import React from 'react'
|
||
import Link from 'gatsby-link'
|
||
|
||
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'
|
||
import UXdesign from '../images/user-experience-design-services.svg'
|
||
import HowWeWork from '../images/custom-software-workflow.svg'
|
||
|
||
import PageTransition from 'gatsby-plugin-page-transitions'
|
||
|
||
const ServicesPage = () => (
|
||
<PageTransition>
|
||
<PageIntro
|
||
tiltImage
|
||
straight
|
||
buttonClasses="text-white font-normal shadow hover:shadow-md rounded-full mt-4 font-light bg-teal hover:bg-teal-dark mb-20"
|
||
headline="Agile practitioners"
|
||
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."
|
||
image={IntroImage}
|
||
imgClasses="-mb-12 border-white rounded-lg opacity-100 lg:opacity-70 hover:opacity-100"
|
||
/>
|
||
<section className="px-4 py-16">
|
||
<Fade>
|
||
<div className="container mx-auto">
|
||
<div className="lg:flex">
|
||
<img
|
||
src={UXdesign}
|
||
className="hidden md:mr-8 lg:block -mt-12"
|
||
alt="User Experience Design Agency"
|
||
/>
|
||
|
||
<SectionIntro
|
||
h2Classes="text-3xl md:text-5xl saburly-color font-light"
|
||
classes="lg:my-20 max-w-lg"
|
||
headline="Design services"
|
||
text="We offer consistent quality design 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
|
||
through iterative processes of research, prototyping and
|
||
testing. All devices and screen sizes are welcome
|
||
here."
|
||
>
|
||
<img
|
||
src={UXdesign}
|
||
className="lg:hidden p-8 mx-auto w-full -mt-12"
|
||
alt="User Experience Design Agency"
|
||
/>
|
||
|
||
<div className="my-6">
|
||
<h3 className="font-medium lg:font-light my-1 text-xl md:text-3xl font-light">
|
||
Conceptualization & Branding
|
||
</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.
|
||
</p>
|
||
</div>
|
||
<div className="my-6">
|
||
<h3 className="text-black font-medium lg:font-light my-1 text-xl md:text-3xl font-light">
|
||
UX & UI Design
|
||
</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.
|
||
</p>
|
||
</div>
|
||
</SectionIntro>
|
||
</div>
|
||
</div>
|
||
</Fade>
|
||
</section>
|
||
|
||
<section className="bg-saburly relative bg-saburly-lighter px-4 p-16 ">
|
||
<div className="container mx-auto">
|
||
<Fade>
|
||
<div className="lg:flex">
|
||
<div>
|
||
<SectionIntro
|
||
h2Classes="font-light saburly-color text-3xl md:text-5xl"
|
||
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-6">
|
||
<h3 className="my-1 text-black font-medium lg:font-light text-xl md: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-6">
|
||
<h3 className="my-1 text-black font-medium lg:font-light text-xl md: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-6">
|
||
<h3 className="my-1 text-black font-medium lg:font-light text-xl md: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
|
||
src={WebdevServices}
|
||
className="hidden lg:block w-full max-h-35 mx-auto text-center content-center align-center p-8"
|
||
alt="Fullstack Web Development Agency"
|
||
/>
|
||
</div>
|
||
</Fade>
|
||
<Fade>
|
||
<div className="p-8 my-4 bg-white border-bottom-saburly">
|
||
<h3 className="my-4 text-black text-3xl">Emerging Technologies</h3>
|
||
<p className="font-light leading-normal text-black-light text-lg">
|
||
We harness a wide array of emerging technologies, such as{' '}
|
||
<strong>AR/VR</strong>, <strong>AI technologies</strong>,{' '}
|
||
<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.
|
||
</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
|
||
h2Classes="text-3xl md:text-5xl saburly-color font-light"
|
||
headline="Flexible Workflow"
|
||
text="We are helping everything from Fortune 500 companies to startups
|
||
and tailor our processes based on your scale and needs. "
|
||
classes="container mx-auto"
|
||
/>
|
||
<img src={HowWeWork} className="w-full -mb-16" alt="DevOps Agency" />
|
||
</div>
|
||
<WorkStyle />
|
||
</div>
|
||
</Fade>
|
||
</PageTransition>
|
||
)
|
||
|
||
export default ServicesPage
|