Merge pull request #138 from lhein/testimonials

refactoring the testimonials section
KaotoIO · Jan 28, 2025 · 92ea6a4 · 92ea6a4
2 parents 40d5a7e + ae89990
commit 92ea6a4
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 4 deletions.
diff --git a/assets/css/default.css b/assets/css/default.css
@@ -0,0 +1,7 @@
+.slideshow-section .item {
+  display: none;
+}
+.slideshow-section .item:first-child {
+  display: block;
+}
+/* ...existing code... */
diff --git a/content/_index.md b/content/_index.md
@@ -88,14 +88,16 @@ sections:
     design:
       css_class: "light"
 
-  - block: testimonials
+  # Rename custom section to slideshow
+  - block: slideshow
+    id: slideshow-section
     content:
       title: Integration Developers Feedback
       text: See what our users have to say
       items:
         - name: "Richard Stroop"
           role: "High Wizard of Integration at Red Hat"
-          image: "people/richard_s.png"
+          image: "media/people/richard_s.png"
           text: "It's come so far and it's so good now!"
     design:
       css_class: "dark"

diff --git a/hugo-blox/blox/community/slideshow.html b/hugo-blox/blox/community/slideshow.html
@@ -0,0 +1,42 @@
+{{/* Hugo Blox: Slideshow Section */}}
+{{/* Documentation: https://hugoblox.com/blocks/ */}}
+{{/* License: https://github.com/HugoBlox/hugo-blox-builder/blob/main/LICENSE.md */}}
+
+{{/* Initialise */}}
+{{ $page := .wcPage }}
+{{ $block := .wcBlock }}
+<div class="slideshow-section {{ $block.design.css_class }}" style="background-color: {{ $block.design.background.color }};">
+  <div class="container mx-auto py-12">
+    {{ with $block.content.title }}
+    <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white text-center">{{ . | markdownify }}</h2>
+    {{ end }}
+    {{ with $block.content.text }}
+    <p class="text-gray-500 sm:text-xl dark:text-gray-400 text-center">{{ . | $page.RenderString | emojify }}</p>
+    {{ end }}
+    <div class="mt-8 grid grid-cols-1 gap-8">
+      {{ range $block.content.items }}
+        <div class="item text-center" style="display: none;">
+            <div class="max-w-screen-md mx-auto ">
+                <svg class="h-16 mx-auto mb-3 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
+                  <path d="M9.563 8.469l-0.813-1.25c-5.625 3.781-8.75 8.375-8.75 12.156 0 3.656 2.688 5.375 4.969 5.375 2.875 0 4.906-2.438 4.906-5 0-2.156-1.375-4-3.219-4.688-0.531-0.188-1.031-0.344-1.031-1.25 0-1.156 0.844-2.875 3.938-5.344zM21.969 8.469l-0.813-1.25c-5.563 3.781-8.75 8.375-8.75 12.156 0 3.656 2.75 5.375 5.031 5.375 2.906 0 4.969-2.438 4.969-5 0-2.156-1.406-4-3.313-4.688-0.531-0.188-1-0.344-1-1.25 0-1.156 0.875-2.875 3.875-5.344z"/>
+                </svg>
+                <blockquote>
+                  <p class="text-2xl font-medium text-gray-900 dark:text-white">"{{ .text }}"</p>
+                </blockquote>
+                {{ $img := resources.Get .image }}
+                <div class="flex items-center justify-center mt-6 space-x-3">
+                    {{ if $img }}
+                    <img class="w-12 h-12 rounded-full" src="{{ $img.RelPermalink }}" alt="{{ .name }}"/>
+                    {{ end }}
+                    <div class="flex flex-col items-center">
+                        <div class="pr-3 font-medium text-gray-900 dark:text-white">{{ .name }}</div>
+                        <div class="pl-3 text-sm font-light text-gray-500 dark:text-gray-400">{{ .role }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+      {{ end }}
+    </div>
+  </div>
+</div>
+
diff --git a/hugo_stats.json b/hugo_stats.json
@@ -90,7 +90,7 @@
       "blox-features",
       "blox-hero2",
       "blox-markdown",
-      "blox-testimonials",
+      "blox-slideshow",
       "border",
       "border-current",
       "border-dotted",
@@ -183,6 +183,7 @@
       "gap-x-6",
       "gap-y-2",
       "grid",
+      "grid-cols-1",
       "group",
       "group-hover:-translate-x-[2px]",
       "group-hover:bg-[length:100%_10px]",
@@ -234,6 +235,7 @@
       "inline-flex",
       "inset-0",
       "isolate",
+      "item",
       "items-center",
       "justify-between",
       "justify-center",
@@ -328,6 +330,7 @@
       "mt-4",
       "mt-5",
       "mt-6",
+      "mt-8",
       "mt-[-0.3rem]",
       "mt-[0.1rem]",
       "mx-1",
@@ -425,6 +428,7 @@
       "shadow-sm",
       "shrink-0",
       "sidebar-active-item",
+      "slideshow-section",
       "sm:flex",
       "sm:justify-center",
       "sm:mb-8",
@@ -610,14 +614,14 @@
       "search",
       "search_toggle",
       "section-hero2",
-      "section-testimonials",
       "share-link-email",
       "share-link-facebook",
       "share-link-linkedin",
       "share-link-whatsapp",
       "share-link-x",
       "show-button",
       "site-header",
+      "slideshow-section",
       "solution",
       "solution-1",
       "solution-2",

diff --git a/layouts/partials/hooks/body-end/custom.html b/layouts/partials/hooks/body-end/custom.html
@@ -0,0 +1,21 @@
+<!-- ...existing code... -->
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const items = document.querySelectorAll('.slideshow-section .item');
+    let currentIndex = 0;
+
+    function showItem(index) {
+      items.forEach((item, i) => {
+        item.style.display = i === index ? 'block' : 'none';
+      });
+    }
+
+    function nextItem() {
+      currentIndex = (currentIndex + 1) % items.length;
+      showItem(currentIndex);
+    }
+
+    showItem(currentIndex);
+    setInterval(nextItem, 10000); // Change item every 10 seconds
+  });
+</script>