⚒ Landing Revamp

Author: souhaib-benbouzid

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

@@ -1,39 +1,74 @@
-import "./style";
+import Paper from "@material-ui/core/Paper";
 import React from "react";
-import { Typography } from "@material-ui/core";
+import Typography from "@material-ui/core/Typography";
 import { makeStyles } from "@material-ui/core/styles";
 
+const steps = [
+  "1. Chose a project that you like.",
+  "2. Clone the repository.",
+  "3. Start coding!.",
+];
+
 const useStyles = makeStyles((theme) => ({
   root: {
-    margin: "10vh 0",
+    marginBottom: `10vh`,
+  },
+  paper: {
+    height: "100%",
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    justifyContent: "space-evenly",
-    height: "50vh",
-    background: theme.palette.background.paper,
+    justifyContent: "center",
+    padding: "5% 0",
+
+    [theme.breakpoints.up("md")]: {
+      padding: "4vh 0",
+    },
+  },
+  header: {
+    color: theme.palette.text.secondary,
+    marginBottom: "20px",
+    textAlign: "center",
+  },
+  header2: {
+    marginBottom: "20px",
+    textAlign: "center",
+  },
+  step: {
+    margin: "10px",
+    fontWeight: 400,
   },
   steps: {
+    marginTop: "20px",
     display: "flex",
-    flexDirection: "row",
-    justifyItems: "space-evenly",
-    justifyContent: "flex-start",
     flexWrap: "wrap",
-    height: "60%",
-    width: "90%",
+    justifyContent: "center",
+    alignItems: "center",
   },
 }));
 
+interface ReasonCardProps {
+  title: string;
+  description: string;
+}
+
 export const HowToContribute = () => {
   const classes = useStyles();
   return (
     <section className={classes.root}>
-      <Typography variant="h3">Contribute to dzCode.io</Typography>
-      <div className={classes.steps}>
-        <Typography variant="h4">1. Chose a project that you like.</Typography>
-        <Typography variant="h4">2. Clone the repository.</Typography>
-        <Typography variant="h4">3. Start coding!.</Typography>
-      </div>
+      <Paper className={classes.paper} elevation={3}>
+        <Typography variant="h3" className={classes.header}>
+          How To Contribute to dzCode.io ?
+        </Typography>
+
+        <div className={classes.steps}>
+          {steps.map((step, index) => (
+            <Typography className={classes.step} key={index} variant="h4">
+              {step}
+            </Typography>
+          ))}
+        </div>
+      </Paper>
     </section>
   );
 };

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

@@ -10,7 +10,7 @@ import { TopProjects } from "./top-projects";
 import { WhatAndWhy } from "./what-and-why";
 import { connect } from "react-redux";
 import { fetchProjectsList } from "t9/apps/main/redux/actions/projects-scene";
-
+import { HowToContribute } from "./how-to-contribute";
 export const LandingScene = ({
   topProjects,
   topArticles,
@@ -27,6 +27,7 @@ export const LandingScene = ({
       <Header />
       <WhatAndWhy />
       <TopProjects topProjects={topProjects} />
+      <HowToContribute />
       <TopArticles topArticles={topArticles} />
     </>
   );

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

@@ -88,7 +88,7 @@ export const WhatAndWhy = () => {
   const classes = useStyles();
   return (
     <section className={classes.root}>
-      <Paper className={classes.paper} elevation={6}>
+      <Paper className={classes.paper} elevation={3}>
         <Typography variant="h2" className={classes.header}>
           What is dzCode.io and Why?
         </Typography>