72 lines
2.8 KiB
TypeScript
72 lines
2.8 KiB
TypeScript
import { Box, Stack, Image } from '@chakra-ui/react'
|
|
import { motion } from 'framer-motion'
|
|
|
|
const MotionImage = motion.create(Image)
|
|
|
|
function Hero2() {
|
|
return (
|
|
<Box
|
|
position="relative"
|
|
w="100%"
|
|
alignItems={"center"}
|
|
justifyContent={"center"}
|
|
|
|
>
|
|
<Stack gap={0}>
|
|
<Stack
|
|
position="relative"
|
|
w="100%"
|
|
minH={{ base: "110vw", sm: "110vw", md: "72vw", lg: "66vw", xl: "50vw" }}
|
|
bgImage={"url('/images/new/hero2bg.webp')"}
|
|
bgSize="cover"
|
|
backgroundPosition="center"
|
|
justifyItems={'center'}
|
|
bgRepeat="no-repeat"
|
|
|
|
>
|
|
|
|
<MotionImage
|
|
src="/images/new/hero2title.webp"
|
|
position={'absolute'}
|
|
left="50%"
|
|
top={{ base: "10px", sm: "20px", md: "30px", lg: "30px", xl: "40px" }}
|
|
w={{ base: "70vw", sm: "70vw", md: "35vw", lg: "35vw", xl: "28vw" }}
|
|
initial={{ opacity: 0, y: -30, x: '-50%' }}
|
|
whileInView={{ opacity: 1, y: 0, x: '-50%' }}
|
|
viewport={{ once: true, amount: 0.3 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
/>
|
|
<MotionImage
|
|
src="/images/new/hero2subtitle.webp"
|
|
position={'absolute'}
|
|
zIndex={1}
|
|
top={{ base: "30vw", sm: "30vw", md: "17vw", lg: "15vw", xl: "12vw" }}
|
|
right={{ base: "55vw", sm: "55vw", md: "24vw", lg: "25vw", xl: "30vw" }}
|
|
w={{ base: "30vw", sm: "30vw", md: "22vw", lg: "22vw", xl: "18vw" }}
|
|
initial={{ opacity: 0, x: 30 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true, amount: 0.3 }}
|
|
transition={{ duration: 0.8, delay: 0.5 }}
|
|
/>
|
|
|
|
<MotionImage
|
|
src="/images/new/oil_new.webp"
|
|
zIndex={0}
|
|
position={'absolute'}
|
|
left="50%"
|
|
bottom={0}
|
|
w={{ base: "85vw", sm: "85vw", md: "58vw", lg: "53vw", xl: "40vw" }}
|
|
initial={{ opacity: 0, y: 50, x: '-50%' }}
|
|
whileInView={{ opacity: 1, y: 0, x: '-50%' }}
|
|
viewport={{ once: true, amount: 0.3 }}
|
|
transition={{ duration: 0.8, delay: 0.5 }}
|
|
/>
|
|
|
|
</Stack>
|
|
|
|
</Stack>
|
|
|
|
</Box >
|
|
);
|
|
}
|
|
export default Hero2; |