From d22d370048a633d08dcbdba7cdc9f1ad2ab497dc Mon Sep 17 00:00:00 2001
From: Gaurav Chadha <gauravchadha1676@gmail.com>
Date: Tue, 21 Jun 2022 03:10:20 +0530
Subject: [PATCH] meshmap page updates

Signed-off-by: Gaurav Chadha <gauravchadha1676@gmail.com>
---
 src/sections/Meshmap/index.js          |  13 ++-
 src/sections/Meshmap/meshery-action.js | 127 +++++++++++++++++++++++++
 src/sections/Meshmap/meshmap_banner.js |  13 +--
 3 files changed, 140 insertions(+), 13 deletions(-)
 create mode 100644 src/sections/Meshmap/meshery-action.js

diff --git a/src/sections/Meshmap/index.js b/src/sections/Meshmap/index.js
index c388b2e06bad..a09db9a12f54 100644
--- a/src/sections/Meshmap/index.js
+++ b/src/sections/Meshmap/index.js
@@ -8,7 +8,6 @@ import { Field, Formik, Form } from "formik";
 import axios from "axios";
 import Features from "../../components/Features-carousel";
 import MeshmapModes from "./meshmap-modes";
-import DiscussCallout from "../../sections/Discuss-Callout";
 import Catalog from "./meshmap-catalog";
 import Platform from "./meshmap-platform";
 import layer5_img from "../../assets/images/layer5/layer5-only/svg/layer5-white-no-trim.svg";
@@ -16,6 +15,8 @@ import MeshmapBanner from "./meshmap_banner";
 import mesheryCloud from "../../assets/images/meshmap/MesheryCloud.png";
 import designerImage from "../../assets/images/meshmap/MeshmapDesigner.png";
 import visualizerImage from "../../assets/images/meshmap/MeshmapVisualizer.png";
+import MeshMapDrafts from "./images/meshmap-draft-logos.png";
+import MesheryAction from "./meshery-action";
 
 
 const Meshmap = () => {
@@ -98,7 +99,7 @@ const Meshmap = () => {
           </div>
           <MeshmapModes />
           <Catalog />
-          <Platform />
+          <MesheryAction />
 
           <div className="banner-background">
 
@@ -112,7 +113,12 @@ const Meshmap = () => {
                     Join the waiting list for participation in the beta program. Your request for access will be processed as quickly as possible. Due to the large influx of program participation requests, it may take some time before system access is granted. So that you can familiarize while you wait, the Layer5 team will send you additional information about beta program, MeshMap modes, and service mesh patterns.
                   </p>
                   <img src={mesheryCloud} className="meshery-hero-img" alt="Meshery Cloud" />
-                  <DiscussCallout />
+                  <div className="draft-logo">
+                    <p>Help us choose our logo for MeshMap:</p>
+                    <a href="https://twitter.com/layer5/status/1536832439833743363?s=20&t=oEDasGEBl8cvsA64P7NNTA">
+                      <img src={MeshMapDrafts} alt="MeshMap Draft" /></a><br />
+                    <p><a href="https://twitter.com/layer5/status/1536832439833743363?s=20&t=oEDasGEBl8cvsA64P7NNTA">Vote for your favorite design</a></p>
+                  </div>
                 </Col>
 
                 <Col lg={5} md={6} sm={12}>
@@ -216,6 +222,7 @@ const Meshmap = () => {
               </Row>
             </Container>
           </div>
+          <Platform />
         </Container >
       </div >
     );
diff --git a/src/sections/Meshmap/meshery-action.js b/src/sections/Meshmap/meshery-action.js
new file mode 100644
index 000000000000..744a662cf86d
--- /dev/null
+++ b/src/sections/Meshmap/meshery-action.js
@@ -0,0 +1,127 @@
+import React from "react";
+import styled from "styled-components";
+
+const MesheryWrapper = styled.div`
+
+.blocks {
+  display: flex;
+  padding-bottom: 5rem;
+}
+
+.block {
+  min-height: 100px;
+  width: 50%;
+  width: calc(60% + 2rem);
+}
+}
+
+.block--left {
+  background-color: BLACK;
+  h1, p{
+    text-align: center;
+    color: white;
+  }
+  p{
+    padding: 1.1rem 2rem 0 4rem;
+  }
+  img{
+    width: 89%;
+    padding: 1rem 0 1rem 12rem;
+  }
+}
+
+.block--right {
+  background-color: #00b39f;
+  height: 20rem;
+  h1, p{
+    text-align: center;
+    color: white;
+  }
+  p{
+    padding: 1.1rem 2rem 0 4rem;
+  }
+  img{
+    width: 89%;
+    padding: 1rem 0 1rem 12rem;
+  }
+}
+
+p.caption {
+    margin: 0rem 0rem 2rem 0rem;
+    font-style: normal ;
+  }
+  .firstheading {
+    text-align: center;
+    padding-top:0;
+    margin-top:0;
+    background-color: black;
+  }
+  .heading{
+      text-align: center;
+      padding: 1rem 0;
+      text-transform: uppercase;
+  }
+
+  @media screen and (max-width: 991px) {
+    .block--left, .block--right {
+      width: 50%;
+      margin: 0;
+      clip-path: none;
+      h1{
+        text-align: center;
+        color: white;
+      }
+      p{
+        color: white;
+        width: 100%;
+        padding: 1rem;
+      }
+      img{
+        width: 95%;
+        padding-left: 0;
+        display: block;
+        margin: 0 auto;
+      }
+    }
+}
+
+
+.modes-image{
+  margin: 0 0 2rem;
+}
+
+@media only screen and (max-width: 768px) {
+  .mobile-modes{
+    display: block;
+  }
+}
+ 
+`;
+
+const MesheryAction = () => {
+  return (
+    <MesheryWrapper>
+      <h2 className="heading">Watch Meshery In Action</h2>
+      <p className="caption">
+        Everything for service mesh in one place.
+      </p>
+      <div className="mobile-modes">
+
+      </div>
+
+      <div className="blocks">
+        <div className="block block--right">
+          <h1>Service MeshCon 22</h1>
+          <iframe width="100%" height="100%" src="https://www.youtube.com/embed/yvqn6ckO7BI" loading="lazy" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen ></iframe>
+        </div>
+        <div className="block block--left">
+          <h1>DockerCon 22</h1>
+          <iframe width="100%" height="100%" src="https://www.youtube.com/embed/3DPZafR8VWM" loading="lazy" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen ></iframe>
+        </div>
+      </div>
+    </MesheryWrapper >
+  );
+};
+
+export default MesheryAction;
+
diff --git a/src/sections/Meshmap/meshmap_banner.js b/src/sections/Meshmap/meshmap_banner.js
index 5d4df9f2ba52..70c3d36ee718 100644
--- a/src/sections/Meshmap/meshmap_banner.js
+++ b/src/sections/Meshmap/meshmap_banner.js
@@ -1,9 +1,5 @@
 import React from "react";
-import { Link } from "gatsby";
-import { Col, Container, Row } from "../../reusecore/Layout";
-import PageHeader from "../../reusecore/PageHeader";
 import Meshery_Logo from "../../assets/images/meshery/icon-only/meshery-logo-light.svg";
-import MeshMapDrafts from "./images/meshmap-draft-logos.png";
 import styled from "styled-components";
 
 const BannerSectionWrapper = styled.div`
@@ -86,7 +82,7 @@ const BannerSectionWrapper = styled.div`
 
     .learn-particle-img {
         width: 35rem;
-        height: 27rem;
+        height: 25rem;
         overflow: hidden;
         margin-top: -8rem;
         position: absolute;
@@ -160,11 +156,8 @@ const BannerSectionWrapper = styled.div`
 const BannerSection = () => {
   return (
     <BannerSectionWrapper>
-      <div className="draft-logo">
-        <p>Help us choose our logo for MeshMap:</p>
-        <a href="https://twitter.com/layer5/status/1536832439833743363?s=20&t=oEDasGEBl8cvsA64P7NNTA">
-          <img src={MeshMapDrafts} alt="MeshMap Draft" /></a><br />
-        <p><a href="https://twitter.com/layer5/status/1536832439833743363?s=20&t=oEDasGEBl8cvsA64P7NNTA">Vote for your favorite design</a></p>
+      <div className="learn-particle-img">
+        <img src={Meshery_Logo} alt="Meshery Logo"/>
       </div>
       <div>
         {/* <PageHeader title="MeshMap" subtitle="take the blinders off" superscript="BETA" /> */}