Merge pull request #5230 from horizenight/horizenight/home/component_…

…styling bugFix [Component Styling] Fix <i> tags on home page
layer5io · Apr 28, 2024 · e93d333 · e93d333
2 parents a79e43d + 7d64dec
commit e93d333
Showing 1 changed file with 59 additions and 36 deletions.
diff --git a/src/sections/Home/FeaturesContainer/index.js b/src/sections/Home/FeaturesContainer/index.js
@@ -2,9 +2,16 @@ import React from "react";
 
 // Default imports
 import Features from "../../../components/Features/index.js";
+import WhiteboardingImage from "./images/whiteboarding.svg";
+import WhiteboardingImageLight from "./images/whiteboarding-light.svg";
 import CommentingImageDark from "./images/commenting.svg";
 import CommentingImageLight from "./images/commenting-white.svg";
 import TwoColLayout from "../../../components/Features/TwoColLayout.js";
+import AWSImage from "./images/aws.svg";
+import AWSImageLight from "./images/aws-light.svg";
+import AWSLogoDark from "./images/aws-logo-dark.svg";
+import AWSLogoLight from "./images/aws-logo-light.svg";
+import GCPLogo from "./images/gcp-logo.svg";
 // Named imports
 import { Container } from "./style.js";
 import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode.js";
@@ -20,29 +27,46 @@ const FeaturesContainer = () => {
       redirectLink: "/cloud-native-management/meshmap/collaborate/peer-reviews",
       desc: "Real-time collaboration for cloud and cloud native designs with live-editing, instant feedback, deploy dry runs, and secure access controls.",
       imgLink: isDark ? CommentingImageDark : CommentingImageLight,
-      cursor: false
+      cursor: false,
+    },
+    {
+      title: "Generate stunning diagrams",
+      show_custom_cursor: false,
+      animationOne: false,
+      redirectLink: "/whiteboard",
+      desc: "Crafting cloud-native symphonies: Our engineering diagramming tool is your conductor's baton, turning Kubernetes infrastructure into a canvas for freestyle orchestration.",
+      imgLink: isDark ? WhiteboardingImage : WhiteboardingImageLight,
+      cursor: true,
+    },
+    {
+      title: "Multi-Cloud by Design",
+      show_custom_cursor: false,
+      animationOne: true,
+      redirectLink: "",
+      desc: (
+        <span>
+          Incorporate AWS <i>and</i>{" "} GCP components into Meshery designs for
+          comprehensive <i>and</i>{" "} intuitive system mapping, documentation, <i>and</i>{" "}
+          orchestration.
+        </span>
+      ),
+      imgLink: isDark ? AWSImage : AWSImageLight,
+      cursor: true,
+      redirectLinkWithImage: [
+        {
+          text: "Amazon Web Services",
+          image: isDark ? AWSLogoDark : AWSLogoLight,
+          redirect:
+            "/cloud-native-management/generate-aws-architecture-diagram",
+        },
+        {
+          text: "Google Cloud Platform",
+          image: GCPLogo,
+          redirect:
+            "/cloud-native-management/generate-gcp-architecture-diagram",
+        },
+      ],
     },
-    // {
-    //   title: "Multi-Cloud by design",
-    //   show_custom_cursor: false,
-    //   animationOne: true,
-    //   redirectLink: "",
-    //   desc: "Incorporate AWS and GCP components into Meshery designs for comprehensive and intuitive system mapping, documentation, and orchestration.",
-    //   imgLink: isDark ? AWSImage : AWSImageLight,
-    //   cursor: true,
-    //   redirectLinkWithImage: [
-    //     {
-    //       text: "Amazon Web Services",
-    //       image: isDark ? AWSLogoDark : AWSLogoLight,
-    //       redirect: "/cloud-native-management/generate-aws-architecture-diagram"
-    //     },
-    //     {
-    //       text: "Google Cloud Platform",
-    //       image: GCPLogo,
-    //       redirect: "/cloud-native-management/generate-gcp-architecture-diagram"
-    //     }
-    //   ]
-    // },
   ];
 
   return (
@@ -59,20 +83,19 @@ const FeaturesContainer = () => {
         {/* Elevate teamwork with integrated communication channels, ensuring efficient and secure project success. */}
         {/* a suite of annotation and visualization tools, allowing users to draw, annotate, and collaborate in real-time on their cloud native designs. */}
 
-        {
-          featuresInfo.map((feature) => (
-            <Features
-              key={feature.title}
-              title={feature.title}
-              show_custom_cursor={feature.show_custom_cursor}
-              animationOne={feature.animationOne}
-              redirectLink={feature.redirectLink}
-              desc={feature.desc}
-              imgLink={feature.imgLink}
-              cursor={feature.cursor}
-              redirectLinkWithImage={feature.redirectLinkWithImage}
-            />))
-        }
+        {featuresInfo.map((feature) => (
+          <Features
+            key={feature.title}
+            title={feature.title}
+            show_custom_cursor={feature.show_custom_cursor}
+            animationOne={feature.animationOne}
+            redirectLink={feature.redirectLink}
+            desc={feature.desc}
+            imgLink={feature.imgLink}
+            cursor={feature.cursor}
+            redirectLinkWithImage={feature.redirectLinkWithImage}
+          />
+        ))}
         <TwoColLayout />
       </Container>
     </>