@ -1,12 +1,11 @@
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" ;
import { Link as AnchorLink , animateScroll as scroll , scroller } from "react-scroll" ;
import { Link as AnchorLink } from "react-scroll" ;
const Hero = ( { ... props } ) => {
const images = useStaticQuery ( graphql `
@ -33,8 +32,8 @@ const Hero = ({...props}) => {
return (
< >
< section { ...props } 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 ">
< section { ...props } className = 'pt-28 flex h-[calc(100vh-36px)] pb-16 relative mt-9 min-h-[650px] '>
< div className = "container max-sm:px-3 mx-auto items-center flex justify-center relative ">
< div className = "flex flex-col items-center max-w-5xl pb-16" >
< TypeAnimation
sequence = { [
@ -45,21 +44,21 @@ const Hero = ({...props}) => {
] }
wrapper = "h1"
cursor = { true }
className = 'text-5xl leading-snug font-semibold mb-6 text-white text-center uppercase'
className = 'text-5xl max-sm:text-2xl max-lg:text-4xl leading-snug font-semibold mb-6 text-white text-center uppercase'
/ >
< p className = 'text-xl m b-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 >
< p className = 'text-xl m ax-sm:text-base max-lg:text-lg m b-6 text-white text-center'> Мы специализируемся на разработке и проведении деловых игр , тренингов , бизнес - симуляций , корпоративных мероприятий направленных на : < / p >
< ul className = 'flex max-sm:flex-col '>
< li className = "flex items-center text-lg max-md:text-base text-white sm: mr-5"> < AiFillCheckCircle className = 'mr-2 text-green-500' / > оценку < / li >
< li className = "flex items-center text-lg max-md:text-base text-white sm: mr-5"> < AiFillCheckCircle className = 'mr-2 text-green-500' / > обучение < / li >
< li className = "flex items-center text-lg max-md:text-base text-white"> < AiFillCheckCircle className = 'mr-2 text-green-500' / > развитие < / li >
< / ul >
< / div >
< / div >
< AnchorLink to = "advantages" smooth = { true } className = "cursor-pointer 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 >
< AnchorLink to = "advantages" smooth = { true } className = "cursor-pointer absolute bottom-16 left-1/2 -translate-x-1/2 w-16 h-16 max-sm:w-12 max-sm:h-12 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 max-sm:text-base '> < / SlArrowDown > < / motion.div >
< / AnchorLink >
< 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 >
< 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 max-sm:bg-center 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 max-sm:bg-center 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 >
< / >
) ;
