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'

const ServicesPage = () => (
  <div>
    <PageIntro
      intro="Services"
      headline="Creative digital agency"
      text="with a mission is to make our clients stand out"
      sectionClasses="mb-16 lg:mb-8"
    />

    <SectionIntro
      classes="text-center max-w-lg mx-auto"
      intro="Agile practitioners"
      headline="Software Development Services"
      text="Keeping track of emerging technologies is important to us so that we can deliver forward-thinking solutions. Our flexible agile development processes ensure high productivity and makes it easier to balance between cost, time and quality."
    />

    <section>
      <div className="container mx-auto">
        <div>
          <SectionIntro
            classes="max-w-lg"
            headline="Full-stack software development"
            text="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 className="font-light leading-normal opacity-70 mt-4">
              Building competitive applications these days is challenging. We
              have what it takes for both native languages and hybrid solutions.
              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>
          </SectionIntro>
          <Technologies />
        </div>
        <img src={FullstackDev} alt="Ricoh Logo" />
      </div>
    </section>

    <section className="container mx-auto mt-12 p-4">
      <div className="md:flex mt-4">
        <div className="bg-indigo shadow p-6 bg:indigo-light md:rounded-tl">
          <h3 className="text-l my-2 text-white">Modern Web Development</h3>
          <p className="leading-normal text-white opacity-80">
            We offer full-cycle web development services for the connected
            world. Our talented developers work with popular languages and are
            always up to speed with cutting edge trends in web development. We
            provide services for both custom web development solutions and
            extensions for third party solutions.
          </p>
        </div>

        <div className="bg-indigo shadow p-6">
          <h3 className="text-l text-white my-2">Mobile App Development</h3>
          <p className="leading-normal text-white opacity-80">
            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.
          </p>
        </div>

        <div className="bg-indigo shadow p-6 rounded-tr">
          <h3 className="text-l my-2 text-white">UX & UI Design</h3>
          <p className="leading-normal text-white opacity-80">
            Our approach is simple: focus on how users might use the product in
            the best way possible. We offer UX and interface design for all
            screens and devices. The solutions are usually shaped through
            iterative processes of research, prototyping and testing.
          </p>
        </div>
      </div>
      <div className="border border-indigo mb-8 rounded-b p-4 shadow">
        <SectionIntro
          headline="Technologies"
          classes="text-center text-l max-w-lg mx-auto"
          text="We understand that technologies are just tools, so we tend to be framework agnostic and select the best tools for your needs. These are the technologies that we're currently working with on a daily basis."
        />
        <Technologies />
      </div>
    </section>

    <div className="bg-grey-lighter 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