80 lines
3.1 KiB
TypeScript
80 lines
3.1 KiB
TypeScript
import { Box, Image, SimpleGrid } from '@chakra-ui/react'
|
|
import { motion, useInView } from 'framer-motion'
|
|
import { useRef } from 'react'
|
|
|
|
const MotionImage = motion.create(Image)
|
|
const MotionBox = motion.create(Box)
|
|
const MotionSimpleGrid = motion.create(SimpleGrid)
|
|
|
|
function OilInfo() {
|
|
const mainRef = useRef(null);
|
|
const isMainInView = useInView(mainRef, { once: true });
|
|
|
|
return (
|
|
<MotionBox
|
|
ref={mainRef}
|
|
position="relative"
|
|
w="100%"
|
|
bgColor="#FFFBD3"
|
|
zIndex={3}
|
|
overflow="hidden"
|
|
initial={{ opacity: 0 }}
|
|
animate={isMainInView ? { opacity: 1 } : { opacity: 0 }}
|
|
transition={{ duration: 0.8, ease: "easeOut" }}
|
|
>
|
|
|
|
<MotionSimpleGrid
|
|
columns={{ base: 1, sm: 1, md: 2 }}
|
|
p={{ base: 10, sm: 20, md: 20 }}
|
|
w={{ base: '100%', sm: '100%', md: '100%', lg: '70%', xl: '60%' }}
|
|
h={'auto'}
|
|
gap={{ base: 10, md: 0 }}
|
|
mx="auto"
|
|
justifyItems={'center'}
|
|
alignItems={'center'}
|
|
initial={{ opacity: 0, y: 50 }}
|
|
animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
|
|
transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
|
|
>
|
|
|
|
<MotionBox
|
|
justifyItems={'center'}
|
|
alignItems={'center'}
|
|
initial={{ opacity: 0, x: -50 }}
|
|
animate={isMainInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -50 }}
|
|
transition={{ duration: 0.6, delay: 0.4, ease: "easeOut" }}
|
|
>
|
|
<MotionImage
|
|
src='/images/cookmethods.webp'
|
|
alt='cooking methods'
|
|
w={{ base: '100%', sm: '90%', md: '85%' }}
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
|
|
transition={{ duration: 0.5, delay: 0.6, ease: "easeOut" }}
|
|
/>
|
|
</MotionBox>
|
|
|
|
<MotionBox
|
|
justifyItems={'center'}
|
|
alignItems={'center'}
|
|
initial={{ opacity: 0, x: 50 }}
|
|
animate={isMainInView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
|
|
transition={{ duration: 0.6, delay: 0.8, ease: "easeOut" }}
|
|
>
|
|
<MotionImage
|
|
src='/images/new/recipe_button.webp'
|
|
w={{ base: '100%', sm: '90%', md: '85%' }}
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
|
|
transition={{ duration: 0.5, delay: 1.0, ease: "easeOut" }}
|
|
/>
|
|
</MotionBox>
|
|
|
|
|
|
</MotionSimpleGrid>
|
|
|
|
</MotionBox>
|
|
)
|
|
}
|
|
|
|
export default OilInfo; |