From 7308abb550f1b0bca27d3bfc42b19a4857593cd1 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Tue, 29 Jun 2021 17:27:56 +0100
Subject: [PATCH] feat(swiper): now has buttons

---
 partials/interop/connectorTagCards.hbs |   6 +-
 partials/landing/connectorsPreview.hbs | 263 ++++++++++---------------
 2 files changed, 103 insertions(+), 166 deletions(-)

diff --git a/partials/interop/connectorTagCards.hbs b/partials/interop/connectorTagCards.hbs
index ee927fb..85e177f 100644
--- a/partials/interop/connectorTagCards.hbs
+++ b/partials/interop/connectorTagCards.hbs
@@ -6,7 +6,7 @@
       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:-[features,developers,careers,blog,tutorials]"}}
+      filter="slug:[rhino,grasshopper,revit,dynamo,excel,blender,autocad,civil3d,unity,unreal]"}}
       {{#foreach tags }}
       <option value="{{name}}">{{name}}</option>
       {{/foreach}}
@@ -17,7 +17,7 @@
       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:-[features,developers,careers,blog,tutorials]"}}
+      filter="slug:[rhino,grasshopper,revit,dynamo,excel,blender,autocad,civil3d,unity,unreal]"}}
       {{#foreach tags }}
       <option value="{{name}}">{{name}}</option>
       {{/foreach}}
@@ -34,7 +34,7 @@
 <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:-[features,developers,careers,blog,tutorials]"}}
+  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}}
diff --git a/partials/landing/connectorsPreview.hbs b/partials/landing/connectorsPreview.hbs
index 3f2dbe1..d400768 100644
--- a/partials/landing/connectorsPreview.hbs
+++ b/partials/landing/connectorsPreview.hbs
@@ -10,179 +10,116 @@
         {{/foreach}}
         {{/get}}
       </a>
-      {{!-- <h1>Why <span class='text-blue-500'>Speckle?</span></h1> --}}
-      {{!-- <p>Speckle goes beyond point-to-point interoperability: it's data infrastructure for the built environment.
-      </p> --}}
     </div>
   </div>
 
-
-
-  {{!-- <div class="bg-gradient-to-t from-transparent dark:to-gray-900 to-gray-200 pt-20"> --}}
-    <div class="relative transform perspective-700 dark:bg-gray-900 bg-gray-200 pt-10 z-0">
-      <div class="swiper-container connector-swiper mx-auto">
-        <div class="swiper-wrapper mb-10">
-          <div
-            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="{{asset 'images/rhino.png'}}">
-            <p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
-              Rhino
-            </p>
-          </div>
-          <div
-            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 object-contain"
-              src="{{asset 'images/gh.png'}}">
-            <p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
-              Grasshopper
-            </p>
-          </div>
-
-          {{!-- unccomment in stage 2 --}}
-          {{!-- <div
-            class="swiper-slide group p-2 rounded-xl text-center content-center flex flex-wrap justify-center h-auto transform opacity-90 hover:opacity-100 scale-75 hover:scale-90 transition bg-blue-500 text-white">
-            <a href="/features/connectors" class="flex flex-col text-center w-full text-xl items-center justify-center">
-              All <span class="hidden md:inline-block">Connectors</span>
-            </a>
-          </div> --}}
-
-
-          <div
-            class="swiper-slide group dark:text-gray-200 text-gray-600 p-2 text-center content-center flex flex-wrap justify-center"
-            style="">
-            <img class="mx-auto w-32 transition-transform transform group-hover:scale-110"
-              src="{{asset 'images/revit.png'}}">
-            <p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
-              Revit
-            </p>
-          </div>
-
-
-          <div
-            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="{{asset 'images/dyn.png'}}">
-            <p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
-              Dynamo
-            </p>
-          </div>
-          <div
-            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="{{asset 'images/unity.png'}}">
-            <p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
-              Unity
-            </p>
-          </div>
-          <div
-            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="{{asset 'images/blender.png'}}">
-            <p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
-              Blender
-            </p>
-          </div>
-          <div
-            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="{{asset 'images/acad.png'}}">
-            <p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
-              Autocad & Civil3D
-            </p>
-          </div>
-          <div
-            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="{{asset 'images/unreal.png'}}">
-            <p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
-              Unreal
-            </p>
-          </div>
-          <div
-            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="{{asset 'images/excel.png'}}">
-            <p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
-              Excel
-            </p>
-          </div>
-        </div>
-        <div class="swiper-pagination mt-10"></div>
-      </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"
+  <div class="relative transform perspective-700 dark:bg-gray-900 bg-gray-200 pt-10 z-0 flex">
+    <div id="prev"
+      class="xxx-swiper-button-next flex-shrink transition text-blue-500 flex bg-none dark:hover:bg-gray-800 hover:bg-gray-100 opacity-10 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="M19 9l-7 7-7-7" />
+        <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 mx-auto max-w-7xl flex-grow">
+      <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="xxx-swiper-button-next flex-shrink transition text-blue-500 flex bg-none dark:hover:bg-gray-800 hover:bg-gray-100 opacity-10 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="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
+  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>
 
-  <script>
-    window.addEventListener('load', (event) => {
-      let swiper = new Swiper(".connector-swiper", {
-        slidesPerView: 3,
-        spaceBetween: 20,
-        loop: true,
-        grabCursor: true,
-        pagination: {
-          el: ".swiper-pagination",
-          clickable: true
+<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,
         },
-        autoplay: {
-          delay: 4000,
-          disableOnInteraction: false,
-          pauseOnMouseEnter: true
-        },
-        breakpoints: {
-          768: {
-            slidesPerView: 5,
-            spaceBetween: 50,
-          },
-          1280: {
-            slidesPerView: 7,
-            spaceBetween: 50,
-          }
+        1280: {
+          slidesPerView: 7,
+          spaceBetween: 50,
         }
-      })
-
-      if (window.innerWidth >= 1280)
-        swiper.slideTo(6, false, false)
+      }
     })
-  </script>
\ No newline at end of file
+
+    swiper.slideTo(6, 1000)
+
+    document.getElementById('prev').onclick = function () {
+      swiper.slidePrev(200)
+    }
+
+    document.getElementById('next').onclick = function () {
+      swiper.slideNext(200)
+    }
+  })
+</script>
\ No newline at end of file