fix path 2

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

Author: Rajesh-Nagarajan-11

src/collections/handbook/writing-program/content-form.js

@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from "react";
-import Button from "../../../../reusecore/Button";
+import Button from "../../../reusecore/Button";
 import axios from "axios";
 import { Field, Form, Formik } from "formik";
 import ContentFormWrapper from "./content-form.style";
-import layer5_img from "../../../../assets/images/layer5/layer5-only/svg/layer5-white-no-trim.svg";
+import layer5_img from "../../../assets/images/layer5/layer5-only/svg/layer5-white-no-trim.svg";
 
 const ContentForm = () => {
   const [memberFormOne, setMemberFormOne] = useState({});

src/collections/handbook/writing-program/images/workshop.svg

@@ -1,6 +1,6 @@
 import React from "react";
 import { Link } from "gatsby";
-import { PaginationWrapper } from "../../handbook-navigation/TocPagination.style";
+import { PaginationWrapper } from "../../../../components/handbook-navigation/TocPagination.style";
 
 const HandbookPagination = ({ pages, currentSlug }) => {
   const currentIndex = pages.findIndex(page => page.fields.slug === currentSlug);
@@ -11,7 +11,7 @@ const HandbookPagination = ({ pages, currentSlug }) => {
     <PaginationWrapper>
       {prevPage && (
         <Link to={prevPage.fields.slug} className="prev">
-                    ← {prevPage.frontmatter.title}
+          ← {prevPage.frontmatter.title}
         </Link>
       )}
       {nextPage && (

src/sections/Community/Handbook/handbook-single/HandbookPagination.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Link } from "gatsby";
-import { TocWrapper } from "../../handbook-navigation/toc.style";
+import { TocWrapper } from "../../../../components/handbook-navigation/toc.style";
 
 const HandbookTOC = ({ pages, currentSlug }) => {
   return (

src/sections/Community/Handbook/handbook-single/HandbookTOC.js

@@ -10,7 +10,7 @@ import { ReactComponent as MeshmateStackImage } from "../../../assets/images/mes
 
 import { Link } from "gatsby";
 import { FiArrowRight } from "@react-icons/all-files/fi/FiArrowRight";
-import BookComponent from "../Handbook/BookComponent/BookComponent";
+import HandbookCard from "../../../components/HandbookCard";
 
 const Meshmates = () => {
   const data = useStaticQuery(
@@ -131,7 +131,13 @@ const Meshmates = () => {
         <div className="expect">
           <h5> What to Expect </h5>
           <h2> Engaging with a MeshMate</h2>
-          <div className="bookcomponent"><BookComponent /></div>
+          <div className="bookcomponent">
+            <HandbookCard 
+              title="Community Handbook"
+              description="Explore the Layer5 Community Handbook to learn more about our community, contribution guidelines, and resources."
+              to="/community/handbook"
+            />
+          </div>
           <p> The program pairs experienced Layer5 community members with community newcomers to ensure a smooth onboarding experience. There is a lot going in the Layer5 community. Projects and working groups move fast. MeshMates are committed to helping their mentees in identifying an area of the projects to engage within, working groups to join, growing their Cloud Native knowledge, and network of relationships. By connecting one-on-one, MeshMates will share tips on how to have the best community experience possible. </p>
           <p> Meshtees are encouraged to reach out to any MeshMate directly in order to pair up. Introduce yourself either on in the <a href="https://discuss.layer5.io/c/community/12">Layer5 discussion forum</a>. Help your MeshMate understand your current skills, ideal topics of learning, and areas of passion. Doing so will help them to point out various aspects of projects that you might find your first foothold. </p>
         </div>