Skip to content

feat: popup also in kanvas page #6923

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

feat: popup also in kanvas page #6923

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5959aa1
feat: popup also in kanvas page
Fireentity Sep 28, 2025
d94b0ab
refactor: kanvas page indentation
Fireentity Sep 28, 2025
e4ed481
feat: extended CornerPopup to be implemented in different pages
Fireentity Sep 28, 2025
a8b5704
feat: kanvas animation in corner popup
Fireentity Oct 2, 2025
f6fede2
feat: kanvas popup vertical spacing
Fireentity Oct 4, 2025
d9a772b
fix: add 'Try it now at kanvas.new' text and styling to corner popup
Fireentity Oct 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 10 additions & 9 deletions src/components/Corner-popup/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
import React, { useState, useEffect } from "react";
import Button from "../../reusecore/Button";
import { ReactComponent as CloseIcon } from "./closeIcon.svg";
import popupImageSmall from "./power-of-meshery-small.webp";
import CornerPopupWrapper from "./popup.style";

const CornerPopup = () => {
const CornerPopup = ({ storageKey = "showPopup", link, text, content }) => {
const [showPopup, setShowPopup] = useState(false);

useEffect(() => {
if (!localStorage.getItem("showPopup")) {
if (!localStorage.getItem(storageKey)) {
setTimeout(() => {
setShowPopup(true);
localStorage.setItem(storageKey, true);
}, 8000);
localStorage.setItem("showPopup", true);
} else setShowPopup(false);
},[]);
} else {
setShowPopup(false);
}
}, [storageKey]);

return (
showPopup &&
Expand All @@ -25,10 +26,10 @@ const CornerPopup = () => {
<div className="close-btn" onClick={() => setShowPopup(false)}>
<CloseIcon />
</div>
<a href="https://play.meshery.io/">
<img className="popup-image" src={popupImageSmall} />
<a href={link}>
{content}
</a>
<Button $primary className="explore-playground-button" title="Access Playground" $url="https://play.meshery.io/" $external={true}/>
<Button $primary className="explore-playground-button" title={text} $url={link} $external={true}/>
</div>
</div>
</div>
Expand Down
12 changes: 1 addition & 11 deletions src/components/Corner-popup/popup.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const CornerPopupWrapper = styled.div`
align-items: center;
padding: 1rem;
border: 1px solid #00d3a9;
border-radius: 5%;
border-radius: 12px;
box-shadow: 0 0 30px rgba(0,211,169, 0.6);
@media only screen and (max-width: 640px) {
padding: 0.5rem;
Expand All @@ -47,16 +47,6 @@ const CornerPopupWrapper = styled.div`
right: 0rem;
cursor: pointer;
}
.popup-image{
border: 1px solid ${props => props.theme.whiteToBlack};
border-radius: 3%;
}
/* .popup-image-small{
box-shadow: 0 0 30px rgba(0,211,169, 0.6);
@media only screen and (min-width: 767px) {
display: none;
}
} */

.explore-playground-button {
min-width: 140px;
Expand Down
25 changes: 16 additions & 9 deletions src/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import Partners from "../sections/Home/Partners-home";
import Banner from "../sections/Home/Banner";
import loadable from "@loadable/component";
import CornerPopup from "../components/Corner-popup";

const CloudNativeManagement = loadable(() => import("../sections/Home/CloudNativeManagement"));
const SubscribeSection = loadable(() => import("../sections/subscribe/subscribe"));
// const ServiceMeshFocussed = loadable(() => import("../sections/Home/Service-mesh-focussed"));
Expand All @@ -14,20 +15,25 @@ import CaseStudyBanner from "../components/Case-study-banner";
// const SoSpecial = loadable(() => import("../sections/Home/So-Special-Section"));
const MesheryIntegration = loadable(() => import("../sections/Meshery/Meshery-integrations"));
const FeaturesContainer = loadable(() => import("../sections/Home/FeaturesContainer"));
import popupImageSmall from "../sections/Home/CornerPopup/power-of-meshery-small.png";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use .webp remove .png for consistency


// import { IoMdClose } from "@react-icons/all-files/io/IoMdClose";


const IndexPage = () => {
return (
<>
<Banner />
<FeaturesContainer />
<Partners />
<CornerPopup/>
<Banner/>
<FeaturesContainer/>
<Partners/>
<CornerPopup storageKey="homepageShowPopup" image={popupImageSmall} link="https://play.meshery.io/"
content={
<img alt="popup image" className="popup-image" src={popupImageSmall}/>
}
text="Access Playground"/>
{/* <ServiceMeshManagement /> */}
<CloudNativeManagement />
<MesheryIntegration />
<CloudNativeManagement/>
<MesheryIntegration/>
{/* <Statement /> */}
{/* <AppScreens /> */}
{/* <Pricing /> */}
Expand All @@ -41,7 +47,7 @@ const IndexPage = () => {
<CaseStudyBanner/>
{/* <ServiceMeshFocussed bookName={"enterprise-path"} /> */}
{/* <EngineerEnabler /> */}
<SubscribeSection />
<SubscribeSection/>

</>
);
Expand All @@ -61,8 +67,9 @@ export const Head = () => {
]
};
return (
<SEO title="Layer5" description="An empowerer of engineers, Layer5 helps you extract more value from your infrastructure. Creator and maintainer of cloud native standards. Maker of Meshery, the cloud native manager."
schemaMarkup={schema} />
<SEO title="Layer5"
description="An empowerer of engineers, Layer5 helps you extract more value from your infrastructure. Creator and maintainer of cloud native standards. Maker of Meshery, the cloud native manager."
schemaMarkup={schema}/>
);
};
export default IndexPage;
0 ...s/Corner-popup/power-of-meshery-small.png → ...me/CornerPopup/power-of-meshery-small.png
View file
Open in desktop
File renamed without changes
0 ...s/Corner-popup/power-of-meshery-small.svg → ...me/CornerPopup/power-of-meshery-small.svg
View file
Open in desktop
File renamed without changes
0 ...ponents/Corner-popup/power-of-meshery.svg → ...ons/Home/CornerPopup/power-of-meshery.svg
View file
Open in desktop
File renamed without changes
177 changes: 20 additions & 157 deletions src/sections/Kanvas/Kanvas-collaborate/kanvas-collaborate-banner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,22 @@
import React, { useState } from "react";
import React from "react";
import styled from "styled-components";
import Button from "../../../reusecore/Button";
import { ReactComponent as IngressGatewayImage } from "./images/banner-transitions/ingress-gateway-partial-colorMode.svg";
import { ReactComponent as KubernetesImage } from "./images/banner-transitions/kubernetes-partial-colorMode.svg";
import { ReactComponent as PodImage } from "./images/banner-transitions/pod-partial-colorMode.svg";
import { ReactComponent as PrometheusImage } from "./images/banner-transitions/prometheus-partial-colorMode.svg";
import { ReactComponent as ServiceIntefaceImage } from "./images/banner-transitions/service-interface-partial-colorMode.svg";
import SupportingArrows from "./images/banner-transitions/supporting-arrows.svg";
import EmptyLight from "./images/banner-transitions/empty-light.svg";
import EmptyDark from "./images/banner-transitions/empty-dark.svg";
import { useInView } from "react-intersection-observer";
import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
import KanvasArchitecturalTransition from "../kanvas-architectural-transition";

const CollaborationBannerWrapper = styled.div`

.banner {
display: flex;
flex-direction: column;
background: ${props => props.theme.linearToLinear2};
/* background-color: ${props => props.theme.grey121212ToWhite}; */
max-width: 1920px;
width: 100%;
height: fit-content;
justify-content: space-evenly;
align-items: center;
padding: 4% 5% 6%;
/* transform: rotateX(40deg); */

/* @media only screen and (max-width: 500px) {
max-height: 400px;
} */
position: relative;
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);

svg {
.service-interface-partial-colorMode_svg__colorMode1,
.prometheus-partial-colorMode_svg__colorMode1,
.pod-partial-colorMode_svg__colorMode1,
.kubernetes-partial-colorMode_svg__colorMode1,
.ingress-gateway-partial-colorMode_svg__colorMode1 {
fill: ${props => props.theme.whiteToBlack};
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
}


.banner-text {
display: flex;
flex-direction: column;
Expand All @@ -54,42 +27,19 @@ const CollaborationBannerWrapper = styled.div`
}

h1 {
/* font-size: 4rem; */
position: relative;
display: inline-block;
/* color: ${props => props.theme.primaryColor}; */
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
/*
@media only screen and (min-width: 500px) {
font-size: 3.5rem;
}
@media only screen and (min-width: 767px) {
font-size: 4rem;
}
@media only screen and (min-width: 950px) {
font-size: 5rem;
} */
@media only screen and (min-width: 1400px) {
font-size: 3.75rem;
}
}

.heading {
opacity: 0;
}

.heading-transition {
opacity: 1;
transition: opacity 2.5s;
}

h4 {
padding: 3% 0%;
padding: 3% 0;
color: ${props => props.theme.greyA0AAAAToGrey666666};
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
/* font-size: 20px; */
max-width: 40%;
/* font-weight: bold; */
@media only screen and (max-width: 500px) {
font-size: 1rem;
max-width: 100%;
Expand All @@ -106,119 +56,32 @@ const CollaborationBannerWrapper = styled.div`
p {
padding-top: 2rem;
}

.transition-container {
margin: 10% 0% 0%;
max-width: 70%;
position: relative;
}

.ingress-gateway, .kubernetes, .pod, .prometheus, .supporting-arrows, .service-interface {
/* max-width: 70%; */
position: absolute;
top: 0%;
left: 0%;
scale: 0.7;
opacity: 1;
transition: 1s;
}

.supporting-arrows {
opacity: 0;
scale: 1;
}

.supporting-arrows-transition {
opacity: 1;
transition: 0.5s ease-out 1s ;
}

.ingress-gateway {
translate: -40% 0;
}

.ingress-gateway-transition {
transform: translateX(40%);
scale: 1;
transition: 1s;
}

.kubernetes {
translate: 50% -30%;
}

.kubernetes-transition {
transform: translateX(-50%) translateY(30%);
scale: 1;
transition: 0.75s;
}

.pod {
translate: 40% 30%;
}

.pod-transition {
transform: translateX(-40%) translateY(-30%);
scale: 1;
transition: 1s;
}

.prometheus {
translate: -50% 30%;
}

.prometheus-transition {
transform: translateX(50%) translateY(-30%);
scale: 1;
transition: 1.25s;
}

.service-interface {
scale: 1;
}
}
`;

const KanvasCollaborateBanner = () => {
const [transitionRef, inView] = useInView({ threshold: 0.7 });
const [imageInView, setimageInView] = useState(false);
if (inView && !imageInView)
setimageInView(true);
else if (imageInView && !inView)
setimageInView(false);

const { isDark } = useStyledDarkMode();

return (
<CollaborationBannerWrapper>
<div className="banner">
<div className="banner-text">
<h1>Collaborate with the team. <br /> Build solutions together </h1>
<h4>Designer and Operator live side-by-side, so all design work, from ideation to operation, can be found in one place.</h4>
<Button $primary className="join-community-button" title="Start Collaborating" $url="https://kanvas.new/" $external={true} />
</div>
<div className="transition-container" ref={transitionRef}>
<img className="canvas" src={isDark ? EmptyDark : EmptyLight} alt="" />
<div>
<ServiceIntefaceImage className="service-interface" alt="ServiceIntefaceImage" />
</div>
<div>
<IngressGatewayImage className={imageInView ? "ingress-gateway-transition ingress-gateway" : "ingress-gateway"} alt="IngressGatewayImage" />
</div>
<div>
<KubernetesImage className={imageInView ? "kubernetes-transition kubernetes" : "kubernetes"} alt="KubernetesImage" />
</div>
<div>
<PodImage className={imageInView ? "pod-transition pod" : "pod"} alt="PodImage" />
</div>
<div>
<PrometheusImage alt="PrometheusImage" className={imageInView ? "prometheus-transition prometheus" : "prometheus"} />
</div>
<img className={imageInView ? "supporting-arrows-transition supporting-arrows" : "supporting-arrows"} src={SupportingArrows} alt="" />
<h1>
Collaborate with the team. <br /> Build solutions together
</h1>
<h4>
Designer and Operator live side-by-side, so all design work, from
ideation to operation, can be found in one place.
</h4>
<Button
$primary
className="join-community-button"
title="Start Collaborating"
$url="https://kanvas.new/"
$external={true}
/>
</div>
<KanvasArchitecturalTransition />
</div>
</CollaborationBannerWrapper>
);
};

export default KanvasCollaborateBanner;
export default KanvasCollaborateBanner;
Loading