import React from 'react'

import PageIntro from '../components/PageIntro'
import SectionIntro from '../components/SectionIntro'
import WorkStyle from '../components/WorkStyle'

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

    <section className="container max-w-lg mx-auto my-12 p-4">
      <SectionIntro classes="text-center mb-8" headline="Software Development Services" text="We have experiences with a wide variety of industries and are always keeping track of emerging technologies so that we can deliver forward-thinking solutions. Our developers are handpicked with care to ensure that we always deliver top-notch software quality. With our agile development process we can ensure high productivity and know how to balance between cost, time and quality." />
      
      <div className="my-4 mx-auto border shadow-md p-6 rounded">
      <h3 className="text-l my-2">Modern Web Development</h3>
      <p className="leading-normal">
        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="my-4 mx-auto border shadow-md p-6 rounded">
      <h3 className="text-l my-2">Mobile App Development</h3>
      <p className="leading-normal">
       Info...
      </p>
    </div>

    <div className="my-4 mx-auto border shadow-md p-6 rounded">
      <h3 className="text-l my-2">AI & Automation</h3>
      <p className="leading-normal">
        Info...
      </p>
    </div>

    <div className="my-4 mx-auto border shadow-md p-6 rounded">
      <h3 className="text-l my-2">Blockchain & Distributed Applications</h3>
      <p className="leading-normal">
        Info...
      </p>
    </div>

    <div className="my-4 mx-auto border shadow-md p-6 rounded">
      <h3 className="text-l my-2">UX & UI Design</h3>
      <p className="leading-normal">
        Info...
      </p>
    </div>

      <SectionIntro classes="text-center my-12" headline="Technologies" text="We understand that technologies are just tools and select the appropriate tool for your needs. These are the technologies that we're currently working with on a daily basis." />      
    </section>

    <div className="bg-grey-lighter p-10">
      <section className="container mx-auto max-w-lg text-center">
        <SectionIntro
          headline="How We Work"
          text="We are serving 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 delivery great value and meet your specific business requirements"
        />
      </section>
      <WorkStyle />
    </div>
  </div>
)

export default ServicesPage