Skip to content

Commit c6813b8

Browse files
souhaib-benbouzidsouhaib-benbouzid
committed
top repositories && how to contribute
1 parent 5ffa964 commit c6813b8

File tree

8 files changed

+217
-65
lines changed

8 files changed

+217
-65
lines changed

‎frontend/src/apps/main/components/navbar/style.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
.Navbar {
44
width: 100%;
5-
padding: 2% 10%;
5+
padding: 0 10%;
66
display: flex;
77
flex-direction: row;
88
justify-content: space-between;
@@ -16,7 +16,7 @@
1616
top: 0;
1717
right: 0;
1818
.brand {
19-
font-size: 1.2rem;
19+
font-size: 1rem;
2020
color: text-primary;
2121
font-weight: bolder;
2222
display: flex;
@@ -98,8 +98,8 @@
9898
text-align: center;
9999
padding: 12px;
100100
position: relative;
101-
font-size: 1rem;
102-
font-weight: 500;
101+
font-size: 0.8rem;
102+
font-weight: 400;
103103

104104
&::after {
105105
content: "";

‎frontend/src/apps/main/scenes/landing/how-to-contribute/index.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,12 @@ import React from "react";
22
import "./style";
33

44
export const HowToContribute = () => (
5-
<div className="how-to-contribute">HowToContribute</div>
5+
<section className="how_to_contribute">
6+
<h1>Contribute in DzCode</h1>
7+
<div className="items">
8+
<div className="item">1. Chose a project that you like.</div>
9+
<div className="item">2. Clone the repository.</div>
10+
<div className="item">3. Start coding!.</div>
11+
</div>
12+
</section>
613
);

‎frontend/src/apps/main/scenes/landing/how-to-contribute/style.scss‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,31 @@
11
.landing {
2-
.how-to-contribute {
3-
height: 200px;
4-
background-color: darken($color: #fff, $amount: 45);
2+
.how_to_contribute {
3+
height: 50vh;
4+
background-color: #202325;
5+
color: white;
6+
display: flex;
7+
flex-direction: column;
8+
align-items: center;
9+
justify-content: space-evenly;
10+
11+
h1 {
12+
font-size: calc(1.5rem + 1vw);
13+
margin: 0;
14+
padding: 1rem;
15+
}
16+
17+
.items {
18+
display: flex;
19+
justify-content: space-evenly;
20+
min-width: 100vw;
21+
flex-wrap: wrap;
22+
padding: 0;
23+
24+
.item {
25+
flex-basis: auto;
26+
font-size: calc(1rem + 0.66vw);
27+
padding: 0.5rem 1rem;
28+
}
29+
}
530
}
631
}

‎frontend/src/apps/main/scenes/landing/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ export const LandingScene = () => {
1313
return (
1414
<div className="landing">
1515
<Header />
16-
<WhatAndWhy />
17-
<Projects />
1816
<HowToContribute />
17+
<Projects />
18+
<WhatAndWhy />
1919
<TransitionSection />
2020
<JoinOrganization />
2121
<TransitionSection />

‎frontend/src/apps/main/scenes/landing/projects/index.tsx‎

Lines changed: 48 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
22
import "./style";
3+
import start from "./star.png";
34

45
const projects = [
56
{
@@ -8,6 +9,7 @@ const projects = [
89
title: "wilayat",
910
description:
1011
"Statically generated and server-rendered React applications have never been easier.",
12+
contributers: 9,
1113
repository: "https://github.com/dzcode-io/dzcode.io",
1214
},
1315
{
@@ -16,6 +18,7 @@ const projects = [
1618
title: "Static Exporting",
1719
description:
1820
"No need to learn a new framework. Exporting a static site with Next.js is as easy as a single command.",
21+
contributers: 9,
1922
repository: "https://github.com/dzcode-io/dzcode.io",
2023
},
2124
{
@@ -24,32 +27,64 @@ const projects = [
2427
title: "CSS-in-JS",
2528
description:
2629
"Next.js comes with styled-jsx included, but it also works with every CSS-in-JS solution you know and love.",
30+
contributers: 9,
31+
repository: "https://github.com/dzcode-io/dzcode.io",
32+
},
33+
{
34+
image:
35+
"https://images.unsplash.com/photo-1549970604-a784b6ecde02?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=255&q=80",
36+
title: "CSS-in-JS",
37+
description:
38+
"Next.js comes with styled-jsx included, but it also works with every CSS-in-JS solution you know and love.",
39+
contributers: 9,
40+
repository: "https://github.com/dzcode-io/dzcode.io",
41+
},
42+
{
43+
image:
44+
"https://images.unsplash.com/photo-1549970604-a784b6ecde02?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=255&q=80",
45+
title: "CSS-in-JS",
46+
description:
47+
"Next.js comes with styled-jsx included, but it also works with every CSS-in-JS solution you know and love.",
48+
contributers: 9,
2749
repository: "https://github.com/dzcode-io/dzcode.io",
2850
},
2951
];
3052

3153
export const Projects = () => (
32-
<div className="projects">
33-
<div className="title">Top Repos</div>
34-
<div className="sub-title">
35-
<strong>Find</strong>, <strong>Use</strong> and <strong>Improve</strong>{" "}
36-
solutions written by Algerians for Algerians
37-
</div>
38-
<div className="projects">
54+
<section className="projects">
55+
<header>
56+
<h1 className="title">Top Repos</h1>
57+
<p className="sub-title">
58+
<strong>Find</strong>, <strong>Use</strong> and <strong>Improve</strong>{" "}
59+
solutions written by Algerians for Algerians
60+
</p>
61+
</header>
62+
<div className="repositories">
3963
{projects.map((project, index) => (
4064
<div className="project" key={`project-${index}`}>
4165
<div
4266
className="image"
4367
style={{ backgroundImage: `url(${project.image})` }}
4468
/>
45-
<div className="title">{project.title}</div>
46-
<img src="https://img.shields.io/github/contributors/dzcode-io/dzcode.io?style=social" />
47-
<div className="description">{project.description}</div>
48-
<a className="explore" href="#">
49-
Explore Projects ...
69+
<div className="info">
70+
<div className="info__header">
71+
<div className="title">{project.title}</div>
72+
73+
<div className="contributers">
74+
<img src={start} alt="contiributers" />
75+
<div className="number">{project.contributers}</div>
76+
</div>
77+
</div>
78+
<div className="description">{project.description}</div>
79+
</div>
80+
<a className=" btn btn__primary" id="buttons__1" href="#">
81+
Explore Project
5082
</a>
5183
</div>
5284
))}
5385
</div>
54-
</div>
86+
<a className=" btn btn__secondary" id="buttons__2" href="#">
87+
Explore More
88+
</a>
89+
</section>
5590
);

‎frontend/src/apps/main/scenes/landing/projects/star.png‎

1.06 KB
Loading

‎frontend/src/apps/main/scenes/landing/projects/style.scss‎

Lines changed: 116 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -3,56 +3,132 @@
33

44
.landing {
55
.projects {
6-
background-color: $light;
7-
text-align: center;
8-
9-
> .title {
10-
color: lighten($color: $dark, $amount: 30);
11-
font-size: xx-large;
12-
font-weight: bold;
13-
padding: 3rem 1rem 1rem;
6+
min-height: 80vh;
7+
width: 100%;
8+
padding: 5% 10%;
9+
display: flex;
10+
flex-direction: column;
11+
align-items: center;
12+
13+
header {
14+
height: 20%;
15+
padding: 1rem;
16+
text-align: center;
17+
h1 {
18+
font-size: calc(1.5rem + 1vw);
19+
}
1420
}
15-
> .sub-title {
16-
color: lighten($color: $dark, $amount: 40);
17-
padding: 0rem 1rem 1rem;
21+
22+
#buttons__2 {
23+
margin: 4rem;
24+
width: 300px;
25+
text-align: center;
26+
border-radius: 5px;
1827
}
19-
.projects {
20-
margin: 1rem;
28+
29+
.repositories {
30+
min-height: 80%;
31+
display: flex;
32+
justify-content: center;
33+
align-items: center;
34+
flex-direction: column;
35+
color: $light;
36+
flex-wrap: wrap;
37+
2138
.project {
22-
display: inline-block;
23-
margin: 1rem 2rem;
24-
padding: 1rem;
25-
vertical-align: top;
26-
min-height: 300px;
27-
border: 1px solid lighten($color: $dark, $amount: 60);
28-
border-radius: 4px;
29-
box-shadow: 0 1px 1px 1px transparentize($dark, 0.9);
30-
position: relative;
39+
width: 300px;
40+
min-height: 450px;
41+
display: flex;
42+
justify-content: space-evenly;
43+
align-items: center;
44+
flex-direction: column;
45+
margin: 1rem;
46+
background-color: #202325;
47+
border-radius: 10px;
48+
-webkit-box-shadow: 10px 10px 45px -17px rgba(0, 0, 0, 0.75);
49+
-moz-box-shadow: 10px 10px 45px -17px rgba(0, 0, 0, 0.75);
50+
box-shadow: 10px 10px 45px -17px rgba(0, 0, 0, 0.75);
51+
52+
.info {
53+
text-align: center;
54+
55+
.info__header {
56+
display: flex;
57+
justify-content: space-evenly;
58+
width: 100%;
59+
padding: 0 2rem;
60+
}
61+
.title {
62+
font-size: calc(1.4rem + 0.2vw);
63+
font-weight: bold;
64+
display: flex;
65+
justify-content: center;
66+
align-items: center;
67+
68+
text-transform: capitalize;
69+
}
70+
.contributers {
71+
display: inline-flex;
72+
align-items: center;
73+
justify-content: center;
74+
75+
.number {
76+
display: flex;
77+
justify-content: center;
78+
align-items: center;
79+
font-size: 0.7rem;
80+
font-weight: bold;
81+
padding: 0.3rem 0.5rem;
82+
width: 20px;
83+
background-color: #fff;
84+
border-radius: 2px;
85+
color: #202325;
86+
margin-left: 5px;
87+
-webkit-box-shadow: inset 10px 10px 15px -17px rgba(0, 0, 0, 0.75);
88+
-moz-box-shadow: inset 10px 10px 15px -17px rgba(0, 0, 0, 0.75);
89+
box-shadow: inset 10px 10px 15px -17px rgba(0, 0, 0, 0.75);
90+
}
91+
}
92+
93+
img {
94+
display: inline-block;
95+
width: 18px;
96+
}
97+
}
3198

3299
.image {
33-
display: inline-block;
34-
background-size: cover;
100+
background-repeat: no-repeat;
35101
background-position: center;
36-
width: 80px;
37-
height: 80px;
38-
border-radius: 50%;
39-
}
40-
.title {
41-
font-size: x-large;
102+
object-fit: cover;
103+
padding: 80px;
104+
border-radius: 10px;
42105
margin: 1rem;
43106
}
107+
44108
.description {
45-
margin: 1rem;
46-
max-width: 260px;
47-
text-align: justify;
48-
font-size: small;
49-
color: lighten($color: $dark, $amount: 40);
109+
padding: 1rem 2rem;
110+
text-align: center;
111+
}
112+
#buttons {
113+
&__1 {
114+
margin-bottom: 1rem;
115+
width: 70%;
116+
text-align: center;
117+
border-radius: 5px;
118+
}
50119
}
51-
.explore {
52-
@extend .btn;
53-
position: absolute;
54-
bottom: 2rem;
55-
left: 2rem;
120+
}
121+
}
122+
}
123+
}
124+
125+
@media screen and (min-width: $regular) {
126+
.landing {
127+
.projects {
128+
.repositories {
129+
flex-direction: row;
130+
.project {
131+
margin: 2rem;
56132
}
57133
}
58134
}

‎frontend/src/common/style/_buttons.scss‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,17 @@
22

33
.btn {
44
text-decoration: none;
5-
background: $primary;
6-
color: $light;
5+
76
font-size: small;
87
padding: 0.6rem 1rem;
8+
9+
&__primary {
10+
background: $primary;
11+
color: $light;
12+
}
13+
14+
&__secondary {
15+
background: $secondary;
16+
color: $light;
17+
}
918
}

0 commit comments

Comments
 (0)