Landing page (#206)

Co-authored-by: Lindsay Walker <[email protected]>

Author: enoldev

assets/scss/common/_custom.scss

@@ -4,10 +4,58 @@
     border: 0px;
 }
 
+.offcanvas.show .lp {
+    color: black;
+}
+
+[data-dark-mode] .landing-steps {
+    color: black;
+}
+
+[data-dark-mode] .landing-info {
+    color: black;
+}
+
+[data-dark-mode] .landing-info a {
+    color: black;
+}
+
+[data-dark-mode] .curriculum-listing {
+    color: black;
+}
+
+[data-dark-mode] .curriculum-listing a {
+    color: black;
+}
+
+[data-dark-mode] .content-level-selector-container {
+    color: white;
+}
+
+[data-dark-mode] .content-level-selector {
+    background-color: #212529;
+    border-bottom: 1px solid white;
+    text-align: center;
+    color: white;
+}
+
+.offcanvas .show.nav-link.lp{
+    color: black !important;
+}
+
 .nav-link.lp{
     color: white;
 }
 
+.nav-link.lp a:hover{
+    color: white !important;
+}
+
+.nav a:hover{
+    text-decoration: underline;
+    color: white !important; 
+}
+
 .nav-link.lp.active {
     color: white;
     text-decoration: underline;
@@ -23,3 +71,140 @@
     text-decoration: none;
     color: black;
 }
+.nav-item a {
+    color: red;
+}
+.nav-item a:hover {
+    color: red;
+}
+
+.content-level-selector-container {
+    color: black;
+    text-align: center;
+    font-size: 20px;
+}
+
+.content-level-selector {
+    border: 0px solid white;
+    border-bottom: 1px solid black;
+    text-align: center;
+}
+
+
+/* LANDING 1 */
+
+.landing-steps {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    max-width: 850px;
+    align-items: center;
+    background-color: #f8f7f7;
+    border: 1px solid #eeeded;
+    border-radius: 10px;
+    padding: 10px;
+}
+
+.landing-steps a {
+    color: black;
+}
+
+.landing-steps a:hover {
+    text-decoration: none;
+}
+
+@media (max-width: 700px) {
+    .landing-steps {
+        max-width: 300px;
+    }
+
+    .landing-steps .column {
+        width: 100%;
+        text-align: center;
+        font-size: 30px;
+    }
+
+    .landing-arrow-right {
+        display: none;
+    }
+
+    .landing-arrow-down {
+        display: inline-block;
+    }
+
+    .landing-arrow {
+        width: 100% !important;
+        text-align: center;
+        margin-top: 5px;
+    }
+}
+
+@media (min-width: 700px) {
+    .landing-steps .column {
+        width: 31%;
+        text-align: center;
+        font-size: 35px;
+    }
+
+    .landing-arrow-right {
+        display: inline-block;
+    }
+
+    .landing-arrow-down {
+        display: none;
+    }
+
+    .landing-arrow {
+        width: 3% !important;
+    }
+}
+
+
+.landing-info {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+}
+
+@media (max-width: 950px) {
+    .landing-info .column {
+        width: 100%;
+        margin-right: 10px;
+    }
+}
+
+@media (min-width: 950px) {
+    .landing-info .column {
+        width: calc(50% - 10px);
+        margin-right: 10px;
+    }
+}
+
+
+.landing-card {
+    background-color: rgb(243, 243, 243);
+    border: 1px solid rgb(213, 213, 213);
+    width: 100%;
+}
+
+.landing-card-title {
+    color: grey;
+}
+
+.landing-card-subtitle {
+    font-size: 24px;
+    font-weight: bold;
+}
+
+.landing-button {
+    margin-right: 5px;
+    border-radius: 6px;
+    background-color: white;
+    border: 1px solid rgb(224, 224, 224);
+    cursor: pointer;
+}
+
+.landing-button.selected {
+    background-color: rgb(228, 244, 255); 
+    border: 1px solid rgb(146, 219, 255);
+}

config/_default/menus/menus.en.toml

@@ -2,21 +2,29 @@
   name = "Curriculum"
   url = "/curriculum"
   weight = 1000
+  [main.params]
+    identifier = "curriculum"
 
 [[main]]
   name = "Prerequisites"
   url = "/prerequisites/web3-and-pl"
   weight = 2000
+  [main.params]
+    identifier = "prerequisites"
 
 [[main]]
-  name = "Resources"
-  url = "/resources/toolkits/introduction"
+  name = "Dev-Tools"
+  url = "/dev-tools/toolkits/introduction/"
   weight = 3000
+  [main.params]
+    identifier = "dev-tools"
 
 [[main]]
   name = "Website"
   url = "https://pl-launchpad.io"
   weight = 4000
+  [main.params]
+    identifier = "website"
 
 # [[main]]
 #   name = "Get Started"
@@ -107,12 +115,12 @@
   identifier = "prereq"
 
 
-[[resources]]
+[[devtools]]
   name = "PL Toolkits and SDKs"
   weight = 10
   identifier = "resources-toolkits"
 
-[[resources]]
+[[devtools]]
   name = "Other Resources"
   weight = 20
   identifier = "resources-other"

config/_default/params.toml

@@ -54,7 +54,7 @@ lqipWidth = "20x"
 smallLimit = "300"
 
 # Footer
-footer = "Powered by <a class=\"text-muted\" href=\"https://fleek.co/\">Fleek</a>, <a class=\"text-muted\" href=\"https://gohugo.io/\">Hugo</a>, and <a class=\"text-muted\" href=\"https://getdoks.org/\">Doks</a>"
+footer = 'Made with &hearts; by Protocol Labs. <br /> The icons used are provided by <a href="https://flaticon.com">Flaticon</a>.'
 
 # Feed
 copyRight = "Copyright (c) Protocol Labs"

content/en/curriculum/_index.md

@@ -0,0 +1,3 @@
+---
+title : "Curriculum"
+---

content/en/resources/other-resources/additional-learning.md renamed to content/en/dev-tools/other-resources/additional-learning.md

@@ -3,7 +3,7 @@ title: "Additional Learning"
 description: "Deeper Learning and Context to Prepare you for Web3"
 draft: false
 menu:
-    resources:
+    devtools:
         parent: "resources-other"
 weight: 80
 ---

content/en/resources/other-resources/built-on-ipfs.md renamed to content/en/dev-tools/other-resources/built-on-ipfs.md

@@ -3,7 +3,7 @@ title: "Built on IPFS and Filecoin"
 description: "Apps, Tooling, and Other Projects"
 draft: false
 menu:
-    resources:
+    devtools:
         parent: "resources-other"
 weight: 70
 ---

content/en/resources/toolkits/ceramic.md renamed to content/en/dev-tools/toolkits/ceramic.md

@@ -3,7 +3,7 @@ title: "Fleek"
 description: "An Easy-to-Use Web3 Hosting Service"
 draft: false
 menu:
-    resources:
+    devtools:
         parent: "resources-toolkits"
 weight: 40
 ---