Files
old-v2-frontend/src/pages/services.js
2018-09-13 20:29:12 +02:00

178 lines
8.2 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
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 SEO from '../components/SEO'
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'
let headerClasses = "my-2 text-xl md:text-3xl font-medium text-black"
let textClasses="font-serif opacity-80 font-light leading-normal text-black-light text-lg"
const ServicesPage = () => (
<PageTransition>
<SEO siteTitle="Saburly - App Development & Mobile Design Services" siteDescription="At Saburly we embrace Agiles methodologies for every project and business environment, no matter the size, scale, or complexity" siteUrl="https://saburly.com/services" />
<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 Agiles 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"
/>
<section className="px-4 py-16">
<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"
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-8">
<h3 className={headerClasses}>
Conceptualization & Branding
</h3>
<p className="font-light font-serif opacity-80 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-8">
<h3 className={headerClasses}>
UX & UI Design
</h3>
<p className={textClasses}>
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>
</section>
<section className="bg-saburly relative bg-saburly-lighter px-4 p-16 ">
<div className="container mx-auto">
<div className="lg:flex">
<div>
<SectionIntro
h2Classes="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-8">
<h3 className={headerClasses}>
Web development
</h3>
<p className={textClasses}>
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-8">
<h3 className={headerClasses}>
Mobile & desktop apps
</h3>
<p className={textClasses}>
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-8">
<h3 className={headerClasses}>
DevOps
</h3>
<p className={textClasses}>
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>
<div className="p-8 my-4 bg-white border-bottom-saburly">
<h3 className={headerClasses}>Emerging Technologies</h3>
<p className={textClasses}>
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>
</div>
</section>
<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"
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>
</PageTransition>
)
export default ServicesPage