New learn page (#137)

* New learn page

Signed-off-by: Marc Duiker <[email protected]>

* Update announcement

Signed-off-by: Marc Duiker <[email protected]>

* Update Uni summary

Signed-off-by: Marc Duiker <[email protected]>

* Update footer

Signed-off-by: Marc Duiker <[email protected]>

---------

Signed-off-by: Marc Duiker <[email protected]>

config.toml

@@ -39,35 +39,16 @@ weight = 1
 
 [[menu.main]]
 name = "Learn"
-identifier = "learn"
+URL = "/learn/"
 weight = 2
 
-[[menu.main]]
-name = "Concepts"
-URL = "https://docs.dapr.io/concepts/"
-parent = "learn"
-weight = 1
-
-[[menu.main]]
-name = "Getting Started"
-URL = "https://docs.dapr.io/getting-started/"
-parent = "learn"
-weight = 2
-
-[[menu.main]]
-name = "Quickstarts"
-URL = "https://docs.dapr.io/getting-started/quickstarts/"
-parent = "learn"
-weight = 3
-
 [[menu.main]]
 name = "Community"
 URL = "/community/"
 weight = 3
 
 [[menu.main]]
 name = "Enterprise"
-
 weight = 5
 
 [[menu.main]]
@@ -119,6 +100,11 @@ name = "Quickstarts"
 URL = "https://docs.dapr.io/getting-started/quickstarts/"
 weight = 3
 
+[[menu.footer_column1]]
+name = "Dapr University"
+URL = "https://www.diagrid.io/dapr-university"
+weight = 4
+
 [[menu.footer_column2]]
 name = "GitHub"
 URL = "https://github.com/dapr/community"
@@ -129,6 +115,16 @@ name = "Discord"
 URL = "https://bit.ly/dapr-discord"
 weight = 2
 
+[[menu.footer_column2]]
+name = "YouTube"
+URL = "https://www.youtube.com/@daprdev"
+weight = 3
+
+[[menu.footer_column2]]
+name = "LinkedIn"
+URL = "https://www.linkedin.com/company/daprdev/"
+weight = 4
+
 [[menu.footer_column3]]
 name = "Blog"
 URL = "https://blog.dapr.io/posts"

content/learn/_index.md

@@ -0,0 +1,37 @@
+---
+title: "Learn Dapr"
+description: "Learn to build and run distributed applications with Dapr."
+draft: false
+
+learn:
+
+  - title: "Concepts"
+    summary: "Learn the core concepts of Dapr through the Dapr docs. Learn about the Dapr runtime, the building block APIs, components, and cross-cutting concerns that Dapr provides out of the box."
+    cta :
+      enable : true
+      label : "Learn the Dapr Concepts"
+      link : "https://docs.dapr.io/concepts/"
+
+  - title: "Getting Started"
+    summary: "Use the _Getting Started_ guide in the docs to install Dapr locally and interact with the Dapr sidecar using the State Management API."
+    cta :
+      enable : true
+      label : "Get started with Dapr"
+      link : "https://docs.dapr.io/getting-started/"
+
+  - title: "Quickstarts"
+    summary: "Try the different building block APIs by running Dapr applications locally. The Quickstarts are available in multiple languages including .NET, Java, Python, JavaScript, and Go."
+    cta :
+      enable : true
+      label : "Try the Dapr Quickstarts"
+      link : "https://docs.dapr.io/getting-started/quickstarts/"
+
+  - title: "Dapr University"
+    summary: "Learn Dapr through Dapr University, a free, self-paced learning program that provides hands-on courses to learn Dapr. It uses a cloud-based sandbox environment, so it requires no local setup, you only need a browser. Dapr University is community sponsored by Diagrid."
+    cta :
+      enable : true
+      label : "Try the Dapr University courses"
+      link : "https://www.diagrid.io/dapr-university"
+
+
+---

data/homepage.yml

@@ -66,7 +66,7 @@ caseStudy:
 news:
   enable : true
   prefix : "Announcement "
-  text: "Learn Dapr with Dapr University!"
+  text: "Learn Dapr with Dapr University, a free and self-paced learning program!"
   link: "https://www.diagrid.io/dapr-university"
   #text : "Read about our Dapr Meteors community program!"
   #link : "https://dapr.io/community/program/"

themes/bigspring/layouts/learn/list.html

@@ -0,0 +1,71 @@
+{{ define "main" }}
+
+{{ partial "page-header.html" . }}
+
+{{ with .Params }}
+{{ if .learn }}
+<section class="bg-light">
+  <div class="width-80 vertical-align-center">
+    <div class="grid grid-column-auto grid-spacing padding-top-down-30">
+      {{ range .learn }}
+      <div class="feature-card">
+        <h3>{{ .title }}</h3>
+        <div class="border-decoration">
+          <p>{{ .summary | markdownify }}</p>
+        </div>
+        <div class="flex-left padding-top-down-10 gap-xsm">
+          <a href="{{ .cta.link | absURL }}"><button class="btn-feature btn-secondary btn-md">{{ .cta.label }}</button></a>
+        </div>
+      </div>
+      {{ end }}
+    </div>
+  </div>
+</section>
+{{ end }}
+{{ end }}
+
+
+
+<!-- panel -->
+{{ with .Params.panel }}
+<section class="bg-light padding-top-80">
+  <div class="padding-bottom-20">
+    <h2 class="text-center">{{ .title | title }}</h2>
+    {{with .video}}
+    <div class="text-center">
+      <iframe width="860" height="515" src="{{ . | safeURL }}" title="YouTube video player" class="iframe"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowfullscreen></iframe>
+    </div>
+    {{end}}
+  </div>
+</section>
+{{ end }}
+<!-- /panel -->
+
+<!-- call to action -->
+{{ with .Params.cta }}
+<section class="section">
+  <div class="feature-card width-60 vertical-align-center width-80-mobile">
+    <div class="flex align-items-center justify-content-center gap-md column-mobile">
+      <div>
+        <img src="{{ .image | absURL }}" class="img-fluid" width="200px">
+      </div>
+      <div class="text-center-mobile">
+        <h2>{{ .title | markdownify }}</h2>
+        {{with .content }}<p class="mb-4">{{ . | markdownify }}</p>{{ end }}
+        {{ if .button.enable }}
+        {{ with .button }}
+        <a href="{{ .link | absURL }}" 
+          class="btn btn-primary stretched-link"><button class="btn-primary btn-md">{{ .label }}</button></a>
+        {{ end }}
+        {{ end }}
+      </div>
+    </div>
+  </div>
+</section>
+{{ end }}
+<!-- /call to action -->
+
+{{ end }}