Skip to content
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

[Site] Meshmap page update #2922

Merged
merged 3 commits into from
Jun 20, 2022
Merged

[Site] Meshmap page update #2922

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d22d370
meshmap page updates
Chadha93 Jun 20, 2022
d8aa690
fix meshery-logo-responsiveness
Chadha93 Jun 20, 2022
1f7cdc6
Update src/sections/Meshmap/meshery-action.js
leecalcote Jun 20, 2022
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
13 changes: 10 additions & 3 deletions src/sections/Meshmap/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,15 @@ import { Field, Formik, Form } from "formik";
import axios from "axios";
import Features from "../../components/Features-carousel";
import MeshmapModes from "./meshmap-modes";
import DiscussCallout from "../../sections/Discuss-Callout";
import Catalog from "./meshmap-catalog";
import Platform from "./meshmap-platform";
import layer5_img from "../../assets/images/layer5/layer5-only/svg/layer5-white-no-trim.svg";
import MeshmapBanner from "./meshmap_banner";
import mesheryCloud from "../../assets/images/meshmap/MesheryCloud.png";
import designerImage from "../../assets/images/meshmap/MeshmapDesigner.png";
import visualizerImage from "../../assets/images/meshmap/MeshmapVisualizer.png";
import MeshMapDrafts from "./images/meshmap-draft-logos.png";
import MesheryAction from "./meshery-action";


const Meshmap = () => {
Expand Down Expand Up @@ -98,7 +99,7 @@ const Meshmap = () => {
</div>
<MeshmapModes />
<Catalog />
<Platform />
<MesheryAction />

<div className="banner-background">

Expand All @@ -112,7 +113,12 @@ const Meshmap = () => {
Join the waiting list for participation in the beta program. Your request for access will be processed as quickly as possible. Due to the large influx of program participation requests, it may take some time before system access is granted. So that you can familiarize while you wait, the Layer5 team will send you additional information about beta program, MeshMap modes, and service mesh patterns.
</p>
<img src={mesheryCloud} className="meshery-hero-img" alt="Meshery Cloud" />
<DiscussCallout />
<div className="draft-logo">
<p>Help us choose our logo for MeshMap:</p>
<a href="https://twitter.com/layer5/status/1536832439833743363?s=20&t=oEDasGEBl8cvsA64P7NNTA">
<img src={MeshMapDrafts} alt="MeshMap Draft" /></a><br />
<p><a href="https://twitter.com/layer5/status/1536832439833743363?s=20&t=oEDasGEBl8cvsA64P7NNTA">Vote for your favorite design</a></p>
</div>
</Col>

<Col lg={5} md={6} sm={12}>
Expand Down Expand Up @@ -216,6 +222,7 @@ const Meshmap = () => {
</Row>
</Container>
</div>
<Platform />
</Container >
</div >
);
Expand Down
127 changes: 127 additions & 0 deletions src/sections/Meshmap/meshery-action.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
import React from "react";
import styled from "styled-components";

const MesheryWrapper = styled.div`

.blocks {
display: flex;
padding-bottom: 5rem;
}

.block {
min-height: 100px;
width: 50%;
width: calc(60% + 2rem);
}
}

.block--left {
background-color: BLACK;
h1, p{
text-align: center;
color: white;
}
p{
padding: 1.1rem 2rem 0 4rem;
}
img{
width: 89%;
padding: 1rem 0 1rem 12rem;
}
}

.block--right {
background-color: #00b39f;
height: 20rem;
h1, p{
text-align: center;
color: white;
}
p{
padding: 1.1rem 2rem 0 4rem;
}
img{
width: 89%;
padding: 1rem 0 1rem 12rem;
}
}

p.caption {
margin: 0rem 0rem 2rem 0rem;
font-style: normal ;
}
.firstheading {
text-align: center;
padding-top:0;
margin-top:0;
background-color: black;
}
.heading{
text-align: center;
padding: 1rem 0;
text-transform: uppercase;
}

@media screen and (max-width: 991px) {
.block--left, .block--right {
width: 50%;
margin: 0;
clip-path: none;
h1{
text-align: center;
color: white;
}
p{
color: white;
width: 100%;
padding: 1rem;
}
img{
width: 95%;
padding-left: 0;
display: block;
margin: 0 auto;
}
}
}


.modes-image{
margin: 0 0 2rem;
}

@media only screen and (max-width: 768px) {
.mobile-modes{
display: block;
}
}

`;

const MesheryAction = () => {
return (
<MesheryWrapper>
<h2 className="heading">Watch Meshery In Action</h2>
<p className="caption">
Everything for service mesh in one place.
</p>
<div className="mobile-modes">

</div>

<div className="blocks">
<div className="block block--right">
<h1>Service MeshCon 22</h1>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/yvqn6ckO7BI" loading="lazy" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen ></iframe>
</div>
<div className="block block--left">
<h1>DockerCon 22</h1>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/3DPZafR8VWM" loading="lazy" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen ></iframe>
</div>
</div>
leecalcote marked this conversation as resolved.
Show resolved Hide resolved
</MesheryWrapper >
);
};

export default MesheryAction;

19 changes: 9 additions & 10 deletions src/sections/Meshmap/meshmap_banner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
import React from "react";
import { Link } from "gatsby";
import { Col, Container, Row } from "../../reusecore/Layout";
import PageHeader from "../../reusecore/PageHeader";
import Meshery_Logo from "../../assets/images/meshery/icon-only/meshery-logo-light.svg";
import MeshMapDrafts from "./images/meshmap-draft-logos.png";
import styled from "styled-components";

const BannerSectionWrapper = styled.div`
Expand Down Expand Up @@ -86,7 +82,7 @@ const BannerSectionWrapper = styled.div`

.learn-particle-img {
width: 35rem;
height: 27rem;
height: 25rem;
overflow: hidden;
margin-top: -8rem;
position: absolute;
Expand Down Expand Up @@ -155,16 +151,19 @@ const BannerSectionWrapper = styled.div`
.draft-logo { max-width: 1px; visibility: hidden ;}
}

@media screen and (max-width: 500px) {
.learn-particle-img {
display: none;
}
}

`;

const BannerSection = () => {
return (
<BannerSectionWrapper>
<div className="draft-logo">
<p>Help us choose our logo for MeshMap:</p>
<a href="https://twitter.com/layer5/status/1536832439833743363?s=20&t=oEDasGEBl8cvsA64P7NNTA">
<img src={MeshMapDrafts} alt="MeshMap Draft" /></a><br />
<p><a href="https://twitter.com/layer5/status/1536832439833743363?s=20&t=oEDasGEBl8cvsA64P7NNTA">Vote for your favorite design</a></p>
<div className="learn-particle-img">
<img src={Meshery_Logo} alt="Meshery Logo"/>
</div>
<div>
{/* <PageHeader title="MeshMap" subtitle="take the blinders off" superscript="BETA" /> */}
Expand Down