feat: tutorials index page

package.json

@@ -65,7 +65,7 @@
     "defaults"
   ],
   "config": {
-    "posts_per_page": 6,
+    "posts_per_page": 12,
     "image_sizes": {
       "xxs": {
         "width": 30

routes.yaml

@@ -32,6 +32,7 @@ collections:
   
   /tutorials/:
     permalink: /tutorials/{slug}/
+    template: tutorials
     filter: tag:tutorials
     data: tag.tutorials
 

tutorials.hbs

@@ -0,0 +1,62 @@
+{{!< default}} {{#tag}} <main class="w-default flex flex-wrap content-center mt-24">
+  <div class="w-3/3 mx-auto">
+    <h1
+      class="text-4xl text-center tracking-tight font-extrabold text-gray-900 dark:text-gray-100 sm:text-5xl md:text-6xl">
+      <span class="inline-block xl:inline text-gradient text-gradient bg-gradient-to-r from-blue-500 to-blue-700">
+        {{name}}
+      </span>
+    </h1>
+    <p class="text-base text-center dark:text-gray-200 sm:text-lg md:text-xl md:max-w-6xl mt-10">
+      {{description}}
+    </p>
+  </div>
+  </main>
+
+  {{/tag}}
+
+  <div class="w-default flex flex-row space-x-4 flex-wrap content-center justify-center">
+    <p class="text-gray-500 w-full text-center text-sm mt-1">Popular topics:</p>
+    {{#get "tags" limit="all" filter="slug:-[features,tutorials,careers,developers,blog]"}}
+    {{#foreach tags}}
+    <a href="{{url}}" class="mt-2 px-2 py-1 bg-blue-500 rounded-full inline-block text-white ring-0 hover:ring-4 transition">
+      {{name}}
+    </a>
+    {{/foreach}}
+    {{/get}}
+  </div>
+
+  <div
+    class="shadow-xl sm:px-2 px-5 pt-8 pb-10 rounded-lg mt-5 bg-white dark:bg-gray-900">
+    <div class="w-default flex content-center space-x-2 flex-wrap justify-around  mx-auto ">
+      <div class="mt-2 text-center sm:text-left dark:text-gray-200">
+        <h3 class="text-2xl">Have a question you need answered?</h3>
+        <p>Submit your question on the forum and get help from the community.</p>
+      </div>
+
+      <a href="https://speckle.community/new-topic?title=Question:%20How%20can%20I%20...&category=help&tags=v2"
+        target="_blank"
+        class="mt-2 border-2 rounded-lg border-blue-500 bg-blue-500 hover:bg-blue-400 transition p-4 flex text-white text-center justify-center">
+        <span class="self-center">Ask a question</span>
+      </a>
+    </div>
+  </div>
+
+  <div class="w-default mt-6 grid gap-5 md:grid-cols-2 lg:grid-cols-3">
+
+    {{#foreach posts columns=3}}
+
+    {{> cardBlogSm}}
+
+    {{/foreach}}
+
+
+  </div>
+
+  <aside class="w-default py-10">
+    {{pagination}}
+  </aside>
+
+  {{!-- {{> cardCTA }} --}}
+
+  {{!-- TODO: pagination --}}
+  {{!-- NOTE: seems like custom collections do not paginate? --}}