updated

Author: hemanthkumar-21

components/Header.jsx

@@ -1,12 +1,26 @@
 import Image from "next/image";
 import Link from "next/link";
-import React from "react";
+import React, { useState, useRef } from "react";
 
 const Header = () => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const timeoutRef = useRef(null);
+
+  const handleMouseEnter = () => {
+    clearTimeout(timeoutRef.current);
+    setIsDropdownOpen(true);
+  };
+
+  const handleMouseLeave = () => {
+    timeoutRef.current = setTimeout(() => {
+      setIsDropdownOpen(false);
+    }, 200);
+  };
+
   return (
     <div className="h-[72px] w-full flex items-center justify-between bg-[#D9D9D9]">
       <div className="flex justify-between w-full px-10">
-        <div  className="w-[201px] ml-5">
+        <div className="w-[201px] ml-5">
           <Image
             src="/assets/Home/Logo_Home.png"
             alt=""
@@ -18,9 +32,37 @@ const Header = () => {
           <Link href="/" className="text-[#000000] w-auto">
             Home
           </Link>
-          <Link href="/blog" className="text-[#000000] w-auto">
-            Explore
-          </Link>
+          <div
+            className="relative w-auto"
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            <div className="text-[#000000] cursor-pointer w-auto">
+              Explore
+            </div>
+            {isDropdownOpen && (
+              <div className="absolute top-full mt-2 w-40 bg-white shadow-lg rounded-md">
+                <Link
+                  href="/intro"
+                  className="block px-4 py-2 rounded-t-md text-[#000000] hover:bg-gray-200"
+                >
+                  Intro
+                </Link>
+                <Link
+                  href="/git-and-github/how-to-install-git-git-tutorial"
+                  className="block px-4 py-2 text-[#000000] hover:bg-gray-200"
+                >
+                  Git and GitHub
+                </Link>
+                <Link
+                  href="/blog/5-best-apps-vloggers-should-have-on-a-phone"
+                  className="block px-4 py-2 rounded-b-md text-[#000000] hover:bg-gray-200"
+                >
+                  All Blogs
+                </Link>
+              </div>
+            )}
+          </div>
           <Link href="/" className="text-[#000000] w-auto">
             About
           </Link>

components/MainPage.jsx

@@ -223,7 +223,7 @@ const MainPage = () => {
             </div>
 
             <p className="text-2xl text-white font-normal">
-              What you were looking for wasn't found? Our writing team will
+              What you were looking for wasn&apos;t found? Our writing team will
               ensure that we start covering the topic extensively
             </p>
             <p className="text-xl text-white font-light">Suggest topics</p>