diff --git a/package-lock.json b/package-lock.json index 8409ea2ae9e06..f77004e3788b6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12744,7 +12744,6 @@ "resolved": "https://registry.npmjs.org/eslint-mdx/-/eslint-mdx-3.6.2.tgz", "integrity": "sha512-5hczn5iSSEcwtNtVXFwCKIk6iLEDaZpwc3vjYDl/B779OzaAAK/ou16J2xVdO6ecOLEO1WZqp7MRCQ/WsKDUig==", "dev": true, - "license": "MIT", "dependencies": { "acorn": "^8.15.0", "acorn-jsx": "^5.3.2", diff --git a/src/sections/Community/Web-based-from/index.js b/src/sections/Community/Web-based-from/index.js index fad8155f86c0d..c473c1976e3da 100644 --- a/src/sections/Community/Web-based-from/index.js +++ b/src/sections/Community/Web-based-from/index.js @@ -34,7 +34,7 @@ const validatePictureUrl = (value) => { } } catch (err) { console.error("Error in validatePictureUrl:", err); - return "Please enter a URL to an image file."; + error = "Please enter a URL to an image file."; } } } diff --git a/src/sections/Kanvas/index.js b/src/sections/Kanvas/index.js index e5df2d5a8e617..7ae778323207b 100644 --- a/src/sections/Kanvas/index.js +++ b/src/sections/Kanvas/index.js @@ -1,28 +1,21 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import KanvasWrapper from "./kanvas.style"; import { Container } from "../../reusecore/Layout"; import Features from "../../components/Features-carousel"; import KanvasModes from "./kanvas-modes"; -import Catalog from "./kanvas-catalog"; -import Platform from "./kanvas-platform"; import KanvasBanner from "./kanvas_banner"; import designerImage from "../../assets/images/kanvas/KanvasDesigner.webp"; import visualizerImage from "../../assets/images/kanvas/KanvasVisualizer.webp"; import DesignerFeatures from "./FeaturesSection/Design/DesignerFeatures"; import CollaboratorFeatures from "./FeaturesSection/Collaborate/CollaboratorFeatures"; import VisualizerFeatures from "./FeaturesSection/Visualize/VisualizerFeatures"; -import KanvasBtn from "./kanvas-buttons.js"; -import Reviews from "../Pricing/review-slider"; import InlineQuotes from "../../components/Inline-quotes"; -import KanvasFeatures from "./kanvas-feature.js"; import { ReactComponent as RoleBind1 } from "./FeaturesSection/Design/images/role-binding-1-colorMode.svg"; import { ReactComponent as RoleBind2 } from "./FeaturesSection/Design/images/role-binding-2-colorMode.svg"; import { ReactComponent as RoleBind3 } from "./FeaturesSection/Design/images/role-binding-3-colorMode.svg"; import { ReactComponent as RoleBind4 } from "./FeaturesSection/Design/images/role-binding-4-colorMode.svg"; - import { ReactComponent as Visualize1 } from "./FeaturesSection/Visualize/images/visualize-1-colorMode.svg"; import { ReactComponent as Visualize2 } from "./FeaturesSection/Visualize/images/visualize-2-colorMode.svg"; - import { ReactComponent as Collab1 } from "./FeaturesSection/Collaborate/images/collab1-colorMode.svg"; import { ReactComponent as Collab2 } from "./FeaturesSection/Collaborate/images/collab2-colorMode.svg"; import { ReactComponent as Collab3 } from "./FeaturesSection/Collaborate/images/collab3-colorMode.svg"; @@ -35,18 +28,50 @@ import Kaur from "../../sections/Pricing/reviews/kaur-kallas.webp"; import Ala from "../../sections/Pricing/reviews/ala-eddine-benhassir.jpeg"; import Phillip from "../../sections/Pricing/reviews/phillip-ulberg.jpeg"; import Alex from "../../sections/Pricing/reviews/alex-hokanson.jpeg"; -import TeaserModal from "../../components/TeaserModal"; import GuyM from "./images/guym.jpg"; import Abdechakour from "../../sections/Pricing/reviews/abdechakour-h.jpeg"; - const Kanvas = (props) => { + const [ReviewsComponent, setReviewsComponent] = useState(null); + const [TeaserModalComponent, setTeaserModalComponent] = useState(null); + const [KanvasFeaturesComponent, setKanvasFeaturesComponent] = useState(null); + const [CatalogComponent, setCatalogComponent] = useState(null); + const [KanvasBtnComponent, setKanvasBtnComponent] = useState(null); + const [PlatformComponent, setPlatformComponent] = useState(null); + + useEffect(() => { + import("../Pricing/review-slider").then((mod) => { + setReviewsComponent(() => mod.default); + }); + + import("../../components/TeaserModal").then((mod) => { + setTeaserModalComponent(() => mod.default); + }); + + import("./kanvas-feature").then((mod) => { + setKanvasFeaturesComponent(() => mod.default); + }); + + import("./kanvas-catalog").then((mod) => { + setCatalogComponent(() => mod.default); + }); + + import("./kanvas-buttons").then((mod) => { + setKanvasBtnComponent(() => mod.default); + }); + + import("./kanvas-platform").then((mod) => { + setPlatformComponent(() => mod.default); + }); + }, []); return ( -
+
+ + {/* Mobile modes */}
{ ]} />
+ + + + {/* Designer Features */} - ) - }, - { - title: "Manage your applications visually and intuitively", - description: "Play with powerful features including context-aware designs and namespace configurations to easily manage all services.", - imgContent: ( - - ) - }, - { - title: "Build the bridge", - description: "Go from developer handoffs to ongoing conversations with a shared language between design and development.", - imgContent: ( - - ) - }, - { - title: "Stop finger-pointing", - description: "Make infrastructure and application management less about finger-pointing and more about collaborating.", - imgContent: ( - - ) - }, - ]} + features={[ + { + title: "Design your deployments the way you want", + description: + "Drag-and-drop your cloud native infrastructure using a palette of thousands of versioned Kubernetes components and Cloud services. Say goodbye to YAML configurations.", + imgContent: ( + + ), + }, + { + title: "Manage your applications visually and intuitively", + description: + "Play with powerful features including context-aware designs and namespace configurations to easily manage all services.", + imgContent: ( + + ), + }, + { + title: "Build the bridge", + description: + "Go from developer handoffs to ongoing conversations with a shared language between design and development.", + imgContent: ( + + ), + }, + { + title: "Stop finger-pointing", + description: + "Make infrastructure and application management less about finger-pointing and more about collaborating.", + imgContent: ( + + ), + }, + ]} /> { quote="The fact that Kanvas automatically renders our Kubernetes configuration is a game-changer for our team." image={Kaur} /> + + {/* Visualizer Features */} - ) - }, - { - title: "Continuous visibility across all of your clusters and workloads.", - description: "Import your existing Kubernetes, Kustomize, Helm, or Docker Compose applications. Interactively connect to terminal sessions or initiate and search log streams from your containers.", - imgContent: ( - - ) - }, - ]} + features={[ + { + title: + "All your Kubernetes and Cloud infrastructure under a common management", + description: + "Deploy designs, apply patterns, manage and operate your deployments and services in real-time.", + imgContent: ( + + ), + }, + { + title: + "Continuous visibility across all of your clusters and workloads.", + description: + "Import your existing Kubernetes, Kustomize, Helm, or Docker Compose applications. Interactively connect to terminal sessions or initiate and search log streams from your containers.", + imgContent: ( + + ), + }, + ]} /> + { image={Abdechakour} /> + {/* Collaborator Features */} - - - - ) - // Invite any Layer5 Cloud user, or all Meshery users, to work with you on a public design, including making changes and releasing new versions." - }, - // { - // title: "Nothing great is made alone.", - // description: "Kanvas connects everyone in the DevOps process so teams can deliver better products, faster." - // }, - { - title: "Create. Iterate. Repeat.", - description: "Build an iterative design flow with live collaboration that keeps you in the loop whether you're working in the office or remotely.", - imgContent: ( - <> - avatar-2 - - - ) - }, - { - title: "Where your teams share the same language", - description: "Build an iterative design flow with live collaboration that keeps you in the loop whether you're working in the office or remotely.", - imgContent: ( - <> - avatar-3 - - - ) - }, - // { - // title: "Where your teams share the same language", - // description: "Build an iterative design flow with live collaboration that keeps you in the loop whether you're working in the office or remotely." - // }, - { - title: "Inclusive collaboration from start to finish", - description: "Kanvas is an end-to-end management platform, here to help teams understand problems, explore options, and build solutions—together.", - imgContent: ( - <> - avatar-3 - - - ) - } - ]} + features={[ + { + title: "Bring those ideas to life", + description: + "Designer and Operator live side-by-side, so all design work, from ideation to operation, can be found in one place.", + imgContent: ( + <> + avatar-1 + + + ), + }, + { + title: "Create. Iterate. Repeat.", + description: + "Build an iterative design flow with live collaboration that keeps you in the loop whether you're working in the office or remotely.", + imgContent: ( + <> + avatar-2 + + + ), + }, + { + title: "Where your teams share the same language", + description: + "Build an iterative design flow with live collaboration that keeps you in the loop whether you're working in the office or remotely.", + imgContent: ( + <> + avatar-3 + + + ), + }, + { + title: "Inclusive collaboration from start to finish", + description: + "Kanvas is an end-to-end management platform, here to help teams understand problems, explore options, and build solutions—together.", + imgContent: ( + <> + avatar-3 + + + ), + }, + ]} /> - {/* */} + - - + + {/* هنا نستخدم الكومبوننتس اللي حملناها Lazy */} + {KanvasFeaturesComponent && ( + + )} + + {CatalogComponent && } + - {/* */} - - + + {KanvasBtnComponent && ( + + )} + + {PlatformComponent && } + { />
+ <> - - + {ReviewsComponent && } + {TeaserModalComponent && ( + + )} );