header scroll down hide

src/components/new_ui/hero1.tsx

@@ -1,16 +1,50 @@
 import { Box, Image, Stack } from '@chakra-ui/react'
 import CyclingImage from './CyclingImage'
+import { useEffect, useState } from 'react'
 
 function Hero1() {
+  const [headerHeight, setHeaderHeight] = useState(80);
   const bigWarningSize = { base: "17vw", sm: "15vw", md: "9vw", lg: "9vw", xl: "8vw" };
 
+  useEffect(() => {
+    const updateHeaderHeight = () => {
+      const header = document.querySelector('[data-header="true"]');
+      if (header) {
+        const height = header.getBoundingClientRect().height;
+        setHeaderHeight(height);
+      }
+    };
+
+    const delayedUpdate = () => {
+      setTimeout(updateHeaderHeight, 100);
+    };
+
+    delayedUpdate();
+    
+    const resizeObserver = new ResizeObserver(() => {
+      setTimeout(updateHeaderHeight, 50);
+    });
+    
+    const header = document.querySelector('[data-header="true"]');
+    if (header) {
+      resizeObserver.observe(header);
+    }
+    
+    window.addEventListener('resize', delayedUpdate);
+    
+    return () => {
+      window.removeEventListener('resize', delayedUpdate);
+      resizeObserver.disconnect();
+    };
+  }, []);
+
   return (
     <Box
       position="relative"
       w="100%"
       alignItems={"center"}
       justifyContent={"center"}
-
+      pt={`${headerHeight}px`}
     >
       {/* Global keyframes for all animations */}
       <style>