finished testimonies!

Author: Inventhrice

layouts/partials/testimonials.html

@@ -2,49 +2,44 @@
 {{ if .Site.Params.testimonials.enable }}
 {{ if isset .Site.Data "testimonials" }}
 {{ if gt (len .Site.Data.testimonials) 0 }}
-<section class="bar background-pentagon no-mb">
-    <div class="container">
+<section class="py-5 bg-pentagon border-top border-gray-600">
+    <div class="container py-4">
         <div class="row">
             <div class="col-md-12">
-                <div class="heading text-center">
-                    <h2>{{ .Site.Params.testimonials.title }}</h2>
-                </div>
+                <h2 class="lined lined-center text-uppercase mb-4">{{ .Site.Params.testimonials.title }}</h2>
 
-                <p class="lead">
+                <p class="lead text-center">
                   {{ .Site.Params.testimonials.subtitle | markdownify }}
                 </p>
 
                 <!-- *** TESTIMONIALS CAROUSEL *** -->
 
-                <ul class="owl-carousel testimonials same-height-row"
-                    data-items="{{ default 4 .Site.Params.CarouselTestimonials.items }}"
-                    data-autoplay="{{ default false .Site.Params.CarouselTestimonials.auto_play }}"
-                    data-slide-speed="{{ default 2000 .Site.Params.CarouselTestimonials.slide_speed }}"
-                    data-pagination-speed="{{ default 1000 .Site.Params.CarouselTestimonials.pagination_speed }}">
-                    {{ range .Site.Data.testimonials }}
-                    <li class="item">
-                        <div class="testimonial same-height-always">
-                            <div class="text">
-                                <p>{{ .text | markdownify }}</p>
-                            </div>
-                            <div class="bottom">
-                                <div class="icon"><i class="fas fa-quote-left"></i>
+                <div class="swiper-container testimonials-slider">
+                    <div class="swiper-wrapper">
+                        {{ range .Site.Data.testimonials }}
+                        <div class="swiper-slide h-auto mb-5">                        
+                            <div class="p-4 bg-white h-100 d-flex flex-column justify-content-between">
+                                <div class="mb-2">
+                                    <p class="text-sm text-gray-600">{{ .text | markdownify }}</p>
+                                    <p class="text-sm text-gray-600"></p>
                                 </div>
-                                <div class="name-picture">
-                                    <img class="" alt="" src="{{ .avatar | absURL }}">
-                                    <h5>{{ .name }}</h5>
-                                    <p>{{ .position }}</p>
+                                <div class="d-flex align-items-center justify-content-between">
+                                    <i class="fas fa-quote-left text-primary fa-2x"></i>
+                                    <div class="d-flex align-items-center ms-3">
+                                        <div class="me-3 text-end">
+                                            <h5 class="text-uppercase mb-0">{{ .name }}</h5>
+                                            <p class="small text-muted mb-0">{{ .position }}</p>
+                                        </div>
+                                        <img class="avatar p-1 flex-shrink-0" alt="{{ .name }}" src="{{ .avatar | absURL }}">
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                    </li>
-                    {{ end }}
-                </ul>
-                <!-- /.owl-carousel -->
-
-                <!-- *** TESTIMONIALS CAROUSEL END *** -->
+                        {{ end }}
+                    </div>                      
+                    <div class="swiper-pagination"></div>        
+                </div>
             </div>
-
         </div>
     </div>
 </section>