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 IntroImage from '../images/web-development-consultants.jpg'
import MeaningSaburly from '../images/coding-tutorials-patience.svg'

import Nina from '../images/ux-developer-nina.jpg'

const AboutPage = () => (
  <PageTransition>
    <Fade top>
      <PageIntro
        tiltImage
        headline="Founded by developers"
        text="Saburly was founded in 2017 by experienced software developers that understand what it takes to create modern digital solutions. Our focus is on gathering and mentoring the best talents in the industry in order to create digital experiences that make valuable impact."
        image={IntroImage}
        imgClasses="border-white border-8 rounded -mb-12"
      />
    </Fade>

    <section className="container mx-auto my-12 p-4">
      <Fade left>
        <div className="md:flex justify-center items-center">
          <img
            src={MeaningSaburly}
            className="hidden lg:block max-h-xs"
            alt="User Experience Design Agency"
          />
          <SectionIntro
            h2Classes="text-4xl"
            headline="Meaning"
            text="...Patience. ...Our goal is long-term engagement."
          />
        </div>
      </Fade>
    </section>

    <section className="container mx-auto my-12 p-4">
      <Fade>
        <SectionIntro
          h2Classes="text-5xl"
          headline="The Team"
          text="We are a small company with a personal touch that knows our stuff. Our team consists of handpicked expert software developers, designers and system architects - all highly motivated to help you succeed."
        />

        <div className="w-1/2 lg:flex">
          <div
            className="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden"
            style={{
              backgroundImage: `url(${Nina})`,
            }}
            title="Woman holding a mug"
          />
          <div className="border-r border-b border-l border-grey-light lg:border-l-0 lg:border-t lg:border-grey-light bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
            <div className="mb-8">
              <div className="text-black font-bold text-xl">Nina</div>
              <p className="text-sm text-grey-dark flex items-center">
                UX & UI Designer
              </p>
              <p className="text-grey-darker text-base py-2">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Voluptatibus quia, nulla! Maiores et perferendis eaque,
                exercitationem praesentium nihil.
              </p>
            </div>
            <div className="flex items-center">
              <div className="text-sm">
                <p className="text-black leading-none">Favorite Technologies</p>
                <p className="text-grey-dark">Sketch, Adobe</p>
              </div>
            </div>
          </div>
        </div>
      </Fade>
    </section>
  </PageTransition>
)

export default AboutPage