From d5895dc0dbc605ad988625bdbc5c304102257dfa Mon Sep 17 00:00:00 2001
From: Chaoming Li <email@chaoming.li>
Date: Mon, 18 Nov 2024 15:23:01 +1100
Subject: [PATCH] feat: convert testimonials section into reusable shortcode
 with animation support

---
 layouts/index.html                   | 23 --------
 layouts/shortcodes/testimonials.html | 88 ++++++++++++++++++++++++++++
 2 files changed, 88 insertions(+), 23 deletions(-)
 create mode 100644 layouts/shortcodes/testimonials.html

diff --git a/layouts/index.html b/layouts/index.html
index 339147f..f495df1 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -4,29 +4,6 @@
     {{ .Content }}
 {{ end }}
 
-<!-- Testimonials -->
-<section class="section bg-gray-50">
-    <div class="container">
-        <div class="text-center max-w-3xl mx-auto mb-16">
-            <h2 class="text-3xl md:text-4xl font-bold mb-6">Loved by Teams Worldwide</h2>
-            <p class="text-xl text-gray-600">See what our customers have to say about their experience with our platform.</p>
-        </div>
-
-        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-            <div class="card">
-                <div class="flex items-center space-x-4 mb-6">
-                    <img src="{{ "images/testimonial-1.svg" | relURL }}" alt="Testimonial" class="w-12 h-12 rounded-full">
-                    <div>
-                        <h4 class="font-bold">John Smith</h4>
-                        <p class="text-gray-600">Product Manager at Company</p>
-                    </div>
-                </div>
-                <p class="text-gray-600">"This platform has transformed how we understand our users. The insights we've gained have been invaluable for our product development."</p>
-            </div>
-        </div>
-    </div>
-</section>
-
 <!-- CTA Section -->
 <section class="section bg-primary-600">
     <div class="container">
diff --git a/layouts/shortcodes/testimonials.html b/layouts/shortcodes/testimonials.html
new file mode 100644
index 0000000..60e48d0
--- /dev/null
+++ b/layouts/shortcodes/testimonials.html
@@ -0,0 +1,88 @@
+<section class="section bg-gray-50">
+    <div class="container">
+        <div class="text-center max-w-3xl mx-auto mb-16">
+            <h2 class="text-3xl md:text-4xl font-bold mb-6">{{ .Get "title" | default "Loved by Teams Worldwide" }}</h2>
+            <p class="text-xl text-gray-600">{{ .Get "description" | default "See what our customers have to say about their experience with our platform." }}</p>
+        </div>
+
+        <div class="testimonials-container overflow-hidden">
+            <div class="testimonials-track{{ if ne (.Get "animate" | default "true") "false" }} animate{{ end }}">
+                {{ range .Page.Params.testimonials }}
+                <div class="testimonial-card">
+                    <div class="flex items-center space-x-4 mb-6">
+                        <img src="{{ .avatar | relURL }}" alt="{{ .name }}" class="w-12 h-12 rounded-full">
+                        <div>
+                            <h4 class="font-bold">{{ .name }}</h4>
+                            <p class="text-gray-600">{{ .title }}</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-600">{{ .quote }}</p>
+                </div>
+                {{ end }}
+                {{ if ne (.Get "animate" | default "true") "false" }}
+                    {{ range .Page.Params.testimonials }}
+                    <div class="testimonial-card">
+                        <div class="flex items-center space-x-4 mb-6">
+                            <img src="{{ .avatar | relURL }}" alt="{{ .name }}" class="w-12 h-12 rounded-full">
+                            <div>
+                                <h4 class="font-bold">{{ .name }}</h4>
+                                <p class="text-gray-600">{{ .title }}</p>
+                            </div>
+                        </div>
+                        <p class="text-gray-600">{{ .quote }}</p>
+                    </div>
+                    {{ end }}
+                {{ end }}
+            </div>
+        </div>
+    </div>
+</section>
+
+<style>
+.testimonials-container {
+    padding: 20px 0;
+    position: relative;
+}
+
+.testimonials-container.static {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    overflow: visible;
+}
+
+.testimonials-track {
+    display: flex;
+    gap: 2rem;
+}
+
+.testimonials-track.animate {
+    animation: 40s testimonials-scroll infinite linear;
+}
+
+.testimonial-card {
+    flex: 0 0 auto;
+    width: 300px;
+    background: white;
+    padding: 2rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.testimonials-container.static .testimonial-card {
+    width: 100%;
+}
+
+@keyframes testimonials-scroll {
+    from {
+        transform: translateX(0);
+    }
+    to {
+        transform: translateX(calc(-100% / 2));
+    }
+}
+
+.testimonials-container:hover .testimonials-track.animate {
+    animation-play-state: paused;
+}
+</style>