diff --git a/src/sections/Home/Playground-home/index.js b/src/sections/Home/Playground-home/index.js index f25686df3a52..c4f322b81fc0 100644 --- a/src/sections/Home/Playground-home/index.js +++ b/src/sections/Home/Playground-home/index.js @@ -19,6 +19,9 @@ const ViewsSectionWrapper = styled.div` .small-card-container { display: flex; gap: 1rem; + @media only screen and (max-width: 767px) { + justify-content: center; + } } .views-section { @@ -35,13 +38,14 @@ const ViewsSectionWrapper = styled.div` align-items: center; padding: 0 5% 0 0; box-sizing: border-box; - //box-shadow: ${(props) => props.theme.boxShadowBlue477E96}; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); overflow: hidden; @media only screen and (max-width: 767px) { text-align: center; flex-direction: column-reverse; + height: auto; + padding: 1.5rem; } } .hero-text { @@ -54,11 +58,11 @@ const ViewsSectionWrapper = styled.div` max-width: 100%; justify-content: center; text-align: center; + padding-bottom: 1rem; } } h2 { - /* max-width: 90%; */ padding-bottom: 2%; } } @@ -105,14 +109,15 @@ const ViewsSectionWrapper = styled.div` } - .overlay { - width: 483px; - height: 680px; - } - .container { display: flex; justify-content: center; + width: 100%; + @media only screen and (max-width: 767px) { + flex-direction: column; + margin: 1rem 0; + padding: 0 1rem; + } } .line { @@ -121,62 +126,140 @@ const ViewsSectionWrapper = styled.div` align-items: center; margin-right: 2rem; flex-wrap: wrap; + @media only screen and (max-width: 767px) { + flex-direction: row; + flex-wrap: nowrap; + white-space: nowrap; + align-items: center; + justify-content: center; + } } - .position-line-down{ - transform: translateY(-20em); - } - .position-line-up{ - transform: translateY(20em); + .position-line-down-left { + //For tablet/desktop screens, icons will move down vertically + transform: translateY(-20rem); + + //For mobile screens, icons will move to the left horizontally + @media only screen and (max-width: 767px) { + transform: translateX(-20rem); + } } + .position-line-up-right { + //For tablet/desktop screens, icons will move up vertically + transform: translateY(20rem); - .line-primary, .line-secondary { + //For mobile screens, icons will move to the right horizontally + @media only screen and (max-width: 767px) { + transform: translateX(20rem); + } + } + + .line-primary { width: 100%; display: flex; flex-direction: column; + flex: 1; + margin: 0 5%; + @media only screen and (max-width: 767px) { + flex-direction: row; + } } + // Animation + + // Vertical animation for tablet screen sizes and up. .animation-up-scroll { - animation: scroll-up-animation 15s linear infinite; + animation: scroll-up-animation 15s linear infinite; - @keyframes scroll-up-animation { - 0% { - transform: translateY(0%); - } - 100% { - transform: translateY(-100%); - } + @keyframes scroll-up-animation { + 0% { + transform: translateY(0%); } + 100% { + transform: translateY(-100%); + } + } + + @media only screen and (max-width: 767px) { + //to disable vertical animation on mobile in favor of horizontal animation + animation: none; + } } + .animation-down-scroll { + animation: scroll-down-animation 15s linear infinite; + + @keyframes scroll-down-animation { + 0% { + transform: translateY(0%); + } + 100% { + transform: translateY(100%); + } + } - animation: scroll-down-animation 15s linear infinite; - @keyframes scroll-down-animation { - 0% { - transform: translateY(0); - } - 100% { - transform: translateY(100%); - } + @media only screen and (max-width: 767px) { + //to disable vertical animation on mobile in favor of horizontal animation for smaller screens + animation: none; + } + } + + .animation-left-scroll { + animation: scroll-left-animation 10s linear infinite; + + @keyframes scroll-left-animation { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-20rem); + } + } + + @media only screen and (min-width: 768px) { + //to disable horizontal animation on mobile in favor of vertical animation for larger screens + animation: none; + } + } + + //horizontal animation- to the right + .animation-right-scroll { + animation: scroll-right-animation 10s linear infinite; + + @keyframes scroll-right-animation { + 0% { + transform: translateX(-20rem); + } + 100% { + transform: translateX(0); } + } + + @media only screen and (min-width: 768px) { + //to disable horizontal animation on mobile in favor of vertical animation for larger screens + animation: none; + } } - .box { + + .box { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; - height:150px; + height: 150px; padding: 2rem; box-sizing: border-box; background-color: ${(props) => props.theme.backgroundColor}; margin-bottom: 1rem; border-radius: 1rem; - //box-shadow: ${(props) => props.theme.boxShadowGreen00D3A9ToBlackTwoFive}; - } - // .box:hover { - // box-shadow: ${(props) => props.theme.boxShadowBlue477E96}; - // } + @media only screen and (max-width: 767px) { + flex: 0 0 auto; + margin: 5%; + width: 125px; + height: 125px; + } + } .box .boxImg { width: auto; height: 60px; @@ -188,20 +271,6 @@ const ViewsSectionWrapper = styled.div` text-align: center; } - @media only screen and (max-width: 700px) { - .hero-image { - display: none; - } - .views-section { - padding: 2rem 2rem 0 2rem; - height: auto; - } - .small-card-container { - display: flex; - justify-content: center; - } - } - `; const KanvasVisualizerViews = () => { @@ -215,18 +284,12 @@ const KanvasVisualizerViews = () => {
- {/* */}
-
+
@@ -247,7 +310,7 @@ const KanvasVisualizerViews = () => {
-
+
diff --git a/src/sections/kanvas-cta/index.js b/src/sections/kanvas-cta/index.js new file mode 100644 index 000000000000..176ac64ca3e0 --- /dev/null +++ b/src/sections/kanvas-cta/index.js @@ -0,0 +1,118 @@ +import React from "react"; +import styled from "styled-components"; + +import { Container } from "../../reusecore/Layout"; +import Locator from "./locator.svg"; +import MesherySurface from "./meshery-surface.svg"; +import Button from "../../reusecore/Button"; + +const KanvasCTAWrapper = styled.div` +.CTAbody { + background: + linear-gradient(180deg, rgba(71,126,150,1) 0%, rgba(0,179,159,1) 100%); + border-radius: 2rem; + display: flex; + padding: 2rem; + text-align: center; + margin: 2rem auto; + align-items: center; + + .surface { + width: 60%; + min-width: 160px; + } + .rotate{ + animation: coin-rotate 4s ease-in-out infinite alternate; + /* animation-fill-mode: both; */ + transition: all .3s; + display: block; + margin: 1rem auto; + height: 15rem; + } + @keyframes coin-rotate { + from { + transform: translateY(5%); + } + to { + transform: translateY(-5%); } + } + .button { + margin: 1rem auto; + } + .text{ + display: block; + margin: auto; + } + .subtext { + color: ${props => props.theme.white}; + font-size: 1.5rem; + font-weight: 300; + margin: 1rem 0rem; + } + h2 { + padding: 0; + color: ${props => props.theme.white}; + span { + font-size: 6rem; + } + } + + @media screen and (max-width:767px) { + display: block; + .surface { + width: 30%; + } + .rotate { + margin: 0 auto 0.25rem; + height: 12rem; + } + h2 { + margin: 1rem 0rem; + span{ + font-size: 3rem; + + } + } + .subtext{ + font-size: 1rem; + } + .button-text{ + display: none;; + } + } + @media screen and (max-width:340px) { + h2{ + span{ + font-size: 2rem; + } + } + } +} +`; + +const KanvasCTA = () => { + return ( + + +
+
+ + +
+
+

Kanvas is here!

+

Discover a catalog of best practice cloud native patterns.

+ + +
+
+ + + + ); +}; + +export default KanvasCTA; + diff --git a/src/sections/kanvas-cta/kanvas-icon-white.svg b/src/sections/kanvas-cta/kanvas-icon-white.svg new file mode 100644 index 000000000000..40abcebcab48 --- /dev/null +++ b/src/sections/kanvas-cta/kanvas-icon-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/sections/kanvas-cta/locator.svg b/src/sections/kanvas-cta/locator.svg new file mode 100644 index 000000000000..b45cef0f2caf --- /dev/null +++ b/src/sections/kanvas-cta/locator.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/sections/kanvas-cta/meshery-surface.svg b/src/sections/kanvas-cta/meshery-surface.svg new file mode 100644 index 000000000000..9cfd19adbcad --- /dev/null +++ b/src/sections/kanvas-cta/meshery-surface.svg @@ -0,0 +1 @@ + \ No newline at end of file