Merge pull request #4392 from Savio629/handbook

[UX] Graphic Design: Create a Layer5-branded 3D book to represent the Community Handbook

src/sections/Community/Handbook/BookComponent/BookComponent.js

@@ -0,0 +1,30 @@
+import React, { useEffect } from 'react';
+import BookComponentWrapper from "./BookComponent.style";
+import handbookdark from "../images/handbook-dark.webp";
+import { Link } from 'gatsby';
+
+const BookComponent = () => {
+  useEffect(() => {
+    const bookElement = document.querySelector('.book');
+    bookElement.classList.add('rot-on-rel');
+  }, []);
+  return (
+    <BookComponentWrapper>
+    <Link
+        className="book-container"
+        to="/community/handbook"
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+      <div className="book">
+        <img
+          alt="Community HandBook"
+          src={handbookdark}
+        />
+      </div>
+    </Link>
+    </BookComponentWrapper>
+  );
+};
+
+export default BookComponent;

src/sections/Community/Handbook/BookComponent/BookComponent.style.js

@@ -0,0 +1,97 @@
+import styled from "styled-components";
+
+const BookComponentWrapper = styled.div`
+.book-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  perspective: 600px;
+}
+
+@keyframes initAnimation {
+  0% {
+    transform: rotateY(0deg);
+  }
+  100% {
+    transform: rotateY(-30deg);
+  }
+}
+
+.rot-on-rel {
+  transform: rotateY(0deg);
+}
+
+.book {
+  min-width: 200px;
+  min-height: 300px;
+  position: relative;
+  transform-style: preserve-3d;
+  transform: rotateY(-30deg);
+  transition: 1s ease;
+  animation: 1s ease 0s 1 initAnimation;
+}
+
+.book:hover {
+  transform: rotateY(0deg);
+}
+
+.book > :first-child {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: red;
+  width: 200px;
+  height: 300px;
+  transform: translateZ(25px);
+  background-color: #171a12;
+  border-radius: 0 2px 2px 0;
+}
+
+.book::before {
+  position: absolute;
+  content: ' ';
+  left: 0;
+  top: 3px;
+  width: 48px;
+  height: 294px;
+  transform: translateX(172px) rotateY(90deg);
+  background: linear-gradient(90deg, 
+    #fff 0%,
+    #f9f9f9 5%,
+    #fff 10%,
+    #f9f9f9 15%,
+    #fff 20%,
+    #f9f9f9 25%,
+    #fff 30%,
+    #f9f9f9 35%,
+    #fff 40%,
+    #f9f9f9 45%,
+    #fff 50%,
+    #f9f9f9 55%,
+    #fff 60%,
+    #f9f9f9 65%,
+    #fff 70%,
+    #f9f9f9 75%,
+    #fff 80%,
+    #f9f9f9 85%,
+    #fff 90%,
+    #f9f9f9 95%,
+    #fff 100%
+    );
+}
+
+.book::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: ' ';
+  width: 200px;
+  height: 300px;
+  transform: translateZ(-25px);
+  background-color: #292929;
+  border-radius: 0 2px 2px 0;
+  box-shadow: -2px 1px 30px 2px #666;
+}
+`;
+
+export default BookComponentWrapper;

src/sections/Community/Meshmates/index.js

@@ -10,6 +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";
 
 const Meshmates = () => {
   const data = useStaticQuery(
@@ -80,9 +81,10 @@ const Meshmates = () => {
         <div className="expect">
           <h5> What to Expect </h5>
           <h2> Engaging with a MeshMate</h2>
-          <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>
+          <div className="bookcomponent"><BookComponent/></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>       
         <div className="meshmate-meet">
           <Row Vcenter>
             <Col sm={12} lg={6}>

src/sections/Community/Meshmates/meshmates.style.js

@@ -45,6 +45,17 @@ const MeshMatesWrapper = styled.div`
             font-weight: 600;
         }
     }
+.bookcomponent{
+    align-items: center;
+    float: right;
+    margin: 1rem;
+    padding: 20px;
+}
+@media (max-width: 576px) {
+    .bookcomponent {
+      float: none;
+    }
+  }
     .meshmate-meet{
         margin: 4.25rem auto 2.75rem auto;
         h2{