old-v2-frontend/src/pages/about.js

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'
import Emil from '../images/manager-emil.svg'

const AboutPage = () => (
  <PageTransition>
    <Fade top>
      <PageIntro
        tiltImage
        headline="Founded by developers"
        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 border-8 rounded -mb-12"
      />
    </Fade>

    <section className="container mx-auto my-20 p-10">
      <Fade>
        <div className="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-grey-darkest text-center">
              Saburly comes from an old Bosnian saying and is about
            </p>
            <h5 className="text-center text-4xl italic font-light text-black">
              "Achieving success through patience, strategic planning and
              perseverance"
            </h5>
          </div>
        </div>
      </Fade>
    </section>

    <section className="container mx-auto my-20 p-4">
      <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 p-4 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" subtitle="CEO" />
          </div>
          <div className="md:w-1/3 p-2">
            <Card team teamMember={Senad} title="Senad Uka" subtitle="CTO" />
          </div>
          <div className="md:w-1/3 p-2">
            <Card
              team
              teamMember={Edin}
              title="Edin Dazdarevic"
              subtitle="COO"
            />
          </div>
          <div className="md:w-1/3 p-2">
            <Card
              team
              teamMember={Mediha}
              title="Edin Dazdarevic"
              subtitle="Developer"
            />
          </div>
          <div className="md:w-1/3 p-2">
            <Card
              team
              teamMember={Mirna}
              title="Edin Dazdarevic"
              subtitle="CEO"
            />
          </div>
          <div className="md:w-1/3 p-2">
            <Card
              team
              teamMember={Nina}
              title="Edin Dazdarevic"
              subtitle="CEO"
            />
          </div>
          <div className="md:w-1/3 p-2">
            <Card
              team
              teamMember={Bilal}
              title="Edin Dazdarevic"
              subtitle="CEO"
            />
          </div>
          <div className="md:w-1/3 p-2">
            <Card
              team
              teamMember={Almira}
              title="Edin Dazdarevic"
              subtitle="CEO"
            />
          </div>
          <div className="md:w-1/3 p-2">
            <Card
              team
              teamMember={Mickey}
              title="Miralem Halilovic"
              subtitle="Developer"
            />
          </div>
          <div className="md:w-1/3 p-2">
            <Card
              team
              teamMember={Nedim}
              title="Edin Dazdarevic"
              subtitle="CEO"
            />
          </div>
          <div className="md:w-1/3 p-2">
            <Card
              team
              teamMember={Emil}
              title="Emil"
              subtitle="Project Manager"
            />
          </div>
        </div>
      </Fade>
    </section>
  </PageTransition>
)

export default AboutPage