healthy_oil/src/components/new_ui/wraning.tsx

import { Box, Stack, Text, Image } from '@chakra-ui/react'
import CyclingImage from './CyclingImage'
function Wraning() {
  const bigWarningSize = { base: "15vw", sm: "15vw", md: "9vw", lg: "7vw", xl: "6vw" };
  const midWarningSize = { base: "10vw", sm: "10vw", md: "6vw", lg: "4vw", xl: "4vw" };
  const smallWarningSize = { base: "7vw", sm: "7vw", md: "5vw", lg: "3vw", xl: "3vw" };
  return (
    <Box
      position="relative"
      w="100%"
      alignItems={"center"}
      justifyContent={"center"}

    >

      <Stack gap={0}>
        <Box
          position="relative"
          w="100%"
          minH={{ base: "163vw", sm: "163vw", md: "75vw", lg: "50vw", xl: "45vw" }}
          // bgImage={"url:'/images/new/black_bg.webp'"}
          bgImage={{ base: "url('/images/new/wraning_bg_mobile.webp')", sm: "url('/images/new/wraning_bg_mobile.webp')", md: "url('/images/new/wraning_bg.webp')", lg: "url('/images/new/wraning_bg.webp')", xl: "url('/images/new/wraning_bg.webp')" }}
          bgSize="cover"
          backgroundPosition="center"
          justifyItems={'center'}
          bgRepeat="no-repeat"
          zIndex={3}
          overflow="hidden"
        >

          {/* <Image
            src="/images/new/bottle.webp"
            position="absolute"
            top={{ base: "11vw", sm: "14vw", md: "7vw", lg: "8vw", xl: "3.5vw" }}
            right={{ base: "43vw", sm: "45vw", md: "48vw", lg: "48vw", xl: "50vw" }}
            w={{ base: "15vw", sm: "14vw", md: "8vw", lg: "7vw", xl: "5vw" }}
          /> */}
          {/* Wraning Sign Images */}
          <Box
            position={'absolute'}
            w={bigWarningSize}
            left={{ base: '8vw', sm: '8vw', md: '23vw', lg: '32vw', xl: '30vw' }}
            top={{ base: '14vw', sm: '14vw', md: '7vw', lg: '5vw', xl: '4vw' }}
            css={{
              animation: 'floatSlow 3s ease-in-out infinite',
              animationDelay: '0s'
            }}
          >
            <CyclingImage
              src="/images/new/bigwarning.webp"
              position={'relative'}
              w="100%"
              cycleDuration={3}
              intensity={0.1}
            />

          </Box>
          <Box
            position={'absolute'}
            w={smallWarningSize}
            left={{ base: '36vw', sm: '36vw', md: '39vw', lg: '43vw', xl: '43vw' }}
            top={{ base: '10vw', sm: '10vw', md: '6vw', lg: '3vw', xl: '2vw' }}
            css={{
              animation: 'floatSlow 3s ease-in-out infinite',
              animationDelay: '0s'
            }}
          >
            <CyclingImage
              src="/images/new/bigwarning.webp"
              position={'relative'}
              w="100%"
              cycleDuration={3}
              intensity={0.1}
            />

          </Box>

          <Box
            position={'absolute'}
            w={smallWarningSize}
            right={{ base: '37vw', sm: '37vw', md: '45vw', lg: '47vw', xl: '47vw' }}
            top={{ base: '34vw', sm: '34vw', md: '19vw', lg: '15vw', xl: '12vw' }}
            css={{
              animation: 'floatSlow 3s ease-in-out infinite',
              animationDelay: '0s'
            }}
          >
            <CyclingImage
              src="/images/new/bigwarning.webp"
              position={'relative'}
              w="100%"
              cycleDuration={3}
              intensity={0.1}
            />

          </Box>


          <Box
            position={'absolute'}
            w={smallWarningSize}
            left={{ base: '37vw', sm: '37vw', md: '30vw', lg: '37vw', xl: '37vw' }}
            bottom={{ base: '34vw', sm: '34vw', md: '22vw', lg: '13vw', xl: '13vw' }}
            css={{
              animation: 'floatSlow 3s ease-in-out infinite',
              animationDelay: '0s'
            }}
          >
            <CyclingImage
              src="/images/new/bigwarning.webp"
              position={'relative'}
              w="100%"
              cycleDuration={3}
              intensity={0.1}
            />

          </Box>

          <Box
            position={'absolute'}
            w={midWarningSize}
            right={{ base: '37vw', sm: '37vw', md: '35vw', lg: '37vw', xl: '37vw' }}
            bottom={{ base: '34vw', sm: '34vw', md: '17vw', lg: '10vw', xl: '10vw' }}
            css={{
              animation: 'floatSlow 3s ease-in-out infinite',
              animationDelay: '0s'
            }}
          >
            <CyclingImage
              src="/images/new/bigwarning.webp"
              position={'relative'}
              w="100%"
              cycleDuration={3}
              intensity={0.1}
            />

          </Box>


          {/* title */}
          <Stack
            position="absolute"
            top={{ base: '55vw', sm: '60vw', md: '35vw', lg: '23vw', xl: '20vw' }}
            alignItems={'center'}
            gap={'1px'}
          >
            <Text
              className="font-melle font-xbold"
              fontSize={{ base: '15vw', sm: '15vw', md: '6vw', lg: '5vw', xl: '3.5vw' }}
              color={"#FED407"}
            >
              {'你要注意！'}
            </Text>
            <Text
              className="font-melle font-xbold"
              fontSize={{ base: '9vw', sm: '9vw', md: '3.5vw', lg: '2vw', xl: '2vw' }}
              color={"#FED407"}
              mt={{ base: -5, sm: -7, md: -5, lg: -5, xl: -5 }}
              mr={{ base: 3, sm: 3, md: 0, lg: 0, xl: 0 }}
            >
              {'身體健康響起警號！'}
            </Text>
            <Text
              className="font-melle font-medium"
              fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }}
              color={"white"}
              mt={{ base: -2, sm: -5, md: -3, lg: -3, xl: -3 }}
              mr={4}
            >
              {'好多時係同'}
            </Text>

            <Box display="inline" mt={{ base: -2, sm: -5, md: -3, lg: -3, xl: -3 }} mr={4}>
              <Text
                className="font-melle font-xbold"
                fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }}
                color={"white"}
                display="inline"
              >
                {'日常飲食習慣'}
              </Text>
              <Text
                className="font-melle font-medium"
                fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }}
                color={"white"}
                display="inline"
              >
                {'有關！'}
              </Text>
            </Box>
            <Text
              className="font-melle font-medium"
              fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }}
              color={"#FED407"}
              mt={{ base: 8, sm: 7, md: 5, lg: 5, xl: 5 }}
              mr={4}
            >
              {'簡單到喺你屋企'}
            </Text>

            <Image
              src="/images/new/wraning_subtitle.webp"
              w={{ base: '90vw', sm: '90vw', md: '34vw', lg: '22vw', xl: '22vw' }}
              mt={-1}
            />
            <Text
              className="font-melle font-medium"
              fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }}
              color={"white"}
              mt={-3}
              mr={4}
            >
              {'其實已經日積月累'}
            </Text>
            <Text
              className="font-melle font-medium"
              fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }}
              color={"white"}
              mt={-3}
              mr={4}
            >
              {'咁影響緊你！'}
            </Text>
          </Stack>
        </Box>
      </Stack >
    </Box >
  )
}

export default Wraning;