fix reloading issue and kanvas twitter link and heading missing and format issues

Signed-off-by: Rajesh-Nagarajan-11 <rajeshnagarajan36@gmail.com>

Author: Rajesh-Nagarajan-11

src/collections/handbook/connect-with-us/index.mdx

@@ -97,7 +97,7 @@ Join us on our cloud native community's <a href="https://discuss.layer5.io">Disc
 Layer5 is dedicated to empowering engineers and supporting the open source community that create them. Learn more about Layer5 and connect with the community by following and engaging with us on our social media accounts.
 
 <div>
-  <p className="channels-para"><img className="channels-img" src={twitter_icon} alt="twitter" />&nbsp;&nbsp;<a href="https://x.com/layer5">@layer5</a>,&nbsp;<a href="https://x.com/mesheryio">@mesheryio</a>&nbsp;and&nbsp;<a href="https://x.com/kanvas-new">@kanvas-new</a></p>
+  <p className="channels-para"><img className="channels-img" src={twitter_icon} alt="twitter" />&nbsp;&nbsp;<a href="https://x.com/layer5">@layer5</a>,&nbsp;<a href="https://x.com/mesheryio">@mesheryio</a>&nbsp;and&nbsp;<a href="https://x.com/kanvas_new">@kanvas_new</a></p>
   <p className="channels-para"><img className="channels-img" src={mail_icon} alt="mail" />&nbsp;&nbsp;<a href="mailto:community-managers@layer5.io">Connect with our community managers for any inquiries or support!</a></p>
   <p className="channels-para"><img className="channels-img" src={youtube_icon} alt="youtube" />&nbsp;&nbsp;<a href="https://www.youtube.com/Layer5io?sub_confirmation=1">Subscribe to Layer5 Youtube</a>,&nbsp;<a href="https://www.youtube.com/@mesheryio?sub_confirmation=1">Subscribe to Meshery Youtube</a></p>
   <p className="channels-para"><img className="channels-img" src={github_icon} alt="github" />&nbsp;&nbsp;<a href="https://github.com/layer5io">Discover our projects on GitHub</a></p>

src/collections/handbook/designer/index.mdx

@@ -11,9 +11,7 @@ import Button from "../../../reusecore/Button";
 <h2 className="heading-top">UI/UX</h2>
 
 The UI/UX badge is given to community members who contribute towards creating or improving the visual design or user flow of various aspects such as websites, flyers, promotions, Meshery UI, and more. This recognition is awarded as an appreciation of their efforts in enhancing the user experience. The badge serves as a symbol of their expertise in UI/UX design and acknowledges their valuable contribution to the community.
-We are always looking for ways to improve the user experience of our projects. If you have ideas for how to improve
-
- the user experience of any of our projects, please share them with us.
+We are always looking for ways to improve the user experience of our projects. If you have ideas for how to improve the user experience of any of our projects, please share them with us.
 
 ## Where can you contribute?
 

…/handbook/github -organization/index.mdx …s/handbook/github-organization/index.mdxsrc/collections/handbook/github -organization/index.mdx renamed to src/collections/handbook/github-organization/index.mdx src/collections/handbook/github -organization/index.mdx renamed to src/collections/handbook/github-organization/index.mdx

@@ -1,5 +1,5 @@
 ---
-title: "GitHub Organization"
+title: "GitHub Organization Membership"
 description: "Recognition of consistent contributors through GitHub organization invitations, outlining membership requirements, invitation process, and responsibilities."
 type: Handbook
 contents:

src/components/handbook-navigation/intra-page.js

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { Link } from "gatsby";
 import styled from "styled-components";
 
 const JoinCommunityWrapper = styled.div`
@@ -54,25 +53,28 @@ const JoinCommunityWrapper = styled.div`
 `;
 
 function IntraPage({ contents }) {
-  const [intapath, setIntapath] = useState(null);
-  useEffect(() => {
-    const path = window.location.pathname;
-    setIntapath(path);
-  }, []);
+  const handleClick = (e, link) => {
+    e.preventDefault();
+    const id = link.startsWith('#') ? link.substring(1) : link;
+    const element = document.getElementById(id);
+
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth" });
+    }
+  };
 
   return (
     <JoinCommunityWrapper>
       <div className="intra-page">
         <ul>
           {contents.map((x) => (
             <li key={x.id} className="list">
-              <Link
-                to={`${intapath}${x.link}`}
-                key={x.id}
-                activeClassName="active"
+              <a
+                href={x.link}
+                onClick={(e) => handleClick(e, x.link)}
               >
                 {x.text}
-              </Link>
+              </a>
             </li>
           ))}
         </ul>