old-v2-frontend/src/pages/services.js

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 FullstackDev from '../images/fullstack-web-development.svg'
import WebdevServices from '../images/web-development-services-company.svg'
import UXdesign from '../images/ux-ui-design-services.svg'
import HowWeWork from '../images/how-we-work.svg'

const ServicesPage = () => (
  <div>
    <PageIntro
      button
      buttonText="Let's Connect"
      url="/contact"
      buttonClasses="text-white font-normal shadow hover:shadow-md rounded-full mt-4 font-light bg-teal hover:bg-teal-dark mb-20"
      intro="What We Do"
      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."
      sectionClasses="pt-10"
      image={WebdevServices}
      imgClasses="-mb-16 md:-mt-6"
    />
    <section className="py-16">
      <div className="container mx-auto">
        <div className="lg:flex">
          <SectionIntro
            classes="max-w-lg"
            headline="Design services"
            text="At Saburly, 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
              through iterative processes of research, prototyping and
              testing. All devices and screen sizes are welcome
          here."
          >
            <div className="my-4">
              <h3 className="font-medium text-black">
                Conceptualization & Branding
              </h3>
              <p className="font-light leading-normal text-black-light">
                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-4">
              <h3 className="font-medium text-black">UX & UI Design</h3>
              <p className="font-light leading-normal text-black-light">
                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>
          <img
            src={UXdesign}
            className="-mt-12"
            alt="User Experience Design Agency"
          />
        </div>
      </div>
    </section>

    <section className="relative bg-saburly-lighter py-16">
      <div className="container mx-auto">
        <div className="lg:flex">
          <img
            src={FullstackDev}
            className="w-full md:max-w-md mx-auto text-center content-center align-center p-8"
            alt="Fullstack Web Development Agency"
          />
          <div>
            <SectionIntro
              headline="Full-stack software development"
              text="From infrastructure to AI, we develop data-driven Full-Stack applications for both custom software and third party solutions."
            />
            <div className="my-4">
              <h3 className="font-medium text-black">Web development</h3>
              <p className="font-light leading-normal 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="font-medium text-black">Mobile & desktop apps</h3>
              <p className="font-light leading-normal 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. Native mobile solutions for iOS are built
                with Swift & Objective-C and Android solutions are built with
                Java & Kotlin. We love using technologies like React Native and
                Electron to build cross-platform apps.
              </p>
            </div>
            <div className="my-4">
              <h3 className="font-medium text-black">DevOps</h3>
              <p className="font-light leading-normal text-black-light">
                Our DevOps team has experience working with the world 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>
        <div className="p-8 my-4 bg-white border-bottom-saburly">
          <h3 className="font-medium text-black">Emerging Technologies</h3>
          <p className="font-light text-black-light leading-normal">
            We harness a wide array of emerging technologies, such as AR/VR, AI
            technologies, Machine Learning and Blockchain, 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="py-16 bg-saburly-fadeout">
      <div className="container mx-auto lg:flex">
        <SectionIntro
          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
          collaborate closely with our clients at each step of the
          development process and make sure that the solutions deliver great
          value and meets your specific business requirements"
          classes="container mx-auto"
        />
        <img src={HowWeWork} className="lg:-mt-12" alt="DevOps Agency" />
      </div>
      <WorkStyle />
    </div>
  </div>
)

export default ServicesPage