Skip to content

Commit ec2e3bc

Browse files
author
Vivek Vishal
authored
Merge pull request #6268 from vishalvivekm/devrel
feat: DevRel solutions
2 parents e6fc32d + 26b678a commit ec2e3bc

15 files changed

Lines changed: 1044 additions & 0 deletions

File tree

‎src/pages/solutions/devrel-platform-for-kubernetes-and-cloudnative-content/index.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from "react";
2+
3+
import SEO from "../../../components/seo";
4+
import DevrelSolutionsPage from "../../../sections/Devrel-platform";
5+
6+
const DevrelSolutions = () => {
7+
return (
8+
<>
9+
<DevrelSolutionsPage />
10+
</>
11+
);
12+
};
13+
export default DevrelSolutions;
14+
export const Head = () => {
15+
return <SEO title="Devrel Platform for Cloud Native Content"
16+
description="Amplify Your Voice in the Cloud Native Community. Build, share, innovate with CNCF project-curated best practices."
17+
image="/images/meshery-logo-dark-text.webp" />;
18+
};

‎src/sections/Devrel-platform/JourneySection.js‎

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
import { Container, Row, Col } from "../../reusecore/Layout";
4+
import { FaPencilRuler } from "@react-icons/all-files/fa/FaPencilRuler";
5+
import { FaChartLine } from "@react-icons/all-files/fa/FaChartLine";
6+
import { FaTrophy } from "@react-icons/all-files/fa/FaTrophy";
7+
import Button from "../../reusecore/Button";
8+
9+
const JourneySectionWrapper = styled.div`
10+
.action-buttons{
11+
margin-top: 2rem;
12+
display: flex;
13+
justify-content: center;
14+
flex-wrap: wrap;
15+
gap: 2rem;
16+
@media (max-width: 418px) {
17+
flex-direction: column;
18+
align-items: center;
19+
gap: 1.5rem;
20+
}
21+
}
22+
padding: 10px 0 80px 0;
23+
background-color: ${(props) => props.theme.body};
24+
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
25+
26+
.journey-header {
27+
text-align: center;
28+
margin-bottom: 50px;
29+
30+
h2 {
31+
font-size: 3.125rem;
32+
line-height: 3.813rem;
33+
color: ${(props) => props.theme.tertiaryColor};
34+
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
35+
margin-bottom: 1.5rem;
36+
37+
@media (max-width: 992px) {
38+
font-size: 2.8rem;
39+
line-height: 3rem;
40+
}
41+
42+
@media (max-width: 767px) {
43+
font-size: 2rem;
44+
line-height: 2.5rem;
45+
padding: 0 25px;
46+
}
47+
}
48+
49+
p {
50+
font-size: 1.28rem;
51+
line-height: 2rem;
52+
max-width: 800px;
53+
margin: 0 auto;
54+
color: ${(props) => props.theme.tertiaryColor};
55+
opacity: 0.8;
56+
57+
@media (max-width: 767px) {
58+
font-size: 1rem;
59+
line-height: 1.5rem;
60+
padding: 0 25px;
61+
}
62+
}
63+
}
64+
65+
.timeline-container {
66+
position: relative;
67+
padding: 20px 0;
68+
&:before {
69+
content: '';
70+
position: absolute;
71+
top: 50%;
72+
left: 0;
73+
right: 0;
74+
height: 4px;
75+
background: linear-gradient(90deg, ${(props) => props.theme.secondaryColor} 0%, ${(props) => props.theme.primaryColor} 100%);
76+
transform: translateY(60%);
77+
z-index: 1;
78+
79+
@media (max-width: 767px) {
80+
display: none;
81+
}
82+
}
83+
.stepp{
84+
z-index: 2;
85+
padding: 0;
86+
margin: 0 10px;
87+
border-radius: 4%;
88+
background: ${props => props.theme.grey212121ToWhite};
89+
box-shadow: 0px 0px ${props => props.theme.projectShadowsize} ${props => props.theme.whiteToGreyE6E6E6};
90+
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
91+
&:hover{
92+
box-shadow: 0px 0px 5px ${props => props.theme.green00D3A9ToGreen3C494F};
93+
}
94+
@media (max-width: 767px) {
95+
width: 80%;
96+
}
97+
}
98+
.timeline-row {
99+
position: relative;
100+
left: 0;
101+
right: 0;
102+
@media (max-width: 767px) {
103+
justify-content: center;
104+
gap: 2rem;
105+
}
106+
}
107+
}
108+
109+
.step-card {
110+
background-color: ${(props) => props.theme.secondaryButtonColor};
111+
border-radius: 10px;
112+
display: flex;
113+
flex-direction: column;
114+
align-items: center;
115+
padding: 30px;
116+
height: 100%;
117+
position: relative;
118+
z-index: 2;
119+
transition: transform 0.3s ease, box-shadow 0.3s ease;
120+
121+
.step-number {
122+
background-color: ${(props) => props.theme.tertiaryColor};
123+
align-self: flex-start;
124+
color:${(props) => props.theme.body};
125+
width: 40px;
126+
height: 40px;
127+
border-radius: 50%;
128+
display: flex;
129+
align-items: center;
130+
justify-content: center;
131+
font-weight: bold;
132+
font-size: 1.2rem;
133+
margin-bottom: 20px;
134+
}
135+
136+
.step-icon {
137+
font-size: 2.5rem;
138+
margin-bottom: 20px;
139+
color: ${(props) => props.theme.primaryColor};
140+
}
141+
142+
h3 {
143+
font-size: 1.5rem;
144+
margin-bottom: 15px;
145+
text-align: center;
146+
color: ${(props) => props.theme.tertiaryColor};
147+
}
148+
149+
p {
150+
font-size: 1rem;
151+
line-height: 1.6;
152+
color: ${(props) => props.theme.tertiaryColor};
153+
opacity: 0.9;
154+
text-align: center;
155+
}
156+
157+
@media (max-width: 767px) {
158+
margin-bottom: 30px;
159+
}
160+
}
161+
`;
162+
163+
const JourneySection = () => {
164+
const steps = [
165+
{
166+
number: "1",
167+
icon: <FaPencilRuler />,
168+
title: "Design and Publish",
169+
description: "Create your profile on Layer5 Cloud, share and discover best practices, reusable templates, and operational patterns for kubernetes."
170+
},
171+
{
172+
number: "2",
173+
icon: <FaChartLine />,
174+
title: "Engage and Measure",
175+
description: "Monitor your content's performance, gather feedback, and refine your approach based on real-time user interaction metrics."
176+
},
177+
{
178+
number: "3",
179+
icon: <FaTrophy />,
180+
title: "Grow and Get Recognized",
181+
description: "Build your reputation through badges and leaderboard positions while expanding your network in the cloud native community."
182+
}
183+
];
184+
185+
return (
186+
<JourneySectionWrapper>
187+
<Container>
188+
<div className="journey-header">
189+
<h2>Expand Your Network and Visibility in the Cloud Native Community</h2>
190+
<p>Connect with ambassadors, maintainers, and experts while collaborating on CNCF projects.</p>
191+
</div>
192+
<div className="timeline-container">
193+
<Row className="timeline-row">
194+
{steps.map((step, index) => (
195+
<Col $md={4} key={index} className="stepp">
196+
<div className="step-card">
197+
<div className="step-number">{step.number}</div>
198+
<div className="step-icon">{step.icon}</div>
199+
<h3>{step.title}</h3>
200+
<p>{step.description}</p>
201+
</div>
202+
</Col>
203+
))}
204+
</Row>
205+
</div>
206+
<div className="action-buttons">
207+
<Button
208+
$primary
209+
$external={true}
210+
title="Explore Layer5 Cloud"
211+
alt="Explore cloud"
212+
$url="https://cloud.layer5.io/"
213+
/>
214+
<Button
215+
$primary
216+
$external={true}
217+
title="Explore Kanvas"
218+
alt="Explore Meshery Playground"
219+
$url="https://kanvas.new/"
220+
/>
221+
<Button
222+
aria-label="Book a demo"
223+
$primary
224+
$external={true}
225+
title="Talk to team"
226+
alt="Book a demo"
227+
$url="https://calendar.google.com/calendar/appointments/schedules/AcZssZ3pmcApaDP4xd8hvG5fy8ylxuFxD3akIRc5vpWJ60q-HemQi80SFFAVftbiIsq9pgiA2o8yvU56?gv=true"
228+
/>
229+
</div>
230+
</Container>
231+
</JourneySectionWrapper>
232+
);
233+
};
234+
235+
export default JourneySection;

0 commit comments

Comments
 (0)