From 93e700eefe67198909eab191c906d39abc66576e Mon Sep 17 00:00:00 2001 From: codeKraken <160219759+codeKraken19@users.noreply.github.com> Date: Mon, 1 Apr 2024 17:30:46 +0000 Subject: [PATCH 1/4] [UI] clear whitespace Signed-off-by: codeKraken <160219759+codeKraken19@users.noreply.github.com> --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index faf2e7d..9afddd9 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,7 @@ Find out more on the Layer5 community.
 
+ From f85b909093df9d1a8c6b0026af4e1a9af7b1d043 Mon Sep 17 00:00:00 2001 From: codeKraken <160219759+codeKraken19@users.noreply.github.com> Date: Tue, 2 Apr 2024 17:31:51 +0000 Subject: [PATCH 2/4] [UI] remove dead code Signed-off-by: codeKraken <160219759+codeKraken19@users.noreply.github.com> --- site/src/App.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/site/src/App.js b/site/src/App.js index 9587246..331da26 100644 --- a/site/src/App.js +++ b/site/src/App.js @@ -43,8 +43,7 @@ const App = () => { style={{ margin: "auto" }} className="embedVideo" /> - {/*

Launch and learn with Meshery

-

The cloud native playground contains a set of learning paths that incorporate an application networking centric curriculum featuring training on 200+ integrations.

*/} +
From 36b3cdc76a5a04880d584a14cb45c338f15acfc3 Mon Sep 17 00:00:00 2001 From: codeKraken <160219759+codeKraken19@users.noreply.github.com> Date: Wed, 3 Apr 2024 17:35:41 +0000 Subject: [PATCH 3/4] [UI] add shared components Signed-off-by: codeKraken <160219759+codeKraken19@users.noreply.github.com> --- site/src/components/shared/discuss.style.js | 161 ++++++++++++++++++++ 1 file changed, 161 insertions(+) create mode 100644 site/src/components/shared/discuss.style.js diff --git a/site/src/components/shared/discuss.style.js b/site/src/components/shared/discuss.style.js new file mode 100644 index 0000000..d62b084 --- /dev/null +++ b/site/src/components/shared/discuss.style.js @@ -0,0 +1,161 @@ +import styled from "styled-components"; + +const DiscussWrapper = styled.div` + background-color:none; + margin: 1.5rem 0.625rem 1rem; + overflow: hidden; + h2{ + font-weight: 500; + } + h2 span{ + color:#fff; + } + .logo{ + width: 200px; + } + .explain { + padding-top: 0rem; + text-align: center; + p { + text-align: center; + color: #fff; + padding: 0px 3.125rem; + } + h2 { + color: #fff; + } + h1 { + padding: 1.25rem 0px; + } + .cards { + margin: 0.15rem auto 0 ; + max-width: 50rem; + padding: 1.5rem 2rem 0rem 2rem; + background-color: none; + border-radius: 25px; + .card { + -webkit-transition: 450ms all; + transition: 450ms all; + margin: auto; + background-color: #1E2117; + border-radius: 25px; + overflow: hidden; + .parentcard { + padding: 1.25rem; + } + p { + text-align: center; + padding: 0px 0px 1px 0px; + letter-spacing: 0; + font-size: 1.25rem; + } + h2 { + text-align: center; + font-size: 28px; + text-transform:uppercase; + clear: both; + margin-bottom: 0rem; + margin-top: 1rem; + } + &:hover, + &:focus { + outline: none; + } + &:hover{ + transform: translateY(0.03rem); + box-shadow: 0 2px 10px #00d3a9; + } + } + } + } + } + + button{ + color: #1E2117; + padding: 0.2em 1em; + border: 2px solid; + background: none; + transition: color 0.25s,border-color 0.25s,transform 0.25s,box-shadow 0.25s; + cursor: pointer; + } + @media only screen and (min-width: 990px){ + @media only screen and (min-width: 1211px){ + .explain { + .cards { + padding: 0 0.5rem 1rem 0.5rem; + .card { + width: 23.25rem; + } + } + } + } + @media only screen and (max-width: 1210px){ + .explain { + .cards { + padding: 0 0.5rem 1rem 0.5rem; + h2 { + font-size: 25px; + line-height: 35px; + } + p { + font-size: 1.1rem; + } + } + } + } + } + @media only screen and (max-width: 1100px){ + .explain { + .cards { + padding: 0 0.5rem 1rem 0.5rem; + .card { + h2 { + font-size: 22px; + line-height: 32px; + } + p { + font-size: 1rem; + line-height: 23px; + } + } + } + button { + padding: 0; + } + } + } + } + @media only screen and (max-width: 450px){ + .explain { + .cards { + padding: 1rem 1rem 1rem 1rem; + .card { + .parentcard { + padding: 0.5rem; + } + h2 { + font-size: 25px; + } + p{ + font-size: 1.1rem; + } + } + } + } + } + @media only screen and (max-width: 375px){ + .explain { + .cards { + padding: 1rem .5rem 1rem .5rem; + h2 { + font-size: 22px; + } + p{ + font-size: 1rem; + } + } + } + } +`; + +export default DiscussWrapper; From e34582f517d566b31b7a1d0884f6949e545b5bce Mon Sep 17 00:00:00 2001 From: codeKraken <160219759+codeKraken19@users.noreply.github.com> Date: Thu, 4 Apr 2024 17:36:20 +0000 Subject: [PATCH 4/4] [UI] add callout component Signed-off-by: codeKraken <160219759+codeKraken19@users.noreply.github.com> --- site/src/components/shared/index.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 site/src/components/shared/index.js diff --git a/site/src/components/shared/index.js b/site/src/components/shared/index.js new file mode 100644 index 0000000..9a0d0d6 --- /dev/null +++ b/site/src/components/shared/index.js @@ -0,0 +1,28 @@ +import React from "react"; +import DiscussWrapper from "./discuss.style"; + +import Discuss from "../../assets/images/meshery-learn-logo-white.png"; + +const DiscussCallout = () => { + return ( + +
+
+
+ +
+
+

Join the Conversation

+

Ask questions, find answers and share knowledge on our Discussion Forum

+ +
+
+ +
+
+
+ + ); +}; + +export default DiscussCallout;