feat: search in connectors for one selection

feat: adds customisable optional announcement bar on top of the navbar
Merge branch 'main' into interop
2021-07-24 20:23:32 +01:00 · 2021-07-24 20:19:53 +01:00 · 2021-07-22 21:40:05 +01:00 · 2021-07-22 21:36:00 +01:00 · 2021-07-22 21:26:39 +01:00 · 2021-07-22 20:58:33 +01:00
58 changed files with 7496 additions and 741 deletions
@@ -0,0 +1 @@
+import Swiper from"swiper/bundle";console.log("hello");
@@ -1,2 +1,30 @@
-: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 */
+/* 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;
+}
@@ -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;
 }
@@ -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
+              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
+              hello@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="https://speckle.systems/content/images/2021/06/standups.png"
+            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">
+              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>
@@ -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 (hello [at] speckle [dot] 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}}
@@ -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}}
@@ -2,81 +2,64 @@

 {{#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-10">
+    <header class="mt-10 prose prose-lg dark:prose-dark max-w-none">

-
-      <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,
+      {{#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="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}}
+          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}}

-        <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>
+      <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>

-        </div>
+      </p>

-      </div>
    </header>

-    <div class="post-body mt-10 max-w-prose mx-auto text-gray-700 dark:text-gray-300">
+    {{!-- Content --}}
+
+    <div class="prose prose-blue dark:prose-dark max-w-none mt-10">

      {{content}}

    </div>

-    <div class="post-body mt-10 max-w-prose mx-auto text-gray-700 dark:text-gray-300">
+    {{!-- Read more --}}

-
-      <h3 class="text-base mt-24  text-gray-500 text-center">
-        Wait - there's more! Read on:
-      </h3>
-
-    </div>
-
-    <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="1" order="id asc"}}
+        limit="2" 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>
-  </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}}
@@ -0,0 +1,213 @@
+{{!< 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 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">
+        {{#foreach tags}}
+        <a class="rounded-full py-1 px-3 bg-blue-500 text-white mr-2 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>
+              {{#foreach tags}}
+              <a class="rounded-full py-1 px-3 bg-blue-500 text-white mr-2 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 class="post-content mx-auto col-span-7 md:col-span-5 mt-4">
+    </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}}
+
+  <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>
@@ -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,14 +26,49 @@

  {{> 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}}

 </body>

@@ -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>
@@ -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()
@@ -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 }}

@@ -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.2",
  "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"
  }
 }
@@ -14,7 +14,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">
@@ -37,7 +37,7 @@

  <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 +49,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">
@@ -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.
@@ -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>
@@ -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}}

@@ -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,
@@ -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,
@@ -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}}
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>

@@ -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>
@@ -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]"}}
+      {{#foreach tags }}
+      <option value="{{name}}">{{name}}</option>
+      {{/foreach}}
+      {{/get}}
+    </select>
+    to
+    <select id="to" name="to"
+      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 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]"}}
+      {{#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-1 md: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]"}}
+  {{#foreach tags }}
+  <a href="{{url}}" class="group p-2 py-5 flex flex-row
+          shadow-sm hover:shadow-xl transition-shadow hover:ring dark:bg-gray-900 bg-white rounded-xl col-span-1 connector-card connector-{{name}}
+        ">
+    <div class="flex flex-shrink-0 items-center justify-center mx-6">
+      <img class="mx-auto h-32 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-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>
@@ -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>
@@ -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,unity,unreal]"}}
+        {{#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>
@@ -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}}
@@ -1,19 +1,36 @@
-<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">{{@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>
+    <div class="mt-5 md:mt-8">
+      <a href="/getstarted" 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">Get Started</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="https://calendly.com/speckle-ollie" target="_blank"
+        class="ml-2 items-center justify-center px-8 py-3 transition text-base font-medium rounded-md text-gray-900 dark:text-gray-50 hover:ring-2 hover:shadow-xl md:py-4 md:px-10">
+        Book A Demo
+      </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>
@@ -1,4 +1,4 @@
-<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>
@@ -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" />
@@ -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
@@ -2,9 +2,18 @@
 <div class="mt-0 w-full h-20"></div>

 {{!-- Actual navbar --}}
-<div x-data="{ mobileMenuOpen: false, usecasesMenu: false, developersMenu: false, resourcesMenu: false, flyoutMenuOpen: false }"
+<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 z-20">
+
+  {{!-- Hiring notice --}}
+  <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>
+
+
  <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 +21,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">
            Speckle
          </div>
        </a>
@@ -23,12 +32,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 +42,145 @@
      {{!-- 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 space-x-2">

          {{!-- 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>
+
+            <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>
-            </button>
+              <span>Connectors</span>
+            </a>
          </div>

-          {{!-- developers menu button --}}
-
          <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>

-          {{!-- Learn menu button --}}
+          <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">
-            <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">
+          {{!-- Resources menu button --}}
+
+          <div class="relative ml-1">
+            <button type="button" @mouseenter="resourcesMenu = true; 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="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.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
+
+              </svg>
              <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>
-              </svg>
            </button>
+
+            <div x-description="'resources' 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="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="/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="https://speckle.guide" target="_blank"
+                    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 flex items-center">
+                      Docs
+                      <svg xmlns="http://www.w3.org/2000/svg" class="ml-3 h-4 w-4" 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>
+                    </p>
+                    <p class="mt-1 text-sm text-gray-500">
+                      The reference manuals for Speckle, both for end users and developers alike.
+                    </p>
+                  </a>
+
+                  <a href="https://speckle.community" target="_blank"
+                    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 flex items-center">
+                      Community Forum
+                      <svg xmlns="http://www.w3.org/2000/svg" class="ml-3 h-4 w-4" 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>
+                    </p>
+                    <p class="mt-1 text-sm text-gray-500">
+                      Meet & get help from the Speckle community!
+                    </p>
+                  </a>
+
+                </div>
+              </div>
+
+              {{!-- {{> menus/resourcesMenu }} --}}
+
+            </div>
+
          </div>

-          {{!-- About  --}}
+          {{!-- About --}}

-          <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">
-              <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>
+          <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>
            </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>
@@ -140,7 +189,8 @@
                    </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="/partnerships"
+                    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
                    </p>
@@ -149,7 +199,8 @@
                    </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="/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 +209,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,8 +223,10 @@
            </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>
@@ -180,11 +234,11 @@
        {{!-- 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"
+          <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"
                clip-rule="evenodd"></path>
            </svg>
          </a>
@@ -194,72 +248,25 @@
    </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,31 +275,32 @@
          <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">
@@ -300,15 +308,30 @@
                </div>
              </a>

+              <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">
+                  Tutorials
+                </div>
+              </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>
+                <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>
                  </svg>
                </div>
                <div class="ml-4 text-base font-medium text-gray-900 dark:text-gray-200">
@@ -318,35 +341,34 @@


              <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">
+                <a href="https://speckle.community" target="_blank"
+                  class="font-medium text-blue-500 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">
+                <a href="https://speckle.guide" target="_blank" class="font-medium text-blue-500 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>

@@ -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="/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-500 hover:ring-4 hover:shadow-xl">
+  Get Started
 </a>
@@ -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>
@@ -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,7 +44,7 @@

  {{!-- 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
@@ -56,18 +53,8 @@
        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.
+        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"}}
@@ -79,9 +66,9 @@
      </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>
@@ -0,0 +1,142 @@
+{{!-- 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="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="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>
@@ -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>
@@ -2,16 +2,15 @@

 {{#post}}

-  <article class="relative">
-
-    {{> extras/patterns}}
+  <article class="relative max-w-2xl mx-auto px-4 md:px-0">

    {{!-- 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;"
+        <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,
@@ -20,28 +19,20 @@
          loading="lazy" src="{{img_url feature_image size="xl"}}"
          alt="{{title}}" />
      {{/if}}
-    </div>
+      <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>
-
-        {{#if custom_excerpt}}
-          <p class="mt-8 text-2xl text-gray-500 dark:text-gray-300 leading-8">
-            {{custom_excerpt}}
-          </p>
-        {{/if}}
-
-      </div>
    </header>

    {{!-- Content --}}

-    <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}}

@@ -49,7 +40,7 @@

    {{!-- 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"}}
@@ -60,10 +51,7 @@
      {{/get}}

      {{#get "posts" filter="tags:{{primary_tag.slug}}+id:<
-          {{id}}" limit="2" order="id desc" }}
+          {{id}}" limit=" 2" order="id desc" }}
          {{#foreach posts}} {{> cardFancySmall}}
-          {{/foreach}}
-      {{/get}}
-      {{> cardTag}}
-    </div> </article>
-{{/post}}
+          {{/foreach}} {{/get}} {{> cardTag}} </div> </article>
+          {{/post}}
@@ -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
  # /:
@@ -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}}
@@ -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"),
  ],
-}
+};
@@ -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>
Author	SHA1	Message	Date
Dimitrie Stefanescu	cf0bae6171	feat: search in connectors for one selection	2021-07-24 20:23:32 +01:00
Dimitrie Stefanescu	49de8744c9	feat: adds customisable optional announcement bar on top of the navbar	2021-07-24 20:19:53 +01:00
Dimitrie Stefanescu	2397164e59	Merge branch 'main' into interop	2021-07-22 21:40:05 +01:00
Dimitrie Stefanescu	c53d544531	feat: search caching fumble fix	2021-07-22 21:36:00 +01:00
Dimitrie Stefanescu	0de3c54f00	feat: adds magic tutorials in connectors page	2021-07-22 21:26:39 +01:00
Dimitrie Stefanescu	eda52ca14f	feat: updates tips in connectors page	2021-07-22 20:58:33 +01:00
Dimitrie Stefanescu	b57ee8d157	feat: restricts search to tutorials tag only in tutorials page	2021-07-22 20:44:47 +01:00
Dimitrie Stefanescu	ab0e882448	feat: snag dang search bar had email autofill, removed	2021-07-22 19:43:03 +01:00
Dimitrie Stefanescu	2ed575c1a8	feat: last fiddles on the search bar	2021-07-22 19:25:14 +01:00
Dimitrie Stefanescu	bed88c1b91	feat: adds search. closes #17	2021-07-22 18:41:57 +01:00
Dimitrie Stefanescu	1d5a1d9dee	feat: closes #18 , closes #19 , closes #20 YOLO	2021-07-22 17:50:01 +01:00
Dimitrie Stefanescu	011754179f	feat: install link customisation	2021-07-15 16:51:30 +01:00
Dimitrie Stefanescu	cc4c7ced7a	feat: pricing page fiddles	2021-07-15 15:44:14 +01:00
Dimitrie Stefanescu	7743b78b71	feat: top menu & mobile menu revamp	2021-07-14 14:38:05 +01:00
Dimitrie Stefanescu	78adad69c1	feat: featured post highlights	2021-07-13 21:56:14 +01:00
Dimitrie Stefanescu	f8a74e903d	feat: minor padding change	2021-07-13 21:25:06 +01:00
Dimitrie Stefanescu	ce679156b3	feat: img tutorials fix	2021-07-13 21:14:02 +01:00
Dimitrie Stefanescu	7b253418ee	feat: fixes sm card top heading	2021-07-13 21:07:59 +01:00
Dimitrie Stefanescu	b06131fa55	feat: changes cards, adds special tutorial card	2021-07-13 21:06:10 +01:00
Dimitrie Stefanescu	d5e712f177	feat: makes next/prev buttons bigger	2021-07-13 20:36:08 +01:00
Dimitrie Stefanescu	f1d501412f	feat: removes link to extra features from developers	2021-07-13 20:35:53 +01:00
Dimitrie Stefanescu	bb33fb9544	feat: tutorials index page	2021-07-13 19:29:37 +01:00
Dimitrie Stefanescu	4dc6df115e	feat: link box done	2021-07-13 19:29:26 +01:00
Dimitrie Stefanescu	1df9f60d9a	feat: link boxes 🙌	2021-07-08 20:57:52 +01:00
Dimitrie Stefanescu	d316a55777	feat: adds zoomers on imgs	2021-07-08 19:24:51 +01:00
Dimitrie Stefanescu	59173e4808	fix: fixes gh link in mobile menu	2021-07-08 18:33:47 +01:00
Dimitrie Stefanescu	967e43d288	feat(hiring): adds hiring notice on main page	2021-07-05 16:47:28 +01:00
Dimitrie Stefanescu	7308abb550	feat(swiper): now has buttons	2021-06-29 17:27:56 +01:00
Dimitrie Stefanescu	2e72a3d9d7	feat: makes connectors clickable on landing page	2021-06-29 16:58:09 +01:00
Dimitrie Stefanescu	488109c981	feat(master merge): merging master into dev	2021-06-29 15:40:30 +01:00
Dimitrie Stefanescu	ddd72f2722	feat(careers): adds life at speckle section	2021-06-29 15:37:00 +01:00
Dimitrie Stefanescu	b49ec00b84	feat: pre/code blocks now responsive	2021-06-27 20:36:21 +01:00
Dimitrie Stefanescu	9a796e4ef6	feat: loads	2021-06-27 17:24:47 +01:00
Dimitrie Stefanescu	67730a6b2b	feat: many improvements	2021-06-27 15:19:04 +01:00
Dimitrie Stefanescu	24edec9b37	feat(css): lots of it	2021-06-24 14:55:13 +01:00
Dimitrie Stefanescu	3dd3dada19	feat: adds connector slider & redoes landing page layout	2021-06-21 09:45:08 +01:00
Dimitrie Stefanescu	2e10b811db	fix(theme): career post template fix	2021-06-13 14:32:49 +01:00
Dimitrie Stefanescu	e6c37ce6ef	fix(theme): fixes page layout bugs	2021-06-13 13:47:22 +01:00
Dimitrie Stefanescu	c1f7555e77	feat(theme): bumps version	2021-06-13 13:24:29 +01:00
Dimitrie Stefanescu	584a9ccd51	feat(theme): major changes across the board (1) added typography classes & reset layout for post templates based on it; (2) removed landing page illustration and replaced it with the video; (3) removed fancy patterns from post templates (4) some minor cleanup	2021-06-13 13:23:58 +01:00
Dimitrie Stefanescu	a68aa75d28	chore: removed old code re viewer demo	2021-05-23 20:01:38 +01:00
Dimitrie Stefanescu	f8227034c6	feat: replaced old viewer with embedded frame	2021-05-23 20:00:02 +01:00
Dimitrie Stefanescu	fecc7c9dca	feat: public beta: updates links & copy; adds book a demo button	2021-05-23 19:18:25 +01:00
Dimitrie Stefanescu	45da1eaa17	fix(video): replaces main video link	2021-04-27 18:24:46 +01:00
Dimitrie Stefanescu	e42d3680b2	fix(about page): authors (specklers) now displayed in correct historical order	2021-04-25 20:47:42 +01:00
Dimitrie Stefanescu	baadedc94b	feat(index): adds what is speckle video	2021-04-25 20:47:08 +01:00
Dimitrie Stefanescu	69428381f8	Merge pull request #8 from specklesystems/dim fix(model loading): 3d model was not loading, fixed with new url	2021-03-30 09:39:51 +01:00
Dimitrie Stefanescu	cdd5c93766	Merge pull request #7 from specklesystems/dim Dim	2021-03-23 19:10:34 +00:00
Dimitrie Stefanescu	e96ff21f98	Merge pull request #4 from specklesystems/dim Dim	2021-02-10 19:06:20 +00:00
Dimitrie Stefanescu	aaa143b6a1	Merge pull request #2 from specklesystems/dim Dim	2021-02-07 18:15:56 +00:00
				`@@ -0,0 +1 @@`
				`import Swiper from"swiper/bundle";console.log("hello");`