Merge pull request #44 from dzcode-io/landing

how to contribute section & top repositories

Author: ZibanPirate

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/icons/branching.png

@@ -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/icons/contact.png

@@ -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/header/icons/github.png

@@ -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>
 );