import React, { Component } from 'react'

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

import IntroImage from '../images/saburly-web-agency-group.jpg'

class AboutPage extends Component {
  componentDidMount() {
    let tiltjs = require('vanilla-tilt')
    tiltjs.init(document.querySelector('.postImgContainer'), {
      max: 25,
      speed: 400,
    })
  }

  render() {
    return (
      <div>
        <PageIntro
          headline="Founded by developers"
          text="Saburly was born in 2017 by experienced developers. We know the challenges and pitfalls when creating modern software. Focused on creating solutions that make valuable impact"
          image={IntroImage}
          imgClasses="border-white border-8 rounded postImgContainer -mb-12"
        />

        <section className="container mx-auto my-12 p-4">
          <SectionIntro
            headline="Meaning of Saburly"
            text="Patience = Our goal is long-term engagement."
          />
        </section>

        <section className="container mx-auto my-12 p-4">
          <SectionIntro
            headline="The Team"
            text="We are a small company with a personal touch that knows our stuff. Our people have T-shaped profiles which means that they combine a deep specialism with a broad range of knowledge and skills."
          />
        </section>
      </div>
    )
  }
}

export default AboutPage