landing page updated

src/Components/Header.jsx

@@ -1,34 +1,36 @@
 import { Box, Button, Container, Image } from "@chakra-ui/react";
 import React, { useEffect, useState } from "react";
+import { Link, NavLink, useNavigate } from "react-router-dom";
+import { ChevronDownIcon } from "@chakra-ui/icons";
+import { Link as ScrollLink } from "react-scroll";
 import logo from "../assets/logo.png";
 import earth from "../assets/earth.png";
-import { Link, NavLink } from "react-router-dom";
-import { ChevronDownIcon } from "@chakra-ui/icons";
-
 
 export const nav = [
   {
     title: "Investment",
-    path: "/investment",
+    path: "investment",
   },
   {
     title: "How it works",
-    path: "/how-it-works",
+    path: "how-it-works",
   },
   {
     title: "FAQ",
-    path: "/faq",
+    path: "faq",
   },
   {
     title: "About Us",
-    path: "/aboutus",
+    path: "aboutus",
   },
 ];
 
 const Header = () => {
   const [showHeader, setShowHeader] = useState(true);
   const [lastScrollY, setLastScrollY] = useState(0);
-  const threshold = 50; // Adjust this value to change sensitivity
+  const navigate = useNavigate();
+  const threshold = 0;
+
   const controlHeader = () => {
     if (window.scrollY > lastScrollY + threshold) {
       setShowHeader(false);
@@ -45,11 +47,31 @@ const Header = () => {
     };
   }, [lastScrollY]);
 
+  const handleNavClick = (path) => {
+    if (path === "aboutus") {
+      navigate(`/${path}`);
+    } else {
+      navigate("/");
+    }
+  };
+
+  const handleLanguageChange = (e) => {
+    const language = e.target.value;
+    const googleTranslateElement = document.querySelector("#google_translate_element select");
+    if (googleTranslateElement) {
+      googleTranslateElement.value = language;
+      googleTranslateElement.dispatchEvent(new Event("change"));
+    }
+  };
+
   return (
-    <Box 
-    zIndex={100}
-    top={showHeader ? 0 : "-80px"}  // Adjust the -80px to match the height of your header
-    transition="top 0.3s" position={"sticky"}  backgroundColor={"#002F0F"}>
+    <Box
+      zIndex={100}
+      top={showHeader ? 0 : "-80px"}
+      transition="top 0.3s"
+      position={"sticky"}
+      backgroundColor={"#002F0F"}
+    >
       <Container
         p={4}
         display={"flex"}
@@ -57,33 +79,70 @@ const Header = () => {
         maxW="container.xl"
       >
         <Link to={"/"}>
-        <Image src={logo} h={8} /></Link>
+          <Image src={logo} h={8} />
+        </Link>
         <Box display={"flex"} gap={6}>
-          {nav.map(({ title, path }, index) => (
-            <NavLink
-            key={index}
-              style={{
-                textDecoration: "none",
-                color: "white",
-                display: "flex",
-                alignItems: "center",
-              }}
-              to={path}
-            >
-              {title}
-            </NavLink>
-          ))}
+          {nav.map(({ title, path }, index) =>
+            path === "aboutus" ? (
+              <NavLink
+                key={index}
+                style={{
+                  textDecoration: "none",
+                  color: "white",
+                  display: "flex",
+                  alignItems: "center",
+                }}
+                to={`/${path}`}
+                onClick={() => handleNavClick(path)}
+              >
+                {title}
+              </NavLink>
+            ) : (
+              <ScrollLink
+                key={index}
+                activeClass="active"
+                style={{
+                  textDecoration: "none",
+                  color: "white",
+                  display: "flex",
+                  alignItems: "center",
+                  cursor: "pointer",
+                }}
+                to={path}
+                spy={true}
+                smooth={true}
+                offset={0}
+                duration={300}
+                onClick={() => handleNavClick(path)}
+              >
+                {title}
+              </ScrollLink>
+            )
+          )}
         </Box>
-
         <Box display={"flex"} alignItems={"center"} gap={4}>
-          <span className="d-flex align-items-center gap-1 text-white">
-            <Image src={earth} h={4} me={1} /> En <ChevronDownIcon />
-          </span>
+          <Box display={"flex"} alignItems={"center"} gap={1} color="white">
+            <Image src={earth} h={4} me={1} />
+            <Box
+              as="select"
+              onChange={handleLanguageChange}
+              bg="transparent"
+              color="white"
+              border="none"
+              cursor="pointer"
+              appearance="none"
+            >
+              <option value="en">En</option>
+              <option value="ur">Ur</option>
+            </Box>
+            <ChevronDownIcon />
+          </Box>
           <Button color={"#002F0F"} ps={6} pe={6} size={"sm"} rounded={"xl"}>
             Contact Us
           </Button>
         </Box>
       </Container>
+      <Box id="google_translate_element" display="block" />
     </Box>
   );
 };