Added a form in index.mdx

src/collections/service-mesh-books/Book.style.js

@@ -2,20 +2,27 @@ import styled from "styled-components";
 
 export const BookWrapper = styled.div`
 
-    .book{
-        float:right;
-        padding:20px;
+    .book,.book-1,.book-2{
         text-align:center;
         @media only screen and (max-width: 568px){
-             float: inherit;
+            float: inherit;
         }
-
         .two-buttons{
             display: flex;
             flex-direction: row;
             justify-content: space-evenly;
         }
-
+    }
+    .book{
+        float:right;
+    }
+    .book-1,.book-2{
+        display:flex;
+        justify-content:center;
+        align-items:center;
+        @media only screen and (max-width: 568px){
+             display:block;
+        }
     }
     div.center {
         text-align:center;

src/collections/service-mesh-books/the-enterprise-path-to-service-mesh-architectures-2nd-Edition/index.mdx

@@ -14,13 +14,10 @@ redirect_from:
 import { BookWrapper } from "../Book.style.js";
 import service_mesh_book_second_edition from "./The-Enterprise-path-to-service-mesh-Architectures-2nd-Edition.png"
 import Button from "../../../reusecore/Button";
+import CommonForm from "../../../components/CommonForm";
 
 <BookWrapper>
 
-<div className="book"><a href="https://www.nginx.com/resources/library/the-enterprise-path-to-service-mesh-architectures/"><img className="card" width="300px" src={service_mesh_book_second_edition} align="centre" /></a><div>&nbsp;</div>
-    <Button primary className="banner-btn one pa-8" title="Get the Book" url="https://www.nginx.com/resources/library/the-enterprise-path-to-service-mesh-architectures/" external="true" />
-</div>
-
 Planning to build a microservice-driven cloud native application or looking to modernize existing application services? Consider using a service mesh. A service mesh approach can help you create robust and scalable applications, but it also introduces new challenges. This updated report answers common questions regarding service mesh architectures through the lens of a large enterprise.
 <span>Author <b>Lee Calcote</b>, founder and CEO of Layer5, shows developers, operators, architects, and IT leaders how to evaluate your organization’s readiness for using a service mesh—and provides a clear path to help you adopt one. You’ll evaluate several factors when deciding which applications should be built from the ground up and which can be converted with a new service mesh architecture.</span>
 
@@ -38,4 +35,25 @@ This updated edition discusses several service meshes available and the tools yo
 <br/><b>Early Release:</b> Summer 2020
 <br/><b>Publish:</b> November 2020
 
+<div className="book-2"><a href={service_mesh_book_second_edition}><img className="card" width="300px" src={service_mesh_book_second_edition} alt="The-Enterprise-Path-to-Service-Mesh-Architectures" align="centre" /></a><div>&nbsp;</div>
+  <div>
+    <Col lg={5} md={6} sm={12} style={{ padding: "0" }}>
+      <CommonForm
+        title="Get the Book"
+        form="epsma-book"
+        account_desc="Email the The Enterprise Path to Service Mesh Architectures 2nd Edition"
+        submit_title="Your copy of the book will arrive in your mailbox shortly."
+        submit_body={
+          <span
+            dangerouslySetInnerHTML={{
+              __html:
+                'While waiting for your copy to arrive, take a free <a href="https://layer5.io/learn/learning-path">learning path</a>.',
+            }}
+          />
+        }
+      />
+    </Col>
+  </div>
+</div>
+
 </BookWrapper>

src/components/Terminal/Terminal.style.js

@@ -16,6 +16,7 @@ export const TerminalWrapper = styled.div`
   --terminal-body-color: var(--gray-1);
 
   width: 837px;
+  max-width: 90%;
 
   .title-bar {
     display: flex;
@@ -59,7 +60,6 @@ export const TerminalWrapper = styled.div`
     background: var(--terminal-body-color);
     border-radius: 0 0 var(--terminal-radius) var(--terminal-radius);
     padding: 24px 32px;
-
     @media (min-width: 768px) {
       height: 525px;
     }
@@ -80,9 +80,9 @@ export const TerminalWrapper = styled.div`
     width: 0;
     height: 0;
   }
-
+  
   .code-wrapper {
-     pre {
+    pre {
       padding: 0;
       margin: 0;
       width: 100%;
@@ -106,6 +106,8 @@ export const TerminalWrapper = styled.div`
         color: var(--white);
       }
 
+      wrap-word: normal;
+
       @media (min-width: 768px){
         font-size: 13.5px;
         line-height: 26px;

src/sections/Home/Projects-home/index.js

@@ -46,7 +46,7 @@ const Projects = () => {
             <Col sm={12} md={6} lg={3}>
               <Link className="project-card" to="/cloud-native-management/meshery">
                 <div className="project__block__inner">
-                  <StaticImage loading="lazy" src={projectImage3} alt="Meshery Logo"  width={80} height={80} imgStyle={{ width: "40px", height: "40px" }} />
+                  <StaticImage loading="lazy" src={projectImage3} alt="Meshery Logo" width={80} height={80} imgStyle={{ width: "40px", height: "40px" }} />
                   <p>Meshery</p>
                   <h3>Cloud Native Management and Governance</h3>
                 </div>
@@ -64,14 +64,14 @@ const Projects = () => {
             <Col sm={12} md={6} lg={3}>
               <Link className="project-card" to="/projects/nighthawk">
                 <div className="project__block__inner">
-                  <StaticImage loading="lazy" src={projectImage4} alt="Nighthawk Logo" width={100} height={80} imgStyle={{ width: "50px", height: "40px" }}/>
+                  <StaticImage loading="lazy" src={projectImage4} alt="Nighthawk Logo" width={100} height={80} imgStyle={{ width: "50px", height: "40px" }} />
                   <p>Nighthawk</p>
                   <h3>Distributed Performance Management for Microservices</h3>
                 </div>
               </Link>
             </Col>
             <Col sm={12} md={6} lg={3}>
-              <Link className="project-card" to="/service-mesh-landscape">
+              <Link className="project-card" to="/catalog">
                 <div className="project__block__inner">
                   {/* <StaticImage src={catalogLogo} alt="Meshery Catalog" height={40} /> */}
                   <CatalogLogo height="40px" width="auto" style={{ margin: "10px auto", minHeight: "40px" }} />

src/sections/Meshmap/Meshmap-collaborate/meshmap-collaborate-banner.js

@@ -57,7 +57,7 @@ const CollaborationBannerWrapper = styled.div`
         /* font-size: 4rem; */
         position: relative;
         display: inline-block;
-        color: ${props => props.theme.primaryColor};
+        /* color: ${props => props.theme.primaryColor}; */
         transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
 /*
         @media only screen and (min-width: 500px) {
@@ -195,7 +195,7 @@ const MeshmapCollaborateBanner = () => {
         <div className="banner-text">
           <h1>Collaborate with the team. <br /> Build solutions together </h1>
           <h4>Designer and Visualizer live side-by-side, so all design work, from ideation to operation, can be found in one place.</h4>
-          <Button primary className="join-community-button" title="Start Collaborating" url="/projects" />
+          <Button primary className="join-community-button" title="Start Collaborating" url="https://play.meshery.io/" />
         </div>
         <div className="transition-container" ref={transitionRef}>
           <img className="canvas" src={isDark ? EmptyDark : EmptyLight} alt="" />