how to contribute section & top repositories

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

@@ -2,7 +2,7 @@
 
 .Navbar {
   width: 100%;
-  padding: 2% 10%;
+  padding: 0 10%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -11,21 +11,22 @@
   background-color: $bg-primary;
   font-family: "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
     "Helvetica Neue", sans-serif;
-
+  z-index: 999;
   position: fixed;
   top: 0;
   right: 0;
   .brand {
-    font-size: 1.2rem;
+    font-size: 1rem;
     color: text-primary;
     font-weight: bolder;
     display: flex;
     align-items: center;
-    justify-content: flex-start;
+    justify-content: flex-end;
     padding: 15px 0;
     text-decoration: none;
     font-weight: bold;
     color: $text-primary;
+    width: 20vw;
   }
 
   .Navbar__burger {
@@ -97,8 +98,8 @@
       text-align: center;
       padding: 12px;
       position: relative;
-      font-size: 1rem;
-      font-weight: 500;
+      font-size: 0.8rem;
+      font-weight: 400;
 
       &::after {
         content: "";

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

@@ -1,12 +1,48 @@
 import React from "react";
+
 import "./style";
+import programer from "./icons/programmer.png";
+import contact from "./icons/contact.png";
+import support from "./icons/support.png";
+import github from "./icons/github.png";
+
+import { Button } from "../../../../../components/button";
+
+const socialMedia = [
+  {
+    id: 1,
+    name: "dzcode",
+    href: "https://github.com/dzcode-io/dzcode.io",
+    icon: github,
+  },
+  { id: 2, name: "Learn", href: "/learn", icon: programer },
+  { id: 3, name: "Contact", href: "/contact", icon: contact },
+  { id: 4, name: "Support", href: "/support", icon: support },
+];
 
 export const Header = () => (
   <div className="header">
     <div className="shade" />
     <div className="text">
-      <div className="title">dzCode.io</div>
-      <div className="description">Algerian Open Source Community</div>
+      <div className="title">Algerian Open Source Community</div>
+      <div className="description">
+        We make it easier to build better apps in Algeria for Algeria.
+      </div>
+    </div>
+
+    <div className="actions">
+      <Button text="Contribute" link="#" className="primary" />
+      <Button text="Learn More" link="#" className="secondary" />
+    </div>
+    <div className="socialMedia">
+      {socialMedia.map((item) => {
+        return (
+          <div key={item.id} className="item">
+            <img src={item.icon} alt={item.name} className="icon" />
+            <a href={item.href}>{item.name}</a>
+          </div>
+        );
+      })}
     </div>
   </div>
 );

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

@@ -3,35 +3,90 @@
 .landing {
   .header {
     height: 100vh;
-    margin-top: -$navbar-height;
+    margin-top: $navbar-height;
     padding-top: $navbar-height;
     box-sizing: border-box;
-    z-index: -1;
-    background: url("https://images.unsplash.com/3/doctype-hi-res.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=100")
-      no-repeat center;
+    z-index: 1;
+    background: $bg-primary;
     background-size: cover;
     position: relative;
 
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+
     .shade {
       position: absolute;
       width: 100%;
       height: 100%;
-      background-color: #0008;
+      background-color: rgba($color: #000000, $alpha: 0.02);
+      z-index: -1;
+    }
+    .actions {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
     }
     .text {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      text-align: center;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
       .title {
-        font-size: 54pt;
-        color: $light;
+        font-size: calc(1.2rem + 1.2vw);
+        font-weight: 600;
+        text-align: center;
+        padding: 1rem;
       }
       .description {
-        font-size: 24pt;
-        color: $light;
+        padding: 20px;
+        font-size: calc(1rem + 1vw);
+        text-align: center;
+      }
+    }
+  }
+
+  .socialMedia {
+    display: flex;
+    width: 60vw;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-evenly;
+    .item {
+      font-size: 1.1rem;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      padding: 1rem;
+      width: 120px;
+      z-index: 5;
+      cursor: pointer;
+
+      &:hover {
+        transform: scale(1.1);
       }
+
+      a {
+        text-decoration: none;
+        color: $text-primary;
+      }
+    }
+
+    .icon {
+      width: calc(30px + 1vw);
+      height: calc(30px + 1vw);
+      margin-right: 20px;
+    }
+  }
+}
+
+@media only screen and (max-width: $large) {
+  .header {
+    .socialMedia {
+      display: none;
     }
   }
 }

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

@@ -2,5 +2,12 @@ import React from "react";
 import "./style";
 
 export const HowToContribute = () => (
-  <div className="how-to-contribute">HowToContribute</div>
+  <section className="how_to_contribute">
+    <h1>Contribute in DzCode</h1>
+    <div className="items">
+      <div className="item">1. Chose a project that you like.</div>
+      <div className="item">2. Clone the repository.</div>
+      <div className="item">3. Start coding!.</div>
+    </div>
+  </section>
 );

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

@@ -1,6 +1,31 @@
 .landing {
-  .how-to-contribute {
-    height: 200px;
-    background-color: darken($color: #fff, $amount: 45);
+  .how_to_contribute {
+    height: 50vh;
+    background-color: #202325;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+
+    h1 {
+      font-size: calc(1.5rem + 1vw);
+      margin: 0;
+      padding: 1rem;
+    }
+
+    .items {
+      display: flex;
+      justify-content: space-evenly;
+      min-width: 100vw;
+      flex-wrap: wrap;
+      padding: 0;
+
+      .item {
+        flex-basis: auto;
+        font-size: calc(1rem + 0.66vw);
+        padding: 0.5rem 1rem;
+      }
+    }
   }
 }

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

@@ -13,9 +13,9 @@ export const LandingScene = () => {
   return (
     <div className="landing">
       <Header />
-      <WhatAndWhy />
-      <Projects />
       <HowToContribute />
+      <Projects />
+      <WhatAndWhy />
       <TransitionSection />
       <JoinOrganization />
       <TransitionSection />

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

@@ -1,5 +1,6 @@
 import React from "react";
 import "./style";
+import start from "./star.png";
 
 const projects = [
   {
@@ -8,6 +9,7 @@ const projects = [
     title: "wilayat",
     description:
       "Statically generated and server-rendered React applications have never been easier.",
+    contributers: 9,
     repository: "https://github.com/dzcode-io/dzcode.io",
   },
   {
@@ -16,6 +18,7 @@ const projects = [
     title: "Static Exporting",
     description:
       "No need to learn a new framework. Exporting a static site with Next.js is as easy as a single command.",
+    contributers: 9,
     repository: "https://github.com/dzcode-io/dzcode.io",
   },
   {
@@ -24,32 +27,64 @@ const projects = [
     title: "CSS-in-JS",
     description:
       "Next.js comes with styled-jsx included, but it also works with every CSS-in-JS solution you know and love.",
+    contributers: 9,
+    repository: "https://github.com/dzcode-io/dzcode.io",
+  },
+  {
+    image:
+      "https://images.unsplash.com/photo-1549970604-a784b6ecde02?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=255&q=80",
+    title: "CSS-in-JS",
+    description:
+      "Next.js comes with styled-jsx included, but it also works with every CSS-in-JS solution you know and love.",
+    contributers: 9,
+    repository: "https://github.com/dzcode-io/dzcode.io",
+  },
+  {
+    image:
+      "https://images.unsplash.com/photo-1549970604-a784b6ecde02?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=255&q=80",
+    title: "CSS-in-JS",
+    description:
+      "Next.js comes with styled-jsx included, but it also works with every CSS-in-JS solution you know and love.",
+    contributers: 9,
     repository: "https://github.com/dzcode-io/dzcode.io",
   },
 ];
 
 export const Projects = () => (
-  <div className="projects">
-    <div className="title">Top Repos</div>
-    <div className="sub-title">
-      <strong>Find</strong>, <strong>Use</strong> and <strong>Improve</strong>{" "}
-      solutions written by Algerians for Algerians
-    </div>
-    <div className="projects">
+  <section className="projects">
+    <header>
+      <h1 className="title">Top Repos</h1>
+      <p className="sub-title">
+        <strong>Find</strong>, <strong>Use</strong> and <strong>Improve</strong>{" "}
+        solutions written by Algerians for Algerians
+      </p>
+    </header>
+    <div className="repositories">
       {projects.map((project, index) => (
         <div className="project" key={`project-${index}`}>
           <div
             className="image"
             style={{ backgroundImage: `url(${project.image})` }}
           />
-          <div className="title">{project.title}</div>
-          <img src="https://img.shields.io/github/contributors/dzcode-io/dzcode.io?style=social" />
-          <div className="description">{project.description}</div>
-          <a className="explore" href="#">
-            Explore Projects ...
+          <div className="info">
+            <div className="info__header">
+              <div className="title">{project.title}</div>
+
+              <div className="contributers">
+                <img src={start} alt="contiributers" />
+                <div className="number">{project.contributers}</div>
+              </div>
+            </div>
+            <div className="description">{project.description}</div>
+          </div>
+          <a className=" btn btn__primary" id="buttons__1" href="#">
+            Explore Project
           </a>
         </div>
       ))}
     </div>
-  </div>
+    <a className=" btn btn__secondary" id="buttons__2" href="#">
+      Explore More
+    </a>
+  </section>
 );