feat(landing): refactors landing page

index.hbs

@@ -1,74 +1,23 @@
 {{!< default}}
 
-<div class="absolute inset-0 pt-32 opacity-20 h-4/6">
-{{> extras/duper }}
-</div>
-
-<main class="relative z-1 h-screen sm:h-screen/2 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 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 text-gray-800 dark:text-gray-200 sm:text-lg md:text-xl md:max-w-6xl mt-10">
-      Leading AEC companies, designers and developers use
-      <span class="">Speckle</span> for
-      interoperability, design automation and
-      data management.
-    </p>
-    <div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
-      <div class="rounded-xl shadow">
-        <a href="/beta" class="w-full 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">
-          Join the Beta
-        </a>
-      </div>
-    </div>
-  </div>
-</main>
-
-{{> logos }}
-
-<div class="w-default container my-10 mx-auto sm:mt-24">
-  <h3 class="text-xl my-2 text-blue-600">Why Speckle</h3>
-  <h1 class="text-3xl dark:text-white">Interoperability &
-    Collaboration</h1>
-  <p class="dark:text-white">Designers, architects and
-    engineers use Speckle to Action 1, Action 2, Action
-    3.</p>
-  <div class="grid grid-cols-2 gap-4 mt-10">
-    <div class="p-3 h-screen/2 text-center col-span-2 dark:text-white bg-white dark:bg-gray-900 rounded-xl transition shadow hover:shadow-xl flex justify-center content-center">
-      <p>Interoperability: we support many things, with
-        more
-        to come.</p>
-    </div>
-    <div class="p-3 h-80 dark:text-white bg-white dark:bg-gray-900 rounded-xl transition shadow hover:shadow-xl flex items-center">
-      Real Time Collaboration: fast and snappy. No more
-      endless waits for syncing with central.
-    </div>
-    <div class="p-3 h-80 dark:text-white bg-white dark:bg-gray-900 rounded-xl transition shadow hover:shadow-xl flex items-center">
-      Curate the data you need: say goodbye to files.
-    </div>
-  </div>
-</div>
-
-<div class="h-screen/2 dark:text-white flex flex-wrap content-center justify-center items-center mx-auto max-w-5xl px-10 lg:px-24 sm:mt-24">
-  <p class="text-center max-w-prose w-full text-xl py-10">
-    Open Source:
-  </p>
-  <h1 class="text-6xl mb-10 w-3/3">
-    Your Design. <span class="font-bold text-gradient bg-gradient-to-r from-blue-500 to-blue-700">Your
-      Data.</span>
-  </h1>
-  <p class="text-justify max-w-prose w-3/3">Speckle is
-    Open Source, so you always have a choice and can
-    adapt it to any data sovereignty requirements. You
-    can deploy it on your favourite cloud provider's
-    infrastructure, or on premise, under your
-    supervision.
-  </p>
+<div class="absolute inset-0 pt-5 md:pt-24 opacity-20 dark:opacity-10 h-6/6 md:h-4/6">
+  {{> extras/duper }}
 </div>
 
 
-<div class="bg-gradient-to-r from-blue-800 to-blue-500 dark:to-blue-900 text-white py-10">
+{{> landing/header }}
+
+{{> landing/logos }}
+
+{{> landing/features-wide }}
+
+{{> cardCTA }}
+
+{{> landing/opensource }}
+
+
+
+<div class="">
   <div class="w-default container my-10 pt-10">
     <div class="grid grid-cols-2 gap-4 mt-10">
       <div class="p-3 dark:text-white">

page-about.hbs

@@ -1,7 +1,7 @@
 {{!< default}}
 
-<div class="absolute inset-0 pt-32 opacity-20 h-4/6">
-{{> extras/super }}
+<div class="absolute inset-0 pt-32 opacity-20 h-5/6">
+  {{> extras/super }}
 </div>
 
 <article class="relative">
@@ -9,19 +9,49 @@
   <div class="w-default">
     {{#post}}
 
-      <div class="page-about-content w-3/3 md:w-2/3 mt-12 text-gray-700 dark:text-gray-300 text-2xl md:text-5xl">
-
-        Speckle is open source digital infrastructure for
-        the built environment. We handle interoperability
-        between software silos, real time collaboration,
-        data management, versioning and automation.
-
+      <div class="page-about-content w-3/3 md:w-2/3 mt-12 text-gray-700 dark:text-gray-300">
+        <p class="text-2xl md:text-5xl">
+          Speckle is open source digital infrastructure for
+          the built environment. We handle interoperability
+          between software silos, real time collaboration,
+          data management, versioning and automation.
+        </p>
+        <div class="relative mt-12 rounded-2xl overflow-hidden flex col-span-1 transition hover:shadow-2xl p-5 py-10 bg-white dark:bg-gray-900">
+          <a href="/usecases" class="flex w-full h-full">
+            <div class="block self-center">
+              <div class="text-3xl font-semibold text-blue-600">
+                Use cases →
+              </div>
+              <p class="dark:text-gray-300">Interoperability
+                &
+                more: a few reasons why people use Speckle.</p>
+            </div>
+          </a>
+        </div>
       </div>
-      <div class="page-about-content w-3/3 md:w-2/3 ml-auto mr-0 mt-12 text-gray-700 dark:text-gray-300 text-2xl md:text-4xl text-left md:text-right">
+      <div class="page-about-content w-3/3 md:w-2/3 ml-auto mr-0 mt-12 text-gray-700 dark:text-gray-300  text-left">
 
-        Our mission is to revolutionise the AEC industry's
-        digital performance and accelerate the pace of
-        innovation.
+        <p class="text-2xl md:text-4xl text-justify">
+          Our mission is to revolutionise the AEC
+          industry's
+          digital performance and accelerate the pace of
+          innovation.
+        </p>
+
+        <div class="relative rounded-2xl mt-12 overflow-hidden flex col-span-1 transition hover:shadow-2xl p-5 py-10 bg-white dark:bg-gray-900">
+          <a href="/developers" class="flex w-full h-full">
+            <div class="block self-center">
+              <div class="text-3xl font-semibold text-blue-600">
+                For Developers →
+              </div>
+              <p class="dark:text-gray-300">Want to build
+                the
+                pipelines and apps modern AEC companies
+                need?
+                Read on.</p>
+            </div>
+          </a>
+        </div>
 
       </div>
 
@@ -35,7 +65,7 @@
 
   <div class="w-default mt-20 grid grid-cols-1 sm:grid-cols-2 gap-5 md:gap-20">
 
-    <div class="relative h-screen/4 rounded-2xl overflow-hidden flex col-span-1 transition hover:shadow-2xl p-5 bg-white dark:bg-gray-900">
+    {{!--     <div class="relative h-screen/4 rounded-2xl overflow-hidden flex col-span-1 transition hover:shadow-2xl p-5 bg-white dark:bg-gray-900">
       <a href="/usecases" class="flex w-full h-full">
         <div class="block self-center">
           <div class="text-3xl font-semibold text-blue-600">
@@ -45,22 +75,9 @@
             more: a few reasons why people use Speckle.</p>
         </div>
       </a>
-    </div>
+    </div> --}}
 
 
-    <div class="relative h-screen/4 rounded-2xl overflow-hidden flex col-span-1 transition hover:shadow-2xl p-5 bg-white dark:bg-gray-900">
-      <a href="/developers" class="flex w-full h-full">
-        <div class="block self-center">
-          <div class="text-3xl font-semibold text-blue-600">
-            For Developers →
-          </div>
-          <p class="dark:text-gray-300">Want to build the
-            pipelines and apps modern AEC companies need?
-            Read on.</p>
-        </div>
-      </a>
-    </div>
-
   </div>
 
   <div class="w-default mt-20 text-gray-700 dark:text-gray-300 text-center">

partials/cardFancySmallNoImage.hbs

@@ -0,0 +1,23 @@
+<div class="relative py-20 rounded-xl shadow hover:shadow-2xl bg-white transition overflow-hidden flex col-span-2 md:col-span-1">
+  <a href="{{url}}" class="self-center">
+    <div class="absolute inset-0 h-full w-full block bg-blue-500">&nbsp;</div>
+    <div class="absolute inset-0 bg-blue-500" style="mix-blend-mode: multiply;"></div>
+    <div class="absolute inset-0 bg-gradient-to-t from-blue-600 via-blue-600 opacity-90"></div>
+    <div class="relative px-8">
+      <div class="text-3xl font-semibold text-gray-100 dark:text-gray-100">
+        {{title}}
+      </div>
+      <div class="relative text-lg text-white md:flex-grow">
+        <p class="relative line-clamp-2 md:line-clamp-3 text-sm">
+          {{excerpt}}
+        </p>
+      </div>
+      <div class="mt-4">
+        <p class="text-base font-semibold text-blue-200">
+          Read More
+        </p>
+      </div>
+
+    </div>
+  </a>
+</div>

partials/extras/duper.hbs

@@ -3,21 +3,8 @@
   xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
   xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
   <g transform="matrix(1,0,0,1,-4297.45,-7937.98)">
-    <g transform="matrix(1.02298,0,0,1.02298,5131.58,-118.013)">
-      <g transform="matrix(0.0750475,-0.0433287,4.81984e-17,1.23407,-960.541,188.297)">
-        <rect x="2560" y="6508.18" width="192" height="55.426"
-          style="fill:rgb(122,188,255);" />
-      </g>
-      <g transform="matrix(0.244629,0.141237,-3.86669e-17,1.23407,-1441.64,2424.67)">
-        <rect x="2560" y="4291.16" width="192" height="55.426"
-          style="fill:rgb(60,156,255);" />
-      </g>
-      <g transform="matrix(0.0750475,-0.0433287,3.38968,1.95703,-24581.5,-6002.34)">
-        <rect x="-4187" y="7104.01" width="192" height="13.856"
-          style="fill:rgb(233,241,255);" />
-      </g>
-    </g>
-    <g transform="matrix(1,0,0,1,8778.02,-41.3668)">
+
+    <g transform="matrix(1,0,0,1,8778.02,-41.3668)" class="floatFirst">
       <g transform="matrix(0.328223,-0.1895,1.68582e-17,0.498739,-5145.37,5417.49)">
         <rect x="2560" y="6508.18" width="192" height="55.426"
           style="fill:rgb(122,188,255);" />
@@ -143,7 +130,8 @@
           style="fill:rgb(60,156,255);" />
       </g>
     </g>
-    <g transform="matrix(0.637112,0,0,0.637112,5269.19,3311.48)">
+    <g transform="matrix(0.637112,0,0,0.637112,5269.19,3311.48)"
+      class="animate-bounce">
       <g transform="matrix(0.481022,-0.277718,3.68062e-17,0.172121,-2585.9,7291.64)">
         <rect x="2560" y="6508.18" width="192" height="55.426"
           style="fill:rgb(122,188,255);" />
@@ -253,7 +241,8 @@
           style="fill:rgb(233,241,255);" />
       </g>
     </g>
-    <g transform="matrix(1.02298,0,0,1.02298,5131.58,-197.767)">
+    <g transform="matrix(1.02298,0,0,1.02298,5131.58,-197.767)"
+      class="floatSecond">
       <g transform="matrix(0.0750475,-0.0433287,4.81984e-17,1.23407,-960.541,188.297)">
         <rect x="2560" y="6508.18" width="192" height="55.426"
           style="fill:rgb(122,188,255);" />
@@ -268,4 +257,49 @@
       </g>
     </g>
   </g>
-</svg>
+</svg>
+
+<style type="text/css">
+
+@keyframes float {
+  0% {
+
+    transform: matrix(1, 0, 0, 1, 8778.02, -41.3668)
+  }
+
+  50% {
+
+    transform: matrix(1, 0, 0, 1, 8782.02, -31.3668)
+  }
+
+  100% {
+
+    transform: matrix(1, 0, 0, 1, 8778.02, -41.3668)
+  }
+}
+
+@keyframes float_other {
+  0% {
+
+    transform: matrix(1.02298, 0, 0, 1.02298, 5131.58, -197.767)
+  }
+
+  50% {
+
+    transform: matrix(1.02298, 0, 0, 1.02298, 5131.58, -187.767)
+  }
+
+  100% {
+
+    transform: matrix(1.02298, 0, 0, 1.02298, 5131.58, -197.767)
+  }
+}
+
+.floatFirst {
+  animation: float 6s ease-in-out infinite;
+}
+
+.floatSecond {
+  animation: float_other 9s ease-in-out infinite;
+}
+</style>

partials/landing/features-wide.hbs

@@ -0,0 +1,62 @@
+<div x-data="{ featureImageSource: 'https://segment.com/site-assets/f06e5744/images/index/img__phone.svg', default: 'https://segment.com/site-assets/f06e5744/images/index/img__phone.svg' }"
+  class="container my-0 mt-36 mx-auto grid grid-cols-1 lg:grid-cols-2 gap-10">
+
+  <div class="relative h-screen/2-3 xxxopacity-50 flex text-center justify-center align-middle">
+    <img x-bind:src="featureImageSource" class="self-center">
+  </div>
+
+  <div class="relative grid grid-cols-1 gap-4">
+
+    <div class="relative px-5">
+      <h3 class="relative text-xl my-2 text-blue-600">Why
+        Speckle</h3>
+      <p class="relative dark:text-white">Designers,
+        architects
+        and
+        engineers use Speckle to Action 1, Action 2, Action
+        3.
+      </p>
+    </div>
+
+    {{#get "posts" filter="primary_tag:usecases+featured:true" limit="3"}}
+      {{#foreach posts}}
+        {{!-- {{> cardFancySmallNoImage }} --}}
+        <div class="relative rounded-xl h-44 bg-white dark:bg-gray-900 py-15 mb-5 overflow-hidden flex transition hover:shadow-xl"
+          @mouseenter="featureImageSource='{{feature_image}}';">
+          <a href="{{url}}" class="w-full self-center">
+            <div class="relative px-8">
+              <div class="text-3xl font-semibold text-gray-600 dark:text-gray-200">
+                {{title}}
+              </div>
+
+              <div class="relative text-sm md:flex-grow mt-5">
+                <p class="relative text-gray-500 text-clamp-3">
+                  {{excerpt}}
+                </p>
+              </div>
+              <footer class="mt-5">
+                <p class="text-base font-semibold text-blue-500">
+                  Read More
+                </p>
+              </footer>
+            </div>
+          </a>
+        </div>
+      {{/foreach}}
+    {{/get}}
+
+    <div class="relative rounded-xl py-5 hover:rounded-2xl hover:shadow-2xl transition overflow-hidden flex">
+      <a href="/usecases" class="w-full self-center">
+        <div class="relative px-8">
+          <div class="text-3xl font-semibold text-blue-600">
+            All Usecases →
+          </div>
+        </div>
+      </a>
+    </div>
+  </div>
+  {{!--   <div class="relative p-3 h-screen/2 col-span-2 flex text-center justify-center -mt-48">
+    <img src="https://segment.com/site-assets/f06e5744/images/index/img__data-flow.svg">
+    <img src="https://segment.com/site-assets/images/img__call-to-action.svg">
+  </div> --}}
+</div>

partials/landing/features.hbs

@@ -0,0 +1,23 @@
+<div class="w-default container my-10 mx-auto sm:mt-24">
+  <div class="relative p-3 h-screen/2 col-span-2 opacity-50 flex text-center justify-center">
+    {{!-- <img src="https://segment.com/site-assets/f06e5744/images/index/img__data-flow.svg"> --}}
+    <img src="https://segment.com/site-assets/f06e5744/images/index/img__phone.svg">
+  </div>
+  <h3 class="relative text-xl my-2 text-blue-600">Why Speckle</h3>
+  <p class="relative dark:text-white">Designers, architects and
+    engineers use Speckle to Action 1, Action 2, Action
+    3.
+  </p>
+  <div class="relative grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-10">
+
+    {{#get "posts" filter="primary_tag:usecases+featured:true"}}
+    {{#foreach posts}}
+      {{> cardFancySmallNoImage }}
+    {{/foreach}}
+    {{/get}}
+  </div>
+{{!--   <div class="relative p-3 h-screen/2 col-span-2 flex text-center justify-center -mt-48">
+    <img src="https://segment.com/site-assets/f06e5744/images/index/img__data-flow.svg">
+    <img src="https://segment.com/site-assets/images/img__call-to-action.svg">
+  </div> --}}
+</div>

partials/landing/header.hbs

@@ -0,0 +1,20 @@
+<main class="relative z-1 h-screen sm:h-screen/2 flex flex-wrap content-center mx-auto max-w-5xl px-10 lg:px-24">
+  <div class="w-3/3 text-center">
+    <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 text-gray-800 dark:text-gray-200 sm:text-lg md:text-xl md:max-w-6xl mt-10">
+      Leading AEC companies, designers and developers use
+      <span class="">Speckle</span> for
+      interoperability, design automation and
+      data management.
+    </p>
+    <div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
+      <div class="rounded-xl shadow">
+        <a href="/beta" class="w-full 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">
+          Join the Beta
+        </a>
+      </div>
+    </div>
+  </div>
+ </main>

partials/landing/logos.hbs

@@ -1,5 +1,6 @@
-<div class="container my-10 mx-auto max-w-12xl px-10 lg:px-24 sm:mt-24">
-  <div class="text-center text-gray-300 dark:text-gray-600 pb-10">
+<div class="relative w-default container my-10 mx-auto mt-10 sm:mt-24 bg-white dark:bg-gray-800 p-10 rounded-xl shadow-xl">
+  <h3 class="text-xl my-2 text-blue-600">Who uses Speckle</h3>
+  <div class="text-gray-500 pb-10">
     Speckle was seen in the wild at
   </div>
   <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 text-gray-500 dark:text-gray-600">

partials/landing/opensource.hbs

@@ -0,0 +1,21 @@
+{{!-- <div class="bg-gradient-to-r from-blue-800 to-blue-500 dark:to-blue-900 text-white py-10"> --}}
+<div class="bg-blue-100 dark:bg-gray-900 shadow-inner">
+  <div class="w-default h-screen/2 dark:text-white flex flex-wrap content-center justify-center items-center">
+    <p class="text-center max-w-prose w-full text-xl">
+      Open Source:
+    </p>
+    <h1 class="text-6xl my-10 w-3/3">
+      Your Design.
+      <span class="font-bold">
+        Your Data.
+      </span>
+    </h1>
+    <p class="text-justify max-w-prose w-3/3">Speckle is
+      Open Source, so you always have a choice and can
+      adapt it to any data sovereignty requirements. You
+      can deploy it on your favourite cloud provider's
+      infrastructure, or on premise, under your
+      supervision.
+    </p>
+  </div>
+</div>

partials/menus/learnMenu.hbs

@@ -133,7 +133,6 @@
         <path stroke-linecap="round" stroke-linejoin="round"
           stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
       </svg>
-      {{!-- <img src="{{img_url feature_image size="m"}}"> --}}
     </span>
   </div>
   <div class="flex items-center md:h-full lg:flex-col">
@@ -192,8 +191,6 @@
         <path stroke-linecap="round" stroke-linejoin="round"
           stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
       </svg>
-
-      {{!-- <img src="{{img_url feature_image size="m"}}"> --}}
     </span>
   </div>
   <div class="flex items-center md:h-full lg:flex-col">
@@ -210,4 +207,32 @@
         More <span aria-hidden="true">→</span></p>
     </div>
   </div>
+</a>
+
+<a href="/blog" class="-m-3 p-3 flex flex-col justify-between rounded-lg transition dark:bg-gray-950 hover:bg-blue-100 dark:hover:bg-gray-800">
+  <div class="flex-shrink-0">
+    <span class="inline-flex items-center justify-center h-64 w-64 rounded-md text-gray-500 dark:text-white sm:h-12 sm:w-12">
+      <svg class="h-6 w-6"
+        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 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
+      </svg>
+    </span>
+  </div>
+  <div class="flex items-center md:h-full lg:flex-col">
+    <div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
+      <div>
+        <p class="text-base font-medium text-gray-900 dark:text-gray-50">
+          Github
+        </p>
+        <p class="mt-1 text-sm text-gray-900 dark:text-gray-50">
+          Check out the Speckle source code and give us a star ⭐️
+        </p>
+      </div>
+      <p class="mt-2 text-sm font-medium text-blue-600 lg:mt-4">Read
+        More <span aria-hidden="true">→</span></p>
+    </div>
+  </div>
 </a>