first

2025-03-16 00:10:11 +08:00
parent e7cf1c28b0
commit a14b206d25
84 changed files with 8752 additions and 0 deletions
--- a/src/components/hero1.tsx
+++ b/src/components/hero1.tsx
@@ -0,0 +1,116 @@
+import { Box, Stack, SimpleGrid, Image, 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/oilmobile.png",
+        sm: "/images/oil.png",
+
+    });
+    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.png')"}
+                    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.png"
+                                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/people2.png"
+                                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.png')"}
+                    bgSize="cover"
+                    backgroundPosition="center"
+                    justifyContent={"center"}
+                    alignSelf={"center"}
+                    bgRepeat="no-repeat"
+
+                >
+
+                </Box>
+            </Stack>
+
+        </Box>
+    );
+} export default Hero1;