chore: optimize and move large assets to static

src/collections/blog/2023/06-15-internship-experience-blog-sudhanshu-dasgupta/index.mdx

@@ -3,8 +3,8 @@ title: "Internship Experience with Layer5 - Sudhanshu Dasgupta"
 subtitle: "Unleashing the Journey: From Open-Source Enthusiast to Internship Success"
 date: 2023-06-15 10:30:05 -0530
 author: Sudhanshu Dasgupta
-thumbnail: ./sudhanshu.png
-darkthumbnail: ./sudhanshu.png
+thumbnail: /static/images/sudhanshu.png
+darkthumbnail: /static/images/sudhanshu.png
 description: "Sharing my internship and open-source experience with this awesome community Layer5"
 category: Community
 type: Blog

src/collections/blog/2024/03-20-kubeconeu2024/index.mdx

@@ -26,7 +26,6 @@ import MeshMark from "./meshmark.png";
 import Catalog from "./catalog.png";
 import NighthawkSlide from "./nighthawk-slide.png";
 import SMPSpec from "./smp-spec.png";
-import Booth from "./booth.png";
 
 <BlogWrapper>
 Happy KubeCon week! We hope you are as excited as we are about all the fantastic things we will learn.
@@ -44,7 +43,7 @@ At the booth, we'll be showcasing demos of our two newest projects:
 
 <div style={{ display: "flex", alignItems: "center" }}>
 <h2> Don't forget to catch our lightning talk today at 2:30! </h2>
-<img src={Booth} width="400" />
+<img src="/static/images/booth.png" width="400" />
 </div>
 
 <p />

src/collections/blog/2024/11-01-meet-the-maintainer-yash-sharma/post.mdx

@@ -3,8 +3,8 @@ title: "Meet the Maintainer: Yash Sharma"
 subtitle: "An interview series with open source maintainers"
 date: 2024-11-01 10:30:05 -0530
 author: Hargun Kaur
-thumbnail: ./yash-sharma-meshery-maintainer.png
-darkthumbnail: ./yash-sharma-meshery-maintainer.png
+thumbnail: /static/images/yash-sharma-meshery-maintainer.png
+darkthumbnail: /static/images/yash-sharma-meshery-maintainer.png
 description: Meet the Maintainer series with open source maintainer, Yash Sharma
 type: Blog
 category: Open Source
@@ -15,7 +15,6 @@ published: true
 ---
 
 import { BlogWrapper } from "../../Blog.style.js";
-import img from "./yash-sharma-meshery-maintainer.png";
 import { MeetTheMaintainer } from "../../MeetTheMaintainer.style.js";
 import { Link } from "gatsby";
 import ForkLift from "../../../../assets/images/app/hero/forklift.svg";

src/collections/blog/2024/11-05-what-is-the-kanvas-catalog/post.mdx

@@ -26,7 +26,6 @@ import renderedDesignPNG from "../../../../assets/images/kanvas/gifs/rendered-de
 import designPannelOpener from "./designs-panel-opener.png";
 import designerDockPNG from "./designer-dock.png";
 import catalogGIF from "../../../../assets/images/kanvas/gifs/catalog.gif";
-import publishToCatalogGIF from "./publish-to-catalog.gif";
 import getStartedWithDesignerGIF from "../../../../assets/images/kanvas/gifs/start-from-scratch.gif";
 
 <BlogWrapper>
@@ -83,7 +82,7 @@ Kanvas will convert these into a usable design based on their configurations.
 Make your designs accessible to others by publishing them in the Catalog:
 
 - In the designs panel, locate your design and hover over it to access quick actions. Select the info button (marked with an "i") and add any necessary details for the review process, such as relevant technologies, descriptions, and considerations and click Publish button. Once approved by the Maintainers, your design becomes available to the broader community in Kanvas catalog.
-<img src={publishToCatalogGIF} />
+<img src="/static/images/publish-to-catalog.gif" />
 
 
 #### Share your designs

src/collections/programs/hacktoberfest-2024/index.mdx

@@ -1,8 +1,8 @@
 ---
 title: "Hacktoberfest 2024"
 description: "Extending Meshery Models - Prepare for Hacktoberfest with Layer5 MeshMates and Maintainers. Join seasoned open source maintainers, hack through easy issues, and grow your skills. Discover Newcomers resources and explore the Layer5 Community Handbook."
-thumbnail: ./hacktoberfest-layer5-2024-first-pr.webp
-darkthumbnail: ./hacktoberfest-layer5-2024-first-pr.webp
+thumbnail: /static/images/hacktoberfest-layer5-2024-first-pr.webp
+darkthumbnail: /static/images/hacktoberfest-layer5-2024-first-pr.webp
 permalink: "hacktoberfest/2024"
 program: "Hacktoberfest"
 programSlug: "hacktoberfest"
@@ -14,7 +14,6 @@ published: true
 ---
 
 import { Link } from "gatsby" ;
-import hacktoberfestBadge from "./layer5-hacktoberfest11-badge-large.png";
 
 <Link to="/programs/hacktoberfest">Hacktoberfest</Link> is just around the corner. You'd be surprised to know how small changes can make a big impact on a project. The more a project scales, the easier it is for small errors to live within it. You can make a real difference by fixing these relatively easier issues and continue to grow from there.
 
@@ -26,7 +25,7 @@ Prepare for Hacktoberfest and ready yourself for contributing to CNCF projects t
 
 Earn a Hacktoberfest Contributor badge by contributing to Layer5 projects during this Hacktoberfest.
 
-<img src={hacktoberfestBadge} style={{width: "250px"}} />
+<img src="/static/images/hacktoberfest-layer5-2024-first-pr.png" style={{width: "250px"}} />
 
 - **DATE:** September 27, 2024
 - **TIME:** 10AM CT | 4PM WAT | 8:30PM IST

src/components/Academy/Features-Section/AcademyFeaturesCarousel.js

@@ -2,15 +2,14 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import PopOutCard from "../../PopOutCardCarousel";
 
-import Levels from "./academy-catalog.gif";
 import Challenges from "./challenges.webp";
 import Badges from "./badges.webp";
 import Track from "./track.webp";
 
 const CONTENT = [
   {
     title: "CNCF Structured Learning Paths",
-    img: Levels,
+    img: "/static/images/academy-catalog.gif",
     description:
       "Comprehensive CNCF-aligned learning paths designed for different skill levels — from beginner to advanced. Master Kubernetes and cloud native technologies through hands-on experience.",
   },

src/components/Academy/Features-Section/AcademyFeaturesMobileSwiper.js

@@ -5,15 +5,14 @@ import "swiper/css";
 import "swiper/css/effect-cards";
 import { EffectCards, Pagination, Navigation, Autoplay } from "swiper/modules";
 import styled from "styled-components";
-import Levels from "./academy-catalog.gif";
 import Challenges from "./challenges.webp";
 import Badges from "./badges.webp";
 import Track from "./track.webp";
 
 const CONTENT = [
   {
     title: "CNCF Structured Learning Paths",
-    img: Levels,
+    img: "/static/images/academy-catalog.gif",
     description:
       "Comprehensive CNCF-aligned learning paths designed for different skill levels — from beginner to advanced. Master Kubernetes and cloud native technologies through hands-on experience.",
     gradient: "one",

src/sections/AWS-Diagram/diagram.js

@@ -7,7 +7,6 @@ import RelatedPicks from "../../components/RelatedPicks";
 import ConfigGIF from "./images/config.gif";
 import DeployGIF from "./images/deploy.gif";
 import DragDropGIF from "./images/drag-drop.gif";
-import IconLibraryGIF from "./images/icon-library.gif";
 import { Link } from "gatsby";
 
 const DiagramWrapper = styled.div`
@@ -192,7 +191,7 @@ const Aws = () => {
           </Col>
           <Col md={8} className="diagram-image">
             <div className="image-wrapper">
-              <img src={IconLibraryGIF} alt="AWS Diagrams for anything" className="AWS-image" />
+              <img src="/static/images/icon-library.gif" alt="AWS Diagrams for anything" className="AWS-image" />
             </div>
           </Col>
         </Row>

src/sections/GCP-Diagram/diagram.js

@@ -6,7 +6,6 @@ import GCPCatalogDark from "./images/gcp-catalog-dark.svg";
 import RelatedPicks from "../../components/RelatedPicks";
 // import DeployGIF from "./images/gcp-deploy.gif";
 import DragNDropGIF from "./images/gcp-drag-drop.gif";
-import IconsLibraryGIF from "./images/gcp-icon-library.gif";
 import { Link } from "gatsby";
 
 const DiagramWrapper = styled.div`
@@ -183,7 +182,7 @@ const Gcp = () => {
           </Col>
           <Col md={8} className="diagram-image">
             <div className="image-wrapper">
-              <img src={IconsLibraryGIF} alt="GCP Diagrams for anything" className="GCP-image" />
+              <img src="/static/images/gcp-icon-library.gif" alt="GCP Diagrams for anything" className="GCP-image" />
             </div>
           </Col>
         </Row>

src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/KanvasMobileSwiper.js

@@ -6,7 +6,6 @@ import "swiper/css";
 import "swiper/css/effect-cards";
 import { EffectCards, Pagination, Navigation, Autoplay } from "swiper/modules";
 import dragDrop from "../images/drag-drop-components.gif";
-import mergeDesign from "../images/merge-design.gif";
 import connectComponents from "../images/connect-components.gif";
 import shareDesign from "../images/share-design.gif";
 
@@ -21,7 +20,7 @@ const CONTENT = [
   },
   {
     title: "Understand your infrastructure with visualization and automation",
-    img: mergeDesign,
+    img: "/static/images/merge-design.gif",
     description:
       "Kanvaselps your team automate infrastructure understanding from the architecture to a single PR so your team can ship, refactor and onboard to legacy or existing applications faster.",
     gradient: "two",

src/sections/Kanvas/Kanvas-design/kanvas-design-features-carousel.js

@@ -3,7 +3,6 @@ import styled from "styled-components";
 import PopOutCard from "../../../components/PopOutCardCarousel";
 
 import dragDrop from "./images/drag-drop-components.gif";
-import mergeDesign from "./images/merge-design.gif";
 import connectComponents from "./images/connect-components.gif";
 import shareDesign from "./images/share-design.gif";
 
@@ -16,7 +15,7 @@ const CONTENT = [
   },
   {
     title: "Visualize and automate infrastructure understanding",
-    img: mergeDesign,
+    img: "/static/images/merge-design.gif",
     description:
       "Kanvaselps automate infrastructure understanding from the architecture to a single PR so your team can ship, refactor and onboard to legacy or existing applications faster.",
   },