From 80ea7e8548045a3164d4b2d8eeb560192e37d080 Mon Sep 17 00:00:00 2001
From: Ritik Saxena
Date: Thu, 21 Dec 2023 22:21:15 +0530
Subject: [PATCH 1/7] initial commit
Signed-off-by: Ritik Saxena
---
src/components/Features/index.js | 10 +-
src/components/Features/style.js | 20 ++
.../FeaturesContainer/images/aws-light.svg | 292 ++++++++++++++++++
.../FeaturesContainer/images/aws-logo.svg | 1 +
.../Home/FeaturesContainer/images/aws.svg | 292 ++++++++++++++++++
.../FeaturesContainer/images/gcp-logo.svg | 1 +
src/sections/Home/FeaturesContainer/index.js | 79 ++++-
7 files changed, 677 insertions(+), 18 deletions(-)
create mode 100644 src/sections/Home/FeaturesContainer/images/aws-light.svg
create mode 100644 src/sections/Home/FeaturesContainer/images/aws-logo.svg
create mode 100644 src/sections/Home/FeaturesContainer/images/aws.svg
create mode 100644 src/sections/Home/FeaturesContainer/images/gcp-logo.svg
diff --git a/src/components/Features/index.js b/src/components/Features/index.js
index c48cb6b4f04a..c466fbad4851 100644
--- a/src/components/Features/index.js
+++ b/src/components/Features/index.js
@@ -93,7 +93,15 @@ const Features = (props) => {
{props.title}
{props.desc}
- Learn more →
+ {props.redirectLink ? Learn more →
+ : ()}
{props.animationOne ? (
diff --git a/src/components/Features/style.js b/src/components/Features/style.js
index e683a652283a..0603532b1158 100644
--- a/src/components/Features/style.js
+++ b/src/components/Features/style.js
@@ -38,6 +38,26 @@ export const Container = styled.div`
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
+ .small-card-container {
+ display: flex;
+ gap: 1rem;
+ }
+ .small-card {
+ padding: 1rem 1.25rem;
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+ width: fit-content;
+ border-radius: 0.25rem;
+ background-color: ${(props) => props.theme.whiteZeroEightToBlackZeroEight};
+ cursor: pointer;
+ color: ${(props) => props.theme.greyA0AAAAToGrey666666};
+ border: 2px solid ${(props) => props.theme.whiteZeroEightToBlackZeroEight};
+ &:hover {
+ color: ${(props) => props.theme.text};
+ border: 2px solid ${(props) => props.theme.keppelColor};
+ }
+ }
`;
export const SvgRandomWrapper = styled.div`
position: absolute;
diff --git a/src/sections/Home/FeaturesContainer/images/aws-light.svg b/src/sections/Home/FeaturesContainer/images/aws-light.svg
new file mode 100644
index 000000000000..5338a4a46d10
--- /dev/null
+++ b/src/sections/Home/FeaturesContainer/images/aws-light.svg
@@ -0,0 +1,292 @@
+
diff --git a/src/sections/Home/FeaturesContainer/images/aws-logo.svg b/src/sections/Home/FeaturesContainer/images/aws-logo.svg
new file mode 100644
index 000000000000..ee9edb9c0793
--- /dev/null
+++ b/src/sections/Home/FeaturesContainer/images/aws-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/sections/Home/FeaturesContainer/images/aws.svg b/src/sections/Home/FeaturesContainer/images/aws.svg
new file mode 100644
index 000000000000..748975ea4421
--- /dev/null
+++ b/src/sections/Home/FeaturesContainer/images/aws.svg
@@ -0,0 +1,292 @@
+
diff --git a/src/sections/Home/FeaturesContainer/images/gcp-logo.svg b/src/sections/Home/FeaturesContainer/images/gcp-logo.svg
new file mode 100644
index 000000000000..1fdd2d01fb14
--- /dev/null
+++ b/src/sections/Home/FeaturesContainer/images/gcp-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/sections/Home/FeaturesContainer/index.js b/src/sections/Home/FeaturesContainer/index.js
index 4ddb93827090..b4808a74f1fb 100644
--- a/src/sections/Home/FeaturesContainer/index.js
+++ b/src/sections/Home/FeaturesContainer/index.js
@@ -6,6 +6,10 @@ 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 AWSImage from "./images/aws.svg";
+import AWSImageLight from "./images/aws-light.svg";
+import AWSLogo from "./images/aws-logo.svg";
+import GCPLogo from "./images/gcp-logo.svg";
// Named imports
import { Container } from "./style.js";
import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode.js";
@@ -13,6 +17,48 @@ import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode.js";
// Functional component
const FeaturesContainer = () => {
const { isDark } = useStyledDarkMode();
+ const featuresInfo = [
+ {
+ title: "Collaborate with Precision",
+ show_custom_cursor: true,
+ animationOne: true,
+ redirectLink: "/comments",
+ 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
+ },
+ {
+ 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: "Meshery natively supports multi-cloud credentials natively with AWS and GCP.",
+ imgLink: isDark ? AWSImage : AWSImageLight,
+ cursor: true,
+ imageRedirectLink: true,
+ redirectLinkWithImage: [
+ {
+ text: "AWS",
+ image: AWSLogo,
+ redirect: "/"
+ },
+ {
+ text: "GCP",
+ image: GCPLogo,
+ redirect: "/"
+ }
+ ]
+ },
+ ];
return (
<>
@@ -25,25 +71,24 @@ const FeaturesContainer = () => {
can ship, refactor and onboard faster.
{/* Tools to help you scale your cloud native infrastructure */}
-
{/* 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) => (
+ ))
+ }
- {/* a suite of annotation and visualization tools, allowing users to draw, annotate, and collaborate in real-time on their cloud native designs. */}
>
);
};
From be2e5070f5d98601f60c3eadcaf90ada630e05e2 Mon Sep 17 00:00:00 2001
From: Ritik Saxena
Date: Thu, 21 Dec 2023 22:51:25 +0530
Subject: [PATCH 2/7] description updated
Signed-off-by: Ritik Saxena
---
src/sections/Home/FeaturesContainer/index.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/sections/Home/FeaturesContainer/index.js b/src/sections/Home/FeaturesContainer/index.js
index b4808a74f1fb..66d42c15f4d6 100644
--- a/src/sections/Home/FeaturesContainer/index.js
+++ b/src/sections/Home/FeaturesContainer/index.js
@@ -41,7 +41,7 @@ const FeaturesContainer = () => {
show_custom_cursor: false,
animationOne: true,
redirectLink: "",
- desc: "Meshery natively supports multi-cloud credentials natively with AWS and GCP.",
+ desc: "Meshery natively supports multi-cloud credentials natively with AWS and GCP. This integration allow users to incorporate AWS and GCP icons into their diagrams for comprehensive and intuitive system mapping and documentation.",
imgLink: isDark ? AWSImage : AWSImageLight,
cursor: true,
imageRedirectLink: true,
From c2810abc9c8857b332187bc79ca37d3f0dafe4e9 Mon Sep 17 00:00:00 2001
From: Ritik Saxena
Date: Fri, 22 Dec 2023 01:08:50 +0530
Subject: [PATCH 3/7] aws logo updated
Signed-off-by: Ritik Saxena
---
src/components/Features/style.js | 3 +--
.../Home/FeaturesContainer/images/aws-logo-dark.svg | 12 ++++++++++++
.../Home/FeaturesContainer/images/aws-logo-light.svg | 12 ++++++++++++
.../Home/FeaturesContainer/images/aws-logo.svg | 1 -
src/sections/Home/FeaturesContainer/index.js | 9 +++++----
5 files changed, 30 insertions(+), 7 deletions(-)
create mode 100644 src/sections/Home/FeaturesContainer/images/aws-logo-dark.svg
create mode 100644 src/sections/Home/FeaturesContainer/images/aws-logo-light.svg
delete mode 100644 src/sections/Home/FeaturesContainer/images/aws-logo.svg
diff --git a/src/components/Features/style.js b/src/components/Features/style.js
index 0603532b1158..44d00f9a62ca 100644
--- a/src/components/Features/style.js
+++ b/src/components/Features/style.js
@@ -51,10 +51,9 @@ export const Container = styled.div`
border-radius: 0.25rem;
background-color: ${(props) => props.theme.whiteZeroEightToBlackZeroEight};
cursor: pointer;
- color: ${(props) => props.theme.greyA0AAAAToGrey666666};
+ color: ${(props) => props.theme.text};
border: 2px solid ${(props) => props.theme.whiteZeroEightToBlackZeroEight};
&:hover {
- color: ${(props) => props.theme.text};
border: 2px solid ${(props) => props.theme.keppelColor};
}
}
diff --git a/src/sections/Home/FeaturesContainer/images/aws-logo-dark.svg b/src/sections/Home/FeaturesContainer/images/aws-logo-dark.svg
new file mode 100644
index 000000000000..c77727a3c712
--- /dev/null
+++ b/src/sections/Home/FeaturesContainer/images/aws-logo-dark.svg
@@ -0,0 +1,12 @@
+
diff --git a/src/sections/Home/FeaturesContainer/images/aws-logo-light.svg b/src/sections/Home/FeaturesContainer/images/aws-logo-light.svg
new file mode 100644
index 000000000000..f34813a542f2
--- /dev/null
+++ b/src/sections/Home/FeaturesContainer/images/aws-logo-light.svg
@@ -0,0 +1,12 @@
+
diff --git a/src/sections/Home/FeaturesContainer/images/aws-logo.svg b/src/sections/Home/FeaturesContainer/images/aws-logo.svg
deleted file mode 100644
index ee9edb9c0793..000000000000
--- a/src/sections/Home/FeaturesContainer/images/aws-logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/sections/Home/FeaturesContainer/index.js b/src/sections/Home/FeaturesContainer/index.js
index 66d42c15f4d6..162e0b235e47 100644
--- a/src/sections/Home/FeaturesContainer/index.js
+++ b/src/sections/Home/FeaturesContainer/index.js
@@ -8,7 +8,8 @@ import CommentingImageDark from "./images/commenting.svg";
import CommentingImageLight from "./images/commenting-white.svg";
import AWSImage from "./images/aws.svg";
import AWSImageLight from "./images/aws-light.svg";
-import AWSLogo from "./images/aws-logo.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";
@@ -47,12 +48,12 @@ const FeaturesContainer = () => {
imageRedirectLink: true,
redirectLinkWithImage: [
{
- text: "AWS",
- image: AWSLogo,
+ text: "Amazon Web Services",
+ image: isDark ? AWSLogoDark : AWSLogoLight,
redirect: "/"
},
{
- text: "GCP",
+ text: "Google Cloud Platform",
image: GCPLogo,
redirect: "/"
}
From 68527d0e9f12be0f89134026b0da45db3914b96e Mon Sep 17 00:00:00 2001
From: Ritik Saxena
Date: Fri, 22 Dec 2023 02:31:07 +0530
Subject: [PATCH 4/7] some styling fixes
Signed-off-by: Ritik Saxena
---
src/components/Features/index.js | 2 +-
src/components/Features/style.js | 12 ++++++++----
2 files changed, 9 insertions(+), 5 deletions(-)
diff --git a/src/components/Features/index.js b/src/components/Features/index.js
index c466fbad4851..621d4963338b 100644
--- a/src/components/Features/index.js
+++ b/src/components/Features/index.js
@@ -97,7 +97,7 @@ const Features = (props) => {
: (
{props.redirectLinkWithImage.map((item) => (
-
+
{item.text}
))}
diff --git a/src/components/Features/style.js b/src/components/Features/style.js
index 44d00f9a62ca..98454e35e8df 100644
--- a/src/components/Features/style.js
+++ b/src/components/Features/style.js
@@ -43,18 +43,22 @@ export const Container = styled.div`
gap: 1rem;
}
.small-card {
- padding: 1rem 1.25rem;
+ padding: 0.75rem 1.25rem;
display: flex;
- gap: 1rem;
+ gap: 0.75rem;
align-items: center;
width: fit-content;
border-radius: 0.25rem;
- background-color: ${(props) => props.theme.whiteZeroEightToBlackZeroEight};
cursor: pointer;
color: ${(props) => props.theme.text};
border: 2px solid ${(props) => props.theme.whiteZeroEightToBlackZeroEight};
&:hover {
- border: 2px solid ${(props) => props.theme.keppelColor};
+ background-color: ${(props) => props.theme.whiteZeroEightToBlackZeroEight};
+ }
+
+ @media screen and (max-width: 500px) {
+ flex-direction: column;
+ justify-content: center;
}
}
`;
From 4a3d861a0e6f32639a324a240e2e3769c5d8a577 Mon Sep 17 00:00:00 2001
From: Ritik Saxena
Date: Fri, 22 Dec 2023 03:43:45 +0530
Subject: [PATCH 5/7] links added to aws and gcp pages
Signed-off-by: Ritik Saxena
---
src/sections/Home/FeaturesContainer/index.js | 5 ++---
1 file changed, 2 insertions(+), 3 deletions(-)
diff --git a/src/sections/Home/FeaturesContainer/index.js b/src/sections/Home/FeaturesContainer/index.js
index 162e0b235e47..24cd9eb9f5ea 100644
--- a/src/sections/Home/FeaturesContainer/index.js
+++ b/src/sections/Home/FeaturesContainer/index.js
@@ -45,17 +45,16 @@ const FeaturesContainer = () => {
desc: "Meshery natively supports multi-cloud credentials natively with AWS and GCP. This integration allow users to incorporate AWS and GCP icons into their diagrams for comprehensive and intuitive system mapping and documentation.",
imgLink: isDark ? AWSImage : AWSImageLight,
cursor: true,
- imageRedirectLink: true,
redirectLinkWithImage: [
{
text: "Amazon Web Services",
image: isDark ? AWSLogoDark : AWSLogoLight,
- redirect: "/"
+ redirect: "/cloud-native-management/aws-diagram"
},
{
text: "Google Cloud Platform",
image: GCPLogo,
- redirect: "/"
+ redirect: "/cloud-native-management/gcp-diagram"
}
]
},
From ccf402507975d344575958a9baee4d76c3144122 Mon Sep 17 00:00:00 2001
From: Ritik Saxena
Date: Fri, 22 Dec 2023 12:21:19 +0530
Subject: [PATCH 6/7] changed anchor tag to Link
Signed-off-by: Ritik Saxena
---
src/components/Features/index.js | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/components/Features/index.js b/src/components/Features/index.js
index 621d4963338b..a82b7a5333eb 100644
--- a/src/components/Features/index.js
+++ b/src/components/Features/index.js
@@ -96,10 +96,10 @@ const Features = (props) => {
{props.redirectLink ? Learn more →
: ()}
@@ -125,7 +125,7 @@ const Features = (props) => {
>
-
+
@@ -151,7 +151,7 @@ const Features = (props) => {
>
-
+
From 51d3f665f97c487ceff9414e2a8ea2eb296ab5d1 Mon Sep 17 00:00:00 2001
From: Ritik Saxena
Date: Fri, 22 Dec 2023 12:35:47 +0530
Subject: [PATCH 7/7] text align center in mobile view
Signed-off-by: Ritik Saxena
---
src/components/Features/style.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/components/Features/style.js b/src/components/Features/style.js
index 98454e35e8df..07e0014de8ae 100644
--- a/src/components/Features/style.js
+++ b/src/components/Features/style.js
@@ -59,6 +59,7 @@ export const Container = styled.div`
@media screen and (max-width: 500px) {
flex-direction: column;
justify-content: center;
+ text-align: center;
}
}
`;