wraning section ui updated

src/components/new_ui/CustomButton.tsx

@@ -0,0 +1,101 @@
+import { Button } from '@chakra-ui/react'
+
+interface CustomButtonProps {
+  children: React.ReactNode
+  onClick?: () => void
+  variant?: 'primary' | 'secondary'
+  size?: 'sm' | 'md' | 'lg'
+}
+
+export const CustomButton = ({ 
+  children, 
+  onClick, 
+  variant = 'primary',
+  size = 'md' 
+}: CustomButtonProps) => {
+  // Primary button - Green/Teal with shadow
+  const primaryStyles = {
+    bg: 'linear-gradient(135deg, #4ade80 0%, #22c55e 100%)',
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: size === 'sm' ? '14px' : size === 'md' ? '16px' : '18px',
+    px: size === 'sm' ? 6 : size === 'md' ? 8 : 10,
+    py: size === 'sm' ? 5 : size === 'md' ? 6 : 7,
+    rounded: 'full',
+    boxShadow: '0 10px 30px rgba(34, 197, 94, 0.4), 0 4px 15px rgba(34, 197, 94, 0.3)',
+    _hover: {
+      bg: 'linear-gradient(135deg, #22c55e 0%, #16a34a 100%)',
+      boxShadow: '0 12px 35px rgba(34, 197, 94, 0.5), 0 6px 20px rgba(34, 197, 94, 0.4)',
+      transform: 'translateY(-2px)',
+    },
+    _active: {
+      transform: 'translateY(0)',
+      boxShadow: '0 8px 25px rgba(34, 197, 94, 0.3), 0 3px 12px rgba(34, 197, 94, 0.2)',
+    },
+    transition: 'all 0.3s ease',
+  }
+
+  // Secondary button - Blue with shadow
+  const secondaryStyles = {
+    bg: 'linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%)',
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: size === 'sm' ? '14px' : size === 'md' ? '16px' : '18px',
+    px: size === 'sm' ? 6 : size === 'md' ? 8 : 10,
+    py: size === 'sm' ? 5 : size === 'md' ? 6 : 7,
+    rounded: 'full',
+    boxShadow: '0 10px 30px rgba(59, 130, 246, 0.4), 0 4px 15px rgba(59, 130, 246, 0.3)',
+    _hover: {
+      bg: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
+      boxShadow: '0 12px 35px rgba(59, 130, 246, 0.5), 0 6px 20px rgba(59, 130, 246, 0.4)',
+      transform: 'translateY(-2px)',
+    },
+    _active: {
+      transform: 'translateY(0)',
+      boxShadow: '0 8px 25px rgba(59, 130, 246, 0.3), 0 3px 12px rgba(59, 130, 246, 0.2)',
+    },
+    transition: 'all 0.3s ease',
+  }
+
+  const buttonStyles = variant === 'primary' ? primaryStyles : secondaryStyles
+
+  return (
+    <Button
+      onClick={onClick}
+      {...buttonStyles}
+    >
+      {children}
+    </Button>
+  )
+}
+
+// Example usage component
+export const CustomButtonDemo = () => {
+  return (
+    <div style={{ padding: '40px', display: 'flex', gap: '20px', flexWrap: 'wrap', background: '#f5f5f5' }}>
+      {/* Primary buttons */}
+      <CustomButton variant="primary" size="sm">
+        Small Button
+      </CustomButton>
+      <CustomButton variant="primary" size="md">
+        Medium Button
+      </CustomButton>
+      <CustomButton variant="primary" size="lg">
+        Large Button
+      </CustomButton>
+      
+      {/* Secondary buttons */}
+      <CustomButton variant="secondary" size="sm">
+        Small Button
+      </CustomButton>
+      <CustomButton variant="secondary" size="md">
+        Medium Button
+      </CustomButton>
+      <CustomButton variant="secondary" size="lg">
+        Large Button
+      </CustomButton>
+    </div>
+  )
+}
+
+export default CustomButton

src/components/new_ui/wraning.tsx

@@ -1,8 +1,9 @@
-import { Box, Image, Stack } from '@chakra-ui/react'
+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"
@@ -16,8 +17,9 @@ function Wraning() {
         <Box
           position="relative"
           w="100%"
-          minH={{ base: "170vw", sm: "170vw", md: "70vw", lg: "70vw", xl: "45vw" }}
+          minH={{ base: "163vw", sm: "163vw", md: "75vw", lg: "50vw", xl: "45vw" }}
-          bgImage={{ base: "url('/images/new/bg_people_mobile.webp')", sm: "url('/images/new/bg_people_mobile.webp')", md: "url('/images/new/bg_people.webp')", lg: "url('/images/new/bg_people.webp')", xl: "url('/images/new/bg_people.webp')" }}
+          // 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'}
@@ -25,16 +27,202 @@ function Wraning() {
           zIndex={3}
           overflow="hidden"
         >
-          <Image
+
+          {/* <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 >
   )