118 lines
4.9 KiB
TypeScript
118 lines
4.9 KiB
TypeScript
import { Box, Stack, SimpleGrid, Image as ChakraImage, Flex, useBreakpointValue } from '@chakra-ui/react'
|
|
|
|
import { motion } from 'framer-motion'
|
|
function Hero1() {
|
|
const MotionImage = motion(ChakraImage);
|
|
const oilImage = useBreakpointValue({
|
|
base: "/images/lionglobe_product_mobile.webp",
|
|
sm: "/images/lionglobe_product_pc.webp",
|
|
|
|
});
|
|
return (
|
|
<Box
|
|
position="relative"
|
|
w="100%"
|
|
alignItems={"center"}
|
|
justifyContent={"center"}
|
|
overflow="hidden"
|
|
|
|
>
|
|
<Box
|
|
overflow="hidden"
|
|
position="absolute"
|
|
width="100%"
|
|
height="100%"
|
|
//top={{ base: "-3%", sm: "-3%" }}
|
|
left="0"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
pointerEvents="none"
|
|
zIndex="1"
|
|
>
|
|
<MotionImage
|
|
src={oilImage}
|
|
objectFit="contain"
|
|
marginTop={{ base: "30vw", sm: "5vw", md: "5vw", lg: "0vw", xl: "0vw" }}
|
|
marginRight={{ base: "20vw", sm: "0vw", md: "0vw", lg: "0vw", xl: "0vw" }}
|
|
height={{ base: "85vw", sm: "45vw", md: "32vw", lg: "25vw", xl: "25vw" }}
|
|
maxW="100%" // Prevents the image from being too wide
|
|
// Adjust vertical position as needed
|
|
pointerEvents="none"
|
|
initial={{ opacity: 0, x: -100 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, ease: "easeOut" }}
|
|
/>
|
|
</Box>
|
|
<Stack gap={0} >
|
|
<Box
|
|
overflow="hidden"
|
|
position="relative"
|
|
w="100%"
|
|
bgImage={"url('/images/background.jpg')"}
|
|
bgSize="cover"
|
|
backgroundPosition="center"
|
|
bgRepeat="no-repeat"
|
|
h={{ base: "125vw", sm: "70vw", md: "50vw", lg: "40vw", xl: "35vw" }}
|
|
|
|
>
|
|
<SimpleGrid columns={{ base: 1, sm: 2, md: 2, lg: 2, xl: 2 }} marginTop={10} >
|
|
<Flex
|
|
justify={{ base: "center", sm: "flex-end", md: "flex-end", lg: "flex-end", xl: "flex-end" }}
|
|
align={"flex-start"}
|
|
h="fit-content" // or a specific height
|
|
alignSelf="flex-start" // This constrains the Flex to its content height
|
|
>
|
|
<MotionImage src="/images/text1.webp"
|
|
width={{ base: "90%", sm: "80%", md: "70%", lg: "70%", xl: "60%" }}
|
|
fit="contain"
|
|
h="auto"
|
|
marginRight={{ sm: "-10%", md: "-10%", lg: "-10%", xl: "-10%" }}
|
|
marginTop={{ base: 0, sm: 5, md: 5, lg: 5, xl: 5 }}
|
|
initial={{ opacity: 0, x: -100 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, ease: "easeOut" }} />
|
|
|
|
</Flex>
|
|
<Flex
|
|
|
|
overflow="hidden"
|
|
h="auto"
|
|
alignItems={{ base: "flex-end", sm: "flex-start", md: "flex-start", lg: "flex-start", xl: "flex-start" }}
|
|
justifyContent={{ base: "center", sm: "flex-start", md: "flex-start", lg: "flex-start", xl: "flex-start" }}
|
|
>
|
|
<MotionImage
|
|
src="/images/peoples.webp"
|
|
h={{ base: "120vw", sm: "70vw", md: "50vw", lg: "50vw", xl: "50vw" }}
|
|
// maxH={"50%"}
|
|
marginRight={{ base: "-30%", sm: "0", md: "0", lg: "0", xl: "0" }}
|
|
objectFit="cover"
|
|
initial={{ opacity: 0, y: 50 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, ease: "easeOut" }}
|
|
/>
|
|
</Flex>
|
|
|
|
</SimpleGrid>
|
|
|
|
</Box>
|
|
<Box
|
|
position="relative"
|
|
h={{ base: "30vw", sm: "30vw", md: "30vw", lg: "30vw", xl: "20vw" }}
|
|
w="100%"
|
|
bgImage={"url('/images/woodtable.webp')"}
|
|
bgSize="cover"
|
|
backgroundPosition="center"
|
|
justifyContent={"center"}
|
|
alignSelf={"center"}
|
|
bgRepeat="no-repeat"
|
|
|
|
>
|
|
|
|
</Box>
|
|
</Stack>
|
|
|
|
</Box>
|
|
);
|
|
} export default Hero1;
|