Add hero section and prepare header

components/head/index.js

@@ -0,0 +1,17 @@
+import NextHead from 'next/head';
+
+const defaultDescription = 'Roadmaps, articles and resources for modern developers';
+const defaultOgUrl = 'https://roadmap.sh';
+
+const Head = (props) => (
+  <NextHead>
+    <meta charSet='UTF-8' />
+    <title>{ props.title || '' }</title>
+    <meta name='description' content={ props.description || defaultDescription } />
+    <meta name='viewport' content='width=device-width, initial-scale=1' />
+    <meta property='og:url' content={ props.url || defaultOgUrl } />
+    <meta property='og:title' content={ props.title || '' } />
+  </NextHead>
+);
+
+export default Head;

components/header/index.js

@@ -1,14 +1,19 @@
-import Link from 'next/link';
+import './style.scss';
 
 const Header = () => (
-  <div>
-    <Link href="/">
-      <a title="Homepage">Home</a>
-    </Link>
-    &nbsp; |&nbsp;
-    <Link href="/about">
-      <a title="About Page">About Page</a>
-    </Link>
+  <div className='page-header'>
+    <div className="d-flex">
+      <div className="flex-grow-1 brand">
+        <a href="#">roadmap.sh</a>
+      </div>
+      <div className="nav-links">
+        <a href="#">Roadmaps</a>
+        <a href="#">Articles</a>
+        <a href="#">Journeys</a>
+        <a href="#">FAQs</a>
+        <a href="#" className='signup'>Sign Up</a>
+      </div>
+    </div>
   </div>
 );
 

components/header/style.scss

@@ -0,0 +1,32 @@
+.page-header {
+  padding-top: 25px;
+  font-size: 18px;
+
+  .brand a {
+    background: #101010;
+    color: white;
+    padding: 5px 10px;
+    text-decoration: none;
+    border-radius: 2px;
+  }
+
+  .nav-links {
+    a {
+      padding: 0 10px;
+      text-decoration: none;
+      font-size: 16px;
+      color: #101010;
+    }
+
+    .signup {
+      background: #101010;
+      color: #ffffff;
+      padding: 7px 10px;
+      margin-left: 15px;
+
+      &:hover {
+        background: #2d2d2d;
+      }
+    }
+  }
+}

components/hero-section/index.js

@@ -0,0 +1,16 @@
+import './style.scss';
+
+const HeroSection = () => (
+  <div className='hero-section'>
+    <h1>Roadmaps for Developers</h1>
+    <p>Community driven, roadmaps, articles and resources for developers</p>
+
+    <div className="register-form d-flex">
+      <input type="text" />
+      <a href="#" className="btn btn-primary">Register</a>
+
+    </div>
+  </div>
+);
+
+export default HeroSection;

components/hero-section/style.scss

@@ -0,0 +1,14 @@
+.hero-section {
+  text-align: center;
+  padding: 70px 20px;
+
+  h1 {
+    font-size: 35px;
+    font-weight: 700;
+    margin-bottom: 8px;
+  }
+
+  p {
+    color: #333;
+  }
+}

next.config.js

@@ -1,3 +1,4 @@
 const withSass = require('@zeit/next-sass');
+const withCSS = require('@zeit/next-css');
 
-module.exports = withSass({});
+module.exports = withCSS(withSass());

package.json

@@ -9,9 +9,13 @@
     "start": "next start"
   },
   "dependencies": {
+    "@zeit/next-css": "latest",
     "@zeit/next-sass": "^1.0.1",
+    "autoprefixer": "^9.6.1",
+    "bootstrap": "^4.3.1",
     "next": "^9.0.4",
     "node-sass": "^4.12.0",
+    "postcss-css-variables": "^0.13.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0"
   }

pages/about/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Header from '../components/header';
+import Header from '../../components/header/index';
 
 export default function About() {
   return (

pages/global.scss

@@ -0,0 +1,7 @@
+body {
+  color: #000;
+}
+
+.container {
+  max-width: 1000px;
+}

pages/home.js

@@ -1,10 +0,0 @@
-import Header from '../components/header';
-
-export const Home = (props) => (
-  <div>
-    <Header />
-    <p>Hello Next.js</p>
-  </div>
-);
-
-export default Home;

pages/home/index.js

@@ -0,0 +1,11 @@
+import Header from '../../components/header/index';
+import HeroSection from '../../components/hero-section';
+
+export const Home = (props) => (
+  <div className='container'>
+    <Header />
+    <HeroSection />
+  </div>
+);
+
+export default Home;

pages/index.js

@@ -1,5 +1,8 @@
-import React from 'react';
-import Home from './home';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+import './global.scss';
+
+import Home from './home/index';
 
 const Index = () => (
   <div>

postcss.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
     'postcss-css-variables': {},
+    'autoprefixer': {},
   },
 };

yarn.lock

@@ -953,7 +953,7 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
-"@zeit/next-css@1.0.1":
+"@zeit/next-css@1.0.1", "@zeit/next-css@latest":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@zeit/next-css/-/next-css-1.0.1.tgz#4f784e841e7ca1b21b3468a902e2c1fa95a3e75c"
   integrity sha512-yfHPRy/ne/5SddVClsoy+fpU7e0Cs1gkWA67/wm2uIu+9rznF45yQLxHEt5dPGF3h6IiIh7ZtIgA8VV8YKq87A==
@@ -1214,6 +1214,19 @@ autodll-webpack-plugin@0.4.2:
     webpack-merge "^4.1.0"
     webpack-sources "^1.0.1"
 
+autoprefixer@^9.6.1:
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.6.1.tgz#51967a02d2d2300bb01866c1611ec8348d355a47"
+  integrity sha512-aVo5WxR3VyvyJxcJC3h4FKfwCQvQWb1tSI5VHNibddCVWrcD1NvlxEweg3TSgiPztMnWfjpy2FURKA2kvDE+Tw==
+  dependencies:
+    browserslist "^4.6.3"
+    caniuse-lite "^1.0.30000980"
+    chalk "^2.4.2"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^7.0.17"
+    postcss-value-parser "^4.0.0"
+
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -1348,6 +1361,11 @@ bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
   integrity sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==
 
+bootstrap@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.3.1.tgz#280ca8f610504d99d7b6b4bfc4b68cec601704ac"
+  integrity sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -1436,7 +1454,7 @@ browserify-zlib@^0.2.0:
   dependencies:
     pako "~1.0.5"
 
-browserslist@^4.6.0, browserslist@^4.6.6:
+browserslist@^4.6.0, browserslist@^4.6.3, browserslist@^4.6.6:
   version "4.6.6"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.6.6.tgz#6e4bf467cde520bc9dbdf3747dafa03531cec453"
   integrity sha512-D2Nk3W9JL9Fp/gIcWei8LrERCS+eXu9AM5cfXA8WEZ84lFks+ARnZ0q/R69m2SV3Wjma83QDDPxsNKXUwdIsyA==
@@ -1552,7 +1570,7 @@ camelcase@^3.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
   integrity sha1-MvxLn82vhF/N9+c7uXysImHwqwo=
 
-caniuse-lite@^1.0.30000984:
+caniuse-lite@^1.0.30000980, caniuse-lite@^1.0.30000984:
   version "1.0.30000989"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000989.tgz#b9193e293ccf7e4426c5245134b8f2a56c0ac4b9"
   integrity sha512-vrMcvSuMz16YY6GSVZ0dWDTJP8jqk3iFQ/Aq5iqblPwxSVVZI+zxDyTX0VPqtQsDnfdrBDcsmhgTEOh5R8Lbpw==
@@ -2155,7 +2173,7 @@ escape-html@~1.0.3:
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
 
-escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.3, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
@@ -2236,7 +2254,7 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
     assign-symbols "^1.0.0"
     is-extendable "^1.0.1"
 
-extend@~3.0.2:
+extend@^3.0.1, extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
@@ -3764,6 +3782,11 @@ normalize-path@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
+
 npm-bundled@^1.0.1:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.6.tgz#e7ba9aadcef962bb61248f91721cd932b3fe6bdd"
@@ -3787,6 +3810,11 @@ npm-packlist@^1.1.6:
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
+num2fraction@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
+  integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
+
 number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
@@ -4117,6 +4145,15 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
+postcss-css-variables@^0.13.0:
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/postcss-css-variables/-/postcss-css-variables-0.13.0.tgz#42adcec7e963020801b106b6452d6a3e9c24bc87"
+  integrity sha512-gji53rkQx8UcNHpAPgn+kdRs3ZQuPk2Ebo+HDVMIaU4lo9xt7i46X7rvGJDSwR259V1RlPc6vMQdybgsgKtqKA==
+  dependencies:
+    escape-string-regexp "^1.0.3"
+    extend "^3.0.1"
+    postcss "^6.0.8"
+
 postcss-load-config@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.0.tgz#c84d692b7bb7b41ddced94ee62e8ab31b417b003"
@@ -4171,7 +4208,12 @@ postcss-value-parser@^3.3.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
-postcss@^6.0.1, postcss@^6.0.23:
+postcss-value-parser@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz#482282c09a42706d1fc9a069b73f44ec08391dc9"
+  integrity sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==
+
+postcss@^6.0.1, postcss@^6.0.23, postcss@^6.0.8:
   version "6.0.23"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
   integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
@@ -4180,7 +4222,7 @@ postcss@^6.0.1, postcss@^6.0.23:
     source-map "^0.6.1"
     supports-color "^5.4.0"
 
-postcss@^7.0.0:
+postcss@^7.0.0, postcss@^7.0.17:
   version "7.0.17"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.17.tgz#4da1bdff5322d4a0acaab4d87f3e782436bad31f"
   integrity sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ==