Skip to content

Commit 9bd7f95

Browse files
author
Vivek Vishal
authored
add journey steps
Signed-off-by: GitHub <noreply@github.com>
1 parent d5d38f1 commit 9bd7f95

2 files changed

Lines changed: 328 additions & 89 deletions

File tree

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

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

0 commit comments

Comments
 (0)