timeline cards

Author: arupgsh

content/english/sections/testimonial.md

@@ -5,28 +5,28 @@ description: "Previous events"
 
 # Testimonials
 testimonials:
-  - name: "Nordic Women in Tech Awards (NWiTA) (13 November)"
-    designation: "2024"
+  - name: "Nordic Women in Tech Awards (NWiTA)"
+    designation: "2024 • 13 November"
     avatar: "/images/timeline/1.jpg"
     content: "Awards Ceremony organized by NWiTA team including Nazeefa Fatima (NCB, Norway)"
 
-  - name: "NCB Week 2024 (4-8 November)"
-    designation: "2024"
+  - name: "NCB Week 2024"
+    designation: "2024 • 4-8 November"
     avatar: "/images/timeline/NCB_Finland_2024_Square.png"
     content: "Hybrid conference organized by Marcel Tarbier (Sweden) and Ahmed Mohamed Eltourkey (Finland)"
 
-  - name: "NCB Week 2023 (6-10 November)"
-    designation: "2023"
+  - name: "NCB Week 2023"
+    designation: "2023 • 6-10 November"
     avatar: "/images/timeline/NCB_Finland_2023_Square.png"
     content: "Hybrid conference organized by Shilpa Garg (Denmark), Ahmed Mohamed Eltourkey (Finland), Luca Giudice (Finland), and Marcel Tarbier (Sweden)"
 
-  - name: "Norwegian Bioinformatics Days (28-30 September)"
-    designation: "2022"
+  - name: "Norwegian Bioinformatics Days"
+    designation: "2022 • 28-30 September"
     avatar: "/images/timeline/4.jpg"
     content: "Conference organized by Nordic CompBio, Centre for Digital Life Norway, Computational Biology Unit (University of Bergen), ELIXIR Norway, and RSG Norway."
 
-  - name: "Handling Pandemic Omics Data in the Nordics (18-19 May)"
-    designation: "2022"
+  - name: "Handling Pandemic Omics Data in the Nordics"
+    designation: "2022 • 18-19 May"
     avatar: "/images/timeline/3.jpg"
     content: "Virtual meeting organized by Nordic CompBio, ELIXIR Norway, ELIXIR Estonia and SciLifeLab Data Centre."
 

themes/hugoplate/assets/js/main.js

@@ -17,7 +17,7 @@
         slidesPerView: 2,
       },
       992: {
-        slidesPerView: 3,
+        slidesPerView: 4,
       },
     },
   });

themes/hugoplate/layouts/index.html

@@ -104,33 +104,26 @@ <h2 class="mb-4">
               <div class="swiper testimonial-slider">
                 <div class="swiper-wrapper">
                   {{ range .Params.testimonials }}
-                    <div class="swiper-slide">
+                    <div class="swiper-slide h-auto">
                       <div
-                        class="bg-light dark:bg-darkmode-light rounded-lg px-7 py-10">
-                        <div class="text-text-dark dark:text-white">
-                          <svg
-                            width="33"
-                            height="20"
-                            viewBox="0 0 33 20"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg">
-                            <path
-                              d="M1.28375 19.41L0.79375 18.64C1.21375 17.0067 1.75042 15.07 2.40375 12.83C3.05708 10.5433 3.75708 8.28 4.50375 6.04C5.29708 3.75333 6.06708 1.77 6.81375 0.0899959H15.3538C14.9338 2.09666 14.4904 4.26667 14.0238 6.6C13.5571 8.88666 13.1371 11.15 12.7638 13.39C12.4371 15.5833 12.1571 17.59 11.9238 19.41H1.28375ZM31.69 0.0899959L32.18 0.859998C31.76 2.54 31.2233 4.5 30.57 6.74C29.9167 8.98 29.2167 11.2433 28.47 13.53C27.7233 15.77 26.9533 17.73 26.16 19.41H17.69C18.0167 17.9167 18.3433 16.33 18.67 14.65C18.9967 12.9233 19.3 11.22 19.58 9.54C19.9067 7.81333 20.1867 6.15667 20.42 4.57C20.7 2.93666 20.91 1.44333 21.05 0.0899959H31.69Z"
-                              fill="currentColor" />
-                          </svg>
+                        class="bg-light dark:bg-darkmode-light rounded-lg overflow-hidden h-full min-h-[300px] flex flex-col">
+                        <div class="overflow-hidden">
+                          {{ partial "image" (dict "Src" .avatar "Size" "360x180" "Class" "w-full object-cover" "Alt" .name) }}
                         </div>
-                        <blockquote class="mt-8">
-                          {{ .content | markdownify }}
-                        </blockquote>
-                        <div class="mt-11 flex items-center">
-                          <div class="text-text-dark dark:text-white">
-                            {{ partial "image" (dict "Src" .avatar "Size" "50x50" "Class" "rounded-full" "Alt" .name) }}
+                        <div class="px-4 pt-3">
+                          <blockquote class="text-[11px] m-0 leading-snug">
+                            {{ .content | markdownify }}
+                          </blockquote>
+                        </div>
+                        <div class="mt-auto px-4 pb-4 pt-4 flex items-center">
+                          <div class="text-primary dark:text-darkmode-primary text-xl leading-none">
+                            <i class="fa-regular fa-font-awesome" aria-hidden="true"></i>
                           </div>
-                          <div class="ml-4">
-                            <h3 class="h5 font-primary font-semibold">
+                          <div class="ml-2">
+                            <h3 class="text-[11px] font-primary font-semibold leading-tight">
                               {{ .name }}
                             </h3>
-                            <p class="text-text-dark dark:text-white">
+                            <p class="text-[10px] leading-tight text-text-dark dark:text-white">
                               {{ .designation | markdownify }}
                             </p>
                           </div>