feat: animate Meshery architecture diagram and add section

Author: shteypandey28-hue

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

@@ -0,0 +1,73 @@
+import React from "react";
+import styled from "styled-components";
+import { Container } from "../../../reusecore/Layout";
+import { ReactComponent as ArchitectureSVG } from "../images/meshery-architecture.svg";
+
+const ArchitectureWrapper = styled.div`
+  padding: 4rem 0;
+  text-align: center;
+
+  .title {
+    margin-bottom: 2rem;
+  }
+
+  .architecture-diagram {
+    max-width: 100%;
+    overflow-x: auto;
+    display: flex;
+    justify-content: center;
+
+    svg {
+      width: 100%;
+      height: auto;
+      max-width: 900px;
+
+      .st5,
+      .st9,
+      .st13,
+      .st15,
+      .st20,
+      .st28,
+      .st29 {
+        stroke-dasharray: 8;
+        animation: dash 2s linear infinite;
+        opacity: 0.8;
+      }
+
+      @keyframes dash {
+        to {
+          stroke-dashoffset: -16;
+        }
+      }
+
+      &:hover {
+        .st5,
+        .st9,
+        .st13,
+        .st15,
+        .st20,
+        .st28,
+        .st29 {
+          animation: dash 0.5s linear infinite;
+          opacity: 1;
+          stroke-width: 1.5;
+        }
+      }
+    }
+  }
+`;
+
+const MesheryArchitecture = () => {
+  return (
+    <ArchitectureWrapper>
+      <Container>
+        <h2 className="title">Meshery Architecture</h2>
+        <div className="architecture-diagram">
+          <ArchitectureSVG aria-label="Meshery Architecture Diagram" />
+        </div>
+      </Container>
+    </ArchitectureWrapper>
+  );
+};
+
+export default MesheryArchitecture;

src/sections/Meshery/index.js

@@ -12,6 +12,7 @@ import DockerExtensionCTA from "../Docker-Meshery/docker-extension-CTA";
 
 import MesheryWrapper from "./meshery.style";
 import FeaturesSection from "./Features-section";
+import MesheryArchitecture from "./Meshery-architecture";
 import Features from "./Meshery-features";
 import InlineQuotes from "../../components/Inline-quotes";
 import Maximiliano from "../../collections/members/maximiliano-churichi/Maximiliano-Churichi.webp";
@@ -25,29 +26,44 @@ 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>
@@ -56,6 +72,7 @@ const MesheryPage = () => {
         </div>
         <FeaturesTable />
       </Container>
+      <MesheryArchitecture />
       <FeaturesSection />
       <Container>
         <InlineQuotes
@@ -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>
-
   );
 };