|
|
import React, { useState } from 'react'
|
|
|
import { useStaticQuery, graphql } from "gatsby"
|
|
|
|
|
|
import Person from './Person'
|
|
|
|
|
|
const Team = ({...props}) => {
|
|
|
|
|
|
const images = useStaticQuery(graphql`
|
|
|
query {
|
|
|
krasavin: file(relativePath: {eq: "team/krasavin.jpg"}) {
|
|
|
childImageSharp {
|
|
|
gatsbyImageData(formats: WEBP, quality: 90)
|
|
|
}
|
|
|
},
|
|
|
rovenskaya: file(relativePath: {eq: "team/rovenskaya.jpg"}) {
|
|
|
childImageSharp {
|
|
|
gatsbyImageData(formats: WEBP, quality: 90)
|
|
|
}
|
|
|
},
|
|
|
kryukova: file(relativePath: {eq: "team/kryukova.jpg"}) {
|
|
|
childImageSharp {
|
|
|
gatsbyImageData(formats: WEBP, quality: 90)
|
|
|
}
|
|
|
},
|
|
|
yazikov: file(relativePath: {eq: "team/yazikov.jpg"}) {
|
|
|
childImageSharp {
|
|
|
gatsbyImageData(formats: WEBP, quality: 90)
|
|
|
}
|
|
|
},
|
|
|
}`);
|
|
|
|
|
|
const [persons] = useState([
|
|
|
{id: 1, name: 'Алексей Красавин', post: 'Инвестор идей💡.\nПродюсер корпоративных мероприятий.', img: images.krasavin},
|
|
|
{id: 2, name: 'Мария Ровенская - Тарасова ', post: 'Менеджер крутых проектов, Методолог игр.', img: images.rovenskaya},
|
|
|
{id: 3, name: 'Алёна Крюкова', post: 'Фасилитатор, бизнес -тренер, игротехник, разработчик корпоративных мероприятий.', img: images.kryukova},
|
|
|
{id: 4, name: 'Евгений Языков', post: 'Профессиональный ведущий', img: images.yazikov},
|
|
|
]);
|
|
|
|
|
|
return (
|
|
|
<section {...props} className='py-32 max-md:py-16 max-md:px-3 bg-[#0E0808]'>
|
|
|
<div className="container mx-auto">
|
|
|
<h2 className='text-3xl max-md:text-2xl mb-12 max-md:mb-6 font-semibold text-white text-center uppercase'>Наша команда</h2>
|
|
|
<div className="flex max-sm:flex-col sm:max-lg:flex-wrap">
|
|
|
{persons.map((person, index)=>
|
|
|
<Person initial={{ x: -100, opacity: 0 }} whileInView={{ x: 0, opacity: 1 }} transition={{ delay:index*0.1, duration: 0.5 }} viewport={{ once: true }} key={person.id} name={person.name} post={person.post} img={person.img}></Person>
|
|
|
)}
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
)
|
|
|
}
|
|
|
|
|
|
export default Team |