diff --git a/src/pages/cloud-native-management/playground.js b/src/pages/cloud-native-management/playground.js new file mode 100644 index 000000000000..06da343ba10e --- /dev/null +++ b/src/pages/cloud-native-management/playground.js @@ -0,0 +1,15 @@ +import React from "react"; +import SEO from "../../components/seo"; +import Playground from "../../sections/Playground"; + +const PlaygroundPage = () => { + return ( + <> + + + ); +}; +export default PlaygroundPage; +export const Head = () => { + return ; +}; \ No newline at end of file diff --git a/src/sections/General/Navigation/utility/menu-items.js b/src/sections/General/Navigation/utility/menu-items.js index 073f785d4ec6..fc2fcb9e5690 100644 --- a/src/sections/General/Navigation/utility/menu-items.js +++ b/src/sections/General/Navigation/utility/menu-items.js @@ -103,7 +103,7 @@ const Data = { }, { name: "Playground", - path: "https://play.meshery.io", + path: "/cloud-native-management/playground", }, { name: "Nighthawk", diff --git a/src/sections/Meshmap/Meshmap-collaborate/collaboration-feature-team.js b/src/sections/Meshmap/Meshmap-collaborate/collaboration-feature-team.js index 871b56ddde5c..a9f53119c5e0 100644 --- a/src/sections/Meshmap/Meshmap-collaborate/collaboration-feature-team.js +++ b/src/sections/Meshmap/Meshmap-collaborate/collaboration-feature-team.js @@ -67,15 +67,15 @@ const CollaborationFeatureWrapper = styled.div` transition: opacity ease-out 0.5s; .collab4-colorMode_svg__colorMode1 { - fill: ${props => props.theme.whiteToBlack} + fill: ${props => props.theme.whiteToBlack}; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } .collab4-colorMode_svg__colorMode2{ - fill: ${props => props.theme.greyB4B4B4ToGrey505050} + fill: ${props => props.theme.greyB4B4B4ToGrey505050}; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } .collab4-colorMode_svg__colorMode3{ - fill: ${props => props.theme.blackToWhite} + fill: ${props => props.theme.blackToWhite}; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } @media only screen and (max-width: 767px) { @@ -112,7 +112,7 @@ const CollaborationFeatureTeam = () => {

Collaborate with your Team

-

Build an iterative design flow with live collaboration that keeps you in the loop whether you’re working in the office or remotely.

+

Build an iterative design flow with live collaboration that keeps you in the loop whether you are working in the office or remotely.

diff --git a/src/sections/Meshmap/Meshmap-collaborate/images/banner-transitions/kubernetes-partial-colorMode.svg b/src/sections/Meshmap/Meshmap-collaborate/images/banner-transitions/kubernetes-partial-colorMode.svg index 7194c938d7a2..94c69b1f2128 100644 --- a/src/sections/Meshmap/Meshmap-collaborate/images/banner-transitions/kubernetes-partial-colorMode.svg +++ b/src/sections/Meshmap/Meshmap-collaborate/images/banner-transitions/kubernetes-partial-colorMode.svg @@ -8,6 +8,10 @@ .colorMode2 { fill: #000 } + + .colorMode3 { + fill: #fff + } + class="colorMode1" /> + class="colorMode3" /> diff --git a/src/sections/Meshmap/Meshmap-collaborate/meshmap-collaborate-banner.js b/src/sections/Meshmap/Meshmap-collaborate/meshmap-collaborate-banner.js index 3c7677462539..19e47a035607 100644 --- a/src/sections/Meshmap/Meshmap-collaborate/meshmap-collaborate-banner.js +++ b/src/sections/Meshmap/Meshmap-collaborate/meshmap-collaborate-banner.js @@ -176,7 +176,7 @@ const CollaborationBannerWrapper = styled.div` .service-interface { scale: 1; } - +} `; const MeshmapCollaborateBanner = () => { diff --git a/src/sections/Playground/images/playground-feature-1.svg b/src/sections/Playground/images/playground-feature-1.svg new file mode 100644 index 000000000000..cc63602c1ca6 --- /dev/null +++ b/src/sections/Playground/images/playground-feature-1.svg @@ -0,0 +1,339 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/sections/Playground/images/playground-feature-2.svg b/src/sections/Playground/images/playground-feature-2.svg new file mode 100644 index 000000000000..389660b93f36 --- /dev/null +++ b/src/sections/Playground/images/playground-feature-2.svg @@ -0,0 +1,1049 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/sections/Playground/images/playground-feature-3.svg b/src/sections/Playground/images/playground-feature-3.svg new file mode 100644 index 000000000000..4c26a0a5ed58 --- /dev/null +++ b/src/sections/Playground/images/playground-feature-3.svg @@ -0,0 +1,303 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/sections/Playground/images/playground-hero.svg b/src/sections/Playground/images/playground-hero.svg new file mode 100644 index 000000000000..307f8200bd87 --- /dev/null +++ b/src/sections/Playground/images/playground-hero.svg @@ -0,0 +1,107 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/sections/Playground/index.js b/src/sections/Playground/index.js new file mode 100644 index 000000000000..9ec66be1c23c --- /dev/null +++ b/src/sections/Playground/index.js @@ -0,0 +1,17 @@ +import React from "react"; +import styled from "styled-components"; +import Reviews from "../Pricing/review-slider"; +import PlaygroundHero from "./playground-hero"; +import PlaygroundFeatures from "./playground-features"; + +const Playground = () => { + return ( + <> + + + + + ); +}; + +export default Playground; diff --git a/src/sections/Playground/playground-features.js b/src/sections/Playground/playground-features.js new file mode 100644 index 000000000000..788a3d25b06d --- /dev/null +++ b/src/sections/Playground/playground-features.js @@ -0,0 +1,105 @@ +import React from "react"; +import styled from "styled-components"; +import { ReactComponent as PlaygroundFeature1 } from "./images/playground-feature-1.svg"; +import { ReactComponent as PlaygroundFeature2 } from "./images/playground-feature-2.svg"; +import { ReactComponent as PlaygroundFeature3 } from "./images/playground-feature-3.svg"; +import { useInView } from "react-intersection-observer"; +import { useState } from "react"; + +const PlaygroundFeaturesWrapper = styled.div` + display: flex; + flex-direction: column; + text-align: center; + justify-content: center; + align-items: center; + margin: 5% 0%; + + h1 { + margin-bottom: 8px; + } + + .feature { + position: relative; + display: flex; + flex-direction: row; + width: 70%; + justify-content: flex-end; + align-items: center; + margin: 1% 0%; + @media only screen and (max-width: 767px) { + text-align: center; + flex-direction: column-reverse; + margin: 5%; + } + + .feature-text { + display: flex; + flex-direction: column; + flex: 0 0 50%; + max-width: 50%; + text-align: left; + padding: 0% 5%; + @media only screen and (max-width: 767px) { + max-width: 100%; + text-align: center; + } + + h2 { + margin-bottom: 2%; + } + } + + .feature-image { + flex: 0 0 50%; + max-width: 50%; + + @media only screen and (max-width: 767px) { + max-width: 80%; + } + } + } + + .reverse { + @media only screen and (min-width: 767px) { + flex-direction: row-reverse; + } + } +`; + +const PlaygroundFeatures = () => { + return ( + +

In the Playground, you can...

+
+
+
+

Collaborate more effectively

+
Collaborate with other engineers, share your knowledge, and exchange ideas.
+
+
+ +
+
+
+
+

Discover new cloud native tools

+
Explore new cloud native tools without the need for complex setup or configuration. Simply open your browser and go.
+
+
+ +
+
+
+
+

Develop inside sandbox environments

+
Design new cloud native scenarios and easily deploy in the Playground environment. Keep your designs and deploy in your own environment when you’re ready.
+
+
+ +
+
+ + ); +}; + +export default PlaygroundFeatures; \ No newline at end of file diff --git a/src/sections/Playground/playground-hero.js b/src/sections/Playground/playground-hero.js new file mode 100644 index 000000000000..e8fea5a8ede4 --- /dev/null +++ b/src/sections/Playground/playground-hero.js @@ -0,0 +1,75 @@ +import React from "react"; +import styled from "styled-components"; +import { ReactComponent as PlaygroundHeroImage } from "./images/playground-hero.svg"; +import Button from "../../reusecore/Button"; +import { useInView } from "react-intersection-observer"; +import { useState } from "react"; + +const PlaygroundHeroWrapper = styled.div` + display: flex; + flex-direction: column; + text-align: center; + justify-content: center; + align-items: center; + background: ${props => props.theme.linearDarkToLinearLight}; + margin: 2% 0% 5%; + + .hero { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin-bottom: 4%; + max-width: 80%; + + .hero-text { + text-align: left; + + @media only screen and (max-width: 767px) { + text-align: center; + } + + h1 { + margin-bottom: 3%; + @media only screen and (max-width: 767px) { + margin: 8% 0%; + } + } + + h4 { + margin-bottom: 6%; + @media only screen and (max-width: 767px) { + margin: 8% 0%; + } + } + } + + .hero-image { + flex: 0 0 50%; + max-width: 50%; + + @media only screen and (max-width: 767px) { + display: none; + } + } + } +`; + +const PlaygroundHero = () => { + return ( + +
+
+

Manage your Cloud Native mess

+

Employ a set of learning paths that incorporate an application networking centric curriculum featuring training on 200+ integrations.

+
+
+ +
+
+ + ); +}; + +export default PlaygroundHero; \ No newline at end of file diff --git a/src/theme/app/themeStyles.js b/src/theme/app/themeStyles.js index e51ae47b1429..0b3ca8263ac0 100644 --- a/src/theme/app/themeStyles.js +++ b/src/theme/app/themeStyles.js @@ -175,6 +175,7 @@ const lighttheme = { linearToLinear2: "linear-gradient(61.3deg, rgba(0, 179, 159, 0.2) -26.19%, rgba(255, 255, 255, 0.2) 40.19%), linear-gradient(303.45deg, rgba(0, 179, 159, 0.2) 0%, rgba(255, 255, 255, 0.2) 37.23%), linear-gradient(360deg, #00B39F -108%, #FFFFFF 63.36%)", linearToGreen: "linear-gradient(90.2deg,rgba(255, 255, 255, 0.38) 33.89%,rgba(0, 179, 159, 0.74) 99.81%)", linearToWhite: "#FFFFFF", + linearDarkToLinearLight: "linear-gradient(61.3deg, rgba(0, 179, 159, 0.2) -26.19%, rgba(255, 255, 255, 0.2) 40.19%), linear-gradient(303.45deg, rgba(0, 179, 159, 0.2) 0%, rgba(255, 255, 255, 0.2) 37.23%), linear-gradient(360deg, #00B39F -108%, #FFFFFF 63.36%)", whiteEightToBlack: "#000000", whiteEightToBlackEight: "rgb(0 0 0 / 0.8)", whiteFiveToBlackFive: "rgb(0 0 0 / 0.5)", @@ -393,6 +394,7 @@ export const darktheme = { linearToLinear2: "linear-gradient(61.3deg, rgba(0, 179, 159, 0.2) -26.19%, rgba(18, 18, 18, 0.2) 40.19%), linear-gradient(303.45deg, rgba(0, 179, 159, 0.2) 0%, rgba(18, 18, 18, 0.2) 37.23%), linear-gradient(360deg, #00B39F -11.84%, #121212 63.36%)", linearToGreen: "linear-gradient(90.2deg, rgba(0, 0, 0, 0.2) 0.16%, rgba(0, 179, 159, 0.74) 99.81%)", linearToWhite: "linear-gradient(to right, #666666, #444444)", + linearDarkToLinearLight: "linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 179, 159, 0.58) 46.87%, rgba(0, 179, 159, 0.034) 100%), linear-gradient(179.39deg, rgba(0, 179, 159, 0) 0.58%, #000000 99.54%)", whiteEightToBlack: "rgb(255 255 255 / 0.8)", whiteEightToBlackEight: "rgb(255 255 255 / 0.8)", whiteFiveToBlackFive: "rgb(255 255 255 / 0.5)",