Skip to content

Commit 3a8a7c7

Browse files
ZibanPirateZibanPirate
authored
Merge pull request #142 from dzcode-io/97-landing-revamping
97 landing revamping
2 parents 0a20a3a + 6651f19 commit 3a8a7c7

File tree

17 files changed

+1079
-575
lines changed

17 files changed

+1079
-575
lines changed

‎api/functions/.eslintignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules/
2+
firebase

‎api/functions/.prettierignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
firebase
2+
*.json

‎api/functions/.prettierrc‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"singleQuote": false,
3+
"printWidth": 80,
4+
"trailingComma": "all",
5+
"endOfLine": "auto"
6+
}

‎api/functions/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"name": "dzcode.io-api",
3+
"version": "1.0.0",
34
"scripts": {
45
"build": "tsc",
56
"build:watch": "tsc --watch",
@@ -10,7 +11,7 @@
1011
"logs": "firebase functions:log"
1112
},
1213
"engines": {
13-
"node": "8"
14+
"node": ">8"
1415
},
1516
"main": "lib/index.js",
1617
"dependencies": {

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

Lines changed: 97 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,108 @@
1-
import "./style";
2-
import { Button } from "src/components/button";
3-
import { LinkV2 } from "src/components/link-v2";
1+
import Button from "@material-ui/core/Button";
2+
import FreeBreakfastIcon from "@material-ui/icons/FreeBreakfast";
3+
import GitHubIcon from "@material-ui/icons/GitHub";
4+
import QuestionAnswerIcon from "@material-ui/icons/QuestionAnswer";
45
import React from "react";
5-
import contact from "t9/apps/main/assets/png/contact.png";
6-
import github from "t9/apps/main/assets/png/github.png";
7-
import programer from "t9/apps/main/assets/png/programmer.png";
6+
import SchoolIcon from "@material-ui/icons/School";
7+
import Typography from "@material-ui/core/Typography";
8+
import { makeStyles } from "@material-ui/core/styles";
89

910
const socialMedia = [
11+
{
12+
name: "How To Open Source",
13+
href: "/Learn/Getting_Started",
14+
icon: <SchoolIcon />,
15+
},
16+
{
17+
name: "Frequently Asked Questions",
18+
href: "/FAQ",
19+
icon: <QuestionAnswerIcon />,
20+
},
21+
{ name: "Contact", href: "/Contact-Us", icon: <FreeBreakfastIcon /> },
1022
{
1123
name: "dzCode.io",
12-
to: "https://github.com/dzcode-io",
13-
icon: github,
24+
href: "https://github.com/dzcode-io",
25+
icon: <GitHubIcon />,
1426
},
15-
{ name: "Learn", to: "/Learn/Getting_Started", icon: programer },
16-
{ name: "Contact", to: "/Contact-Us", icon: contact },
1727
];
1828

19-
export const Header = () => (
20-
<div className="header">
21-
<div className="shade" />
22-
<div className="text">
23-
<div className="title">Algerian Open Source Community</div>
24-
<div className="description">
29+
const useStyles = makeStyles((theme) => ({
30+
root: {
31+
display: "flex",
32+
alignItems: "center",
33+
justifyContent: "center",
34+
textAlign: "center",
35+
flexDirection: "column",
36+
minHeight: "90vh",
37+
38+
[theme.breakpoints.down("sm")]: {
39+
height: "85vh",
40+
},
41+
},
42+
buttons: {
43+
padding: theme.spacing(4),
44+
},
45+
header: {
46+
padding: theme.spacing(2),
47+
color: theme.palette.text.secondary,
48+
},
49+
socialMedia: {
50+
padding: "48px 29px",
51+
},
52+
}));
53+
54+
export const Header = () => {
55+
const classes = useStyles();
56+
return (
57+
<div className={classes.root}>
58+
<div className={classes.header}>
59+
<Typography variant="h1" color="inherit">
60+
Algerian Open Source Community
61+
</Typography>
62+
</div>
63+
<Typography variant="h4" color="inherit">
2564
We make it easier to build better apps in Algeria for Algeria.
65+
</Typography>
66+
<div className={classes.buttons}>
67+
<Button
68+
href="https://github.com/dzcode-io/dzcode.io"
69+
color="primary"
70+
variant="contained"
71+
disableRipple
72+
disableFocusRipple
73+
size="large"
74+
>
75+
Make a Contribution
76+
</Button>
77+
<Button
78+
href="/Contact-Us"
79+
disableRipple
80+
disableFocusRipple
81+
color="primary"
82+
variant="text"
83+
size="large"
84+
>
85+
How can i help ?
86+
</Button>
87+
</div>
88+
<div className={classes.socialMedia}>
89+
{socialMedia.map((item, i) => {
90+
return (
91+
<Button
92+
disableRipple
93+
disableFocusRipple
94+
variant="text"
95+
color="default"
96+
href={item.href}
97+
size="large"
98+
startIcon={item.icon}
99+
key={i}
100+
>
101+
{item.name}
102+
</Button>
103+
);
104+
})}
26105
</div>
27106
</div>
28-
29-
<div className="actions">
30-
<Button text="Contribute" link="/Contribute" className="primary" />
31-
<Button text="Learn More" link="/About" className="secondary" />
32-
</div>
33-
<div className="socialMedia">
34-
{socialMedia.map((item, index) => {
35-
return (
36-
<div key={`header-link-${index}`} className="item">
37-
<img src={item.icon} alt={item.name} className="icon" />
38-
<LinkV2 href={item.to}>{item.name}</LinkV2>
39-
</div>
40-
);
41-
})}
42-
</div>
43-
</div>
44-
);
107+
);
108+
};

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

Lines changed: 0 additions & 95 deletions
This file was deleted.

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

Lines changed: 72 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,74 @@
1-
import "./style";
1+
import Paper from "@material-ui/core/Paper";
22
import React from "react";
3+
import Typography from "@material-ui/core/Typography";
4+
import { makeStyles } from "@material-ui/core/styles";
35

4-
export const HowToContribute = () => (
5-
<section className="how_to_contribute">
6-
<h1>Contribute to dzCode.io</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>
13-
);
6+
const steps = [
7+
"1. Chose a project that you like.",
8+
"2. Clone the repository.",
9+
"3. Start coding!.",
10+
];
11+
12+
const useStyles = makeStyles((theme) => ({
13+
root: {
14+
marginBottom: `10vh`,
15+
},
16+
paper: {
17+
height: "100%",
18+
display: "flex",
19+
flexDirection: "column",
20+
alignItems: "center",
21+
justifyContent: "center",
22+
padding: "5% 0",
23+
24+
[theme.breakpoints.up("md")]: {
25+
padding: "4vh 0",
26+
},
27+
},
28+
header: {
29+
color: theme.palette.text.secondary,
30+
marginBottom: "20px",
31+
textAlign: "center",
32+
},
33+
header2: {
34+
marginBottom: "20px",
35+
textAlign: "center",
36+
},
37+
step: {
38+
margin: "10px",
39+
fontWeight: 400,
40+
},
41+
steps: {
42+
marginTop: "20px",
43+
display: "flex",
44+
flexWrap: "wrap",
45+
justifyContent: "center",
46+
alignItems: "center",
47+
},
48+
}));
49+
50+
interface ReasonCardProps {
51+
title: string;
52+
description: string;
53+
}
54+
55+
export const HowToContribute = () => {
56+
const classes = useStyles();
57+
return (
58+
<section className={classes.root}>
59+
<Paper className={classes.paper} elevation={3}>
60+
<Typography variant="h3" className={classes.header}>
61+
How To Contribute to dzCode.io ?
62+
</Typography>
63+
64+
<div className={classes.steps}>
65+
{steps.map((step, index) => (
66+
<Typography className={classes.step} key={index} variant="h4">
67+
{step}
68+
</Typography>
69+
))}
70+
</div>
71+
</Paper>
72+
</section>
73+
);
74+
};

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

Lines changed: 0 additions & 31 deletions
This file was deleted.

0 commit comments

Comments
 (0)