Add vite, vitest and playwright

* Add Video Session vs Token Authentication in 100 Seconds

* Fix JWT Title

.babelrc

@@ -1,13 +0,0 @@
-{
-  "presets": [
-    "next/babel"
-  ],
-  "plugins": [
-    [
-      "styled-components",
-      {
-        "ssr": true
-      }
-    ]
-  ]
-}

.editorconfig

@@ -1,23 +0,0 @@
-# EditorConfig for the node-soap library - head over to editorconfig.org to see if you editor supports this file.
-
-# this is the topmost .editorconfig file
-root = true
-
-[*]
-end_of_line = lf
-insert_final_newline = true
-
-[*.xml]
-insert_final_newline = false
-
-[*.js]
-indent_style = space
-indent_size = 2
-
-[*.json]
-indent_style = space
-indent_size = 2
-
-[{package.json, .travis.yml}]
-indent_style = space
-indent_size = 2

.eslintrc

@@ -0,0 +1,18 @@
+{
+  "extends": [
+    "next",
+    "next/core-web-vitals",
+    "prettier"
+  ],
+  "rules": {
+    "@next/next/no-img-element": [
+      "off"
+    ],
+    "react/display-name": [
+      "off"
+    ],
+    "react/jsx-no-target-blank": [
+      "off"
+    ]
+  }
+}

.github/FUNDING.yml

@@ -1,3 +1,2 @@
 # These are supported funding model platforms
-
 github: kamranahmedse

.github/ISSUE_TEMPLATE.md

@@ -1,36 +0,0 @@
-<!--
-Please do not remove anything written below.
- 
-Fill the details and open the issue. Any issue that 
-doesn't have all of these filled in will be closed, 
-if yours is closed reopen with everything filled in.  
--->
-
-#### What roadmap is this issue about?
-
-- [ ] Frontend Roadmap
-- [ ] Backend Roadmap
-- [ ] DevOps Roadmap
-- [ ] All Roadmaps
-
-#### What is this issue about?
-
-- [ ] Functionality of the website
-- [ ] Discussion for a pull request I would want to open.
-- [ ] Addition of a new item
-- [ ] Removal of some existing item
-- [ ] Changing in arrangement
-- [ ] General suggestion
-- [ ] Sharing an Idea
-- [ ] Something else
-
-#### Please acknowledge the below listed
-
-- [ ] This is not a duplicate issue. I have searched and there is no existing issue for this.
-- [ ] I understand that these roadmaps are highly opinionated. The purpose is to not to include everything out there in these roadmaps but to have everything that is most relevant today comparing to the other options listed.
-- [ ] I have read the [contribution docs](../contributing) before opening this issue.
-
-
-#### Enter the details about the issue here
-
-<!-- Please enter the issue details here -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,19 +0,0 @@
-#### What roadmap does this PR target?
-
-- [ ] Code Change
-- [ ] Frontend Roadmap
-- [ ] Backend Roadmap
-- [ ] DevOps Roadmap
-- [ ] All Roadmaps
-- [ ] Guides
-
-#### Please acknowledge the items listed below
-
-- [ ] I have discussed this contribution and got a go-ahead in an issue before opening this pull request.
-- [ ] This is not a duplicate issue. I have searched and there is no existing issue for this.
-- [ ] I understand that these roadmaps are highly opinionated. The purpose is to not to include everything out there in these roadmaps but to have everything that is most relevant today comparing to the other options listed.
-- [ ] I have read the [contribution docs](../contributing) before opening this PR.
-
-#### Enter the details about the contribution
-
-<!-- Enter the details here -->

.github/sponsors/doppler-logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 3473 1069"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#111;}.cls-3{fill-rule:evenodd;fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="658.73" y1="777.7" x2="341.45" y2="352.06" gradientTransform="matrix(1, 0, 0, -1, 0, 1070)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#33a9ff"/><stop offset="1" stop-color="#1673ff"/></linearGradient></defs><rect class="cls-1" width="3473" height="1069"/><path class="cls-2" d="M1054.06,633.32q4.93.45,11.23.9H1081q52.55,0,77.7-26.5,25.59-26.49,25.59-73.18,0-48.94-24.25-74.09t-76.79-25.14q-7.18,0-14.82.45-5.78,0-11,.51a3.73,3.73,0,0,0-3.33,3.74Zm202.54-98.78Q1256.6,575,1244,605t-35.92,49.84q-22.9,19.75-56.14,29.63t-74.55,9.88q-18.86,0-44-1.79A338.32,338.32,0,0,1,984,686.3V386.41a3.8,3.8,0,0,1,3.13-3.75,386.34,386.34,0,0,1,47.17-5.27q26.49-1.8,45.36-1.8,40,0,72.3,9,32.79,9,56.14,28.29T1244,462.25Q1256.61,492.33,1256.6,534.54Z"/><path class="cls-2" d="M1397.52,534.54q0,22.89,5.39,41.31a103.13,103.13,0,0,0,16.17,31.87,74.66,74.66,0,0,0,26.05,20.21q15.27,7.19,35,7.18,19.3,0,34.58-7.18a69.47,69.47,0,0,0,26-20.21A91.41,91.41,0,0,0,1557,575.85q5.83-18.42,5.84-41.31T1557,493.23q-5.39-18.86-16.17-31.88a67.73,67.73,0,0,0-26-20.65q-15.27-7.18-34.58-7.19-19.77,0-35,7.64a72.5,72.5,0,0,0-26.05,20.65q-10.33,13-16.17,31.88A145.23,145.23,0,0,0,1397.52,534.54Zm237.57,0q0,40-12.12,70.49-11.68,30.09-32.34,50.74a134.89,134.89,0,0,1-49.4,30.53,176.88,176.88,0,0,1-61.07,10.33A174.23,174.23,0,0,1,1420,686.3a140,140,0,0,1-49.4-30.53q-21.11-20.65-33.23-50.74-12.13-30.53-12.13-70.49t12.58-70q12.57-30.53,33.68-51.18a142,142,0,0,1,49.4-31A171.39,171.39,0,0,1,1480.16,372a174.08,174.08,0,0,1,60.18,10.33,136.87,136.87,0,0,1,49.4,31q21.1,20.65,33.23,51.18Q1635.09,494.58,1635.09,534.54Z"/><path class="cls-2" d="M1810.48,375.59q69.62,0,106.88,24.7,37.28,24.24,37.28,79.92,0,56.13-37.72,81.27-37.73,24.69-107.79,24.69H1791a3.83,3.83,0,0,0-3.83,3.83v96.51a3.83,3.83,0,0,1-3.83,3.83h-66.23V386.83a3.81,3.81,0,0,1,3.1-3.75,400.76,400.76,0,0,1,45.4-5.69Q1791.18,375.59,1810.48,375.59Zm4.49,59.72q-7.63,0-15.27.45-5,.3-9.06.62a3.8,3.8,0,0,0-3.51,3.8v86.28h22q36.38,0,54.79-9.88t18.42-36.82q0-13-4.94-21.55a32.47,32.47,0,0,0-13.48-13.47q-8.54-5.39-21.1-7.19A159.75,159.75,0,0,0,1815,435.31Z"/><path class="cls-2" d="M2123.07,375.59q69.61,0,106.89,24.7,37.27,24.24,37.27,79.92,0,56.13-37.72,81.27-37.73,24.69-107.78,24.69h-18.18a3.83,3.83,0,0,0-3.83,3.83v96.51a3.83,3.83,0,0,1-3.83,3.83h-66.23V386.82a3.8,3.8,0,0,1,3.1-3.74,400.76,400.76,0,0,1,45.4-5.69Q2103.77,375.59,2123.07,375.59Zm4.49,59.72q-7.64,0-15.27.45-5,.3-9.06.62a3.81,3.81,0,0,0-3.51,3.8v86.28h22q36.38,0,54.78-9.88t18.42-36.82q0-13-4.94-21.55a32.47,32.47,0,0,0-13.48-13.47q-8.52-5.39-21.1-7.19A159.75,159.75,0,0,0,2127.56,435.31Z"/><path class="cls-2" d="M2540.5,630.17a1.29,1.29,0,0,1,1.28,1.28v57.62a1.28,1.28,0,0,1-1.28,1.27H2342.25V401.41a3.83,3.83,0,0,1,2.81-3.69l67.25-18.54v251Z"/><path class="cls-2" d="M2618.88,690.34V383a3.84,3.84,0,0,1,3.83-3.83h215a1.28,1.28,0,0,1,1.23,1.64l-16.44,56.26a1.26,1.26,0,0,1-1.22.92H2692.77a3.83,3.83,0,0,0-3.83,3.83v57.24H2803.1a1.27,1.27,0,0,1,1.23,1.63l-16,54.92a1.28,1.28,0,0,1-1.22.92h-94.34a3.82,3.82,0,0,0-3.83,3.83v71.15h154.72a1.28,1.28,0,0,1,1.23,1.63l-16.34,56.27a1.27,1.27,0,0,1-1.22.92Z"/><path class="cls-2" d="M3006,375.59q70.07,0,107.34,25.15,37.28,24.69,37.27,77.22,0,32.79-15.27,53.44-14.82,20.19-43.11,31.87,9.43,11.68,19.76,26.94,10.34,14.82,20.21,31.43,10.32,16.17,19.76,34.13,8.93,16.58,16.65,32.75a1.28,1.28,0,0,1-1.16,1.82H3091.6a1.27,1.27,0,0,1-1.11-.65q-8.37-15-17.15-30.33-8.53-15.72-18-30.53-9-14.82-18-27.84a286.92,286.92,0,0,0-18-24.25h-30.76a3.83,3.83,0,0,0-3.82,3.83V686.51a3.83,3.83,0,0,1-3.83,3.83h-66.23V386.82a3.8,3.8,0,0,1,3.09-3.74,400,400,0,0,1,44.06-5.69Q2986.67,375.59,3006,375.59Zm4.05,59.72q-7.64,0-13.93.45-4,.3-7.71.61a3.82,3.82,0,0,0-3.51,3.81v80.89h19.76q39.51,0,56.58-9.88t17.07-33.67q0-22.9-17.52-32.33Q3043.71,435.31,3010,435.31Z"/><path class="cls-3" d="M307.26,310a1.79,1.79,0,0,0-1.5,2.75l89.7,140.38a14.19,14.19,0,0,0,12,6.58H528.38c39.92,0,64.87,35.28,64.72,74.79s-26.74,74.44-64.72,74.44H404.77a4.71,4.71,0,0,0-4.71,4.75V754.25a4.72,4.72,0,0,0,4.72,4.75H560.62C689.12,759,753,637.1,753.09,534.5S690,310,560.62,310ZM367,609.29H336.16C318.4,609.29,304,626,304,646.71V757.66a1.28,1.28,0,0,0,1.28,1.28h30.88c17.76,0,32.15-16.75,32.15-37.41v-111A1.27,1.27,0,0,0,367,609.29Z"/></svg>

.github/sponsors/oss-logo.svg

@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 646.6 105.7" style="enable-background:new 0 0 646.6 105.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#104366;}
+	.st1{fill:#4086C6;}
+</style>
+<g>
+	<path class="st0" d="M21.1,79.8c-6.6-3.5-11.7-8.4-15.5-14.6C1.9,59,0,52,0,44.3c0-7.8,1.9-14.7,5.6-20.9
+		c3.7-6.2,8.9-11.1,15.5-14.6c6.6-3.5,14-5.3,22.2-5.3c8.2,0,15.6,1.8,22.1,5.3c6.6,3.5,11.7,8.4,15.5,14.6
+		c3.8,6.2,5.6,13.2,5.6,20.9c0,7.8-1.9,14.7-5.6,20.9c-3.8,6.2-8.9,11.1-15.5,14.6c-6.5,3.5-13.9,5.3-22.1,5.3
+		C35,85.1,27.6,83.4,21.1,79.8z M55.9,66.3c3.8-2.1,6.7-5.1,8.9-9c2.1-3.8,3.2-8.2,3.2-13.1c0-4.9-1.1-9.3-3.2-13.1
+		c-2.1-3.8-5.1-6.8-8.9-9c-3.8-2.1-8-3.2-12.6-3.2c-4.7,0-8.9,1.1-12.6,3.2s-6.7,5.1-8.9,9c-2.1,3.8-3.2,8.2-3.2,13.1
+		c0,4.9,1.1,9.3,3.2,13.1c2.1,3.8,5.1,6.8,8.9,9c3.8,2.1,8,3.2,12.6,3.2C47.9,69.5,52.1,68.5,55.9,66.3z"/>
+	<path class="st0" d="M108.1,82.6c-5.8-1.7-10.5-3.9-14.1-6.6l6.2-13.8c3.4,2.5,7.4,4.5,12.1,6c4.7,1.5,9.3,2.3,14,2.3
+		c5.2,0,9-0.8,11.5-2.3c2.5-1.5,3.7-3.6,3.7-6.2c0-1.9-0.7-3.4-2.2-4.7c-1.5-1.2-3.3-2.2-5.6-3c-2.3-0.8-5.4-1.6-9.3-2.5
+		c-6-1.4-11-2.9-14.8-4.3c-3.8-1.4-7.1-3.7-9.9-6.9c-2.7-3.2-4.1-7.4-4.1-12.6c0-4.6,1.2-8.7,3.7-12.5c2.5-3.7,6.2-6.7,11.2-8.9
+		c5-2.2,11.1-3.3,18.3-3.3c5,0,10,0.6,14.8,1.8c4.8,1.2,9,2.9,12.6,5.2l-5.6,13.9c-7.3-4.1-14.6-6.2-21.9-6.2
+		c-5.1,0-8.9,0.8-11.3,2.5c-2.4,1.7-3.7,3.8-3.7,6.5c0,2.7,1.4,4.7,4.2,6c2.8,1.3,7.1,2.6,12.9,3.9c6,1.4,11,2.9,14.8,4.3
+		c3.8,1.4,7.1,3.7,9.9,6.8c2.7,3.1,4.1,7.3,4.1,12.5c0,4.5-1.3,8.6-3.8,12.4c-2.5,3.7-6.3,6.7-11.3,8.9c-5,2.2-11.2,3.3-18.4,3.3
+		C120,85.1,113.9,84.3,108.1,82.6z"/>
+	<path class="st0" d="M180.1,82.6c-5.8-1.7-10.5-3.9-14.1-6.6l6.2-13.8c3.4,2.5,7.4,4.5,12.1,6c4.7,1.5,9.3,2.3,14,2.3
+		c5.2,0,9-0.8,11.5-2.3c2.5-1.5,3.7-3.6,3.7-6.2c0-1.9-0.7-3.4-2.2-4.7c-1.5-1.2-3.3-2.2-5.6-3c-2.3-0.8-5.4-1.6-9.3-2.5
+		c-6-1.4-10.9-2.9-14.8-4.3c-3.8-1.4-7.1-3.7-9.9-6.9c-2.7-3.2-4.1-7.4-4.1-12.6c0-4.6,1.2-8.7,3.7-12.5c2.5-3.7,6.2-6.7,11.2-8.9
+		s11.1-3.3,18.3-3.3c5,0,10,0.6,14.8,1.8c4.8,1.2,9,2.9,12.6,5.2l-5.6,13.9c-7.3-4.1-14.6-6.2-21.9-6.2c-5.1,0-8.9,0.8-11.3,2.5
+		c-2.4,1.7-3.7,3.8-3.7,6.5c0,2.7,1.4,4.7,4.2,6c2.8,1.3,7.1,2.6,12.9,3.9c6,1.4,10.9,2.9,14.8,4.3s7.1,3.7,9.9,6.8
+		c2.7,3.1,4.1,7.3,4.1,12.5c0,4.5-1.3,8.6-3.8,12.4c-2.5,3.7-6.3,6.7-11.3,8.9c-5,2.2-11.2,3.3-18.4,3.3
+		C192,85.1,186,84.3,180.1,82.6z"/>
+	<path class="st1" d="M293.2,79.1c-6.2-3.5-11.1-8.2-14.7-14.3c-3.6-6.1-5.4-12.9-5.4-20.5c0-7.6,1.8-14.5,5.4-20.5
+		c3.6-6.1,8.5-10.9,14.7-14.3c6.2-3.5,13.2-5.2,20.9-5.2c5.7,0,11,0.9,15.8,2.8c4.8,1.8,8.9,4.6,12.3,8.2l-3.6,3.7
+		c-6.3-6.2-14.4-9.4-24.3-9.4c-6.6,0-12.6,1.5-18.1,4.5c-5.4,3-9.7,7.2-12.8,12.5s-4.6,11.2-4.6,17.8s1.5,12.5,4.6,17.8
+		c3.1,5.3,7.3,9.5,12.8,12.5c5.4,3,11.4,4.5,18.1,4.5c9.8,0,17.9-3.2,24.3-9.5l3.6,3.7c-3.4,3.6-7.5,6.4-12.4,8.2
+		c-4.9,1.9-10.1,2.8-15.7,2.8C306.3,84.3,299.4,82.6,293.2,79.1z"/>
+	<path class="st1" d="M395.4,30c3.9,3.7,5.9,9.2,5.9,16.4v37.4h-5.4V73.3c-1.9,3.5-4.6,6.2-8.2,8.1c-3.6,1.9-7.9,2.9-13,2.9
+		c-6.5,0-11.7-1.5-15.5-4.6c-3.8-3.1-5.7-7.1-5.7-12.2c0-4.9,1.8-8.9,5.2-11.9c3.5-3,9.1-4.6,16.8-4.6h20.2v-4.7
+		c0-5.5-1.5-9.7-4.5-12.5c-3-2.9-7.3-4.3-13-4.3c-3.9,0-7.7,0.7-11.2,2c-3.6,1.4-6.6,3.2-9.1,5.4l-2.8-4.1c2.9-2.6,6.5-4.7,10.6-6.2
+		c4.1-1.5,8.5-2.2,13-2.2C385.9,24.4,391.5,26.3,395.4,30z M387.9,76.2c3.4-2.3,6-5.5,7.7-9.8V55.3h-20.1c-5.8,0-10,1.1-12.6,3.2
+		c-2.6,2.1-3.9,5-3.9,8.7c0,3.8,1.4,6.9,4.3,9.1c2.9,2.2,6.9,3.3,12.1,3.3C380.3,79.6,384.5,78.5,387.9,76.2z"/>
+	<path class="st1" d="M469,28.2c4.4,2.6,7.9,6.1,10.4,10.6c2.5,4.5,3.8,9.7,3.8,15.5c0,5.8-1.3,11-3.8,15.5
+		c-2.5,4.6-6,8.1-10.4,10.6c-4.4,2.5-9.4,3.8-14.9,3.8c-5.2,0-9.9-1.2-14.1-3.7c-4.2-2.4-7.5-5.9-9.8-10.2v35.3h-5.6V24.8h5.4v13.9
+		c2.3-4.5,5.6-8,9.9-10.6c4.2-2.5,9-3.8,14.3-3.8C459.6,24.4,464.6,25.7,469,28.2z M465.9,76c3.6-2.1,6.5-5,8.5-8.8
+		c2.1-3.8,3.1-8.1,3.1-12.9c0-4.8-1-9.1-3.1-12.9c-2.1-3.8-4.9-6.7-8.5-8.8c-3.6-2.1-7.7-3.2-12.2-3.2c-4.5,0-8.6,1.1-12.1,3.2
+		c-3.6,2.1-6.4,5-8.5,8.8c-2.1,3.8-3.1,8.1-3.1,12.9c0,4.8,1,9.1,3.1,12.9c2.1,3.8,4.9,6.7,8.5,8.8c3.6,2.1,7.6,3.2,12.1,3.2
+		C458.3,79.1,462.3,78.1,465.9,76z"/>
+	<path class="st1" d="M500.3,9.2c-0.9-0.9-1.4-1.9-1.4-3.2c0-1.3,0.5-2.4,1.4-3.3c0.9-0.9,2-1.4,3.3-1.4c1.3,0,2.4,0.4,3.3,1.3
+		c0.9,0.9,1.4,1.9,1.4,3.2c0,1.3-0.5,2.4-1.4,3.3c-0.9,0.9-2,1.4-3.3,1.4C502.3,10.5,501.2,10.1,500.3,9.2z M500.7,24.8h5.6v58.9
+		h-5.6V24.8z"/>
+	<path class="st1" d="M559.4,80c-1.4,1.4-3.2,2.4-5.4,3.1c-2.1,0.7-4.4,1.1-6.7,1.1c-5.1,0-9.1-1.4-11.9-4.2
+		c-2.8-2.8-4.2-6.8-4.2-11.8V29.7h-10.8v-4.9h10.8V12h5.6v12.9h18.7v4.9H537v37.9c0,3.8,0.9,6.8,2.8,8.8c1.8,2,4.6,3,8.2,3
+		c3.7,0,6.7-1.1,9.1-3.3L559.4,80z"/>
+	<path class="st1" d="M611.8,30c3.9,3.7,5.9,9.2,5.9,16.4v37.4h-5.4V73.3c-1.9,3.5-4.6,6.2-8.2,8.1c-3.6,1.9-7.9,2.9-13,2.9
+		c-6.5,0-11.7-1.5-15.5-4.6c-3.8-3.1-5.7-7.1-5.7-12.2c0-4.9,1.8-8.9,5.2-11.9c3.5-3,9.1-4.6,16.8-4.6H612v-4.7
+		c0-5.5-1.5-9.7-4.5-12.5c-3-2.9-7.3-4.3-13-4.3c-3.9,0-7.7,0.7-11.2,2c-3.6,1.4-6.6,3.2-9.1,5.4l-2.8-4.1c2.9-2.6,6.5-4.7,10.6-6.2
+		c4.1-1.5,8.5-2.2,13-2.2C602.3,24.4,607.9,26.3,611.8,30z M604.3,76.2c3.4-2.3,6-5.5,7.7-9.8V55.3h-20.1c-5.8,0-10,1.1-12.6,3.2
+		c-2.6,2.1-3.9,5-3.9,8.7c0,3.8,1.4,6.9,4.3,9.1c2.9,2.2,6.9,3.3,12.1,3.3C596.7,79.6,600.9,78.5,604.3,76.2z"/>
+	<path class="st1" d="M640.9,0h5.6v83.8h-5.6V0z"/>
+</g>
+</svg>

.github/sponsors/workos-logo-white-bg.svg

@@ -0,0 +1,11 @@
+<svg width="1354" height="420" viewBox="0 0 1354 420" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1354" height="420" rx="20" fill="white"/>
+<path d="M434.751 133.122H466.637L489.595 227.729C493.852 245.585 494.697 256.219 494.697 256.219H495.128C495.128 256.219 496.61 245.808 500.867 227.729L522.757 133.122H558.9L582.066 227.729C586.53 246.223 587.598 256.219 587.598 256.219H588.236C588.236 256.219 588.666 246.223 592.907 227.729L615.02 133.122H646.907L606.523 288.313H571.017L546.576 194.344C541.474 173.936 541.044 164.801 541.044 164.801H540.614C540.614 164.801 540.183 173.936 535.512 194.344L512.553 288.313H475.996L434.751 133.122Z" fill="black"/>
+<path d="M641.583 231.934C641.583 196.428 664.541 173.47 699.202 173.47C733.639 173.47 756.597 196.428 756.597 231.934C756.597 267.647 733.639 290.828 699.202 290.828C664.557 290.812 641.583 267.647 641.583 231.934ZM726.832 231.934C726.832 208.976 715.783 195.998 699.202 195.998C681.346 195.998 671.349 210.458 671.349 231.934C671.349 255.323 682.398 268.284 699.202 268.284C717.058 268.284 726.832 253.824 726.832 231.934Z" fill="black"/>
+<path d="M770.836 175.21H799.103V196.048H799.741C804.635 185.207 816.322 174.365 836.299 174.365C839.695 174.365 841.831 174.796 843.314 175.21V203.478H842.469C842.469 203.478 839.918 202.633 832.903 202.633C811.013 202.633 799.103 215.594 799.103 239.828V288.295H770.836V175.21Z" fill="black"/>
+<path d="M856.5 133.122H884.767V182.865C884.767 212.2 884.336 217.509 884.336 217.509H884.767L926.857 175.212H962.139L912.843 224.11L970.031 288.313H936.646L895.401 241.536L884.767 251.946V288.297H856.5V133.122Z" fill="black"/>
+<path d="M970.444 211.285C970.444 163.455 1000.21 131.569 1044.85 131.569C1089.49 131.569 1119.26 163.455 1119.26 211.285C1119.26 259.114 1089.49 291.001 1044.85 291.001C1000.21 291.001 970.444 259.114 970.444 211.285ZM1088.42 211.285C1088.42 178.761 1071 156.855 1044.84 156.855C1018.67 156.855 1001.26 178.761 1001.26 211.285C1001.26 243.809 1018.69 265.715 1044.84 265.715C1070.98 265.715 1088.42 243.809 1088.42 211.285Z" fill="black"/>
+<path d="M1130.08 236.656H1162.4C1162.4 254.943 1174.95 265.146 1194.08 265.146C1210.23 265.146 1221.29 257.063 1221.29 245.584C1221.29 232.622 1212.79 229.21 1185.79 223.901C1161.12 219.007 1134.98 210.716 1134.98 178.399C1134.98 151.408 1157.93 131 1193.01 131C1229.57 131 1252.11 150.132 1252.11 179.037H1219.79C1219.79 165.007 1208.95 156.286 1193.01 156.286C1176.86 156.286 1166.86 164.146 1166.86 175.625C1166.86 187.742 1173.88 192.413 1195.56 196.878C1227.65 203.685 1254.02 207.288 1254.02 243.001C1254.02 271.3 1229.36 290.432 1193.01 290.432C1156.02 290.432 1130.08 268.957 1130.08 236.656Z" fill="black"/>
+<path d="M100 210C100 214.824 101.269 219.647 103.723 223.793L148.231 300.878C152.8 308.747 159.739 315.178 168.369 318.055C185.377 323.724 202.977 316.447 211.354 301.893L222.1 283.278L179.708 210L224.47 132.408L235.216 113.792C238.431 108.208 242.747 103.638 247.824 100H243.17H178.777C166.677 100 155.508 106.431 149.5 116.923L103.723 196.208C101.269 200.354 100 205.177 100 210Z" fill="#6363F1"/>
+<path d="M353.847 210C353.847 205.177 352.578 200.353 350.124 196.207L305.024 118.107C296.647 103.638 279.047 96.3608 262.039 101.945C253.409 104.822 246.47 111.253 241.901 119.122L231.747 136.638L274.139 210L229.378 287.592L218.632 306.208C215.416 311.708 211.101 316.362 206.024 320H210.678H275.07C287.17 320 298.34 313.569 304.347 303.077L350.124 223.792C352.578 219.646 353.847 214.823 353.847 210Z" fill="#6363F1"/>
+</svg>

.github/workflows/deploy.yml

@@ -1,10 +1,11 @@
-name: Deployment to GitHub Pages
+name: Deployment to GH Pages
 on:
   push:
     branches: [ master ]
 env:
   ROADMAP_GA_SECRET: ${{ secrets.GA_SECRET }}
   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+  PAT: ${{ secrets.PAT }}
   CI: true
   NEXT_TELEMETRY_DISABLED: 1
 jobs:
@@ -12,18 +13,19 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v2
+      with:
+        persist-credentials: false
     - uses: actions/setup-node@v1
       with:
-        node-version: 12
+        node-version: 16
     - name: Setup Environment
       run: |
-        npm install -g yarn
-        yarn install
-    - name: Generate meta and builld
+        npm install
+    - name: Generate meta and build
       run: |
-        yarn meta
-        yarn build
-    - name: Deploy to GitHub Pages
+        npm run meta
+        npm run build
+    - name: Deploy to GH Pages
       run: |
         git config user.email "kamranahmed.se@gmail.com"
         git config user.name "Kamran Ahmed"

.gitignore

@@ -1,14 +1,36 @@
-_*
-Thumbs.db
-.DS_Store
-.idea
-.next
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 out
-.env
-build
-node_modules
-yarn-error.log
-*.sublime-project
-*.sublime-workspace
-config/*.json
-!config/dev.json
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.idea
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2
+}

code_of_conduct.md

@@ -73,4 +73,4 @@ available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.ht
 [homepage]: https://www.contributor-covenant.org
 
 For answers to common questions about this code of conduct, see
-https://www.contributor-covenant.org/faq
+https://www.contributor-covenant.org/faq

components/about-header/index.js

@@ -1,22 +0,0 @@
-import { AboutHeaderWrap } from './style';
-import siteConfig from "content/site";
-
-const AboutHeader = () => (
-  <AboutHeaderWrap>
-    <div className="container container-small">
-      <div className="author-info">
-        <img className='author-img d-none d-sm-none d-md-block d-lg-block d-xl-block' src="/kamran.jpeg" />
-        <div className="author-msg">
-          <h1>Hello, I'm Kamran Ahmed.</h1>
-          <p>I created <span className='flow-black'>roadmap.sh</span> to help developers find their path if they are confused and help them grow in their career.</p>
-          <div className="author-links">
-            <a href={`https://twitter.com/${siteConfig.twitter}`} target="_blank">@kamranahmedse</a>
-            <a href="mailto:kamran@roadmap.sh">kamran@roadmap.sh</a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </AboutHeaderWrap>
-);
-
-export default AboutHeader;

components/about-header/style.js

@@ -1,49 +0,0 @@
-import styled from 'styled-components';
-
-export const AboutHeaderWrap = styled.div`
-  text-align: left;
-  padding: 70px 0;
-  margin: 0 auto;
-  
-  .author-info {
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-  }
-  
-  h1 {
-    font-weight: 700;
-  }
-  
-  p {
-    font-size: 20px;
-    color: #333;
-    font-weight: 400;
-    margin-bottom: 0;
-    line-height: 35px;
-  }
-  
-  a {
-    font-weight: 700;
-    color: #000;
-  }
-  
-  .author-img {
-    height: 160px;
-    margin-right: 25px;
-    margin-top: 8px;
-    border-radius: 9px;
-  }
-  
-  .author-links a {
-    display: inline-block;
-    margin-right: 5px;
-    background: #2d2d2d;
-    color: white;
-    padding: 5px 10px;
-    font-weight: 500;
-    margin-top: 12px;
-    border-radius: 5px;
-    text-decoration: none;
-  }
-`;

components/badges/index.js

@@ -1,54 +0,0 @@
-import styled from 'styled-components';
-
-export const BadgesList = styled.p`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 0;
-`;
-
-export const PrimaryBadge = styled.span`
-  font-size: 11px;
-  font-weight: 600;
-  background: #2929ff;
-  color: white;
-  padding: 2px 8px;
-  border-radius: 4px;
-  text-transform: uppercase;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: 10px;
-  
-  svg {
-    height: 11px !important;
-    margin-right: 5px;
-    
-    &.fa-clock {
-      height: 10px !important;
-    }
-  }
-`;
-
-export const SecondaryBadge = styled(PrimaryBadge)`
-  background: #696969;
-  color: white;
-`;
-
-export const InfoBadge = styled(PrimaryBadge)`
-  background: #039640;
-  color: white;
-`;
-
-export const DarkBadge = styled(PrimaryBadge)`
-  background: #101010;
-  color: white;
-`;
-
-export const BadgeLink = styled.a`
-  text-decoration: none;
-  
-  &:hover {
-    text-decoration:none;
-  }
-`;

components/content-page-header.tsx

@@ -0,0 +1,60 @@
+import { Box, Container, Flex, Heading, Image, Link, Text } from '@chakra-ui/react';
+import React from 'react';
+
+type ContentPageHeaderProps = {
+  formattedDate: string;
+  title: string;
+  subtitle: string;
+  author?: {
+    name: string;
+    twitter: string;
+    picture: string;
+  },
+  subLink?: {
+    text: string;
+    url: string;
+  }
+};
+
+export function ContentPageHeader(props: ContentPageHeaderProps) {
+  const { title, subtitle, author = null, formattedDate, subLink = null } = props;
+
+  return (
+    <Box pt={['35px', '35px', '70px']} pb={['35px', '35px', '55px']} borderBottomWidth={1} mb='30px'>
+      <Container maxW='container.md' position='relative' textAlign={['left', 'left', 'center']}>
+        <Flex alignItems='center' justifyContent={['flex-start', 'flex-start', 'center']}
+              fontSize={['12px', '12px', '14px']}>
+
+          {author?.name && (
+            <>
+              <Link
+                d={['none', 'flex', 'flex']}
+                target='_blank'
+                href={`https://twitter.com/${author.twitter}`}
+                alignItems='center'
+                fontWeight={600}
+                color='gray.500'
+              >
+                <Image alt={''} rounded={'full'} mr='7px' w='22px' src={author.picture} />
+                {author.name}
+              </Link>
+              <Text d={['none', 'inline', 'inline']} mx='7px' color='gray.500' as='span'>&middot;</Text>
+            </>
+          )}
+
+          <Text color='gray.500' as='span'>{formattedDate}</Text>
+          {subLink?.text && (
+            <>
+              <Text d={['none', 'none', 'inline']} mx='7px' color='gray.500' as='span'>&middot;</Text>
+              <Link d={['none', 'none', 'inline']} color='blue.500' fontWeight={500}
+                    href={subLink.url} target={'_blank'}>{subLink.text}</Link>
+            </>
+          )}
+        </Flex>
+        <Heading as='h1' color='black' fontSize={['30px', '30px', '45px']} lineHeight={['40px', '40px', '53px']}
+                 fontWeight={700} my={['5px', '5px', '10px']}>{title}</Heading>
+        <Text fontSize={['14px', '14px', '16px']} color='gray.700'>{subtitle}</Text>
+      </Container>
+    </Box>
+  );
+}

components/custom-ad.tsx

@@ -0,0 +1,68 @@
+import { Box, Flex, Heading, Image, Link } from '@chakra-ui/react';
+import { event } from '../lib/gtag';
+
+function getPageSlug() {
+  const pathname = (typeof window !== 'undefined' ? window : {} as any)?.location?.pathname || '';
+
+  return pathname?.replace(/\//g, '');
+}
+
+export const CustomAd = () => {
+  const slug = getPageSlug();
+  if (slug !== 'devops') {
+    return null;
+  }
+
+  return (
+    <Link
+      href='https://thenewstack.io/ebooks/devops/cloud-native-devops-2019/?utm_source=Roadmap.sh&utm_medium=Banner&utm_campaign=Roadmap+DevOps+Ebook'
+      id='custom-ad'
+      pos='fixed'
+      bottom='15px'
+      right='20px'
+      zIndex={999}
+      display='flex'
+      maxWidth='330px'
+      bg='white'
+      boxShadow='0 1px 4px 1px hsla(0, 0%, 0%, .1)'
+      _hover={{ textDecoration: 'none' }}
+      rel="noopener sponsored"
+      target={'_blank'}
+      onClick={() => {
+        event({
+          category: 'SponsorClick',
+          action: `TNS EBook Redirect`,
+          label: `Clicked TNS EBook Link`
+        });
+      }}
+    >
+      <Image
+        src='https://i.imgur.com/fEKq19S.png'
+        alt='Custom Logo'
+        height={['100px', '100px', '100px', 'auto']}
+        width='130'
+        style={{ maxWidth: '130px', border: 'none' }}
+      />
+      <Flex as='span' flexDirection='column' justifyContent='space-between'>
+        <Box as='span' p='10px'>
+          <Heading as='span' fontSize='14px' mb='5px' display='block'>Free DevOps eBook</Heading>
+          <Box display='block' as='span' fontSize='13px' lineHeight={1.5} fontWeight={500} color='gray.500'>
+            Learn all about doing DevOps the Cloud Native way with this free ebook from our partner, The New Stack
+          </Box>
+        </Box>
+        <Box as='span'
+             textAlign='center'
+             fontWeight={600}
+             fontSize='9px'
+             letterSpacing='0.5px'
+             textTransform='uppercase'
+             padding='5px 10px'
+             display={'block'}
+             background='repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4)'
+        >
+          Partner Content
+        </Box>
+      </Flex>
+    </Link>
+  );
+};

components/detailed-roadmap/index.js

@@ -1,133 +0,0 @@
-import { useState } from 'react';
-import classNames from 'classnames';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faFacebookSquare, faTwitterSquare, faRedditSquare, faGithubSquare } from '@fortawesome/free-brands-svg-icons'
-import {
-  PageHeader,
-  RoadmapMeta,
-  ShareRoadmap,
-  Sidebar,
-  Summary,
-  SummaryContainer,
-  MobileNavHeader,
-  SidebarButton,
-  MobileSidebar,
-  MobileSidebarWrap,
-  DesktopSidebarWrap,
-  PageTitle,
-  PageDetail
-} from './style';
-import { faBars } from '@fortawesome/free-solid-svg-icons'
-import { getFacebookShareUrl } from 'lib/url';
-import { ShareIcon } from 'components/share-icon';
-import { getRedditShareUrl, getTwitterShareUrl } from 'lib/url';
-import siteConfig from "content/site";
-import MdRenderer from 'components/md-renderer';
-
-const DetailedRoadmap = ({ roadmap }) => {
-  const [menuActive, setMenuState] = useState(false);
-  const {
-    sidebar = {},
-    page: currentPage = {},
-    author = {}
-  } = roadmap;
-
-  const roadmapPages = Object.keys(sidebar || {}).map((groupTitle, groupCounter) => {
-    if (groupTitle.startsWith('_')) {
-      return;
-    }
-
-    // @todo remove it after completing the frontend roadmap
-    const isInProgress = groupCounter !== 0;
-
-    return (
-      <div className={`links-group ${isInProgress ? 'in-progress' : ''}`} key={groupTitle}>
-        <h3>
-          { groupTitle }
-          { isInProgress && <span className='badge badge-warning progress-badge'>In Progress</span> }
-        </h3>
-        <ul>
-          { sidebar[groupTitle].map(page => {
-            const isActivePage = page.url === currentPage.url;
-            // e.g. /frontend should mark `/frontend/landscape` as active
-            const isSummaryPage = page.url === `${currentPage.url}/summary`;
-
-            return (
-              <li className={classNames({ active: isActivePage || isSummaryPage })} key={page.url}>
-                <a href={ page.url }>
-                  <span className="bullet"></span>
-                  { page.title }
-                </a>
-              </li>
-            );
-          }) }
-        </ul>
-      </div>
-    );
-  });
-
-  const filePath = currentPage.path.replace(/^\//, '');
-  const RoadmapContent = require(`../../content/${filePath}`).default;
-
-  return (
-    <SummaryContainer>
-      <PageHeader className="border-top border-bottom text-center text-md-left">
-        <div className="container d-flex align-items-center flex-column flex-md-row">
-          <RoadmapMeta>
-            <h3>{ roadmap.title }</h3>
-            <p>
-              Roadmap contributed by <a href={ author.url } target="_blank">{ author.name }</a>
-              { roadmap.contributorsCount > 1 && ` and <a href="${roadmap.contributorsUrl}">${roadmap.contributorsCount} others</a>`}
-            </p>
-          </RoadmapMeta>
-          <ShareRoadmap className="mt-2 mt-md-0">
-            <ShareIcon href={ siteConfig.url.repo } target="_blank">
-              <FontAwesomeIcon icon={ faGithubSquare } />
-            </ShareIcon>
-            <ShareIcon href={ getFacebookShareUrl({ text: roadmap.title, url: roadmap.url }) } target="_blank">
-              <FontAwesomeIcon icon={ faFacebookSquare } />
-            </ShareIcon>
-            <ShareIcon href={ getTwitterShareUrl({ text: roadmap.title, url: roadmap.url }) } target="_blank">
-              <FontAwesomeIcon icon={ faTwitterSquare } />
-            </ShareIcon>
-            <ShareIcon href={ getRedditShareUrl({ text: roadmap.title, url: roadmap.url }) } target="_blank">
-              <FontAwesomeIcon icon={ faRedditSquare } />
-            </ShareIcon>
-          </ShareRoadmap>
-        </div>
-      </PageHeader>
-
-      <MobileNavHeader className="border-bottom d-block d-md-none">
-        <div className="container">
-          <SidebarButton onClick={() => setMenuState((prevMenuActive) => !prevMenuActive)}>
-            <FontAwesomeIcon icon={ faBars } />
-            { currentPage.title }
-          </SidebarButton>
-        </div>
-        <MobileSidebarWrap className={classNames({ visible: menuActive })}>
-          <div className="container">
-            <MobileSidebar>
-              { roadmapPages }
-            </MobileSidebar>
-          </div>
-        </MobileSidebarWrap>
-      </MobileNavHeader>
-
-      <Summary className="container">
-        <DesktopSidebarWrap className="d-none d-md-block">
-          <Sidebar>
-            { roadmapPages }
-          </Sidebar>
-        </DesktopSidebarWrap>
-        <PageDetail>
-          <PageTitle>{ currentPage.title }</PageTitle>
-          <MdRenderer>
-            <RoadmapContent />
-          </MdRenderer>
-        </PageDetail>
-      </Summary>
-    </SummaryContainer>
-  )
-};
-
-export default DetailedRoadmap;

components/detailed-roadmap/style.js

@@ -1,199 +0,0 @@
-import styled from 'styled-components';
-
-export const SummaryContainer = styled.div``;
-
-export const Summary = styled.div`
-  text-align: left;
-  min-height: 400px;
-  display: flex;
-
-  .container {
-    position: relative;
-  }
-`;
-
-export const PageHeader = styled.div`
-  padding-top: 20px;
-  padding-bottom: 20px;
-
-  h3 {
-    margin-bottom: 4px;
-    font-weight: 600;
-    font-size: 21px;
-  }
-
-  p {
-    margin-bottom: 0;
-    font-size: 14px;
-    color: #696969;
-    
-    a {
-      color: #101010;
-    }
-  }
-`;
-
-export const RoadmapMeta = styled.div`
-  flex: 1;
-`;
-
-export const ShareRoadmap = styled.div`
-  display: flex;
-  align-items: center;
-
-  a {
-    margin-bottom: 0;
-    & + a {
-      margin-left: 5px;
-    }
-  }
-`;
-
-export const MobileNavHeader = styled.div`
-  padding: 10px 0;
-  display: flex;
-  align-items: center;
-  position: relative;
-`;
-
-export const SidebarButton = styled.button`
-  background: transparent;
-  border: none !important;
-  box-shadow: none !important;
-  outline: none !important;
-  -webkit-appearance: none;
-  display: flex;
-  align-items: center;
-  
-  svg {
-    margin-right: 10px;
-  }
-`;
-
-export const PageDetail = styled.div`
-  padding: 25px 0 100px;
-`;
-
-export const PageTitle = styled.h1`
-  font-size: 40px;
-  font-weight: 700;
-`;
-
-export const Sidebar = styled.div`
-  padding-bottom: 150px;
-
-  ul {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-  }
-  
-  .bullet {
-    display: inline-block;
-    margin-right: 7px;
-    width: 7px;
-    height: 7px;
-    min-width: 7px;
-    border-radius: 100%;
-    background: #efefef;
-    transform: translateX(-4px);
-    transition: background 0.5s ease;
-  }
-
-  
-  .links-group {
-    padding: 30px 0 10px;
-    width: 260px;
-
-    h3 {
-      font-size: 12px;
-      font-weight: 600;
-      text-transform: uppercase;
-      padding-left: 20px;
-    }
-  }
-  
-  .progress-badge {
-    position: relative;
-    top: -2px;
-    margin-left: 5px;
-  }
-  
-  .links-group.in-progress {
-    opacity: 0.3;  
-  }
-
-  .links-group li {
-    list-style: none;
-    margin: 7px 0;
-
-    a {
-      font-size: 14px;
-      font-weight: normal;
-      color: #696969;
-    }
-    
-    .bullet {
-      display: inline-block;
-      margin-right: 12px;
-      width: 7px;
-      height: 7px;
-      min-width: 7px;
-      border-radius: 100%;
-      background: #efefef;
-      transform: translateX(-4px);
-      transition: background 0.5s ease;
-    }
-    
-    &.active a {
-      color: #101010;
-    }
-    
-    &.active .bullet {
-      background: #101010;
-    }
-  }
-`;
-
-export const DesktopSidebarWrap = styled.div`
-  border-left: 1px solid #efefef;
-  
-  ${Sidebar} {
-    position: sticky;
-    top: 0;
-    background: white;
-  }
-`;
-
-export const MobileSidebarWrap = styled.div`
-  position: absolute;
-  z-index: 999;
-  background: white;
-  width: 100%;
-  left: 0;
-  bottom: 100%;
-  overflow-y: scroll;
-  box-shadow: rgba(0, 0, 0, 0.1) 0 10px 20px;
-  top: calc(100% + 1px);
-  transition: bottom 0.5s ease 0s;
-
-  &.visible {
-    bottom: -50vh;
-  }
-`;
-
-export const MobileSidebar = styled(Sidebar)`
-  border-left: 1px solid #efefef;
-  margin-left: 12px;
-  padding-bottom: 20px;
-
-  .links-group {
-    width: auto;  
-  }
-  
-  .progress-badge {
-    position: relative;
-    top: -2px;
-    margin-left: 5px;
-  }
-`;

components/dimmed-more.tsx

@@ -0,0 +1,46 @@
+import { Box, Link, Text } from '@chakra-ui/react';
+
+type DimmedMoreProps = {
+  text: string;
+  href: string;
+};
+
+export function DimmedMore(props: DimmedMoreProps) {
+  const { text, href } = props;
+
+  return (
+    <Box position='relative' textAlign='center' bottom='20px'>
+      <Box
+        opacity={1}
+        pointerEvents='none'
+        position='absolute'
+        bottom={0}
+        height='200px'
+        width='100%'
+        background='linear-gradient(180deg, rgb(255 255 255 / 40%), white)'
+      />
+
+      <Link
+        rounded='20px'
+        display='inline'
+        bg='green.600'
+        color='white'
+        p='7px 20px'
+        href={href}
+        fontWeight={800}
+        fontSize='11px'
+        textTransform='uppercase'
+        my='25px'
+        position='relative'
+        _hover={{
+          textDecoration: 'none',
+          '& .forward-arrow': {
+            transform: 'translateX(3px)'
+          }
+        }}>
+        {text}
+        <Text d='inline-block' as='span' transition='200ms' ml='4px' className='forward-arrow'>&rarr;</Text>
+      </Link>
+    </Box>
+  );
+}

components/faq-list/index.js

@@ -1,16 +0,0 @@
-import { FaqContainer } from './style';
-import MdRenderer from 'components/md-renderer';
-
-const AboutPage = require(`../../content/pages/about.md`).default;
-
-const FaqList = () => (
-  <FaqContainer className='border-top bg-light'>
-    <div className="container container-small">
-      <MdRenderer>
-        <AboutPage />
-      </MdRenderer>
-    </div>
-  </FaqContainer>
-);
-
-export default FaqList;

components/faq-list/style.js

@@ -1,25 +0,0 @@
-import styled from 'styled-components';
-
-export const FaqContainer = styled.div`
-  padding: 40px 0;
-  
-  h4 {
-    margin-top: 30px;
-    font-weight: 700;
-  }
-  
-  h4:first-child {
-    margin-top: 0;  
-  }
-
-  p {
-    color: #333;
-  }
-
-  p:last-child {
-    margin-bottom: 0;
-  }
-
-  .container {
-  }
-`;

components/featured-content/guides.js

@@ -1,25 +0,0 @@
-import Link from 'next/link';
-import { FeaturedContentWrap } from './style';
-import FeaturedGuide from 'components/featured-guide';
-import { getFeaturedGuides } from 'lib/guide';
-
-const FeaturedGuides = () => (
-  <FeaturedContentWrap className="featured-content-wrap">
-    <div className="container">
-      <p className='border-through featured-separator'>
-          <span>
-            Guides mostly visited by the community&nbsp;
-            <a href="/guides" className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Guides &rarr;</a>
-          </span>
-      </p>
-      <div className="swim-lane row">
-        { getFeaturedGuides()
-          .map(guide => (
-            <FeaturedGuide guide={ guide } key={ guide.url } />
-          )) }
-      </div>
-    </div>
-  </FeaturedContentWrap>
-);
-
-export default FeaturedGuides;

components/featured-content/index.js

@@ -1,16 +0,0 @@
-import { FeaturedWrap } from './style';
-import FeaturedGuides from './guides';
-import FeaturedRoadmaps from './roadmaps';
-
-const FeaturedContent = (props) => (
-  <FeaturedWrap className="border-top bg-light">
-    <FeaturedRoadmaps />
-    <FeaturedGuides />
-  </FeaturedWrap>
-);
-
-FeaturedContent.defaultProps = {
-  className: '',
-};
-
-export default FeaturedContent;

components/featured-content/roadmaps.js

@@ -1,27 +0,0 @@
-import { FeaturedContentWrap } from './style';
-import roadmaps from 'content/roadmaps';
-import FeaturedRoadmap from 'components/featured-roadmap';
-
-const FeaturedRoadmaps = () => (
-  <FeaturedContentWrap className="featured-content-wrap">
-    <div className="container">
-      <div className="featured-head">
-        <p className="border-through featured-separator">
-            <span>
-              Roadmaps mostly visited by the community&nbsp;
-              <a href='/roadmaps' className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Roadmaps &rarr;</a>
-            </span>
-        </p>
-      </div>
-      <div className="swim-lane row">
-        { roadmaps
-          .filter(({ featured }) => featured)
-          .map(roadmap => (
-            <FeaturedRoadmap roadmap={ roadmap } key={ roadmap.url } />
-          )) }
-      </div>
-    </div>
-  </FeaturedContentWrap>
-);
-
-export default FeaturedRoadmaps;

components/featured-content/style.js

@@ -1,110 +0,0 @@
-import styled from 'styled-components';
-
-export const FeaturedWrap = styled.div`
-  padding: 30px 0 50px;
-`;
-
-export const FeaturedContentWrap = styled.div`
-  .featured-head {
-    text-align: center;
-    display: block;
-
-    h3 {
-      font-weight: 700;
-      font-size: 35px;
-      margin-bottom: 30px;
-    }
-  }
-
-  .featured-separator {
-    font-size: 16px;
-    margin-bottom: 40px;
-    margin-top: 25px;
-    color: #999;
-
-    span {
-      background: #f8f9fa;
-    }
-
-    a {
-      background: black;
-      color: white;
-      padding: 3px 8px;
-      border-radius: 6px;
-      font-size: 14px;
-      text-decoration: none;
-      margin-left: 5px;
-    }
-  }
-
-  .swim-lane {
-    .featured-block {
-    }
-  }
-
-  .guide-item {
-    border-bottom: 1px solid #dee2e6;
-    padding: 15px 10px;
-
-    p {
-      margin-bottom: 0;
-      font-size: 15px;
-      color: #999;
-    }
-
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  .journey-block {
-    a {
-      border: 1px solid #f7f7f7;
-      display: block;
-      text-decoration: none;
-      color: #000000;
-      background: #ffffff;
-      box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px;
-      transition: box-shadow 0.2s ease 0s;
-      cursor: pointer;
-      margin-bottom: 32px;
-      border-radius: 0 0 10px 10px;
-
-      &:hover {
-        box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px;
-
-        img {
-          filter: grayscale(0);
-        }
-      }
-    }
-
-    .journey-meta {
-      padding: 18px 25px 20px;
-
-      h4 {
-        line-height: 27px;
-        font-weight: 600;
-        margin-bottom: 0;
-        font-size: 18px;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        flex: 0 0 auto;
-        overflow: hidden;
-      }
-
-      p {
-        font-size: 15px;
-        line-height: 25px;
-        color: #999999;
-        margin-bottom: 0;
-      }
-    }
-
-    img {
-      width: 100%;
-      filter: grayscale(1);
-      border-radius: 10px 10px 0 0;
-    }
-  }
-`;

components/featured-guide/index.js

@@ -1,25 +0,0 @@
-import formatDate from 'date-fns/format';
-
-import { Author, AuthorImage, AuthorName, BlockLink, BlockMeta, BlockSubtitle, BlockTitle, PublishDate } from './style';
-import { findByUsername } from 'lib/author';
-
-const FeaturedGuide = ({ guide }) => {
-  const author = findByUsername(guide.author) || {};
-  return (
-    <div className='col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 grid-item-container'>
-      <BlockLink href={guide.url}>
-        <BlockTitle>{guide.title}</BlockTitle>
-        <BlockSubtitle>{guide.featuredDescription || guide.description}</BlockSubtitle>
-        <BlockMeta>
-          <Author>
-            <AuthorImage src={author.picture} />
-            <AuthorName>{author.name}</AuthorName>
-          </Author>
-          <PublishDate>{formatDate(new Date(guide.createdAt), 'MMMM d, yyyy')}</PublishDate>
-        </BlockMeta>
-      </BlockLink>
-    </div>
-  );
-};
-
-export default FeaturedGuide;

components/featured-guide/style.js

@@ -1,65 +0,0 @@
-import styled from 'styled-components';
-
-export const BlockLink = styled.a`
-  border: 1px solid #f7f7f7;
-  display: block;
-  text-decoration: none;
-  color: #000000;
-  background: #ffffff;
-  padding: 25px 25px 22px;
-  border-radius: 10px;
-  box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px;
-  transition: box-shadow 0.2s ease 0s;
-  cursor: pointer;
-  margin-bottom: 32px;
-  
-  &:hover {
-    text-decoration: none;
-    color: #000000;
-    box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px;
-  }
-`;
-
-export const BlockTitle = styled.h4`
-  line-height: 27px;
-  font-weight: 600;
-  font-size: 22px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  flex: 0 0 auto;
-  overflow: hidden;
-`;
-
-export const BlockSubtitle = styled.p`
-  font-size: 15px;
-  line-height: 25px;
-  color: #999999;
-  margin-bottom: 0;
-`;
-
-export const BlockMeta = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 19px;
-`;
-
-export const PublishDate = styled.time`
-  font-size: 13px;
-  color: #999;
-`;
-
-export const Author = styled.div`
-  display: flex;
-  align-items: center;
-  font-size: 15px;
-  color: #999;
-`;
-
-export const AuthorImage = styled.img`
-  height: 22px;
-  width: 22px;
-  border-radius: 100%;
-  margin-right: 10px;
-`;
-export const AuthorName = styled.div``;

components/featured-roadmap/index.js

@@ -1,12 +0,0 @@
-import { BlockLink, BlockSubtitle, BlockTitle } from './style';
-
-const FeaturedRoadmap = ({ roadmap }) => (
-  <div className='col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container'>
-    <BlockLink href={roadmap.url}>
-      <BlockTitle>{roadmap.title}</BlockTitle>
-      <BlockSubtitle>{roadmap.featuredDescription || roadmap.description}</BlockSubtitle>
-    </BlockLink>
-  </div>
-);
-
-export default FeaturedRoadmap;

components/featured-roadmap/style.js

@@ -1,38 +0,0 @@
-import styled from 'styled-components';
-
-export const BlockLink = styled.a`
-  border: 1px solid #f7f7f7;
-  display: block;
-  text-decoration: none;
-  color: #000000;
-  background: #ffffff;
-  padding: 26px 25px 25px;
-  border-radius: 10px;
-  box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px;
-  transition: box-shadow 0.2s ease 0s;
-  cursor: pointer;
-  margin-bottom: 32px;
-  
-  &:hover {
-    text-decoration: none;
-    color: #000000;
-    box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px;
-  }
-`;
-
-export const BlockTitle = styled.h4`
-  line-height: 27px;
-  font-weight: 600;
-  font-size: 22px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  flex: 0 0 auto;
-  overflow: hidden;
-`;
-
-export const BlockSubtitle = styled.p`
-  font-size: 15px;
-  line-height: 25px;
-  color: #999999;
-  margin-bottom: 0;
-`;

components/footer.tsx

@@ -0,0 +1,70 @@
+import { Box, Container, Flex, Image, Link, Stack, Text } from '@chakra-ui/react';
+import siteConfig from '../content/site.json';
+import { CustomAd } from './custom-ad';
+import React from 'react';
+
+function NavigationLinks() {
+  return (
+    <>
+      <Stack isInline d={['none', 'none', 'flex']} color='gray.400' fontWeight={600} spacing='30px'>
+        <Link _hover={{ color: 'white' }} href='/roadmaps'>Roadmaps</Link>
+        <Link _hover={{ color: 'white' }} href='/guides'>Guides</Link>
+        <Link _hover={{ color: 'white' }} href='/watch'>Videos</Link>
+        <Link _hover={{ color: 'white' }} href='/about'>About</Link>
+        <Link _hover={{ color: 'white' }} href={siteConfig.url.youtube} target='_blank'>YouTube</Link>
+      </Stack>
+
+      <Stack d={['flex', 'flex', 'none']} color='gray.400' fontWeight={600} spacing={0}>
+        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
+              href='/roadmaps'>Roadmaps</Link>
+        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
+              href='/guides'>Guides</Link>
+        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
+              href='/watch'>Videos</Link>
+        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
+              href='/about'>About</Link>
+        <Link py='7px' _hover={{ color: 'white' }} target='_blank'
+              href={siteConfig.url.youtube}>YouTube</Link>
+      </Stack>
+    </>
+  );
+}
+
+export function Footer() {
+  return (
+    <Box bg='brand.hero' p={['25px 0', '25px 0', '40px 0']}>
+      <Container maxW='container.md'>
+        <NavigationLinks />
+
+        <Box mt={['40px', '40px', '50px']} mb='40px' maxW='500px'>
+          <Flex spacing={0} alignItems='center' color='gray.400'>
+            <Link d='flex' alignItems='center' fontWeight={600} _hover={{ textDecoration: 'none', color: 'white' }}
+                  href='/'>
+              <Image alt='' h='25px' w='25px' src='/logo.svg' mr='6px' />
+              roadmap.sh
+            </Link>
+            <Text as='span' mx='7px'>by</Text>
+            <Link bg='blue.500' px='6px' py='2px' rounded='4px' color='white' fontWeight={600} fontSize='13px'
+                  _hover={{ textDecoration: 'none', bg: 'blue.600' }} href={siteConfig.url.twitter}
+                  target='_blank'>@kamranahmedse</Link>
+          </Flex>
+
+          <Text my='15px' fontSize='14px' color='gray.500'>Community created roadmaps, articles, resources and
+            journeys to help you choose your path and grow in your career.</Text>
+
+          <Text fontSize='14px' color='gray.500'>
+            <Text as='span' mr='10px'>&copy; roadmap.sh</Text>&middot;
+            <Link href='/about' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
+                  mx='10px'>FAQs</Link>&middot;
+            <Link href='/terms' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
+                  mx='10px'>Terms</Link>&middot;
+            <Link href='/privacy' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
+                  mx='10px'>Privacy</Link>
+          </Text>
+        </Box>
+      </Container>
+
+      <CustomAd />
+    </Box>
+  );
+}

components/global-header.tsx

@@ -0,0 +1,117 @@
+import { useState } from 'react';
+import { HamburgerIcon } from '@chakra-ui/icons';
+import { Box, CloseButton, Container, Flex, IconButton, Image, Link, Stack, Text } from '@chakra-ui/react';
+import RoadmapLogo from '../components/icons/roadmap.svg';
+import siteConfig from '../content/site.json';
+
+type MenuLinkProps = {
+  text: string;
+  link: string;
+};
+
+function MenuLink(props: MenuLinkProps) {
+  const { text, link } = props;
+
+  return <Link
+    borderBottomWidth={0}
+    borderBottomColor='gray.500'
+    _hover={{ textDecoration: 'none', borderBottomColor: 'white' }}
+    fontWeight={500}
+    href={link}
+  >
+    {text}
+  </Link>;
+}
+
+function DesktopMenuLinks() {
+  return (
+    <Stack d={['none', 'flex', 'flex']} shouldWrapChildren isInline spacing='15px' alignItems='center' color='gray.50'
+           fontSize='15px'>
+      <MenuLink text={'Roadmaps'} link={'/roadmaps'} />
+      <MenuLink text={'Guides'} link={'/guides'} />
+      <MenuLink text={'Videos'} link={'/watch'} />
+
+      <Link ml='10px' bgGradient='linear(to-l, yellow.700, red.600)' p='7px 10px' rounded='4px'
+            _hover={{ textDecoration: 'none', bgGradient: 'linear(to-l, red.800, yellow.700)' }}
+            fontWeight={500} href={'/signup'}>Subscribe</Link>
+    </Stack>
+  );
+}
+
+function MobileMenuLinks() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <IconButton
+        rounded='5px'
+        padding={0}
+        aria-label={'Menu'}
+        d={['block', 'none', 'none']}
+        icon={<HamburgerIcon color='white' w='25px' height='25px' />}
+        color='white'
+        cursor='pointer'
+        h='auto'
+        bg='transparent'
+        _hover={{ bg: 'transparent' }}
+        _active={{ bg: 'transparent' }}
+        _focus={{ bg: 'transparent' }}
+        onClick={() => setIsOpen(true)}
+      />
+
+      {isOpen && (
+        <Stack color='gray.100'
+               fontSize={['22px', '22px', '22px', '32px']}
+               alignItems='center'
+               justifyContent='center'
+               pos='fixed'
+               left={0}
+               right={0}
+               bottom={0}
+               top={0}
+               bg='gray.900'
+               spacing='12px'
+               zIndex={999}
+        >
+          <Link href='/roadmaps'>Roadmaps</Link>
+          <Link href='/guides'>Guides</Link>
+          <Link href='/watch'>Videos</Link>
+          <Link href='/signup'>Subscribe</Link>
+          <CloseButton onClick={() => setIsOpen(false)} pos='fixed' top='40px' right='15px' size='lg' />
+        </Stack>
+      )}
+    </>
+  );
+}
+
+type GlobalHeaderProps = {
+  variant?: 'transparent' | 'solid'
+};
+
+export function GlobalHeader(props: GlobalHeaderProps) {
+  const { variant = 'solid' } = props;
+
+  return (
+    <Box bg={variant === 'solid' ? 'gray.900' : 'transparent'} p='20px 0'>
+      <Container maxW='container.md'>
+        <Flex justifyContent='space-between' alignItems='center'>
+          <Box>
+            <Link w='100%'
+                  d='flex'
+                  href='/'
+                  alignItems='center'
+                  color='white'
+                  fontWeight={600}
+                  _hover={{ textDecoration: 'none' }}
+                  fontSize='18px'>
+              <RoadmapLogo style={{ height: '30px', width: '30px', marginRight: '10px' }} />
+              <Text d={['block', 'none', 'block']} as='span'>roadmap.sh</Text>
+            </Link>
+          </Box>
+          <DesktopMenuLinks />
+          <MobileMenuLinks />
+        </Flex>
+      </Container>
+    </Box>
+  );
+}

components/guide-body/index.js

@@ -1,23 +0,0 @@
-import MdRenderer from 'components/md-renderer'
-import SharePage from 'components/share-page';
-import { GuideBodyWrap } from './style';
-
-const GuideBody = ({ guide }) => {
-  const GuideContent = require(`../../content/guides/${guide.fileName}.md`).default;
-  return (
-    <GuideBodyWrap>
-      <MdRenderer>
-        <GuideContent />
-        {
-          guide.author && <SharePage
-            title={ guide.title }
-            url={ guide.url }
-            twitterUsername={ guide.author.twitter }
-          />
-        }
-      </MdRenderer>
-    </GuideBodyWrap>
-  );
-};
-
-export default GuideBody;

components/guide-body/style.js

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-export const GuideBodyWrap = styled.div`
-  position: relative;
-  max-width: 750px;
-  margin: 0 auto;
-  padding: 0 20px;
-  min-height: 300px;
-  
-  p:first-child, h1, h2, h3, h4, h5, h6, img, blockquote {
-    margin-top: 0;
-  }
-`;

components/guide-footer/index.js

@@ -1,83 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faFacebookSquare, faGithub, faHackerNewsSquare, faRedditSquare, faTwitter, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'
-import { getContributionUrl } from "lib/guide";
-import {
-  getTwitterUrl,
-  getTwitterShareUrl,
-  getFacebookShareUrl,
-  getRedditShareUrl,
-  getHnShareUrl
-} from "lib/url";
-import {
-  AuthorBio,
-  AuthorImg,
-  AuthorInfoWrap,
-  AuthorMeta,
-  ContributeIcon,
-  FooterBg,
-  FooterContainer,
-  FooterWrap,
-  ShareIcons,
-  ShareWrap
-} from './style';
-
-
-const GuideFooter = ({
-  guide,
-  guide: {
-    author = {}
-  } = {}
-}) => (
-  <FooterWrap>
-    <FooterBg className="border-top">
-      <FooterContainer>
-        <ShareWrap>
-          <ContributeIcon>
-            <a href={ getContributionUrl(guide) } target="_blank">
-              <span className="d-none d-sm-none d-md-inline d-lg-inline d-xl-inline">Improve this Guide </span>
-              <span className="d-inline d-sm-inline d-md-none d-lg-none d-xl-none">Contribute </span>
-              <FontAwesomeIcon icon={faGithub}/>
-            </a>
-          </ContributeIcon>
-          <ContributeIcon hasMargins>
-            <a href={ getTwitterUrl(author.twitter) } target="_blank">
-              <span className="d-none d-sm-none d-md-inline d-lg-inline d-xl-inline">Follow the author </span>
-              <span className="d-inline d-sm-inline d-md-none d-lg-none d-xl-none">Author </span>
-              <FontAwesomeIcon icon={faTwitter}/>
-            </a>
-          </ContributeIcon>
-          <ShareIcons>
-            <span className="d-none d-sm-none d-md-none d-lg-inline d-xl-inline">Help spread the word</span>
-            <span className="d-inline d-sm-inline d-md-inline d-lg-none d-xl-none">Share</span>
-            <a href={ getTwitterShareUrl({ text: `${guide.title} by @${author.twitter}`, url: guide.url })} target="_blank">
-              <FontAwesomeIcon icon={faTwitterSquare}/>
-            </a>
-            <a href={ getFacebookShareUrl({ text: guide.title, url: guide.url }) } target="_blank">
-              <FontAwesomeIcon icon={faFacebookSquare}/>
-            </a>
-            <a href={ getRedditShareUrl({ text: guide.title, url: guide.url })} target="_blank">
-              <FontAwesomeIcon icon={faRedditSquare}/>
-            </a>
-            <a href={ getHnShareUrl({ text: guide.title, url: guide.url })} target="_blank">
-              <FontAwesomeIcon icon={faHackerNewsSquare}/>
-            </a>
-          </ShareIcons>
-        </ShareWrap>
-      </FooterContainer>
-    </FooterBg>
-
-    <FooterBg className="border-top">
-      <FooterContainer>
-        <AuthorInfoWrap>
-          <AuthorImg src={ author.picture } alt={ author.name }/>
-          <AuthorMeta>
-            <h4><a href={ getTwitterUrl(author.twitter) } target="_blank">{ author.name }</a></h4>
-            <AuthorBio>{ author.bio }</AuthorBio>
-          </AuthorMeta>
-        </AuthorInfoWrap>
-      </FooterContainer>
-    </FooterBg>
-  </FooterWrap>
-);
-
-export default GuideFooter;

components/guide-footer/style.js

@@ -1,123 +0,0 @@
-import styled from 'styled-components';
-
-export const FooterWrap = styled.div`
-  display: block;
-  margin-top: 50px;
-`;
-
-export const FooterContainer = styled.div`
-  max-width: 750px;
-  margin: 0 auto;
-  padding: 0 20px;
-`;
-
-export const FooterBg = styled.div`
-`;
-
-export const ShareWrap = styled.div`
-  padding: 17px 0px;
-  align-items: center;
-  justify-content: center;
-  display: flex;
-
-  a {
-    display: flex;  
-    align-items: center;
-    color: #101010;
-
-    svg {
-      height: 18px !important;
-      width: 18px !important;
-      color: #757575;
-      margin-left: 7px;
-      transition: all 0.2s ease;
-    }
-
-    &:hover {
-      svg {
-        color: #101010;
-      }
-    }
-  }
-`;
-
-
-export const ContributeIcon = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: ${props => props.hasMargins ? '0 30px' : '0'};
-  
-  span {
-    margin-right: 4px;
-  }
-  
-  a {
-    color: #757575;
-    font-size: 14px;
-    transition: all 0.2s ease;
-      
-    &:hover {
-      color: #101010;
-    }
-  }
-`;
-
-export const ShareIcons = styled.div`
-  display: flex;
-  align-items: center;
-  color: #757575;
-  font-size: 14px;
-
-  span {
-    margin-right: 4px;
-  }
-`;
-
-export const AuthorInfoWrap = styled.div`
-  display: flex;
-  align-items: center;
-  padding: 40px 0;
-
-  h4 {
-    position: relative;
-    font-size: 22px;
-    margin: 10px 0;
-    line-height: 17px;
-
-    a {
-      font-weight: 700;
-      color: #101010;
-    }
-  }
-  
-  .author-description {
-    margin-bottom: 14px;
-  }
-`;
-
-export const AuthorBio = styled.p`
-  font-size: 15px;
-  line-height: 24px;
-  color: #757575;
-  margin-bottom: 0;
-  
-  a {
-    font-weight: 500;
-  }
-`;
-
-export const AuthorImg = styled.img`
-  border-radius: 100%;
-  height: 100px !important;
-  width: 100px !important;
-  margin-right: 22px;
-  display: block;
-`;
-
-export const AuthorMeta = styled.div`
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  flex: 1;
-`;

components/guide-header/index.js

@@ -1,57 +0,0 @@
-import formatDate from 'date-fns/format'
-import {
-  ActionItems,
-  AuthorImage,
-  EditGuide,
-  GuideAuthor,
-  GuideDate,
-  GuideMeta,
-  GuideSubtitle,
-  GuideTitle,
-  HeaderWrap,
-} from './style';
-import { getContributionUrl } from "lib/guide";
-import { getTwitterUrl } from "lib/url";
-import { faClock, faEnvelope, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
-import { BadgeLink, BadgesList, PrimaryBadge, SecondaryBadge, DarkBadge } from 'components/badges';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-const GuideHeader = ({
- guide,
- guide: {
-   author = {}
- } = {}
-}) => (
-  <HeaderWrap className="border-bottom">
-    <GuideMeta>
-      <GuideAuthor href={ getTwitterUrl(author.twitter) } target="_blank">
-        <AuthorImage src={ author.picture } />
-        { author.name }
-      </GuideAuthor>
-      &middot;
-      <GuideDate>{ formatDate(new Date(guide.createdAt), 'EEEE, MMMM d yyyy') }</GuideDate>
-      &middot;
-      <EditGuide href={ getContributionUrl(guide) } target="_blank">Improve this Guide</EditGuide>
-    </GuideMeta>
-    <GuideTitle>{ guide.title }</GuideTitle>
-    <GuideSubtitle>{ guide.description }</GuideSubtitle>
-    <ActionItems>
-      <BadgesList className="mt-4">
-        <BadgeLink href="/guides">
-          <SecondaryBadge>
-            <FontAwesomeIcon icon={faArrowLeft}/>
-            Other Guides
-          </SecondaryBadge>
-        </BadgeLink>
-        <BadgeLink href="/signup">
-          <PrimaryBadge>
-            <FontAwesomeIcon icon={faEnvelope}/>
-            Send me Updates
-          </PrimaryBadge>
-        </BadgeLink>
-      </BadgesList>
-    </ActionItems>
-  </HeaderWrap>
-);
-
-export default GuideHeader;

components/guide-header/style.js

@@ -1,54 +0,0 @@
-import styled from 'styled-components';
-
-export const HeaderWrap = styled.div`
-  padding: 80px 15px 45px;
-  text-align: center;
-  margin-bottom: 35px;
-`;
-
-export const GuideTitle = styled.h1`
-  font-weight: 700;
-  font-size: 46px;
-  margin: 12px 0;
-`;
-
-export const GuideSubtitle = styled.p`
-  margin-bottom: 0;
-  font-size: 16px;
-  color: #444;
-`;
-
-export const GuideMeta = styled.p`
-  margin-bottom: 0;
-  color: #757575;
-  font-size: 13px;
-  font-weight: 400;
-`;
-
-export const GuideDate = styled.span`
-  margin-left: 7px;
-  margin-right: 7px;
-`;
-
-export const GuideAuthor = styled.a`
-  margin-right: 7px;
-  font-weight: 500;
-  color: #101010;
-  
-  &:hover {
-    color: #101010;
-  }
-`;
-
-export const AuthorImage = styled.img`
-  width: 22px;
-  height: 22px;
-  border-radius: 100%;
-  margin-right: 10px;
-`;
-
-export const EditGuide = styled.a`
-  margin-left: 7px;
-`;
-
-export const ActionItems = styled.div``;

components/guide/guide-grid-item.tsx

@@ -0,0 +1,33 @@
+import { Badge, Box, Heading, Link, Text } from '@chakra-ui/react';
+import { GuideType } from '../../lib/guide';
+
+type GuideGridItemProps = {
+  title: string;
+  href: string;
+  subtitle: string;
+  date: string;
+  isNew?: boolean;
+  colorIndex?: number;
+  type?: GuideType['type'];
+};
+
+const bgColorList = [
+  'gray.700',
+  'purple.800'
+];
+
+export function GuideGridItem(props: GuideGridItemProps) {
+  const { title, subtitle, date, isNew = false, colorIndex = 0, href, type } = props;
+
+  return (
+    <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={href} shadow='xl' p='20px'
+         rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
+      <Text mb='10px' fontSize='13px' color='gray.400' textTransform='capitalize'>
+        {isNew && <Badge colorScheme={'green'} mr='10px'>New</Badge>}
+        {type} Guide
+      </Text>
+      <Heading color='white' mb={'6px'} fontSize='20px'>{title}</Heading>
+      <Text color='gray.300' fontSize='14px'>{subtitle}</Text>
+    </Box>
+  );
+}

components/helmet.tsx

@@ -0,0 +1,167 @@
+import NextHead from 'next/head';
+import siteConfig from '../content/site.json';
+import { RoadmapType } from '../lib/roadmap';
+
+type HelmetProps = {
+  title?: string;
+  keywords?: string[];
+  canonical?: string;
+  description?: string;
+  noIndex?: boolean;
+  roadmap?: RoadmapType;
+};
+
+function getRichSnippetJson(roadmap: RoadmapType) {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'Article',
+    mainEntityOfPage: {
+      '@type': 'WebPage',
+      '@id': `https://roadmap.sh/${roadmap.id}`,
+    },
+    headline: roadmap.seo.title,
+    description: roadmap.seo.description,
+    image: roadmap.jsonUrl
+      ? `https://roadmap.sh/roadmaps/${roadmap.id}.png`
+      : undefined,
+    author: {
+      '@type': 'Person',
+      name: 'Kamran Ahmed',
+      url: 'https://twitter.com/kamranahmedse',
+    },
+    publisher: {
+      '@type': 'Organization',
+      name: 'roadmap.sh',
+      logo: {
+        '@type': 'ImageObject',
+        url: 'https://roadmap.sh/brand-square.png',
+      },
+    },
+  };
+}
+
+const Helmet = (props: HelmetProps) => {
+  const { roadmap, title, canonical, description, keywords, noIndex = false } = props;
+
+  return (
+    <NextHead>
+      <meta charSet="UTF-8" />
+
+      <title>{title || siteConfig.title}</title>
+      <meta
+        name="description"
+        content={description || siteConfig.description}
+      />
+
+      <meta name="author" content={siteConfig.author} />
+      <meta
+        name="keywords"
+        content={keywords ? keywords.join(',') : siteConfig.keywords.join(',')}
+      />
+
+      {noIndex && <meta name="robots" content="noindex" /> }
+
+      <meta
+        name="viewport"
+        content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0"
+      />
+      {canonical && <link rel="canonical" href={canonical} />}
+      <meta httpEquiv="Content-Language" content="en" />
+      <meta property="og:title" content={title || siteConfig.title} />
+      <meta
+        property="og:description"
+        content={description || siteConfig.description}
+      />
+      <meta
+        property="og:image"
+        content={`${siteConfig.url.web}${siteConfig.logoSquare}`}
+      />
+      <meta property="og:url" content={siteConfig.url.web} />
+      <meta property="og:type" content="website" />
+      <meta
+        property="article:publisher"
+        content={`https://facebook.com/${siteConfig.facebook}`}
+      />
+      <meta property="og:site_name" content={siteConfig.name} />
+      <meta property="article:author" content={siteConfig.author} />
+
+      <meta name="twitter:card" content="summary" />
+      <meta name="twitter:site" content={`@${siteConfig.twitter}`} />
+      <meta name="twitter:title" content={title || siteConfig.title} />
+      <meta
+        name="twitter:description"
+        content={description || siteConfig.description}
+      />
+      <meta
+        name="twitter:image"
+        content={`${siteConfig.url.web}${siteConfig.logoSquare}`}
+      />
+      <meta name="twitter:image:alt" content="roadmap.sh" />
+
+      <meta name="mobile-web-app-capable" content="yes" />
+      <meta name="apple-mobile-web-app-capable" content="yes" />
+      <meta
+        name="apple-mobile-web-app-status-bar-style"
+        content="black-translucent"
+      />
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href="/manifest/apple-touch-icon.png"
+      />
+      <meta name="msapplication-TileColor" content="#101010" />
+      <meta name="theme-color" content="#848a9a" />
+
+      <link rel="manifest" href="/manifest/manifest.json" />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="/manifest/icon32.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href="/manifest/icon16.png"
+      />
+      <link
+        rel="shortcut icon"
+        href="/manifest/favicon.ico"
+        type="image/x-icon"
+      />
+      <link rel="icon" href="/manifest/favicon.ico" type="image/x-icon" />
+
+      {roadmap?.id && (
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify(getRichSnippetJson(roadmap)),
+          }}
+        />
+      )}
+
+      {/* Global Site Tag (gtag.js) - Google Analytics */}
+      {process.env.GA_SECRET && (
+        <>
+          <script
+            async
+            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA_SECRET}`}
+          />
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${process.env.GA_SECRET}');
+          `,
+            }}
+          />
+        </>
+      )}
+    </NextHead>
+  );
+};
+
+export default Helmet;

components/helmet/index.js

@@ -1,74 +0,0 @@
-import NextHead from 'next/head';
-import siteConfig from 'content/site';
-
-const prepareTitle = (givenTitle) => {
-  return givenTitle || siteConfig.title;
-};
-
-const prepareDescription = (givenDescription) => {
-  return givenDescription || siteConfig.description;
-};
-
-// noinspection JSUnresolvedLibraryURL
-const Helmet = (props) => (
-  <NextHead>
-    <meta charSet='UTF-8' />
-
-    <title>{ prepareTitle(props.title) }</title>
-    <meta name='description' content={ prepareDescription(props.description) } />
-
-    <meta name="author" content={ siteConfig.author } />
-    <meta name="keywords" content={ props.keywords ? props.keywords.join(',') : siteConfig.keywords.join(',') } />
-
-    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0" />
-    { props.canonical && <link rel="canonical" href={ props.canonical } /> }
-    <meta httpEquiv="Content-Language" content="en" />
-
-    <meta property="og:title" content={ prepareTitle(props.title) } />
-    <meta property="og:description" content={ prepareDescription(props.description) } />
-    <meta property="og:image" content={ `${siteConfig.url.web}${siteConfig.logoSquare}` } />
-    <meta property="og:url" content={ siteConfig.url.web } />
-    <meta property="og:type" content="website" />
-    <meta property="article:publisher" content={ `https://facebook.com/${siteConfig.facebook}` } />
-    <meta property="og:site_name" content={ siteConfig.name } />
-    <meta property="article:author" content={ siteConfig.author } />
-
-    <meta name="twitter:card" content="summary" />
-    <meta name="twitter:site" content={ `@${siteConfig.twitter}` } />
-    <meta name="twitter:title" content={ prepareTitle(props.title) } />
-    <meta name="twitter:description" content={ prepareDescription(props.description) } />
-    <meta name="twitter:image" content={ `${siteConfig.url.web}${siteConfig.logoSquare}` } />
-    <meta name="twitter:image:alt" content="roadmap.sh" />
-
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/manifest/apple-touch-icon.png" />
-    <meta name="msapplication-TileColor" content="#101010" />
-    <meta name="theme-color" content="#848a9a" />
-
-    <link rel="manifest" href="/manifest/manifest.json" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/manifest/icon32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/manifest/icon16.png" />
-    <link rel="shortcut icon" href="/manifest/favicon.ico" type="image/x-icon" />
-    <link rel="icon" href="/manifest/favicon.ico" type="image/x-icon" />
-
-    { /* Global Site Tag (gtag.js) - Google Analytics */ }
-    { process.env.GA_SECRET && (
-      <>
-        <script async src={ `https://www.googletagmanager.com/gtag/js?id=${process.env.GA_SECRET}` } />
-        <script dangerouslySetInnerHTML={{
-          __html: `
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-            gtag('config', '${process.env.GA_SECRET}');
-          `,
-        }} />
-      </>
-    )}
-
-  </NextHead>
-);
-
-export default Helmet;

components/hero-section/index.js

@@ -1,13 +0,0 @@
-import Link from 'next/link';
-import { HeroSectionWrap } from './style';
-
-const HeroSection = () => (
-  <HeroSectionWrap>
-    <div className="container">
-      <h1>Developer Roadmaps</h1>
-      <p>Community driven roadmaps, articles and resources for developers. <Link href="/signup"><a>Sign up</a></Link> for occasional updates on new roadmaps, updates and guides</p>
-    </div>
-  </HeroSectionWrap>
-);
-
-export default HeroSection;

components/hero-section/style.js

@@ -1,30 +0,0 @@
-import styled from 'styled-components';
-
-export const HeroSectionWrap = styled.div`
-  text-align: center;
-  padding: 70px 20px;
-  margin: 0 auto;
-
-  .container {
-    max-width: 800px;
-  }
-
-  h1 {
-    font-size: 70px;
-    font-weight: 700;
-    margin-bottom: 25px;
-  }
-
-  p {
-    font-size: 20px;
-    color: #333;
-    font-weight: 400;
-    margin-bottom: 0;
-    line-height: 35px;
-  }
-
-  a {
-    font-weight: 700;
-    color: #000;
-  }
-`;

components/home/featured-roadmaps-list.tsx

@@ -0,0 +1,67 @@
+import { RoadmapType } from '../../lib/roadmap';
+import { SimpleGrid, Tag } from '@chakra-ui/react';
+import { HomeRoadmapItem } from '../roadmap/home-roadmap-item';
+
+type FeaturedRoadmapsListProps = {
+  roadmaps: RoadmapType[];
+  title: string;
+};
+
+export const upcomingRoadmaps = [
+  {
+    type: 'Role Based',
+    title: 'React Native',
+    description: 'Step by step guide to become a React Native Developer',
+    id: 'react-native'
+  },
+  {
+    type: 'Skill Based',
+    title: 'TypeScript',
+    description: 'Step by step guide to learn TypeScript in 2022',
+    id: 'typescript'
+  },
+  {
+    type: 'Skill Based',
+    title: 'Rust',
+    description: 'Step by step guide to learn Rust in 2022',
+    id: 'rust'
+  },
+];
+
+export function FeaturedRoadmapsList(props: FeaturedRoadmapsListProps) {
+  const { roadmaps, title } = props;
+
+  return (
+    <>
+      <Tag bg='gray.400' mb={4}>{title}</Tag>
+      <SimpleGrid columns={[1, 2, 3]} spacing={['10px', '10px', '15px']} mb='40px'>
+        <>
+          {roadmaps.map((roadmap: RoadmapType, counter: number) => (
+            <HomeRoadmapItem
+              isUpcoming={roadmap.isUpcoming}
+              url={`/${roadmap.id}`}
+              key={roadmap.id}
+              colorIndex={counter}
+              title={roadmap.featuredTitle === 'Software Design and Architecture' ? 'Software Design' : roadmap.featuredTitle}
+              isCommunity={roadmap.isCommunity}
+              isNew={roadmap.isNew}
+              subtitle={roadmap.featuredDescription}
+            />
+          ))}
+          {upcomingRoadmaps
+            .filter(roadmap => roadmap.type === title)
+            .map((roadmap, counter) => (
+              <HomeRoadmapItem
+                isUpcoming={true}
+                url={`/upcoming?id=${roadmap.id}`}
+                key={`upcoming-${roadmap.id}`}
+                colorIndex={9}
+                title={roadmap.title}
+                subtitle={roadmap.description}
+              />
+            ))}
+        </>
+      </SimpleGrid>
+    </>
+  );
+}

components/icon-row-block/index.js

@@ -1,15 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-import RowBlock from 'components/row-block';
-import { SubmitText, SubmitWrap } from './style';
-
-const IconRowBlock = ({ url, icon, text, openExternal=false }) => (
-  <RowBlock url={ url } openExternal={openExternal}>
-    <SubmitWrap>
-      <FontAwesomeIcon icon={ icon } />
-      <SubmitText>{ text }</SubmitText>
-    </SubmitWrap>
-  </RowBlock>
-);
-
-export default IconRowBlock;

components/icon-row-block/style.js

@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-
-export const SubmitWrap = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-
-  svg {
-    height: 25px;
-    color: #d6d6d6;
-  }
-`;
-
-export const SubmitText = styled.p`
-  margin-bottom: 0;
-  color: dimgrey;
-  margin-top: 8px;
-`;

components/icons/github.svg

@@ -1,4 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" aria-label="GitHub" role="img" viewBox="0 0 512 512" width="22px" height="20px">
-    <rect width="512" height="512" rx="15%"/>
-    <path fill="#fff" d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-50c-71 16-86-28-86-28-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+</svg>

components/icons/roadmap.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 283 283" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 39C0 17.4609 17.4609 0 39 0H244C265.539 0 283 17.4609 283 39V244C283 265.539 265.539 283 244 283H39C17.4609 283 0 265.539 0 244V39Z" fill="black"></path>
+    <path d="M121.215 210.72C119.348 211.28 116.361 211.84 112.255 212.4C108.335 212.96 104.228 213.24 99.9347 213.24C95.828 213.24 92.0947 212.96 88.7347 212.4C85.5614 211.84 82.8547 210.72 80.6147 209.04C78.3747 207.36 76.6014 205.12 75.2947 202.32C74.1747 199.333 73.6147 195.507 73.6147 190.84V106.84C73.6147 102.547 74.3614 98.9067 75.8547 95.92C77.5347 92.7467 79.868 89.9467 82.8547 87.52C85.8414 85.0933 89.4814 82.9467 93.7747 81.08C98.2547 79.0267 103.015 77.2533 108.055 75.76C113.095 74.2667 118.321 73.1467 123.735 72.4C129.148 71.4667 134.561 71 139.975 71C148.935 71 156.028 72.7733 161.255 76.32C166.481 79.68 169.095 85.28 169.095 93.12C169.095 95.7333 168.721 98.3467 167.975 100.96C167.228 103.387 166.295 105.627 165.175 107.68C161.255 107.68 157.241 107.867 153.135 108.24C149.028 108.613 145.015 109.173 141.095 109.92C137.175 110.667 133.441 111.507 129.895 112.44C126.535 113.187 123.641 114.12 121.215 115.24V210.72ZM166.387 188.32C166.387 180.48 168.813 173.947 173.667 168.72C178.52 163.493 185.147 160.88 193.547 160.88C201.947 160.88 208.573 163.493 213.427 168.72C218.28 173.947 220.707 180.48 220.707 188.32C220.707 196.16 218.28 202.693 213.427 207.92C208.573 213.147 201.947 215.76 193.547 215.76C185.147 215.76 178.52 213.147 173.667 207.92C168.813 202.693 166.387 196.16 166.387 188.32Z" fill="white"></path>
+</svg>

components/icons/tree.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 18v-7h-9v-5h3v-6h-8v6h3v5h-9v7h-2v6h6v-6h-2v-5h7v5h-2v6h6v-6h-2v-5h7v5h-2v6h6v-6z"/></svg>

components/icons/twitter.svg

@@ -1,3 +1,3 @@
-<svg width="29" height="29">
+<svg width="29" height="29" fill="currentColor">
     <path d="M22.05 7.54a4.47 4.47 0 0 0-3.3-1.46 4.53 4.53 0 0 0-4.53 4.53c0 .35.04.7.08 1.05A12.9 12.9 0 0 1 5 6.89a5.1 5.1 0 0 0-.65 2.26c.03 1.6.83 2.99 2.02 3.79a4.3 4.3 0 0 1-2.02-.57v.08a4.55 4.55 0 0 0 3.63 4.44c-.4.08-.8.13-1.21.16l-.81-.08a4.54 4.54 0 0 0 4.2 3.15 9.56 9.56 0 0 1-5.66 1.94l-1.05-.08c2 1.27 4.38 2.02 6.94 2.02 8.3 0 12.86-6.9 12.84-12.85.02-.24 0-.43 0-.65a8.68 8.68 0 0 0 2.26-2.34c-.82.38-1.7.62-2.6.72a4.37 4.37 0 0 0 1.95-2.51c-.84.53-1.81.9-2.83 1.13z"></path>
-</svg>
+</svg>

components/icons/video-icon.tsx

@@ -0,0 +1,21 @@
+export function VideoIcon(props: any) {
+  return (
+    <svg
+      stroke='currentColor'
+      fill='currentColor'
+      strokeWidth='0'
+      viewBox='0 0 24 24'
+      height='1em'
+      width='1em'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <g>
+        <path fill='none' d='M0 0h24v24H0z' />
+        <path
+          d='M3 3.993C3 3.445 3.445 3 3.993 3h16.014c.548 0 .993.445.993.993v16.014a.994.994 0 0 1-.993.993H3.993A.994.994 0 0 1 3 20.007V3.993zm7.622 4.422a.4.4 0 0 0-.622.332v6.506a.4.4 0 0 0 .622.332l4.879-3.252a.4.4 0 0 0 0-.666l-4.88-3.252z'
+        />
+      </g>
+    </svg>
+  );
+}

components/icons/youtube.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill='currentColor'>
+    <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/>
+</svg>

components/link/badge-link.js

@@ -1,9 +0,0 @@
-export function BadgeLink({ target='_blank', variant ='success', badgeText, href, children }) {
-  return (
-    <p className='mb-0'>
-      <a href={href} target={ target }>
-        <span style={{ position: 'relative', top: '-2px'}} className={`badge badge-${variant}`}>{badgeText}</span> { children }
-      </a>
-    </p>
-  );
-}

components/link/index.js

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-export const StrongLink  = styled.a`
-  border-bottom: 2px solid currentColor;
-  position: relative;
-  transition: background-color 120ms;
-  text-decoration: none;
-  font-weight: 600;
-  
-  &:hover {
-    text-decoration: none;
-  }
-`;

components/links-list-item.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Badge, Flex, Link, Text } from '@chakra-ui/react';
+
+type LinksListItemProps = {
+  href: string;
+  title: string;
+  subtitle: string;
+  badgeText?: string;
+  target?: string;
+  icon?: React.ReactChild;
+  hideSubtitleOnMobile?: boolean;
+};
+
+export function LinksListItem(props: LinksListItemProps) {
+  const { title, subtitle, badgeText, icon, hideSubtitleOnMobile = false, href, target } = props;
+
+  return (
+    <Link
+      target={target || '_self'}
+      href={href}
+      fontSize={['14px', '14px', '15px']}
+      py='9px'
+      d='flex'
+      flexDirection={['column', 'row', 'row']}
+      fontWeight={500}
+      color='gray.600'
+      alignItems={['flex-start', 'center']}
+      justifyContent={'space-between'}
+      sx={{
+        '@media (hover: none)': {
+          '&:hover': {
+            '& .list-item-title': {
+              transform: 'none'
+            }
+          }
+        }
+      }}
+      _hover={{
+        textDecoration: 'none',
+        color: 'blue.400',
+        '& .list-item-title': {
+          transform: 'translateX(10px)'
+        }
+      }}
+      isTruncated
+      maxWidth='100%'
+    >
+      <Flex alignItems='center' className='list-item-title' transition={'200ms'}>
+        {icon}
+        <Text maxWidth={'345px'} isTruncated as='span'>{title}</Text>
+        {badgeText &&
+        <Badge pos='relative' top='1px' variant='subtle' colorScheme='green' ml='10px'>{badgeText}</Badge>}
+      </Flex>
+      <Text d={[hideSubtitleOnMobile ? 'none' : 'inline', 'inline']} mt={['3px', 0]} as='span'
+            fontSize={['11px', '11px', '12px']} color='gray.500'>{subtitle}</Text>
+    </Link>
+  );
+}

components/links-list.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { StackDivider, VStack } from '@chakra-ui/react';
+
+type LinksListProps = {
+  children: React.ReactNode
+};
+
+export function LinksList(props: LinksListProps) {
+  const { children } = props;
+
+  return (
+    <VStack
+      rounded='5px'
+      divider={<StackDivider borderColor='gray.200' />}
+      spacing={0}
+      align='stretch'
+    >
+      {children}
+    </VStack>
+  );
+}

components/mark/index.js

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-
-export const Mark = styled.span`
-  background: #1b1e21;
-  color: #fff;
-  display: inline-block;
-  font-size: 18px;
-  font-weight: 600;
-  margin: 0 4px;
-  padding: 0 6px 0 7px;
-`;

components/md-renderer/index.js

@@ -1,10 +0,0 @@
-import { MDXProvider } from '@mdx-js/react';
-import MdxComponents from './mdx-components';
-
-const MdRenderer = (props) => (
-  <MDXProvider components={ MdxComponents }>
-    { props.children }
-  </MDXProvider>
-);
-
-export default MdRenderer;

components/md-renderer/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+// @ts-ignore
+import { MDXProvider } from '@mdx-js/react';
+import { ChakraProvider } from '@chakra-ui/react';
+import MdxComponents from './mdx-components';
+import { roadmapTheme } from '../../styles/theme';
+
+type MdRendererType = {
+  children: React.ReactNode
+};
+
+export default function MdRenderer(props: MdRendererType) {
+  return (
+    <ChakraProvider theme={roadmapTheme} resetCSS>
+      <MDXProvider components={MdxComponents}>
+        {props.children}
+      </MDXProvider>
+    </ChakraProvider>
+  );
+};

components/md-renderer/mdx-components/a.js

@@ -1,18 +0,0 @@
-import styled from 'styled-components';
-
-const Link = styled.a`
-  font-weight: 600;
-`;
-
-const EnrichedLink = props => {
-  // Is external URL or is a media URL
-  const isExternalUrl = /(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(props.href);
-
-  return (
-    <Link href={ props.href } target={ isExternalUrl ? '_blank' : '_self' }>
-      { props.children }
-    </Link>
-  );
-};
-
-export default EnrichedLink;

components/md-renderer/mdx-components/a.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+
+type EnrichedLinkProps = {
+  href: string;
+  children: React.ReactNode;
+};
+
+const Link = styled.a`
+  font-weight: 600;
+  text-decoration: underline;
+`;
+
+const EnrichedLink = (props: EnrichedLinkProps) => {
+  // Is external URL or is a media URL
+  const isExternalUrl = /(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(
+    props.href
+  );
+
+  const linkProps: Record<string, string> = {
+    target: '_self',
+    ...(isExternalUrl
+      ? {
+          rel: 'nofollow',
+          target: '_blank',
+        }
+      : {}),
+  };
+
+  return (
+    <Link href={props.href} {...linkProps}>
+      {props.children}
+    </Link>
+  );
+};
+
+export default EnrichedLink;

components/md-renderer/mdx-components/badge-link.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Link, Text, Badge } from '@chakra-ui/react';
+
+type BadgeLinkType = {
+  target: string;
+  badgeText: string;
+  href: string;
+  colorScheme?: string;
+  children: React.ReactNode;
+};
+
+export function BadgeLink(props: BadgeLinkType) {
+  const {
+    target = '_blank',
+    colorScheme = 'purple',
+    badgeText,
+    href,
+    children,
+  } = props;
+
+  // Is external URL or is a media URL
+  const isExternalUrl = /(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(
+    props.href
+  );
+
+  const linkProps: Record<string, string> = {
+    ...(isExternalUrl
+      ? {
+          rel: 'nofollow',
+        }
+      : {}),
+  };
+
+  return (
+    <Text mb={'0px'}>
+      <Link
+        fontSize="14px"
+        color="blue.700"
+        fontWeight={500}
+        textDecoration="none"
+        href={href}
+        target={target}
+        _hover={{ textDecoration: 'none', color: 'purple.400' }}
+        {...linkProps}
+      >
+        <Badge fontSize="11px" mr="7px" colorScheme={colorScheme}>
+          {badgeText}
+        </Badge>
+        {children}
+      </Link>
+    </Text>
+  );
+}

components/md-renderer/mdx-components/blockquote.tsx

@@ -5,20 +5,21 @@ const BlockQuote = styled.blockquote`
   position: relative;
   background: #e8e8e8;
   border-radius: 5px;
+  margin-bottom: 18px;
 
   h1, h2, h3, h4, h5, h6 {
     margin-top: 0;
   }
-  
+
   p + h4 {
     margin-top: 15px;
   }
 
   p {
     margin: 0;
-    
+
     & + p {
-    margin-top: 10px;
+      margin-top: 10px;
     }
   }
 `;

components/md-renderer/mdx-components/code.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Code as ChakraCode } from '@chakra-ui/react';
+
+type CodeType = {
+  children: React.ReactNode;
+}
+
+export default function Code(props: CodeType) {
+  return <ChakraCode bg='blue.500'>{props.children}</ChakraCode>;
+}

components/md-renderer/mdx-components/dedicated-roadmap.tsx

@@ -0,0 +1,22 @@
+import { Box, Flex, Heading, Text } from '@chakra-ui/react';
+import TreeIcon from '../../icons/tree.svg';
+
+type DedicatedRoadmapProps = {
+  href: string;
+  title: string;
+  description: string;
+};
+
+export function DedicatedRoadmap(props: DedicatedRoadmapProps) {
+  const { href, title, description } = props;
+
+  return (
+    <Flex as={'a'} target='_blank' href={ href } p={5} px={5} mt={6} rounded='md' alignItems='center'  _hover={{ bg: 'yellow.400'}} bg='yellow.300'>
+      <Box d={['none', 'none', 'none', 'block', 'block']} mr={4} height='32px' w='32px' as={TreeIcon} color='gray.900' />
+      <Box as='span'>
+        <Heading fontSize='lg' as={'h4'} mb='2px' color='gray.900'>{ title }</Heading>
+        <Text color='gray.700' as='span' fontSize='md'>{ description }</Text>
+      </Box>
+    </Flex>
+  );
+}

components/md-renderer/mdx-components/heading.tsx

@@ -1,21 +1,22 @@
+import React from 'react';
 import styled from 'styled-components';
-import Link from 'components/icons/link.svg';
+import LinkIcon from 'components/icons/link.svg';
 
-const linkify = (Component) => {
-  return (props) => {
+const linkify = (Component: React.FunctionComponent<any>) => {
+  return function EnrichedHeading(props: { children: string }): React.ReactNode {
     const text = props.children;
-    const id = text.toLowerCase && text
+    const id = text?.toLowerCase && text
       .toLowerCase()
       .replace(/[^\x00-\x7F]/g, '')
       .replace(/\s+/g, '-')
       .replace(/[?!]/g, '');
 
     return (
-      <Component id={ id }>
-        <HeaderLink href={ `#${id}` }>
-          <Link />
+      <Component id={id}>
+        <HeaderLink href={`#${id}`}>
+          <LinkIcon />
         </HeaderLink>
-        { props.children }
+        {props.children}
       </Component>
     );
   };
@@ -34,22 +35,23 @@ const HeaderLink = styled.a`
 
 const H1 = styled.h1`
   position: relative;
-  font-size: 42px;
+  font-size: 32px;
+  line-height: 40px;
   font-weight: 700;
-  margin: 32px 0 10px !important;
-  
+  margin: 20px 0 10px !important;
+
   &:hover ${HeaderLink} {
     display: flex;
   }
 `;
 
 const H2 = styled(H1).attrs({ as: 'h2' })`
-  font-size: 32px;
+  font-size: 30px;
 `;
 
 const H3 = styled(H1).attrs({ as: 'h3' })`
   margin: 22px 0 8px;
-  font-size: 30px;
+  font-size: 28px;
 `;
 
 const H4 = styled(H1).attrs({ as: 'h4' })`
@@ -67,11 +69,13 @@ const H6 = styled(H1).attrs({ as: 'h6' })`
   font-size: 18px;
 `;
 
-export const Headings = {
-  h1: linkify(H1),
-  h2: linkify(H2),
-  h3: linkify(H3),
-  h4: linkify(H4),
-  h5: linkify(H5),
-  h6: linkify(H6),
+const Headings = {
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  h4: H4,
+  h5: H5,
+  h6: H6
 };
+
+export default Headings;

components/md-renderer/mdx-components/iframe.js

@@ -1,8 +0,0 @@
-import styled from 'styled-components';
-
-export const IFrame = styled.iframe`
-  display: block;
-  width: 100%;
-  border: none;
-  margin: 30px auto;
-`;

components/md-renderer/mdx-components/iframe.tsx

@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+
+type IFrameProps = {
+  title: string;
+  src: string;
+};
+
+const AspectRatioBox = styled.div`
+  position: relative;
+  max-width: 100%;
+  margin-bottom: 18px;
+
+  &:before {
+    height: 0;
+    content: "";
+    display: block;
+    padding-bottom: 50%;
+  }
+
+  & > iframe {
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+export default function IFrame(props: IFrameProps) {
+  return (
+    <AspectRatioBox>
+      <iframe
+        frameBorder={0}
+        title={props.title}
+        src={props.src}
+        allow={'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'}
+        allowFullScreen
+      />
+    </AspectRatioBox>
+  );
+}

components/md-renderer/mdx-components/index.js

@@ -1,23 +0,0 @@
-import P from './p';
-import { Headings } from './heading';
-import { Pre } from './pre';
-import BlockQuote from './blockquote';
-import { Table } from './table';
-import { IFrame } from './iframe';
-import { Img } from './img';
-import EnrichedLink from './a';
-import { BadgeLink } from '../../link/badge-link';
-
-const MdxComponents = {
-  p: P,
-  ...Headings,
-  pre: Pre,
-  blockquote: BlockQuote,
-  a: EnrichedLink,
-  table: Table,
-  iframe: IFrame,
-  img: Img,
-  BadgeLink: BadgeLink
-};
-
-export default MdxComponents;

components/md-renderer/mdx-components/index.tsx

@@ -0,0 +1,34 @@
+import { Code } from '@chakra-ui/react';
+import { P } from './p';
+import Headings from './heading';
+import { Pre } from './pre';
+import BlockQuote from './blockquote';
+import { Table } from './table';
+import IFrame from './iframe';
+import { Img } from './img';
+import EnrichedLink from './a';
+import { BadgeLink } from './badge-link';
+import { Li, Ul } from './ul';
+import PremiumBlock from './premium-block';
+import { ResourceGroupTitle } from './resource-group-title';
+import { DedicatedRoadmap } from './dedicated-roadmap';
+
+const MdxComponents = {
+  p: P,
+  ...Headings,
+  pre: Pre,
+  blockquote: BlockQuote,
+  a: EnrichedLink,
+  DedicatedRoadmap,
+  table: Table,
+  iframe: IFrame,
+  img: Img,
+  code: Code,
+  BadgeLink: BadgeLink,
+  ResourceGroupTitle: ResourceGroupTitle,
+  PremiumBlock: PremiumBlock,
+  ul: Ul,
+  li: Li
+};
+
+export default MdxComponents;

components/md-renderer/mdx-components/p.js

@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-
-const P = styled.p`
-  color: inherit;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 26px;
-  margin: 0 0 12px;
-  
-  img + em { 
-    text-align: center;
-    color: #666666;
-    font-style: normal;
-    font-size: 14px;
-    margin: 5px 0 10px;
-    display: block;
-  } 
-`;
-
-export default P;

components/md-renderer/mdx-components/p.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Text } from '@chakra-ui/react';
+import styled from 'styled-components';
+
+type EnrichedTextType = {
+  children: React.ReactNode;
+}
+
+export const P = styled.p`
+  line-height: 27px;
+  font-size: 16px;
+  color: black;
+  margin-bottom: 18px;
+`;

components/md-renderer/mdx-components/premium-block.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Box, Button, Heading, Text } from '@chakra-ui/react';
+import { LockIcon } from '@chakra-ui/icons';
+
+type PremiumBlockProps = {
+  title: string;
+  description: string;
+};
+
+export default function PremiumBlock(props: PremiumBlockProps) {
+  return (
+    <Box p='40px' textAlign='center' rounded='5px' mb='18px' bg='gray.50' borderWidth={1}>
+      <LockIcon color='gray.300' height='45px' w='45px' mb='18px' />
+      <Heading as='h3' fontSize='30px' mb='10px'>{props.title}</Heading>
+      <Text mb='18px'>{props.description}</Text>
+      <Button colorScheme='green'>Become a Member</Button>
+    </Box>
+  );
+}

components/md-renderer/mdx-components/resource-group-title.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Heading } from '@chakra-ui/react';
+
+type ResourceGroupTitleProps = {
+  children: React.ReactNode;
+};
+
+export function ResourceGroupTitle(props: ResourceGroupTitleProps) {
+  const { children } = props;
+
+  return <Heading mt='20px' color='gray.800' fontSize='14px' pb='5px' borderBottomWidth={1} textTransform='uppercase' as="h2" mb={'10px'}>{children}</Heading>;
+}

components/md-renderer/mdx-components/table.js

@@ -5,7 +5,7 @@ export const Table = styled.table`
   width: 100%;
   border-spacing: 0;
   margin: 20px 0;
-  
+
   th {
     color: #666;
     font-size: 12px;
@@ -16,10 +16,10 @@ export const Table = styled.table`
     vertical-align: middle;
     padding: 5px 10px;
   }
-  
+
   td {
     font-size: 14px;
     padding: 10px;
     border-bottom: 1px solid #EAEAEA;
   }
-`;
+`;

components/md-renderer/mdx-components/ul.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { UnorderedList } from '@chakra-ui/react';
+import styled from 'styled-components';
+
+export const Ul = styled.ul`
+  margin-left: 40px;
+  margin-bottom: 18px;
+  
+  ul {
+    margin-top: 18px;
+  }
+`;
+
+export const Li = styled.li`
+  margin-bottom: 7px;
+`;

components/opensource-banner.tsx

@@ -0,0 +1,29 @@
+import { Box, Container, Heading, Link, Text } from '@chakra-ui/react';
+
+export function OpensourceBanner() {
+  return (
+    <Box bg='white' borderTopWidth={1} py={['45px', '45px', '70px']} textAlign='center'>
+      <Container maxW='container.sm'>
+        <Heading fontSize={['25px', '25px', '35px']} mb={['10px', '10px', '20px']}>Open Source</Heading>
+        <Text lineHeight='26px' fontSize={['15px', '15px', '16px']} mb='20px'>The project is OpenSource,&nbsp;
+          <Link
+            _hover={{ textDecoration: 'none' }}
+            href='https://github.com/search?o=desc&q=stars%3A%3E100000&s=stars&type=Repositories'
+            target='_blank'
+            borderBottomWidth={1}
+            fontWeight={600}
+          >6th most starred project on GitHub</Link> and is visited by hundreds of thousands of
+          developers every month.</Text>
+        <iframe
+          src='https://ghbtns.com/github-btn.html?user=kamranahmedse&repo=developer-roadmap&type=star&count=true&size=large'
+          frameBorder='0'
+          scrolling='0'
+          width='170'
+          height='30'
+          style={{ margin: 'auto' }}
+          title='GitHub'
+        />
+      </Container>
+    </Box>
+  );
+}

components/page-footer/carbon.scss

@@ -1,62 +0,0 @@
-#carbonads {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
-  Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
-  position: fixed;
-  bottom: 15px;
-  right: 20px;
-}
-
-#carbonads {
-  display: flex;
-  max-width: 330px;
-  background-color: hsl(0, 0%, 98%);
-  box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, .1);
-}
-
-#carbonads a {
-  color: inherit;
-  text-decoration: none;
-}
-
-#carbonads a:hover {
-  color: inherit;
-}
-
-#carbonads span {
-  position: relative;
-  display: block;
-  overflow: hidden;
-}
-
-#carbonads .carbon-wrap {
-  display: flex;
-}
-
-.carbon-img {
-  display: block;
-  margin: 0;
-  line-height: 1;
-}
-
-.carbon-img img {
-  display: block;
-}
-
-.carbon-text {
-  font-size: 13px;
-  padding: 10px;
-  line-height: 1.5;
-  text-align: left;
-}
-
-.carbon-poweredby {
-  display: block;
-  padding: 8px 10px;
-  background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4);
-  text-align: center;
-  text-transform: uppercase;
-  letter-spacing: .5px;
-  font-weight: 600;
-  font-size: 9px;
-  line-height: 1;
-}

components/page-footer/custom-ad.jsx

@@ -1,41 +0,0 @@
-export const CustomAd = () => {
-  return (
-    <div id="carbonads">
-      <span>
-        <span className="carbon-wrap">
-          <a
-            href="https://freemote.com/strategy?sl=roadmap"
-            className="carbon-img"
-            target="_blank"
-            rel="noopener sponsored"
-          >
-            <img
-              src="/fm-img.png"
-              alt="FM Logo"
-              border="0"
-              height="100"
-              width="130"
-              style={{ maxWidth: "130px" }}
-            />
-          </a>
-          <a
-            href="https://freemote.com/strategy?sl=roadmap"
-            className="carbon-text"
-            target="_blank"
-            rel="noopener sponsored"
-          >
-            He Went from ZERO TO $74,000 as a Full Time Developer in 7 Weeks
-          </a>
-        </span>
-        <a
-          href="https://github.com/sponsors/kamranahmedse"
-          className="carbon-poweredby"
-          target="_blank"
-          rel="noopener sponsored"
-        >
-          Sponsored by
-        </a>
-      </span>
-    </div>
-  );
-};

components/page-footer/index.js

@@ -1,71 +0,0 @@
-import siteConfig from 'content/site';
-import { FooterWrap } from './style.js';
-import './carbon.scss';
-import { CustomAd } from "./custom-ad";
-
-const PageFooter = () => (
-  <FooterWrap className="border-top">
-    <div className="container">
-      <div className="foot-cols-wrap row">
-        <div className="site-meta-wrap col-12 col-sm-12 col-lg col-xl col-md-12">
-          <div className="site-meta">
-            <div className="brand-detail">
-              <a href="/" className='brand'><img src="/brand.png" alt="" /> roadmap.sh</a>
-              <span className="preposition">by</span>
-              <a href="https://twitter.com/kamranahmedse" target="_blank" className='follow-author'>@kamranahmedse</a>
-            </div>
-            <div className="brand-explanation">
-              <p>Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.</p>
-            </div>
-            <p className='meta-links'>
-              &copy; roadmap.sh &middot;
-              &nbsp; <a href="/about">FAQ</a> &middot;
-              &nbsp; <a href="/terms">Terms</a> &middot;
-              &nbsp; <a href="/privacy">Privacy</a>
-            </p>
-          </div>
-        </div>
-        <div className="site-contribute foot-col col-12 col-sm-4 col-lg-2">
-          <ul>
-            <li className='foot-header'>Contribute</li>
-            <li><a href='https://gum.co/roadmap-sh'  target="_blank">Sponsor us</a></li>
-            <li><a href={ siteConfig.url.addGuide } target="_blank">Write a Guide</a></li>
-            <li><a href={ siteConfig.url.addRoadmap } target="_blank">Submit a Roadmap</a></li>
-            <li><a href='/about'>About this Site</a></li>
-          </ul>
-        </div>
-        <div className="site-learn foot-col col-12 col-sm-4 col-lg-2">
-          <ul>
-            <li className="foot-header">Learn</li>
-            <li><a href="/guides">Read Guides</a></li>
-            <li><a href="/watch">Watch Videos</a></li>
-            <li><a href="/podcasts">Podcasts</a></li>
-            <li><a href="https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1" target="_blank">YouTube</a></li>
-          </ul>
-        </div>
-        <div className="site-learn foot-col col-12 col-sm-4 col-lg-2">
-          <ul>
-            <li className="foot-header">Most Visited</li>
-            <li><a href="/frontend">Frontend Roadmap</a></li>
-            <li><a href="/backend">Backend Roadmap</a></li>
-            <li><a href="/devops">DevOps Roadmap</a></li>
-            <li><a href="/roadmaps">Upcoming</a></li>
-          </ul>
-        </div>
-      </div>
-    </div>
-
-    <CustomAd />
-
-    {/* Do not show on local */}
-    { process.env.GA_SECRET && false && (
-      <>
-        <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CE7DLK3Y&placement=roadmapsh" id="_carbonads_js"></script>
-        {/*<div id="codefund"></div>*/}
-        {/*<script src="https://app.codefund.io/properties/681/funder.js" async></script>*/}
-      </>
-    ) }
-  </FooterWrap>
-);
-
-export default PageFooter;

components/page-footer/style.js

@@ -1,94 +0,0 @@
-import styled from 'styled-components';
-
-export const FooterWrap = styled.div`
-  padding: 65px 0;
-
-  .site-meta {
-    margin-bottom: 30px;
-    width: 350px;
-
-    .brand-detail {
-      display: flex;
-      align-items: center;
-    }
-
-    .brand {
-      display: flex;
-      align-items: center;
-      font-weight: 600;
-      color: #000;
-      text-decoration: none;
-
-      img {
-        height: 25px;
-        width: 25px;
-        margin-right: 8px;
-      }
-    }
-
-    .preposition {
-      margin: 0 7px;
-    }
-
-    .follow-author {
-      background-color: #1e99e6;
-      border-radius: 3px;
-      color: #fff;
-      cursor: pointer;
-      font-size: 12px;
-      font-weight: 600;
-      line-height: 20px;
-      padding: 0 6px;
-      white-space: nowrap;
-      text-decoration: none;
-
-      &:hover {
-        background: #43aaea;
-      }
-    }
-
-    .brand-explanation {
-      color: #999;
-
-      p {
-        font-size: 15px;
-        line-height: 24px;
-        margin: 15px 0;
-      }
-    }
-
-    .meta-links {
-      color: #a3a3a3;
-      font-size: 15px;
-
-      a {
-        color: #000;
-        text-decoration: none;
-      }
-    }
-  }
-
-  .foot-col {
-    margin-bottom: 20px;
-    a {
-      color: #999;
-    }
-
-    .foot-header {
-      font-weight: 500;
-      margin-bottom: 7px;
-    }
-
-    ul {
-      margin: 0;
-      padding: 0;
-
-      li {
-        margin-bottom: 2px;
-        font-size: 15px;
-        list-style: none;
-        margin-left: 0;
-      }
-    }
-  }
-`;

components/page-header.tsx

@@ -0,0 +1,37 @@
+import { Box, Container, Heading, Text } from '@chakra-ui/react';
+import React from 'react';
+
+type PageHeaderProps = {
+  title: string;
+  subtitle: string;
+  children?: React.ReactNode;
+  beforeTitle?: React.ReactNode;
+};
+
+export function PageHeader(props: PageHeaderProps) {
+  const { title, subtitle, children, beforeTitle = null } = props;
+
+  return (
+    <Box pt={['25px', '20px', '45px']} pb={['20px', '15px', '30px']} borderBottomWidth={1} mb='30px'>
+      <Container maxW='container.md' position='relative'>
+        {beforeTitle}
+        <Heading
+          as='h1'
+          color='black'
+          fontSize={['28px', '33px', '40px']}
+          fontWeight={700}
+          mb={['2px', '2px', '5px']}
+        >
+          {title}
+        </Heading>
+        <Text fontSize={['13px', '14px', '15px']}>{subtitle}</Text>
+      </Container>
+
+      {children && (
+        <Container maxW='container.md'>
+          {children}
+        </Container>
+      )}
+    </Box>
+  );
+}

components/page-header/index.js

@@ -1,16 +0,0 @@
-import { HeaderWrap, Subtitle, Title } from './style';
-
-const PageHeader = ({
-  title,
-  subtitle,
-  children,
-}) => (
-  <HeaderWrap>
-    <Title>{ title }</Title>
-    <Subtitle dangerouslySetInnerHTML={{ __html: subtitle }} />
-
-    { children }
-  </HeaderWrap>
-);
-
-export default PageHeader;

components/page-header/style.js

@@ -1,22 +0,0 @@
-import styled from 'styled-components';
-
-export const HeaderWrap = styled.div`
-  text-align: center;
-  padding: 45px 30px;
-`;
-
-export const Title = styled.h1`
-  font-size: 48px;
-  font-weight: 700;
-  margin-bottom: 12px;
-`;
-
-export const Subtitle = styled.p`
-  font-size: 16px;
-  color: #444;
-  
-  a {
-    color: inherit;
-    font-weight: 700;
-  }
-`;

components/page-logo-header/index.js

@@ -1,13 +0,0 @@
-import { HeaderWrap, Subtitle, Title, Logo } from './style';
-
-const PageLogoHeader = ({ title, subtitle, children, }) => (
-  <HeaderWrap>
-    <Logo src='/brand.png' alt='' />
-    <Title>{ title }</Title>
-    <Subtitle dangerouslySetInnerHTML={{ __html: subtitle }} />
-
-    { children }
-  </HeaderWrap>
-);
-
-export default PageLogoHeader;

components/page-logo-header/style.js

@@ -1,30 +0,0 @@
-import styled from 'styled-components';
-
-export const HeaderWrap = styled.div`
-  text-align: center;
-  padding: 45px 30px;
-`;
-
-export const Title = styled.h1`
-  font-size: 40px;
-  font-weight: 700;
-  margin-bottom: 12px;
-`;
-
-export const Subtitle = styled.p`
-  font-size: 16px;
-  color: #444;
-  margin-bottom: 0;
-  
-  a {
-    color: inherit;
-    font-weight: 700;
-  }
-`;
-
-
-export const Logo = styled.img`
-  width: 75px;
-  height: 75px;
-  margin-bottom: 26px;
-`;

components/page-wrapper.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Box } from '@chakra-ui/react';
+
+type PageWrapperProps = {
+  children: React.ReactNode;
+}
+
+export function PageWrapper(props: PageWrapperProps) {
+  const { children } = props;
+
+  return (
+    <Box bgColor='brand.bg' bgImage='url(/bg.jpg)' bgRepeat='no-repeat' bgSize='100%' w='100%' minH='100vh'>
+      { children }
+    </Box>
+  );
+}

components/related-roadmaps.tsx

@@ -0,0 +1,80 @@
+import { Badge, Box, Button, Container, Link, Stack, Text } from '@chakra-ui/react';
+import { RoadmapType } from '../lib/roadmap';
+
+type RelatedRoadmapsProps = {
+  roadmaps: RoadmapType[];
+};
+
+const colorsList = [
+  'gray.700',
+  'purple.700',
+  'blue.700',
+  'red.700',
+  'green.700',
+  'teal.700',
+  'yellow.700',
+  'cyan.700',
+  'pink.700'
+];
+
+const roadmapTitleMapping: Record<string, string> = {
+  "Software Design and Architecture": "Software Design",
+}
+
+export function RelatedRoadmaps(props: RelatedRoadmapsProps) {
+  const { roadmaps } = props;
+  if (!roadmaps.length) {
+    return null;
+  }
+
+  return (
+    <Box borderTopWidth={1} bgColor='gray.50' pb='35px' pt='5px'>
+      <Container maxW='container.md'>
+        <Box display='flex' position='relative' top='-23px' alignItems='center' justifyContent='space-between'>
+          <Text textAlign='center' borderWidth={1} bg='white' p='4px' fontWeight='bold' rounded='md' px={'15px'}>
+            Related Roadmaps
+          </Text>
+
+          <Button as={Link} variant='outline' bg='white' size='sm' _hover={{ textDecoration: 'none', bg: 'gray.100' }}
+                  href='/'>
+            <Text as='span' display={['inline', 'none', 'none']}>More &rarr;</Text>
+            <Text as='span' display={['none', 'inline', 'inline']}>All Roadmaps &rarr;</Text>
+          </Button>
+        </Box>
+
+        <Stack spacing='5px'>
+          {roadmaps.map((roadmap, counter) => (
+            <Link
+              href={`/${roadmap.id}`}
+              key={roadmap.id}
+              borderWidth={1}
+              borderColor='blue.100'
+              py='7px'
+              px='14px'
+              rounded='md'
+              bg='white'
+              textDecoration={'none'}
+              _hover={{ bg: 'gray.100', borderColor: 'blue.200' }}
+              bgGradient='linear(to-r, white, gray.50)'
+              display='flex'
+              alignItems='center'
+              flexDir={['column', 'row', 'row']}
+            >
+              <Text
+                color={colorsList[counter]}
+                as='span'
+                fontWeight='bold'
+                display={['inline-block']}
+                minWidth='150px'
+                mr='10px'
+              >
+                {roadmapTitleMapping[roadmap.featuredTitle] || roadmap.featuredTitle}
+              </Text>
+              <Text as='span' display={['block', 'inline']} isTruncated maxWidth='100%' fontSize={['sm', 'sm', 'md']} color='gray.700'>{roadmap.featuredDescription}</Text>
+            </Link>
+          ))}
+        </Stack>
+      </Container>
+    </Box>
+  );
+}

components/roadmap-header/index.js

@@ -1,62 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowLeft, faClock, faEnvelope, faHandshake } from '@fortawesome/free-solid-svg-icons';
-import { BadgeLink, BadgesList, DarkBadge, PrimaryBadge, SecondaryBadge } from 'components/badges';
-import siteConfig from "content/site";
-import { Description, Header, Title, MenuItemLink, MenuItems } from './style';
-import Link from 'next/link';
-import classNames from 'classnames';
-
-const RoadmapHeader = ({ roadmap, page = 'landscape' }) => (
-  <Header>
-    <Title>{ roadmap.title }</Title>
-    <Description>{ roadmap.description }</Description>
-    <BadgesList className="mt-4">
-      <BadgeLink href="/roadmaps">
-        <DarkBadge>
-          <FontAwesomeIcon className='d-none d-md-block' icon={ faArrowLeft } />
-          Other Roadmaps
-        </DarkBadge>
-      </BadgeLink>
-      { roadmap.upcoming && (
-        <BadgeLink href="/signup">
-          <SecondaryBadge>
-            <FontAwesomeIcon className='d-none d-md-block' icon={ faClock } />
-            Upcoming Roadmap
-          </SecondaryBadge>
-        </BadgeLink>
-      ) }
-      { !roadmap.upcoming && (
-        <BadgeLink href={ `${siteConfig.url.issue}?title=[${roadmap.title}] - Title Here` } target="_blank" className='d-none d-md-block' >
-          <SecondaryBadge>
-            <FontAwesomeIcon icon={ faHandshake } />
-            Suggest Changes
-          </SecondaryBadge>
-        </BadgeLink>
-      ) }
-
-      <BadgeLink href="/signup">
-        <PrimaryBadge>
-          <FontAwesomeIcon className='d-none d-md-block' icon={ faEnvelope } />
-          Send me Updates
-        </PrimaryBadge>
-      </BadgeLink>
-    </BadgesList>
-
-    <MenuItems className="border-bottom">
-      <div className={ classNames({ 'd-none': roadmap.title.toLowerCase() !== 'frontend developer' })}>
-        <Link href={ `${roadmap.url}` } passHref>
-          <MenuItemLink className={ classNames({ active: page === 'landscape', }) }>Landscape</MenuItemLink>
-        </Link>
-        <Link href={ `${roadmap.url}/resources` } passHref>
-          <MenuItemLink className={ classNames({ active: page === 'resources', }) }>Resources</MenuItemLink>
-        </Link>
-        {/*<Link href={ `${roadmap.url}/resources` } passHref>*/}
-        {/*  <MenuItemLink className={ classNames({ active: false, }) }>Project Ideas</MenuItemLink>*/}
-        {/*</Link>*/}
-      </div>
-    </MenuItems>
-
-  </Header>
-);
-
-export default RoadmapHeader;

components/roadmap-header/style.js

@@ -1,50 +0,0 @@
-import styled from 'styled-components';
-
-export const Header = styled.div`
-  text-align: center;
-  padding: 45px 30px 10px;
-`;
-
-export const Title = styled.h1`
-  font-weight: 700;
-  margin-bottom: 12px;
-  font-size: 48px;
-`;
-
-export const Description = styled.p`
-  font-size: 16px;
-  color: #444444;
-`;
-
-export const MenuItems = styled.div`
-  margin: 35px 0 15px;
-`;
-
-export const MenuItemLink = styled.a`
-  display: inline-block;
-  position: relative;
-  padding: 5px 10px 8px;
-  text-decoration: none;
-  color: rgb(102, 102, 102);
-  font-size: 14px;
-  font-weight: 400;
-  &.active, &.active:hover {
-    color: #2d2d2d;
-    
-    &:after {
-      position: absolute;
-      content: "";
-      display: block;
-      height: 0;
-      left: 9px;
-      right: 9px;
-      bottom: -1px;
-      border-bottom: 2px solid currentColor;
-    }
-  }
-  
-  &:hover {
-    text-decoration: none;
-    color: #111111;
-  }
-`;

components/roadmap-resources/index.js

@@ -1,35 +0,0 @@
-import { Summary, SummaryContainer, UpcomingContainer } from './style';
-import GuideBody from 'components/guide-body';
-import RoadmapHeader from 'components/roadmap-header';
-import SharePage from 'components/share-page';
-import MdRenderer from 'components/md-renderer';
-
-const RoadmapResources = ({ roadmap }) => {
-  if (roadmap.upcoming) {
-    return (
-      <>
-        <RoadmapHeader roadmap={ roadmap } />
-        <UpcomingContainer>
-          <GuideBody guide={{ fileName: 'upcoming' }} />
-        </UpcomingContainer>
-      </>
-    );
-  }
-
-  const filePath = roadmap.resources.replace(/^\//, '');
-  const ResourcesContent = require(`../../content/${filePath}`).default;
-
-  return (
-    <SummaryContainer>
-      <RoadmapHeader roadmap={ roadmap } page='resources' />
-      <Summary className="container">
-        <MdRenderer>
-          <ResourcesContent />
-        </MdRenderer>
-        <SharePage title={ roadmap.description } url={ roadmap.url } />
-      </Summary>
-    </SummaryContainer>
-  )
-};
-
-export default RoadmapResources;

components/roadmap-resources/style.js

@@ -1,21 +0,0 @@
-import styled from 'styled-components';
-
-export const SummaryContainer = styled.div``;
-
-export const UpcomingContainer = styled.div`
-  text-align: center;
-  padding: 40px 0 50px;
-
-  .container {
-    position: relative;
-  }
-`;
-
-export const Summary = styled.div`
-  margin-top: 35px;
-  min-height: 400px;
-  max-width: 1000px;
-  display: block;
-  position: relative;
-  text-align: left;
-`;

components/roadmap-summary/index.js

@@ -1,36 +0,0 @@
-import { Summary, SummaryContainer, UpcomingContainer } from './style';
-import classNames from 'classnames';
-import GuideBody from 'components/guide-body';
-import RoadmapHeader from 'components/roadmap-header';
-import SharePage from 'components/share-page';
-import MdRenderer from 'components/md-renderer';
-
-const RoadmapSummary = ({ roadmap }) => {
-  if (roadmap.upcoming) {
-    return (
-      <>
-        <RoadmapHeader roadmap={ roadmap } />
-        <UpcomingContainer>
-          <GuideBody guide={{ fileName: 'upcoming' }} />
-        </UpcomingContainer>
-      </>
-    );
-  }
-
-  const filePath = roadmap.path.replace(/^\//, '');
-  const RoadmapContent = require(`../../content/${filePath}`).default;
-
-  return (
-    <SummaryContainer>
-      <RoadmapHeader roadmap={ roadmap } />
-      <Summary className={classNames("container", { "container-small": roadmap.isTextHeavy })}>
-        <MdRenderer>
-          <RoadmapContent />
-        </MdRenderer>
-        <SharePage title={ roadmap.description } url={ roadmap.url } />
-      </Summary>
-    </SummaryContainer>
-  )
-};
-
-export default RoadmapSummary;

components/roadmap-summary/style.js

@@ -1,21 +0,0 @@
-import styled from 'styled-components';
-
-export const SummaryContainer = styled.div``;
-
-export const UpcomingContainer = styled.div`
-  text-align: center;
-  padding: 40px 0 50px;
-
-  .container {
-    position: relative;
-  }
-`;
-
-export const Summary = styled.div`
-  margin-top: 35px;
-  min-height: 400px;
-  max-width: 1000px;
-  display: block;
-  position: relative;
-  text-align: left;
-`;

components/roadmap/content-drawer.tsx

@@ -0,0 +1,117 @@
+import { Box, Button, Flex, Text } from '@chakra-ui/react';
+import { RemoveScroll } from 'react-remove-scroll';
+import { RoadmapType } from '../../lib/roadmap';
+import RoadmapGroup from '../../pages/[roadmap]/[group]';
+import { CheckIcon, CloseIcon, RepeatIcon } from '@chakra-ui/icons';
+import { queryGroupElementsById } from '../../lib/renderer';
+
+type ContentDrawerProps = {
+  roadmap: RoadmapType;
+  groupId: string;
+  onClose?: () => void;
+};
+
+export function ContentDrawer(props: ContentDrawerProps) {
+  const { roadmap, groupId, onClose = () => null } = props;
+  if (!groupId) {
+    return null;
+  }
+
+  const isDone = localStorage.getItem(groupId) === 'done';
+
+  return (
+    <Box zIndex={99999} pos="relative">
+      <Box
+        onClick={onClose}
+        pos="fixed"
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        bg="black"
+        opacity={0.4}
+      />
+      <RemoveScroll allowPinchZoom>
+        <Box
+          p="0px 30px 30px"
+          position="fixed"
+          w={['100%', '60%', '40%']}
+          bg="white"
+          top={0}
+          right={0}
+          bottom={0}
+          borderLeftWidth={'1px'}
+          overflowY="scroll"
+        >
+          <Flex
+            mt="20px"
+            justifyContent="space-between"
+            alignItems="center"
+            zIndex={1}
+          >
+            {!isDone && (
+              <Button
+                onClick={() => {
+                  localStorage.setItem(groupId, 'done');
+                  queryGroupElementsById(groupId).forEach((item) =>
+                    item?.classList?.add('done')
+                  );
+                  onClose();
+                }}
+                colorScheme="green"
+                leftIcon={<CheckIcon />}
+                size="xs"
+                iconSpacing={0}
+              >
+                <Text
+                  as="span"
+                  d={['block', 'none', 'none', 'block']}
+                  ml="10px"
+                >
+                  Mark as Done
+                </Text>
+              </Button>
+            )}
+            {isDone && (
+              <Button
+                onClick={() => {
+                  localStorage.removeItem(groupId);
+                  queryGroupElementsById(groupId).forEach((item) =>
+                    item?.classList?.remove('done')
+                  );
+                  onClose();
+                }}
+                colorScheme="red"
+                leftIcon={<RepeatIcon />}
+                size="xs"
+                iconSpacing={0}
+              >
+                <Text
+                  as="span"
+                  d={['block', 'none', 'none', 'block']}
+                  ml="10px"
+                >
+                  Mark as Pending
+                </Text>
+              </Button>
+            )}
+            <Button
+              onClick={onClose}
+              colorScheme="yellow"
+              ml="5px"
+              leftIcon={<CloseIcon width="8px" />}
+              iconSpacing={0}
+              size="xs"
+            >
+              <Text as="span" d={['none', 'none', 'none', 'block']} ml="10px">
+                Close
+              </Text>
+            </Button>
+          </Flex>
+
+          <RoadmapGroup isOutlet roadmap={roadmap} group={groupId} />
+        </Box>
+      </RemoveScroll>
+    </Box>
+  );
+}

components/roadmap/edit-content-page-link.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Box, Button, Divider, Link, Text } from '@chakra-ui/react';
+
+type EditContentPageLinkProps = {
+  href: string;
+};
+
+export function EditContentPageLink(props: EditContentPageLinkProps) {
+  const { href } = props;
+
+  return (
+    <Box my='30px'>
+      <Divider mb="15px" orientation="horizontal" />
+      <Text
+        lineHeight="23px"
+        fontWeight={500}
+        fontSize="14px"
+        color="gray.500"
+        mb="10px"
+      >
+        This page is a work in progress. Help us by writing a small
+        introduction to the topic and suggesting a few links to read more
+        about this topic.
+      </Text>
+      <Button
+        size="sm"
+        py="20px"
+        as={Link}
+        href={href}
+        target="_blank"
+        isFullWidth
+        colorScheme={'gray'}
+        _hover={{ textDecoration: 'none', bg: 'gray.200' }}
+      >
+        Edit this Page
+      </Button>
+    </Box>
+  );
+}

components/roadmap/home-roadmap-item.tsx

@@ -0,0 +1,121 @@
+import { Badge, Box, Flex, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
+import { InfoIcon } from '@chakra-ui/icons';
+
+type RoadmapGridItemProps = {
+  title: string;
+  subtitle: string;
+  isCommunity?: boolean;
+  isUpcoming?: boolean;
+  colorIndex?: number;
+  isNew?: boolean;
+  url: string;
+};
+
+const bgColorList = [
+  'red.100',
+  'yellow.100',
+  'green.200',
+  'teal.200',
+  'blue.200',
+  'red.200',
+  'gray.200',
+  'teal.200',
+  'yellow.100',
+  'green.200',
+  'red.200'
+];
+
+export function HomeRoadmapItem(props: RoadmapGridItemProps) {
+  const {
+    title,
+    subtitle,
+    isCommunity,
+    isNew,
+    colorIndex = 0,
+    url,
+    isUpcoming
+  } = props;
+
+  return (
+    <Box
+      position='relative'
+      as={Link}
+      href={url}
+      _hover={{
+        textDecoration: 'none',
+        bg: 'rgba(255,255,255,.10)'
+      }}
+      sx={{
+        // On mobile devices, don't change the scale
+        '@media (hover: none)': {
+          '&:hover': {
+            bg: 'rgba(255,255,255,.05)'
+          }
+        }
+      }}
+      flex={1}
+      shadow='2xl'
+      className={'home-roadmap-item'}
+      bg={'rgba(255,255,255,.05)'}
+      color='white'
+      p='15px'
+      rounded='10px'
+      pos='relative'
+    >
+      {isCommunity && (
+        <Tooltip label={'Community contribution'} hasArrow placement='top'>
+          <InfoIcon opacity={0.5} position='absolute' top='10px' right='10px' />
+        </Tooltip>
+      )}
+
+      <Heading
+        fontSize={['17px', '17px', '22px']}
+        color={bgColorList[colorIndex]}
+        mb='5px'
+        d='flex'
+        alignItems='center'
+      >
+        {title}
+
+        { isNew && <Badge position='absolute' bottom={0} right={0} colorScheme='yellow' ml='10px'>New</Badge> }
+      </Heading>
+      <Text color='gray.200' fontSize={['13px']}>
+        {subtitle}
+      </Text>
+
+      {isUpcoming && (
+        <Flex
+          alignItems='center'
+          justifyContent='center'
+          pos='absolute'
+          left={0}
+          right={0}
+          top={0}
+          bottom={0}
+          rounded='10px'
+        >
+          <Text
+            color='white'
+            bg='gray.600'
+            zIndex={1}
+            fontWeight={600}
+            p={'5px 10px'}
+            rounded='10px'
+          >
+            Upcoming
+          </Text>
+          <Box
+            bg={'black'}
+            pos='absolute'
+            top={0}
+            left={0}
+            right={0}
+            bottom={0}
+            rounded={'10px'}
+            opacity={0.5}
+          />
+        </Flex>
+      )}
+    </Box>
+  );
+}