feat: use embedded Kanvas design for Meshery architecture diagram

src/sections/Meshery/Meshery-architecture/index.js

@@ -0,0 +1,41 @@
+import React from "react";
+import styled from "styled-components";
+import MesheryDesignEmbed from "@layer5/meshery-design-embed";
+import { Container } from "../../../reusecore/Layout";
+
+const ArchitectureWrapper = styled.div`
+  margin: 4rem 0;
+  text-align: center;
+
+  h2 {
+    margin-bottom: 2rem;
+    font-weight: 700;
+  }
+
+  .embed-container {
+    width: 100%;
+    height: 600px;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  }
+`;
+
+const MesheryArchitecture = () => {
+  return (
+    <ArchitectureWrapper>
+      <Container>
+        <h2>Meshery Architecture</h2>
+        <p>Interactive infrastructure design using Meshery Kanvas.</p>
+        <div className="embed-container">
+          <MesheryDesignEmbed
+            embedId="embedded-design-e27d10c1-f9bd-43ce-8aff-07f55dbca142"
+            embedScriptSrc="/embed-test/embedded-design-meshery.js"
+          />
+        </div>
+      </Container>
+    </ArchitectureWrapper>
+  );
+};
+
+export default MesheryArchitecture;

src/sections/Meshery/index.js

@@ -13,6 +13,7 @@ import DockerExtensionCTA from "../Docker-Meshery/docker-extension-CTA";
 import MesheryWrapper from "./meshery.style";
 import FeaturesSection from "./Features-section";
 import Features from "./Meshery-features";
+import MesheryArchitecture from "./Meshery-architecture";
 import InlineQuotes from "../../components/Inline-quotes";
 import Maximiliano from "../../collections/members/maximiliano-churichi/Maximiliano-Churichi.webp";
 import Nic from "../../collections/members/nicholas-jackson/nic-jackson.webp";
@@ -25,36 +26,52 @@ const MesheryPage = () => {
           <Row className="description">
             <Col className="desc-text" $lg={6} $md={6} $sm={10} $xs={8}>
               <h1 className="heading-1"> Wrangle your infrastructure</h1>
-              <h1 className="heading-2"> <span className="heading-2"> collaboratively</span></h1>
+              <h1 className="heading-2">
+                {" "}
+                <span className="heading-2"> collaboratively</span>
+              </h1>
               <p className="desc-p">
                 {/* Meshery is the cloud native manager. <br /> */}
-                Confidently design, deploy, and operate your infrastructure and workloads with Meshery.
+                Confidently design, deploy, and operate your infrastructure and
+                workloads with Meshery.
               </p>
-              <Button $primary className="banner-btn" title="Schedule a Demo" $external={true}
+              <Button
+                $primary
+                className="banner-btn"
+                title="Schedule a Demo"
+                $external={true}
                 $url="https://calendar.google.com/calendar/appointments/schedules/AcZssZ3pmcApaDP4xd8hvG5fy8ylxuFxD3akIRc5vpWJ60q-HemQi80SFFAVftbiIsq9pgiA2o8yvU56?gv=true"
               >
                 <GiClockwork size={21} className="button-icon" />
               </Button>
-              <Button $secondary className="banner-btn" title="Run Meshery"
+              <Button
+                $secondary
+                className="banner-btn"
+                title="Run Meshery"
                 $url="/cloud-native-management/meshery/getting-started"
               >
                 <FiDownloadCloud size={21} className="button-icon" />
               </Button>
             </Col>
             <Col $lg={6} $md={6} className="meshery-hero-img desc-text">
-              <video autoPlay muted loop controls className="meshery-video" >
+              <video autoPlay muted loop controls className="meshery-video">
                 <source src={mesheryDemo} type="video/webm" />
               </video>
               {/* <img className="meshery-sup-img" src={mesheryFullStack} alt="Meshery the multi-mesh manager" /> */}
-              <Button $primary className="banner-btn align-btn"
-                title="Star the Repository" $url="https://github.com/meshery/meshery" $external={ true }
+              <Button
+                $primary
+                className="banner-btn align-btn"
+                title="Star the Repository"
+                $url="https://github.com/meshery/meshery"
+                $external={true}
               >
                 <FaGithub size={21} className="button-icon" />
               </Button>
             </Col>
           </Row>
         </div>
         <FeaturesTable />
+        <MesheryArchitecture />
       </Container>
       <FeaturesSection />
       <Container>
@@ -65,7 +82,10 @@ const MesheryPage = () => {
           image={Nic}
         />
         <div className="callout">
-          <h1> Manage your clusters with features you won't find anywhere else.</h1>
+          <h1>
+            {" "}
+            Manage your clusters with features you won't find anywhere else.
+          </h1>
         </div>
       </Container>
       <Features />
@@ -79,7 +99,6 @@ const MesheryPage = () => {
         />
       </Container>
     </MesheryWrapper>
-
   );
 };