Skip to content

Commit e0bbff0

Browse files
author
Vivek Vishal
authored
add Devrel-platform section
Signed-off-by: GitHub <noreply@github.com>
1 parent a6c77b8 commit e0bbff0

12 files changed

Lines changed: 785 additions & 0 deletions

‎src/sections/Community/Devrel-platform/content.js‎

Lines changed: 343 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,343 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
import { Container, Row, Col } from "../../../reusecore/Layout";
4+
// import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
5+
import IntegrationDesigner from "./images/layer5-kanvas-designer.webp";
6+
import CatalogImage from "./images/catalog_mac.png";
7+
import DashboardImg from "./images/cncf_hub_dashboard_mac.png";
8+
import PictureSlider from "./picture-slider";
9+
import Button from "../../../reusecore/Button";
10+
11+
const DevrelContentWrapper = styled.div`
12+
min-height: fit-content;
13+
border-width: 2px 2px 2px 2px;
14+
background-color: ${(props) => props.theme.body};
15+
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
16+
padding-top: 100px;
17+
padding-bottom: 100px;
18+
@media (max-width: 468px) {
19+
margin: 3rem 0;
20+
}
21+
@media (max-width: 767px) {
22+
padding-top: 0;
23+
padding-bottom: 0;
24+
}
25+
.devrel-container .devrel:nth-child(odd) {
26+
.devrel-image {
27+
.image-wrapper {
28+
justify-content: center;
29+
@media (max-width: 767px) {
30+
justify-content: center;
31+
}
32+
}
33+
}
34+
}
35+
36+
.devrel-container .devrel:nth-child(even) {
37+
.devrel-image {
38+
@media (max-width: 767px) {
39+
order: 0;
40+
}
41+
}
42+
.devrel-detail {
43+
@media (max-width: 767px) {
44+
order: 1;
45+
}
46+
}
47+
}
48+
49+
.devrel-detail.recognition-section {
50+
@media (min-width: 477px) and (max-width: 767px) {
51+
margin-top: 3.8rem;
52+
}
53+
}
54+
55+
.devrel {
56+
display: flex;
57+
padding-bottom: 3rem;
58+
align-items: center;
59+
justify-content: space-around;
60+
// @media (min-width: 769px) {
61+
// .devrel-image {
62+
// max-width: 40% !important;
63+
// }
64+
}
65+
@media (max-width: 768px) {
66+
padding: 2rem 0;
67+
}
68+
@media (max-width: 468px) {
69+
flex-direction: column;
70+
}
71+
.devrel-detail {
72+
display: flex;
73+
flex-direction: column;
74+
// justify-content: space-around;
75+
.heading {
76+
font-size: 3.125rem;
77+
line-height: 3.813rem;
78+
color: ${(props) => props.theme.tertiaryColor};
79+
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
80+
margin-bottom: 2rem;
81+
@media (max-width: 992px) {
82+
font-size: 2.8rem;
83+
line-height: 3rem;
84+
}
85+
@media (max-width: 767px) {
86+
font-size: 2rem;
87+
line-height: 2.5rem;
88+
text-align: center;
89+
padding: 0 50px;
90+
margin-bottom: 1rem;
91+
}
92+
@media (max-width: 467px) {
93+
padding-left: 25px;
94+
padding-right: 25px;
95+
}
96+
}
97+
.caption {
98+
font-weight: 400;
99+
margin-top: 0;
100+
padding-left: 15px;
101+
// font-size: 1.563rem;
102+
line-height: 2rem;
103+
color: ${(props) => props.theme.tertiaryColor};
104+
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
105+
opacity: 0.8;
106+
li {
107+
list-style-image: url(https://docs.meshery.io/assets/img/meshery/meshery-logo-light.svg);
108+
}
109+
@media (max-width: 767px) {
110+
font-size: 1rem;
111+
line-height: 1.5rem;
112+
// text-align: center;
113+
padding: 0 50px;
114+
}
115+
@media (max-width: 467px) {
116+
padding-left: 25px;
117+
padding-right: 25px;
118+
}
119+
}
120+
}
121+
.devrel-image {
122+
display: flex;
123+
flex-direction: column;
124+
justify-content: center;
125+
max-width: 50%;
126+
@media (max-width: 767px) {
127+
max-width: 100%;
128+
margin-bottom: 20px;
129+
}
130+
.image-wrapper {
131+
display: flex;
132+
justify-content: center;
133+
align-items: center;
134+
@media (max-width: 767px) {
135+
justify-content: center;
136+
}
137+
}
138+
}
139+
140+
.recognition-content {
141+
width: 100%;
142+
// display: grid;
143+
// grid-template-columns: minmax(18.75rem, 40%) 1fr;
144+
min-height: 28.25rem;
145+
@media (max-width: 767px) {
146+
width: 100%;
147+
min-height: 0;
148+
}
149+
position: relative;
150+
gap: 2rem;
151+
.badges-section {
152+
position: relative;
153+
display: flex;
154+
align-items: center;
155+
justify-content: center;
156+
.badge-stack {
157+
position: relative;
158+
width: 100%;
159+
height: 100%;
160+
// height: 16.25rem;
161+
// max-width: 25rem;
162+
max-width: 15rem;
163+
.badge-item {
164+
position: absolute;
165+
width: 11.25rem;
166+
height: 11.25rem;
167+
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
168+
img {
169+
width: 140%;
170+
height: 140%;
171+
object-fit: contain;
172+
filter: drop-shadow(0 0.25rem 0.5rem rgba(0, 0, 0, 0.2));
173+
}
174+
&:nth-child(1) {
175+
top: 0;
176+
left: calc(50% - 3.75rem);
177+
}
178+
&:nth-child(2) {
179+
top: 10.75rem;
180+
left: calc(50% - 9.5rem);
181+
}
182+
&:nth-child(3) {
183+
top: 10.75rem;
184+
left: calc(50% + 2rem);
185+
}
186+
}
187+
}
188+
}
189+
}
190+
@media (max-width: 62rem) {
191+
.recognition-content {
192+
// grid-template-columns: 1fr;
193+
.badges-section {
194+
// min-height: 18.75rem;
195+
padding: 1.25rem;
196+
.badge-stack {
197+
height: 16.25rem;
198+
.badge-item {
199+
width: 9.375rem;
200+
height: 9.375rem;
201+
img {
202+
width: 120%;
203+
height: 120%;
204+
}
205+
&:nth-child(1) {
206+
top: 0;
207+
left: calc(50% - 3.75rem);
208+
}
209+
&:nth-child(2) {
210+
top: 8.75rem;
211+
left: calc(50% - 7.5rem);
212+
}
213+
&:nth-child(3) {
214+
top: 8.75rem;
215+
left: calc(50% + 0rem);
216+
}
217+
}
218+
}
219+
}
220+
}
221+
}
222+
@media (max-width: 30rem) {
223+
.recognition-content {
224+
.badges-section .badge-stack .badge-item {
225+
width: 7.5rem;
226+
height: 7.5rem;
227+
&:nth-child(1) {
228+
left: calc(50% - 3.125rem);
229+
}
230+
&:nth-child(2) {
231+
top: 6.875rem;
232+
left: calc(50% - 6.25rem);
233+
}
234+
&:nth-child(3) {
235+
top: 6.875rem;
236+
left: calc(50% + 0rem);
237+
}
238+
}
239+
}
240+
}
241+
}
242+
`;
243+
244+
const DevrelContent = () => {
245+
246+
247+
return (
248+
<DevrelContentWrapper>
249+
<Container className="devrel-container">
250+
<Row className="devrel">
251+
<Col $md={6} className="devrel-image">
252+
<div className="image-wrapper">
253+
<img src={IntegrationDesigner} />
254+
</div>
255+
</Col>
256+
<Col $md={6} className="devrel-detail">
257+
<h2 className="heading">Visual, Collaborative Teaching Environment</h2>
258+
<ul className="caption">
259+
<li><b>Live Kubernetes Clusters:</b> Give your audience hands-on experience with a collaborative live Kubernetes environment through Meshery Playground</li>
260+
<li><b>Demonstrate Complex Concepts:</b> Explain cloud native architectures visually and interactively</li>
261+
<li><b>Multi-Player Teaching:</b> Conduct live demonstrations and workshops where participants can follow along in real-time</li>
262+
</ul>
263+
</Col>
264+
</Row>
265+
<Row className="devrel">
266+
<Col $md={6} className="devrel-detail">
267+
<h2 className="heading">
268+
Content Creation and Publishing
269+
</h2>
270+
<ul className="caption">
271+
<li><b>Design Cloud Native Patterns:</b> Create and publish custom cloud native design patterns featuring any CNCF project</li>
272+
<li><b>Curate Reference Architectures:</b> Showcase your expertise by publishing best practices and verified configurations</li>
273+
<li><b>Develop Learning Paths:</b>Create structured educational journeys that combine theory with hands-on practice</li>
274+
<li><b>Design Challenges:</b>Create hands-on labs using Meshery Playground that engage your audience through gamification</li>
275+
</ul>
276+
</Col>
277+
<Col $md={6} className="devrel-image">
278+
<PictureSlider />
279+
</Col>
280+
</Row>
281+
<Row className="devrel">
282+
<Col $md={6} className="devrel-image">
283+
<div className="image-wrapper">
284+
<img src={DashboardImg} />
285+
</div>
286+
</Col>
287+
<Col $md={6} className="devrel-detail">
288+
<h2 className="heading">Build Your Professional Brand</h2>
289+
<ul className="caption">
290+
<li><b>Public User Profile:</b>Showcase your cloud native design patterns, contributions, and expertise</li>
291+
<li><b>Content Attribution:</b> All your published designs, learning paths, and challenges are linked to your profile</li>
292+
<li><b>Content Metrics:</b> Track popularity and usage of your published content</li>
293+
</ul>
294+
</Col>
295+
</Row>
296+
<Row className="devrel">
297+
<Col $md={6} className="devrel-detail recognition-section">
298+
<h2 className="heading">
299+
Recognition Program
300+
</h2>
301+
<ul className="caption">
302+
<li><b>Achievement Badges:</b>Earn badges for milestones achieved within the platform</li>
303+
<li><b>Leaderboard Visibility:</b> Stand out in the community by ranking on challenge leaderboards</li>
304+
<li><b>Content Popularity:</b>Gain recognition when your designs become most used and referenced</li>
305+
</ul>
306+
{/* <Button
307+
$primary
308+
title="Explore Badges Now"
309+
$url="https://badges.layer5.io"
310+
/> */}
311+
</Col>
312+
313+
<div className="recognition-content">
314+
<div className="badges-section">
315+
<div className="badge-stack">
316+
<div className="badge-item">
317+
<img
318+
src="https://badges.layer5.io/assets/badges/docker-captain/docker-captain.png"
319+
alt="Docker Captain Badge"
320+
/>
321+
</div>
322+
<div className="badge-item">
323+
<img
324+
src="https://badges.layer5.io/assets/badges/cncf-ambassador/cncf-ambassador.png"
325+
alt="CNCF Ambassador Badge"
326+
/>
327+
</div>
328+
<div className="badge-item">
329+
<img
330+
src="https://badges.layer5.io/assets/badges/meshery/meshery.png"
331+
alt="Meshery Badge"
332+
/>
333+
</div>
334+
</div>
335+
</div>
336+
</div>
337+
</Row>
338+
</Container>
339+
</DevrelContentWrapper>
340+
);
341+
};
342+
343+
export default DevrelContent;

‎src/sections/Community/Devrel-platform/devrel-solutions.style.js‎

Whitespace-only changes.

0 commit comments

Comments
 (0)