Skip to content

Commit 3116494

Browse files
Namanv0509Namanv0509
committed
Adding Community handbook to Newcomers Guide
Signed-off-by: Namanv0509 <[email protected]>
1 parent 813eec4 commit 3116494

File tree

3 files changed

+142
-30
lines changed

3 files changed

+142
-30
lines changed

‎src/sections/Community/Community-pictures/community-handbook.webp

253 KB
Binary file not shown.

‎src/sections/Community/Newcomers-guide/NewcomersPageWrapper.style.js

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,97 @@ export const NewcomersGuideWrapper = styled.section`
131131
text-align: center;
132132
margin-bottom: 4rem;
133133
}
134+
.book-container {
135+
display: flex;
136+
align-items: center;
137+
justify-content: center;
138+
perspective: 600px;
139+
}
140+
141+
@keyframes initAnimation {
142+
0% {
143+
transform: rotateY(0deg);
144+
}
145+
100% {
146+
transform: rotateY(-30deg);
147+
}
148+
}
149+
150+
.rot-on-rel {
151+
transform: rotateY(0deg);
152+
}
153+
154+
.book {
155+
min-width: 200px;
156+
min-height: 300px;
157+
position: relative;
158+
transform-style: preserve-3d;
159+
transform: rotateY(-30deg);
160+
transition: 1s ease;
161+
animation: 1s ease 0s 1 initAnimation;
162+
}
163+
164+
.book:hover {
165+
transform: rotateY(0deg);
166+
}
167+
168+
.book > :first-child {
169+
position: absolute;
170+
top: 0;
171+
left: 0;
172+
background-color: #171a12;
173+
width: 200px;
174+
height: 300px;
175+
transform: translateZ(25px);
176+
border-radius: 0 2px 2px 0;
177+
}
178+
179+
.book::before {
180+
position: absolute;
181+
content: " ";
182+
left: 0;
183+
top: 3px;
184+
width: 48px;
185+
height: 294px;
186+
transform: translateX(172px) rotateY(90deg);
187+
background: linear-gradient(
188+
90deg,
189+
#fff 0%,
190+
#f9f9f9 5%,
191+
#fff 10%,
192+
#f9f9f9 15%,
193+
#fff 20%,
194+
#f9f9f9 25%,
195+
#fff 30%,
196+
#f9f9f9 35%,
197+
#fff 40%,
198+
#f9f9f9 45%,
199+
#fff 50%,
200+
#f9f9f9 55%,
201+
#fff 60%,
202+
#f9f9f9 65%,
203+
#fff 70%,
204+
#f9f9f9 75%,
205+
#fff 80%,
206+
#f9f9f9 85%,
207+
#fff 90%,
208+
#f9f9f9 95%,
209+
#fff 100%
210+
);
211+
}
212+
213+
.book::after {
214+
position: absolute;
215+
top: 0;
216+
left: 0;
217+
content: " ";
218+
width: 200px;
219+
height: 300px;
220+
transform: translateZ(-25px);
221+
background-color: #292929;
222+
border-radius: 0 2px 2px 0;
223+
box-shadow: -2px 1px 30px 2px #666;
224+
}
134225
@media only screen and (max-width: 991px) {
135226
.heading-start {
136227
margin-left: auto; margin-right: auto;

‎src/sections/Community/Newcomers-guide/index.js

Lines changed: 51 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { StaticImage } from "gatsby-plugin-image";
1414
const CommunityImage2 = "../Community-pictures/five-finding-issue.png";
1515
const CommunityImage3 = "../../../assets/images/newcomers-page-images/community-collage.webp";
1616
const FiveWorking = "../Community-pictures/five-working.png";
17+
const CommunityHandbook = "../Community-pictures/community-handbook.webp";
1718

1819
const NewcomersGuide = () => {
1920
const [hover, setHover] = useState(false);
@@ -194,36 +195,56 @@ const NewcomersGuide = () => {
194195
<StaticImage src={FiveWorking} alt="Five Working Image" />
195196
</Col>
196197
</Row>
197-
<Row style={{
198-
flexWrap: "wrap"
199-
}} className="step">
200-
<Col $sm={12} $lg={6} className="community-collage">
201-
<StaticImage src={CommunityImage3} alt="Community Image" />
202-
</Col>
203-
<Col $sm={12} $lg={6}>
204-
<h3>While Your Issue is Under Review</h3>
205-
<p>
206-
Be patient. There are a large number of contributors and only a
207-
small number of maintainers/reviewers. All contributors are
208-
equally important to us, and we'll be sure to get to you as soon
209-
as possible. In the meanwhile, you are welcome to engage in the Layer5{" "}
210-
<a
211-
href="https://discuss.layer5.io/"
212-
target="_blank"
213-
rel="noreferrer"
214-
> discussion forum
215-
</a>, join our{" "}
216-
<a
217-
href="https://slack.layer5.io/"
218-
target="_blank"
219-
rel="noreferrer"
220-
>
221-
Slack workspace
222-
</a>{" "}
223-
and take a look at all our <Link to="/projects">projects</Link>.
224-
</p>
225-
</Col>
226-
</Row>
198+
<Row style={{ flexWrap: "wrap" }} className="step">
199+
<Col $sm={12} $lg={6} className="community-collage">
200+
<a className="book-container" href="https://layer5.io/community/handbook/">
201+
<div className="book">
202+
<div>
203+
<StaticImage src={CommunityHandbook} alt="Community Image" />
204+
</div>
205+
</div>
206+
</a>
207+
</Col>
208+
<Col $sm={12} $lg={6}>
209+
<h3>Explore the Meshery Community</h3>
210+
<p>
211+
The community is growing at a tremendous rate. We value our connections
212+
and that is what makes us unique. Whether it is your first meeting or
213+
your tenth contribution, we want to make sure that you are supported and
214+
equipped to take advantage of all of that the community has to offer.
215+
</p>
216+
</Col>
217+
</Row>
218+
219+
<Row style={{ flexWrap: "wrap" }} className="step">
220+
<Col $sm={12} $lg={6}>
221+
<h3>While Your Issue is Under Review</h3>
222+
<p>
223+
Be patient. There are a large number of contributors and only a
224+
small number of maintainers/reviewers. All contributors are
225+
equally important to us, and we'll be sure to get to you as soon
226+
as possible. In the meanwhile, you are welcome to engage in the Layer5{" "}
227+
<a
228+
href="https://discuss.layer5.io/"
229+
target="_blank"
230+
rel="noreferrer"
231+
>
232+
discussion forum
233+
</a>, join our{" "}
234+
<a
235+
href="https://slack.layer5.io/"
236+
target="_blank"
237+
rel="noreferrer"
238+
>
239+
Slack workspace
240+
</a>{" "}
241+
and take a look at all our <Link to="/projects">projects</Link>.
242+
</p>
243+
</Col>
244+
<Col $sm={12} $lg={6} className="community-collage">
245+
<StaticImage src={CommunityImage3} alt="Community Image" />
246+
</Col>
247+
</Row>
227248
</div>
228249
<div className="table-wrapper" id="tutorials">
229250
<h2>Tutorials</h2>

0 commit comments

Comments
 (0)