|
|
import React, {useState} from 'react'
|
|
|
|
|
|
import Step from './Step/Step'
|
|
|
import Line from '../../images/line.svg'
|
|
|
|
|
|
const Main = ({props}) => {
|
|
|
const [steps] = useState([
|
|
|
{id: 0, title: "Составление технического задания", ml: '0'},
|
|
|
{id: 1, title: "Детализация запроса", ml: '20'},
|
|
|
{id: 2, title: "Подготовительный этап", ml: '40'},
|
|
|
{id: 3, title: "Проведении сессии", ml: '60'},
|
|
|
{id: 4, title: "Заключительный этап", ml: '80'},
|
|
|
]);
|
|
|
|
|
|
return (
|
|
|
<section {...props} className='bg-white relative py-32 max-md:py-16'>
|
|
|
<div className="container mx-auto px-32 max-lg:px-3 relative">
|
|
|
<h2 className='text-3xl max-md:text-2xl mb-5 font-semibold text-slate-800 text-center uppercase'>Фасилитации</h2>
|
|
|
<h3 className='text-xl max-md:text-lg mb-20 max-md:mb-10 font-medium text-slate-800 text-center uppercase'>Вы можете доверить проведение сессии нам — профессиональным фасилитаторам</h3>
|
|
|
<div className='flex max-lg:flex-col'>
|
|
|
<div className="basis-1/2">
|
|
|
<p className='text-base mb-5'><b>Фасилитация</b> (англ. facilitate – облегчать, помогать) – профессиональная организация процесса групповой работы, направленная на обсуждение, прояснение и достижение группой поставленных заказчиком целей, при полной нейтральности фасилитатора к контенту обсуждения.</p>
|
|
|
<p className='text-2xl max-md:text-xl max-lg:mb-8 font-semibold text-gray-800 '>Проект проведения любой фасилитационной сессии обычно состоит из 5 этапов:</p>
|
|
|
<img className='absolute bottom-0 max-lg:hidden max-xl:w-[540px] max-2xl:w-[720px]' src={Line} alt="wave"/>
|
|
|
</div>
|
|
|
<div className="flex justify-end max-lg:justify-start basis-1/2">
|
|
|
<div className="flex flex-col">
|
|
|
{steps.map((step, count)=>
|
|
|
<Step initial={{ y: -50, opacity: 0 }} whileInView={{ y: 0, opacity: 1 }} transition={{ delay:count*0.1, duration: 0.5 }} viewport={{ once: true }} key={step.id} ml={step.ml} title={step.title} ico={step.ico} count={count+1}></Step>
|
|
|
)}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
)
|
|
|
}
|
|
|
|
|
|
export default Main |