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.redirectLinkWithImage.map((item) => ( + + + {item.text} + + ))} +
)}
{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 → : (
{props.redirectLinkWithImage.map((item) => ( - + {item.text} - + ))}
)} @@ -125,7 +125,7 @@ const Features = (props) => { > - + image @@ -151,7 +151,7 @@ const Features = (props) => { > - + image 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; } } `;