diff --git a/frontend/src/apps/main/components/navbar/style.scss b/frontend/src/apps/main/components/navbar/style.scss index de1fa6b52..b65ea7a14 100644 --- a/frontend/src/apps/main/components/navbar/style.scss +++ b/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: ""; diff --git a/frontend/src/apps/main/scenes/landing/header/icons/branching.png b/frontend/src/apps/main/scenes/landing/header/icons/branching.png new file mode 100644 index 000000000..82dec0a23 Binary files /dev/null and b/frontend/src/apps/main/scenes/landing/header/icons/branching.png differ diff --git a/frontend/src/apps/main/scenes/landing/header/icons/contact.png b/frontend/src/apps/main/scenes/landing/header/icons/contact.png new file mode 100644 index 000000000..64d45ab20 Binary files /dev/null and b/frontend/src/apps/main/scenes/landing/header/icons/contact.png differ diff --git a/frontend/src/apps/main/scenes/landing/header/icons/github.png b/frontend/src/apps/main/scenes/landing/header/icons/github.png new file mode 100644 index 000000000..def33834d Binary files /dev/null and b/frontend/src/apps/main/scenes/landing/header/icons/github.png differ diff --git a/frontend/src/apps/main/scenes/landing/header/icons/info.png b/frontend/src/apps/main/scenes/landing/header/icons/info.png new file mode 100644 index 000000000..4b9cca1e3 Binary files /dev/null and b/frontend/src/apps/main/scenes/landing/header/icons/info.png differ diff --git a/frontend/src/apps/main/scenes/landing/header/icons/programmer.png b/frontend/src/apps/main/scenes/landing/header/icons/programmer.png new file mode 100644 index 000000000..cc7a7f6b7 Binary files /dev/null and b/frontend/src/apps/main/scenes/landing/header/icons/programmer.png differ diff --git a/frontend/src/apps/main/scenes/landing/header/icons/support.png b/frontend/src/apps/main/scenes/landing/header/icons/support.png new file mode 100644 index 000000000..8c2c6a54f Binary files /dev/null and b/frontend/src/apps/main/scenes/landing/header/icons/support.png differ diff --git a/frontend/src/apps/main/scenes/landing/header/index.tsx b/frontend/src/apps/main/scenes/landing/header/index.tsx index 37a5229eb..0be4ab141 100644 --- a/frontend/src/apps/main/scenes/landing/header/index.tsx +++ b/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 = () => (
-
dzCode.io
-
Algerian Open Source Community
+
Algerian Open Source Community
+
+ We make it easier to build better apps in Algeria for Algeria. +
+
+ +
+
+
+ {socialMedia.map((item) => { + return ( +
+ {item.name} + {item.name} +
+ ); + })}
); diff --git a/frontend/src/apps/main/scenes/landing/header/style.scss b/frontend/src/apps/main/scenes/landing/header/style.scss index 7b9eb0bef..090f0c798 100644 --- a/frontend/src/apps/main/scenes/landing/header/style.scss +++ b/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; } } } diff --git a/frontend/src/apps/main/scenes/landing/how-to-contribute/index.tsx b/frontend/src/apps/main/scenes/landing/how-to-contribute/index.tsx index 3f3faca9a..0f4867235 100644 --- a/frontend/src/apps/main/scenes/landing/how-to-contribute/index.tsx +++ b/frontend/src/apps/main/scenes/landing/how-to-contribute/index.tsx @@ -2,5 +2,12 @@ import React from "react"; import "./style"; export const HowToContribute = () => ( -
HowToContribute
+
+

Contribute in DzCode

+
+
1. Chose a project that you like.
+
2. Clone the repository.
+
3. Start coding!.
+
+
); diff --git a/frontend/src/apps/main/scenes/landing/how-to-contribute/style.scss b/frontend/src/apps/main/scenes/landing/how-to-contribute/style.scss index a8423aa92..5a003afc9 100644 --- a/frontend/src/apps/main/scenes/landing/how-to-contribute/style.scss +++ b/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; + } + } } } diff --git a/frontend/src/apps/main/scenes/landing/index.tsx b/frontend/src/apps/main/scenes/landing/index.tsx index f92ac98c9..9cf646057 100644 --- a/frontend/src/apps/main/scenes/landing/index.tsx +++ b/frontend/src/apps/main/scenes/landing/index.tsx @@ -13,9 +13,9 @@ export const LandingScene = () => { return (
- - + + diff --git a/frontend/src/apps/main/scenes/landing/projects/index.tsx b/frontend/src/apps/main/scenes/landing/projects/index.tsx index defc48bf1..72f838cc0 100644 --- a/frontend/src/apps/main/scenes/landing/projects/index.tsx +++ b/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 = () => ( -
-
Top Repos
-
- Find, Use and Improve{" "} - solutions written by Algerians for Algerians -
-
+
+
+

Top Repos

+

+ Find, Use and Improve{" "} + solutions written by Algerians for Algerians +

+
+
{projects.map((project, index) => ( -
+ + Explore More + +
); diff --git a/frontend/src/apps/main/scenes/landing/projects/star.png b/frontend/src/apps/main/scenes/landing/projects/star.png new file mode 100644 index 000000000..b58ef7c50 Binary files /dev/null and b/frontend/src/apps/main/scenes/landing/projects/star.png differ diff --git a/frontend/src/apps/main/scenes/landing/projects/style.scss b/frontend/src/apps/main/scenes/landing/projects/style.scss index 22d2eae80..6f101692a 100644 --- a/frontend/src/apps/main/scenes/landing/projects/style.scss +++ b/frontend/src/apps/main/scenes/landing/projects/style.scss @@ -3,56 +3,132 @@ .landing { .projects { - background-color: $light; - text-align: center; - - > .title { - color: lighten($color: $dark, $amount: 30); - font-size: xx-large; - font-weight: bold; - padding: 3rem 1rem 1rem; + min-height: 80vh; + width: 100%; + padding: 5% 10%; + display: flex; + flex-direction: column; + align-items: center; + + header { + height: 20%; + padding: 1rem; + text-align: center; + h1 { + font-size: calc(1.5rem + 1vw); + } } - > .sub-title { - color: lighten($color: $dark, $amount: 40); - padding: 0rem 1rem 1rem; + + #buttons__2 { + margin: 4rem; + width: 300px; + text-align: center; + border-radius: 5px; } - .projects { - margin: 1rem; + + .repositories { + min-height: 80%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + color: $light; + flex-wrap: wrap; + .project { - display: inline-block; - margin: 1rem 2rem; - padding: 1rem; - vertical-align: top; - min-height: 300px; - border: 1px solid lighten($color: $dark, $amount: 60); - border-radius: 4px; - box-shadow: 0 1px 1px 1px transparentize($dark, 0.9); - position: relative; + width: 300px; + min-height: 450px; + display: flex; + justify-content: space-evenly; + align-items: center; + flex-direction: column; + margin: 1rem; + background-color: #202325; + border-radius: 10px; + -webkit-box-shadow: 10px 10px 45px -17px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 10px 10px 45px -17px rgba(0, 0, 0, 0.75); + box-shadow: 10px 10px 45px -17px rgba(0, 0, 0, 0.75); + + .info { + text-align: center; + + .info__header { + display: flex; + justify-content: space-evenly; + width: 100%; + padding: 0 2rem; + } + .title { + font-size: calc(1.4rem + 0.2vw); + font-weight: bold; + display: flex; + justify-content: center; + align-items: center; + + text-transform: capitalize; + } + .contributers { + display: inline-flex; + align-items: center; + justify-content: center; + + .number { + display: flex; + justify-content: center; + align-items: center; + font-size: 0.7rem; + font-weight: bold; + padding: 0.3rem 0.5rem; + width: 20px; + background-color: #fff; + border-radius: 2px; + color: #202325; + margin-left: 5px; + -webkit-box-shadow: inset 10px 10px 15px -17px rgba(0, 0, 0, 0.75); + -moz-box-shadow: inset 10px 10px 15px -17px rgba(0, 0, 0, 0.75); + box-shadow: inset 10px 10px 15px -17px rgba(0, 0, 0, 0.75); + } + } + + img { + display: inline-block; + width: 18px; + } + } .image { - display: inline-block; - background-size: cover; + background-repeat: no-repeat; background-position: center; - width: 80px; - height: 80px; - border-radius: 50%; - } - .title { - font-size: x-large; + object-fit: cover; + padding: 80px; + border-radius: 10px; margin: 1rem; } + .description { - margin: 1rem; - max-width: 260px; - text-align: justify; - font-size: small; - color: lighten($color: $dark, $amount: 40); + padding: 1rem 2rem; + text-align: center; + } + #buttons { + &__1 { + margin-bottom: 1rem; + width: 70%; + text-align: center; + border-radius: 5px; + } } - .explore { - @extend .btn; - position: absolute; - bottom: 2rem; - left: 2rem; + } + } + } +} + +@media screen and (min-width: $regular) { + .landing { + .projects { + .repositories { + flex-direction: row; + .project { + margin: 2rem; } } } diff --git a/frontend/src/common/style/_buttons.scss b/frontend/src/common/style/_buttons.scss index e0d4f6220..068e2f171 100644 --- a/frontend/src/common/style/_buttons.scss +++ b/frontend/src/common/style/_buttons.scss @@ -2,8 +2,17 @@ .btn { text-decoration: none; - background: $primary; - color: $light; + font-size: small; padding: 0.6rem 1rem; + + &__primary { + background: $primary; + color: $light; + } + + &__secondary { + background: $secondary; + color: $light; + } } diff --git a/frontend/src/common/style/_variables.scss b/frontend/src/common/style/_variables.scss index da37e3396..7dad8758e 100644 --- a/frontend/src/common/style/_variables.scss +++ b/frontend/src/common/style/_variables.scss @@ -1,14 +1,14 @@ // Colors -$primary: #1c8ad8; -$secondary: #dc004e; -$dark: #000; +$primary: #dc004e; +$secondary: #1c8ad8; +$dark: #333; $light: #fff; $link: #1890ff; -$text-primary: #000000; +$text-primary: #333; $text-secondary: #ffffff; $bg-primary: #ffffff; -$bg-secondary: #000000; +$bg-secondary: #333; // MediaQueries $X-large: 1600px; @@ -19,7 +19,7 @@ $small: 420px; $x-small: 330px; // others -$navbar-height: 60px; +$navbar-height: 40px; // Fonts $font-primary: Helvetica, Arial, sans-serif; diff --git a/frontend/src/components/button/index.tsx b/frontend/src/components/button/index.tsx new file mode 100644 index 000000000..87b8f796a --- /dev/null +++ b/frontend/src/components/button/index.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import "./style.scss"; + +export interface ButtonProps { + link: string; + text: string; + className: string; +} + +export const Button: React.SFC = ({ className, link, text }) => { + return ( + + {text} + + ); +}; diff --git a/frontend/src/components/button/style.scss b/frontend/src/components/button/style.scss new file mode 100644 index 000000000..f086400c2 --- /dev/null +++ b/frontend/src/components/button/style.scss @@ -0,0 +1,31 @@ +@import "../../common/style/variables"; + +.btn-btn { + text-decoration: none; + padding: 10px 40px; + border-radius: 7px; + font-size: calc(15px + 0.15vw); + font-weight: 400; + letter-spacing: 1px; + cursor: pointer; + color: #fff; + margin: 1rem; + + &.primary { + background-color: rgba($color: $primary, $alpha: 0.9); + &:hover { + background-color: rgba($color: $primary, $alpha: 1); + + color: #fff; + } + } + + &.secondary { + border: 1px solid rgba($color: $secondary, $alpha: 0.95); + color: rgba($color: $secondary, $alpha: 0.95); + &:hover { + color: #fff; + background-color: $secondary; + } + } +}