|
|
import React from 'react';
|
|
|
import { AiFillCheckCircle } from "react-icons/ai";
|
|
|
import Button from './UI/Button';
|
|
|
import { useStaticQuery, graphql } from "gatsby"
|
|
|
import { getImage } from 'gatsby-plugin-image';
|
|
|
import { TypeAnimation } from 'react-type-animation';
|
|
|
import { motion } from "framer-motion"
|
|
|
import { SlArrowDown } from "react-icons/sl";
|
|
|
|
|
|
|
|
|
const Hero = () => {
|
|
|
const images = useStaticQuery(graphql`
|
|
|
query {
|
|
|
hero1: file(relativePath: {eq: "hero1.jpg"}) {
|
|
|
childImageSharp {
|
|
|
gatsbyImageData(formats: WEBP, quality: 90)
|
|
|
}
|
|
|
},
|
|
|
hero2: file(relativePath: {eq: "hero2.jpg"}) {
|
|
|
childImageSharp {
|
|
|
gatsbyImageData(formats: WEBP, quality: 90)
|
|
|
}
|
|
|
},
|
|
|
}`);
|
|
|
return (
|
|
|
<>
|
|
|
<section className='pt-28 flex h-[calc(100vh-36px)] pb-16 relative mt-9'>
|
|
|
<div className="container px-8 mx-auto items-center flex justify-center relative ">
|
|
|
<div className="flex flex-col items-center max-w-5xl pb-16">
|
|
|
<TypeAnimation
|
|
|
sequence={[
|
|
|
'Мы помогаем создавать команды.',
|
|
|
2000,
|
|
|
'Лидер рынка по разработке корпоративных мероприятий и бизнес-геймификаций.',
|
|
|
2000,
|
|
|
]}
|
|
|
wrapper="h1"
|
|
|
cursor={true}
|
|
|
className='text-5xl leading-snug font-semibold mb-6 text-white text-center uppercase'
|
|
|
/>
|
|
|
<p className='text-xl mb-6 text-white text-center'>Мы специализируемся на разработке и проведении деловых игр, тренингов, бизнес-симуляций, корпоративных мероприятий направленных на:</p>
|
|
|
<ul className='flex'>
|
|
|
<li className="flex items-center text-lg text-white mr-5"><AiFillCheckCircle className='mr-2 text-green-500'/>оценку</li>
|
|
|
<li className="flex items-center text-lg text-white mr-5"><AiFillCheckCircle className='mr-2 text-green-500'/>обучение</li>
|
|
|
<li className="flex items-center text-lg text-white"><AiFillCheckCircle className='mr-2 text-green-500'/>развитие</li>
|
|
|
</ul>
|
|
|
<Button className="max-w-[210px] mt-5">О компании</Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="absolute bottom-16 left-1/2 -translate-x-1/2 w-16 h-16 border-white border-2 rounded-full flex items-center justify-center">
|
|
|
<motion.div animate={{y: [0, 5, 0],}} transition={{ ease: "linear", duration: 2, repeat: Infinity }}><SlArrowDown className='text-white text-xl'></SlArrowDown></motion.div>
|
|
|
</div>
|
|
|
<motion.div animate={{ opacity: 0 }} transition={{ delay: 5.5 }} style={{'--image-url': `url(${getImage(images.hero1).images.fallback.src})`}} className="-z-10 bg-fixed absolute w-full h-full top-0 bg-no-repeat bg-cover left-0 bg-[linear-gradient(to_bottom,rgba(14,8,8,0.52),rgba(14,8,8,1)),var(--image-url)]"></motion.div>
|
|
|
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 5.6 }} style={{'--image-url': `url(${getImage(images.hero2).images.fallback.src})`}} className="-z-10 bg-fixed bg-no-repeat bg-cover absolute w-full h-full top-0 left-0 bg-[linear-gradient(to_bottom,rgba(14,8,8,0.52),rgba(14,8,8,1)),var(--image-url)]"></motion.div>
|
|
|
</section>
|
|
|
</>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
export default Hero;
|