From 35d5eed8fe9569e36207e2ab68f079d64bfb3942 Mon Sep 17 00:00:00 2001
From: Chaoming Li <email@chaoming.li>
Date: Mon, 18 Nov 2024 10:56:06 +1100
Subject: [PATCH] feat: add client logos shortcode with animation toggle

---
 layouts/index.html                   | 10 ----
 layouts/shortcodes/client-logos.html | 71 ++++++++++++++++++++++++++++
 2 files changed, 71 insertions(+), 10 deletions(-)
 create mode 100644 layouts/shortcodes/client-logos.html

diff --git a/layouts/index.html b/layouts/index.html
index d1824ad..caef66f 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -4,16 +4,6 @@
     {{ .Content }}
 {{ end }}
 
-<!-- Client Logos -->
-<section class="border-y border-gray-100">
-    <div class="container py-12">
-        <p class="text-center text-sm font-medium text-gray-600 mb-8">Trusted by leading companies worldwide</p>
-        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 items-center justify-items-center opacity-70">
-            <img src="{{ "images/client-logo-1.svg" | relURL }}" alt="Client Logo" class="h-8">
-        </div>
-    </div>
-</section>
-
 <!-- Feature Sections -->
 <section class="section">
     <div class="container">
diff --git a/layouts/shortcodes/client-logos.html b/layouts/shortcodes/client-logos.html
new file mode 100644
index 0000000..b68bdef
--- /dev/null
+++ b/layouts/shortcodes/client-logos.html
@@ -0,0 +1,71 @@
+<section class="border-y border-gray-100 overflow-hidden">
+    <div class="py-12">
+        <p class="text-center text-sm font-medium text-gray-600 mb-8">{{ .Get "title" | default "Trusted by leading companies worldwide" }}</p>
+        <div class="logo-scroll{{ if eq (.Get "animate" | default "true") "false" }} static{{ end }}">
+            <div class="logos-slide{{ if ne (.Get "animate" | default "true") "false" }} animate{{ end }}">
+                {{ range .Page.Params.client_logos }}
+                <img src="{{ .logo | relURL }}" alt="{{ .name }}" />
+                {{ end }}
+                {{ if ne (.Get "animate" | default "true") "false" }}
+                    {{ range .Page.Params.client_logos }}
+                    <img src="{{ .logo | relURL }}" alt="{{ .name }}" />
+                    {{ end }}
+                {{ end }}
+            </div>
+        </div>
+    </div>
+</section>
+
+<style>
+.logo-scroll {
+    overflow: hidden;
+    padding: 20px 0;
+    white-space: nowrap;
+    position: relative;
+}
+
+.logo-scroll.static {
+    display: flex;
+    justify-content: center;
+    overflow: visible;
+}
+
+.logo-scroll.static .logos-slide {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 40px;
+}
+
+.logos-slide {
+    display: inline-block;
+}
+
+.logos-slide.animate {
+    animation: 30s slide infinite linear;
+}
+
+.logos-slide img {
+    height: 32px;
+    margin: 0 40px;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.logo-scroll.static .logos-slide img {
+    margin: 0;
+}
+
+@keyframes slide {
+    from {
+        transform: translateX(0);
+    }
+    to {
+        transform: translateX(-50%);
+    }
+}
+
+.logo-scroll:hover .logos-slide.animate {
+    animation-play-state: paused;
+}
+</style>