From 70768fe5874cf2f2031e1f0f10ba9e9db6cf98a9 Mon Sep 17 00:00:00 2001
From: Dinesh Salunke <dineshsalunke@consultbop.com>
Date: Tue, 7 Nov 2023 12:04:16 +0530
Subject: [PATCH] refactor: update the styling for the image slider

---
 .../views/templates/hook/slider.tpl           | 26 +++++--------------
 1 file changed, 6 insertions(+), 20 deletions(-)

diff --git a/modules/ps_imageslider/views/templates/hook/slider.tpl b/modules/ps_imageslider/views/templates/hook/slider.tpl
index c670467..55775ad 100644
--- a/modules/ps_imageslider/views/templates/hook/slider.tpl
+++ b/modules/ps_imageslider/views/templates/hook/slider.tpl
@@ -24,17 +24,17 @@
  *}
 
 {if $homeslider.slides}
-  <div id="carousel" data-ride="carousel" class="carousel slide" data-interval="{$homeslider.speed}" data-wrap="{(string)$homeslider.wrap}" data-pause="{$homeslider.pause}">
+  <div id="carousel" data-ride="carousel" class="carousel slide mb-16" data-interval="{$homeslider.speed}" data-wrap="{(string)$homeslider.wrap}" data-pause="{$homeslider.pause}">
     <ul class="carousel-inner" role="listbox">
       {foreach from=$homeslider.slides item=slide name='homeslider'}
         <li class="carousel-item {if $smarty.foreach.homeslider.first}active{/if}" role="option" aria-hidden="{if $smarty.foreach.homeslider.first}false{else}true{/if}">
           <a href="{$slide.url}">
-            <figure class="relative">
-              <img src="{$slide.image_url}" alt="{$slide.legend|escape}">
+            <figure class="relative h-screen bg-gray-50">
+              <img class="w-full h-full object-contain md:object-cover" src="{$slide.image_url}" alt="{$slide.legend|escape}">
               {if $slide.title || $slide.description}
-                <figcaption class="caption absolute right-0 bottom-0">
-                  <h2 class="display-1 text-uppercase">{$slide.title}</h2>
-                  <div class="caption-description">{$slide.description nofilter}</div>
+                <figcaption class="caption absolute left-16 md:left-1/2 bottom-0 top-0 right-16 flex flex-col justify-center">
+                  <h2 class="text-xl md:text-2xl lg:text-4xl xl:text-6xl font-bold mb-4">{$slide.title}</h2>
+                  <div class="text-sm md:text-base font-medium">{$slide.description nofilter}</div>
                 </figcaption>
               {/if}
             </figure>
@@ -42,19 +42,5 @@
         </li>
       {/foreach}
     </ul>
-    <div class="direction" aria-label="{l s='Carousel buttons' d='Shop.Theme.Global'}">
-      <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
-        <span class="icon-prev hidden-xs" aria-hidden="true">
-          <i class="material-icons">&#xE5CB;</i>
-        </span>
-        <span class="sr-only">{l s='Previous' d='Shop.Theme.Global'}</span>
-      </a>
-      <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
-        <span class="icon-next" aria-hidden="true">
-          <i class="material-icons">&#xE5CC;</i>
-        </span>
-        <span class="sr-only">{l s='Next' d='Shop.Theme.Global'}</span>
-      </a>
-    </div>
   </div>
 {/if}