import React, { Component } from 'react'
import PageIntro from '../components/PageIntro'
import SectionIntro from '../components/SectionIntro'

import PageTransition from 'gatsby-plugin-page-transitions'
import Fade from 'react-reveal/Fade'
import Card from '../components/Card'

import IntroImage from '../images/web-development-consultants.jpg'
import MeaningSaburly from '../images/coding-tutorials-patience.svg'

import Nina from '../images/ux-designer-nina.jpg'
import Edin from '../images/coo-edin.jpg'
import Moris from '../images/ceo-moris.jpg'
import Senad from '../images/cto-senad.jpg'
import Bilal from '../images/developer-bilal.jpg'
import Mediha from '../images/developer-mediha.jpg'
import Almira from '../images/developer-almira.jpg'
import Mirna from '../images/developer-mirna.jpg'
import Mickey from '../images/developer-mickey.svg'
import Nedim from '../images/developer-nedim.svg'

const AboutPage = () => (
  <PageTransition>
    <Fade top>
      <PageIntro
        tiltImage
        headline="We know software"
        text="Saburly was founded by senior tech leads that understand what it takes to create modern digital solutions. We have managed large software development teams for successful companies in the past and are now recruiting and mentoring the best talents in the industry for Saburly."
        image={IntroImage}
        imgClasses="border-white rounded-lg opacity-70 hover:opacity-100 -mb-12"
      />
    </Fade>

    <section className="container mx-auto p-4 md:p-0 my-20">
      <Fade>
        <div className="saburly-main-bg rounded-lg p-10 text-center lg:flex justify-center items-center">
          <img
            src={MeaningSaburly}
            className="max-h-xs"
            alt="User Experience Design Agency"
          />
          <div>
            <p className="py-2 font-light text-white opacity-80 text-center">
              Saburly comes from an old Bosnian saying and is about
            </p>
            <h5 className="text-center text-xl md:text-2xl lg:text-4xl italic font-light text-black text-white opacity-100">
              "Achieving success through patience, strategic planning and
              perseverance"
            </h5>
          </div>
        </div>
      </Fade>
    </section>

    <section className="container mx-auto my-20">
      <Fade>
        <SectionIntro
          classes="max-w-lg mx-auto"
          h2Classes="text-5xl text-center"
          headline="The Team"
          text="We are a small company with a personal touch that knows our stuff. Our team consists of expert developers and designers, all highly motivated to help you succeed."
          textClasses="text-center"
        />
      </Fade>
      <Fade>
        <div className="container mx-auto w-full md:flex md:flex-wrap items-stretch w-full">
          <div className="md:w-1/3 p-2">
            <Card team teamMember={Moris} title="Moris Pasic" />
          </div>
          <div className="md:w-1/3 p-2">
            <Card team teamMember={Senad} title="Senad Uka" />
          </div>
          <div className="md:w-1/3 p-2">
            <Card team teamMember={Edin} title="Edin Dazdarevic" />
          </div>
          <div className="md:w-1/3 p-2">
            <Card team teamMember={Mediha} title="Mediha Zukic" />
          </div>
          <div className="md:w-1/3 p-2">
            <Card team teamMember={Mirna} title="Mirna Milic" />
          </div>
          <div className="md:w-1/3 p-2">
            <Card team teamMember={Nina} title="Nina Juresic" />
          </div>
          <div className="md:w-1/3 p-2">
            <Card team teamMember={Bilal} title="Bilal Catic" />
          </div>
          <div className="md:w-1/3 p-2">
            <Card team teamMember={Almira} title="Almira Krdzic" />
          </div>
          <div className="md:w-1/3 p-2">
            <Card team teamMember={Mickey} title="Miralem Halilovic" />
          </div>
          <div className="md:w-1/3 p-2">
            <Card team teamMember={Nedim} title="Nedim Uka" />
          </div>
        </div>
      </Fade>
    </section>
  </PageTransition>
)

export default AboutPage