feat: manager image + post footer

CSS ++

.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.8",
   "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,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,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,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,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/logos.hbs

@@ -1,39 +1,87 @@
-<div class="relative w-default container mb-10 mx-auto mt-4 md:mt-10 sm:mt-34 opacity-75">
+<div class="relative w-default container mb-14 mx-auto mt-4 sm:mt-10 md:mt-5 opacity-75">
   <div class="text-gray-500 text-center text-xs w-full mb-10">
     Seen in the wild at
   </div>
+  
   <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 text-gray-500 dark:text-gray-600">
-    {{!-- Arup --}}
-    <div class="p-3 h-20 flex items-center justify-center">
-      <svg viewBox="0 0 1430 496" class="w-24 h-24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M668.627 0C532.213 0 420.774 111.436 420.774 247.852s111.439 247.854 247.853 247.854c136.416 0 247.854-111.441 247.854-247.854S805.043-.001 668.627-.001zm0 475.212c-125.527 0-227.999-101.832-227.999-228s101.832-227.998 228-227.998c125.528 0 228 101.83 228 227.999 0 126.167-103.114 227.999-228 227.999zm-468.17-251.055c-90.298-16.012-158.825-35.225-158.825-100.55 0-64.045 59.561-103.753 142.18-103.753 69.167 0 125.527 29.46 157.549 71.73l17.292-10.248C323.427 33.303 261.3-.001 184.447-.001 89.663 0 21.776 47.393 21.776 123.606c0 78.135 76.213 102.472 176.762 119.764 91.585 16.012 161.394 40.346 161.394 114.637 0 72.372-67.889 116.564-162.674 116.564-80.056 0-144.74-37.145-179.325-89.662L0 395.794c37.786 58.921 108.236 99.27 195.977 99.27 106.315 0 183.168-51.877 183.168-137.057 0-87.098-76.853-115.918-178.685-133.85h-.003zm800.561-185.73h.642l192.776 451.516h21.775l191.495-451.516h.636v451.516h21.145V5.763h-32.027l-191.494 456h-.64l-194.06-456h-30.1V489.3h19.854V38.427h-.002z" fill="#888" fill-rule="nonzero"/></svg>
+     {{!-- Arup --}}
+    <div class="p-3 h-20 mt-3 text-center align-center flex items-center justify-center">
+      <svg class="w-24 h-24" viewBox="0 0 934 439" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
+      <g transform="translate(0.000000,220.000000) scale(0.0500000,-0.0500000)"
+fill="#959595" stroke="none">
+<path d="M2401 4927 c-168 -391 -1818 -4142 -1856 -4219 -139 -280 -280 -398
+-476 -398 l-59 0 0 -100 0 -100 660 0 660 0 0 99 0 98 -107 6 c-191 10 -261
+48 -284 155 -15 74 -6 180 24 274 13 41 109 268 213 506 l189 432 830 0 830 0
+169 -408 c208 -501 239 -588 240 -697 2 -167 -82 -247 -274 -261 -130 -9 -120
+0 -120 -109 l0 -95 920 0 920 0 0 99 0 98 -83 5 c-148 10 -222 59 -290 195
+-19 38 -454 1057 -967 2266 l-933 2197 -94 0 -94 0 -18 -43z m142 -2079 c180
+-436 329 -801 333 -810 6 -17 -31 -18 -681 -18 -626 0 -687 1 -681 16 34 89
+692 1604 697 1604 3 0 153 -357 332 -792z"/>
+<path d="M5210 4872 l0 -99 133 -6 c274 -12 332 -64 356 -318 15 -155 15
+-3726 1 -3836 -15 -107 -51 -178 -114 -220 -63 -43 -126 -61 -263 -75 l-113
+-12 0 -98 0 -98 945 0 946 0 -3 107 -3 108 -90 7 c-153 12 -259 52 -313 117
+-33 40 -72 141 -81 214 -8 53 -11 713 -11 2029 l0 1950 283 -5 c213 -4 300 -9
+356 -22 403 -91 673 -371 737 -763 19 -116 14 -307 -11 -426 -88 -418 -424
+-698 -924 -770 l-86 -12 -3 -136 -3 -137 743 -1130 743 -1131 695 3 695 2 3
+92 c3 89 2 93 -20 98 -13 2 -54 12 -92 20 -211 47 -400 183 -627 450 -112 131
+-249 299 -330 405 -86 111 -861 1256 -858 1267 2 4 48 26 103 49 241 97 419
+208 568 352 239 231 342 482 342 827 -1 345 -104 605 -329 830 -225 225 -550
+371 -986 442 -92 15 -231 17 -1246 20 l-1143 4 0 -99z"/>
+<path d="M9700 4871 l0 -98 123 -6 c76 -3 140 -11 169 -22 65 -23 130 -84 159
+-147 l24 -53 6 -1480 c4 -1016 10 -1508 18 -1570 43 -344 117 -572 248 -768
+26 -38 87 -111 136 -164 272 -287 656 -464 1157 -535 150 -21 644 -17 790 6
+533 84 889 294 1137 668 136 206 236 477 288 775 47 276 48 298 55 1668 5
+1200 7 1305 23 1360 24 80 57 135 112 183 63 55 119 73 253 79 l112 6 0 98 0
+99 -710 0 -710 0 0 -100 0 -100 95 0 c253 0 366 -83 407 -298 19 -99 19 -2631
+0 -2816 -43 -423 -149 -695 -356 -915 -216 -228 -585 -361 -1000 -361 -599 1
+-959 290 -1075 865 -40 197 -42 328 -39 1760 3 1263 5 1375 21 1434 39 144
+132 259 244 301 32 12 96 24 147 28 l91 7 -1 28 c0 15 -1 59 -2 97 l-2 70
+-960 0 -960 0 0 -99z"/>
+<path d="M14972 4873 l3 -98 104 -7 c226 -15 314 -62 358 -190 17 -50 18 -158
+21 -1963 2 -1355 0 -1935 -8 -1995 -29 -218 -121 -289 -405 -309 l-90 -6 0
+-95 0 -95 963 -3 962 -2 0 98 0 99 -108 6 c-130 8 -202 22 -262 52 -84 43
+-121 106 -139 238 -8 54 -11 702 -11 2069 l0 1990 278 -5 c301 -5 361 -13 502
+-68 313 -120 525 -392 591 -759 9 -46 14 -142 13 -245 -1 -258 -36 -415 -136
+-608 -61 -117 -181 -237 -298 -295 -132 -65 -178 -74 -402 -79 l-198 -5 0
+-173 0 -173 228 -4 c125 -2 281 0 346 4 638 45 1177 428 1356 966 49 148 63
+233 63 392 0 340 -126 627 -389 879 -204 197 -447 327 -758 406 -281 71 -229
+68 -1469 72 l-1118 4 3 -98z"/>
+</g>   </svg>
+    </div>
+      {{!-- Royal --}}
+    <div class="p-3 h-20 text-center align-center flex items-center justify-center">
+      <svg class="w-36 h-36" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 1280 469"><defs/><path fill="#848484" fill-rule="nonzero" d="M327.1 205.4h26.7c30.1 0 44.3 8.4 44.3 34.2 0 16-5.6 25.4-17 30.1l21.2 36.3v.4h-10.7c-7.1 0-10 0-13.6-6l-15.6-26.6h-16.9v32.6h-18.4v-101zm27.7 15.2h-9.3v38h9.3c16.4 0 24-3.7 24-19 0-15.4-7.6-19-24-19M445.6 230.9c23 0 34.7 12.1 34.7 38.5s-11.8 38.5-34.7 38.5c-23 0-34.7-12.1-34.7-38.5s11.7-38.5 34.7-38.5m0 63.1c11.4 0 16.6-7.7 16.6-24.6 0-16.9-5.2-24.6-16.6-24.6-11.6 0-16.6 7.7-16.6 24.6 0 16.9 5 24.6 16.6 24.6M503.8 332.5l9.8-26-27.6-73.7v-.5h16.8l12.9 35.8c2.8 7.8 4.6 13.8 6.2 20.6h.3a184 184 0 016.1-20.6l13-35.8h17.4v.5L523 327.7c-2 5.3-6.8 5.3-14 5.3h-5.3v-.5zM630 256v50.4h-4.2a30.2 30.2 0 01-9.7-5c-4.5 3.9-10.9 6.5-22.1 6.5-18.7 0-28.3-7-28.3-24.6 0-17.5 9.6-24.4 28.9-24.4 7 0 13 1.2 18 2.7v-4c0-9.5-3.8-12-16.8-12-8.7 0-16 1.1-24.5 2.8l-1.6-14.3a121 121 0 0129.2-3.2c21.5 0 31 7 31 25.2m-17.4 34.6v-16.6c-4.3-1.1-9-1.9-15.7-1.9-10 0-13 4.6-13 11.1 0 6.7 3 11.3 13 11.3 7.2 0 12-2 15.7-3.9M649.6 290.3v-70.6c0-7 0-11.5 17.5-15.8v81.8c0 4.9 2.2 6.2 5.6 6.2 2 0 3.4-.1 5-.3l.6 14.3c-3.5.8-8.4 1.3-13.6 1.3-9.4 0-15.1-4.9-15.1-16.9M381 398.4h-35.5V442h-18.4V340.9h18.4V383H381V341h18.4v101H381v-43.5zM482 391.6V442H478a31.2 31.2 0 01-9.8-5c-4.4 3.8-10.8 6.4-22 6.4-18.8 0-28.4-7-28.4-24.6 0-17.5 9.6-24.4 29-24.4a61 61 0 0117.8 2.7v-4c0-9.5-3.7-12-16.7-12-8.6 0-15.9 1.1-24.5 2.8l-1.6-14.3c9-1.9 16.2-3.2 29.2-3.2 21.5 0 31.1 7 31.1 25.2m-17.5 34.7v-16.7a57 57 0 00-15.7-1.9c-9.9 0-13 4.6-13 11.1 0 6.7 3.1 11.3 13 11.3 7.3 0 12-2 15.7-3.8M498.7 440.2l1.6-14c8.6 1.7 14.4 2.7 23 2.7 10 0 15.4-2 15.4-7.7 0-6.4-10-7.7-19-9.8-8.7-2-19.9-4.9-19.9-22.2 0-14.7 9-22.8 28.6-22.8 11.3 0 18.1 1.3 25.7 3.2l-1.6 14a86.7 86.7 0 00-21-2.7c-10 0-13.9 2-13.9 7.4 0 6.7 8.5 7.7 17.5 10 8.8 2.4 21.4 5 21.4 21.7 0 15.3-10.4 23.4-30.1 23.4a108 108 0 01-27.7-3.2M574 355.3c0-7 0-11.6 17.5-16V442H574v-86.7zm42.3 12.5h20.2v.5l-23.1 34 23.7 39.2v.5h-11c-4.4 0-9.3 0-13.2-6.4l-19.5-32.2 23-35.6zM679.8 366.4c23 0 34.7 12.1 34.7 38.5s-11.7 38.5-34.7 38.5c-23 0-34.7-12.1-34.7-38.5s11.7-38.5 34.7-38.5m0 63.1c11.4 0 16.6-7.7 16.6-24.6 0-16.9-5.2-24.6-16.6-24.6-11.6 0-16.6 7.7-16.6 24.6 0 16.9 5 24.6 16.6 24.6M731.4 367.8h4.1a34 34 0 017.7 3.6c4.6-3 11.5-5 21-5 19.8 0 29.4 7 29.4 30V442h-17.5v-43c0-14-3.6-17.8-13.6-17.8a30 30 0 00-13.6 3V442h-17.5v-74.2zM813.2 340.9h17.5v17.8h-17.5v-17.8zm0 27h17.5v74h-17.5v-74zM851.2 367.8h4.1c3.4 1.2 5.7 2.3 7.7 3.6 4.6-3 11.4-5 21-5 19.8 0 29.4 7 29.4 30V442H896v-43c0-14-3.7-17.8-13.6-17.8-6.1 0-10.2 1.3-13.6 3V442h-17.5v-74.2zM929.4 403.4c0-29.3 10.7-37 30.4-37 9.7 0 16.5 2 21 5 2.1-1.3 4.4-2.4 7.8-3.6h4.1v75.5c0 18-9.6 25.2-31.1 25.2a120 120 0 01-29.2-3.3L934 451a126 126 0 0024.5 2.7c13 0 16.7-2.4 16.7-11.9v-5.5c-4 2.7-9.2 3.9-15.4 3.9-19.7 0-30.4-7.7-30.4-36.8m45.8 19.1v-38.3c-3.4-1.7-7.7-3-13.6-3-10 0-14 3.8-14 22.2 0 18.1 4 22 14 22 6 0 10.2-1.4 13.6-2.9M1015 340.9h30.5c30 0 45.5 15.8 45.5 50.5 0 34.6-15.4 50.6-45.5 50.6h-30.6V340.9zm31.5 15.2h-13.2v70.6h13.2c16.3 0 25.2-11.1 25.2-35.3 0-24.3-8.9-35.3-25.2-35.3M1163.8 398.4h-35.4V442H1110V340.9h18.4V383h35.4V341h18.4v101h-18.4v-43.5zM1196.5 341.3v-.4h19.2l16 54.5c2.8 9.4 4.9 19.1 6.2 26h.3c1.2-6.9 3.3-16.6 6-26l14.6-48.6c1.6-5.3 7.1-6 14.2-6h6.4v.5L1247.7 442h-19.4l-31.8-100.7zM211.4 217.1l-60 51 17.2-99L79 86.3 178 115C103.8 29.1 0 46.7 0 46.7s25.2 86.9 121.1 126.9c-31.3 54.8-25.8 111.4-3.5 167.3l92-82.6c4 4.8 11.1 12 24.9 17.5a67.2 67.2 0 0050 .3l-73.1-59z"/><path fill="#848484" fill-rule="nonzero" d="M0 46.7s25.2 86.9 121.1 126.9c-31.3 54.8-25.8 111.4-3.5 167.3l92-82.6c4 4.8 11.1 12 24.9 17.5a67.3 67.3 0 0050 .3l-73.1-59-60 51 17.2-99L79 86.3 178 115A202.7 202.7 0 0023 45.2c-14.2 0-23 1.5-23 1.5zM232.4 89.1L243 3.7a59 59 0 00-62.4 13.6 58.4 58.4 0 000 82.7l10.8-62 35.7 91 65.4 18.8-43.8 37.7C335 177.2 370 114.2 370 114.2l-137.5-25z"/><g transform="translate(-2886.4 -1731.7) scale(8.33333)"><clipPath id="a"><path d="M368 209.9a7 7 0 000 10l1.3-7.5 4.3 10.9 7.9 2.2-5.3 4.6c10.4-1 14.6-8.6 14.6-8.6l-16.5-3 1.2-10.3c-.8-.3-1.7-.4-2.5-.4a7 7 0 00-5 2z" clip-rule="nonzero"/></clipPath><g clip-path="url(#a)"><path fill="#848484" d="M365.2 207.2h25.6V230h-25.6z"/></g></g></svg>
     </div>
     {{!-- Woods B --}}
     <div class="p-3 h-20 text-center align-center flex items-center justify-center">
       <svg class="w-24 h-24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 1212 503"><defs/><path fill="gray" fill-rule="nonzero" d="M1141.9 76.6h61.7c-.3-53.7-47.8-76.6-95-76.6-44.6 0-96.7 20.5-96.7 72.3 0 43.7 35.7 58.9 69.5 68.5 34.1 9.6 68.2 13.6 68.2 34.4 0 17.7-19.2 24.2-37.8 24.2-26.4 0-43.7-9-45-36.9h-62c.3 60.8 48.7 84.7 103 84.7 52 0 103.5-19.3 103.5-79.4 0-42.8-34.7-59-68.8-68.6-34.7-9.6-68.9-13-68.9-31.3 0-15.5 16.8-20.1 30.1-20.1 19 0 39 7 38.2 28.8m-137.4 46.2C1004.5 49.3 960.8 5 888.2 5h-102v237.5h102c72 0 116.3-41.9 116.3-119.7m-61.7-.3c0 47.4-18.6 65.7-65.5 67h-29.1V58.3h29.1c41.9 0 65.5 20.8 65.5 64.2M779 123.7C779 55 736.8 0 661.8 0c-74.7 0-117.2 54.9-117.2 123.7 0 68.9 42.2 123.8 117.2 123.8S779 192.5 779 123.7m-62 0c0 35.4-15.2 70.4-55.2 70.4s-55.2-35.3-55.2-70.4c0-35.3 15.2-70.4 55.2-70.4s55.2 35 55.2 70.4m-176.8 0C540.2 55 498.1 0 423.3 0c-74.7 0-117.2 54.9-117.2 123.7 0 68.9 42.2 123.8 117.2 123.8 74.8 0 117-55 117-123.8m-62 0c0 35.4-15.3 70.4-55.3 70.4s-55.2-35.3-55.2-70.4c0-35.3 15.2-70.4 55.2-70.4s55.2 35 55.2 70.4M259 242.5L320.4 5h-62l-33.6 173.6h-.6L189.2 5h-58l-35 173.6h-.7L62 5H0l60.2 237.5h63l36.5-163.7h.6L197 242.5h62zm-86.6 17.4H61.1v237.5h114.1c50.9 0 92.4-17.3 92.4-73.8a56 56 0 00-40.9-56.1 53.6 53.6 0 0031.3-48c0-49.7-45-60.2-85.6-59.6m-49.3 133.3h49.6c18.7 0 33.2 6.8 33.2 28 0 19.5-13.6 26.6-33.2 26.6h-49.6v-54.6zm47.8-85.6c13 0 25.4 5.6 25.4 23 0 16.7-14.6 22.6-25.4 22.6H123v-45.6H171zM342.7 260L254 497.4h63.6l14.9-42.5h82.8l14.5 42.5h64.5L405.6 260h-62.9zm4 148.8l27-83h.6l26.4 83h-54zm123.5-30c0 68.8 46.5 123.7 118.4 123.7 22 0 50-8 66-31l3.8 26h40v-130h-99.9v46h43.1c-3.4 21.7-23.8 36-54.5 36-40 0-55.2-35.4-55.2-70.4 0-35.4 15.2-70.4 55.2-70.4 24.8 0 45 12.4 46.8 32.5h61.7c-5.6-59.5-58.3-85.9-107.3-85.9-71.6-.3-118.1 54.6-118.1 123.5m232 0c0 68.8 42.1 123.7 117.1 123.7 74.8 0 117.3-54.9 117.3-123.7 0-68.9-42.2-123.8-117.3-123.8-75 0-117.2 54.9-117.2 123.8m62 0c0-35.4 15.2-70.4 55.2-70.4s55.2 35.3 55.2 70.4c0 35.3-15.1 70.3-55.2 70.3-40 0-55.2-35-55.2-70.3M927 313.2h70.7v184.2h62V313.2h70.7V260H927v53.3zM1128 455h-34.2v4.7h14.3v37.8h5.5v-37.8h14.3v-4.7zm9.5 0h-7.7v42.5h5.2v-35.3l13.4 35.3h5l13.3-35.3v35.3h5.2V455h-7.7l-13.3 35.7-13.4-35.7z"/></svg>
     </div>
-        {{!-- HOK --}}
-    <div class="p-3 h-20 text-center align-center flex items-center justify-center opacity-75">
-      <svg class="w-14 h-16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 558 558"><defs/><path fill="gray" fill-rule="nonzero" d="M0 0h557.2v557.2H0z"/><path fill="#fff" fill-rule="nonzero" d="M87.4 11.8h20.3v309.4H87.4V333h83.2v-11.8h-21.7v-91.9c8-12.8 34.2-28.2 50.9-28.2 10.7 0 20.4 8.7 20.4 23.6v96.5H201V333h83.2v-11.8h-22.8V217.4c0-12-8.2-33.1-38.1-34.2-33.5-1.1-62.8 21.8-70 28.5-2.7 2.5-4.4.7-4.4-1.3V0H87.4v11.8zM280.9 245.1h34.8v-34.8h13.5v34.8h34.9v13.6h-34.9v34.7h-13.5v-34.7H281V245z"/><path fill="#fff" fill-rule="nonzero" d="M425 262.2l-.2 59h21.6V333h-83.2v-11.8h20.3V12h-20.3V0h61.6v244.6c0 2.2 2 3.3 4.3 1.4l67.4-54.5h-22.2v-11.8h68.4v11.8h-19c-7.9 0-19.8 6.3-26.4 11.7-8.4 7-15.7 12.8-15.7 12.8l64 105.2h11.6V333h-83v-11.8h21l-47.3-77.7-23 18.7z"/><path fill="#fff" d="M266 161.8c-49.4.1-84.2-34.1-84.2-75 0-40.7 34.8-75 84.3-75 49.4 0 84.2 34.3 84.2 75 0 40.9-34.8 75.1-84.2 75zm-39.5-75c0 56.6 16.6 63.4 39.6 63.7 23-.3 39.7-7.1 39.5-63.7.2-56.5-16.5-63.3-39.5-63.6-23 .3-39.7 7.1-39.6 63.6z"/></svg>
-    </div>
-    {{!-- Royal --}}
+        {{!-- Sasaki --}}
     <div class="p-3 h-20 text-center align-center flex items-center justify-center">
-      <svg class="w-36 h-36" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 1280 469"><defs/><path fill="#848484" fill-rule="nonzero" d="M327.1 205.4h26.7c30.1 0 44.3 8.4 44.3 34.2 0 16-5.6 25.4-17 30.1l21.2 36.3v.4h-10.7c-7.1 0-10 0-13.6-6l-15.6-26.6h-16.9v32.6h-18.4v-101zm27.7 15.2h-9.3v38h9.3c16.4 0 24-3.7 24-19 0-15.4-7.6-19-24-19M445.6 230.9c23 0 34.7 12.1 34.7 38.5s-11.8 38.5-34.7 38.5c-23 0-34.7-12.1-34.7-38.5s11.7-38.5 34.7-38.5m0 63.1c11.4 0 16.6-7.7 16.6-24.6 0-16.9-5.2-24.6-16.6-24.6-11.6 0-16.6 7.7-16.6 24.6 0 16.9 5 24.6 16.6 24.6M503.8 332.5l9.8-26-27.6-73.7v-.5h16.8l12.9 35.8c2.8 7.8 4.6 13.8 6.2 20.6h.3a184 184 0 016.1-20.6l13-35.8h17.4v.5L523 327.7c-2 5.3-6.8 5.3-14 5.3h-5.3v-.5zM630 256v50.4h-4.2a30.2 30.2 0 01-9.7-5c-4.5 3.9-10.9 6.5-22.1 6.5-18.7 0-28.3-7-28.3-24.6 0-17.5 9.6-24.4 28.9-24.4 7 0 13 1.2 18 2.7v-4c0-9.5-3.8-12-16.8-12-8.7 0-16 1.1-24.5 2.8l-1.6-14.3a121 121 0 0129.2-3.2c21.5 0 31 7 31 25.2m-17.4 34.6v-16.6c-4.3-1.1-9-1.9-15.7-1.9-10 0-13 4.6-13 11.1 0 6.7 3 11.3 13 11.3 7.2 0 12-2 15.7-3.9M649.6 290.3v-70.6c0-7 0-11.5 17.5-15.8v81.8c0 4.9 2.2 6.2 5.6 6.2 2 0 3.4-.1 5-.3l.6 14.3c-3.5.8-8.4 1.3-13.6 1.3-9.4 0-15.1-4.9-15.1-16.9M381 398.4h-35.5V442h-18.4V340.9h18.4V383H381V341h18.4v101H381v-43.5zM482 391.6V442H478a31.2 31.2 0 01-9.8-5c-4.4 3.8-10.8 6.4-22 6.4-18.8 0-28.4-7-28.4-24.6 0-17.5 9.6-24.4 29-24.4a61 61 0 0117.8 2.7v-4c0-9.5-3.7-12-16.7-12-8.6 0-15.9 1.1-24.5 2.8l-1.6-14.3c9-1.9 16.2-3.2 29.2-3.2 21.5 0 31.1 7 31.1 25.2m-17.5 34.7v-16.7a57 57 0 00-15.7-1.9c-9.9 0-13 4.6-13 11.1 0 6.7 3.1 11.3 13 11.3 7.3 0 12-2 15.7-3.8M498.7 440.2l1.6-14c8.6 1.7 14.4 2.7 23 2.7 10 0 15.4-2 15.4-7.7 0-6.4-10-7.7-19-9.8-8.7-2-19.9-4.9-19.9-22.2 0-14.7 9-22.8 28.6-22.8 11.3 0 18.1 1.3 25.7 3.2l-1.6 14a86.7 86.7 0 00-21-2.7c-10 0-13.9 2-13.9 7.4 0 6.7 8.5 7.7 17.5 10 8.8 2.4 21.4 5 21.4 21.7 0 15.3-10.4 23.4-30.1 23.4a108 108 0 01-27.7-3.2M574 355.3c0-7 0-11.6 17.5-16V442H574v-86.7zm42.3 12.5h20.2v.5l-23.1 34 23.7 39.2v.5h-11c-4.4 0-9.3 0-13.2-6.4l-19.5-32.2 23-35.6zM679.8 366.4c23 0 34.7 12.1 34.7 38.5s-11.7 38.5-34.7 38.5c-23 0-34.7-12.1-34.7-38.5s11.7-38.5 34.7-38.5m0 63.1c11.4 0 16.6-7.7 16.6-24.6 0-16.9-5.2-24.6-16.6-24.6-11.6 0-16.6 7.7-16.6 24.6 0 16.9 5 24.6 16.6 24.6M731.4 367.8h4.1a34 34 0 017.7 3.6c4.6-3 11.5-5 21-5 19.8 0 29.4 7 29.4 30V442h-17.5v-43c0-14-3.6-17.8-13.6-17.8a30 30 0 00-13.6 3V442h-17.5v-74.2zM813.2 340.9h17.5v17.8h-17.5v-17.8zm0 27h17.5v74h-17.5v-74zM851.2 367.8h4.1c3.4 1.2 5.7 2.3 7.7 3.6 4.6-3 11.4-5 21-5 19.8 0 29.4 7 29.4 30V442H896v-43c0-14-3.7-17.8-13.6-17.8-6.1 0-10.2 1.3-13.6 3V442h-17.5v-74.2zM929.4 403.4c0-29.3 10.7-37 30.4-37 9.7 0 16.5 2 21 5 2.1-1.3 4.4-2.4 7.8-3.6h4.1v75.5c0 18-9.6 25.2-31.1 25.2a120 120 0 01-29.2-3.3L934 451a126 126 0 0024.5 2.7c13 0 16.7-2.4 16.7-11.9v-5.5c-4 2.7-9.2 3.9-15.4 3.9-19.7 0-30.4-7.7-30.4-36.8m45.8 19.1v-38.3c-3.4-1.7-7.7-3-13.6-3-10 0-14 3.8-14 22.2 0 18.1 4 22 14 22 6 0 10.2-1.4 13.6-2.9M1015 340.9h30.5c30 0 45.5 15.8 45.5 50.5 0 34.6-15.4 50.6-45.5 50.6h-30.6V340.9zm31.5 15.2h-13.2v70.6h13.2c16.3 0 25.2-11.1 25.2-35.3 0-24.3-8.9-35.3-25.2-35.3M1163.8 398.4h-35.4V442H1110V340.9h18.4V383h35.4V341h18.4v101h-18.4v-43.5zM1196.5 341.3v-.4h19.2l16 54.5c2.8 9.4 4.9 19.1 6.2 26h.3c1.2-6.9 3.3-16.6 6-26l14.6-48.6c1.6-5.3 7.1-6 14.2-6h6.4v.5L1247.7 442h-19.4l-31.8-100.7zM211.4 217.1l-60 51 17.2-99L79 86.3 178 115C103.8 29.1 0 46.7 0 46.7s25.2 86.9 121.1 126.9c-31.3 54.8-25.8 111.4-3.5 167.3l92-82.6c4 4.8 11.1 12 24.9 17.5a67.2 67.2 0 0050 .3l-73.1-59z"/><path fill="#848484" fill-rule="nonzero" d="M0 46.7s25.2 86.9 121.1 126.9c-31.3 54.8-25.8 111.4-3.5 167.3l92-82.6c4 4.8 11.1 12 24.9 17.5a67.3 67.3 0 0050 .3l-73.1-59-60 51 17.2-99L79 86.3 178 115A202.7 202.7 0 0023 45.2c-14.2 0-23 1.5-23 1.5zM232.4 89.1L243 3.7a59 59 0 00-62.4 13.6 58.4 58.4 0 000 82.7l10.8-62 35.7 91 65.4 18.8-43.8 37.7C335 177.2 370 114.2 370 114.2l-137.5-25z"/><g transform="translate(-2886.4 -1731.7) scale(8.33333)"><clipPath id="a"><path d="M368 209.9a7 7 0 000 10l1.3-7.5 4.3 10.9 7.9 2.2-5.3 4.6c10.4-1 14.6-8.6 14.6-8.6l-16.5-3 1.2-10.3c-.8-.3-1.7-.4-2.5-.4a7 7 0 00-5 2z" clip-rule="nonzero"/></clipPath><g clip-path="url(#a)"><path fill="#848484" d="M365.2 207.2h25.6V230h-25.6z"/></g></g></svg>
+      <svg class="w-24 h-36" viewBox="0 0 1756 459" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><g fill-rule="nonzero"><g fill="#a7a7a7"><path d="M92.083 177.339l41.86 25.81-32.294 52.822-41.854-25.81c-1.596-.803-3.985-2.404-7.177-4.803-24.713-17.606-40.858-41.615-48.434-72.029-7.97-33.61-2.987-65.021 14.953-94.233 17.935-29.211 43.45-47.82 76.537-55.824 31.491-6.803 60.393-3.003 86.702 11.406l7.172 3.601 46.044 28.813-32.887 52.817-46.044-28.21c-1.192-1.201-3.387-2.603-6.574-4.204-12.758-5.6-26.114-6.803-40.064-3.6-15.945 3.6-28.703 12.807-38.269 27.61-8.767 15.605-11.161 31.41-7.176 47.42 3.191 13.202 10.164 24.409 20.927 33.61.399.4.997.904 1.795 1.502a31.527 31.527 0 002.694 1.8c.992.599 1.69 1.103 2.09 1.502zM572.839 174.94v279.706H510.65V174.94h62.189zM386.872 454.646h-61.586V174.94h61.586v279.706zM845.502 233.762c26.31 18.807 42.653 44.214 49.032 76.228 6.379 32.01 1.197 62.024-15.546 90.033-11.56 18.808-26.807 33.312-45.745 43.516-18.932 10.204-38.967 15.306-60.093 15.306-20.33 0-39.466-4.603-57.401-13.805-1.596-1.202-3.99-2.598-7.177-4.2l-46.044-28.812 32.289-52.822 46.044 28.214c.798.4 3.386 1.8 7.775 4.2 13.551 6.004 27.8 6.703 42.753 2.1 14.947-4.6 26.408-13.507 34.378-26.709 8.374-13.206 11.262-27.41 8.673-42.617-2.593-15.207-9.665-27.61-21.226-37.212-3.192-2.404-5.78-4.204-7.776-5.406l-41.256-25.805 32.289-52.822 41.855 25.81c3.191 2.399 5.58 4 7.176 4.803zM1235.366 174.94v279.706h-62.188V174.94h62.188zM1049.404 454.646h-61.59V174.94h61.59v279.706zM1500.26 149.728l-43.655-43.815L1560.653 1.471l43.65 43.82-104.043 104.437zM1604.303 415.03l-43.65 43.815-104.048-104.437 43.655-43.82 104.043 104.443zM1325.056 455.244V5.072h61.59v450.172h-61.59zM1755.582 454.646h-61.59V229.557h61.59v225.089z"/></g><g fill="#959595"><path d="M182.975 233.762c26.308 18.807 42.652 44.214 49.031 76.228 6.38 32.01 1.197 62.024-15.546 90.033-11.56 18.808-26.812 33.312-45.745 43.516-18.937 10.204-38.967 15.306-60.093 15.306-20.33 0-39.466-4.603-57.406-13.805-1.59-1.202-3.985-2.598-7.172-4.2L0 412.029l32.289-52.822 46.044 28.214c.798.4 3.386 1.8 7.77 4.2 13.556 6.004 27.805 6.703 42.758 2.1 14.947-4.6 26.408-13.507 34.378-26.709 8.374-13.206 11.262-27.41 8.673-42.617-2.593-15.207-9.67-27.61-21.226-37.212-3.192-2.404-5.78-4.204-7.776-5.406l-41.26-25.805 32.293-52.822 41.855 25.81c3.187 2.399 5.58 4 7.177 4.803zM572.839 124.517v50.423H510.65v-50.423c0-17.207-5.98-31.91-17.94-44.114-11.96-12.205-26.508-18.31-43.65-18.31s-31.79 6.105-43.95 18.31c-12.159 12.204-18.238 26.907-18.238 44.114v50.423h-61.586v-50.423c0-34.414 12.055-63.72 36.174-87.93C385.58 12.375 414.776.275 449.06.275c34.284 0 63.485 12.1 87.6 36.314 24.119 24.209 36.179 53.515 36.179 87.929zM510.65 258.37v61.824H386.872V258.37H510.65zM754.611 177.339l41.86 25.81-32.289 52.822-41.86-25.81c-1.59-.803-3.985-2.404-7.172-4.803-24.717-17.606-40.862-41.615-48.438-72.029-7.97-33.61-2.987-65.021 14.953-94.233 17.935-29.211 43.45-47.82 76.537-55.824 31.49-6.803 60.393-3.003 86.702 11.406l7.177 3.601 46.039 28.813-32.887 52.817-46.04-28.21c-1.196-1.201-3.39-2.603-6.578-4.204-12.758-5.6-26.11-6.803-40.064-3.6-15.945 3.6-28.703 12.807-38.269 27.61-8.768 15.605-11.162 31.41-7.177 47.42 3.192 13.202 10.17 24.409 20.933 33.61.399.4.992.904 1.79 1.502a31.527 31.527 0 002.693 1.8c.998.599 1.696 1.103 2.09 1.502zM1235.366 124.517v50.423h-62.188v-50.423c0-17.207-5.98-31.91-17.94-44.114-11.955-12.205-26.508-18.31-43.65-18.31s-31.79 6.105-43.95 18.31c-12.154 12.204-18.234 26.907-18.234 44.114v50.423h-61.59v-50.423c0-34.414 12.06-63.72 36.174-87.93 24.12-24.213 53.321-36.313 87.6-36.313 34.284 0 63.485 12.1 87.6 36.314 24.119 24.209 36.178 53.515 36.178 87.929zM1173.178 258.37v61.824h-123.774V258.37h123.774zM1463.782 186.341c-11.96 12.005-17.94 26.613-17.94 43.82s5.98 31.81 17.94 43.815l36.478 36.612-43.655 43.82-36.473-36.618c-16.743-16.802-27.905-37.012-33.486-60.622v-54.02c5.98-24.408 17.142-44.617 33.486-60.622l36.473-36.613 43.655 43.815-36.478 36.613zM1755.582 229.557h-61.59V4.474h61.59v225.083z"/></g></g></svg>
     </div>
 
+
+
   </div>
   <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 text-gray-500 dark:text-gray-600">
     {{!-- BIG --}}
     <div class="p-3 h-20 text-center align-center flex items-center justify-center">
       <svg class="w-20 h-20" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 1111 504"><defs/><path fill="#8d8d8d" fill-rule="nonzero" d="M705.9 503.5V0h404.8v98.7h-306v306h207.2V301.2h-98.7v-98.7h197.5v301.1H705.9zm-197.5 0V0h93.8v503.5h-93.8zm-306-301.1V98.7H98.7v103.7h103.7zM306 404.8V301H98.7v103.7h207.4zM0 503.5V0h301l1.3 100 1.3 100 50.6 1.3 50.6 1.4v300.8H0z"/></svg>
     </div>
-    {{!-- Sasaki --}}
-    <div class="p-3 h-20 text-center align-center flex items-center justify-center">
-      <svg class="w-24 h-36" viewBox="0 0 1756 459" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><g fill-rule="nonzero"><g fill="#a7a7a7"><path d="M92.083 177.339l41.86 25.81-32.294 52.822-41.854-25.81c-1.596-.803-3.985-2.404-7.177-4.803-24.713-17.606-40.858-41.615-48.434-72.029-7.97-33.61-2.987-65.021 14.953-94.233 17.935-29.211 43.45-47.82 76.537-55.824 31.491-6.803 60.393-3.003 86.702 11.406l7.172 3.601 46.044 28.813-32.887 52.817-46.044-28.21c-1.192-1.201-3.387-2.603-6.574-4.204-12.758-5.6-26.114-6.803-40.064-3.6-15.945 3.6-28.703 12.807-38.269 27.61-8.767 15.605-11.161 31.41-7.176 47.42 3.191 13.202 10.164 24.409 20.927 33.61.399.4.997.904 1.795 1.502a31.527 31.527 0 002.694 1.8c.992.599 1.69 1.103 2.09 1.502zM572.839 174.94v279.706H510.65V174.94h62.189zM386.872 454.646h-61.586V174.94h61.586v279.706zM845.502 233.762c26.31 18.807 42.653 44.214 49.032 76.228 6.379 32.01 1.197 62.024-15.546 90.033-11.56 18.808-26.807 33.312-45.745 43.516-18.932 10.204-38.967 15.306-60.093 15.306-20.33 0-39.466-4.603-57.401-13.805-1.596-1.202-3.99-2.598-7.177-4.2l-46.044-28.812 32.289-52.822 46.044 28.214c.798.4 3.386 1.8 7.775 4.2 13.551 6.004 27.8 6.703 42.753 2.1 14.947-4.6 26.408-13.507 34.378-26.709 8.374-13.206 11.262-27.41 8.673-42.617-2.593-15.207-9.665-27.61-21.226-37.212-3.192-2.404-5.78-4.204-7.776-5.406l-41.256-25.805 32.289-52.822 41.855 25.81c3.191 2.399 5.58 4 7.176 4.803zM1235.366 174.94v279.706h-62.188V174.94h62.188zM1049.404 454.646h-61.59V174.94h61.59v279.706zM1500.26 149.728l-43.655-43.815L1560.653 1.471l43.65 43.82-104.043 104.437zM1604.303 415.03l-43.65 43.815-104.048-104.437 43.655-43.82 104.043 104.443zM1325.056 455.244V5.072h61.59v450.172h-61.59zM1755.582 454.646h-61.59V229.557h61.59v225.089z"/></g><g fill="#959595"><path d="M182.975 233.762c26.308 18.807 42.652 44.214 49.031 76.228 6.38 32.01 1.197 62.024-15.546 90.033-11.56 18.808-26.812 33.312-45.745 43.516-18.937 10.204-38.967 15.306-60.093 15.306-20.33 0-39.466-4.603-57.406-13.805-1.59-1.202-3.985-2.598-7.172-4.2L0 412.029l32.289-52.822 46.044 28.214c.798.4 3.386 1.8 7.77 4.2 13.556 6.004 27.805 6.703 42.758 2.1 14.947-4.6 26.408-13.507 34.378-26.709 8.374-13.206 11.262-27.41 8.673-42.617-2.593-15.207-9.67-27.61-21.226-37.212-3.192-2.404-5.78-4.204-7.776-5.406l-41.26-25.805 32.293-52.822 41.855 25.81c3.187 2.399 5.58 4 7.177 4.803zM572.839 124.517v50.423H510.65v-50.423c0-17.207-5.98-31.91-17.94-44.114-11.96-12.205-26.508-18.31-43.65-18.31s-31.79 6.105-43.95 18.31c-12.159 12.204-18.238 26.907-18.238 44.114v50.423h-61.586v-50.423c0-34.414 12.055-63.72 36.174-87.93C385.58 12.375 414.776.275 449.06.275c34.284 0 63.485 12.1 87.6 36.314 24.119 24.209 36.179 53.515 36.179 87.929zM510.65 258.37v61.824H386.872V258.37H510.65zM754.611 177.339l41.86 25.81-32.289 52.822-41.86-25.81c-1.59-.803-3.985-2.404-7.172-4.803-24.717-17.606-40.862-41.615-48.438-72.029-7.97-33.61-2.987-65.021 14.953-94.233 17.935-29.211 43.45-47.82 76.537-55.824 31.49-6.803 60.393-3.003 86.702 11.406l7.177 3.601 46.039 28.813-32.887 52.817-46.04-28.21c-1.196-1.201-3.39-2.603-6.578-4.204-12.758-5.6-26.11-6.803-40.064-3.6-15.945 3.6-28.703 12.807-38.269 27.61-8.768 15.605-11.162 31.41-7.177 47.42 3.192 13.202 10.17 24.409 20.933 33.61.399.4.992.904 1.79 1.502a31.527 31.527 0 002.693 1.8c.998.599 1.696 1.103 2.09 1.502zM1235.366 124.517v50.423h-62.188v-50.423c0-17.207-5.98-31.91-17.94-44.114-11.955-12.205-26.508-18.31-43.65-18.31s-31.79 6.105-43.95 18.31c-12.154 12.204-18.234 26.907-18.234 44.114v50.423h-61.59v-50.423c0-34.414 12.06-63.72 36.174-87.93 24.12-24.213 53.321-36.313 87.6-36.313 34.284 0 63.485 12.1 87.6 36.314 24.119 24.209 36.178 53.515 36.178 87.929zM1173.178 258.37v61.824h-123.774V258.37h123.774zM1463.782 186.341c-11.96 12.005-17.94 26.613-17.94 43.82s5.98 31.81 17.94 43.815l36.478 36.612-43.655 43.82-36.473-36.618c-16.743-16.802-27.905-37.012-33.486-60.622v-54.02c5.98-24.408 17.142-44.617 33.486-60.622l36.473-36.613 43.655 43.815-36.478 36.613zM1755.582 229.557h-61.59V4.474h61.59v225.083z"/></g></g></svg>
+
+           {{!-- HOK --}}
+    <div class="p-3 h-20 text-center align-center flex items-center justify-center opacity-75">
+      <svg class="w-14 h-16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 558 558"><defs/><path fill="gray" fill-rule="nonzero" d="M0 0h557.2v557.2H0z"/><path fill="#fff" fill-rule="nonzero" d="M87.4 11.8h20.3v309.4H87.4V333h83.2v-11.8h-21.7v-91.9c8-12.8 34.2-28.2 50.9-28.2 10.7 0 20.4 8.7 20.4 23.6v96.5H201V333h83.2v-11.8h-22.8V217.4c0-12-8.2-33.1-38.1-34.2-33.5-1.1-62.8 21.8-70 28.5-2.7 2.5-4.4.7-4.4-1.3V0H87.4v11.8zM280.9 245.1h34.8v-34.8h13.5v34.8h34.9v13.6h-34.9v34.7h-13.5v-34.7H281V245z"/><path fill="#fff" fill-rule="nonzero" d="M425 262.2l-.2 59h21.6V333h-83.2v-11.8h20.3V12h-20.3V0h61.6v244.6c0 2.2 2 3.3 4.3 1.4l67.4-54.5h-22.2v-11.8h68.4v11.8h-19c-7.9 0-19.8 6.3-26.4 11.7-8.4 7-15.7 12.8-15.7 12.8l64 105.2h11.6V333h-83v-11.8h21l-47.3-77.7-23 18.7z"/><path fill="#fff" d="M266 161.8c-49.4.1-84.2-34.1-84.2-75 0-40.7 34.8-75 84.3-75 49.4 0 84.2 34.3 84.2 75 0 40.9-34.8 75.1-84.2 75zm-39.5-75c0 56.6 16.6 63.4 39.6 63.7 23-.3 39.7-7.1 39.5-63.7.2-56.5-16.5-63.3-39.5-63.6-23 .3-39.7 7.1-39.6 63.6z"/></svg>
     </div>
-    {{!-- WSP --}}
-    <div class="p-3 h-20 mt-3 text-center align-center flex items-center justify-center">
-      <svg class="w-24 h-24" viewBox="0 0 934 439" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M869.754 119.438c0-49.823-18.238-91.387-42.05-118.618h69.215c22.719 27.682 36.76 74.771 36.76 118.618v.156c0 43.92-14.077 91.084-36.866 118.753h-69.216c23.848-27.232 42.157-68.845 42.157-118.753v-.156zM63.824 0H0l87.594 237.559h33.922l14.953-40.557L63.824 0zm171.229 0h-63.825l87.594 237.559h33.923l14.953-40.557L235.053 0zm487.554 438.944V.01h-61.07v438.934h61.07zM383.094 36.055c.988-12.17 3.21-24.158 8.256-35.235h55.845c-4.657 8.431-9.032 23.795-4.057 39.063 4.515 13.797 14.04 23.21 26.07 30.96 14.288 9.183 30.904 14.295 46.179 21.424 16.051 7.458 31.644 15.269 45.05 26.903 19.473 16.906 31.327 36.961 33.232 62.88.247 3.097.353 6.205.353 9.317 0 16.238-2.576 32.332-9.808 46.98h-57.362c5.645-9.596 10.09-22.677 9.278-34.75-2.01-29.93-38.558-46.288-69.18-59.905-4.656-2.078-9.243-4.117-13.617-6.156-13.441-6.293-26.67-13.518-38.136-23.054-11.853-9.85-20.884-19.713-26.388-34.177-4.868-12.693-6.632-26.455-5.997-39.984.07-1.422.177-2.844.282-4.266" fill="#848484" fill-rule="nonzero"/></svg>
+
+  {{!-- SOM --}}
+    <div class="p-3 h-20 flex items-center justify-center">
+      <svg viewBox="0 0 1430 496" class="w-24 h-24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M668.627 0C532.213 0 420.774 111.436 420.774 247.852s111.439 247.854 247.853 247.854c136.416 0 247.854-111.441 247.854-247.854S805.043-.001 668.627-.001zm0 475.212c-125.527 0-227.999-101.832-227.999-228s101.832-227.998 228-227.998c125.528 0 228 101.83 228 227.999 0 126.167-103.114 227.999-228 227.999zm-468.17-251.055c-90.298-16.012-158.825-35.225-158.825-100.55 0-64.045 59.561-103.753 142.18-103.753 69.167 0 125.527 29.46 157.549 71.73l17.292-10.248C323.427 33.303 261.3-.001 184.447-.001 89.663 0 21.776 47.393 21.776 123.606c0 78.135 76.213 102.472 176.762 119.764 91.585 16.012 161.394 40.346 161.394 114.637 0 72.372-67.889 116.564-162.674 116.564-80.056 0-144.74-37.145-179.325-89.662L0 395.794c37.786 58.921 108.236 99.27 195.977 99.27 106.315 0 183.168-51.877 183.168-137.057 0-87.098-76.853-115.918-178.685-133.85h-.003zm800.561-185.73h.642l192.776 451.516h21.775l191.495-451.516h.636v451.516h21.145V5.763h-32.027l-191.494 456h-.64l-194.06-456h-30.1V489.3h19.854V38.427h-.002z" fill="#888" fill-rule="nonzero"/></svg>
     </div>
+
+
+
     <div class="p-3 h-20 text-center align-center flex items-center justify-center">
       {{!-- Grimshaw --}}
       <svg class="w-36 h-36" viewBox="0 0 2212 274" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M154.81 41.668c-31.608.284-55.725 9.417-72.583 27.325C65.21 87.002 56.61 109.802 56.61 137.602c0 27.608 8.175 49.933 24.5 67.083 16 18.017 38.525 27.158 67.45 27.35 14.767 0 26.617-1.225 35.767-3.783v-68.967H126.86v-41.758h109.375v142.591c-28.942 8.567-58.192 13.1-87.675 13.659-44.5 0-80.042-11.017-106.725-32.975C14.193 219.21.227 186.135-.007 141.46 1.802 48.168 51.335 1.052 148.56.002c30.525.3 57.025 3.975 79.533 11.041L224.66 55.81c-22.808-9.442-46.058-14.142-69.85-14.142M1831.75 4.542h57l50.442 211.566h.775l46.2-211.566h73.675l47.758 211.566h.75l50.833-211.566h52.809l-70.659 264.708h-69.8L2022.608 57.6h-.766l-48.075 211.65h-70.259L1831.75 4.542zM358.47 117.528h17.867c6.966 0 13.958-.466 20.958-1.408 6.7-.85 12.8-2.55 18.225-4.992 5.425-2.541 9.975-6.225 13.542-11.041 3.175-5.084 4.7-11.484 4.7-19.209 0-8.208-1.525-14.608-4.7-19.416-3.567-4.525-8.109-8.009-13.542-10.267-5.425-2.258-11.525-3.775-18.225-4.533-7-.284-13.992-.375-20.958-.375H358.47v71.241zM304.178 4.545h58.584c14.966 0 30 .192 44.983.367 15.008.775 28.708 3.308 41.117 7.641 12.716 4.059 22.766 11.117 30.316 21.209 7.217 9.8 11 24.033 11.234 42.5 0 15.65-4.9 29.116-14.767 40.516-9.8 11.409-23.5 18.384-41.092 20.834v.85c7.234.658 13.167 3.858 17.842 9.416 4.675 5.575 8.275 11.517 10.867 17.9l43.45 103.475h-60.509l-32.608-82.75c-3.392-9.791-7.617-16.941-12.825-21.191-5.4-4.042-13.692-6.017-24.833-6.017H358.47v109.958h-54.292V4.545z" fill="gray" fill-rule="nonzero"/><path fill="gray" d="M556.776 4.545h54.3v264.708h-54.3z"/><path d="M692.512 4.542h86.991l64.4 200.633h.734L909.103 4.542h86.867V269.25h-51.933V50.9h-.825l-72.934 218.35H818.27L745.337 50.9l-.767.75v217.6h-52.058V4.542zM1162.84 41.677c-4.683 0-9.325.566-13.992 1.608-4.925 1.025-9.575 2.908-13.991 5.65-4.142 2.525-7.609 6.3-10.5 11.392-2.784 4.8-4.209 10.933-4.209 18.183 0 5.475 1.784 10.183 5.434 14.042 3.633 3.775 8.158 7.266 13.566 10.183a173.914 173.914 0 0019.434 8.383c6.708 2.825 13.8 5.65 21.316 8.675 7.5 2.825 14.75 6.109 21.734 9.884 7.216 4.066 13.566 8.958 19 14.8 5.441 5.558 9.966 12.25 13.583 20.083 3.117 8.1 4.658 17.808 4.658 29.208-.516 28.55-10.466 48.992-29.85 61.442-19.408 12.342-43.3 18.575-71.783 18.575-13.95 0-25.767-1.058-35.325-3.025a898.998 898.998 0 01-34.167-7.25l5.067-47.8c19.142 10.65 39.542 16.125 61.292 16.325 11.108 0 21.875-2.833 32.241-8.292 10.284-5.566 15.592-14.233 15.834-25.825 0-6.241-1.542-11.783-4.584-16.3-3.65-4.533-8.2-8.3-13.608-11.316-11.875-6.142-25.5-11.975-40.708-17.525-7.55-3.025-14.634-6.6-21.367-10.559-7.017-3.766-13.475-8.3-19.367-13.666-5.516-5.559-10.016-12.25-13.616-20.167-3.625-7.825-5.459-16.967-5.459-27.517.542-29.408 10.492-50.416 29.934-63.041 18.541-11.875 40.191-17.825 64.75-17.825 23.275 0 44.875 3.216 64.808 9.533l-5.058 43.533c-17.309-7.341-35.725-11.108-55.067-11.391M1295.89 4.542h54.342v106.95h108.608V4.542h54.35V269.25h-54.35v-116.1h-108.608v116.1h-54.342V4.542zM1693.24 57.598h-.825l-39.175 109.217h79.142L1693.24 57.598zM1663.332 4.54h61.333l106.267 264.708h-60.125l-23.3-60.691h-109.784l-23.666 60.691h-56.234L1663.332 4.54z" fill="gray" fill-rule="nonzero"/></svg>

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>