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.svg'
import UXdesign from '../images/ux-ui-design-services.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="relative">
      <div className="container mx-auto">
        <SectionIntro
          classes="text-center"
          headline="Full-stack software development"
        />
        <div className="flex">
          <img
            src={FullstackDev}
            className="w-full md:max-w-md mx-auto text-center content-center align-center p-8 -mb-16"
            alt="Fullstack Web Development Agency"
          />
          <div>
            <div className="border rounded p-4 my-4">
              <h3 className="opacity-30">Web Development</h3>
              <p className="font-light leading-normal opacity-70 mt-4">
                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. The solutions provided
                are both for custom web development solutions and extensions for
                third party solutions.
              </p>
            </div>
            <div className="border rounded p-4 my-4">
              <h3 className="opacity-30">Mobile & Desktop applications</h3>
              <p className="font-light leading-normal opacity-70 mt-4">
                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="border rounded p-4 my-4">
              <h3 className="opacity-30">AI & Blockchain</h3>
              <p className="font-light leading-normal opacity-70 mt-4">
                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>
        </div>
        <div className="border rounded p-4 my-4">
          <h3 className="opacity-30">Technologies</h3>
          <p className="font-light leading-normal opacity-70 mt-4">
            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>

    <section className="bg-saburly-fadeout-up">
      <div className="container mx-auto">
        <div className="md:flex">
          <SectionIntro
            classes="max-w-lg"
            headline="UX & UI Design"
            text="At Saburly, we offer consistent quality that extends to every section of the application development. All devices and screen sizes are welcome
            here."
          >
            <p className="font-light leading-normal opacity-70 mt-4">
              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.
            </p>
          </SectionIntro>
          <img src={UXdesign} alt="User Experience Design Agency" />
        </div>
      </div>
    </section>

    <div className="bg-saburly-fadeout-up p-4">
      <section className="container mx-auto mt-8 max-w-lg text-center">
        <SectionIntro
          headline="How We Work"
          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"
        />
      </section>
      <WorkStyle />
    </div>
  </div>
)

export default ServicesPage