update logos animation

content/about/index.md

@@ -25,6 +25,11 @@ About a decade ago, a group of passionate Internet & cloud veterans came togethe
 
 {% end %}
 
+{% roadmap() %}
+
+## **roadmap**
+
+{% end %}
 
 
 

tailwind.config.js

@@ -51,6 +51,15 @@ module.exports = {
           '2xl': '1450px',
           // => @media (min-width: 992px) { ... }
         },
+        animation: {
+          'infinite-scroll': 'infinite-scroll 25s linear infinite',
+      },
+      keyframes: {
+          'infinite-scroll': {
+              from: { transform: 'translateX(0)' },
+              to: { transform: 'translateX(-100%)' },
+          }
+      }                    
       },
   },
   plugins: [], // if we add forms, do it here

templates/shortcodes/logo_slider.html

@@ -15,7 +15,17 @@
 
   <div class="border-t-2 mb-6 border-gray-200"></div>
 
-  <ul x-ref="logos" class=" my-10 flex items-center justify-center  animate-infinite-scroll">
+  <div
+  x-data="{}"
+  x-init="$nextTick(() => {
+      let ul = $refs.logos;
+      ul.insertAdjacentHTML('afterend', ul.outerHTML);
+      ul.nextSibling.setAttribute('aria-hidden', 'true');
+  })"
+  class="w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_128px,_black_calc(100%-128px),transparent_100%)]"
+>
+
+<ul x-ref="logos" class="flex items-center justify-center md:justify-start [&_li]:mx-8 [&_img]:max-w-none animate-infinite-scroll">
     <li>
         <img src="images/zictia_black.png" alt="Facebook" />
     </li>
@@ -44,6 +54,37 @@
         <img src="images/temple_black.png" alt="Sass" />
     </li>
 </ul> 
+<ul x-ref="logos" class="flex items-center justify-center md:justify-start [&_li]:mx-8 [&_img]:max-w-none animate-infinite-scroll" aria-hidden="true">
+    <li>
+        <img src="images/zictia_black.png" alt="Facebook" />
+    </li>
+    <li>
+        <img src="images/vverse_black.png" alt="Disney" />
+    </li>
+    <li>
+        <img src="images/social_network_black.png" alt="Airbnb" />
+    </li>
+    <li>
+        <img src="images/vevrse_black.png" alt="Apple" />
+    </li>
+    <li>
+        <img src="images/ict_black.png" alt="Spark" />
+    </li>
+    <li>
+        <img src="images/holochain_black.png" alt="Samsung" />
+    </li>
+    <li>
+        <img src="images/sikana_black.png" alt="Quora" />
+    </li>
+    <li>
+        <img src="images/ourworld_black.png" alt="Sass" />
+    </li>
+    <li>
+        <img src="images/temple_black.png" alt="Sass" />
+    </li>
+</ul> 
+
+</div>
 <div class="border-t-2 mt-6 border-gray-200"></div>
 
 

templates/shortcodes/roadmap.html

@@ -0,0 +1,93 @@
+<div class="space-y-8 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent">
+
+    <!-- Item #1 -->
+    <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
+        <!-- Icon -->
+        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
+            <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
+                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
+            </svg>
+        </div>
+        <!-- Card -->
+        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
+            {# <div class="flex items-center justify-between space-x-2 mb-1">
+                <div class="font-bold text-slate-900">Order Placed</div>
+                <time class="font-caveat font-medium text-indigo-500">08/06/2023</time>
+            </div> #}
+            <div class="text-slate-500">Our journey began, with a realization among a group of Internet and Cloud veterans: the existing Internet infrastructure is unsustainable.</div>
+        </div>
+    </div>
+    
+    <!-- Item #2 -->
+    <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
+        <!-- Icon -->
+        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
+            <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
+                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
+            </svg>
+        </div>
+        <!-- Card -->
+        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
+            {# <div class="flex items-center justify-between space-x-2 mb-1">
+                <div class="font-bold text-slate-900">Order Shipped</div>
+                <time class="font-caveat font-medium text-indigo-500">09/06/2023</time>
+            </div> #}
+            <div class="text-slate-500">Our journey began, with a realization among a group of Internet and Cloud veterans: the existing Internet infrastructure is unsustainable.</div>
+        </div>
+    </div>
+    
+    <!-- Item #3 -->
+    <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
+        <!-- Icon -->
+        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
+            <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
+                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
+            </svg>
+        </div>
+        <!-- Card -->
+        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
+            <div class="flex items-center justify-between space-x-2 mb-1">
+                <div class="font-bold text-slate-900">In Transit</div>
+                <time class="font-caveat font-medium text-indigo-500">10/06/2023</time>
+            </div>
+            <div class="text-slate-500">Pretium lectus quam id leo. Urna et pharetra aliquam vestibulum morbi blandit cursus risus.</div>
+        </div>
+    </div>
+    
+    <!-- Item #4 -->
+    <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
+        <!-- Icon -->
+        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
+            <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
+                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
+            </svg>
+        </div>
+        <!-- Card -->
+        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
+            <div class="flex items-center justify-between space-x-2 mb-1">
+                <div class="font-bold text-slate-900">Out of Delivery</div>
+                <time class="font-caveat font-medium text-indigo-500">12/06/2023</time>
+            </div>
+            <div class="text-slate-500">Pretium lectus quam id leo. Urna et pharetra aliquam vestibulum morbi blandit cursus risus.</div>
+        </div>
+    </div>
+    
+    <!-- Item #5 -->
+    <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group">
+        <!-- Icon -->
+        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
+            <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
+                <path d="M12 10v2H7V8.496a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5V12H0V4.496a.5.5 0 0 1 .206-.4l5.5-4a.5.5 0 0 1 .588 0l5.5 4a.5.5 0 0 1 .206.4V10Z" />
+            </svg>
+        </div>
+        <!-- Card -->
+        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
+            <div class="flex items-center justify-between space-x-2 mb-1">
+                <div class="font-bold text-slate-900">Delivered</div>
+                <time class="font-caveat font-medium text-amber-500">Exp. 12/08/2023</time>
+            </div>
+            <div class="text-slate-500">Pretium lectus quam id leo. Urna et pharetra aliquam vestibulum morbi blandit cursus risus.</div>
+        </div>
+    </div>
+
+</div>