feat: adds aurecom logo (replaces grimshaw)

feat: adds a download page

.github/workflows/close-issue.yml

@@ -0,0 +1,78 @@
+name: Update issue Status
+
+on:
+  issues:
+    types: [closed]
+
+jobs:
+  update_issue:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Get project data
+        env:
+          GITHUB_TOKEN: ${{secrets.GHPROJECT_TOKEN}}
+          ORGANIZATION: specklesystems
+          PROJECT_NUMBER: 9
+        run: |
+          gh api graphql --header 'GraphQL-Features: projects_next_graphql' -f query='
+            query($org: String!, $number: Int!) {
+              organization(login: $org){
+                projectNext(number: $number) {
+                  id
+                  fields(first:20) {
+                    nodes {
+                      id
+                      name
+                      settings
+                    }
+                  }
+                }
+              }
+            }' -f org=$ORGANIZATION -F number=$PROJECT_NUMBER > project_data.json
+
+          echo 'PROJECT_ID='$(jq '.data.organization.projectNext.id' project_data.json) >> $GITHUB_ENV
+          echo 'STATUS_FIELD_ID='$(jq '.data.organization.projectNext.fields.nodes[] | select(.name== "Status") | .id' project_data.json) >> $GITHUB_ENV
+          
+          echo "$PROJECT_ID"
+          echo "$STATUS_FIELD_ID"
+          
+          echo 'DONE_ID='$(jq '.data.organization.projectNext.fields.nodes[] | select(.name== "Status") | .settings | fromjson | .options[] | select(.name== "Done") | .id' project_data.json) >> $GITHUB_ENV
+          echo "$DONE_ID"
+
+      - name: Add Issue to project #it's already in the project, but we do this to get its node id!
+        env:
+          GITHUB_TOKEN: ${{secrets.GHPROJECT_TOKEN}}
+          ISSUE_ID: ${{ github.event.issue.node_id }}
+        run: |
+          item_id="$( gh api graphql --header 'GraphQL-Features: projects_next_graphql' -f query='
+            mutation($project:ID!, $id:ID!) {
+              addProjectNextItem(input: {projectId: $project, contentId: $id}) {
+                projectNextItem {
+                  id
+                }
+              }
+            }' -f project=$PROJECT_ID -f id=$ISSUE_ID --jq '.data.addProjectNextItem.projectNextItem.id')"
+          
+          echo 'ITEM_ID='$item_id >> $GITHUB_ENV
+          
+      - name: Update Status
+        env:
+          GITHUB_TOKEN: ${{secrets.GHPROJECT_TOKEN}}
+          ISSUE_ID: ${{ github.event.issue.node_id }}
+        run: |
+          gh api graphql --header 'GraphQL-Features: projects_next_graphql' -f query='
+            mutation($project:ID!, $status:ID!, $id:ID!, $value:String!) {
+              set_status: updateProjectNextItemField(
+                input: {
+                  projectId: $project
+                  itemId: $id
+                  fieldId: $status
+                  value: $value
+                }
+              ) {
+                projectNextItem {
+                  id
+                }
+              }
+            }' -f project=$PROJECT_ID -f status=$STATUS_FIELD_ID -f id=$ITEM_ID -f value=${{ env.DONE_ID }}
+          

.github/workflows/open-issue.yml

@@ -0,0 +1,50 @@
+name: Move new issues into Project
+
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  track_issue:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Get project data
+        env:
+          GITHUB_TOKEN: ${{secrets.GHPROJECT_TOKEN}}
+          ORGANIZATION: specklesystems
+          PROJECT_NUMBER: 9
+        run: |
+          gh api graphql --header 'GraphQL-Features: projects_next_graphql' -f query='
+            query($org: String!, $number: Int!) {
+              organization(login: $org){
+                projectNext(number: $number) {
+                  id
+                  fields(first:20) {
+                    nodes {
+                      id
+                      name
+                      settings
+                    }
+                  }
+                }
+              }
+            }' -f org=$ORGANIZATION -F number=$PROJECT_NUMBER > project_data.json
+
+          echo 'PROJECT_ID='$(jq '.data.organization.projectNext.id' project_data.json) >> $GITHUB_ENV
+          echo 'STATUS_FIELD_ID='$(jq '.data.organization.projectNext.fields.nodes[] | select(.name== "Status") | .id' project_data.json) >> $GITHUB_ENV
+     
+      - name: Add Issue to project
+        env:
+          GITHUB_TOKEN: ${{secrets.GHPROJECT_TOKEN}}
+          ISSUE_ID: ${{ github.event.issue.node_id }}
+        run: |
+          item_id="$( gh api graphql --header 'GraphQL-Features: projects_next_graphql' -f query='
+            mutation($project:ID!, $id:ID!) {
+              addProjectNextItem(input: {projectId: $project, contentId: $id}) {
+                projectNextItem {
+                  id
+                }
+              }
+            }' -f project=$PROJECT_ID -f id=$ISSUE_ID --jq '.data.addProjectNextItem.projectNextItem.id')"
+          
+          echo 'ITEM_ID='$item_id >> $GITHUB_ENV

README.md

@@ -1,61 +1,33 @@
-# Ghost Starter Theme
+# Speckle Website Theme
 
-A starter framework for Ghost themes! Fork this repository and start your development here with all the main things you need to develop a custom Ghost theme.
+## Local development
 
- 
+### Installing ghost
 
-# First time using a Ghost theme?
+We first need to install ghost locally to then work on our custom theme.
+Use Node 16.13.0.
 
-Ghost uses a simple templating language called [Handlebars](http://handlebarsjs.com/) for its themes.
+- `npm install ghost-cli@latest -g`
+- `ghost install 4.48.2 --local` (or update to match the curret versionnpm run dev)
+- Set up you Ghost site
+- You can import stuff from our live website from `https://speckle.systems/ghost/#/settings/labs` > Export your content and import into your local site
+- Note: images are not exported automatically unforch
+- `ghost stop`
+- On windows: `npm install -g win-node-env`
 
-We've documented our default theme pretty heavily so that it should be fairly easy to work out what's going on just by reading the code and the comments. Once you feel comfortable with how everything works, we also have full [theme API documentation](https://themes.ghost.org) which explains every possible Handlebars helper and template.
+### Theme setup
 
-**The main files are:**
+- Clone this repo somewhere on you machine
 
-- `default.hbs` - The main template file
-- `index.hbs` - Used for the home page
-- `post.hbs` - Used for individual posts
-- `page.hbs` - Used for individual pages
-- `tag.hbs` - Used for tag archives
-- `author.hbs` - Used for author archives
+- `npm install`
+- `npm run zip`
 
-One neat trick is that you can also create custom one-off templates just by adding the slug of a page to a template file. For example:
+Now, in order to trigger Ghost load our theme and use it live as we're editing it, we need to first upload it as a zip.
 
-- `page-about.hbs` - Custom template for the `/about/` page
-- `tag-news.hbs` - Custom template for `/tag/news/` archive
-- `author-ali.hbs` - Custom template for `/author/ali/` archive
-
- 
-
-# Development
-
-Styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need [Node](https://nodejs.org/), [Yarn](https://yarnpkg.com/) and [Gulp](https://gulpjs.com) installed globally. After that, from the theme's root directory:
-
-```bash
-# Install
-yarn
-
-# Run build & watch for changes
-yarn dev
-```
-
-Now you can edit `/assets/css/` files, which will be compiled to `/assets/built/` automatically.
-
-The `zip` Gulp task packages the theme files into `dist/<theme-name>.zip`, which you can then upload to your site.
-
-```bash
-yarn zip
-```
-
-&nbsp;
-
-# PostCSS Features Used
-
-- Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser.
-- [Color Mod](https://github.com/jonathantneal/postcss-color-mod-function)
-
-&nbsp;
-
-# Copyright & License
-
-Copyright (c) 2013-2020 Ghost Foundation - Released under the [MIT license](LICENSE).
+- in the ghost admin setting upload the zip file just generated inside your `ghost-theme\dist` folder
+- set it as active theme
+- got to `YOUR-LOCAL-GHOST-INSTALLATION-FOLDER\ghost-local\content\themes`
+- replace the newly created `speckle-starter-theme` folder with your actual ghost theme repo folder (I had to rename it to `speckle-starter-theme`)
+- alternatively create a symlink
+- `npm run dev` inside you theme folder
+- now it should be up and running

assets/built/theme.js

@@ -0,0 +1 @@
+import Swiper from"swiper/bundle";console.log("hello");

assets/built/vars.css

@@ -1,2 +1,34 @@
-:root{--color-primary:#3eb0ef;--color-base:#131313;--color-border:#ddd;--color-bg:#f5f5f5;--color-success:#80b912;--color-error:#f05230;--font-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;--font-serif:Georgia,Times,serif;--font-mono:Menlo,Courier,monospace;--font-light:100;--font-normal:400;--font-bold:700;--font-heavy:800;--xlarge:1680px;--large:1280px;--medium:980px;--small:740px;--xsmall:480px;--height:4rem;--margin:2rem;--radius:0.5rem}
-/*# sourceMappingURL=vars.css.map */
+/* purgecss start ignore */
+
+/* Variables
+/* ---------------------------------------------------------- */
+
+:root {
+  /* Colours */
+  --color-primary: #3eb0ef;
+  --color-base: #131313;
+  --color-border: #ddd;
+  --color-bg: #f5f5f5;
+  --color-success: #80b912;
+  --color-error: #f05230;
+  /* Fonts */
+  --font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  --font-serif: Georgia, Times, serif;
+  --font-mono: Menlo, Courier, monospace;
+  --font-light: 100;
+  --font-normal: 400;
+  --font-bold: 700;
+  --font-heavy: 800;
+  /* Breakpoints */
+  --xlarge: 1680px;
+  --large: 1280px;
+  --medium: 980px;
+  --small: 740px;
+  --xsmall: 480px;
+  /* Sizes */
+  --height: 4rem;
+  --margin: 2rem;
+  --radius: 0.5rem;
+}
+
+/* purgecss end ignore */

assets/css/screen.css

@@ -3,17 +3,38 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+@import "swiper/swiper-bundle";
+
 /* Main
 /* ---------------------------------------------------------- */
 
-.main-illustration {
-  opacity: 0.75;
+[x-cloak] {
+  display: none !important;
 }
 
-@media (prefers-color-scheme: dark) {
-  .main-illustration {
-    opacity: 0.3;
-  }
+a.no-underline{
+  text-decoration: none !important;
+}
+a.no-underline:hover{
+  text-decoration: none;
+}
+
+/* pre{
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-width: 100%;
+}
+
+code{
+  word-break: break-all;
+} */
+
+.kg-image-card{
+  @apply content-center;
+}
+
+.kg-image {
+  @apply mx-auto;
 }
 
 .text-gradient {
@@ -27,99 +48,138 @@
   @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
 }
 
-.page-about-content h2, .page-about-content h3 {
+.page-about-content h2,
+.page-about-content h3 {
   @apply my-10;
 }
 
-.post-body h2 {
-  @apply text-4xl my-4 px-4 sm:px-2 md:px-0;
+.swiper-slide {
+  height: auto !important;
 }
 
-.post-body h3 {
-  @apply text-2xl my-4 px-4 sm:px-2 md:px-0;
+.perspective-700 {
+  perspective: 750px;
+  /* z-index: 100; */
 }
 
-.post-body p{
-  @apply my-3 mx-auto text-lg max-w-prose mx-auto px-4 sm:px-2 md:px-0;
+.perspective-transform {
+  transform: rotateX(25deg) rotateY(0deg) translateZ(0px);
+  transform-style: preserve-3d;
+  transition: 1s ease all;
 }
 
-.post-body blockquote {
-  @apply my-4 pl-2 text-lg border-l-2 mx-auto max-w-prose border-l-4 border-blue-600 pl-5;
+.perspective-transform-0 {
+  transform: rotateX(0deg) rotateY(0deg);
+  transform-style: preserve-3d;
+  transition: 1s ease all;
 }
 
-.post-body figure {
-  @apply my-10;
+.perspective-transform:hover {
+  transform: rotateX(10deg) rotateY(0deg) translateZ(20px);
 }
 
-.post-body hr{
-  @apply my-10;
+.no-underline {
+  text-decoration: none !important;
 }
 
-.post-body ul{
-  @apply text-lg my-4 list-inside list-disc my-3 mx-auto text-lg max-w-prose mx-auto px-4 sm:px-2 md:px-0;
+.medium-zoom-image--opened {
+  @apply relative z-50;
 }
 
-.post-body li{
-  @apply text-lg;
+.medium-zoom-overlay{
+  @apply dark:bg-gray-900 bg-gray-200 z-50;
 }
 
-.post-body a {
-  @apply text-blue-500 font-normal;
+.kg-bookmark-card {
+  @apply shadow-md hover:shadow-xl transition-shadow dark:bg-gray-900 bg-white rounded-lg overflow-x-hidden;
 }
 
-.post-body a:hover {
-  @apply font-bold;
+.kg-bookmark-container {
+  @apply grid grid-cols-3 content-center dark:text-gray-100 text-gray-800 ;
+  text-decoration: none !important;
 }
 
-.post-body pre {
-  @apply p-4 px-8 my-10 rounded-xl bg-gray-200 dark:bg-gray-700 shadow-xl;
+.kg-bookmark-content{
+  @apply px-4 col-span-2 self-center;
 }
 
-figcaption{
-  @apply text-sm text-center;
+.kg-bookmark-description {
+  @apply line-clamp-1;
+}
+.kg-bookmark-description {
+  @apply dark:text-gray-100 text-gray-800 line-clamp-2;
 }
 
-figure.kg-card.kg-image-card.kg-width-full img {
-  left: 50%;
-  margin-left: -50vw;
-  margin-right: -50vw;
-  max-width: 100vw;
-  position: relative;
-  right: 50%;
-  width: 99.5vw;
+.kg-bookmark-thumbnail{
+  @apply col-span-1;
 }
 
-.kg-gallery-container {
-    display: flex;
-    flex-direction: column;
-    max-width: 1040px;
-    width: 100%;
+.kg-bookmark-thumbnail img {
+  @apply object-cover;
+  margin: 0 !important;
+}
+
+.kg-bookmark-metadata {
+  display: none;
+}
+
+.kg-bookmark-title {
+  @apply text-xl;
+}
+.kg-bookmark-description {
+  @apply text-xs line-clamp-3;
 }
 
 .kg-gallery-row {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
+  @apply flex space-x-2;
 }
 
-.kg-gallery-image img {
-    display: block;
-    margin: 0;
-    width: 100%;
-    height: 100%;
+.kg-gallery-image {
+  @apply opacity-100;
 }
 
-.kg-gallery-row:not(:first-of-type) {
-    margin: 0.75em 0 0 0;
+figcaption {
+  @apply text-sm text-center;
 }
 
-.kg-gallery-image:not(:first-of-type) {
-    margin: 0 0 0 0.75em;
+.prose code::after, .prose code::before {
+    content: "" !important;
 }
 
-.kg-gallery-card + .kg-image-card.kg-width-wide,
-.kg-gallery-card + .kg-gallery-card,
-.kg-image-card.kg-width-wide + .kg-gallery-card,
-.kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
-    margin: -2.25em 0 3em;
+.prose code {
+  @apply px-1 rounded-sm text-blue-500 dark:bg-gray-900 bg-white;
+}
+
+.prose > h1::before,
+.prose > h2::before,
+.prose > h3::before,
+.prose > h4::before,
+.prose > h5::before,
+.prose > h6::before {
+  display: block;
+  content: " ";
+  height: 80px;
+  margin-top: -80px;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.is-active-link {
+  @apply transition-colors text-gray-900 dark:text-gray-100 bg-blue-100 dark:bg-blue-900;
+}
+
+.toc-list-item a {
+  @apply text-sm transition-colors text-gray-600 dark:text-gray-400;
+}
+
+.toc-list-item a:hover {
+  @apply dark:text-blue-500;
+}
+
+.toc-list-item {
+  @apply my-1;
+}
+
+.node-name--H3::before {
+  content: "– " !important;
 }

careers.hbs

@@ -1,82 +1,165 @@
-{{!< default}}
-
-
-{{#tag}}
-
-  <main class="w-default flex flex-wrap content-center mt-24">
-    <div class="w-3/3">
-      <h1 class="text-4xl tracking-tight font-extrabold text-gray-800 dark:text-gray-100 sm:text-5xl md:text-6xl">
-        <span class="block xl:inline text-gradient text-gradient bg-gradient-to-r from-blue-500 to-blue-700">
-          {{name}}
-        </span>
-        @ Speckle
-      </h1>
-      <p class="text-base text-justify text-gray-500 sm:text-lg md:text-xl md:max-w-6xl mt-10">
-        {{description}}
-      </p>
-    </div>
+{{!< default}} {{#tag}} <main class="w-default flex flex-wrap content-center mt-24">
+  <div class="w-3/3">
+    <h1 class="text-4xl tracking-tight font-extrabold text-gray-800 dark:text-gray-100 sm:text-5xl md:text-6xl">
+      <span class="block xl:inline text-gradient text-gradient bg-gradient-to-r from-blue-500 to-blue-700">
+        {{name}}
+      </span>
+      @ Speckle
+    </h1>
+    <p class="text-base text-justify text-gray-800 dark:text-gray-200 sm:text-lg md:text-xl md:max-w-6xl mt-10">
+      {{description}}
+    </p>
+  </div>
   </main>
 
-{{/tag}}
+  {{/tag}}
 
-<div class="w-default mt-12 grid gap-5 md:grid-cols-2 lg:grid-cols-2 sm:mt-24">
+  <div class="w-default mt-12 grid gap-5 md:grid-cols-2 lg:grid-cols-2 sm:mt-24">
 
-  {{#get "posts" filter="tags:careers"}}
+    {{#get "posts" filter="tags:careers"}}
 
     {{#foreach posts visibility="all"}}
 
-      {{> cardCareers}}
+    {{> cardCareers}}
 
     {{/foreach}}
 
-  {{/get}}
+    {{/get}}
 
-  <div class="relative rounded-xl py-10 overflow-hidden flex col-span-2 md:col-span-2 grid grid-cols-2 gap-4">
+    <div class="relative rounded-xl py-10 overflow-hidden col-span-2 md:col-span-2 grid grid-cols-2 gap-4">
 
-    <div class="relative px-8 col-span-2 md:col-span-1">
-      <div class="text-3xl font-semibold text-gray-800 dark:text-gray-200">
-        How to apply
+      <div class="relative px-8 col-span-2 md:col-span-1">
+        <div class="text-3xl font-semibold text-gray-600 dark:text-gray-400">
+          How to apply
 
-      </div>
-      <blockquote class="mt-4">
-        <div class="relative text-lg text-gray-800 dark:text-gray-200 md:flex-grow">
-          <p class="relative">
-
-            Send us an up-to-date CV & a quick intro
-            explaining your motivation for joining and
-            what you think your contribution to the team
-            can be.
-
-
-          </p>
         </div>
+        <blockquote class="mt-4">
+          <div class="relative text-lg text-gray-600 dark:text-gray-400 md:flex-grow">
+            <p class="relative">
 
-      </blockquote>
+              Send your CV and tell us why you think you'd be a great fit for the role! We'd also like
+              you to include a small example of how you would improve Speckle, whether it's an idea, a sketch or a Pull Request.
+            </p>
+          </div>
+
+        </blockquote>
+      </div>
+
+      <div class="relative px-8 col-span-2 md:col-span-1">
+        <div class="text-3xl font-semibold text-gray-600 dark:text-gray-400">
+          Didn't find the right position?
+
+        </div>
+        <blockquote class="mt-4">
+          <div class="relative text-lg text-gray-600 dark:text-gray-400 md:flex-grow">
+            <p class="relative">
+
+              No worries! We are always looking for
+              talented people who
+              believe in our mission and want to change
+              AEC.
+              If you're intrested in working at Speckle,
+              get in touch at
+              careers@speckle.systems
+
+
+            </p>
+          </div>
+
+        </blockquote>
+      </div>
     </div>
 
-    <div class="relative px-8 col-span-2 md:col-span-1">
-      <div class="text-3xl font-semibold text-gray-800 dark:text-gray-200">
-        Didn't find the right position?
-
-      </div>
-      <blockquote class="mt-4">
-        <div class="relative text-lg text-gray-800 dark:text-gray-200 md:flex-grow">
-          <p class="relative">
-
-            No worries! We are always looking for
-            talented people who
-            believe in our mission and want to change
-            AEC.
-            If you're intrested in working at Speckle,
-            get in touch at
-            hello@speckle.systems
-
-
-          </p>
-        </div>
-
-      </blockquote>
+    <div class="prose prose-xl dark:prose-dark mb-10 block max-w-none col-span-2 mx-4">
+      <h1>Life at Speckle</h1>
+      <p>Wondering what it's like to work with us? Here's some of our perks.</p>
     </div>
-  </div>
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 w-full col-span-2 mb-24">
+      
+      <div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden col-span-1 md:col-span-2">
+        <div class="flex-shrink-0 ">
+          <img class="h-72 w-full object-cover" src="https://media4.giphy.com/media/XymXANrzgI4k6FL6zr/giphy.gif"
+            alt="Working from home">
+        </div>
+        <div class="flex-1 bg-white dark:bg-gray-900 dark:text-gray-200 p-6 flex flex-col justify-between">
+          <div class="flex-1">
+            <p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
+              Remote First
+            </p>
+            <p class="mt-3 text-base dark:text-gray-300 text-gray-700 line-clamp-3 md:line-clamp-4">
+              No office, no commute! Work from home or from wherever you fancy, 100% of the time (we do want though a 6h timezone overalp of sorts between each other).
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden col-span-1">
+        <div class="flex-shrink-0 ">
+          <img class="h-52 w-full object-cover" src="https://expanscape.com/assets/images/A7_6.jpg"
+            alt="gadget">
+        </div>
+        <div class="flex-1 bg-white dark:bg-gray-900 dark:text-gray-200 p-6 flex flex-col justify-between">
+          <div class="flex-1">
+            <p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
+              Generous Gadget Budget
+            </p>
+            <p class="mt-3 text-base dark:text-gray-300 text-gray-700 line-clamp-3 md:line-clamp-4">
+              You can choose your own gear - we allocate a Generous Gadget Budget (tm) to each of us to spend on the hardware and software that makes you happy.
+            </p>
+          </div>
+        </div>
+      </div>
 
-</div>
+      <div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden col-span-1">
+        <div class="flex-shrink-0 ">
+          <img class="h-52 w-full object-cover" src="https://discourse.speckle.works/uploads/default/optimized/1X/e77a5e5d33d47990227ef47d418e64d386716891_2_666x500.jpeg"
+            alt="izzys bunnies going to the vet">
+        </div>
+        <div class="flex-1 bg-white dark:bg-gray-900 dark:text-gray-200 p-6 flex flex-col justify-between">
+          <div class="flex-1">
+            <p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
+              Flexible Working Hours
+            </p>
+            <p class="mt-3 text-base dark:text-gray-300 text-gray-700 line-clamp-3 md:line-clamp-4">
+              There is no Big Brother watching you. If you need to take your bunnies to the vet, just do so.
+            </p>
+          </div>
+        </div>
+      </div>
+      
+      <div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden col-span-1 md:col-span-2">
+        <div class="flex-shrink-0 ">
+          <img class="w-full h-72 object-cover" src="{{asset 'images/bonkers.png'}}"
+            alt="standups">
+        </div>
+        <div class="flex-1 bg-white dark:bg-gray-900 dark:text-gray-200 p-6 flex flex-col justify-between">
+          <div class="flex-1">
+            <p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
+              Wonky Stand-Ups
+            </p>
+            <p class="mt-3 text-base dark:text-gray-300 text-gray-700 line-clamp-3 md:line-clamp-4">
+              Our mid-morning (10.30am, we're not really morning people) ritual is - or should be - never boring. There's a rotating chairperson-ship that has full control over the proceedings.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden col-span-1 md:col-span-3">
+        <div class="flex-1 bg-white dark:bg-gray-900 dark:text-gray-200 p-6 flex flex-col justify-between">
+          <div class="flex-1">
+            <p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
+              Open Source & Community: The Greater Good!
+            </p>
+            <p class="mt-3 text-base dark:text-gray-300 text-gray-700 line-clamp-3 md:line-clamp-4 prose prose-blue max-w-none">
+              Last, but not least: doing open source is a <a href="https://speckle.systems/blog/opensource-aec-speckle/">unique adventure</a>. We work in the open, constantly engaging with our community and users from across backgrounds, domains and cultures. Defintively not a desk job!
+            </p>
+          </div>
+        </div>
+        <div class="flex-shrink-0 ">
+          <img class="w-full h-80 object-cover" src="https://user-images.githubusercontent.com/7696515/123794194-7c036700-d8da-11eb-8462-2fb63b2058d4.png"
+            alt="izzys bunnies going to the vet">
+        </div>
+      </div>
+
+    </div>
+
+  </div>

custom-careers-post.hbs

@@ -1,76 +1,53 @@
-{{!< default}}
+{{!< default}} {{#post}} <article class="relative max-w-2xl mx-auto px-4 md:px-0">
 
-{{#post}}
+  {{!-- Header --}}
 
-  <article class="relative">
+  <header class="mt-10 prose prose-lg dark:prose-dark max-w-none">
 
-    {{!-- Header --}}
-    {{!-- {{> extras/patterns}} --}}
+    {{#if feature_image}}
+    <img class="gh-feature-image mx-auto" srcset="{{img_url feature_image size=" s"}} 300w, {{img_url feature_image
+      size="m" }} 600w, {{img_url feature_image size="l" }} 1000w, {{img_url feature_image size="xl" }} 2000w"
+      sizes="(max-width: 1000px) 1000px, 2000px" loading="lazy" src="{{img_url feature_image size=" xl"}}"
+      alt="{{title}}" />
+    {{/if}}
+    <h1>
+      Position: <span
+        class="inline-block xl:inline text-gradient text-gradient bg-gradient-to-r from-blue-500 to-blue-700">{{title}}</span>
+    </h1>
+    {{#if custom_excerpt}}
+    <p class="text-blue-500">
+      {{custom_excerpt}}
+    </p>
+    {{/if}}
 
-    <header class="relative px-4 sm:px-6 lg:px-8 mt-10">
+  </header>
 
+  <div class="prose prose-blue lg:prose-xl dark:prose-dark max-w-none mt-10">
 
-      <div class="max-w-prose mx-auto object-center">
-        {{#if feature_image}}
-          <img class="gh-feature-image mx-auto" srcset="{{img_url feature_image size="s"}} 300w,
-                    {{img_url feature_image size="m"}} 600w,
-                    {{img_url feature_image size="l"}} 1000w,
-                    {{img_url feature_image size="xl"}} 2000w"
-            sizes="(max-width: 1000px) 1000px, 2000px"
-            loading="lazy" src="{{img_url feature_image size="xl"}}"
-            alt="{{title}}" />
-        {{/if}}
-        <h1 class="mt-10">
-          <span class="mt-2 block text-4xl leading-8 font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl">
-            Position: <span class="inline-block xl:inline text-gradient text-gradient bg-gradient-to-r from-blue-500 to-blue-700">{{title}}</span>
-          </span>
-        </h1>
-        {{#if custom_excerpt}}
-          <p class="mt-8 text-2xl text-gray-500 dark:text-gray-300 leading-8">
-            {{custom_excerpt}}
-          </p>
-        {{/if}}
+    {{content}}
 
-      </div>
-    </header>
-
-    <div class="post-body mt-10 max-w-prose mx-auto text-gray-700 dark:text-gray-300">
-
-      {{content}}
+  </div>
 
+  <aside class="prose prose-blue dark:prose-dark mt-10">
+    <div class="mb-10 bg-blue-500 text-white rounded-lg px-4 py-10">
+      <h1>
+        <span class="text-white">How to apply</span>
+      </h1>
+      <p>
+        Send your CV (careers@speckle.systems) and tell us why you think you'd be a great fit for the role.
+      </p>
+      <p>
+        Include a small example of
+        how you would improve Speckle, whether it's an idea, a sketch or a Pull Request. We want to make sure you know
+        the product before you apply, all the code and docs are out there - do something amazing!
+      </p>
     </div>
 
-  </article>
-
-  <aside class="my-20 max-w-prose mx-auto text-gray-700 dark:text-gray-300">
-    <div class="relative col-span-2 md:col-span-1 mb-10">
-      <div class="text-3xl font-semibold text-gray-800 dark:text-gray-200">
-        How to apply
-
-      </div>
-      <blockquote class="mt-4">
-        <div class="relative text-lg text-gray-800 dark:text-gray-200 md:flex-grow">
-          <p class="relative">
-
-            Send us (hello [at] speckle [dot] systems) an
-            up-to-date CV & a quick intro
-            explaining your motivation for joining and
-            what you think your contribution to the team
-            can be. Any supporting links or documents are
-            welcome.
-
-
-          </p>
-        </div>
-
-      </blockquote>
-    </div>
-
-    <div class="w-full grid gap-5 md:grid-cols-2 lg:grid-cols-2">
-
+    <div class="pb-10">
       {{> cardTag}}
-
     </div>
   </aside>
 
-{{/post}}
+  </article>
+
+  {{/post}}

custom-interop-post.hbs

@@ -0,0 +1,41 @@
+{{!< default}} {{#post}}
+
+  {{!-- Header --}}
+
+  <main class="relative w-default flex flex-wrap mt-24">
+    <div class="w-3/3 text-center">
+      <h1 class="text-4xl 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">
+          {{title}}
+        </span>
+      </h1>
+      <p class="max-w-prose mx-auto text-base text-gray-500 dark:text-gray-100 sm:text-lg md:text-xl md:max-w-6xl mt-10">
+        {{excerpt}}
+      </p>
+    </div>
+  </main>
+  
+  {{> interop/connectorTagCards}}
+
+    <div class="shadow-xl sm:px-2 px-5 pt-8 pb-10 rounded-lg mt-10 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">Are we missing a connector?</h3>
+          <p>Let us know on the community forum, and we can start a discussion on development.</p>
+        </div>
+        
+        <a href="https://speckle.community/new-topic?title=New%20Connector%20Request&category=features"
+          target="_blank"
+          class="mt-2 border-2 rounded-lg border-blue-500 bg-blue-500 hover:ring-4 transition p-4 flex text-white text-center justify-center">
+          <span class="self-center">New connector proposal</span>
+        </a>
+      </div>
+    </div>
+
+  <div class="prose prose-blue lg:prose-xl mx-auto dark:prose-dark my-10 px-4 md:px-0">
+    
+    {{content}}
+
+  </div>
+
+  {{/post}}

custom-post-with-author.hbs

@@ -1,82 +1,66 @@
-{{!< default}}
+{{!< default}} {{#post}} <article class="relative max-w-2xl mx-auto px-4 md:px-0">
 
-{{#post}}
+  {{!-- Header --}}
 
-  <article class="relative">
+  <header class="mt-10 prose prose-lg dark:prose-dark max-w-none">
 
-    {{!-- Header --}}
-    {{> extras/patterns}}
+    {{#if feature_image}}
+    <img class="gh-feature-image mx-auto w-full max-w-full" srcset="{{img_url feature_image size=" s"}} 300w, {{img_url
+      feature_image size="m" }} 600w, {{img_url feature_image size="l" }} 1000w, {{img_url feature_image size="xl" }}
+      2000w" sizes="(max-width: 1000px) 1000px, 2000px" loading="lazy" src="{{img_url feature_image size=" xl"}}"
+      alt="{{title}}" />
+    {{/if}}
+    <h1 class="">
+      {{title}}
+    </h1>
+    {{#if custom_excerpt}}
+    <p>
+      {{custom_excerpt}}
+    </p>
+    {{/if}}
 
-    <header class="relative px-4 sm:px-6 lg:px-8 mt-10">
+    <p class="text-sm">
+      Written by
+      {{#foreach authors}}
+      {{name}}
+      {{/foreach}}
+      <span class="text-gray-500">on <time datetime="{{date format=" YYYY-MM-DD"}}">{{date format="D MMM
+          YYYY"}}</time></span>
 
+    </p>
 
-      <div class="max-w-prose mx-auto object-center">
-        {{#if feature_image}}
-          <img class="gh-feature-image mx-auto" srcset="{{img_url feature_image size="s"}} 300w,
-                    {{img_url feature_image size="m"}} 600w,
-                    {{img_url feature_image size="l"}} 1000w,
-                    {{img_url feature_image size="xl"}} 2000w"
-            sizes="(max-width: 1000px) 1000px, 2000px"
-            loading="lazy" src="{{img_url feature_image size="xl"}}"
-            alt="{{title}}" />
-        {{/if}}
-        <h1 class="mt-10">
-          <span class="mt-2 block text-4xl text-center leading-8 font-extrabold tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl">
-            {{title}}
-          </span>
-        </h1>
-        {{#if custom_excerpt}}
-          <p class="mt-8 text-2xl text-gray-500 dark:text-gray-300 leading-8">
-            {{custom_excerpt}}
-          </p>
-        {{/if}}
+  </header>
 
-        <div class="mt-4 text-base dark:text-gray-100">
-          Written by
-          {{#foreach authors}}
-            <span class="font-bold">{{name}}</span>
-          {{/foreach}}
-          <span class="text-gray-500">on <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time></span>
+  {{!-- Content --}}
 
-        </div>
+  <div class="prose prose-blue dark:prose-dark max-w-none mt-10">
 
-      </div>
-    </header>
+    {{content}}
 
-    <div class="post-body mt-10 max-w-prose mx-auto text-gray-700 dark:text-gray-300">
+  </div>
 
-      {{content}}
+  <div
+    class="relative max-w-prose p-5 mx-auto mb-20 mt-20 pb-5 grid grid-cols-1 gap-4 bg-white dark:bg-gray-900 rounded-xl">
+    <p class="dark:text-gray-300">Feeback or comments? We'd love to hear from you in our
+      <a class="font-semibold text-blue-600" href="https://speckle.community/" target="_blank">community
+      forum!</a>
+    </p>
+  </div>
 
-    </div>
+  {{!-- Read more --}}
 
-    <div class="post-body mt-10 max-w-prose mx-auto text-gray-700 dark:text-gray-300">
+  <div class="mt-8 grid gap-5 md:grid-cols-2 mb-10">
 
+    {{#get "posts" filter="tags:{{primary_tag.slug}}+id:>{{id}}"
+    limit="2" order="id asc"}}
 
-      <h3 class="text-base mt-24  text-gray-500 text-center">
-        Wait - there's more! Read on:
-      </h3>
+    {{#foreach posts}}
+    {{> cardFancySmall}}
+    {{/foreach}}
+    {{/get}}
 
-    </div>
-
-    <div class="max-w-prose mx-auto mt-8 grid gap-5 md:grid-cols-2 mb-10">
-
-      {{#get "posts" filter="tags:{{primary_tag.slug}}+id:>{{id}}"
-        limit="1" order="id asc"}}
-
-        {{#foreach posts}}
-          {{> cardFancySmall}}
-        {{/foreach}}
-      {{/get}}
-
-      {{#get "posts" filter="tags:{{primary_tag.slug}}+id:<{{id}}" limit="1" order="id desc" }}
-          {{#foreach posts}}
-            {{> cardFancySmall}}
-          {{/foreach}}
-      {{/get}}
-
-      <span></span>
-      {{> cardTag}}
-
-    </div>
+    {{#get "posts" filter="tags:{{primary_tag.slug}}+id:< {{id}}" limit=" 2" order="id desc" }} {{#foreach posts}} {{>
+      cardFancySmall}}
+      {{/foreach}} {{/get}} {{> cardTag}} </div>
   </article>
-{{/post}}
+  {{/post}}

custom-tutorial-post.hbs

@@ -0,0 +1,158 @@
+{{!< default}} {{#post}} <article id="top" class="w-default mx-auto mb-10">
+  <div class="w-full p-0 mx-auto grid gap-0 md:gap-4 grid-cols-7"
+    x-data="{ collapseToc: window.innerWidth < 768, isMobile: false, openToc: false }"
+    @load.window="isMobile = window.innerWidth < 768; collapseToc = isMobile;"
+    @resize.window="isMobile = window.innerWidth < 768; collapseToc = isMobile;">
+
+    {{!-- Header --}}
+    <figure class="col-span-7 md:col-span-2 flex items-center justify-center rounded-xl overflow-hidden mt-10">
+      {{#if feature_image}}
+      <img class="object-cover" srcset="{{img_url feature_image size=" s"}} 300w, {{img_url feature_image size="m" }} 600w, {{img_url
+        feature_image size="l" }} 1000w, {{img_url feature_image size="xl" }} 2000w" sizes="(max-width: 800px) 400px,
+                            (max-width: 1170px) 1170px,
+                                2000px" src="{{img_url feature_image size=" xl"}}" alt="{{title}}" />
+      {{/if}}
+    </figure>
+
+    <header x-ref="header" class="title-wrapper my-10 col-span-7 md:col-span-5 max-w-full">
+      <div class="prose dark:prose-dark lg:prose-xl mx-auto">
+        <span class="gh-post-meta text-sm"><time datetime="{{date format=" YYYY-MM-DD"}}">{{date format="D MMM
+            YYYY"}}</time>
+          <span class="bull">&bull;</span>
+          {{reading_time}}
+        </span>
+        <h1 class="gh-title">{{title}}</h1>
+      </div>
+      <div class="max-w-prose mx-auto my-4 space-y-1 space-x-1">
+        {{#foreach tags}}
+        <a class="rounded-full py-1 px-3 bg-blue-500 text-white inline-block hover:ring-4 transition"
+          href="{{url}}">
+          {{name}}
+        </a>
+        {{/foreach}}
+      </div>
+      <div class="prose dark:prose-dark lg:prose-xl mx-auto">
+        {{#if custom_excerpt}}
+        <p class="italic">{{custom_excerpt}}</p>
+        {{/if}}
+      </div>
+      <div class="authors mt-4 max-w-prose mx-auto grid grid-cols-3 gap-2">
+        {{#foreach authors}}
+        <div class="author flex items-center col-span-1">
+          {{#if profile_image}}
+          <div class="inline-block rounded-full overflow-hidden">
+            <img class="h-8 w-8" src="{{img_url profile_image size=" xs"}}" alt="{{name}}" />
+          </div>
+          {{else}}
+          <div class="h-8 w-8 mr-2">{{> "icons/avatar"}}</div>
+          {{/if}}
+          <span class="ml-2 text-gray-800 dark:text-gray-200 text-sm">{{name}}</span>
+        </div>
+        {{/foreach}}
+      </div>
+    </header>
+
+    {{!-- TOC --}}
+
+    <aside
+      class="toc-wrapper col-span-7 md:col-span-2 shadow-xl md:shadow-none rounded-lg p-3 md:p-1 bg-gray-50 dark:bg-gray-900 md:bg-transparent sticky top-16 md:relative md:top-0 z-20">
+      <div class="md:sticky md:top-20">
+        <div class="">
+          <div class="font-medium">
+            <button class="flex font-medium text-blue-500" @click="openToc = !openToc;">
+              {{!-- <span class="self-center text-blue-500">{{title}}</span> --}}
+              <span class="text-blue-500">In this page</span>
+              <svg xmlns="http://www.w3.org/2000/svg"
+                class="transition transform self-center block md:hidden t-1 h-5 w-5"
+                :class="{'rotate-180' : (!collapseToc || !isMobile || openToc) }" viewBox="0 0 20 20"
+                fill="currentColor">
+                <path fill-rule="evenodd"
+                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                  clip-rule="evenodd" />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div x-ref="toc" class="origin-top pb-0 md:pb-3 max-h-full" x-show="!collapseToc || !isMobile || openToc"
+          @click="openToc=false" x-transition:enter="transition ease-out duration-100"
+          x-transition:enter-start="opacity-0 transform scale-y-0"
+          x-transition:enter-end="opacity-100 transform scale-y-100"
+          x-transition:leave="transition ease-in duration-100"
+          x-transition:leave-start="opacity-100 transform scale-y-100"
+          x-transition:leave-end="opacity-0 transform scale-y-0">
+          <div class="toc"></div>
+          <div class="pt-2 border-t dark:border-gray-800 md:border-t-0">
+            <a href="" onclick="event.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' });"
+              class="inline-flex -ml-2 pl-2 pr-4 py-1 items-center no-underline text-sm font-medium text-blue-500 transition-shadow shadow-none hover:shadow-lg w-full md:w-auto rounded-xl">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+              </svg>
+              Top
+            </a>
+            <p class="border-t dark:border-gray-800 mt-2 pt-2"></p>
+            <div class="space-y-1 space-x-1">
+              {{#foreach tags}}
+              <a class="rounded-full py-1 px-3 bg-blue-500 text-white inline-block hover:ring-4 transition"
+                href="{{url}}">
+                {{name}}
+              </a>
+              {{/foreach}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </aside>
+
+    {{!-- Body --}}
+
+    <div
+      class="block post-content prose dark:prose-dark lg:prose-xl prose-blue mx-auto col-span-7 md:col-span-5 mt-4 w-full max-w-prose">
+      {{content}}
+    </div>
+  </div>
+  </article>
+
+  <div class="shadow-xl sm:px-2 px-5 pt-8 pb-10 rounded-lg mt-10 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:ring-4 transition p-4 flex text-white text-center justify-center">
+        <span class="self-center">Ask a question</span>
+      </a>
+    </div>
+  </div>
+
+  <aside class="w-default mx-auto mb-10 px-3" x-data="{}">
+
+    {{#if primary_tag}}
+    {{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" include="authors" limit="6" as |related_posts|}}
+    {{#if related_posts}}
+    <article class="read-next-card">
+      <header class="read-next-card-header">
+        {{#../primary_tag}}
+        <h3 class="text-xl dark:text-gray-100 mt-12 mb-4">Get to know Speckle more:</h3>
+        {{/../primary_tag}}
+      </header>
+      <div class="read-next-card-content grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        {{#foreach related_posts}}
+        <div class="grid-cols-1">
+          {{> cardTutorialSm }}
+        </div>
+        {{/foreach}}
+      </div>
+    </article>
+    {{/if}}
+    {{/get}}
+    {{/if}}
+
+  </aside>
+
+
+
+  {{/post}}

default.hbs

@@ -15,8 +15,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" />
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"
     rel="stylesheet">
-  {{!-- Simple little js lib --}}
-  <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js"></script>
+  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
 </head>
 
 <body class="{{body_class}} bg-gray-100 dark:bg-gray-800">
@@ -27,15 +26,99 @@
 
   {{> footer }}
 
-  {{ghost_foot}}
-
-  {{#is "home"}}
+    {{#is "post, page"}}
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.10.0/tocbot.min.js"></script>
+    <script>
+      tocbot.init({
+        tocSelector: '.toc',
+        contentSelector: '.post-content',
+        hasInnerContainers: true
+      });
+    </script>
+    {{/is}}
 
 
+  {{!-- swiper for connectors (homepage only) --}}
+  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
 
+  {{!-- Simple little js lib --}}
+  <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js"></script>
+  
+  {{!-- Search Lib --}}
+  <script src="https://cdn.jsdelivr.net/npm/searchinghost@1.6.0/dist/searchinghost.min.js"></script>
+  <script>
+    
+  </script>
+
+  {{#is "post, page"}}
+  {{!-- Zoomable images --}}
+  <script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.6/dist/medium-zoom.min.js"></script>
+  <script>
+    let margin = 150;
+    if(window.innerWidth < 1024) margin = 75
+    if(window.innerWidth < 768) margin = 20
+    if(window.innerWidth < 600) margin = 10
+    
+    mediumZoom('.kg-image, .kg-gallery-image img', 
+    {
+      margin: margin,
+      background: '',
+      scrollOffset: 0
+    })
+
+  </script>
   {{/is}}
+  {{ghost_foot}}
+  <script>
+    let postContent = Array.from(document.getElementsByClassName('post-content'))[0].innerHTML
 
+    let tips = postContent.match(/<p>::: tip(.*?):::<\/\p>/g)
+    let warnings = postContent.match(/<p>::: warning(.*?):::<\/\p>/g)
+    let dangers = postContent.match(/<p>::: danger(.*?):::<\/\p>/g)
 
+    let details = postContent.match(/<p>::: details([\s\S]+?):::<\/\p>/g)
+
+    if (tips)
+      tips.forEach(tip => {
+        let result = tip.match(/::: tip(.*?)</)
+        let tipTitle = result[1] && result[1] !== "" ? result[1] : 'Tip'
+        let newTip = `<div class="mb-4 border-l-4 border-blue-500 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + tip.replace(`::: tip${result[1]}`, `<div class="font-bold text-blue-500 mb-2">${tipTitle}</div>`) + `</div>`
+        newTip = newTip.replace(":::", "")
+        newTip = newTip.replace("<br>", "")
+        postContent = postContent.replace(tip, newTip)
+      })
+
+    if (warnings)
+      warnings.forEach(tip => {
+        let result = tip.match(/::: warning(.*?)</)
+        let tipTitle = result[1] && result[1] !== "" ? result[1] : 'Warning'
+        let newTip = `<div class="mb-4 border-l-4 border-yellow-500 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + tip.replace(`::: warning${result[1]}`, `<div class="font-bold text-yellow-500 mb-2">${tipTitle}</div>`) + `</div>`
+        newTip = newTip.replace(":::", "")
+        newTip = newTip.replace("<br>", "")
+        postContent = postContent.replace(tip, newTip)
+      })
+
+    if (dangers)
+      dangers.forEach(tip => {
+        let result = tip.match(/::: danger(.*?)</)
+        let tipTitle = result[1] && result[1] !== "" ? result[1] : 'Danger'
+        let newTip = `<div class="mb-4 border-l-4 border-red-500 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + tip.replace(`::: danger${result[1]}`, `<div class="font-bold text-red-500 mb-2">${tipTitle}</div>`) + `</div>`
+        newTip = newTip.replace(":::", "")
+        newTip = newTip.replace("<br>", "")
+        postContent = postContent.replace(tip, newTip)
+      })
+
+    if (details)
+      details.forEach(detail => {
+        let result = detail.match(/::: details(.*?)</)
+        let detailTitle = result[1] && result[1] !== "" ? result[1] : 'Details'
+        let newDetails = `<details class="mb-4 w-full max-w-full bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + detail.replace(`::: details${result[1]}`, `<summary class="font-bold text-blue-500 my-2">${detailTitle}</summary>`) + `</details>`
+        newDetails = newDetails.replace(":::", "")
+        postContent = postContent.replace(detail, newDetails)
+      })
+
+    Array.from(document.getElementsByClassName('post-content'))[0].innerHTML = postContent
+  </script>
 </body>
 
 </html>

developers.hbs

@@ -48,7 +48,7 @@
     </div>
 
     <div class="relative h-36 md:h-24 lg:h-48 rounded-2xl overflow-hidden transition hover:shadow-2xl p-5 flex col-span-2 sm:col-span-1 bg-white dark:bg-gray-900 ">
-      <a href="https://speckle.guide" class="flex w-full h-full">
+      <a href="https://speckle.guide/dev" class="flex w-full h-full">
         <div class="block self-center w-full">
           <div class="text-3xl font-semibold text-blue-600">
             Docs →
@@ -75,7 +75,7 @@
 
   {{/foreach}}
 
-  <div class="relative py-20 rounded-xl shadow hover:shadow-2xl bg-white dark:bg-gray-800 ring transition overflow-hidden flex col-span-2 md:col-span-1">
+  {{!-- <div class="relative py-20 rounded-xl shadow hover:shadow-2xl bg-white dark:bg-gray-800 ring transition overflow-hidden flex col-span-2 md:col-span-1">
     <a href="/features" class="self-center">
       <div class="absolute inset-0 bg-blue-500 opacity-10"
         style="mix-blend-mode: multiply;"></div>
@@ -99,7 +99,7 @@
         </blockquote>
       </div>
     </a>
-  </div>
+  </div> --}}
 
 
 </div>

gulpfile.js

@@ -5,7 +5,10 @@ const pump = require( 'pump' )
 var livereload = require( 'gulp-livereload' )
 var postcss = require( 'gulp-postcss' )
 var zip = require( 'gulp-zip' )
-var uglify = require( 'gulp-uglify' )
+// var uglify = require( 'gulp-uglify' )
+var uglify = require( 'gulp-terser' )
+// const terser = require('gulp-terser')
+var concat = require( 'gulp-concat' )
 var beeper = require( 'beeper' )
 
 // postcss plugins
@@ -40,15 +43,15 @@ function hbs( done ) {
 
 function css( done ) {
   var processors = [
-    tailwind(),
     easyimport,
-    // colorFunction(),
-    autoprefixer(),
-    cssnano()
+    tailwind(),
+    colorFunction(),
+    // autoprefixer(),
+    // cssnano()
   ]
 
   pump( [
-    src( 'assets/css/*.css', { sourcemaps: true } ),
+    src( 'assets/css/*.css', { sourcemaps: false } ),
     postcss( processors ),
     dest( 'assets/built/', { sourcemaps: '.' } ),
     livereload()
@@ -57,7 +60,8 @@ function css( done ) {
 
 function js( done ) {
   pump( [
-    src( 'assets/js/*.js', { sourcemaps: true } ),
+    src( 'assets/js/*.js', { sourcemaps: false } ),
+    concat('theme.js'),
     uglify(),
     dest( 'assets/built/', { sourcemaps: '.' } ),
     livereload()

index.hbs

@@ -1,31 +1,26 @@
 {{!< default}}
 
-
-<div class="z-0 relative lg:absolute w-4/6 mx-auto lg:w-3/6 lg:right-0 h-screen/2 -mt-10 lg:mt-20 lg:mr-5">
-  <div class="absolute z-1 inset-0 w-full h-full visible opacity-70 dark:invisible">
-    {{> extras/landingIllustration }}
-  </div>
-  <div class="absolute z-1 inset-0 w-full h-full opacity-40 invisible dark:visible">
-    {{> extras/landingIllustrationDark }}
-  </div>
-  <div class="absolute z-1 inset-0 w-full h-full opacity-70 ">
-    {{> extras/landingIllustrationDarkHigh }}
-  </div>
-</div>
-
-<div class="relative -mt-44 lg:mt-0">
+<div class="relative lg:mt-0 py-10">
   {{> landing/header }}
 </div>
 
 {{> landing/logos }}
 
-{{> landing/featuresPreview }}
+{{> landing/connectorsPreview }}
+
+{{!-- {{> landing/featuresPreview }} --}}
+
+{{!-- {{> landing/logos }} --}}
+
+{{> cardCTAShadow 
+  shadow=true
+  subHeadline="Speckle is in public beta and free to use." 
+  buttonText="Get Started" }}
 
 {{> landing/opensource }}
 
 {{> landing/developersPreview }}
 
-{{> cardCTA subHeadline="We're working round the clock to get V2 out - be the first to try it out:" }}
 
 {{> landing/blogPreview }}
 

package.json

@@ -2,7 +2,7 @@
   "name": "speckle-starter-theme",
   "description": "A custom theme for speckle",
   "demo": "https://starter.ghost.io",
-  "version": "1.0.0",
+  "version": "2.4.9",
   "engines": {
     "ghost": ">=3.0.0",
     "ghost-api": "v3"
@@ -48,9 +48,11 @@
     "cssnano": "4.1.10",
     "gscan": "3.5.4",
     "gulp": "4.0.2",
+    "gulp-concat": "^2.6.1",
     "gulp-livereload": "4.0.2",
     "gulp-postcss": "8.0.0",
     "gulp-sourcemaps": "2.6.5",
+    "gulp-terser": "^2.0.1",
     "gulp-uglify": "3.0.2",
     "gulp-util": "3.0.8",
     "gulp-watch": "5.0.1",
@@ -63,7 +65,7 @@
     "defaults"
   ],
   "config": {
-    "posts_per_page": 6,
+    "posts_per_page": 12,
     "image_sizes": {
       "xxs": {
         "width": 30
@@ -86,9 +88,13 @@
     }
   },
   "dependencies": {
+    "@tailwindcss/aspect-ratio": "^0.2.1",
+    "@tailwindcss/forms": "^0.3.3",
     "@tailwindcss/line-clamp": "^0.2.0",
+    "@tailwindcss/typography": "^0.4.1",
     "cssnano-preset-advanced": "^4.0.7",
     "prism-theme-one-light-dark": "^1.0.4",
-    "tailwindcss": "^2.0.2"
+    "swiper": "^6.7.0",
+    "tailwindcss": "^2.2.2"
   }
 }

page-about.hbs

@@ -1,5 +1,6 @@
 {{!< default}}
 
+{{#post}}
 <div class="absolute inset-0 pt-32 opacity-10 h-5/6">
   {{> extras/super }}
 </div>
@@ -14,7 +15,7 @@
       Specklers!</p>
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-20 md:gap-10 my-20 text-left">
 
-      {{#get 'authors' limit='all' include='count.posts' order='count.posts desc' filter="slug:-speckle"}}
+      {{!-- {{#get 'authors' limit='all' include='count.posts' order='date desc' filter="slug:-speckle"}} --}}
         {{#foreach authors}}
 
           <div class="flex items-center space-x-4 lg:space-x-6">
@@ -30,14 +31,14 @@
           </div>
 
         {{/foreach}}
-      {{/get}}
+      {{!-- {{/get}} --}}
 
     </div>
   </div>
 
   <div class="w-default grid grid-cols-1 sm:grid-cols-2 gap-5 mb-10">
 
-    <div class="relative h-96 rounded-2xl overflow-hidden transition bg-white dark:bg-gray-900 hover:shadow-2xl p-5 flex justify-center text-center">
+    <div class="relative h-40 rounded-2xl overflow-hidden transition bg-white dark:bg-gray-900 hover:shadow-2xl p-5 flex justify-center text-center">
       <a href="/careers" class="flex w-full h-full">
         <div class="block self-center w-full">
           <div class="text-3xl font-semibold text-blue-600">
@@ -49,7 +50,7 @@
       </a>
     </div>
 
-    <div class="relative h-96 rounded-2xl overflow-hidden transition bg-white dark:bg-gray-900 hover:shadow-2xl p-5 flex justify-center text-center">
+    <div class="relative h-40 rounded-2xl overflow-hidden transition bg-white dark:bg-gray-900 hover:shadow-2xl p-5 flex justify-center text-center">
       <a href="/contact" class="flex w-full h-full">
         <div class="block self-center w-full">
           <div class="text-3xl font-semibold text-blue-600">
@@ -59,7 +60,6 @@
         </div>
       </a>
     </div>
-
     {{!-- TODO --}}
 
     {{!--     <div class="relative h-screen/4 rounded-2xl overflow-hidden transition hover:shadow-2xl p-5 flex justify-center text-center">
@@ -76,6 +76,6 @@
   </div>
 
 </article>
-
+{{/post}}
 
 {{!-- {{> extras/patterns}} --}}

page-download.hbs

@@ -0,0 +1,85 @@
+{{!< default}} {{#post}} {{> extras/patterns}}
+
+  <article class="relative">
+    <main class="mx-auto max-w-prose dark:prose-dark object-center justify-center my-10">
+      <div class="w-3/3 text-center">
+        <h1 class="text-4xl 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">
+            {{title}}
+          </span>
+        </h1>
+        <div
+          class="post-body text-gray-500 dark:text-gray-100 text-base text-justify sm:text-lg md:text-xl md:max-w-6xl mt-10">
+          Manage your Connectors and Accounts with ease! Manager for Speckle is the only tool you'll need to install and update Connectors and link your Accounts.
+        </div>
+      </div>
+    </main>
+
+
+    <div class="relative w-default mb-10 gap-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
+
+      <div class="self-end mt-5 hover:scale-105 col-span-1 lg:col-start-2 transition transform scale-95">
+
+        <button onclick="downloadManager('manager.exe')"
+          class="w-full bg-blue-500 hover:bg-blue-600 inline-flex items-center justify-center font-medium text-base text-white px-4 py-4 shadow-sm border-transparent rounded-md border hover:ring-4 hover:shadow-xl transition">
+          <svg aria-hidden="true" class="mr-4 -ml-1 w-5 h-5" fill="currentColor" viewBox="0 0 87 87"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M0 12.402l35.687-4.86.016 34.423-35.67.203zm35.67 33.529l.028 34.453L.028 75.48.026 45.7zm4.326-39.025L87.314 0v41.527l-47.318.376zm47.329 39.349l-.011 41.34-47.318-6.678-.066-34.739z">
+            </path>
+          </svg>
+          Download for Windows
+        </button>
+      </div>
+
+      <div class="self-end mt-5 hover:scale-105 col-span-1 transition transform scale-95">
+        <button onclick="downloadManager('manager.dmg')"
+          class="w-full bg-blue-500 hover:bg-blue-600 inline-flex items-center justify-center font-medium text-base text-white px-4 py-4 shadow-sm border-transparent rounded-md border hover:ring-4 hover:shadow-xl transition">
+          <svg aria-hidden="true" class="mr-4 -ml-1 w-5 h-5" fill="currentColor" viewBox="0 0 814 1000"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z">
+            </path>
+          </svg>
+          Download for Mac
+        </button>
+      </div>
+
+
+    </div>
+    <div class="relative max-w-prose p-5 mx-auto mb-10 pb-5 grid grid-cols-1 gap-4 ">
+      <img class="w-full object-cover" src="{{asset 'images/manager.png'}}" alt="manager"/>
+    </div>
+
+
+    <div
+      class="relative max-w-prose p-5 mx-auto mb-20 pb-5 grid grid-cols-1 gap-4 bg-white dark:bg-gray-900 rounded-xl transition hover:shadow-xl">
+      <p class="dark:text-gray-300">Want to see all our releases and set up Conectors and Accounts manually? Visit our
+        <a class="font-semibold text-blue-600" href="https://releases.speckle.systems/" target="_blank">
+          releases page</a> instead.
+      </p>
+    </div>
+
+    <script>
+      async function downloadManager(filename) {
+        let url = `https://releases.speckle.dev/manager2/installer/${filename}`
+
+        let a = document.createElement('a')
+        document.body.appendChild(a)
+        a.style = 'display: none'
+        a.href = url
+        a.download = filename
+        a.click()
+        document.body.removeChild(a)
+
+        mixpanel.track('Manager Download', {
+          os: filename.includes('exe') ? 'win' : 'mac'
+        })
+      }
+    </script>
+
+
+
+  </article>
+
+  {{/post}}

page-getstarted.hbs

@@ -5,23 +5,34 @@
 
   <article class="relative">
     <main class="w-default flex flex-wrap content-center mt-24 mb-10">
-      <div class="w-3/3">
+      <div class="w-3/3 text-center">
         <h1 class="text-4xl 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">
             {{title}}
           </span>
         </h1>
         <div class="post-body text-gray-500 dark:text-gray-100 text-base text-justify sm:text-lg md:text-xl md:max-w-6xl mt-10">
-          A brand new Speckle is coming soon! Join our beta program and get early access to our hosted and managed Speckle offerings.
+          A brand new Speckle 2.0 is now in public beta! Join now and get early access to our hosted and managed Speckle offerings.
         </div>
       </div>
     </main>
 
     {{!-- {{> pricingWithPro }} --}}
+    {{!-- {{> pricingRegister }} --}}
     {{> pricing }}
 
     <header class="mb-10 mt-24 px-4 lg:px-8 relative sm:px-6 pb-10">
-      <div class="mx-auto max-w-prose object-center justify-center">
+{{!--       <div class="max-w-prose mx-auto relative py-10 my-10 rounded-2xl overflow-hidden flex col-span-2 transition hover:shadow-2xl bg-white dark:bg-gray-900">
+          <div class="relative block mx-auto self-center text-center">
+            <a href="https://calendly.com/speckle-ollie" target="_blank" class="w-full h-full flex content-center">
+              <div class=" text-2xl font-semibold text-blue-600">
+                Still have questions? Book A Demo!
+              </div>
+            </a>
+          </div>
+        </div> --}}
+
+      <div class="mx-auto max-w-prose prose dark:prose-dark object-center justify-center">
         <h1>
           <span class="font-extrabold leading-8 text-4xl text-gray-700 tracking-tight mt-12 dark:text-gray-100 ">
             Q&As:
@@ -65,7 +76,7 @@
               Can you deploy Speckle on Azure, AWS, or GCP?
             </h4>
             <p class="text-base">
-              Yes. As part of the Managed plan, we can
+              Yes. As part of the Enterprise plan, we can
               deploy Speckle for you on any cloud provider
               your company might
               be using.

page-partnerships.hbs

@@ -3,35 +3,28 @@
 
 {{#post}}
 
-  <article class="relative">
+  <article class="relative max-w-2xl mx-auto px-4 md:px-0">
 
     {{!-- Header --}}
-    {{> extras/patterns}}
 
-    <header class="relative px-4 sm:px-6 lg:px-8 mt-24">
-      <div class="max-w-prose mx-auto object-center">
-
-        <h1>
-          <span class="mt-12 block text-4xl text-center leading-8 font-extrabold tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl">
-            {{title}}
-          </span>
-        </h1>
-        {{#if custom_excerpt}}
-          <p class="mt-8 text-2xl text-gray-500 dark:text-gray-300 leading-8">
-            {{custom_excerpt}}
-          </p>
-        {{/if}}
-      </div>
+    <header class="mt-10 prose prose-lg dark:prose-dark max-w-none">
+      <h1>
+        {{title}}
+      </h1>
+      {{#if custom_excerpt}}
+        <p>
+          {{custom_excerpt}}
+        </p>
+      {{/if}}
     </header>
 
-    <div class="post-body mt-10 max-w-prose mx-auto text-gray-700 dark:text-gray-300">
+    <div class="prose prose-blue dark:prose-dark max-w-none mt-10">
 
       {{content}}
 
     </div>
 
-    <div class="max-w-prose mx-auto py-10 px-5 lg:px-0">
-
+    <div class="py-10">
       <div class="relative py-10 my-5 rounded-2xl overflow-hidden flex col-span-2 transition hover:shadow-2xl bg-white dark:bg-gray-900">
         <div class="relative block mx-auto self-center text-center">
           <a href="mailto:hello@speckle.systems" class="w-full h-full flex content-center">
@@ -47,7 +40,6 @@
           </a>
         </div>
       </div>
-
     </div>
 
   </article>

page-pricing.hbs

@@ -0,0 +1,170 @@
+{{!< default}}
+
+{{#post}}
+  {{> extras/patterns}}
+
+  <article class="relative">
+    <main class="mx-auto max-w-prose dark:prose-dark object-center justify-center my-10">
+      <div class="w-3/3 text-center">
+        <h1 class="text-4xl 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">
+            {{title}}
+          </span>
+        </h1> 
+        <div class="post-body text-gray-500 dark:text-gray-100 text-base text-justify sm:text-lg md:text-xl md:max-w-6xl mt-10">
+          Speckle 2.0 is now in public beta - join now and get early access to our hosted and managed Speckle offerings.
+        </div>
+      </div>
+    </main>
+
+    {{!-- <div class="mx-auto max-w-prose prose dark:prose-dark object-center justify-center">
+      <h1>Ready to deploy your own server?</h1>
+      <div class="post-body text-gray-500 dark:text-gray-100 text-base text-justify sm:text-lg md:text-xl md:max-w-6xl mt-10 pb-10">
+          We've got you covered.
+      </div>
+    </div> --}}
+
+    {{!-- {{> pricingWithPro }} --}}
+    {{!-- {{> pricingRegister }} --}}
+    {{> pricing }}
+
+    <header class="mb-10 mt-24 px-4 lg:px-8 relative sm:px-6 pb-10">
+{{!--       <div class="max-w-prose mx-auto relative py-10 my-10 rounded-2xl overflow-hidden flex col-span-2 transition hover:shadow-2xl bg-white dark:bg-gray-900">
+          <div class="relative block mx-auto self-center text-center">
+            <a href="https://calendly.com/speckle-ollie" target="_blank" class="w-full h-full flex content-center">
+              <div class=" text-2xl font-semibold text-blue-600">
+                Still have questions? Book A Demo!
+              </div>
+            </a>
+          </div>
+        </div> --}}
+
+      <div class="mx-auto max-w-prose prose dark:prose-dark object-center justify-center">
+        <h1>
+          <span class="font-extrabold leading-8 text-4xl text-gray-700 tracking-tight mt-12 dark:text-gray-100 ">
+            Q&As:
+          </span>
+        </h1>
+        <div class="leading-8 mx-auto max-w-prose mt-8">
+
+          <div class="my-5 text-xl text-gray-700 dark:text-gray-200">
+            <h4 class="text-xl mb-4">
+              <span class="text-blue-600 font-bold">Q:</span>
+              Which is the best plan for me?
+            </h4>
+            <p class="text-base">
+              If you are a large enterprise or have special
+              data sovereignty
+              requirements for your project, the
+              Managed plan is best suited to cover your
+              needs. We support deploying Speckle on your
+              own infrastructure, or ours.
+              For everyday usage & just getting things
+              done, we recommend the Free plan.
+            </p>
+          </div>
+
+          <div class="my-5 text-xl text-gray-700 dark:text-gray-200">
+            <h4 class="text-xl mb-4">
+              <span class="text-blue-600 font-bold">Q:</span>
+              Wait, isn't Speckle Open Source?
+            </h4>
+            <p class="text-base">
+              Yes! Speckle is Open Source. You can always self-host your server, build your own connectors, etc. - at your own cost.
+              Check out our <a class="text-blue-500 font-normal"
+                href="https://github.com/specklesystems">
+                code on Github.</a>
+            </p>
+          </div>
+
+          <div class="my-5 text-xl text-gray-700 dark:text-gray-200">
+            <h4 class="text-xl mb-4">
+              <span class="text-blue-600 font-bold">Q:</span>
+              Can you deploy Speckle on Azure, AWS, or GCP?
+            </h4>
+            <p class="text-base">
+              Yes. As part of the Enterprise plan, we can
+              deploy Speckle for you on any cloud provider
+              your company might
+              be using.
+            </p>
+          </div>
+
+          <div class="my-5 text-xl text-gray-700 dark:text-gray-200">
+            <h4 class="text-xl mb-4">
+              <span class="text-blue-600 font-bold">Q:</span>
+              Do you provide support for self-hosted
+              versions?
+            </h4>
+            <p class="text-base">Unfortunately we cannot do
+              so, for more reasons than one. First, it's
+              difficult to debug a setup without having
+              access to it. Second, to have access to it
+              implies we would be seeing very private
+              details of your infrastructure - which you
+              don't want us to do without a contract in
+              place.
+              <br>
+              <br>
+              If you want a support package for self-hosted
+              versions, <a class="text-blue-500 font-normal"
+                href="/contact">
+                don't hesitate to get in touch!</a>
+            </p>
+          </div>
+
+          <div class="my-5 text-xl text-gray-700 dark:text-gray-200">
+            <h4 class="text-xl mb-4">
+              <span class="text-blue-600 font-bold">Q:</span>
+              Will the Standard plan always be free?
+            </h4>
+            <p class="text-base">Yes.
+            </p>
+          </div>
+
+          <div class="my-5 text-xl text-gray-700 dark:text-gray-200">
+            <h4 class="text-xl mb-4">
+              <span class="text-blue-600 font-bold">Q:</span>
+              I'm a teacher/professor/academic/university,
+              can I get a managed server?
+            </h4>
+            <p class="text-base">Absolutely. Just get in
+              touch with us, and we'll discuss the best way
+              to go forward. <a class="text-blue-500 font-normal"
+                href="/contact">
+                Contact us.</a>
+            </p>
+          </div>
+
+          <div class="my-5 text-xl text-gray-700 dark:text-gray-200">
+            <h4 class="text-xl mb-4">
+              <span class="text-blue-600 font-bold">Q:</span>
+              What does "Speckle" stand for?
+            </h4>
+            <p class="text-base">
+              Only a few people know this. It's a closely
+              guarded secret, but if you find out - let us
+              know and we'll send you a sticker pack.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div class="max-w-prose mx-auto py-10 px-5 lg:px-0">
+
+        <div class="relative py-10 my-5 rounded-2xl overflow-hidden flex col-span-2 transition hover:shadow-2xl bg-white dark:bg-gray-900">
+          <div class="relative block mx-auto self-center text-center">
+            <a href="/contact" class="w-full h-full flex content-center">
+              <div class=" text-2xl font-semibold text-blue-600">
+                Still have questions? Contact us →
+              </div>
+            </a>
+          </div>
+        </div>
+      </div>
+
+    </header>
+
+  </article>
+
+{{/post}}

page.hbs

@@ -3,39 +3,31 @@
 
 {{#post}}
 
-  <article class="relative">
+  <article class="relative max-w-2xl mx-auto px-4 md:px-0">
 
     {{!-- Header --}}
-    {{> extras/patterns}}
 
-    <header class="relative px-4 sm:px-6 lg:px-8 mt-24">
-
-
-      <div class="max-w-prose mx-auto object-center">
-        {{#if feature_image}}
-          <img class="gh-feature-image mx-auto" srcset="{{img_url feature_image size="s"}} 300w,
+    <header class="mt-10 prose prose-lg dark:prose-dark max-w-none">
+      {{#if feature_image}}
+        <img class="gh-feature-image mx-auto" srcset="{{img_url feature_image size="s"}} 300w,
                     {{img_url feature_image size="m"}} 600w,
                     {{img_url feature_image size="l"}} 1000w,
                     {{img_url feature_image size="xl"}} 2000w"
-            sizes="(max-width: 1000px) 1000px, 2000px"
-            loading="lazy" src="{{img_url feature_image size="xl"}}"
-            alt="{{title}}" />
-        {{/if}}
-        <h1>
-          <span class="mt-12 block text-4xl text-center leading-8 font-extrabold tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl">
-            {{title}}
-          </span>
-        </h1>
-        {{#if custom_excerpt}}
-          <p class="mt-8 text-2xl text-gray-500 dark:text-gray-300 leading-8">
-            {{custom_excerpt}}
-          </p>
-        {{/if}}
-
-      </div>
+          sizes="(max-width: 1000px) 1000px, 2000px"
+          loading="lazy" src="{{img_url feature_image size="xl"}}"
+          alt="{{title}}" />
+      {{/if}}
+      <h1>
+        {{title}}
+      </h1>
+      {{#if custom_excerpt}}
+        <p>
+          {{custom_excerpt}}
+        </p>
+      {{/if}}
     </header>
 
-    <div class="post-body mt-10 max-w-prose mx-auto text-gray-700 dark:text-gray-300">
+    <div class="prose prose-blue dark:prose-dark max-w-none mt-10">
 
       {{content}}
 

partials/aboutHeader.hbs

@@ -3,7 +3,7 @@
     <h1 class="text-4xl 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">
-        Our mission is to empower AEC companies with open and accessible data.
+        Our mission is to enable everyone to speak in 3D.
       </span>
     </h1>
     <p class="text-4xl text-justify text-gray-700 dark:text-gray-100 md:max-w-6xl mt-10">
@@ -17,11 +17,7 @@
       <h2 class="text-xl pl-5 mb-5 font-bold text-blue-600">What
         is Speckle?</h2>
       <p class=" pl-5 text-base text-gray-800 dark:text-gray-400">
-        Speckle is a cloud based solution for the AEC
-        industry that provides
-        honest interoperability, real time
-        collaboration, data management, versioning and
-        automation.
+        Speckle is open source digital infrastructure for anything designed in 3D. We handle interoperability between software silos, real time collaboration, data management, versioning and automation. 
       </p>
     </div>
   </div>

partials/cardBlog.hbs

@@ -1,6 +1,6 @@
 <div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden">
-  <div class="flex-shrink-0 ">
-    <a href="{{url}}" class="block mt-2">
+  <div class="flex-shrink-0">
+    <a href="{{url}}" class="block">
       {{#if feature_image}}
         <img class="h-48 w-full object-cover" srcset="{{img_url feature_image size="s"}} 300w,
                         {{img_url feature_image size="m"}} 600w,

partials/cardBlogSm.hbs

@@ -1,6 +1,6 @@
 <div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden">
   <div class="flex-shrink-0 ">
-    <a href="{{url}}" class="block mt-2">
+    <a href="{{url}}" class="block">
       {{#if feature_image}}
         <img class="h-32 w-full object-cover" srcset="{{img_url feature_image size="s"}} 300w,
                         {{img_url feature_image size="m"}} 600w,

partials/cardCTA.hbs

@@ -18,7 +18,7 @@
           {{/if}}
         </p>
         <div class="rounded-xl shadow-xl mt-5">
-          <a href="/getstarted" class="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10">
+          <a href="/getstarted" class="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white transition-colors bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10">
             {{#if buttonText}}
               {{buttonText}}
             {{else}}

partials/cardCTAShadow.hbs

@@ -0,0 +1,30 @@
+<div class="relative py-10 rounded-2xl px-8 mx-auto shadow-2xl w-full md:w-2/3 lg:w-1/3 -mb-14 z-20 bg-white dark:bg-gray-900
+  transform transition-transform scale-90 hover:scale-100
+">
+  <div class="block mx-auto self-center text-center">
+    {{#if headline}}
+    <div class="text-3xl font-semibold dark:text-gray-200 text-gray-800">
+      {{headline}}
+    </div>
+    {{/if}}
+    <blockquote class="{{#if headline}}mt-8{{/if}}">
+      <div class="relative dark:text-gray-200 text-gray-800">
+        <p class="relative">
+          {{#if subHeadline}}
+          {{subHeadline}}
+          {{/if}}
+        </p>
+        <div class="rounded-xl shadow-xl mt-5">
+          <a href="/getstarted"
+            class="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white transition bg-blue-500 hover:ring-4 md:py-4 md:text-lg md:px-10">
+            {{#if buttonText}}
+            {{buttonText}}
+            {{else}}
+            Join the beta
+            {{/if}}
+          </a>
+        </div>
+      </div>
+    </blockquote>
+  </div>
+</div>

partials/cardSm.hbs

@@ -0,0 +1,21 @@
+<div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden w-full h-60">
+  <div class="flex-1 bg-white dark:bg-gray-900 dark:text-gray-200 p-6 flex flex-col justify-between">
+    <div class="flex-1">
+      <a href="{{url}}" class="block mt-2">
+        <p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
+          {{title}}
+        </p>
+        <p class="mt-3 text-sm text-gray-500 line-clamp-2">
+          {{excerpt}}
+        </p>
+      </a>
+    </div>
+    <div class="mt-6 flex items-center">
+      <div class="">
+        <p class="text-sm font-medium text-gray-900 dark:text-gray-200">
+          <span class="text-gray-500"> <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time></span>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

partials/cardTutorial.hbs

@@ -0,0 +1,35 @@
+<div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden border-solid {{#if featured}}border-8 border-blue-500 border-opacity-50	{{/if}}">
+  <div class="flex-shrink-0">
+    <a href="{{url}}" class="block">
+      {{#if feature_image}}
+        <img class="h-40 w-full object-cover" srcset="{{img_url feature_image size="s"}} 300w,
+                        {{img_url feature_image size="m"}} 600w,
+                        {{img_url feature_image size="l"}} 1000w,
+                        {{img_url feature_image size="xl"}} 2000w"
+          sizes="(max-width: 1000px) 400px, 700px" src="{{img_url feature_image size="m"}}"
+          alt="{{title}}">
+      {{else}}
+        <div class="h-40 w-full block bg-gradient-to-r from-blue-400 to-blue-300 dark:from-blue-900 dark:to-blue-700">&nbsp;</div>
+      {{/if}}
+    </a>
+  </div>
+  <div class="flex-1 bg-white dark:bg-gray-900 dark:text-gray-200 p-6 flex flex-col justify-between">
+    <div class="flex-1">
+      <a href="{{url}}" class="block mt-2">
+        <p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
+          {{title}}
+        </p>
+        <p class="mt-3 text-base text-gray-500 line-clamp-3">
+          {{excerpt}}
+        </p>
+      </a>
+    </div>
+    <div class="mt-6 flex items-center">
+      <div class="">
+        <p class="text-sm font-medium text-gray-900 dark:text-gray-200">
+          <span class="text-gray-500"> <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time></span>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

partials/cardTutorialSm.hbs

@@ -0,0 +1,47 @@
+<div class="flex flex-col rounded-lg transition hover:ring-4 shadow hover:shadow-2xl overflow-hidden">
+  <div class="flex-shrink-0">
+    <a href="{{url}}" class="block relative">
+      {{#if feature_image}}
+      <img class="h-32 w-full object-cover" srcset="{{img_url feature_image size=" s"}} 300w, {{img_url feature_image
+        size="m" }} 600w, {{img_url feature_image size="l" }} 1000w, {{img_url feature_image size="xl" }} 2000w"
+        sizes="(max-width: 1000px) 400px, 700px" src="{{img_url feature_image size=" m"}}" alt="{{title}}">
+      {{else}}
+      <div class="h-32 w-full block bg-blue-500">&nbsp;</div>
+      {{/if}}
+      {{#if featured}} <span class="absolute bottom-3 left-3 text-white">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd"
+            d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z"
+            clip-rule="evenodd" />
+        </svg>
+
+      </span> {{/if}}
+    </a>
+  </div>
+  <div class="flex-1 bg-white dark:bg-gray-900 dark:text-gray-200 p-6 flex flex-col justify-between">
+    <div class="flex-1">
+      <a href="{{url}}" class="block mt-2">
+        <p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
+          {{title}}
+        </p>
+        <p class="mt-3 text-sm text-gray-500 line-clamp-3 md:line-clamp-4">
+          {{excerpt}}
+        </p>
+      </a>
+    </div>
+    <div class="mt-6 flex">
+      <div class="">
+        <p class="text-sm font-medium text-gray-900 dark:text-gray-200">
+          {{#foreach authors}}
+          {{name}}
+          {{/foreach}}
+          <span aria-hidden="true">
+            &middot;
+          </span>
+          <span class="text-gray-500"> <time datetime="{{date format=" YYYY-MM-DD"}}">{{date format="D MMM
+              YYYY"}}</time></span>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

partials/ctaButton.hbs

@@ -0,0 +1,4 @@
+<a href="/getstarted"
+  class="inline-block items-center justify-center px-8 py-3 transition text-base font-medium rounded-md text-white bg-blue-500 hover:ring-4 hover:shadow-3xl md:py-4 md:text-lg">
+  <span class="text-white no-underline">Get Started</span>
+</a>

partials/extras/socialLinks.hbs

@@ -33,4 +33,19 @@ class="text-gray-800 transition dark:text-gray-200 hover:text-gray-500">
     <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
       clip-rule="evenodd"></path>
   </svg>
+</a>
+
+<a href="https://www.youtube.com/c/SpeckleSystems" class="text-gray-800 transition dark:text-gray-200 hover:text-gray-500">
+  <span class="sr-only">Instagram</span>
+  <svg version="1.1"
+	 viewBox="0 0 96.875 96.875" class="h-6 w-6" fill="currentColor">
+<g>
+	<path d="M95.201,25.538c-1.186-5.152-5.4-8.953-10.473-9.52c-12.013-1.341-24.172-1.348-36.275-1.341
+		c-12.105-0.007-24.266,0-36.279,1.341c-5.07,0.567-9.281,4.368-10.467,9.52C0.019,32.875,0,40.884,0,48.438
+		C0,55.992,0,64,1.688,71.336c1.184,5.151,5.396,8.952,10.469,9.52c12.012,1.342,24.172,1.349,36.277,1.342
+		c12.107,0.007,24.264,0,36.275-1.342c5.07-0.567,9.285-4.368,10.471-9.52c1.689-7.337,1.695-15.345,1.695-22.898
+		C96.875,40.884,96.889,32.875,95.201,25.538z M35.936,63.474c0-10.716,0-21.32,0-32.037c10.267,5.357,20.466,10.678,30.798,16.068
+		C56.434,52.847,46.23,58.136,35.936,63.474z"/>
+</g>
+</svg>
 </a>

partials/footer.hbs

@@ -11,7 +11,7 @@
         </div>
       </a>
       <p class="text-gray-500 text-base my-4">
-        {{@site.description}}
+        The world runs on 3D: Speckle enables you to deliver better designs, together.
       </p>
       <div class="flex space-x-6 justify-center md:justify-start">
         {{> extras/socialLinks }}
@@ -35,7 +35,7 @@
       </h3>
       <ul class="mt-4 space-y-4">
 
-        {{#get "posts" filter="tags:features+featured:true" limit="3"}}
+        {{#get "posts" filter="tags:features+featured:true" limit="4"}}
           {{#foreach posts}}
             <li>
               <a href="{{url}}" class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-100">
@@ -45,14 +45,6 @@
           {{/foreach}}
         {{/get}}
 
-        {{#get "tags" filter="slug:usecases" as |tag|}}
-          <li>
-            <a href="/features" class="text-base text-gray-900 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100">
-              See All
-            </a>
-          </li>
-        {{/get}}
-
       </ul>
     </div>
 
@@ -60,7 +52,7 @@
 
     <div class=" text-center md:text-left pt-4 md:pt-0 w-full md:w-2/6 lg:w-1/6">
       <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200 tracking-wider uppercase">
-        Developers
+        <a href="/developers">Developers</a>
       </h3>
       <ul class="mt-4 space-y-4">
 
@@ -74,14 +66,6 @@
           {{/foreach}}
         {{/get}}
 
-        {{#get "tags" filter="slug:usecases" as |tag|}}
-          <li>
-            <a href="/developers" class="text-base text-gray-900 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100">
-              See All
-            </a>
-          </li>
-        {{/get}}
-
       </ul>
     </div>
 

partials/interop/connectorSlider.hbs

@@ -0,0 +1,59 @@
+<div class="pt-10 mx-10">
+  <div class="swiper-container connector-swiper mx-auto">
+    <div class="swiper-wrapper mb-10">
+      {{#get "tags" limit="all" filter="slug:-[features,developers,careers,blog,connectors]"}}
+      {{#foreach tags }}
+      <div
+        class="swiper-slide group dark:text-gray-200 text-gray-600 p-2 flex flex-col prose-blue prose dark:prose-dark max-w-none
+          shadow-lg dark:bg-gray-900 bg-gray-100 rounded-xl
+        ">
+        <div>
+          <img class="mx-auto w-32 transition-transform transform group-hover:scale-110 object-contain"
+            src="{{feature_image}}">
+        </div>
+        <div>
+          <h2 class="w-full mt-4">
+            {{name}}
+          </h2>
+          <p>{{description}}</p>
+          <h3><a href="{{url}}">Check out</a></h3>
+        </div>
+      </div>
+      {{/foreach}}
+      {{/get}}
+    </div>
+  </div>
+</div>
+
+
+
+<script>
+  var swiper = new Swiper(".connector-swiper", {
+    slidesPerView: 3,
+    spaceBetween: 20,
+    loop: true,
+    grabCursor: true,
+    pagination: {
+      el: ".swiper-pagination",
+      clickable: true
+    },
+    breakpoints: {
+      640: {
+        slidesPerView: 3,
+        spaceBetween: 20,
+      },
+      768: {
+        slidesPerView: 3,
+        spaceBetween: 40,
+      },
+      1024: {
+        slidesPerView: 3,
+        spaceBetween: 50,
+      },
+      1280: {
+        slidesPerView: 3,
+        spaceBetween: 50,
+      }
+    }
+  });
+</script>

partials/interop/connectorTagCards.hbs

@@ -0,0 +1,227 @@
+<div class="hidden sm:block lg:sticky w-default transform z-40 top-20 mt-5">
+  <div
+    class="bg-gradient-to-r from-blue-500 to-blue-700 px-5 pt-2 pb-3 flex flex-wrap items-center justify-start rounded-lg w-full text-white">
+    Send
+    <select id="from" name="from" class="block inline-block sm:w-auto mt-1 pl-3 mx-3 pr-10 py-2 text-base font-extrabold shadow-lg text-white bg-blue-500  dark:bg-blue-900 border-gray-300 foc
+      us:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
+      <option value="Select a connector">From</option>
+      {{#get "tags" limit="all" include='count.posts' order='count.posts desc'
+      filter="slug:[rhino,grasshopper,revit,dynamo,excel,blender,autocad,civil3d,unity,unreal,archicad,openrail,etabs,sap2000,csibridge,safe,qgis,arcgis,topsolid,powerbi,sketchup,openroads,microstation,openbuildings,teklastructures]"}}
+      {{#foreach tags }}
+      <option value="{{name}}">{{name}}</option>
+      {{/foreach}}
+      {{/get}}
+    </select>
+    to
+    <select id="to" name="to"
+      class="inline-block sm:w-auto mt-1 pl-3 mx-3 pr-10 py-2 text-base font-extrabold shadow-lg text-white bg-blue-500  dark:bg-blue-900 border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
+      <option value="Select a connector">To </option>
+      {{#get "tags" limit="all" include='count.posts' order='count.posts desc'
+      filter="slug:[rhino,grasshopper,revit,dynamo,excel,blender,autocad,civil3d,unity,unreal,archicad,openrail,etabs,sap2000,csibridge,safe,qgis,arcgis,topsolid,powerbi,sketchup,openroads,microstation,openbuildings,teklastructures]"}}
+      {{#foreach tags }}
+      <option value="{{name}}">{{name}}</option>
+      {{/foreach}}
+      {{/get}}
+    </select>
+    <button class="mt-1" onclick="clearSelection()" id='clearbutton' style="display: none;">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    </button>
+  </div>
+</div>
+
+<div class="relative flex items-center w-default mt-4 text-white"></div>
+<div class="w-default pt-10 grid grid-cols-2 gap-0 gap-y-2 md:gap-6">
+  {{#get "tags" limit="all" include='count.posts' order='count.posts desc'
+  filter="slug:[rhino,grasshopper,revit,dynamo,excel,blender,autocad,civil3d,unity,unreal,archicad,openrail,etabs,sap2000,csibridge,safe,qgis,arcgis,topsolid,powerbi,sketchup,openroads,microstation,openbuildings,teklastructures]"}}
+  {{#foreach tags }}
+  <a href="{{url}}" class="group p-2 py-5 col-span-2 md:col-span-1 flex flex-row
+          shadow-sm hover:shadow-xl transition-shadow hover:ring dark:bg-gray-900 bg-white rounded-xl connector-card connector-{{name}}
+        ">
+    <div class="flex flex-shrink-0 items-center justify-center mx-6">
+      <img class="mx-auto h-16 w-16 sm:h-32 sm:w-32 transition-transform transform group-hover:scale-110 object-contain"
+        src="{{feature_image}}">
+    </div>
+    <div class="flex flex-grow flex-col justify-center">
+      <h2 class="text-xl dark:text-gray-50 text-gray-900 font-bold flex items-center group-hover:text-blue-500">
+        {{name}}
+        <svg xmlns="http://www.w3.org/2000/svg"
+          class="ml-2 h-6 w-6 transition-opacity opacity-0 group-hover:opacity-100" fill="none" viewBox="0 0 24 24"
+          stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
+        </svg>
+      </h2>
+      <p class="text-sm dark:text-gray-400 text-gray-600 line-clamp-2 md:line-clamp-3">{{description}}</p>
+    </div>
+  </a>
+  {{/foreach}}
+  {{/get}}
+
+  <div class="col-span-2" id="tutorial-links">
+    <input type="text" name="search" id="search-bar"
+      class="hidden focus:ring-blue-500 focus:border-blue-500 transition w-full pl-10 sm:text-sm border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white rounded-md h h-12"
+      placeholder="Search...">
+    <div id="some-tutorials" class="w-full text-xs text-center dark:text-white hidden">Some tutorials:</div>
+    <div id="search-results" class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3"></div>
+  </div>
+
+  <div
+    class="group dark:text-gray-200 text-gray-600 p-2 col-span-2 tip-card flex flex-col justify-center items-center my-10 dark:bg-gray-900 bg-white rounded-xl shadow-xl py-10"
+    id='tipcontainer' style="display: none;">
+    <div class="prose-blue prose prose-sm dark:prose-dark max-w-none">
+      <h3 id="tip-text" class="text-center"></h3>
+    </div>
+    <div class="my-4">
+      {{> ctaButton}}
+    </div>
+    <div class="prose prose-sm dark:prose-dark">
+      <p>For the full details, check our list of <a href="https://speckle.guide/user/support-tables.html">supported
+          elements</a>.</p>
+    </div>
+  </div>
+
+</div>
+
+<script>
+
+  document.getElementById('from').addEventListener('change', fromSelect)
+  document.getElementById('to').addEventListener('change', toSelect)
+
+  let selection = [null, null]
+
+  function fromSelect(event) {
+    selection[0] = event.target.value
+    filterCards()
+  }
+
+  function toSelect(event) {
+    selection[1] = event.target.value
+    filterCards()
+  }
+
+  function clearSelection() {
+    selection[0] = null
+    selection[1] = null
+    document.getElementById('from').value = 'Select a connector'
+    document.getElementById('to').value = 'Select a connector'
+    filterCards()
+    document.getElementById('clearbutton').style.display = 'none'
+    document.getElementById('tipcontainer').style.display = 'none'
+
+    document.getElementById('search-bar').value = ''
+    document.getElementById('search-bar').dispatchEvent(new Event('keyup'))
+  }
+
+  function filterCards() {
+    console.log(tips[selection[0] + selection[1]])
+
+
+    if (selection[0] === 'Select a connector' || !selection[0]) {
+      [].forEach.call(document.getElementsByClassName(`connector-card`), el => el.style.display = 'flex')
+      return
+    }
+    document.getElementById('clearbutton').style.display = 'flex'
+    document.getElementById('search-bar').value = selection[0]
+    document.getElementById('search-bar').dispatchEvent(new Event('keyup'))
+
+      ;[].forEach.call(document.getElementsByClassName(`connector-card`), el => el.style.display = 'none')
+
+    document.getElementsByClassName(`connector-${selection[0]}`)[0].style.display = 'flex'
+
+    if (selection[1] === 'Select a connector' || !selection[1]) return
+    document.getElementsByClassName(`connector-${selection[1]}`)[0].style.display = 'flex'
+
+    if (tips[selection[0] + selection[1]]) {
+      document.getElementById('tip-text').innerHTML = tips[selection[0] + selection[1]]
+    } else {
+      document.getElementById('tip-text').innerHTML = 'Let us know how you use this workflow on the <a href="https://speckle.community">community forum</a>!'
+    }
+    document.getElementById('tipcontainer').style.display = 'flex'
+
+    document.getElementById('search-bar').value = selection[0] + ' ' + selection[1]
+    document.getElementById('search-bar').dispatchEvent(new Event('keyup'))
+  }
+
+  const tips = {
+    'GrasshopperExcel': `Yep, it works nicely - parametric schedules here we come!`,
+    'GrasshopperRevit': `Using our advanced BIM creation nodes, you generate a full building in Grasshopper and send it to Revit!`,
+    'RhinoGrasshopper': `Planning to distribute your design tasks across a team? Speckle can help you do that!`,
+    'GrasshopperRhino': `Planning to distribute your design tasks across a team? Speckle can help you do that!`,
+    'AutocadGrasshopper': `Turbocharge drafting with some parametric smartness. Defo worth it!`,
+    'GrasshopperAutocad': `Turbocharge drafting with some parametric smartness. Defo worth it!`,
+    'Civil3dGrasshopper': `Turbocharge infrastructure design with some parametric smartness. Defo worth it!`,
+    'GrasshopperCivil3d': `Turbocharge infrastructure design with some parametric smartness. Defo worth it!`,
+    'DynamoRevit': `Hm... you know you can just open Dynamo up in Revit, right?`,
+    'RevitDynamo': `Hm... you know you can just open Dynamo up in Revit, right?`,
+    'RhinoRevit': `Sketch your design in Rhino, and get it into Revit using Speckle's BIM tagging tools!`,
+    'ExcelRevit': `So you want to control properties of specific Revit elements from Excel? Yes you can.`,
+    'RevitExcel': `Scheduling much? Let Speckle help!`,
+    'ExcelExcel': `Excel to Excel workflows work quite well - especially for a distributed team!`,
+    'ExcelRhino': `You can actually create full on geometry and BIM elements from Excel, send them to Speckle, and receive them in Rhino.`,
+    'ExcelGrasshopper': `You can actually create full on geometry and BIM elements from Excel, send them to Speckle, and receive in Grasshopper.`,
+    'ExcelDynamo': `You can actually create full on geometry and BIM elements from Excel, send them to Speckle, and receive them in Dynamo.`,
+    'ExcelBlender': `You can actually create full on geometry and BIM elements from Excel, send them to Speckle, and receive them in Blender.`,
+    'ExcelAutocad': `You can actually create full on geometry and BIM elements from Excel, send them to Speckle, and receive them in Autocad.`,
+    'UnityRhino': `Visualisation has never been easier - combine multiple models, do walkthroughs, send data back to inform your designs!`,
+    'RhinoUnity': `Visualisation has never been easier - combine multiple models, do walkthroughs, send data back to inform your designs!`,
+    'UnrealRhino': `Visualisation has never been nicer - combine multiple models in AR/XR, do walkthroughs, send data back to inform your designs!`,
+    'RhinoUnreal': `Visualisation has never been nicer - combine multiple models in AR/XR, do walkthroughs, send data back to inform your designs!`,
+    'UnrealRevit': `Visualisation has never been nicer - combine multiple models in AR/XR, do walkthroughs, send data back to inform your designs!`,
+    'RevitUnreal': `Visualisation has never been nicer - combine multiple models in AR/XR, do walkthroughs, send data back to inform your designs!`,
+  }
+
+  window.addEventListener('load', () => {
+    const tutorialSearchConnectors = new SearchinGhost({
+      key: window.searchKey,
+      loadOn: 'page',
+      postFields: ['title', 'url', 'excerpt', 'published_at'],
+      postsExtraFields: ['tags'],
+      customProcessing: function (post) {
+        if (post.tags && post.tags.length !== 0) {
+          post.firstTag = post.tags[0].name.toLowerCase()
+          post.string_tags = post.string_tags = post.tags.map(o => o.name).join(' ').toLowerCase()
+        }
+        else post.firstTag = "no-tag"
+
+        return post
+      },
+      outputChildsType: '',
+      limit: 3,
+      searchOptions: {
+        where: {
+          firstTag: "tutorials"
+        },
+      },
+      onSearchEnd: function (posts) {
+        console.log(posts.length)
+        if (posts.length !== 0) {
+          document.getElementById('some-tutorials').style.display = 'block'
+        } else {
+          document.getElementById('some-tutorials').style.display = 'none'
+        }
+
+      },
+      template: function (post) {
+        return `
+        <div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden w-full">
+          <div class="flex-1 bg-white dark:bg-gray-900 dark:text-gray-200 p-6 flex flex-col justify-between">
+            <div class="flex-1">
+              <a href="${post.url}" class="block mt-2">
+                <p class="font-semibold text-gray-900 dark:text-gray-200 line-clamp-2">
+                  <span class="text-xs py-0 px-2 rounded border border-blue-500 text-blue-500">${post.firstTag}</span> ${post.title}
+                </p>
+                <p class="mt-3 text-sm text-gray-500 line-clamp-2">
+                  ${post.excerpt}
+                </p>
+              </a>
+            </div>
+          </div>
+        </div>
+        `
+      }
+    })
+
+    window.srch = tutorialSearchConnectors
+  })
+</script>

partials/landing/blogPreview.hbs

@@ -1,12 +1,12 @@
 {{#get "posts" filter="primary_tag:blog" limit="3" include="authors"}}
-  <div class="">
+  <div class="pt-10">
     <div class="relative w-default container mx-auto pb-20 lg:pb-32">
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 text-gray-500 dark:text-gray-600">
 
 
         <div>
           <div class="relative border-l-4 dark:border-gray-700">
-            <h2 class="text-4xl pl-5 mb-5 font-bold text-blue-600">Blog</h2>
+            <h2 class="text-4xl pl-5 mb-5 font-bold text-blue-500">Blog</h2>
             <p class=" pl-5 text-lg text-gray-800 dark:text-gray-400">
               Latest news from Speckle.
             </p>
@@ -15,7 +15,7 @@
           <div class="relative mt-5 rounded-xl py-5 hover:shadow-2xl transition overflow-hidden flex">
             <a href="/blog" class="w-full self-center">
               <div class="relative px-5">
-                <div class="text-lg font-semibold text-blue-600">
+                <div class="text-lg font-semibold text-blue-500">
                   Read More →
                 </div>
               </div>

partials/landing/connectorsPreview.hbs

@@ -0,0 +1,125 @@
+<div class="relative perspective-700 overflow-hidden max-w-full w-full z-30">
+  <div
+    class="relative perspective-transform z-30 w-full md:w-2/3 lg:w-1/2 mx-auto dark:bg-gray-900 border-4 border-blue-500 border-opacity-0 hover:border-opacity-100  bg-gray-200 prose lg:prose-lg dark:prose-dark max-w-none text-center rounded-3xl pt-10 pb-6 mt-10 -mb-8">
+    <div class="relative px-4 z-30">
+      <a href="/features/connectors" class="no-underline">
+        <h1><span class='text-blue-500'>Speckle</span> Connectors</h1>
+        {{#get "posts" filter="primary_tag:features+featured:true+title:'Speckle Connectors'" limit="1"}}
+        {{#foreach posts}}
+        <p class="pb-4">{{excerpt}}</p>
+        {{/foreach}}
+        {{/get}}
+      </a>
+    </div>
+  </div>
+
+  <div class="relative transform perspective-700 dark:bg-gray-900 bg-gray-200 pt-10 z-0 flex justify-around">
+    <div id="prev"
+      class="px-1 lg:px-4 flex-shrink transition text-blue-500 flex bg-none dark:hover:bg-gray-800 hover:bg-gray-100 opacity-40 hover:opacity-100 rounded-full -mt-5 cursor-pointer">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 self-center" fill="none" viewBox="0 0 24 24"
+        stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+      </svg>
+    </div>
+    <div class="swiper-container connector-swiper">
+      <div class="swiper-wrapper mb-10">
+        {{#get "tags" limit="all" include='count.posts' order='count.posts desc'
+        filter="slug:[rhino,grasshopper,revit,dynamo,excel,blender,autocad,civil3d,archicad,openrail,unity,unreal,etabs,sap2000,csibridge,safe,qgis,arcgis,topsolid,powerbi,sketchup,openroads,microstation,openbuildings,teklastructures]"}}
+        {{#foreach tags }}
+        <a href="{{url}}"
+          class="swiper-slide group dark:text-gray-200 text-gray-600 p-2 text-center content-center flex flex-wrap justify-center">
+          <img class="mx-auto w-32 transition-transform transform group-hover:scale-110" src="{{feature_image}}">
+          <p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
+            {{name}}
+          </p>
+        </a>
+        {{/foreach}}
+        {{/get}}
+      </div>
+      {{!-- <div class="swiper-pagination mt-10"></div> --}}
+    </div>
+    <div id="next"
+      class="px-1 lg:px-4 flex-shrink transition text-blue-500 flex bg-none dark:hover:bg-gray-800 hover:bg-gray-100 opacity-40 hover:opacity-100 rounded-full -mt-5 cursor-pointer">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 self-center" fill="none" viewBox="0 0 24 24"
+        stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+      </svg>
+    </div>
+  </div>
+</div>
+
+<div
+  class="group w-full mx-auto prose lg:prose-lg dark:prose-dark max-w-none text-center p-10 bg-gradient-to-b from-gray-200 dark:from-gray-900">
+  <div class="w-default px-4">
+    Go beyond interoperability and leverage all the potential behind a fully fledged BIM data platform
+  </div>
+  <div class="flex flex-wrap content-center justify-center">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
+      stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+    </svg>
+  </div>
+</div>
+
+<div class="relative">
+  <div class="w-default mx-auto pb-10 space space-y-4 mt-20">
+    {{#get "posts" filter="primary_tag:features+featured:true+title:-'Speckle Connectors'" limit="5"}}
+    {{#foreach posts}}
+    <div class="px-4 flex flex-col md:flex-row group">
+      <a href="{{url}}"
+        class="w-full md:w-1/2 p-4 self-center text-center md:text-left transition group-hover:shadow-xl rounded-xl dark:group-hover:bg-gray-900 group-hover:bg-gray-50">
+        <div class="prose dark:prose-dark prose-blue lg:prose-lg group">
+          <h2>
+            {{title}}
+          </h2>
+          <p>{{excerpt}}</p>
+          <p><button href="{{url}}" class="font-bold group-hover:text-blue-500">Read More</button></p>
+        </div>
+      </a>
+      <div
+        class="w-full md:w-1/2 {{#if @even}} md:order-first {{else}}{{/if}} transform group-hover:scale-125 transition-transform pointer-events-none ">
+        <img class="object-contain h-60 w-full" srcset="{{img_url feature_image size=" s"}} 300w, {{img_url
+          feature_image size="m" }} 600w, {{img_url feature_image size="l" }} 1000w, {{img_url feature_image size="xl"
+          }} 2000w" sizes="(max-width: 1000px) 400px, 700px" src="{{img_url feature_image size=" m"}}" alt="{{title}}">
+      </div>
+    </div>
+    {{/foreach}}
+    {{/get}}
+  </div>
+</div>
+
+<script>
+  window.addEventListener('load', (event) => {
+    let swiper = new Swiper(".connector-swiper", {
+      slidesPerView: 3,
+      spaceBetween: 20,
+      loop: true,
+      grabCursor: true,
+      autoplay: {
+        delay: 2000,
+        disableOnInteraction: false,
+        pauseOnMouseEnter: true
+      },
+      breakpoints: {
+        768: {
+          slidesPerView: 5,
+          spaceBetween: 50,
+        },
+        1280: {
+          slidesPerView: 7,
+          spaceBetween: 50,
+        }
+      }
+    })
+
+    swiper.slideTo(6, 1000)
+
+    document.getElementById('prev').onclick = function () {
+      swiper.slidePrev(200)
+    }
+
+    document.getElementById('next').onclick = function () {
+      swiper.slideNext(200)
+    }
+  })
+</script>

partials/landing/developersPreview.hbs

@@ -5,7 +5,7 @@
     <div class="w-default mt-36 my-0 grid grid-cols-1 lg:grid-cols-2 gap-10 mb-10 ">
       <div class="relative">
         <div class="border-l-4 dark:border-gray-700">
-          <h2 class="text-4xl pl-5 mb-5 font-bold text-blue-600">Built
+          <h2 class="text-4xl pl-5 mb-5 font-bold text-blue-500">Built
             for developers</h2>
           <p class=" pl-5 text-lg text-gray-800 dark:text-gray-400">
             We're building the <code>git</code> of AEC -
@@ -44,7 +44,7 @@
           <div class="relative rounded-xl py-5 hover:rounded-2xl shadow hover:shadow-2xl dark:hover:bg-gray-800 bg-white dark:bg-gray-900 transition overflow-hidden flex">
             <a href="/developers" class="w-full self-center">
               <div class="relative px-8">
-                <div class="text-xl font-semibold text-blue-600">
+                <div class="text-xl font-semibold text-blue-500">
                   Start Developing →
                 </div>
               </div>
@@ -61,34 +61,9 @@
         <p class="relative text-xl lg:hidden font-semibold text-gray-900 dark:text-gray-200 bg-white dark:bg-gray-900 py-8 px-8">
           3d Viewer: Batteries Included
         </p>
-        <div class="relative h-72 w-full flex items-center justify-center bg-gradient-to-br from-white dark:from-gray-900 via-gray-200 dark:via-gray-700 dark:to-gray-800 to-white"
+        <div class="relative h-96 w-full flex items-center justify-center bg-gradient-to-br from-white dark:from-gray-900 via-gray-200 dark:via-gray-700 dark:to-gray-800 to-white"
           id="renderer">
-
-          <div class="h-1 bg-gray-200 absolute bg-blue-500 shadow-md" style="width:0%;" id="bar"></div>
-          <button class="animate-bounce self-center text-sm font-bold bg-blue-600 text-white rounded-full p-3 shadow-2xl transition hover:bg-blue-500"
-            onclick="loadViewer()" id="loadbutton">
-            <svg class="inline-flex h-6 w-6" xmlns="http://www.w3.org/2000/svg"
-              fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round"
-                stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
-            </svg>
-            Load Model
-          </button>
-          <button class="absolute hidden bottom-2 right-2 text-sm mb-1 ml-1 font-bold bg-blue-600 text-white rounded-full p-1 shadow-2xl transition hover:bg-blue-500"
-            onclick="ze()" id="zebutton">
-            <svg class="inline-flex h-5 w-5" xmlns="http://www.w3.org/2000/svg"
-              fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round"
-                stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
-            </svg>
-          </button>
-          <button class="absolute hidden bottom-2 right-12 text-sm mb-1 ml-1 font-bold bg-blue-600 text-white rounded-full p-1 shadow-2xl transition hover:bg-blue-500"
-            onclick="toggleSection()" id="sectionbutton">
-            <svg class="inline-flex h-5 w-5" xmlns="http://www.w3.org/2000/svg"
-              fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
-            </svg>
-          </button>
+          <iframe src="https://speckle.xyz/embed?stream=3073b96e86"style="width: 100%; height:100%;"></iframe>
         </div>
         <div class="w-full bg-gray-300 dark:bg-gray-900 text-gray-500 text-xs py-2 px-8">
           $ ▸ superApp.js <span class="ml-3 opacity-50">#
@@ -102,10 +77,6 @@
 
   let viewer = new Viewer( )
 
-  // event handlers
-  viewer.on( 'load-progress', args => handleProgress( args ) )
-  viewer.on( 'object-clicked', objs => handleObjClick( objs ) )
-
   // load a model
   async function load( commitUrl ) {
     await viewer.loadObject( commitUrl )
@@ -115,46 +86,4 @@
     </div>
 
   </div>
-  <script src="{{asset "built/Speckle.js"}}"></script>
-  <script type="text/javascript">
-  let v
-
-  window.ze = function() {
-    v.interactions.zoomExtents()
-  }
-
-  window.toggleSection = function() {
-    v.interactions.toggleSectionBox()
-  }
-
-
-  window.loadViewer = function() {
-
-    v = new Speckle.Viewer({
-      container: document.getElementById(
-        'renderer')
-    });
-    v.on('load-progress', args => {
-      width = args.progress * 100
-      document.getElementById('bar').style.width = `${width}%`;
-      if( width > 99 ) {
-        document.getElementById('bar').style.display = 'none';
-      }
-    })
-
-    ;(() => {
-      v.loadObject(
-        "https://speckle.xyz/streams/3073b96e86/objects/e05c5834368931c9d9a4e2087b4da670"
-      )
-    })()
-
-    document.getElementById('loadbutton').style.display =
-      "none"
-    document.getElementById('zebutton').style.display =
-      "block"
-    document.getElementById('sectionbutton').style.display =
-      "block"
-    v.onWindowResize()
-  }
-  </script>
 {{/get}}

partials/landing/header.hbs

@@ -1,19 +1,39 @@
-<main class="w-default relative z-1 h-screen/2-3 flex flex-wrap content-center">
-  <div class="w-3/3 lg:w-2/3 text-center lg:text-left">
-    <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
-      <span class="block xl:inline text-gray-800 dark:text-gray-200">{{@site.description}}</span>
-    </h1>
-    <p class="text-base lg:w-prose text-gray-800 dark:text-gray-200 sm:text-lg md:text-xl md:max-w-6xl mt-2 md:mt-6 lg:mt-10">
-      Engineers, designers, hackers and entire
-      organizations rely on us for interoperability,
-      automation and collaboration to deliver better
-      buildings, faster.
-    </p>
-    <div class="mt-5 mx-auto md:mt-8">
-      <a href="/getstarted" class="items-center justify-center px-8 py-3 border border-transparent transition text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 hover:shadow-xl md:py-4 md:text-lg md:px-10">
-        Join the Beta
+<main class="w-default relative z-1 py-10 lg:py-16 content-center flex flex-col lg:flex-row">
+  <div class="w-full lg:w-1/2 text-center lg:text-left self-center">
+    <div class="prose dark:prose-dark prose-lg self-center max-w-none">
+      <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
+        <span class="block xl:inline text-gray-800 dark:text-gray-200">
+          The Platform For 3D Data
+        </span>
+      </h1>
+      <p
+        class="text-base lg:w-prose text-gray-800 dark:text-gray-200 sm:text-lg md:text-xl md:max-w-6xl mt-2 md:mt-6 lg:mt-10">
+        The world runs on 3D: designers, engineers, hackers and entire
+        organizations rely on us for interoperability,
+        automation and collaboration to deliver better, together.
+      </p>
+    </div>
+    <div class="mt-5 md:mt-8 flex items-center justify-center lg:justify-start">
+      <a href="https://speckle.xyz/authn/register" class="items-center justify-center px-8 py-3 transition text-base font-medium rounded-md text-white bg-blue-500 hover:ring-4 hover:shadow-3xl md:py-4 md:text-lg md:px-10
+        ">
+        <span class="text-white no-underline">Register Now</span>
       </a>
-      <a href="https://v1.speckle.systems" target="_blank" class="ml-4 text-gray-500 text-xs transition hover:text-blue-500">Looking for V1?</a>
+      <a href="/download" class="hidden lg:flex ml-4 transition dark:text-gray-100 hover:text-blue-500">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+        </svg>
+        <span class="ml-2">Download</span>
+      </a>
+    </div>
+  </div>
+  <div class="w-full lg:w-1/2 p-4 mt-4 lg:mt-0">
+    <div class="overflow-hidden shadow-2xl rounded-2xl mx-auto max-w-xl lg:w-full aspect-w-16 aspect-h-9">
+      <div class="h-full">
+        <iframe width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/B9humiSpHzM"
+          title="YouTube video player" frameborder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowfullscreen></iframe>
+      </div>
     </div>
   </div>
 </main>

partials/landing/newsletter.hbs

@@ -1,7 +1,26 @@
 <div class="relative w-default text-center pt-10 mb-10">
   <h2 class="text-2xl pl-5 mb-5 text-gray-800 dark:text-gray-400"><span class="text-blue-600">Newsletter:</span> Subscribe to stay in touch with future updates!</h2>
-  <iframe class="mj-w-res-iframe" frameborder="0" scrolling="no"
-    marginheight="0" marginwidth="0" src="https://app.mailjet.com/widget/iframe/5q9H/Hvk"
-    width="100%"></iframe>
+  <!-- Begin Mailchimp Signup Form -->
+<div id="mc_embed_signup">
+<form action="https://systems.us12.list-manage.com/subscribe/post?u=6335a2a9916df44ec7c5e38d9&amp;id=3a18b28543&amp;f_id=0062b1e0f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
+    <div id="mc_embed_signup_scroll">
+	
+<div class="mc-field-group">
+	<input type="email" value="" placeholder="email" name="EMAIL" class="required email rounded-md" id="mce-EMAIL">
+  <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="inline-flex  items-center justify-center ml-3 px-4 py-2 border border-transparent transition rounded-md shadow-sm text-base font-medium text-white bg-blue-500 hover:ring-4 hover:shadow-xl"></div>
+   
+	<span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
 </div>
-<script type="text/javascript" src="https://app.mailjet.com/statics/js/iframeResizer.min.js"></script>
+<div hidden="true"><input type="hidden" name="tags" value="10469769"></div>
+	<div id="mce-responses" class="clear">
+		<div class="response" id="mce-error-response" style="display:none"></div>
+		<div class="response" id="mce-success-response" style="display:none"></div>
+	</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_6335a2a9916df44ec7c5e38d9_3a18b28543" tabindex="-1" value=""></div>
+ 
+</form>
+</div>
+</div>
+<script type="text/javascript" src="https://app.mailjet.com/statics/js/iframeResizer.min.js"></script>
+
+

partials/landing/opensource.hbs

@@ -1,8 +1,8 @@
-<div class="flex w-full py-10 lg:py-32 ">
+<div class="relative flex w-full mt-20 md:mt-0 py-10 lg:py-32 bg-gradient-to-t from-transparent dark:to-gray-900 to-gray-200">
   <div class="w-default grid grid-cols-1 lg:grid-cols-2 gap-10">
     <div class="relative">
       <div class="border-l-4 dark:border-gray-700">
-        <h2 class="text-4xl pl-5 mb-5 font-bold text-blue-600 ">Open
+        <h2 class="text-4xl pl-5 mb-5 font-bold text-blue-500 ">Open
           Source</h2>
         <p class="pl-5 text-lg text-gray-800 dark:text-gray-400">
           Our mission is to transform the AEC industry for
@@ -17,17 +17,17 @@
       <ul class="pl-5 pt-5 text-lg text-gray-800 dark:text-gray-400 list-inside list-disc">
 
         <li class="mt-2">
-          <b class="text-blue-600">Independence:</b>
+          <b class="text-blue-500">Independence:</b>
           no vendor or cloud provider lock-in.
         </li>
 
         <li class="mt-2">
-          <b class="text-blue-600">Data sovereignty:</b>
+          <b class="text-blue-500">Data sovereignty:</b>
           choose how and where your data is stored
         </li>
 
         <li class="mt-2">
-          <b class="text-blue-600">Longevity:</b>
+          <b class="text-blue-500">Longevity:</b>
           open source code keeps thriving when business
           plans change.
         </li>
@@ -44,7 +44,7 @@
       <div class="w-full self-center">
         <div class="block h-32 w-32 mx-auto">
           <svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd"
-            class="fill-current text-blue-600"
+            class="fill-current text-blue-500"
             stroke-linejoin="round" stroke-miterlimit="2"
             clip-rule="evenodd" viewBox="0 0 2483 2404">
             <path d="M1391.07 1631.92c215.45-82.75 323.06-324.52 240.35-540.05-82.72-215.53-324.44-323.17-539.9-240.43-215.45 82.74-323.04 324.53-240.34 540.06a418.12 418.12 0 00240.35 240.42l-281.47 733.7c-620.53-238.27-930.49-934.6-692.32-1555.32 238.18-620.73 934.28-930.78 1554.8-692.53 620.53 238.25 930.49 934.57 692.3 1555.3a1204.18 1204.18 0 01-692.3 692.52l-281.47-733.68v.01z" />

partials/menus/resourcesMenu.hbs

@@ -44,9 +44,7 @@
               </span>Docs
             </p>
             <p class="mt-1 text-sm font-normal  text-gray-900 dark:text-gray-50">
-              Documentation and step-by-step guides on how
-              to
-              get the best of Speckle.
+              In depth documentation on Speckle.
             </p>
           </div>
           <p class="mt-2 text-sm font-medium text-blue-600 lg:mt-4">Check

partials/navbar.hbs

@@ -2,9 +2,20 @@
 <div class="mt-0 w-full h-20"></div>
 
 {{!-- Actual navbar --}}
-<div x-data="{ mobileMenuOpen: false, usecasesMenu: false, developersMenu: false, resourcesMenu: false, flyoutMenuOpen: false }"
-  class="fixed top-0 shadow mt-0 w-full bg-white dark:bg-gray-900 dark:text-white z-20">
+<div
+  x-data="{ mobileMenuOpen: false, usecasesMenu: false, developersMenu: false, resourcesMenu: false, flyoutMenuOpen: false, topBanner: null }"
+  x-init="topBanner = window.topBanner"
+  class="fixed top-0 shadow mt-0 w-full bg-white dark:bg-gray-900 dark:text-white" style="z-index: 1000;">
+
+  {{!-- Hiring notice --}}
+  {{#is "home"}}
+  <div x-cloak x-show="topBanner" x-html="topBanner" @mouseenter="usecasesMenu = false; resourcesMenu = false; developersMenu = false; flyoutMenuOpen = false;" class=" transition transform origin-top hover:scale-105">
+  </div>
+  {{/is}}
+
+
   <div class="relative">
+
     <div class="w-default flex justify-between items-center py-5 sm:py-4 md:justify-between">
 
       {{!-- Logo/Home Link --}}
@@ -12,7 +23,7 @@
       <div @mouseenter="usecasesMenu = false; resourcesMenu = false; developersMenu = false">
         <a href="/" class="flex relative" style="margin-top:-4px;">
           <img class="h-8 mr-2 " src="{{@site.logo}}" alt="logo">
-          <div class="text-2xl text-blue-600 dark:text-blue-500 title-font font-bold mr-5">
+          <div class="text-2xl text-blue-500 title-font font-bold mr-5 hidden">
             Speckle
           </div>
         </a>
@@ -23,12 +34,9 @@
       <div class="-mr-2 -my-2 lg:hidden">
         <button @click="mobileMenuOpen = true" type="button"
           class="bg-white dark:bg-gray-900 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
-          <svg class="h-6 w-6" x-description="Heroicon name: menu"
-            xmlns="http://www.w3.org/2000/svg" fill="none"
-            viewBox="0 0 24 24" stroke="currentColor"
-            aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round"
-              stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+          <svg class="h-6 w-6" x-description="Heroicon name: menu" xmlns="http://www.w3.org/2000/svg" fill="none"
+            viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
           </svg>
         </button>
       </div>
@@ -36,102 +44,105 @@
       {{!-- Main Menu --}}
 
       <div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-between">
-        <nav class="flex space-x-4">
+        <nav class="flex">
 
           {{!-- use cases menu button --}}
 
           <div class="relative">
-            <button type="button" @mouseenter="usecasesMenu = true; resourcesMenu = false; developersMenu = false; flyoutMenuOpen = false;"
-              @click="usecasesMenu = !usecasesMenu;"
-              x-state:on="Item active" x-state:off="Item inactive"
-              :class="{ 'text-gray-900 dark:text-gray-50': usecasesMenu, 'text-gray-700 dark:text-gray-400': !usecasesMenu }"
-              class="group bg-white dark:bg-gray-900 rounded-md text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 inline-flex items-center text-base font-medium focus:outline-none outline-none">
-              <span>Features</span>
-              <svg x-state:on="Item active" x-state:off="Item inactive"
-                class="ml-2 h-5 w-5 text-gray-400 group-hover:text-gray-500"
-                x-bind:class="{ 'text-gray-600': usecasesMenu, 'text-gray-400': !usecasesMenu }"
-                x-description="Heroicon name: chevron-down"
-                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-                fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                  clip-rule="evenodd"></path>
-              </svg>
-            </button>
-          </div>
 
-          {{!-- developers menu button --}}
+            <a href="/features/connectors"
+              class="transition hover:bg-blue-100 dark:hover:bg-gray-800 rounded-md px-2 text-gray-700 dark:text-gray-400 hover:text-blue-500 inline-flex items-center text-base font-medium">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
+              </svg>
+              <span>Connectors</span>
+            </a>
+          </div>
 
           <div class="relative">
-            <button type="button" @mouseenter="developersMenu = true; usecasesMenu = false; resourcesMenu = false; flyoutMenuOpen = false;"
-              @click="developersMenu = !developersMenu;"
-              x-state:on="Item active" x-state:off="Item inactive"
-              :class="{ 'text-gray-900 dark:text-gray-50': developersMenu, 'text-gray-700 dark:text-gray-400': !developersMenu }"
-              class="group bg-white dark:bg-gray-900 rounded-md text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 inline-flex items-center text-base font-medium focus:outline-none outline-none">
-              <span>Developers</span>
-              <svg x-state:on="Item active" x-state:off="Item inactive"
-                class="ml-2 h-5 w-5 text-gray-400 group-hover:text-gray-500"
-                x-bind:class="{ 'text-gray-600': developersMenu, 'text-gray-400': !developersMenu }"
-                x-description="Heroicon name: chevron-down"
-                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-                fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                  clip-rule="evenodd"></path>
+            <a href="/tutorials" @mouseenter="resourcesMenu = false; flyoutMenuOpen = false;"
+              class="transition hover:bg-blue-100 dark:hover:bg-gray-800 rounded-md px-2 text-gray-700 dark:text-gray-400 hover:text-blue-500 inline-flex items-center text-base font-medium">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
               </svg>
-            </button>
+              <span>Tutorials</span>
+            </a>
+          </div>
+          
+          <div class="relative">
+            <a href="https://speckle.community" target="_blank" @mouseenter="resourcesMenu = false; flyoutMenuOpen = false;"
+              class="transition hover:bg-blue-100 dark:hover:bg-gray-800 rounded-md px-2 text-gray-700 dark:text-gray-400 hover:text-blue-500 inline-flex items-center text-base font-medium">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke-width="2"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
+              </svg>
+              <span>Community</span>
+              <svg xmlns="http://www.w3.org/2000/svg" class="ml-1 h-3 w-3" fill="none" viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+              </svg>
+            </a>
           </div>
-
-          {{!-- Learn menu button --}}
 
           <div class="relative">
-            <button type="button" @mouseenter="resourcesMenu = true; usecasesMenu = false; developersMenu = false; flyoutMenuOpen = false;"
-              @click="resourcesMenu = !resourcesMenu;" x-state:on="Item active"
-              x-state:off="Item inactive" :class="{ 'text-gray-900 dark:text-gray-50': resourcesMenu, 'text-gray-700 dark:text-gray-400': !resourcesMenu }"
-              class="group bg-white dark:bg-gray-900 rounded-md text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 inline-flex items-center text-base font-medium focus:outline-none outline-none">
-              <span>Resources</span>
-              <svg x-state:on="Item active" x-state:off="Item inactive"
-                class="ml-2 h-5 w-5 text-gray-400 group-hover:text-gray-500"
-                x-bind:class="{ 'text-gray-600': resourcesMenu, 'text-gray-400': !resourcesMenu }"
-                x-description="Heroicon name: chevron-down"
-                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-                fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                  clip-rule="evenodd"></path>
+            <a href="https://speckle.guide" target="_blank" @mouseenter="resourcesMenu = false; flyoutMenuOpen = false;"
+              class="transition hover:bg-blue-100 dark:hover:bg-gray-800 rounded-md px-2 text-gray-700 dark:text-gray-400 hover:text-blue-500 inline-flex items-center text-base font-medium">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke-width="2"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
               </svg>
-            </button>
+
+              <span>Docs</span>
+              <svg xmlns="http://www.w3.org/2000/svg" class="ml-1 h-3 w-3" fill="none" viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+              </svg>
+            </a>
           </div>
+          
 
-          {{!-- About  --}}
+          {{!-- <div class="relative" @mouseenter="resourcesMenu = false; flyoutMenuOpen = false;">
+            <a href="/developers"
+              class="transition hover:bg-blue-100 dark:hover:bg-gray-800 rounded-md px-2 text-gray-700 dark:text-gray-400 hover:text-blue-500 inline-flex items-center text-base font-medium">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+              <span>Devs</span>
+            </a>
+          </div> --}}
 
-          <div class="relative" @mouseenter="resourcesMenu = false; usecasesMenu = false; developersMenu = false; flyoutMenuOpen = true"
-            @mouseleave="">
-            <button type="button" @click="flyoutMenuOpen = !flyoutMenuOpen"
-              x-state:on="Item active" x-state:off="Item inactive"
-              :class="{ 'text-gray-900': flyoutMenuOpen, 'text-gray-500': !flyoutMenuOpen }"
-              class="group bg-white dark:bg-gray-900 rounded-md text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 inline-flex items-center text-base font-medium focus:outline-none outline-none">
+          {{!-- Resources menu button --}}
+          {{!-- About --}}
+
+          <div class="relative" @mouseenter="resourcesMenu = false; flyoutMenuOpen = true" @mouseleave="">
+            <button type="button" @click="flyoutMenuOpen = !flyoutMenuOpen" x-state:on="Item active"
+              x-state:off="Item inactive" :class="{ 'text-gray-900': flyoutMenuOpen, 'text-gray-500': !flyoutMenuOpen }"
+              class="transition hover:bg-blue-100 dark:hover:bg-gray-800 rounded-md px-2 text-gray-700 dark:text-gray-400 hover:text-blue-500 inline-flex items-center text-base font-medium">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" />
+              </svg>
               <span>Company</span>
-              <svg x-state:on="Item active" x-state:off="Item inactive"
-                class="ml-2 h-5 w-5 text-gray-400 group-hover:text-gray-500"
-                x-bind:class="{ 'text-gray-600': flyoutMenuOpen, 'text-gray-400': !flyoutMenuOpen }"
-                x-description="Heroicon name: chevron-down"
-                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-                fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                  clip-rule="evenodd"></path>
-              </svg>
             </button>
-            <div x-description="Flyout menu, show/hide based on flyout menu state."
-              @mouseleave="flyoutMenuOpen = false;" x-show="flyoutMenuOpen"
-              x-transition:enter="transition ease-out duration-200"
-              x-transition:enter-start="opacity-0 translate-y-1"
-              x-transition:enter-end="opacity-100 translate-y-0"
-              x-transition:leave="transition ease-in duration-150"
-              x-transition:leave-start="opacity-100 translate-y-0"
-              x-transition:leave-end="opacity-0 translate-y-1"
+
+            <div x-description="Company menu" @mouseleave="flyoutMenuOpen = false;" x-show="flyoutMenuOpen"
+              x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-1"
+              x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150"
+              x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-1"
               class="absolute z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-xs sm:px-0">
               <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
                 <div class="relative grid gap-6 bg-white dark:bg-gray-900 px-5 py-6 sm:gap-8 sm:p-8">
 
-                  <a href="/about" class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
+                  <a href="/about"
+                    class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
                     <p class="text-base font-medium text-gray-900 dark:text-gray-100">
                       About
                     </p>
@@ -139,17 +150,28 @@
                       Speckle's mission and vision.
                     </p>
                   </a>
-
-                  <a href="/partnerships" class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
+                  
+                  <a href="/pricing"
+                    class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
                     <p class="text-base font-medium text-gray-900 dark:text-gray-100">
-                      Partnerships
+                      Pricing
                     </p>
                     <p class="mt-1 text-sm text-gray-500">
-                      Speckle's here to help.
+                      From self hosting to enterprise SaaS.
                     </p>
                   </a>
 
-                  <a href="/contact" class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
+                  <a href="/blog"
+                    class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
+                    <p class="text-base font-medium text-gray-900 dark:text-gray-100">
+                      Blog
+                    </p>
+                    <p class="mt-1 text-sm text-gray-500">
+                      Announcements and other musings from the Speckle team.
+                    </p>
+                  </a>
+                  <a href="/contact"
+                    class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
                     <p class="text-base font-medium text-gray-900 dark:text-gray-100">
                       Contact
                     </p>
@@ -158,7 +180,8 @@
                     </p>
                   </a>
 
-                  <a href="/careers" class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
+                  <a href="/careers"
+                    class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
                     <p class="text-base font-medium text-gray-900 dark:text-gray-100">
                       Careers
                     </p>
@@ -171,95 +194,58 @@
             </div>
           </div>
 
-          <div class="relative" @mouseenter="resourcesMenu = false; usecasesMenu = false; developersMenu = false; flyoutMenuOpen = false">
-            &nbsp;
+          <div class="relative"
+            @mouseenter="resourcesMenu = false; usecasesMenu = false; developersMenu = false; flyoutMenuOpen = false">
+
+            &nbsp;&nbsp;
           </div>
 
         </nav>
 
         {{!-- CTA --}}
 
-        <div class="flex items-center lg:ml-12">
-          <a href="https://github.com/specklesystems/speckle-server"
-            target="_blank" class="mr-4 transition hover:text-gray-500">
-            <svg class="h-6 w-6" fill="currentColor"
-              viewBox="0 0 24 24" aria-hidden="true">
-              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+        <div class="flex items-center lg:ml-12" @mouseenter="resourcesMenu = false; flyoutMenuOpen = false;">
+          <a href="https://github.com/specklesystems" target="_blank"
+            class="mr-4 transition hover:text-gray-500 flex">
+            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+              <path fill-rule="evenodd"
+                d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
                 clip-rule="evenodd"></path>
             </svg>
+            <span class="ml-2 text-sm">Github</span>
           </a>
+          <a href="/download"
+            class="mr-4 transition hover:text-gray-500 flex">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+            </svg>
+            <span class="ml-2 text-sm">Download</span>
+          </a> 
           {{> navbarCTA }}
         </div>
       </div>
     </div>
   </div>
 
-  <!-- Use cases menu -->
-  <div x-description="'Solutions' flyout menu, show/hide based on flyout menu state."
-    x-show="usecasesMenu" @mouseleave="usecasesMenu = false;"
-    x-transition:enter="transition ease-out duration-200"
-    x-transition:enter-start="opacity-0 -translate-y-1"
-    x-transition:enter-end="opacity-100 translate-y-0"
-    x-transition:leave="transition ease-in duration-150"
-    x-transition:leave-start="opacity-100 translate-y-0"
-    x-transition:leave-end="opacity-0 -translate-y-1" class="hidden md:block absolute z-10 inset-x-0 transform shadow-lg">
-
-    {{> menus/tagDropdownMenu tag="features" maxcards="3" large="true" }}
-
-  </div>
-
-  <!-- Learn menu -->
-  <div x-description="'Learn' flyout menu, show/hide based on flyout menu state."
-    x-show="resourcesMenu" @mouseleave="resourcesMenu = false;"
-    x-transition:enter="transition ease-out duration-200"
-    x-transition:enter-start="opacity-0 -translate-y-1"
-    x-transition:enter-end="opacity-100 translate-y-0"
-    x-transition:leave="transition ease-in duration-150"
-    x-transition:leave-start="opacity-100 translate-y-0"
-    x-transition:leave-end="opacity-0 -translate-y-1" class="hidden md:block absolute z-10 inset-x-0 transform shadow-lg">
-
-    {{> menus/resourcesMenu }}
-
-  </div>
-
-  <!-- Developers menu -->
-  <div x-description="'Developers' flyout menu, show/hide based on flyout menu state."
-    x-show="developersMenu" @mouseleave="developersMenu = false;"
-    x-transition:enter="transition ease-out duration-200"
-    x-transition:enter-start="opacity-0 -translate-y-1"
-    x-transition:enter-end="opacity-100 translate-y-0"
-    x-transition:leave="transition ease-in duration-150"
-    x-transition:leave-start="opacity-100 translate-y-0"
-    x-transition:leave-end="opacity-0 -translate-y-1" class="hidden md:block absolute z-10 inset-x-0 transform shadow-lg">
-
-    {{> menus/tagDropdownMenu tag="developers" maxcards="3" large="true" }}
-
-  </div>
 
   {{!-- Mobile menu --}}
-  <div x-description="Mobile menu, show/hide based on mobile menu state."
-    x-show="mobileMenuOpen" x-transition:enter="duration-200 ease-out"
-    x-transition:enter-start="opacity-0 scale-95"
-    x-transition:enter-end="opacity-100 scale-100"
-    x-transition:leave="duration-100 ease-in"
-    x-transition:leave-start="opacity-100 scale-100"
-    x-transition:leave-end="opacity-0 scale-95" class="fixed w-full h-full z-30 top-0 inset-x-0 p-2 transition transform origin-top-right lg:hidden">
+  <div x-description="Mobile menu, show/hide based on mobile menu state." x-show="mobileMenuOpen"
+    x-transition:enter="duration-200 ease-out" x-transition:enter-start="opacity-0 scale-95"
+    x-transition:enter-end="opacity-100 scale-100" x-transition:leave="duration-100 ease-in"
+    x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
+    class="fixed w-full h-full z-30 top-0 inset-x-0 p-2 transition transform origin-top-right lg:hidden">
     <div class="rounded-lg shadow-2xl bg-white dark:bg-gray-900">
       <div class="pt-5 pb-6 px-5 sm:pb-8">
         <div class="flex items-center justify-between">
-          <a href="/" class="text-2xl text-blue-600 dark:text-blue-500 title-font font-bold mr-5">
+          <a href="/" class="text-2xl text-blue-500 dark:text-blue-500 title-font font-bold mr-5">
             Speckle
           </a>
           <div class="-mr-2">
             <button @click="mobileMenuOpen = false" type="button"
               class="bg-white dark:bg-gray-900 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
-              <svg class="h-6 w-6" x-description="Heroicon name: x"
-                xmlns="http://www.w3.org/2000/svg" fill="none"
-                viewBox="0 0 24 24" stroke="currentColor"
-                aria-hidden="true">
-                <path stroke-linecap="round"
-                  stroke-linejoin="round" stroke-width="2"
-                  d="M6 18L18 6M6 6l12 12"></path>
+              <svg class="h-6 w-6" x-description="Heroicon name: x" xmlns="http://www.w3.org/2000/svg" fill="none"
+                viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
               </svg>
             </button>
           </div>
@@ -268,85 +254,99 @@
           <nav>
             <div class="grid gap-7 sm:grid-cols-2 sm:gap-y-8 sm:gap-x-4">
 
-              <a href="/features" class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
-                <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
-                  <svg class="h-6 w-6" x-description="Heroicon name: chart-bar"
-                    xmlns="http://www.w3.org/2000/svg" fill="none"
-                    viewBox="0 0 24 24" stroke="currentColor"
-                    aria-hidden="true">
-                    <path stroke-linecap="round"
-                      stroke-linejoin="round" stroke-width="2"
-                      d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
+
+              <a href="/features/connectors"
+                class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
+
+                <div
+                  class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
+                  <svg class="h-6 w-6" x-description="Heroicon name: chart-bar" xmlns="http://www.w3.org/2000/svg"
+                    fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
+
                   </svg>
                 </div>
                 <div class="ml-4 text-base font-medium text-gray-900 dark:text-gray-200">
-                  Features
+                  Connectors
                 </div>
               </a>
 
-              <a href="/developers" class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
-                <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
-                  <svg class="h-6 w-6" x-description="Heroicon name: shield-check"
-                    xmlns="http://www.w3.org/2000/svg" fill="none"
-                    viewBox="0 0 24 24" stroke="currentColor"
-                    aria-hidden="true">
-                    <path stroke-linecap="round"
-                      stroke-linejoin="round" stroke-width="2"
-                      d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
+              {{!-- <a href="/developers"
+                class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
+                <div
+                  class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
+                  <svg class="h-6 w-6" x-description="Heroicon name: shield-check" xmlns="http://www.w3.org/2000/svg"
+                    fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M13 10V3L4 14h7v7l9-11h-7z" />
                   </svg>
                 </div>
                 <div class="ml-4 text-base font-medium text-gray-900 dark:text-gray-200">
                   Developers
                 </div>
-              </a>
+              </a> --}}
 
-              <a href="/blog" class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
-                <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
-                  <svg class="h-6 w-6" x-description="Heroicon name: cursor-click"
-                    xmlns="http://www.w3.org/2000/svg" fill="none"
-                    viewBox="0 0 24 24" stroke="currentColor"
-                    aria-hidden="true">
-                    <path stroke-linecap="round"
-                      stroke-linejoin="round" stroke-width="2"
-                      d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"></path>
+              <a href="/tutorials"
+                class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
+                <div
+                  class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
+                  <svg class="h-6 w-6" x-description="Heroicon name: cursor-click" xmlns="http://www.w3.org/2000/svg"
+                    fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
+                    </path>
                   </svg>
                 </div>
                 <div class="ml-4 text-base font-medium text-gray-900 dark:text-gray-200">
-                  Blog
+                  Tutorials
+                </div>
+              </a>
+              <a href="https://speckle.community" target="_blank"
+                class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
+                <div
+                  class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
+                  <svg class="h-6 w-6" x-description="Heroicon name: cursor-click" xmlns="http://www.w3.org/2000/svg"
+                    fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
+                </svg>
+                </div>
+                <div class="ml-4 text-base font-medium text-gray-900 dark:text-gray-200">
+                  Community
+                </div>
+              </a>
+
+              <a href="https://speckle.guide" target="_blank" class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
+                <div
+                  class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
+                  <svg class="h-6 w-6" x-description="Heroicon name: cursor-click" xmlns="http://www.w3.org/2000/svg"
+                    fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+                  </svg>
+                </div>
+                <div class="ml-4 text-base font-medium text-gray-900 dark:text-gray-200">
+                  Docs
                 </div>
               </a>
 
 
               <a href="/about" class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
-                <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
-                  <svg class="h-6 w-6" x-description="Heroicon name: view-grid"
-                    xmlns="http://www.w3.org/2000/svg" fill="none"
-                    viewBox="0 0 24 24" stroke="currentColor"
-                    aria-hidden="true">
-                    <path stroke-linecap="round"
-                      stroke-linejoin="round" stroke-width="2"
-                      d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
+                <div
+                  class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
+                  <svg class="h-6 w-6" x-description="Heroicon name: view-grid" xmlns="http://www.w3.org/2000/svg"
+                    fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" />
                   </svg>
                 </div>
                 <div class="ml-4 text-base font-medium text-gray-900 dark:text-gray-200">
-                  About
+                  About Us
                 </div>
               </a>
 
-
               <div class="text-base">
-                <a href="http://speckle.community" target="_blank" class="font-medium text-blue-600 hover:text-blue-500">
-                  Community <span aria-hidden="true">→</span></a>
-              </div>
-
-              <div class="text-base">
-                <a href="http://speckle.guide" target="_blank" class="font-medium text-blue-600 hover:text-blue-500">
-                  Docs <span aria-hidden="true">→</span></a>
-              </div>
-
-              <div class="text-base">
-                <a href="http://githhub.com/specklesystems/speckle-server" target="_blank"
-                  class="font-medium text-blue-600 hover:text-blue-500">
+                <a href="https://github.com/specklesystems/speckle-server" target="_blank"
+                  class="font-medium text-blue-500 hover:text-blue-500">
                   Github <span aria-hidden="true">→</span></a>
               </div>
 

partials/navbarCTA.hbs

@@ -1,3 +1,4 @@
-<a href="/getstarted" class="inline-flex w-full items-center justify-center px-4 py-2 border border-transparent transition rounded-md shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700 hover:shadow-xl">
-  Join the beta
+<a href="https://speckle.xyz/authn/register" target="_blank"
+  class="inline-flex w-full items-center justify-center px-4 py-2 border border-transparent transition rounded-md shadow-sm text-base font-medium text-white bg-blue-500 hover:ring-4 hover:shadow-xl">
+  Register Now
 </a>

partials/pagination.hbs

@@ -1,4 +1,4 @@
-<nav class="pagination text-center text-xl" role="navigation">
+<nav class="pagination text-center" role="navigation">
   {{#if prev}}
     <a class="newer-posts text-blue-600 rounded-full bg-white dark:bg-gray-900 mx-5 py-2 px-5 shadow transition hover:shadow-xl" href="{{page_url prev}}">&larr;
       Newer Posts</a>

partials/pricing.hbs

@@ -4,7 +4,7 @@
 
   {{!-- Standard --}}
 
-  <div class="bg-white p-10 col-span-1 lg:col-span-3 shadow-xl rounded-xl dark:bg-gray-900 relative ring dark:ring-blue-700">
+  <div class="bg-white p-10 col-span-1 lg:col-span-3 shadow-xl rounded-xl dark:bg-gray-900 relative ring dark:ring-blue-700 transition transform scale-95 hover:scale-105">
     <div>
       <h3 class="bg-blue-100 font-semibold text-base text-blue-600 tracking-wide uppercase px-4 py-1 rounded-full inline-flex">
         Standard
@@ -14,11 +14,8 @@
         <span class="font-medium text-base text-blue-600">£0/mo</span>
       </h2>
       <p class="mb-5 mt-5 pt-5 border-t dark:border-gray-600 dark:text-gray-300">
-        Our free plan is for individuals and small teams
-        who want to
-        enjoy Speckle without extra hassle, hosted and
-        managed by
-        us.
+        Enjoy Speckle without extra hassle, hosted and
+        managed by us.
       </p>
       {{!-- <ul class="space-y-2 ">
         {{> extras/listItem value="Interoperability Suite (Revit, Rhino, Gh, etc.)"}}
@@ -36,9 +33,9 @@
     </div>
     {{!-- <div class="h-16 absolute bottom-0 inset-x-0"> --}}
     <div class="self-end mt-10 ">
-      <a href="https://docs.google.com/forms/d/e/1FAIpQLSf29lkIMeXnVrLJ1EJTPd94hBvr7V4PdtZ0whWLHMrpOsMv8Q/viewform?usp=sf_link">
-        <button class="w-full bg-blue-600 font-medium text-base text-white px-4 py-2 shadow-sm border-transparent rounded-md border hover:bg-blue-700 hover:shadow-xl transition">
-          Join the waiting list
+      <a href="https://speckle.xyz/authn/register">
+        <button class="w-full bg-blue-500 hover:bg-blue-600 font-medium text-base text-white px-4 py-4 shadow-sm border-transparent rounded-md border hover:ring-4 hover:shadow-xl transition">
+          Register Now
         </button>
       </a>
     </div>
@@ -47,41 +44,30 @@
 
   {{!-- Managed --}}
 
-  <div class="bg-gray-50 dark:bg-gray-900 col-span-1 lg:col-span-2 p-10 flex-wrap rounded-xl flex relative">
+  <div class="bg-gray-50 dark:bg-gray-900 col-span-1 lg:col-span-2 p-10 flex-wrap rounded-xl flex relative transition transform scale-95 hover:scale-105">
     <div class="w-full">
       <h3 class="bg-blue-100 font-semibold text-base text-blue-600 tracking-wide uppercase px-4 py-1 rounded-full inline-flex">
         Managed / On Prem
       </h3>
       <h2 class="font-bold text-4xl mt-5  dark:text-gray-200">
-        Enterprise
+        SaaS
       </h2>
       <p class="mb-5 mt-5 pt-5 border-t dark:border-gray-600 dark:text-gray-200">
-        Dedicated solutions for enterprises, large
-        teams or projects.
+        Dedicated custom solutions for enterprises.
       </p>
-      {{!--  <ul class="font-bold space-y-2 ">
-        {{> extras/listItem value="Everyting in Standard"}}
-      </ul>
-      <p class="my-4  dark:text-gray-200">Deployment:</p>
-      <ul class="space-y-2 ">
-        {{> extras/listItem value="On premise, with your cloud infrastructure"}}
-        {{> extras/listItem value="On our managed cloud infrastructure"}}
-      </ul>
-      <p class="my-4  dark:text-gray-200">Extras:</p> --}}
       <ul class="space-y-2 ">
         {{> extras/listItem value="Everything in the Free Plan"}}
         {{> extras/listItem value="On prem or managed deployments"}}
         {{> extras/listItem value="Custom subdomain"}}
-        {{> extras/listItem value="White labelling"}}
         {{> extras/listItem value="SSO (Single sign-on)"}}
         {{> extras/listItem value="SLA (Service Level Agreement)"}}
         {{> extras/listItem value="Dedicated Support"}}
       </ul>
     </div>
     <div class="self-end mt-10 w-full">
-      <a href="https://docs.google.com/forms/d/e/1FAIpQLSfZa4pWH24iLUZ3xCSgYzlGo5u6gttQhXgf-MHv-BEP97-s4Q/viewform?usp=sf_link">
-        <button class="w-full bg-blue-600 font-medium text-base text-white px-4 py-2 shadow-sm border-transparent rounded-md border hover:bg-blue-700 hover:shadow-xl transition">
-          Claim your beta tester discount
+      <a href="mailto:office@speckle.systems?subject=Speckle Enterprise Query">
+        <button class="w-full font-medium text-base dark:text-gray-50 text-gray-900 px-4 py-4 shadow-sm border-transparent rounded-md border ring-0 hover:ring-2 hover:shadow-xl transition">
+          Contact Us
         </button>
       </a>
     </div>

partials/pricingRegister.hbs

@@ -0,0 +1,141 @@
+{{!-- Plans --}}
+
+
+<div class="shadow-xl sm:px-2 px-5 pt-8 pb-10 rounded-lg mt-10 mb-10 bg-white dark:bg-gray-900 transition hover:bg-blue-800">
+  <div class="max-w-4xl mx-auto grid grid-cols-2 gap-10">
+    <div class="mt-2 text-center sm:text-left dark:text-gray-200">
+      <h2 class="font-bold text-5xl dark:text-gray-300">
+        Free
+        <span class="font-medium text-base text-blue-600">£0/mo</span>
+      </h2>
+      <p class="mb-5 mt-5">
+        Enjoy Speckle without extra hassle, hosted and managed by us. Get started in seconds!
+      </p>
+      <ul class="space-y-1 ">
+        {{> extras/listItem value="Interoperability Suite (Revit, Rhino, Gh, etc.)"}}
+        {{> extras/listItem value="Version control"}}
+        {{> extras/listItem value="No limits on data, streams or versions"}}
+        {{> extras/listItem value="Web based 3D viewer"}}
+        {{> extras/listItem value="API Access"}}
+        {{> extras/listItem value="3rd Party App Registration"}}
+        {{> extras/listItem value="Community support"}}
+      </ul>
+    </div>
+
+    <div class="flex items-center justify-center">
+      <a href="https://speckle.xyz/authn/register"
+        target="_blank"
+        class="mt-2 border-2 h-32 w-72 rounded-xl border-blue-500 bg-blue-500 hover:ring-4 transition p-4 flex text-white text-center justify-center">
+        <span class="self-center">Register Now</span>
+      </a>
+    </div>
+  </div>
+</div>
+
+<div class="sm:px-2 px-5 pt-8 pb-10 mb-10 rounded-lg mt-10 mx-auto">
+  <div class="w-default grid grid-cols-2 gap-10">
+    <div class="mt-2 text-center sm:text-left dark:text-gray-200">
+      <h2 class="font-bold text-3xl mt-5 dark:text-gray-300">
+        Enterprise
+        <span class="font-medium text-base text-blue-600">From £500/mo</span>
+      </h2>
+      <p class="mb-5 mt-5 pt-5 border-t dark:border-gray-600 dark:text-gray-300">
+        Enjoy Speckle without extra hassle, hosted and managed by us. Our free plan will always be free.
+      </p>
+      <ul class="space-y-1 ">
+        {{> extras/listItem value="Everything in the Free Plan"}}
+        {{> extras/listItem value="On prem or managed deployments"}}
+        {{> extras/listItem value="Custom subdomain"}}
+        {{> extras/listItem value="SSO (Single sign-on)"}}
+        {{> extras/listItem value="SLA (Service Level Agreement)"}}
+        {{> extras/listItem value="Dedicated Support"}}
+      </ul>
+    </div>
+
+    <div class="flex items-center justify-center">
+      <a href="https://speckle.community/new-topic?title=Question:%20How%20can%20I%20...&category=help&tags=v2"
+        target="_blank"
+        class="mt-2 border-2 h-32 w-72 rounded-lg border-blue-500 bg-blue-500 hover:ring-4 transition p-4 flex text-white text-center justify-center">
+        <span class="self-center">Contact us</span>
+      </a>
+    </div>
+  </div>
+</div>
+
+<div class="hidden relative w-default mb-20 gap-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5">
+
+  {{!-- Standard --}}
+
+  <div
+    class="bg-white p-10 col-span-1 lg:col-span-3 rounded-xl dark:bg-gray-900 relative ring dark:ring-blue-700">
+    <div>
+      {{!-- <h3
+        class="bg-blue-100 font-semibold text-base text-blue-600 tracking-wide uppercase px-4 py-1 rounded-full inline-flex">
+        Standard
+      </h3> --}}
+      <h2 class="font-bold text-4xl mt-5 dark:text-gray-300">
+        Free
+        <span class="font-medium text-base text-blue-600">£0/mo</span>
+      </h2>
+      <p class="mb-5 mt-5 pt-5 border-t dark:border-gray-600 dark:text-gray-300">
+        Dedicated custom solutions for enterprises, large teams or projects.
+      </p>
+      <ul class="space-y-2 ">
+        {{> extras/listItem value="Everything in the Free Plan"}}
+        {{> extras/listItem value="On prem or managed deployments"}}
+        {{> extras/listItem value="Custom subdomain"}}
+        {{> extras/listItem value="White labelling"}}
+        {{> extras/listItem value="SSO (Single sign-on)"}}
+        {{> extras/listItem value="SLA (Service Level Agreement)"}}
+        {{> extras/listItem value="Dedicated Support"}}
+      </ul>
+    </div>
+
+    {{!-- <div class="self-end mt-10 ">
+      <a href="https://speckle.xyz/authn/register">
+        <button
+          class="w-full bg-blue-600 font-medium text-base text-white px-4 py-2 shadow-sm border-transparent rounded-md border hover:bg-blue-700 hover:shadow-xl transition">
+          Register Now
+        </button>
+      </a>
+    </div> --}}
+  </div>
+
+
+  {{!-- Managed --}}
+
+  <div class="bg-gray-50 dark:bg-gray-900 col-span-1 lg:col-span-2 p-10 flex-wrap rounded-xl flex relative">
+    <div class="w-full">
+      <h3
+        class="bg-blue-100 font-semibold text-base text-blue-600 tracking-wide uppercase px-4 py-1 rounded-full inline-flex">
+        Managed / On Prem
+      </h3>
+      <h2 class="font-bold text-4xl mt-5  dark:text-gray-200">
+        Enterprise
+      </h2>
+      <p class="mb-5 mt-5 pt-5 border-t dark:border-gray-600 dark:text-gray-200">
+        Dedicated solutions for enterprises, large
+        teams or projects.
+      </p>
+      <ul class="space-y-2 ">
+        {{> extras/listItem value="Everything in the Free Plan"}}
+        {{> extras/listItem value="On prem or managed deployments"}}
+        {{> extras/listItem value="Custom subdomain"}}
+        {{> extras/listItem value="White labelling"}}
+        {{> extras/listItem value="SSO (Single sign-on)"}}
+        {{> extras/listItem value="SLA (Service Level Agreement)"}}
+        {{> extras/listItem value="Dedicated Support"}}
+      </ul>
+    </div>
+    <div class="self-end mt-10 w-full">
+      <a href="mailto:office@speckle.systems?subject=Speckle Enterprise Query">
+        <button
+          class="w-full font-medium text-base dark:text-gray-50 text-gray-900 px-4 py-2 shadow-sm border-transparent rounded-md border ring-0 hover:ring-2 hover:shadow-xl transition">
+          Contact Us
+        </button>
+      </a>
+    </div>
+  </div>
+
+
+</div>

partials/searchLarge.hbs

@@ -0,0 +1,74 @@
+<div>
+  <div>
+    <div class="mt-1 relative rounded-md shadow-sm">
+      <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
+          <path d="M9 9a2 2 0 114 0 2 2 0 01-4 0z" />
+          <path fill-rule="evenodd"
+            d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a4 4 0 00-3.446 6.032l-2.261 2.26a1 1 0 101.414 1.415l2.261-2.261A4 4 0 1011 5z"
+            clip-rule="evenodd" />
+        </svg>
+      </div>
+      <input type="text" name="search" id="search-bar"
+        class="focus:ring-blue-500 focus:border-blue-500 transition block w-full pl-10 sm:text-sm border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white rounded-md h h-12"
+        placeholder="Search...">
+    </div>
+    <div id="search-results" class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3"></div>
+  </div>
+</div>
+
+<script>
+  window.addEventListener('load', function () {
+
+    const tutorialSearch = new SearchinGhost( {
+      key: window.searchKey,
+      postFields: ['title', 'url', 'excerpt', 'published_at'],
+      postsExtraFields: ['tags'],
+      debug: true,
+      emptyTemplate: function () {
+        return `
+        <p class="text-center text-sm col-span-3 dark:text-white" id='no-results'>No results found.</p>
+      `},
+      customProcessing: function (post) {
+        if (post.tags && post.tags.length !== 0) {
+          post.firstTag = post.tags[0].name.toLowerCase()
+          post.string_tags = post.string_tags = post.tags.map(o => o.name).join(' ').toLowerCase()
+        }
+        else post.firstTag = "no-tag"
+
+        return post
+      },
+      outputChildsType: '',
+      searchOptions: {
+        where: {
+          firstTag: "tutorials"
+        },
+        limit: 9
+      },
+      template: function (post) {
+        return `
+        <div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden w-full">
+          <div class="flex-1 bg-white dark:bg-gray-900 dark:text-gray-200 p-6 flex flex-col justify-between">
+            <div class="flex-1">
+              <a href="${post.url}" class="block mt-2">
+                <p class="font-semibold text-gray-900 dark:text-gray-200 line-clamp-2">
+                  <span class="text-xs py-0 px-2 rounded border border-blue-500 text-blue-500">${post.firstTag}</span> ${post.title}
+                </p>
+                <p class="mt-3 text-sm text-gray-500 line-clamp-2">
+                  ${post.excerpt}
+                </p>
+              </a>
+            </div>
+          </div>
+        </div>
+        `
+      }
+    })
+
+    const el = document.getElementById('search-bar')
+    el.addEventListener('input', (e) => {
+      if (e.target.value === '')
+        setTimeout(() => document.getElementById('no-results').style.display = "none", 250)
+    })
+  })
+</script>

post.hbs

@@ -1,69 +1,58 @@
-{{!< default}}
+{{!< default}} {{#post}} <article class="relative max-w-2xl mx-auto px-4 md:px-0">
 
-{{#post}}
+  {{!-- Header --}}
 
-  <article class="relative">
-
-    {{> extras/patterns}}
-
-    {{!-- Header --}}
+  <header class="mt-10 prose prose-lg dark:prose-dark max-w-none">
 
 
-    <div class="relative max-w-screen-xl mx-auto object-center">
-      {{#if feature_image}}
-        <img class="object-fill mx-auto object-center self-center" style="max-height:50vh;"
-          srcset="{{img_url feature_image size="s"}} 300w,
-                    {{img_url feature_image size="m"}} 600w,
-                    {{img_url feature_image size="l"}} 1000w,
-                    {{img_url feature_image size="xl"}} 2000w"
-          sizes="(max-width: 1000px) 1000px, 2000px"
-          loading="lazy" src="{{img_url feature_image size="xl"}}"
-          alt="{{title}}" />
-      {{/if}}
-    </div>
+    {{#if feature_image}}
+    <img class="gh-feature-image mx-auto w-full max-w-full" srcset="{{img_url feature_image size=" s"}} 300w, {{img_url
+      feature_image size="m" }} 600w, {{img_url feature_image size="l" }} 1000w, {{img_url feature_image size="xl" }}
+      2000w" sizes="(max-width: 1000px) 1000px, 2000px" loading="lazy" src="{{img_url feature_image size=" xl"}}"
+      alt="{{title}}" />
+    {{/if}}
+    <h1 class="">
+      {{title}}
+    </h1>
+    {{#if custom_excerpt}}
+    <p>
+      {{custom_excerpt}}
+    </p>
+    {{/if}}
 
-    <header class="relative px-4 sm:px-6 lg:px-8 mt-10">
-      <div class="max-w-prose mx-auto object-center">
-        <h1 class="mt-10">
-          <span class="mt-2 block text-4xl text-center leading-8 font-extrabold tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl">
-            {{title}}
-          </span>
-        </h1>
+  </header>
 
-        {{#if custom_excerpt}}
-          <p class="mt-8 text-2xl text-gray-500 dark:text-gray-300 leading-8">
-            {{custom_excerpt}}
-          </p>
-        {{/if}}
+  {{!-- Content --}}
 
-      </div>
-    </header>
+  <div class="prose prose-blue dark:prose-dark max-w-none mt-10 post-content">
 
-    {{!-- Content --}}
+    {{content}}
 
-    <div class="post-body mt-10 max-w-prose mx-auto text-gray-700 dark:text-gray-300">
+  </div>
 
-      {{content}}
+  <div
+    class="relative max-w-prose p-5 mx-auto mb-20 mt-20 pb-5 grid grid-cols-1 gap-4 bg-white dark:bg-gray-900 rounded-xl">
+    <p class="dark:text-gray-300">Feeback or comments? We'd love to hear from you in our
+      <a class="font-semibold text-blue-600" href="https://speckle.community/" target="_blank">community
+        forum!</a>
+    </p>
+  </div>
 
-    </div>
 
-    {{!-- Read more --}}
+  {{!-- Read more --}}
 
-    <div class="max-w-prose mx-auto mt-8 grid gap-5 md:grid-cols-2 mb-10">
+  <div class="mt-8 grid gap-5 md:grid-cols-2 mb-10">
 
-      {{#get "posts" filter="tags:{{primary_tag.slug}}+id:>{{id}}"
-        limit="2" order="id asc"}}
+    {{#get "posts" filter="tags:{{primary_tag.slug}}+id:>{{id}}"
+    limit="2" order="id asc"}}
 
-        {{#foreach posts}}
-          {{> cardFancySmall}}
-        {{/foreach}}
-      {{/get}}
+    {{#foreach posts}}
+    {{> cardFancySmall}}
+    {{/foreach}}
+    {{/get}}
 
-      {{#get "posts" filter="tags:{{primary_tag.slug}}+id:<
-          {{id}}" limit="2" order="id desc" }}
-          {{#foreach posts}} {{> cardFancySmall}}
-          {{/foreach}}
-      {{/get}}
-      {{> cardTag}}
-    </div> </article>
-{{/post}}
+    {{#get "posts" filter="tags:{{primary_tag.slug}}+id:< {{id}}" limit=" 2" order="id desc" }} {{#foreach posts}} {{>
+      cardFancySmall}}
+      {{/foreach}} {{/get}} {{> cardTag}} </div>
+  </article>
+  {{/post}}

routes.yaml

@@ -29,6 +29,12 @@ collections:
     tempate: careers
     filter: tag:careers
     data: tag.careers
+  
+  /tutorials/:
+    permalink: /tutorials/{slug}/
+    template: tutorials
+    filter: tag:tutorials
+    data: tag.tutorials
 
   # Note: root is disabled
   # /:

tag.hbs

@@ -1,33 +1,110 @@
-{{!< default}}
+{{!< default}} {{#tag}} <div
+  x-data="{ docsLink: null, sourceLink: null, videoLink:null, showInstallLink: false, connectorTag:false, installLink: null }" x-init="
+    docsLink = window.docsLink; sourceLink = window.sourceLink; videoLink = window.videoLink; showInstallLink = window.showInstallLink; connectorTag = window.connectorTag;
+    if( videoLink ) document.getElementById('tagvideo').src = videoLink; installLink = window.installLink;">
 
-<div>
-
-  {{#tag}}
-
-    <main class="h-screen/4 flex flex-wrap content-center mx-auto max-w-5xl px-10 lg:px-24 sm:mt-24">
-      <div class="w-3/3 text-center">
-        <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 dark:text-gray-100 sm:text-5xl md:text-6xl">
-          <span class="text-gradient text-gradient bg-gradient-to-r from-blue-500 to-blue-700">
-            {{name}}
-          </span>
+  <main class="w-default lg:my-10 space-x-0 md:space-x-6 space-y-6 flex flex-col md:flex-row items-center">
+    <div class="w-full md:w-1/2">
+      <div class="prose lg:prose-xl dark:prose-dark prose-blue max-w-none w-full mb-4">
+        <h1 class="flex overflow-ellipsis overflow-hidden w-full max-w-full">
+          <a class="flex items-center justify-center no-underline" href="/features/connectors" x-cloak
+            x-show="connectorTag">
+            Connectors
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
+              stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+            </svg>
+          </a>
+          {{name}}
         </h1>
-        <p class="text-base text-justify text-gray-500 sm:text-lg md:text-xl md:max-w-6xl mt-10">
-          {{description}}
-        </p>
+        <p>{{description}}</p>
       </div>
-    </main>
+      <a class="py-2 px-4 rounded inline-flex items-center text-white bg-purple-500 dark:bg-purple-800 transition-shadow hover:shadow-xl hover:ring mr-2"
+        href="#" x-show="installLink" x-cloak x-bind:href="installLink">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd"
+            d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
+            clip-rule="evenodd" />
+        </svg>
+        <span>Install</span>
+      </a>
+      <a class="py-2 px-4 rounded inline-flex items-center text-white bg-blue-500 dark:bg-blue-800 transition-shadow hover:shadow-xl hover:ring mr-2"
+        x-show="docsLink" href="#" target="_blank" x-cloak x-bind:href="docsLink">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24"
+          stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+        </svg>
+        <span>Docs</span>
+      </a>
+      <a class="py-2 px-4 rounded inline-flex items-center text-gray-700 dark:text-gray-300 transition-shadow hover:shadow-xl hover:ring mr-2"
+        x-show="sourceLink" href="#" target="_blank" x-cloak x-bind:href="sourceLink">
+        <svg class="h-6 w-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path fill-rule="evenodd"
+            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+            clip-rule="evenodd"></path>
+        </svg>
+        <span>Source</span>
+      </a>
+    </div>
+    <div class="w-full md:w-1/2" x-show="!videoLink">
+      <img class="mx-auto h-48 w-48 transition-transform transform group-hover:scale-110 object-contain"
+        src="{{feature_image}}">
+    </div>
+    <div class="w-full md:w-1/2" x-show="videoLink">
+      <div class="overflow-hidden shadow-2xl rounded-2xl mx-auto max-w-xl lg:w-full aspect-w-16 aspect-h-9">
+        <div class="h-full">
+          <iframe id='tagvideo' width="100%" height="100%" v-bind:src="videoLink" title="YouTube video player"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen></iframe>
+        </div>
+      </div>
+    </div>
+  </main>
 
-  {{/tag}}
 
-  <div class="mt-12 max-w-lg grid gap-5 md:grid-cols-2 lg:grid-cols-3 mx-auto max-w-5xl px-10 lg:px-12 sm:mt-24">
+
+  <div class="w-default my-12 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 mx-auto">
+
+    {{!-- Featured posts first --}}
+    {{#get "posts" filter="tag:{{slug}}+featured:true" include="authors,tags" order="published_at desc"}}
+    
+    {{#foreach posts visibility="all"}}
+    
+    {{> cardTutorial }}
+    
+    {{/foreach}}
+    
+    {{/get}}
+
+    {{!-- Then all the rest in desc order --}}
+    {{#get "posts" filter="tag:{{slug}}+featured:false" include="authors,tags" order="published_at desc" limit="50"}}
 
     {{#foreach posts visibility="all"}}
 
-      {{> cardSimple}}
+    {{> cardTutorial }}
 
     {{/foreach}}
 
-    {{> cardCTA}}
+    {{/get}}
 
   </div>
-</div>
+
+  <div class="shadow-xl sm:px-2 px-5 pt-8 pb-10 my-10 bg-white dark:bg-gray-900" x-cloak x-show="connectorTag">
+    <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:ring-4 transition p-4 flex text-white text-center justify-center">
+        <span class="self-center">Ask a question</span>
+      </a>
+    </div>
+  </div>
+
+  </div>
+  {{/tag}}

tailwind.config.js

@@ -1,36 +1,101 @@
+const colors = require('tailwindcss/colors')
+
 module.exports = {
-  purge: [
-    './*.hbs',
-    './partials/**/*.hbs'
-  ],
-  darkMode: 'media', // or 'media' or 'class'
+  purge: {
+    enabled: process.env.NODE_ENV === "production",
+    content: ["./*.hbs", "./partials/**/*.hbs"],
+  },
+  darkMode: "media", // or 'media' or 'class'
   theme: {
     extend: {
       maxHeight: {
-        '1/2': '50%',
-        '3/4': '75%',
-        'full': '100%'
+        "1/2": "50%",
+        "3/4": "75%",
+        full: "100%",
       },
-      height: theme => ({
-        'screen/2': '50vh',
-        'screen/3': 'calc(100vh / 3)',
-        'screen/4': 'calc(100vh / 4)',
-        'screen/5': 'calc(100vh / 5)',
-        'screen/2-3': 'calc(100vh * 0.66)',
-      })
+      height: (theme) => ({
+        "screen/2": "50vh",
+        "screen/3": "calc(100vh / 3)",
+        "screen/4": "calc(100vh / 4)",
+        "screen/5": "calc(100vh / 5)",
+        "screen/2-3": "calc(100vh * 0.66)",
+      }),
+      typography: (theme) => ({
+        dark: {
+          css: {
+            color: theme("colors.gray.300"),
+            a: {
+              color: theme("colors.blue.500"),
+              "&:hover": {
+                color: theme("colors.blue.400"),
+              },
+              code: { color: theme("colors.blue.400") },
+            },
+            h1: {
+              fontWeight: "700",
+              letterSpacing: theme("letterSpacing.tight"),
+              color: theme("colors.gray.100"),
+            },
+            h2: {
+              fontWeight: "700",
+              letterSpacing: theme("letterSpacing.tight"),
+              color: theme("colors.gray.100"),
+            },
+            h3: {
+              fontWeight: "600",
+              color: theme("colors.gray.100"),
+            },
+            "h4,h5,h6": {
+              color: theme("colors.gray.100"),
+            },
+            code: {
+              backgroundColor: theme("colors.gray.800"),
+              color: theme("colors.gray.200"),
+            },
+            hr: { borderColor: theme("colors.gray.700") },
+            "ol li:before": {
+              fontWeight: "600",
+              color: theme("colors.gray.400"),
+            },
+            "ul li:before": {
+              backgroundColor: theme("colors.gray.400"),
+            },
+            strong: { color: theme("colors.gray.100") },
+            thead: {
+              color: theme("colors.gray.100"),
+            },
+            tbody: {
+              tr: {
+                borderBottomColor: theme("colors.gray.700"),
+              },
+            },
+            blockquote: {
+              color: theme("colors.gray.100"),
+              borderLeftColor: theme("colors.gray.700"),
+            },
+          },
+        },
+      }),
     },
     fontFamily: {
-      sans: ['Space Grotesk', 'sans-serif'],
-      serif: ['Merriweather', 'serif'],
+      sans: ["Space Grotesk", "sans-serif"],
+      serif: ["Merriweather", "serif"],
     },
   },
   variants: {
+    typography: ["dark"],
     extend: {
-      opacity: ['active', 'dark'],
-      visibility: ['hover', 'dark'],
+      opacity: ["active", "dark"],
+      visibility: ["hover", "dark"],
+      ringWidth: ["hover", "active"],
+      scale: ["group-hover"],
+      display: ["group-hover"],
     },
   },
   plugins: [
-    require('@tailwindcss/line-clamp')
+    require("@tailwindcss/line-clamp"),
+    require("@tailwindcss/aspect-ratio"),
+    require("@tailwindcss/typography"),
+    require("@tailwindcss/forms"),
   ],
-}
+};

tutorials.hbs

@@ -0,0 +1,74 @@
+{{!< 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">
+      <a href="/tutorials">
+        <span class="inline-block xl:inline text-gradient text-gradient bg-gradient-to-r from-blue-500 to-blue-700">
+          {{name}}
+        </span>
+      </a>
+    </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="max-w-4xl w-full mx-auto mt-4">
+    {{> searchLarge}}
+  </div>
+
+  <div class="shadow-xl sm:px-2 px-5 pt-8 pb-10 rounded-lg mt-10 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:ring-4 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-10 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+
+    {{!-- {{#get "posts" filter="tag:tutorials+featured:true" include="authors,tags" order="published_at desc" as |featured_posts pages|}}
+    
+    {{#foreach featured_posts visibility="all"}}
+    
+    {{> cardTutorialSm }}
+    
+    {{/foreach}}
+
+    {{pages.total}}
+    
+    {{/get}} --}}
+
+
+
+
+    {{#foreach posts }}
+      {{> cardTutorialSm}}
+    {{/foreach}}
+
+  </div>
+
+  <aside class="w-default py-10">
+    {{pagination}}
+  </aside>