added

src/Components/Hamburger.jsx

@@ -0,0 +1,9 @@
+import Button from "./Button";
+import { AiOutlineClose, AiOutlineMenu } from "react-icons/ai";
+export default function Hamburger(){
+    return(
+        <div className="z-[150] w-[85%] min-h-[144px]  flex items-center justify-end font-roboto mr-0 md:ml-4 md:ml-0 fixed top-0 left-0">
+       <div className="rounded-full bg-black flex items-center justify-center px-4 py-4"> <AiOutlineMenu size={20} className="text-[#FFFFFF]" /> </div>
+        </div>
+    )
+}

src/Components/Home.jsx

@@ -13,21 +13,24 @@ import AOS from 'aos';
 import 'aos/dist/aos.css';
 import Carausel from './Caraursel';
 import bgChat232 from "../assets/bgChat232.png";
+import { useInView } from 'react-intersection-observer';
+import Hamburger from './Hamburger';
 
 export default function Home() {
   useEffect(() => {
     AOS.init();
     AOS.refresh();
   }, []);
 
-
+  const [ref4, inView4] = useInView();
+
   return (
     <>
       <div className='w-full min-h-screen overflow-x-hidden'>
-        <div className='bg-[#F0F1F5]'>
+        <div ref={ref4} className='bg-[#F0F1F5]'>
           <div className='flex flex-col gap-32 z-[100] bg-repeat bg-contain bg-opacity-40 relative' style={{ backgroundImage: `url(${bgChat232})`}}>
           <div className="bg w-[600px] h-[600px] rounded-full absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%] z-[-1] blur-[120px]"></div>
-            <Navbar />
+           {inView4 ? <Navbar />:<Hamburger/>}
             <div className='mt-32'>
             <div className="w-full flex flex-col items-center justify-center rounded-lg ">
             <Logo classname='h-[263px] w-[263px]' />