header Update

package-lock.json

@@ -18,7 +18,8 @@
         "react-google-recaptcha": "^3.1.0",
         "react-hook-form": "^7.53.0",
         "react-icons": "^5.3.0",
-        "react-router-dom": "^6.26.1"
+        "react-router-dom": "^6.26.1",
+        "react-scroll": "^1.9.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.9.0",
@@ -4645,6 +4646,11 @@
       "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz",
       "integrity": "sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ=="
     },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -5225,6 +5231,19 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-scroll": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.9.0.tgz",
+      "integrity": "sha512-mamNcaX9Ng+JeSbBu97nWwRhYvL2oba+xR2GxvyXsbDeGP+gkYIKZ+aDMMj/n20TbV9SCWm/H7nyuNTSiXA6yA==",
+      "dependencies": {
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",

package.json

@@ -20,7 +20,8 @@
     "react-google-recaptcha": "^3.1.0",
     "react-hook-form": "^7.53.0",
     "react-icons": "^5.3.0",
-    "react-router-dom": "^6.26.1"
+    "react-router-dom": "^6.26.1",
+    "react-scroll": "^1.9.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

src/App.jsx

@@ -2,6 +2,7 @@ import "./App.css";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Home from "./pages/Home";
 import Header from "./components/Header";
+import ContactUs from "./components/Form"
 function App() {
   return (
     <>
@@ -9,6 +10,7 @@ function App() {
           <Header />
           <Routes>
             <Route path="/" element={<Home />} />
+            <Route path="/contact-us" element={<ContactUs/>}/>
           </Routes>
         </BrowserRouter>
     </>

src/components/Form.jsx

@@ -118,7 +118,7 @@ const Form = () => {
   };
 
   return (
-    <Container maxW="container.2xl" p={{ base: "1rem", lg: "3rem" }} bg="black">
+    <Container id="contact-section" maxW="container.2xl" p={{ base: "1rem", lg: "3rem" }} bg="black">
       <Box
         bg="#0F0F0F"
         display="flex"

src/components/Header.jsx

@@ -10,6 +10,7 @@ import {
 import logo from "../assets/images/logo.png";
 import { NavLink } from "react-router-dom";
 import { useEffect, useState } from "react";
+import { Link as ScrollLink, animateScroll as scroll } from "react-scroll";
 
 const animationKeyframes = keyframes`
   0% { opacity: 0; transform: translateY(-10px); }
@@ -25,10 +26,9 @@ const titles = [
   "Award-winning portfolio",
   "Accurate business Analysis",
   "Immaculate project planning",
-  "Excellent ane timely execution",
-  "Excellent ane timely execution",
-  "State-of-the art infrastructure",
-  "Integrity and sincerity ",
+  "Excellent and timely execution",
+  "State-of-the-art infrastructure",
+  "Integrity and sincerity",
   "A large team of developers",
 ];
 
@@ -41,7 +41,7 @@ const Header = () => {
     }, 5000);
 
     return () => clearInterval(interval);
-  });
+  }, []);
 
   return (
     <Container
@@ -52,10 +52,14 @@ const Header = () => {
     >
       <Box>
         <Flex
-          // px={{ base: "0px", md: "1.5rem", lg: "1.8rem" }}
           py={{ base: 1, md: 1.3, lg: 1.9 }}
           justifyContent="space-between"
           alignItems="center"
+        >
+          <ScrollLink
+            to="hero"
+            smooth={true}
+            duration={800} // Adjust the duration as needed for a smoother scroll
           >
             <Image
               ml={{ base: "10px", md: "1rem", lg: "2rem" }}
@@ -64,6 +68,7 @@ const Header = () => {
               w="66px"
               alt="WDI"
             />
+          </ScrollLink>
           <Box
             w={"100%"}
             h={{ base: "30px", md: "50px", lg: "66px" }}
@@ -83,7 +88,11 @@ const Header = () => {
               {titles[currentIndex]}
             </Text>
           </Box>
-          <NavLink>
+          <ScrollLink
+            to="contact-section"
+            smooth={true}
+            duration={800} // Adjust the duration as needed for a smoother scroll
+          >
             <Button
               bgColor="#e8155d"
               _hover={{ bg: "#e8155d" }}
@@ -97,7 +106,7 @@ const Header = () => {
             >
               Contact Us
             </Button>
-          </NavLink>
+          </ScrollLink>
         </Flex>
       </Box>
     </Container>

src/components/Hero.jsx

@@ -12,7 +12,7 @@ const circlesData = [
 
 const Hero = () => {
   return (
-      <Box bgColor="black" h="100%" width={["25%", "50%", "100%"]} >
+      <Box bgColor="black" id="hero" h="100%" width={["25%", "50%", "100%"]} >
         <Flex
           justifyContent="space-between"
           spacing={4}