added navigation

app/page.js

@@ -1,4 +1,5 @@
-import React from 'react'
+"use client"
+// import React from 'react'
 import Navbar from '@/components/Navbar'
 import Hero from '@/components/Hero'
 import Grid from '@/components/Grid'
@@ -8,8 +9,10 @@ import Faq from '@/components/Faq'
 import Newsletter from '@/components/Newsletter'
 import About from '@/components/About'
 import Footer from '@/components/Footer'
+import React, { useRef } from 'react';
 
 const page = () => {
+  const newsletterRef = useRef();
   return (
     <div className='bg-color'>
       <div className="grad">
@@ -20,7 +23,9 @@ const page = () => {
           <Flexbox /> 
           {/* <Bottom /> */}
           <Faq />
-          <Newsletter />
+          <div ref={newsletterRef}>
+            <Newsletter />
+          </div>
           <About />
           <Footer />
         </div>

components/About.jsx

@@ -1,4 +1,6 @@
 import React from 'react'
+// import { Link } from 'react-scroll'
+import Link from 'next/link';
 
 const About = () => {
     return (
@@ -23,7 +25,7 @@ const About = () => {
                         <a href='#home' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap mt-11 max-md:mt-10">
                             Home
                         </a>
-                        <a href='#about' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap mt-7">
+                        <a href='#home' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap mt-7">
                             About
                         </a>
                         <a href='#features' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap mt-7">
@@ -32,9 +34,9 @@ const About = () => {
                         <a href='https://docs.xmigrate.cloud/en/latest/' target='_blank' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap mt-7">
                             Docs
                         </a>
-                        <a href='#contact' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap mt-6">
+                        <Link href='#contact' className="justify-center text-indigo-300 hover:text-indigo-200 text-lg leading-7 tracking-wide whitespace-nowrap mt-6">
                             Contact
-                        </a>
+                        </Link>
                     </div>
                     {/* <div className="self-start max-md:max-w-full">
                         <div className="gap-5 flex max-md:items-stretch max-md:gap-0">

components/Hero.jsx

@@ -29,7 +29,7 @@ const Hero = () => {
             <div className=" text-center text-indigo-300 text-lg font-normal font-['Inter'] leading-[31px] px-[20px] lg:px-[160px] xl:px-[420px]">Xmigrate(pronounced as cross-migrate) is an opensource tool for migrating your VM'sfrom anywhere to cloud and cloud to anywhere seamlessly.</div>
             <div className="justify-center items-start gap-6 inline-flex mt-[32px]">
                 <div className=" pl-[22.23px] pr-[21.77px] pt-[16.22px] pb-[16.78px] bg-slate-800 hover:bg-slate-700 rounded-[58px] justify-center items-center flex">
-                    <a href='https://github.com/xmigrate/xmigrate' target="_blank" className="w-[103px] h-5 text-center text-violet-300 hover:text-violet-200 text-base font-semibold font-['Inter'] leading-snug">Start Migrate</a>
+                    <a href='#contact' target="_blank" className="w-[103px] h-5 text-center text-violet-300 hover:text-violet-200 text-base font-semibold font-['Inter'] leading-snug">Start Migrate</a>
                 </div>
                 <div className=" pl-[25px] pr-[24.66px] pt-4 pb-[17.39px] bg-indigo-900 hover:bg-indigo-900 bg-opacity-20 rounded-[58px] border border-slate-800 justify-center items-center flex">
                     <a href='https://www.youtube.com/watch?v=FISJaoUIiOM' target="_blank" className="w-[90px] h-5 text-center text-violet-300 hover:text-violet-200 text-base font-semibold font-['Inter'] leading-snug">View Demo</a>
@@ -63,7 +63,7 @@ const Hero = () => {
                 </div>
                 <div className="max-w-3xl sm:px-3 px-2 text-center text-indigo-300 text-lg leading-[31px] tracking-wide">We are rigourosly testing and rolling out updates to our Xmigrate tool every week. Xmigrate team invite everyone to give this tool a try and give feedback. </div>
             </div>
-            <div id='#about' className="text-center mt-12 pt-12 text-indigo-100 text-4xl sm:text-5xl font-bold font-['Inter'] leading-[50px] sm:leading-[60px] max-w-[350px] sm:max-w-lg">Empower your cloud<span className="text-indigo-300"> migration</span></div>
+            <div id="features" className="text-center mt-12 pt-12 text-indigo-100 text-4xl sm:text-5xl font-bold font-['Inter'] leading-[50px] sm:leading-[60px] max-w-[350px] sm:max-w-lg">Empower your cloud<span className="text-indigo-300"> migration</span></div>
             <div className="text-center text-indigo-300 text-[20px] leading-7 tracking-tight mt-[28px]  px-2 sm:px-6">Xmigrate team invite everyone to give this tool a try and give feedback. </div>
         </div>
         //  </div>

components/Navbar.jsx

@@ -1,10 +1,34 @@
-import React from 'react'
+// import React from 'react'
+import React, { useRef, useEffect } from 'react';
 import Image from 'next/image'
+import Link from 'next/link';
 
 const Navbar = () => {
+  const newsletterRef = useRef();
+
+  useEffect(() => {
+    const handleScrollToNewsletter = () => {
+      if (newsletterRef.current) {
+        newsletterRef.current.scrollIntoView({ behavior: 'smooth' });
+      }
+    };
+
+    // Attach the event listener for the Contact link
+    const contactLink = document.getElementById('contact-link');
+    if (contactLink) {
+      contactLink.addEventListener('click', handleScrollToNewsletter);
+    }
+
+    // Remove the event listener when the component is unmounted
+    return () => {
+      if (contactLink) {
+        contactLink.removeEventListener('click', handleScrollToNewsletter);
+      }
+    };
+  }, []);
   return (
     <nav className='flex flex-row justify-between items-center sm:px-[120px] px-[40px] py-6 w-full'>
-      <div className="text-violet-300 text-[32.24px] font-semibold">
+      <div id="home"className="text-violet-300 text-[32.24px] font-semibold">
         xmigrate
       </div >
       <div className=" rounded-[60px] border border-indigo-300 border-opacity-20 hidden lg:block hover:p">
@@ -18,18 +42,18 @@ const Navbar = () => {
           </div>
           <div className="w-1 h-1 left-[190px] top-[25.59px] absolute bg-indigo-300 rounded" />
           <div className="w-[62.28px] h-[19.19px] left-[220px] top-[18px] absolute justify-center items-center inline-flex">
-            <a href='#features' className="w-[62.48px] h-[19px] text-violet-300 text-sm leading-tight tracking-tight hover:text-violet-200">Features</a>
+            <Link href='#features' className="w-[62.48px] h-[19px] text-violet-300 text-sm leading-tight tracking-tight hover:text-violet-200">Features</Link>
           </div>
           <div className="w-1 h-1 left-[300px] top-[25.59px] absolute bg-indigo-300 rounded" />
           <div className="w-[57.28px] h-[19.19px] left-[330px] top-[18px] absolute justify-center items-center inline-flex">
-            <a href='#contact' className="w-[57.48px] h-[19px] text-violet-300 text-sm leading-tight tracking-tight hover:text-violet-200">Contact</a>
+            <Link  href='#contact' className="w-[57.48px] h-[19px] text-violet-300 text-sm leading-tight tracking-tight hover:text-violet-200">Contact</Link>
           </div>
           {/* <div className="w-[594.38px] h-[55.19px] left-0 top-0 absolute rounded-[60px] border border-indigo-300 border-opacity-10" /> */}
         </div>
       </div>
       <div className='hidden sm:block'>
         <div className="max-w-[240px] grow h-[55px] rounded-[56px] border border-indigo-300 border-opacity-20 flex flex-row items-center px-[27px] py-[17px] bg-veil">
-          <div className="text-violet-300 text-base font-normal leading-tight ">Get Started</div>
+          <Link href='#contact' className="text-violet-300 text-base font-normal leading-tight ">Get Started</Link>
           <div className="w-1 h-1 bg-indigo-300 rounded mx-[10px]" />
           <div className=" text-indigo-300 text-opacity-60 text-[15px] leading-tight">its free</div>
           <div className="relative flex-col justify-start items-start inline-flex ml-1" />

components/Newsletter.jsx

@@ -35,7 +35,7 @@ class Newsletter extends Component {
 
     render() {
         return (
-            <div>
+            <div id="contact">
                 <div className="flex justify-between gap-5 items-start max-md:flex-wrap mt-[300px] mx-5 sm:mx-[100px]">
                     <div className="flex grow basis-[0%] flex-col px-3">
                         <div className="justify-center text-5xl leading-[60px] tracking-tight bg-clip-text mt-8 max-md:text-4xl max-md:leading-[56px] text-white">