From 2f45a731c13653713c4a1ca28a6997ce827a1804 Mon Sep 17 00:00:00 2001
From: abhisheks <abhisheks@consultbop.com>
Date: Wed, 22 Nov 2023 16:16:54 +0530
Subject: [PATCH 1/5] refactor: add global list style

---
 _dev/elegance.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/_dev/elegance.css b/_dev/elegance.css
index 6f95e36..7147a45 100644
--- a/_dev/elegance.css
+++ b/_dev/elegance.css
@@ -28,3 +28,7 @@ a:hover {
 a:hover .icon-tabler {
   @apply stroke-blue-900;
 }
+
+ul {
+  @apply !list-inside;
+}

From 8db275f9bd28ecab500b64338854912d8d0e177b Mon Sep 17 00:00:00 2001
From: abhisheks <abhisheks@consultbop.com>
Date: Wed, 22 Nov 2023 16:18:38 +0530
Subject: [PATCH 2/5] refactor: udpate add to cart flex gap

---
 templates/catalog/_partials/product-add-to-cart.tpl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/catalog/_partials/product-add-to-cart.tpl b/templates/catalog/_partials/product-add-to-cart.tpl
index 0e9951b..0aede1d 100644
--- a/templates/catalog/_partials/product-add-to-cart.tpl
+++ b/templates/catalog/_partials/product-add-to-cart.tpl
@@ -22,7 +22,7 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
-<div class="product-add-to-cart flex flex-col gap-4 mt-12 mb-4">
+<div class="product-add-to-cart flex flex-col gap-3 mt-12 mb-4">
   {if !$configuration.is_catalog}
 
     {block name='product_availability'}

From 58c4ff0b27eb0495d9b807a5d82fa83fe59e7af1 Mon Sep 17 00:00:00 2001
From: abhisheks <abhisheks@consultbop.com>
Date: Wed, 22 Nov 2023 16:19:14 +0530
Subject: [PATCH 3/5] refactor: remove product price margin-top

---
 templates/catalog/_partials/product-prices.tpl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/catalog/_partials/product-prices.tpl b/templates/catalog/_partials/product-prices.tpl
index 520bd1a..8faa778 100644
--- a/templates/catalog/_partials/product-prices.tpl
+++ b/templates/catalog/_partials/product-prices.tpl
@@ -23,7 +23,7 @@
  * International Registered Trademark & Property of PrestaShop SA
  *}
 {if $product.show_price}
-  <div class="product-prices flex flex-col mt-2">
+  <div class="product-prices flex flex-col">
     {block name='product_discount'}
       {if $product.has_discount}
         <div class="product-discount">

From fd550d0e201bfaa870ae8e960e511dc52fda7e81 Mon Sep 17 00:00:00 2001
From: abhisheks <abhisheks@consultbop.com>
Date: Wed, 22 Nov 2023 16:21:01 +0530
Subject: [PATCH 4/5] refactor: udpate product details styles

---
 .../catalog/_partials/product-details.tpl     | 80 ++-----------------
 1 file changed, 7 insertions(+), 73 deletions(-)

diff --git a/templates/catalog/_partials/product-details.tpl b/templates/catalog/_partials/product-details.tpl
index b30b4fa..4273fb3 100644
--- a/templates/catalog/_partials/product-details.tpl
+++ b/templates/catalog/_partials/product-details.tpl
@@ -1,81 +1,15 @@
-<div class="tab-pane hidden fade{if !$product.description} in active{/if}"
-     id="product-details"
-     data-product="{$product.embedded_attributes|json_encode}"
-     role="tabpanel"
-  >
-  {block name='product_reference'}
-    {if isset($product_manufacturer->id)}
-      <div class="product-manufacturer">
-        {if isset($manufacturer_image_url)}
-          <a href="{$product_brand_url}">
-            <img src="{$manufacturer_image_url}" class="img img-thumbnail manufacturer-logo" alt="{$product_manufacturer->name}">
-          </a>
-        {else}
-          <label class="label">{l s='Brand' d='Shop.Theme.Catalog'}</label>
-          <span>
-            <a href="{$product_brand_url}">{$product_manufacturer->name}</a>
-          </span>
-        {/if}
-      </div>
-    {/if}
-    {if isset($product.reference_to_display) && $product.reference_to_display neq ''}
-      <div class="product-reference">
-        <label class="label">{l s='Reference' d='Shop.Theme.Catalog'} </label>
-        <span itemprop="sku">{$product.reference_to_display}</span>
-      </div>
-    {/if}
-  {/block}
-
-  {block name='product_quantities'}
-    {if $product.show_quantities}
-      <div class="product-quantities">
-        <label class="label">{l s='In stock' d='Shop.Theme.Catalog'}</label>
-        <span data-stock="{$product.quantity}" data-allow-oosp="{$product.allow_oosp}">{$product.quantity} {$product.quantity_label}</span>
-      </div>
-    {/if}
-  {/block}
-
-  {block name='product_availability_date'}
-    {if $product.availability_date}
-      <div class="product-availability-date">
-        <label>{l s='Availability date:' d='Shop.Theme.Catalog'} </label>
-        <span>{$product.availability_date}</span>
-      </div>
-    {/if}
-  {/block}
-
-  {block name='product_out_of_stock'}
-    <div class="product-out-of-stock">
-      {hook h='actionProductOutOfStock' product=$product}
-    </div>
-  {/block}
+<div class="w-full" id="product-details">
 
   {block name='product_features'}
     {if $product.grouped_features}
-      <section class="product-features">
-        <p class="h6">{l s='Data sheet' d='Shop.Theme.Catalog'}</p>
-        <dl class="data-sheet">
+      <ul class="product-features list-[square] w-full">
           {foreach from=$product.grouped_features item=feature}
-            <dt class="name">{$feature.name}</dt>
-            <dd class="value">{$feature.value|escape:'htmlall'|nl2br nofilter}</dd>
+            <li>
+              <span class="name inline-flex w-16 font-semibold">{$feature.name}</span>
+              <span class="value">{$feature.value|escape:'htmlall'|nl2br nofilter}</span>
+            </li>
           {/foreach}
-        </dl>
-      </section>
-    {/if}
-  {/block}
-
-  {* if product have specific references, a table will be added to product details section *}
-  {block name='product_specific_references'}
-    {if !empty($product.specific_references)}
-      <section class="product-features">
-        <p class="h6">{l s='Specific References' d='Shop.Theme.Catalog'}</p>
-          <dl class="data-sheet">
-            {foreach from=$product.specific_references item=reference key=key}
-              <dt class="name">{$key}</dt>
-              <dd class="value">{$reference}</dd>
-            {/foreach}
-          </dl>
-      </section>
+      </ul>
     {/if}
   {/block}
 

From 16d5b7f54ce55efed8134b21d5ec7a9695086f2a Mon Sep 17 00:00:00 2001
From: abhisheks <abhisheks@consultbop.com>
Date: Wed, 22 Nov 2023 16:21:29 +0530
Subject: [PATCH 5/5] refactor: udpate product's page style

---
 templates/catalog/product.tpl | 107 ++++++----------------------------
 1 file changed, 18 insertions(+), 89 deletions(-)

diff --git a/templates/catalog/product.tpl b/templates/catalog/product.tpl
index bad319d..976f1d1 100644
--- a/templates/catalog/product.tpl
+++ b/templates/catalog/product.tpl
@@ -66,10 +66,15 @@
             {/block}
           </section>
         {/block}
-        <div class="flex flex-col w-full">
+        <div class="flex flex-col w-full gap-2">
           {block name='page_header_container'}
             {block name='page_header'}
-              <h1 class="text-2xl font-normal" itemprop="name">{block name='page_title'}{$product.name}{/block}</h1>
+              <div class='flex flex-col'>
+                <h1 class="text-2xl font-normal" itemprop="name">{block name='page_title'}{$product.name}{/block}</h1>
+                {if $product.description_short}
+                  <span class='text-sm'>{$product.description_short nofilter}</span>
+                {/if}
+              </div>
             {/block}
           {/block}
           {block name='product_prices'}
@@ -77,9 +82,6 @@
           {/block}
 
           <div class="product-information">
-            {block name='product_description_short'}
-            {/block}
-
             {if $product.is_customizable && count($product.customizations.fields)}
               {block name='product_customization'}
                 {include file="catalog/_partials/product-customization.tpl" customizations=$product.customizations}
@@ -114,14 +116,14 @@
                     {include file='catalog/_partials/product-discounts.tpl'}
                   {/block}
 
-                  {block name='product_add_to_cart'}
-                    {include file='catalog/_partials/product-add-to-cart.tpl'}
-                  {/block}
-
                   {block name='product_additional_info'}
                     {include file='catalog/_partials/product-additional-info.tpl'}
                   {/block}
 
+                  {block name='product_add_to_cart'}
+                    {include file='catalog/_partials/product-add-to-cart.tpl'}
+                  {/block}
+
                   {* Input to refresh product HTML removed, block kept for compatibility with themes *}
                   {block name='product_refresh'}{/block}
                 </form>
@@ -134,86 +136,13 @@
             {/block}
 
             {block name='product_tabs'}
-              <div class="tabs flex flex-col gap-4 mt-16">
-                <ul class="nav nav-tabs flex justify-around" role="tablist">
-                  {if $product.description}
-                    <li class="nav-item text-base font-semibold text-blue-950">
-                       <a
-                         class="nav-link{if $product.description} active{/if}"
-                         data-toggle="tab"
-                         href="#description"
-                         role="tab"
-                         aria-controls="description"
-                         {if $product.description} aria-selected="true"{/if}>{l s='Description' d='Shop.Theme.Catalog'}</a>
-                    </li>
-                  {/if}
-                  <li class="nav-item text-base font-semibold text-gray-500">
-                    <a
-                      class="nav-link{if !$product.description} active{/if}"
-                      data-toggle="tab"
-                      href="#product-details"
-                      role="tab"
-                      aria-controls="product-details"
-                      {if !$product.description} aria-selected="true"{/if}>{l s='Product Details' d='Shop.Theme.Catalog'}</a>
-                  </li>
-                  {if $product.attachments}
-                    <li class="nav-item">
-                      <a
-                        class="nav-link"
-                        data-toggle="tab"
-                        href="#attachments"
-                        role="tab"
-                        aria-controls="attachments">{l s='Attachments' d='Shop.Theme.Catalog'}</a>
-                    </li>
-                  {/if}
-                  {foreach from=$product.extraContent item=extra key=extraKey}
-                    <li class="nav-item">
-                      <a
-                        class="nav-link"
-                        data-toggle="tab"
-                        href="#extra-{$extraKey}"
-                        role="tab"
-                        aria-controls="extra-{$extraKey}">{$extra.title}</a>
-                    </li>
-                  {/foreach}
-                </ul>
-
-                <div class="tab-content" id="tab-content">
-                 <div class="tab-pane fade in{if $product.description} active{/if}" id="description" role="tabpanel">
-                   {block name='product_description'}
-                     <div class="product-description">{$product.description nofilter}</div>
-                   {/block}
-                 </div>
-
-                 {block name='product_details'}
-                   {include file='catalog/_partials/product-details.tpl'}
-                 {/block}
-
-                 {block name='product_attachments'}
-                   {if $product.attachments}
-                    <div class="tab-pane fade in" id="attachments" role="tabpanel">
-                       <section class="product-attachments">
-                         <p class="h5 text-uppercase">{l s='Download' d='Shop.Theme.Actions'}</p>
-                         {foreach from=$product.attachments item=attachment}
-                           <div class="attachment">
-                             <h4><a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">{$attachment.name}</a></h4>
-                             <p>{$attachment.description}</p
-                             <a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">
-                               {l s='Download' d='Shop.Theme.Actions'} ({$attachment.file_size_formatted})
-                             </a>
-                           </div>
-                         {/foreach}
-                       </section>
-                     </div>
-                   {/if}
-                 {/block}
-
-                 {foreach from=$product.extraContent item=extra key=extraKey}
-                 <div class="tab-pane fade in {$extra.attr.class}" id="extra-{$extraKey}" role="tabpanel" {foreach $extra.attr as $key => $val} {$key}="{$val}"{/foreach}>
-                   {$extra.content nofilter}
-                 </div>
-                 {/foreach}
-              </div>  
+            <div class='w-full flex items-center flex-col mt-12'>
+              <h1 class='text-base font-semibold text-gray-600'>
+                Description
+              </h1>
+              {block name='product_details'}
+                {include file='catalog/_partials/product-details.tpl'}
+              {/block}
             </div>
           {/block}
         </div>