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

import PageTransition from 'gatsby-plugin-page-transitions'
import Card from '../components/Card'
import SEO from '../components/SEO'

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 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>
    <SEO
      siteTitle="Saburly - About Us"
      siteDescription="Saburly was founded by senior tech leads that understand what it takes to create modern digital solutions"
      siteUrl="https://saburly.com/about"
    />
    <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 -mb-12"
    />

    <section className="container mx-auto p-4 md:p-0 my-20">
      <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-3xl italic font-light text-black text-white opacity-100 font-serif px-2">
            "Achieving success through patience, strategic planning and
            perseverance"
          </h5>
        </div>
      </div>
    </section>

    <section className="container mx-auto my-20">
      <SectionIntro
        classes="max-w-lg mx-auto"
        h2Classes="text-5xl text-center"
        headline="Team Saburly"
        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"
      />
      <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 unshadowed teamMember={Senad} title="Senad" />
        </div>
        <div className="md:w-1/3 p-2">
          <Card team unshadowed teamMember={Edin} title="Edin" />
        </div>
        <div className="md:w-1/3 p-2">
          <Card team unshadowed teamMember={Mediha} title="Mediha" />
        </div>
        <div className="md:w-1/3 p-2">
          <Card team unshadowed teamMember={Mirna} title="Mirna" />
        </div>
        <div className="md:w-1/3 p-2">
          <Card team unshadowed teamMember={Nina} title="Nina" />
        </div>
        <div className="md:w-1/3 p-2">
          <Card team unshadowed teamMember={Bilal} title="Bilal" />
        </div>
        <div className="md:w-1/3 p-2">
          <Card team unshadowed teamMember={Almira} title="Almira" />
        </div>
        <div className="md:w-1/3 p-2">
          <Card team unshadowed teamMember={Mickey} title="Miralem" />
        </div>
        <div className="md:w-1/3 p-2">
          <Card team unshadowed teamMember={Nedim} title="Nedim" />
        </div>
      </div>
    </section>
  </PageTransition>
)

export default AboutPage
