feat: update cable_tech template

public/static/tpl/cable_tech/js/home.js

@@ -0,0 +1,148 @@
+/**
+ * 轮播图
+ */
+document.addEventListener('DOMContentLoaded', function() {
+    // 轮播图功能实现
+    const slides = document.querySelectorAll('.carousel-slide');
+    const prevButton = document.querySelector('.carousel-control.prev');
+    const nextButton = document.querySelector('.carousel-control.next');
+    const carouselContainer = document.querySelector('#banner-carousel');
+    let currentSlide = 0;
+    let interval;
+
+    // 检测是否为移动设备
+    const isMobile = window.matchMedia('(max-width: 768px)').matches;
+
+    // 触摸事件变量
+    let touchStartX = 0;
+    let touchEndX = 0;
+    let touchStartY = 0;
+    let touchEndY = 0;
+
+    // 显示指定幻灯片
+    function showSlide(index) {
+        // 隐藏所有幻灯片
+        slides.forEach(slide => {
+            slide.style.opacity = 0;
+            slide.style.zIndex = 0;
+        });
+
+        // 显示当前幻灯片
+        slides[index].style.opacity = 1;
+        slides[index].style.zIndex = 1;
+
+        currentSlide = index;
+    }
+
+    // 下一张幻灯片
+    function nextSlide() {
+        let next = currentSlide + 1;
+        if (next >= slides.length) {
+            next = 0;
+        }
+        showSlide(next);
+    }
+
+    // 上一张幻灯片
+    function prevSlide() {
+        let prev = currentSlide - 1;
+        if (prev < 0) {
+            prev = slides.length - 1;
+        }
+        showSlide(prev);
+    }
+
+    // 自动轮播
+    function startAutoSlide() {
+        interval = setInterval(nextSlide, 5000); // 5秒切换一次
+    }
+
+    // 停止自动轮播
+    function stopAutoSlide() {
+        clearInterval(interval);
+    }
+
+    // 显示控制按钮（仅桌面版）
+    function showControls() {
+        if (!isMobile) {
+            prevButton.style.opacity = "1";
+            nextButton.style.opacity = "1";
+        }
+    }
+
+    // 隐藏控制按钮（仅桌面版）
+    function hideControls() {
+        if (!isMobile) {
+            prevButton.style.opacity = "0";
+            nextButton.style.opacity = "0";
+        }
+    }
+
+    // 初始化显示第一张幻灯片
+    showSlide(0);
+
+    // 开始自动轮播
+    startAutoSlide();
+
+    // 点击上一张按钮
+    prevButton.addEventListener('click', function(e) {
+        e.stopPropagation(); // 防止事件冒泡
+        stopAutoSlide();
+        prevSlide();
+        startAutoSlide();
+    });
+
+    // 点击下一张按钮
+    nextButton.addEventListener('click', function(e) {
+        e.stopPropagation(); // 防止事件冒泡
+        stopAutoSlide();
+        nextSlide();
+        startAutoSlide();
+    });
+
+    // 桌面端鼠标悬停事件
+    if (!isMobile) {
+        // 鼠标悬停在轮播图上时停止自动轮播并显示控制按钮
+        carouselContainer.addEventListener('mouseenter', function() {
+            stopAutoSlide();
+            showControls();
+        });
+
+        // 鼠标离开轮播图时恢复自动轮播并隐藏控制按钮
+        carouselContainer.addEventListener('mouseleave', function() {
+            startAutoSlide();
+            hideControls();
+        });
+    }
+
+    // 移动端触摸事件支持
+    carouselContainer.addEventListener('touchstart', function(e) {
+        stopAutoSlide();
+        touchStartX = e.changedTouches[0].screenX;
+        touchStartY = e.changedTouches[0].screenY;
+    }, { passive: true });
+
+    carouselContainer.addEventListener('touchend', function(e) {
+        touchEndX = e.changedTouches[0].screenX;
+        touchEndY = e.changedTouches[0].screenY;
+        handleSwipe();
+        startAutoSlide();
+    }, { passive: true });
+
+    // 处理滑动手势
+    function handleSwipe() {
+        const xDiff = touchEndX - touchStartX;
+        const yDiff = touchEndY - touchStartY;
+
+        // 确保是水平滑动而不是垂直滚动
+        if (Math.abs(xDiff) > Math.abs(yDiff) && Math.abs(xDiff) > 50) {
+            if (xDiff > 0) {
+                // 右滑 - 上一张
+                prevSlide();
+            } else {
+                // 左滑 - 下一张
+                nextSlide();
+            }
+        }
+    }
+});

public/static/tpl/cable_tech/js/product.js

@@ -0,0 +1,43 @@
+// Product Gallery Thumbnail Functionality
+document.addEventListener('DOMContentLoaded', function() {
+    const mainImage = document.getElementById('main-product-image');
+    const thumbnails = document.querySelectorAll('.thumbnail-item');
+
+    // Add click event to each thumbnail
+    thumbnails.forEach(thumbnail => {
+        thumbnail.addEventListener('click', function() {
+            // Update main image src with the data-image attribute
+            const newImageSrc = this.getAttribute('data-image');
+            mainImage.src = newImageSrc;
+
+            // Remove active class from all thumbnails
+            thumbnails.forEach(item => {
+                item.classList.remove('border-orange-500');
+                item.classList.add('border');
+            });
+
+            // Add active class to clicked thumbnail
+            this.classList.remove('border');
+            this.classList.add('border-orange-500', 'border-2');
+        });
+    });
+
+});
+// Modal functions
+function openQuoteModal() {
+    document.getElementById('quoteModal').classList.remove('hidden');
+    document.body.style.overflow = 'hidden';
+}
+
+function closeQuoteModal() {
+    document.getElementById('quoteModal').classList.add('hidden');
+    document.body.style.overflow = 'auto';
+}
+
+// Close modal when clicking outside
+window.onclick = function(event) {
+    const modal = document.getElementById('quoteModal');
+    if (event.target === modal) {
+        closeQuoteModal();
+    }
+}

resources/views/liquid_src/1/cable_tech/__banner_home.liquid

@@ -1,14 +1,13 @@
 <!-- __banner_home.liquid -->
     <!-- 轮播图容器 -->
-    <div class="carousel-container bg-cover bg-left relative w-full overflow-hidden min-h-[700px] md:min-h-[950px]">
+    <div class="carousel-container overflow-hidden relative w-full" >
     {% for item in banners %}
-
-        <!--幻灯片 --->
-        <div class="carousel-slide absolute w-full h-full  {% if forloop.index > 1 %} opacity-0 {% endif %} transition-opacity duration-500" style="background-image: url('{{ site.image_base_url }}{{ item.image_url }}'); background-size: cover; background-position: left; background-repeat: no-repeat;"  alt="{{ item.title }}" >
-            <a href="{{ item.banner_url }}" class="block w-full h-full">
-            </a>
+         <div class="carousel-slide absolute {% if forloop.index > 1 %} opacity-0 {% endif %} transition-opacity duration-500" >
+              <a href="{{ item.banner_url }}" class="block" target=_blank>
+                  <img src="{{ site.image_base_url }}{{ item.image_url }}"  alt="{{ item.title }}">
+              </a>
         </div>
-
+    
     {% endfor %}
     </div>
     <!-- 轮播控制按钮 -->
@@ -17,168 +16,4 @@
     </button>
     <button class="carousel-control next absolute top-1/2 right-4 transform -translate-y-1/2 bg-black bg-opacity-60 w-12 h-12 md:opacity-0 rounded-full flex items-center justify-center text-white z-10 hover:bg-opacity-80 transition-all hidden md:flex">
         <i class="fas fa-chevron-right text-xl"></i>
-    </button>
-
-<style>
-    /* 修复手机模式下的轮播图 */
-    @media (max-width: 768px) {
-        #banner-carousel, .carousel-container {
-            height: 220px !important;
-            min-height: 220px !important;
-        }
-
-        .carousel-slide {
-            background-size: cover !important;
-            background-position: left !important;
-        }
-    }
-</style>
-
-<!-- 轮播脚本 -->
-<script>
-    document.addEventListener('DOMContentLoaded', function() {
-        // 轮播图功能实现
-        const slides = document.querySelectorAll('.carousel-slide');
-        const prevButton = document.querySelector('.carousel-control.prev');
-        const nextButton = document.querySelector('.carousel-control.next');
-        const carouselContainer = document.querySelector('#banner-carousel');
-        let currentSlide = 0;
-        let interval;
-
-        // 检测是否为移动设备
-        const isMobile = window.matchMedia('(max-width: 768px)').matches;
-
-        // 触摸事件变量
-        let touchStartX = 0;
-        let touchEndX = 0;
-        let touchStartY = 0;
-        let touchEndY = 0;
-
-        // 显示指定幻灯片
-        function showSlide(index) {
-            // 隐藏所有幻灯片
-            slides.forEach(slide => {
-                slide.style.opacity = 0;
-                slide.style.zIndex = 0;
-            });
-
-            // 显示当前幻灯片
-            slides[index].style.opacity = 1;
-            slides[index].style.zIndex = 1;
-
-            currentSlide = index;
-        }
-
-        // 下一张幻灯片
-        function nextSlide() {
-            let next = currentSlide + 1;
-            if (next >= slides.length) {
-                next = 0;
-            }
-            showSlide(next);
-        }
-
-        // 上一张幻灯片
-        function prevSlide() {
-            let prev = currentSlide - 1;
-            if (prev < 0) {
-                prev = slides.length - 1;
-            }
-            showSlide(prev);
-        }
-
-        // 自动轮播
-        function startAutoSlide() {
-            interval = setInterval(nextSlide, 5000); // 5秒切换一次
-        }
-
-        // 停止自动轮播
-        function stopAutoSlide() {
-            clearInterval(interval);
-        }
-
-        // 显示控制按钮（仅桌面版）
-        function showControls() {
-            if (!isMobile) {
-                prevButton.style.opacity = "1";
-                nextButton.style.opacity = "1";
-            }
-        }
-
-        // 隐藏控制按钮（仅桌面版）
-        function hideControls() {
-            if (!isMobile) {
-                prevButton.style.opacity = "0";
-                nextButton.style.opacity = "0";
-            }
-        }
-
-        // 初始化显示第一张幻灯片
-        showSlide(0);
-
-        // 开始自动轮播
-        startAutoSlide();
-
-        // 点击上一张按钮
-        prevButton.addEventListener('click', function(e) {
-            e.stopPropagation(); // 防止事件冒泡
-            stopAutoSlide();
-            prevSlide();
-            startAutoSlide();
-        });
-
-        // 点击下一张按钮
-        nextButton.addEventListener('click', function(e) {
-            e.stopPropagation(); // 防止事件冒泡
-            stopAutoSlide();
-            nextSlide();
-            startAutoSlide();
-        });
-
-        // 桌面端鼠标悬停事件
-        if (!isMobile) {
-            // 鼠标悬停在轮播图上时停止自动轮播并显示控制按钮
-            carouselContainer.addEventListener('mouseenter', function() {
-                stopAutoSlide();
-                showControls();
-            });
-
-            // 鼠标离开轮播图时恢复自动轮播并隐藏控制按钮
-            carouselContainer.addEventListener('mouseleave', function() {
-                startAutoSlide();
-                hideControls();
-            });
-        }
-
-        // 移动端触摸事件支持
-        carouselContainer.addEventListener('touchstart', function(e) {
-            stopAutoSlide();
-            touchStartX = e.changedTouches[0].screenX;
-            touchStartY = e.changedTouches[0].screenY;
-        }, { passive: true });
-
-        carouselContainer.addEventListener('touchend', function(e) {
-            touchEndX = e.changedTouches[0].screenX;
-            touchEndY = e.changedTouches[0].screenY;
-            handleSwipe();
-            startAutoSlide();
-        }, { passive: true });
-
-        // 处理滑动手势
-        function handleSwipe() {
-            const xDiff = touchEndX - touchStartX;
-            const yDiff = touchEndY - touchStartY;
-
-            // 确保是水平滑动而不是垂直滚动
-            if (Math.abs(xDiff) > Math.abs(yDiff) && Math.abs(xDiff) > 50) {
-                if (xDiff > 0) {
-                    // 右滑 - 上一张
-                    prevSlide();
-                } else {
-                    // 左滑 - 下一张
-                    nextSlide();
-                }
-            }
-        }
-    });
-</script>
+    </button>

resources/views/liquid_src/1/cable_tech/__banner_list.liquid

@@ -19,168 +19,4 @@
     <button class="carousel-control next absolute top-1/2 right-4 transform -translate-y-1/2 bg-black bg-opacity-60 w-12 h-12 md:opacity-0 rounded-full flex items-center justify-center text-white z-10 hover:bg-opacity-80 transition-all hidden md:flex">
         <i class="fas fa-chevron-right text-xl"></i>
     </button>
-</div>
-
-<style>
-    /* 修复手机模式下的轮播图 */
-    @media (max-width: 768px) {
-        #banner-carousel, .carousel-container {
-            height: 220px !important;
-            min-height: 220px !important;
-        }
-
-        .carousel-slide {
-            background-size: cover !important;
-            background-position: center !important;
-        }
-    }
-</style>
-
-<!-- 轮播脚本 -->
-<script>
-    document.addEventListener('DOMContentLoaded', function() {
-        // 轮播图功能实现
-        const slides = document.querySelectorAll('.carousel-slide');
-        const prevButton = document.querySelector('.carousel-control.prev');
-        const nextButton = document.querySelector('.carousel-control.next');
-        const carouselContainer = document.querySelector('#banner-carousel');
-        let currentSlide = 0;
-        let interval;
-
-        // 检测是否为移动设备
-        const isMobile = window.matchMedia('(max-width: 768px)').matches;
-
-        // 触摸事件变量
-        let touchStartX = 0;
-        let touchEndX = 0;
-        let touchStartY = 0;
-        let touchEndY = 0;
-
-        // 显示指定幻灯片
-        function showSlide(index) {
-            // 隐藏所有幻灯片
-            slides.forEach(slide => {
-                slide.style.opacity = 0;
-                slide.style.zIndex = 0;
-            });
-
-            // 显示当前幻灯片
-            slides[index].style.opacity = 1;
-            slides[index].style.zIndex = 1;
-
-            currentSlide = index;
-        }
-
-        // 下一张幻灯片
-        function nextSlide() {
-            let next = currentSlide + 1;
-            if (next >= slides.length) {
-                next = 0;
-            }
-            showSlide(next);
-        }
-
-        // 上一张幻灯片
-        function prevSlide() {
-            let prev = currentSlide - 1;
-            if (prev < 0) {
-                prev = slides.length - 1;
-            }
-            showSlide(prev);
-        }
-
-        // 自动轮播
-        function startAutoSlide() {
-            interval = setInterval(nextSlide, 5000); // 5秒切换一次
-        }
-
-        // 停止自动轮播
-        function stopAutoSlide() {
-            clearInterval(interval);
-        }
-
-        // 显示控制按钮（仅桌面版）
-        function showControls() {
-            if (!isMobile) {
-                prevButton.style.opacity = "1";
-                nextButton.style.opacity = "1";
-            }
-        }
-
-        // 隐藏控制按钮（仅桌面版）
-        function hideControls() {
-            if (!isMobile) {
-                prevButton.style.opacity = "0";
-                nextButton.style.opacity = "0";
-            }
-        }
-
-        // 初始化显示第一张幻灯片
-        showSlide(0);
-
-        // 开始自动轮播
-        startAutoSlide();
-
-        // 点击上一张按钮
-        prevButton.addEventListener('click', function(e) {
-            e.stopPropagation(); // 防止事件冒泡
-            stopAutoSlide();
-            prevSlide();
-            startAutoSlide();
-        });
-
-        // 点击下一张按钮
-        nextButton.addEventListener('click', function(e) {
-            e.stopPropagation(); // 防止事件冒泡
-            stopAutoSlide();
-            nextSlide();
-            startAutoSlide();
-        });
-
-        // 桌面端鼠标悬停事件
-        if (!isMobile) {
-            // 鼠标悬停在轮播图上时停止自动轮播并显示控制按钮
-            carouselContainer.addEventListener('mouseenter', function() {
-                stopAutoSlide();
-                showControls();
-            });
-
-            // 鼠标离开轮播图时恢复自动轮播并隐藏控制按钮
-            carouselContainer.addEventListener('mouseleave', function() {
-                startAutoSlide();
-                hideControls();
-            });
-        }
-
-        // 移动端触摸事件支持
-        carouselContainer.addEventListener('touchstart', function(e) {
-            stopAutoSlide();
-            touchStartX = e.changedTouches[0].screenX;
-            touchStartY = e.changedTouches[0].screenY;
-        }, { passive: true });
-
-        carouselContainer.addEventListener('touchend', function(e) {
-            touchEndX = e.changedTouches[0].screenX;
-            touchEndY = e.changedTouches[0].screenY;
-            handleSwipe();
-            startAutoSlide();
-        }, { passive: true });
-
-        // 处理滑动手势
-        function handleSwipe() {
-            const xDiff = touchEndX - touchStartX;
-            const yDiff = touchEndY - touchStartY;
-
-            // 确保是水平滑动而不是垂直滚动
-            if (Math.abs(xDiff) > Math.abs(yDiff) && Math.abs(xDiff) > 50) {
-                if (xDiff > 0) {
-                    // 右滑 - 上一张
-                    prevSlide();
-                } else {
-                    // 左滑 - 下一张
-                    nextSlide();
-                }
-            }
-        }
-    });
-</script>
+</div>

resources/views/liquid_src/1/cable_tech/__collection_list_3.liquid

@@ -1,10 +1,10 @@
 <!-- Blogs and News Section -->
 <div class="container mx-auto px-4 py-0">
-    <h2 class="text-3xl md:text-5xl	 font-bold py-24 text-center">News</h2>
+    <h3 class="text-3xl md:text-5xl	 font-bold py-24 text-center">News</h3>
 
     <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
         {% for item in pages %}
-            <div>
+            <div class="bg-white overflow-hidden rounded-lg shadow">
             <div class="overflow-hidden">
                 <a href="/pages/{{ item.id }}" title="{{ item.title | decode_html_entities | strip_html }}">
                 {% if item.cover_image %}
@@ -19,9 +19,9 @@
                 </a>
             </div>
 
-                <div class="py-12">
+                <div class="p-6">
                     <a href="/pages/{{ item.id }}" title="{{ item.title | decode_html_entities | strip_html }}">
-                    <h3 class="font-bold text-xl mb-4">{{ item.title | decode_html_entities | strip_html }}</h3>
+                    <h3 class="font-bold text-lg mb-4">{{ item.title | decode_html_entities | strip_html }}</h3>
                     </a>
                     <p class="text-sm/6 text-gray-600 mb-4 ">  {% if item.seo_description %}
                             {{ item.seo_description |raw | truncatewords: 20 }}

resources/views/liquid_src/1/cable_tech/__product_list_1.liquid

@@ -4,12 +4,12 @@
                 <div class="relative p-6">
                     <div class="absolute top-6 left-6 bg-red-500 text-white text-xs px-2 py-1 rounded bold_header">HOT</div>
 
-                    <a  href="/products/{{ item.id }}" target="_blank" >
+                    <a  href="/products/{{ item.id }}" target="_blank" title="{{ item.title }}">
 		 {% assign image_url = item.images[0].image_url %}
 
                     {% if image_url %}
                         {% if image_url contains 'http' %}
-                           <img src="{{ image_url }}?x-oss-process=image/resize,m_lfit,h_400"  alt=" {{ item.title }} " class="w-full h-80 object-cover rounded">
+                           <img src="{{ image_url }}?x-oss-process=image/resize,m_lfit,h_400"  alt=" {{ item.title }} " class="w-full object-cover rounded">
                         {% else %}
                             <img src="{{ site.image_base_url }}{{ image_url | append: '?x-oss-process=image/resize,m_pad,w_400,h_400' }}" class="img-center default-image-thumbnail" alt="{{ item.title | strip_html }}">
                         {% endif %}
@@ -20,7 +20,7 @@
                 </div>
                 <div class="p-4 text-center">
                    {% comment %}<div class=" text-gray-500 mb-1"> {{ item.seo_keywords }}</div>{% endcomment %}
-                    <h3 class="bold text-xl mb-2"> <a  href="/products/{{ item.id }}" target="_blank" > {{ item.title }}</a></h3>
+                    <h3 class="bold text-xl mb-2"> <a  href="/products/{{ item.id }}" target="_blank" title=" {{ item.title }}"> {{ item.title }}</a></h3>
                 </div>
             </div>
 

resources/views/liquid_src/1/cable_tech/_footer.liquid

@@ -5,12 +5,13 @@
             <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                 <div>
                     <h3 class="font-bold mb-4">About</h3>
-                    <p class="text-gray-400 text-sm/6 mb-4 ">Mietubl Evolving from "Made in China"  <br/>- Smart product solutions. <br/>- Global customer satisfaction. <br/>- Profitable dealer networks.</p>
+                    <p class="text-gray-400 text-sm/6 mb-4 ">Mietubl Comes from "Make It Easier To Use，Better Life"  <br/>- Smart product solutions. <br/>- Global customer satisfaction. <br/>- Profitable dealer networks.</p>
                     <div class="flex space-x-4 mt-4">
-                        <a href="{{ site.dist.facebook }}" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
-                        <a href="{{ site.dist.twitter }}" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
-                        <a href="{{ site.dist.instagram }}" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
-                        <a href="{{ site.dist.youtube }}" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
+                        
+                         {% if site.dist.facebook %}  <a href="{{ site.dist.facebook }}" class="text-gray-400 hover:text-white" title="facebook"><i class="fab fa-facebook-f"></i></a> {% endif %}
+                         {% if site.dist.twitter %}  <a href="{{ site.dist.twitter }}" class="text-gray-400 hover:text-white" title="twitter"><i class="fab fa-twitter"></i></a>  {% endif %}
+                         {% if site.dist.instagram %}  <a href="{{ site.dist.instagram }}" class="text-gray-400 hover:text-white" title="instagram"><i class="fab fa-instagram"></i></a>  {% endif %}
+                         {% if site.dist.youtube %}  <a href="{{ site.dist.youtube }}" class="text-gray-400 hover:text-white" title="youtube"><i class="fab fa-youtube"></i></a>  {% endif %}
                     </div>
                 </div>
 
@@ -35,7 +36,10 @@
                   {{site.dist.copy_right }}
             </div>
         </div>
+        <div class="messager">
+            <a href="https://m.me/mietubl.ph?text=Hello" target="_blank">
+            	<img src="https://mietubl-website.oss-cn-hongkong.aliyuncs.com/static/tpl/cable_tech/images/Messenger.png" alt="Facebook Messenger">
+            </a>
+        </div>
     </footer>
-
- 
-{{ site.dist.statistics_js }}
+{{ site.dist.statistics_js }}

resources/views/liquid_src/1/cable_tech/_header.liquid

@@ -1,17 +1,14 @@
 <!-- Logo and Main Navigation -->
     <div class=" ">
-        <div class="nav-container w-full bg-white" >
+        <header class="nav-container w-full bg-white" >
             <div class="container mx-auto px-4">
                 <div class="flex justify-between items-center py-4">
-                    <!------------------->
                     <!-- Logo -->
                     <div class="flex items-center  pl-0 md:pl-20" >
                         <a href="/" class="flex items-center">
-                            <div class="h-12 w-32 rounded-md flex items-center justify-center mr-2 ">
+                        <div class="w-28 md:w-40 rounded-md flex items-center justify-center mr-2 ">
                                 {% if site.dist.logo %}
-
                                     <img src="{{ site.image_base_url }}{{ site.dist.logo }}"  class="w-48 ">
-
                                 {% endif %}
                             </div>
 
@@ -26,7 +23,7 @@
 
                                 <!-- Products with dropdown -->
                                 <div class="dropdown products-dropdown">
-                                    <a href="#" class="  bold_header">
+                                    <a href="#" class="bold_header" title="Products">
                                         Products
                                         <i class="fas fa-chevron-down text-xs ml-1"></i>
                                     </a>
@@ -34,56 +31,56 @@
                                         <div class="mx-auto px-4  py-2" style="max-width: 1280px;">
                                             <div class="flex py-8">
                                                 <div class="w-[530px] mr-8">
-                                                    <a href="/products/categories/screen-protector" class="block">
-                                                        <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_banner1.jpg" alt="Product Showcase" class="w-full h-[220px] object-cover rounded-lg">
+                                                    <a href="/categories-screen-protector" class="block" title="screen protector">
+                                                        <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_banner1.jpg" alt="screen protector" class="w-full h-[220px] object-cover rounded-lg">
                                                     </a>
                                                 </div>
                                                 <div class="grid grid-cols-4 gap-3 flex-1">
                                                     <div class="text-center sub-menu">
-                                                        <a href="/products/categories/data-cable"  class="block">
+                                                        <a href="/categories-data-cable"  class="block" title="Data Cable">
                                                             <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico1.png" alt="Data Cable" class="w-15 h-15 mx-auto mb-2">
                                                             <span class=" text-sm">Data Cable</span>
                                                         </a>
                                                     </div>
                                                     <div class="text-center sub-menu">
-                                                        <a href="/products/categories/wall-charger" class="block">
-                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico2.png" alt="Charger" class="w-15 h-15 mx-auto mb-2">
+                                                        <a href="/categories-wall-charger" class="block" title="wall charger">
+                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico2.png" alt="wall charger" class="w-15 h-15 mx-auto mb-2">
                                                             <span class="text-gray-900 text-sm">Wall Charger</span>
                                                         </a>
                                                     </div>
                                                     <div class="text-center sub-menu">
-                                                        <a href="/products/categories/portable-power-supply" class="block">
-                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico3.png" alt="Power Bank" class="w-15 h-15 mx-auto mb-2">
+                                                        <a href="/categories-portable-power-supply" class="block" title="portable power supply">
+                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico3.png" alt="portable power supply" class="w-15 h-15 mx-auto mb-2">
                                                             <span class="text-gray-900 text-sm">portable power</span>
                                                         </a>
                                                     </div>
                                                     <div class="text-center sub-menu">
-                                                        <a href="/products/categories/intelligent-film-cutting-machine" class="block">
-                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico9.png" alt="Magnetic Wireless Charger" class="w-15 h-15 mx-auto mb-2">
+                                                        <a href="/categories-intelligent-film-cutting-machine" class="block" title="intelligent film cutting machine">
+                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico9.png" alt="intelligent film cutting machine" class="w-15 h-15 mx-auto mb-2">
                                                             <span class="text-gray-900 text-sm">Cutting Machine</span>
                                                         </a>
                                                     </div>
                                                     <div class="text-center sub-menu">
-                                                        <a href="/products/categories/bluetooth-headphones" class="block">
-                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico5.png" alt="Audio Headphones" class="w-15 h-15 mx-auto mb-2">
+                                                        <a href="/categories-bluetooth-headphones" class="block" title="bluetooth headphones">
+                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico5.png" alt="bluetooth headphones" class="w-15 h-15 mx-auto mb-2">
                                                             <span class="text-gray-900 text-sm">Headphones</span>
                                                         </a>
                                                     </div>
                                                     <div class="text-center sub-menu">
-                                                        <a href="/products/categories/car-charger" class="block">
-                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico6.png" alt="Car Accessories" class="w-15 h-15 mx-auto mb-2">
+                                                        <a href="/categories-car-charger" class="block" title="car charger">
+                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico6.png" alt="car charger" class="w-15 h-15 mx-auto mb-2">
                                                             <span class="text-gray-900 text-sm">Car Charger</span>
                                                         </a>
                                                     </div>
                                                     <div class="text-center sub-menu">
-                                                        <a href="/products/categories/bluetooth-speaker" class="block">
-                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico7.png" alt="Office Supplies" class="w-15 h-15 mx-auto mb-2">
+                                                        <a href="/categories-bluetooth-speaker" class="block" title="bluetooth speaker">
+                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico7.png" alt="bluetooth speaker" class="w-15 h-15 mx-auto mb-2">
                                                             <span class="text-gray-900 text-sm">Speaker</span>
                                                         </a>
                                                     </div>
                                                     <div class="text-center sub-menu">
-                                                        <a href="/products/categories/screen-protector" class="block">
-                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico10.png" alt="More" class="w-15 h-15 mx-auto mb-2">
+                                                        <a href="/categories-screen-protector" class="block" title="screen protector">
+                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico10.png" alt="screen protector" class="w-15 h-15 mx-auto mb-2">
                                                             <span class="text-gray-900 text-sm">Screen Protector</span>
                                                         </a>
                                                     </div>
@@ -93,44 +90,40 @@
                                     </div>
                                 </div>
                             {% else %}
-                                <div class="dropdown   ">
-                                    {% if menu.children and menu.children.size > 0 %}
-                                        <a href="#" class="text-gray-900  bold_header	">
-                                            {{ menu.title }}
-                                            <i class="fas fa-chevron-down text-xs ml-1"></i>
-                                        </a>
-                                        <div class="dropdown-content border-0" style="left: 50%; ">
-                                            <div class="p-4 sub-menu">
-                                                            {% for child in menu.children %}
-                                                                {% if child.children and child.children.size > 0 %}
-
-                                                                        <h3 class="text-lg mb-4 text-gray-900 bold_header text-xl	 ">{{ child.title }}</h3>
-                                                                        <div class="space-y-2 sub-menu">
-                                                                            {% for item in child.children %}
-                                                                                <a href="{{ item.uri }}" class="block py-1 text-sm text-gray-700  bold_header font-size-17 whitespace-nowrap ">{{ item.title }}</a>
-                                                                            {% endfor %}
-                                                                        </div>
+                        <div class="dropdown ">
+                            {% if menu.children and menu.children.size > 0 %}
+                                <a href="#" class="text-nowrap  bold_header	text-nowrap">
+                                    {{ menu.title }}
+                                    <i class="fas fa-chevron-down text-xs ml-1"></i>
+                                </a>
+                                <div class="dropdown-content border-0" style="left: 50%; ">
+                                    <div class="p-4 sub-menu">
+                                        {% for child in menu.children %}
+                                            {% if child.children and child.children.size > 0 %}
+
+                                                <h3 class="text-lg mb-4 text-gray-900 bold_header text-xl   overflow-hidden	 ">{{ child.title }}</h3>
+                                                <div class="space-y-2 sub-menu">
+                                                    {% for item in child.children %}
+                                                        <a href="{{ item.uri }}" class="block py-1  text-gray-700  bold_header  whitespace-nowrap " title="{{ item.title }}">{{ item.title }}</a>
+                                                    {% endfor %}
+                                                </div>
 
-                                                                {% else %}
-                                                                    <a href="{{ child.uri }}" class="block py-2 text-sm text-gray-700  bold_header font-size-17 whitespace-nowrap p-4 ">{{ child.title }}</a>
-                                                                {% endif %}
-                                                            {% endfor %}
-                                                        </div>
-                                        </div>
-                                    {% else %}
-                                        <a href="{{ menu.uri }}" class="text-gray-800 hover:text-orange-500 bold_header font-size-17">{{ menu.title }}</a>
-                                    {% endif %}
+                                            {% else %}
+                                            <a href="{{ child.uri }}" class="block py-2 text-gray-700  font-size-16 whitespace-nowrap " title="{{ child.title }}">{{ child.title }}</a>
+                                            {% endif %}
+                                        {% endfor %}
+                                    </div>
                                 </div>
-
+                            {% else %}
+                                <a href="{{ menu.uri }}" class="hover:text-orange-500 bold_header  text-nowrap" title="{{ menu.title }}">{{ menu.title }}</a>
                             {% endif %}
-                        {% endfor %}
+                        </div>
+                    {% endif %}
+                    {% endfor %}
                     </div>
 
                     <!-- Right side icons -->
                     <div class="flex items-center space-x-4">
-                        {% comment %}<button class="text-gray-800 hover:text-orange-500" id="search-button">{% endcomment %}
-                        {% comment %}<i class="fas fa-search"></i>{% endcomment %}
-                        {% comment %}</button>{% endcomment %}
                         <!-- Mobile menu button -->
                         <button class="md:hidden text-gray-800" id="mobile-menu-button">
                             <i class="fas fa-bars"></i>
@@ -139,7 +132,7 @@
                     <!------------------->
                 </div>
             </div>
-        </div>
+        </header>
     </div>
 
     <!-- mobile -->
@@ -186,23 +179,4 @@
                 </ul>
             </nav>
         </div>
-    </div>
-
-    <style>
-        .dropdown-content2 {
-            display: none;
-            position: absolute;
-            background-color: white;
-            min-width: 160px;
-            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-            z-index: 99;
-            border-radius: 4px;
-            left: 50%;
-            transform: translateX(-50%);
-            padding-top: 10px;
-            top: 100%;
-        }
-
-
-
-    </style>
+    </div>

resources/views/liquid_src/1/cable_tech/_header_css.liquid

@@ -1,6 +1,5 @@
-    <script src="https://cdn.tailwindcss.com"></script>
+<script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <link rel="stylesheet" href="{{ site.image_base_url }}static/tpl/cable_tech/css/css.css">
-    <script src="{{ site.image_base_url }}static/tpl/cable_tech/js/script.js"></script>
-
-
+    <link rel="shortcut icon" href="https://mietubl-website.oss-cn-hongkong.aliyuncs.com/static/tpl/cable_tech/images/favicon.ico" />
+    <script src="{{ site.image_base_url }}static/tpl/cable_tech/js/script.js"></script>

resources/views/liquid_src/1/cable_tech/_header_home.liquid

@@ -1,13 +1,12 @@
 <!-- Logo and Main Navigation -->
 <div class="nav-wrapper">
-    <div class="nav-container w-full">
+    <header class="nav-container w-full">
         <div class="container mx-auto px-4">
             <div class="flex justify-between items-center py-4">
-                <!------------------->
                 <!-- Logo -->
                 <div class="flex items-center pl-0 md:pl-20" >
                     <a href="/" class="flex items-center">
-                        <div class="h-12 w-32 rounded-md flex items-center justify-center mr-2 ">
+                        <div class="w-28 md:w-40 rounded-md flex items-center justify-center mr-2 ">
                         {% if site.dist.logo %}
 
                             <img src="{{ site.image_base_url }}{{ site.dist.logo }}"  class="w-48 ">
@@ -24,64 +23,64 @@
                     {% if menu.title == "Products" %}
                         <!-- Products with dropdown -->
                                 <div class="dropdown products-dropdown">
-                                    <a href="#" class="  bold_header text-white ">
+                                    <a href="#" class="bold_header text-white " title="Products">
                                         Products
                                         <i class="fas fa-chevron-down text-xs ml-1"></i>
                                     </a>
-                                    <div class="dropdown-content mt-2">
+<div class="dropdown-content mt-2">
                                         <div class="mx-auto px-4  py-2" style="max-width: 1280px;">
                                             <div class="flex py-8">
                                                 <div class="w-[530px] mr-8">
-                                                    <a href="/products/categories/screen-protector" class="block">
-                                                        <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_banner1.jpg" alt="Product Showcase" class="w-full h-[220px] object-cover rounded-lg">
+                                                    <a href="/categories-screen-protector" class="block" title="screen protector">
+                                                        <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_banner1.jpg" alt="screen protector" class="w-full h-[220px] object-cover rounded-lg">
                                                     </a>
                                                 </div>
                                                 <div class="grid grid-cols-4 gap-3 flex-1">
                                                     <div class="text-center sub-menu">
-                                                        <a href="/products/categories/data-cable"  class="block">
+                                                        <a href="/categories-data-cable"  class="block" title="Data Cable">
                                                             <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico1.png" alt="Data Cable" class="w-15 h-15 mx-auto mb-2">
                                                             <span class=" text-sm">Data Cable</span>
                                                         </a>
                                                     </div>
                                                     <div class="text-center sub-menu">
-                                                        <a href="/products/categories/wall-charger" class="block">
-                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico2.png" alt="Charger" class="w-15 h-15 mx-auto mb-2">
+                                                        <a href="/categories-wall-charger" class="block" title="wall charger">
+                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico2.png" alt="wall charger" class="w-15 h-15 mx-auto mb-2">
                                                             <span class="text-gray-900 text-sm">Wall Charger</span>
                                                         </a>
                                                     </div>
                                                     <div class="text-center sub-menu">
-                                                        <a href="/products/categories/portable-power-supply" class="block">
-                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico3.png" alt="Power Bank" class="w-15 h-15 mx-auto mb-2">
+                                                        <a href="/categories-portable-power-supply" class="block" title="portable power supply">
+                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico3.png" alt="portable power supply" class="w-15 h-15 mx-auto mb-2">
                                                             <span class="text-gray-900 text-sm">portable power</span>
                                                         </a>
                                                     </div>
                                                     <div class="text-center sub-menu">
-                                                        <a href="/products/categories/intelligent-film-cutting-machine" class="block">
-                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico9.png" alt="Magnetic Wireless Charger" class="w-15 h-15 mx-auto mb-2">
+                                                        <a href="/categories-intelligent-film-cutting-machine" class="block" title="intelligent film cutting machine">
+                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico9.png" alt="intelligent film cutting machine" class="w-15 h-15 mx-auto mb-2">
                                                             <span class="text-gray-900 text-sm">Cutting Machine</span>
                                                         </a>
                                                     </div>
                                                     <div class="text-center sub-menu">
-                                                        <a href="/products/categories/bluetooth-headphones" class="block">
-                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico5.png" alt="Audio Headphones" class="w-15 h-15 mx-auto mb-2">
+                                                        <a href="/categories-bluetooth-headphones" class="block" title="bluetooth headphones">
+                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico5.png" alt="bluetooth headphones" class="w-15 h-15 mx-auto mb-2">
                                                             <span class="text-gray-900 text-sm">Headphones</span>
                                                         </a>
                                                     </div>
                                                     <div class="text-center sub-menu">
-                                                        <a href="/products/categories/car-charger" class="block">
-                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico6.png" alt="Car Accessories" class="w-15 h-15 mx-auto mb-2">
+                                                        <a href="/categories-car-charger" class="block" title="car charger">
+                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico6.png" alt="car charger" class="w-15 h-15 mx-auto mb-2">
                                                             <span class="text-gray-900 text-sm">Car Charger</span>
                                                         </a>
                                                     </div>
                                                     <div class="text-center sub-menu">
-                                                        <a href="/products/categories/bluetooth-speaker" class="block">
-                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico7.png" alt="Office Supplies" class="w-15 h-15 mx-auto mb-2">
+                                                        <a href="/categories-bluetooth-speaker" class="block" title="bluetooth speaker">
+                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico7.png" alt="bluetooth speaker" class="w-15 h-15 mx-auto mb-2">
                                                             <span class="text-gray-900 text-sm">Speaker</span>
                                                         </a>
                                                     </div>
                                                     <div class="text-center sub-menu">
-                                                        <a href="/products/categories/screen-protector" class="block">
-                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico10.png" alt="More" class="w-15 h-15 mx-auto mb-2">
+                                                        <a href="/categories-screen-protector" class="block" title="screen protector">
+                                                            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/menu_ico10.png" alt="screen protector" class="w-15 h-15 mx-auto mb-2">
                                                             <span class="text-gray-900 text-sm">Screen Protector</span>
                                                         </a>
                                                     </div>
@@ -94,7 +93,7 @@
                     {% else %}
                         <div class="dropdown ">
                             {% if menu.children and menu.children.size > 0 %}
-                                <a href="#" class=" text-white  bold_header	">
+                                <a href="#" class=" text-white text-nowrap  bold_header	text-nowrap">
                                     {{ menu.title }}
                                     <i class="fas fa-chevron-down text-xs ml-1"></i>
                                 </a>
@@ -103,21 +102,21 @@
                                         {% for child in menu.children %}
                                             {% if child.children and child.children.size > 0 %}
 
-                                                <h3 class="text-lg mb-4 text-gray-900 bold_header text-xl	 ">{{ child.title }}</h3>
+                                                <h3 class="text-lg mb-4 text-gray-900 bold_header text-xl   overflow-hidden	 ">{{ child.title }}</h3>
                                                 <div class="space-y-2 sub-menu">
                                                     {% for item in child.children %}
-                                                        <a href="{{ item.uri }}" class="block py-1 text-sm text-gray-700  bold_header font-size-17 whitespace-nowrap ">{{ item.title }}</a>
+                                                        <a href="{{ item.uri }}" class="block py-1  text-gray-700  bold_header  whitespace-nowrap " title="{{ item.title }}">{{ item.title }}</a>
                                                     {% endfor %}
                                                 </div>
 
                                             {% else %}
-                                            <a href="{{ child.uri }}" class="block py-2 text-sm text-gray-700  bold_header font-size-17 whitespace-nowrap ">{{ child.title }}</a>
+                                            <a href="{{ child.uri }}" class="block py-2 text-gray-700  font-size-16 whitespace-nowrap " title="{{ child.title }}">{{ child.title }}</a>
                                             {% endif %}
                                         {% endfor %}
                                     </div>
                                 </div>
                             {% else %}
-                                <a href="{{ menu.uri }}" class=" text-white hover:text-orange-500 bold_header font-size-17">{{ menu.title }}</a>
+                                <a href="{{ menu.uri }}" class=" text-white hover:text-orange-500 bold_header  text-nowrap" title="{{ menu.title }}">{{ menu.title }}</a>
                             {% endif %}
                         </div>
                     {% endif %}
@@ -126,16 +125,12 @@
 
                 <!-- Right side icons -->
                 <div class="flex items-center space-x-4">
-                    {% comment %}<button class="text-gray-800 hover:text-orange-500" id="search-button">{% endcomment %}
-                        {% comment %}<i class="fas fa-search"></i>{% endcomment %}
-                    {% comment %}</button>{% endcomment %}
                     <!-- Mobile menu button -->
                     <button class="md:hidden text-gray-900" id="mobile-menu-button">
                         <i class="fas fa-bars"></i>
                     </button>
                 </div>
-                <!------------------->
             </div>
         </div>
-    </div>
+    </header>
 </div>

resources/views/liquid_src/1/cable_tech/_header_mobile.liquid

@@ -1,13 +1,11 @@
-
 <!-- mobile -->
 <div class="mobile-menu" id="mobile-menu">
     <div class="mobile-menu-content shadow-xl">
         <div class="p-4 flex justify-between items-center border-b">
             <div class="flex items-center">
-                {% comment %}<div class="h-8 w-8   rounded-md flex items-center justify-center mr-2">{% endcomment %}
-                {% comment %}<img src="{{ site.image_base_url }}{{ site.dist.logo }}"  class="w-48">{% endcomment %}
-                {% comment %}</div>{% endcomment %}
-                <span class="font-bold text-lg text-gray-800">{{site.dist.site_name}}</span>
+              <div class="w-16 flex items-center justify-center mr-2">
+                <img src="{{ site.image_base_url }}{{ site.dist.logo }}"  class="w-48">
+               </div>
             </div>
             <button id="close-menu-button" class="text-gray-500">
                 <i class="fas fa-times"></i>
@@ -26,22 +24,25 @@
                             <div class="submenu">
                                 {% for child in menu.children %}
                                     <div class="mt-2 mb-1">
-                                        <h3 class="font-medium text-sm text-gray-900 px-4 py-1">{{ child.title }}</h3>
+                                        {% if child.children and child.children.size > 0 %}
+                                        <h3 class="text-sm text-gray-900 px-4 py-1">{{ child.title }}</h3>
                                         <div class="pl-2 space-y-1">
                                             {% for item in child.children %}
-                                                <a href="{{ item.uri }}" class="block px-4 py-1 text-sm text-gray-500 hover:text-orange-500 bold_header">{{ item.title }}</a>
+                                                <a href="{{ item.uri }}" class="block px-4 py-1 text-sm text-gray-500 hover:text-orange-500 bold_header" title="{{ item.title }}">{{ item.title }}</a>
                                             {% endfor %}
                                         </div>
+                                        {% else %}
+                                         <h3 class="text-[14px] text-gray-900 px-4 py-1"><a href="{{ child.uri }}" title="{{ child.title }}">{{ child.title }}</a></h3>
+                                        {% endif %}
                                     </div>
                                 {% endfor %}
                             </div>
                         {% else %}
-                            <a href="{{ menu.uri }}" class="block py-2 px-4 text-gray-800 hover:bg-gray-100 rounded">{{ menu.title }}</a>
+                            <a href="{{ menu.uri }}" class="block py-2 px-4 text-gray-800 hover:bg-gray-100 rounded" title="{{ menu.title }}">{{ menu.title }}</a>
                         {% endif %}
                     </li>
                 {% endfor %}
             </ul>
         </nav>
     </div>
-</div>
-
+</div>

resources/views/liquid_src/1/cable_tech/collection_list.liquid

@@ -47,7 +47,7 @@
         <nav class="flex text-sm">
 
             {% for breadcrumb in breadcrumbs %}
-            <a href="{{ breadcrumb.url }}" class="text-gray-600 hover:text-orange-500">  {{ breadcrumb.name }} </a>
+            <a href="{{ breadcrumb.url }}" class="text-gray-600 hover:text-orange-500" title=" {{ breadcrumb.name }} ">  {{ breadcrumb.name }} </a>
             {% if forloop.index != forloop.length %}
                 <span class="mx-2 text-gray-500">/</span>
             {% endif %}
@@ -108,49 +108,50 @@
 <div class="container mx-auto px-4 py-8">
 
     <!-- Pagination -->
-    <nav aria-label="page-navigation" class="mt-8">
-        <ul class="pagination justify-content-center flex-wrap flex justify-center">
-            {% if paginator.previous_page %}
-                <li class="page-item">
-                    <a class="page-link mx-1 px-3 py-1 bg-gray-200 rounded" href="{{ paginator.previous_page_url }}" tabindex="-1">
-                        <i class="fas fa-arrow-left fa-xs"></i>
-                    </a>
-                </li>
-            {% else %}
-                <li class="page-item disabled">
-                    <a class="page-link mx-1 px-3 py-1 bg-gray-200 rounded text-gray" href="#" tabindex="-1">
-                        <i class="fas fa-arrow-left fa-xs"></i>
-                    </a>
-                </li>
-            {% endif %}
 
-            {% for page in paginator.pages %}
-                {% if page == paginator.current_page %}
-                    <li class="page-item active" aria-current="page">
-                        <a class="page-link mx-1 px-3 py-1 bg-orange-500 text-white rounded" href="#">{{ page }}</a>
-                    </li>
-                {% else %}
-                    <li class="page-item">
-                        <a class="page-link mx-1 px-3 py-1 bg-gray-200 rounded" href="{{ paginator.page_url[page] }}">{{ page }}</a>
-                    </li>
-                {% endif %}
-            {% endfor %}
-
-            {% if paginator.next_page %}
-                <li class="page-item">
-                    <a class="page-link mx-1 px-3 py-1 bg-gray-200 rounded" href="{{ paginator.next_page_url }}">
-                        <i class="fas fa-arrow-right fa-xs"></i>
-                    </a>
-                </li>
-            {% else %}
-                <li class="page-item disabled">
-                    <a class="page-link mx-1 px-3 py-1 bg-gray-200 rounded text-gray" href="#">
-                        <i class="fas fa-arrow-right fa-xs"></i>
-                    </a>
-                </li>
-            {% endif %}
-        </ul>
-    </nav>
+            <nav aria-label="page-navigation" class="mt-8">
+                <ul class="pagination justify-content-center flex-wrap flex justify-center">
+                    {% if paginator.previous_page %}
+                        <li class="page-item">
+                            <a class="page-link mx-1 px-3 py-1 bg-gray-200 rounded" href="{{ paginator.previous_page_url }}" tabindex="-1" title="previous page">
+                                <i class="fas fa-arrow-left fa-xs"></i>
+                            </a>
+                        </li>
+                    {% else %}
+                        <li class="page-item disabled">
+                            <a class="page-link mx-1 px-3 py-1 bg-gray-200 rounded text-gray" href="#" tabindex="-1" title="previous page">
+                                <i class="fas fa-arrow-left fa-xs"></i>
+                            </a>
+                        </li>
+                    {% endif %}
+
+                    {% for page in paginator.pages %}
+                        {% if page == paginator.current_page %}
+                            <li class="page-item active" aria-current="page">
+                                <a class="page-link mx-1 px-3 py-1 bg-orange-500 text-white rounded" href="#" title="page {{ page }}">{{ page }}</a>
+                            </li>
+                        {% else %}
+                            <li class="page-item">
+                                <a class="page-link mx-1 px-3 py-1 bg-gray-200 rounded" href="{{ paginator.page_url[page] }}" title="page {{ page }}">{{ page }}</a>
+                            </li>
+                        {% endif %}
+                    {% endfor %}
+
+                    {% if paginator.next_page %}
+                        <li class="page-item">
+                            <a class="page-link mx-1 px-3 py-1 bg-gray-200 rounded" href="{{ paginator.next_page_url }}" title="next page">
+                                <i class="fas fa-arrow-right fa-xs"></i>
+                            </a>
+                        </li>
+                    {% else %}
+                        <li class="page-item disabled">
+                            <a class="page-link mx-1 px-3 py-1 bg-gray-200 rounded text-gray" href="#" title="next page">
+                                <i class="fas fa-arrow-right fa-xs"></i>
+                            </a>
+                        </li>
+                    {% endif %}
+                </ul>
+            </nav>
 </div>
 
 

resources/views/liquid_src/1/cable_tech/home.liquid

@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html lang="{{site.dist.country_lang }}">
 <head>
-    <meta charset="utf-8">
+    <title>{{ site.dist.seo_title }}</title>
+    <meta charset="utf-8">   
+    <meta name="keywords" content="{{ site.dist.seo_keywords }}">       
+    <meta name="description" content="{{ site.dist.seo_description  | strip_html| strip_newlines }}">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="robots" content="index, follow">
+    <meta name="robots" content="index, follow">   
     <meta property="og:locale" content="{{site.dist.country_lang | replace: '-', '_' }}" />
-    <meta name="description" content="{{ site.dist.seo_description  | strip_html| strip_newlines }}">
-    <meta name="keywords" content="{{ site.dist.seo_keywords }}">
     <meta name="author" content="Mietubl">
-    <title>{{ site.dist.seo_title }}</title>
     {% include '_header_css.liquid' %}
     <script type="application/ld+json">
         {
@@ -39,29 +39,28 @@
 </head>
 <body class="bg-gray-100 tracking-wide">
 
-
+<header>
+    {% include '_header_home.liquid' %}
+    {% include '_header_mobile.liquid' %}
+</header>
 <!-- Spring Sale Banner -->
-<div class="relative bg-cover bg-center min-h-[700px] md:min-h-[750px]" id="banner-carousel">
+<div class="relative" id="banner-carousel">
 <!-- banner -->
 {% banner limit=5 position=1 template='__banner_home.liquid' %}
-{% include '_header_home.liquid' %}
 </div>
 
-{% include '_header_mobile.liquid' %}
-
-
 <!-- Category Navigation -->
-<div class="bg-gray-100 py-0">
+<div class="relative bg-gray-100 py-0">
     <div class="container mx-auto px-4 py-0">
-        <h2 class="text-3xl md:text-5xl font-bold  py-24 text-center">Products By Category</h2>
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 grid-flow-dense">
+        <h1 class="text-3xl md:text-5xl font-bold  py-24 text-center">Mobile Phone Accessories</h1>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 grid-flow-dense pb-24">
             <!-- Power Banks - 占据2行 -->
-            <div class="relative md:row-span-2 overflow-hidden">
-                <a href="/products/categories/intelligent-film-cutting-machine" target=_blank>
+            <div class="relative row-span-2 overflow-hidden">
+                <a href="/categories-intelligent-film-cutting-machine" target=_blank title="Smart Film Cutter">
                     <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/index_product_category_1.jpg" alt="Power Banks" class="absolute inset-0 w-full h-full object-cover">
                     <div class="absolute left-0 top-0 p-3 md:p-4 text-left">
                         <h3 class="font-bold text-gray-900 text-base md:text-lg">Smart Film Cutter</h3>
-                        <p class="text-xs md:text-sm text-gray-600 ">More Products</p>
+                        <p class="text-xs md:text-sm text-gray-600 ">More</p>
                     </div>
                 </a>
             </div>
@@ -70,65 +69,66 @@
 
             <!-- Screen Protector -->
             <div class="relative overflow-hidden  aspect-ratio-card">
-                <a href="/products/categories/screen-protector" target=_blank>
+                <a href="/categories-screen-protector" target=_blank title="Screen Protector">
                     <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/index_product_category_3.jpg?20250425" alt="Wireless Chargers" class="absolute inset-0 w-full h-full object-cover">
                     <div class="absolute left-0 top-0 p-3 md:p-4 text-left">
                         <h3 class="font-bold text-gray-900 text-base md:text-lg">Screen Protector</h3>
-                        <p class="text-xs md:text-sm text-gray-600">More Products</p>
+                        <p class="text-xs md:text-sm text-gray-600">More</p>
                     </div>
                 </a>
             </div>
 
             <!-- Chargers -->
             <div class="relative overflow-hidden aspect-ratio-card">
-                <a href="/products/categories/wall-charger" target=_blank>
+                <a href="/categories-wall-charger" target=_blank title="Wall Chargers">
                     <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/index_product_category_2.jpg" alt="Chargers" class="absolute inset-0 w-full h-full object-cover">
                     <div class="absolute left-0 top-0 p-3 md:p-4 text-left">
                         <h3 class="font-bold text-gray-900 text-base md:text-lg">Wall Chargers</h3>
-                        <p class="text-xs md:text-sm text-gray-600">More Products</p>
+                        <p class="text-xs md:text-sm text-gray-600">More</p>
                     </div>
                 </a>
             </div>
 
             <!-- AC Power -->
             <div class="relative overflow-hidden aspect-ratio-card">
-                <a href="/products/categories/portable-power-supply" target=_blank>
+                <a href="/categories-portable-power-supply" target=_blank title="Portable Power">
                     <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/index_product_category_4.jpg" alt="AC Power" class="absolute inset-0 w-full h-full object-cover">
                     <div class="absolute left-0 top-0 p-3 md:p-4 text-left">
                         <h3 class="font-bold text-gray-900 text-base md:text-lg">Portable Power</h3>
-                        <p class="text-xs md:text-sm text-gray-600">More Products</p>
+                        <p class="text-xs md:text-sm text-gray-600">More</p>
                     </div>
                 </a>
             </div>
 
             <!-- Cables -->
             <div class="relative overflow-hidden aspect-ratio-card">
-                <a href="/products/categories/data-cable" target=_blank>
+                <a href="/categories-data-cable" target=_blank title="Cables">
                     <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/index_product_category_5.jpg" alt="Cables" class="absolute inset-0 w-full h-full object-cover">
                     <div class="absolute left-0 top-0 p-3 md:p-4 text-left">
                         <h3 class="font-bold   text-gray-900   text-base  md:text-lg">Cables</h3>
-                        <p class="text-xs md:text-sm  text-gray-600 ">More Products</p>
+                        <p class="text-xs md:text-sm  text-gray-600 ">More</p>
                     </div>
                 </a>
             </div>
 
             <!-- Hubs and Docks -->
             <div class="relative overflow-hidden aspect-ratio-card">
-                <a href="/products/categories/cutting-machine-consumables" target=_blank>
+                <a href="/categories-cutting-machine-consumables" target=_blank title="Materials">
                     <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/index_product_category_6.jpg" alt="Hubs and Docks" class="absolute inset-0 w-full h-full object-cover">
                     <div class="absolute left-0 top-0 p-3 md:p-4 text-left">
                         <h3 class="font-bold text-gray-900  text-base md:text-lg">Materials</h3>
-                        <p class="text-xs md:text-sm text-gray-600 ">More Products</p>
+                        <p class="text-xs md:text-sm text-gray-600 ">More</p>
                     </div>
                 </a>
             </div>
 
             <!-- Car Chargers -->
             <div class="relative overflow-hidden aspect-ratio-card">
-                <a href="/products/categories/bluetooth-headphones"  target=_blank><img src="{{ site.image_base_url }}static/tpl/cable_tech/images/index_product_category_7.jpg" alt="Car Chargers" class="absolute inset-0 w-full h-full object-cover">
+                <a href="/categories-bluetooth-headphones"  target=_blank title="Bluetooth Headphones">
+                    <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/index_product_category_7.jpg" alt="Car Chargers" class="absolute inset-0 w-full h-full object-cover">
                     <div class="absolute left-0 top-0 p-3 md:p-4 text-left">
-                        <h3 class="font-bold text-gray-900  text-base md:text-lg">Bluetooth Headphones</h3>
-                        <p class="text-xs md:text-sm  text-gray-600">More Products</p>
+                        <h3 class="font-bold text-gray-900  text-base md:text-lg">Headphones</h3>
+                        <p class="text-xs md:text-sm  text-gray-600">More</p>
                     </div>
                 </a>
             </div>
@@ -141,78 +141,32 @@
 
 
 
-    <!-- Hot Sale Section -->
-    <div class="container mx-auto px-4 py-0 ">
-        <h2 class="text-3xl md:text-5xl	 font-bold py-28 text-center">Hot selling</h2>
-    </div>
-<div class="bg-white py-28 ">
+<!-- Hot Sale Section -->
+
+<div class="bg-white py-0 ">
     <div class="container mx-auto px-4 py-0">
-        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-6 pb  bg-white ">
+        
+         <h3 class="text-3xl md:text-5xl font-bold  py-24 text-center">Hot Selling</h3>
+        
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-6 pb-24  bg-white ">
 
 
             {% product  mode="list" limit=3 template='__product_list_1.liquid' %}
 
-
-            <!-- Product 1 -->
-            {% comment %}<div class="bg-white rounded-lg shadow overflow-hidden">{% endcomment %}
-                {% comment %}<div class="relative p-4">{% endcomment %}
-                    {% comment %}<div class="absolute top-6 left-6 bg-red-500 text-white text-xs px-2 py-1 rounded bold_header">HOT</div>{% endcomment %}
-                    {% comment %}<img src="{{ site.image_base_url }}static/tpl/cable_tech/images/product1.jpg" alt="USB Hub" class="w-full h-56 object-cover rounded">{% endcomment %}
-                {% comment %}</div>{% endcomment %}
-                {% comment %}<div class="p-4">{% endcomment %}
-                    {% comment %}<div class="text-xs/6 text-gray-500 mb-1">4 Port | Switching between 4 type devices | USB A...</div>{% endcomment %}
-                    {% comment %}<h3 class="bold text-sm/6 mb-2 ">4-Port KVM Switch for 4 Computer</h3>{% endcomment %}
-                {% comment %}</div>{% endcomment %}
-            {% comment %}</div>{% endcomment %}
-
-            <!-- Product 2 -->
-            {% comment %}<div class="bg-white rounded-lg shadow overflow-hidden">{% endcomment %}
-                {% comment %}<div class="relative p-4">{% endcomment %}
-                    {% comment %}<div class="absolute top-6 left-6 bg-red-500 text-white text-xs px-2 py-1 rounded bold_header">HOT</div>{% endcomment %}
-                    {% comment %}<img src="{{ site.image_base_url }}static/tpl/cable_tech/images/product1.jpg" alt="USB-C Adapter" class="w-full h-56 object-cover rounded">{% endcomment %}
-                {% comment %}</div>{% endcomment %}
-                {% comment %}<div class="p-4">{% endcomment %}
-                    {% comment %}<div class="text-xs/6 text-gray-500 mb-1">Adapter Dock | Type-C HDMI 4K | 100W PD</div>{% endcomment %}
-                    {% comment %}<h3 class="bold text-sm/6 mb-2">USB-C to HDMI Adapter</h3>{% endcomment %}
-                {% comment %}</div>{% endcomment %}
-            {% comment %}</div>{% endcomment %}
-
-            {% comment %}<!-- Product 3 -->{% endcomment %}
-            {% comment %}<div class="bg-white rounded-lg shadow overflow-hidden">{% endcomment %}
-                {% comment %}<div class="relative p-4">{% endcomment %}
-                    {% comment %}<img src="{{ site.image_base_url }}static/tpl/cable_tech/images/product1.jpg" alt="USB-C Hub" class="w-full h-56 object-cover rounded">{% endcomment %}
-                {% comment %}</div>{% endcomment %}
-                {% comment %}<div class="p-4">{% endcomment %}
-                    {% comment %}<div class="text-xs/6 text-gray-500 mb-1">7-in-1 | USB-C to USB 3.0 | SD/TF Card Reader</div>{% endcomment %}
-                    {% comment %}<h3 class="bold text-sm/6 mb-2">USB-C Hub Multiport Adapter</h3>{% endcomment %}
-                {% comment %}</div>{% endcomment %}
-            {% comment %}</div>{% endcomment %}
-{% comment %}{% endcomment %}
-            {% comment %}<!-- Product 4 -->{% endcomment %}
-            {% comment %}<div class="bg-white rounded-lg shadow overflow-hidden">{% endcomment %}
-                {% comment %}<div class="relative p-4">{% endcomment %}
-                    {% comment %}<img src="{{ site.image_base_url }}static/tpl/cable_tech/images/product1.jpg" alt="DisplayPort Cable" class="w-full h-56 object-cover rounded">{% endcomment %}
-                {% comment %}</div>{% endcomment %}
-                {% comment %}<div class="p-4">{% endcomment %}
-                    {% comment %}<div class="text-xs/6 text-gray-500 mb-1">DisplayPort 1.4 Cable | 8K@60Hz | HDR | Braided</div>{% endcomment %}
-                    {% comment %}<h3 class="bold text-sm/6 mb-2">High Speed DisplayPort Cable</h3>{% endcomment %}
-                {% comment %}</div>{% endcomment %}
-            {% comment %}</div>{% endcomment %}
         </div>
     </div>
 </div>
 <!-- World of Electronic Products -->
-<div class="container mx-auto px-4 py-0 ">
-    <h2 class="text-3xl md:text-5xl	 font-bold py-24 text-center">Electronic Products</h2>
+<div class="container mx-auto py-0 ">
+    <h3 class="text-3xl md:text-5xl	 font-bold py-24 text-center">Screen Protector Solution</h3>
     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
         <!--   -->
        
         <div class="relative overflow-hidden  aspect-[0.92/1] bg-gradient-to-br from-blue-50 to-blue-100" style="background-image: url('{{ site.image_base_url }}static/tpl/cable_tech/images/index_product2_1.jpg'); background-size: cover; background-position: center bottom;">
             <div class="p-8 pb-32 flex flex-col items-center relative z-10">
                 <div class="text-amber-500 font-medium mb-3 text-center">New Release</div>
-                <h3 class="text-2xl md:text-3xl font-bold text-center mb-2">Screen Protector Machine</h3>
-                <p class="text-gray-700 text-center mb-6">making screen protector back films for all kinds of devices</p>
-                <a href="/products/455" target=_blank class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded text-sm font-medium transition-colors">
+                <h3 class="text-2xl md:text-3xl font-bold text-center mb-3 pb-8">Screen Protector Machine</h3>
+                <a href="/products/455" target=_blank class="bg-orange-500 hover:bg-blue-600 text-white px-6 py-2 rounded text-sm font-medium transition-colors">
                     LEARN MORE
                 </a>
             </div>
@@ -224,9 +178,9 @@
         <div class="relative overflow-hidden aspect-[0.92/1] bg-black" style="background-image: url('{{ site.image_base_url }}static/tpl/cable_tech/images/index_product2_2.jpg'); background-size: cover; background-position: center bottom;">
             <div class="p-8 pb-32 flex flex-col items-center relative z-10">
                 <div class="text-amber-500 font-medium mb-3 text-center">NEW RELEASE</div>
-                <h3 class="text-2xl md:text-3xl font-bold text-white text-center mb-2">QUICK-FIT BOX Tempered glass</h3>
-                <p class="text-gray-300 text-center mb-6">Precise  positioning , Super Large Arc 120 Wire</p>
-                <a href="/products/470" target=_blank class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded text-sm font-medium transition-colors">
+                <h3 class="text-2xl md:text-3xl font-bold text-center mb-2  pb-8">Tempered Glass Screen Protector</h3>
+
+                <a href="https://ph.mietubl.website/categories-screen-protector" target=_blank class="bg-orange-500 hover:bg-blue-600 text-white px-6 py-2 rounded text-sm font-medium transition-colors">
                     LEARN MORE
                 </a>
             </div>
@@ -237,167 +191,31 @@
 
 
 <!-- Screen Protector Machine Banner -->
-<div class="relative bg-gradient-to-tr from-black via-gray-900 to-gray-800 bg-cover bg-center py-8 md:py-12 text-white overflow-hidden mt-20">
+<div class="relative bg-gradient-to-tr from-black via-gray-900 to-gray-800 bg-cover bg-center text-white overflow-hidden mt-20">
     <div class="container mx-auto px-4 py-28">
         <div class="flex flex-col md:flex-row items-center md:justify-between md:space-x-4">
-            <div class="w-full md:w-[55%] z-10 text-center md:text-left md:pl-24 mb-8 md:mb-0">
-                <h2 class="text-xl md:text-2xl font-bold  py-3 ">New generation</h2>
-                <h3 class="text-2xl md:text-3xl font-bold  py-3">Screen protector machine</h3>
-                <p class="text-sm text-gray-300 py-3 mx-auto md:mx-0 max-w-md leading-6">As a new generation of screen protector machine, the MTB-CUT M288 screen protector cutting and laminating all-in-one machine meets multiple functions with one machine. And it solves the problem of aligning the screen protector with the screen.</p>
+            <div class="w-full md:w-[55%] z-10 text-center md:text-left md:pl-0 mb-8 md:mb-0">
+                <h3 class="text-xl md:text-2xl font-bold  py-3">New generation</h3>
+                <h2 class="text-2xl md:text-3xl font-bold  py-3">Screen protector machine</h2>
+                <p class="py-3 mx-auto md:mx-0 max-w-xl leading-6">As a new generation of screen protector machine, the MTB-CUT M288 screen protector cutting and laminating all-in-one machine meets multiple functions with one machine. And it solves the problem of aligning the screen protector with the screen.</p>
                 <a href="/products/456" target=_blank class="inline-block bg-orange-500 hover:bg-orange-600 mt-6 text-white px-6 py-2 rounded font-medium transition-colors">
                     Read more
                 </a>
             </div>
-            <div class="w-full md:w-[45%] flex justify-center md:justify-start">
+            <div class="w-full md:w-[45%] flex justify-center md:justify-center">
                 <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/product_m288.png" alt="Screen Protector Machine" class="max-w-[280px] md:max-w-[350px] z-10">
             </div>
         </div>
     </div>
-    <!-- 添加增强的光效和渐变 -->
-    <div class="absolute inset-0 bg-gradient-to-r from-blue-900/20 to-transparent opacity-40"></div>
-    <div class="absolute top-0 right-0 w-2/5 h-full bg-gradient-to-l from-blue-900/30 via-gray-800/20 to-transparent opacity-50"></div>
-    <div class="absolute top-1/4 right-1/3 w-64 h-64 rounded-full bg-blue-300/10 blur-3xl"></div>
-    <div class="absolute bottom-1/4 left-1/3 w-48 h-48 rounded-full bg-gray-400/10 blur-3xl"></div>
 </div>
 
-    {% comment %}<!-- Featured On Section -->{% endcomment %}
-    {% comment %}<div class="container mx-auto px-4 py-12">{% endcomment %}
-        {% comment %}<h2 class="text-2xl font-bold mb-8 text-center">Featured On</h2>{% endcomment %}
-        {% comment %}<div class="grid grid-cols-2 md:grid-cols-4 gap-8">{% endcomment %}
-            {% comment %}<div class="text-center flex flex-col">{% endcomment %}
-                {% comment %}<p class="text-sm/6 text-gray-800 mb-4 flex-grow bold_header">"The CABLETIME USB-C dock delivers exceptional performance for its compact design"</p>{% endcomment %}
-                {% comment %}<div class="h-[100px] flex items-center justify-center">{% endcomment %}
-                    {% comment %}<img src="{{ site.image_base_url }}static/tpl/cable_tech/images/index_feature.png" alt="Forbes Logo" class="max-w-[160px] max-h-[100px]">{% endcomment %}
-                {% comment %}</div>{% endcomment %}
-            {% comment %}</div>{% endcomment %}
-            {% comment %}<div class="text-center flex flex-col">{% endcomment %}
-                {% comment %}<p class="text-sm/6 text-gray-800 mb-4 flex-grow bold_header">"CABLETIME's USB-C dock is one of our favorite charging solutions"</p>{% endcomment %}
-                {% comment %}<div class="h-[100px] flex items-center justify-center">{% endcomment %}
-                    {% comment %}<img src="{{ site.image_base_url }}static/tpl/cable_tech/images/index_feature.png" alt="PCMag Logo" class="max-w-[160px] max-h-[100px]">{% endcomment %}
-                {% comment %}</div>{% endcomment %}
-            {% comment %}</div>{% endcomment %}
-            {% comment %}<div class="text-center flex flex-col">{% endcomment %}
-                {% comment %}<p class="text-sm/6 text-gray-800 mb-4 flex-grow bold_header">"The best value display hub I've tested in years"</p>{% endcomment %}
-                {% comment %}<div class="h-[100px] flex items-center justify-center">{% endcomment %}
-                    {% comment %}<img src="{{ site.image_base_url }}static/tpl/cable_tech/images/index_feature.png" alt="TechRadar Logo" class="max-w-[160px] max-h-[100px]">{% endcomment %}
-                {% comment %}</div>{% endcomment %}
-            {% comment %}</div>{% endcomment %}
-            {% comment %}<div class="text-center flex flex-col">{% endcomment %}
-                {% comment %}<p class="text-sm/6 text-gray-800 mb-4 flex-grow bold_header">"CABLETIME makes some of the most reliable tech accessories"</p>{% endcomment %}
-                {% comment %}<div class="h-[100px] flex items-center justify-center">{% endcomment %}
-                    {% comment %}<img src="{{ site.image_base_url }}static/tpl/cable_tech/images/index_feature.png" alt="CNET Logo" class="max-w-[160px] max-h-[100px]">{% endcomment %}
-                {% comment %}</div>{% endcomment %}
-            {% comment %}</div>{% endcomment %}
-        {% comment %}</div>{% endcomment %}
-    {% comment %}</div>{% endcomment %}
-
-    <!-- Social Media Section -->
-   {% comment %}<div class="container mx-auto px-4 py-8" style="display:">{% endcomment %}
-        {% comment %}<h2 class="text-2xl font-bold p-8 ">Share on Social Media</h2>{% endcomment %}
-        {% comment %}<div class="flex justify-center flex-wrap gap-8">{% endcomment %}
-            {% comment %}<div class="overflow-hidden rounded-lg shadow w-[250px] h-[280px]">{% endcomment %}
-                {% comment %}<img src="https://placehold.co/250x280" alt="Social Media Post 1" class="w-[250px] h-[280px] object-cover">{% endcomment %}
-            {% comment %}</div>{% endcomment %}
-            {% comment %}<div class="overflow-hidden rounded-lg shadow w-[250px] h-[280px]">{% endcomment %}
-                {% comment %}<img src="https://placehold.co/250x280" alt="Social Media Post 1" class="w-[250px] h-[280px] object-cover">{% endcomment %}
-            {% comment %}</div>{% endcomment %}
-            {% comment %}<div class="overflow-hidden rounded-lg shadow w-[250px] h-[280px]">{% endcomment %}
-                {% comment %}<img src="https://placehold.co/250x280" alt="Social Media Post 1" class="w-[250px] h-[280px] object-cover">{% endcomment %}
-            {% comment %}</div>{% endcomment %}
-            {% comment %}<div class="overflow-hidden rounded-lg shadow w-[250px] h-[280px]">{% endcomment %}
-                {% comment %}<img src="https://placehold.co/250x280" alt="Social Media Post 1" class="w-[250px] h-[280px] object-cover">{% endcomment %}
-            {% comment %}</div>{% endcomment %}
-            {% comment %}<div class="overflow-hidden rounded-lg shadow w-[250px] h-[280px]">{% endcomment %}
-                {% comment %}<img src="https://placehold.co/250x280" alt="Social Media Post 1" class="w-[250px] h-[280px] object-cover">{% endcomment %}
-            {% comment %}</div>{% endcomment %}
-        {% comment %}</div>{% endcomment %}
-    {% comment %}</div>{% endcomment %}
-   {% comment %}{% endcomment %}
-    <!--   Program Section -->
-    {% comment %}<div class="container mx-auto px-4 py-8">{% endcomment %}
-        {% comment %}<h2 class="text-2xl font-bold p-8">Agent Plan</h2>{% endcomment %}
-        {% comment %}<div class="grid grid-cols-1 md:grid-cols-3 gap-6">{% endcomment %}
-            {% comment %}<div class="bg-white rounded-lg shadow p-6 text-center">{% endcomment %}
-                {% comment %}<h3 class="bold text-lg mb-4">Distributor</h3>{% endcomment %}
-                {% comment %}<div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">{% endcomment %}
-                    {% comment %}<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">{% endcomment %}
-                        {% comment %}<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />{% endcomment %}
-                    {% comment %}</svg>{% endcomment %}
-                {% comment %}</div>{% endcomment %}
-                {% comment %}<p class="text-sm/6 text-gray-800 bold_header">Become a local Dealer and help your customers with a more complete range.</p>{% endcomment %}
-            {% comment %}</div>{% endcomment %}
-            {% comment %}<div class="bg-white rounded-lg shadow p-6 text-center">{% endcomment %}
-                {% comment %}<h3 class="bold text-lg mb-4">Shine</h3>{% endcomment %}
-                {% comment %}<div class="w-20 h-20 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">{% endcomment %}
-                    {% comment %}<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">{% endcomment %}
-                        {% comment %}<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0v10a2 2 0 01-2 2H6a2 2 0 01-2-2V7m16 0l-8 4m0 0l-8-4m8 4v10" />{% endcomment %}
-                    {% comment %}</svg>{% endcomment %}
-                {% comment %}</div>{% endcomment %}
-                {% comment %}<p class="text-sm/6 text-gray-800 bold_header">Partner with us as a Dealer and bring exclusive solutions to your clients</p>{% endcomment %}
-            {% comment %}</div>{% endcomment %}
-            {% comment %}<div class="bg-white rounded-lg shadow p-6 text-center">{% endcomment %}
-                {% comment %}<h3 class="bold text-lg mb-4">Lead</h3>{% endcomment %}
-                {% comment %}<div class="w-20 h-20 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">{% endcomment %}
-                    {% comment %}<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-orange-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">{% endcomment %}
-                        {% comment %}<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />{% endcomment %}
-                    {% comment %}</svg>{% endcomment %}
-                {% comment %}</div>{% endcomment %}
-                {% comment %}<p class="text-sm/6 text-gray-800 bold_header">Grow as a Regional Leader and deliver exceptional value to your market</p>{% endcomment %}
-            {% comment %}</div>{% endcomment %}
-        {% comment %}</div>{% endcomment %}
-    {% comment %}</div>{% endcomment %}
-
-    {% comment %}<!-- Blogs and News Section -->{% endcomment %}
-    {% comment %}<div class="container mx-auto px-4 py-8">{% endcomment %}
-        {% comment %}<div class="flex justify-between items-center mb-6">{% endcomment %}
-            {% comment %}<h2 class="text-2xl font-bold">Blogs and News</h2>{% endcomment %}
-            {% comment %}<a href="#" class="text-orange-500 text-sm">View All</a>{% endcomment %}
-        {% comment %}</div>{% endcomment %}
-        {% comment %}<div class="grid grid-cols-1 md:grid-cols-3 gap-6">{% endcomment %}
-            {% comment %}<div class="bg-white rounded-lg shadow overflow-hidden">{% endcomment %}
-                {% comment %}<img src="{{ site.image_base_url }}static/tpl/cable_tech/images/index_news_600_300.jpg" alt="Blog Post 1" class="w-full h-48 object-cover">{% endcomment %}
-                {% comment %}<div class="p-4">{% endcomment %}
-                    {% comment %}<h3 class="font-bold text-lg mb-4">How to Use USB-C Cables For Your iPhone</h3>{% endcomment %}
-                    {% comment %}<p class="text-sm/6 text-gray-600 mb-4">The iPhone 15 ditches Lightning for USB-C. Here's everything you need to know about using USB-C with your new iPhone.</p>{% endcomment %}
-                    {% comment %}<div class="flex justify-between items-center">{% endcomment %}
-                        {% comment %}<span class="text-xs text-gray-500">April 12, 2023</span>{% endcomment %}
-                        {% comment %}<a href="#" class="text-orange-500 text-sm">Read More</a>{% endcomment %}
-                    {% comment %}</div>{% endcomment %}
-                {% comment %}</div>{% endcomment %}
-            {% comment %}</div>{% endcomment %}
-            {% comment %}<div class="bg-white rounded-lg shadow overflow-hidden">{% endcomment %}
-                {% comment %}<img src="{{ site.image_base_url }}static/tpl/cable_tech/images/index_news_600_300.jpg" alt="Blog Post 2" class="w-full h-48 object-cover">{% endcomment %}
-                {% comment %}<div class="p-4">{% endcomment %}
-                    {% comment %}<h3 class="font-bold text-lg mb-4">How to Keep Your Setup as Tidy as Possible</h3>{% endcomment %}
-                    {% comment %}<p class="text-sm/6 text-gray-600 mb-4 ">A tidy desk setup leads to a more productive work day. We've got tips on how to organize cables and accessories.</p>{% endcomment %}
-                    {% comment %}<div class="flex justify-between items-center">{% endcomment %}
-                        {% comment %}<span class="text-xs text-gray-500">March 28, 2023</span>{% endcomment %}
-                        {% comment %}<a href="#" class="text-orange-500 text-sm">Read More</a>{% endcomment %}
-                    {% comment %}</div>{% endcomment %}
-                {% comment %}</div>{% endcomment %}
-            {% comment %}</div>{% endcomment %}
-            {% comment %}<div class="bg-white rounded-lg shadow overflow-hidden">{% endcomment %}
-                {% comment %}<img src="{{ site.image_base_url }}static/tpl/cable_tech/images/index_news_600_300.jpg" alt="Blog Post 3" class="w-full h-48 object-cover">{% endcomment %}
-                {% comment %}<div class="p-4">{% endcomment %}
-                    {% comment %}<h3 class="font-bold text-lg mb-4">Review: The Advantages of USB 4K/8K HDMI Converter</h3>{% endcomment %}
-                    {% comment %}<p class="text-sm/6 text-gray-600 mb-4">USB-C to HDMI dongles are essential for modern laptops. Here's why our converters stand out from the competition.</p>{% endcomment %}
-                    {% comment %}<div class="flex justify-between items-center">{% endcomment %}
-                        {% comment %}<span class="text-xs text-gray-500">March 15, 2023</span>{% endcomment %}
-                        {% comment %}<a href="#" class="text-orange-500 text-sm">Read More</a>{% endcomment %}
-                    {% comment %}</div>{% endcomment %}
-                {% comment %}</div>{% endcomment %}
-            {% comment %}</div>{% endcomment %}
-        {% comment %}</div>{% endcomment %}
-    {% comment %}</div>{% endcomment %}
-
-
 {% collection slug="news" limit=3 template="__collection_list_3.liquid" %}
 
 
 <!-- Delivery Services Section -->
 
     <div class="container mx-auto px-4 mb-24">
-        <h2 class="text-3xl md:text-5xl	 font-bold py-24 text-center">Delivery</h2>
+        <h3 class="text-3xl md:text-5xl	 font-bold py-24 text-center">Delivery</h3>
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
             <!-- Delivery Time -->
             <div class="bg-gray-200 p-6 rounded flex flex-col items-center text-center">
@@ -448,57 +266,7 @@
 
 {% include '_footer.liquid' %}
 {% include '_footer_js.liquid' %}
-
-<style>
-
-
-    /* 导航菜单样式 */
-    .dropdown {
-        position: relative;
-        padding: 8px 12px;
-        transition: all 0.3s ease;
-    }
-
-    /* 确保下拉菜单内容位置正确 */
-    .dropdown-content {
-        top: 100%;
-        left: 0;
-    }
-
-    /* 整个导航条悬浮样式 */
-    .nav-container {
-        transition: all 0.3s ease;
-        width: 100%;
-        padding-top: 0;
-        padding-bottom: 0;
-    }
-
-    .nav-container:hover {
-        background-color: rgba(255, 255, 255);
-    }
-
-    .nav-container:hover .dropdown > a {
-        color: #1A1A1A !important;
-    }
-
-    /*.nav-container:hover .dropdown > a,*/
-    /*.nav-container:hover .font-bold.text-xl {*/
-    /*    color: #999999 !important; !* text-gray-800 *!*/
-    /*}*/
-
-    /*.nav-container:hover .dropdown:hover > a {*/
-    /*    color: #999999 !important; !* text-orange-500 *!*/
-    /*}*/
-
-    /* 确保导航背景无间隙覆盖 */
-    .nav-wrapper {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        z-index: 20;
-        width: 100%;
-    }
-</style>
+<link rel="stylesheet" href="{{ site.image_base_url }}static/tpl/cable_tech/css/css_home.css">
+<script src="{{ site.image_base_url }}static/tpl/cable_tech/js/home.js" defer></script>
 </body>
 </html>

resources/views/liquid_src/1/cable_tech/pages_detail.liquid

@@ -45,13 +45,15 @@
 <body class="bg-gray-100 tracking-wide">
 {% include '_header.liquid' %}
 
+ 
+
 <!-- Breadcrumb Navigation -->
 <div class=" pt-8">
     <div class="container mx-auto px-4 p-8">
-        <nav class="flex text-sm">
+        <nav class="text-sm">
 
             {% for breadcrumb in breadcrumbs %}
-            <a href="{{ breadcrumb.url }}" class="text-gray-600 hover:text-orange-500">  {{ breadcrumb.name }} </a>
+            <a href="{{ breadcrumb.url }}" class="text-gray-600 hover:text-orange-500" title=" {{ breadcrumb.name }}">  {{ breadcrumb.name }} </a>
             {% if forloop.index != forloop.length %}
                 <span class="mx-2 text-gray-500">/</span>
             {% endif %}
@@ -59,17 +61,11 @@
     </nav>
 </div>
 </div>
-<!-- Knowledge Header Section -->
-<div class="bg-gray-100 py-8">
-    <div class="container mx-auto px-4 text-center">
-        <h1 class="text-4xl font-bold mb-6">{{ tag.name }}</h1>
 
-    </div>
-</div>
 
 
 <!-- Article Content -->
-<div class="container mx-auto px-4 py-8">
+<article class="container mx-auto px-4 py-8">
     <div class="max-w-4xl mx-auto">
         <!-- Article Header -->
         <h1 class="text-3xl font-bold mb-4">  {{ page.title | raw }}</h1>
@@ -84,7 +80,7 @@
 
 
     </div>
-</div>
+</article>
 
 
 <!-- Pagination -->
@@ -98,7 +94,7 @@
 
 
                 <li class="page-item">
-                    <i class="fas fa-arrow-left fa-xs"></i> <a class="page-link mx-1 px-3 py-1 bg-gray-200 rounded" href="{{ paginator.previous_page_url }}" title="{{ paginator.previous_page_title }} tabindex="-1">
+                    <i class="fas fa-arrow-left fa-xs"></i> <a class="page-link mx-1 px-3 py-1 bg-gray-200 rounded" href="{{ paginator.previous_page_url }}" title="{{ paginator.previous_page_title }}" tabindex="-1">
                     {{ paginator.previous_page_title }}
                     </a>
                 </li>
@@ -121,8 +117,39 @@
     </nav>
 </div>
 
+<!-- You May Also Like -->
+{% if relatedProducts %}
+<div class="container mx-auto px-4 mb-24 ">
+    <h2 class="text-3xl md:text-5xl	 font-bold py-24 text-center">Related products</h2>
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+        {% for item in relatedProducts %}
+
+            <!-- Product 1 -->
+            <div class="bg-white  overflow-hidden ">
+                <div class="relative  p-6 ">
+                    <div class="hot-sale-badge">Hot</div>
+                    <a href="/products/{{ item.id }}" title="{{ item.title | strip_html }}">
+                        {% if item.images and item.images[0].image_url %}
+                            {% assign image_url = item.images[0].image_url %}
+                            <img src="{% if image_url contains 'http' %}{{ image_url }}?x-oss-process=image/resize,m_pad,w_400,h_400{% else %}{{ site.image_base_url }}{{ image_url | append: '?x-oss-process=image/resize,m_pad,w_400,h_400' }}{% endif %}"   alt="{{ item.title | strip_html }}" class="w-full h-80 object-contain p-4">
+                        {% else %}
+                            <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/product_default.jpg" class="card-img-top product-image"  alt="{{ item.title | strip_html }}" class="w-full h-80 object-contain p-4">
+                        {% endif %}
+                    </a>
+                </div>
+                <div class="p-4 bg-blue">
+                    <div class="product-specs text-xs text-gray-500 mb-1">{{ item.seo_keywords | strip_html }}</div>
+                    <h3 class="product-title font-medium text-sm mb-2"> <a href="/products/{{ item.id }}" title="{{ item.title | strip_html }}">{{ item.title | strip_html }}</a></h3>
+                </div>
+            </div>
+
+        {% endfor %}
+    </div>
+</div>
+{% endif %}
+
 
 {% include '_footer.liquid' %}
 {% include '_footer_js.liquid' %}
 </body>
-</html>
+</html>

resources/views/liquid_src/1/cable_tech/pages_sp_aboutus.liquid

@@ -70,9 +70,8 @@
 
     <div class="container mx-auto px-4 relative z-10  py-16">
         <div class="max-w-3xl  text-left">
-            <h2 class="text-5xl font-bold mb-8 text-white">INNOVATION</h2>
+            <h2 class="text-5xl font-bold mb-8 text-white">Innovation</h2>
             <p class="text-white mb-6 text-base">Mietubl is a company dedicated to the wholesale of mobile and digital product accessories. Our professional design team places a strong emphasis on understanding market needs, seamlessly blending the latest trends with aesthetic appeal and user-centric design. We strive to create products that are not only functional but also visually captivating.</p>
-            <p class="text-white mb-6 text-base">By attentively listening to our users and conducting thorough market research, we develop innovative solutions that stand out in the competitive landscape.</p>
             <p class="text-white text-base">At Mietubl, we embrace the design philosophy of harmonizing aesthetics with practicality, ensuring that more users can experience the convenience and benefits technology has to offer.</p>
         </div>
     </div>
@@ -119,43 +118,6 @@
 </div>
 
 
-<!-- Global Business Section -->
-<div class="py-0 bg-white">
-        <div class="container mx-auto px-4  ">
-            <h2 class="text-3xl md:text-5xl	 font-bold py-24 text-center">GLOBAL BUSINESS</h2>
-
-            <!-- World Map -->
-            <div class="mb-12">
-                <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/aboutus2.jpg" alt="Global Network" class="w-full">
-            </div>
-
-            <!-- Statistics -->
-            <div class="grid grid-cols-2 md:grid-cols-3 gap-8 text-center">
-                <div>
-                    <div class="text-5xl font-bold text-orange-500 mb-2">60+</div>
-                    <div class="text-gray-600 text-base">Partners</div>
-                </div>
-                <div>
-                    <div class="text-5xl font-bold text-orange-500 mb-2">300+</div>
-                    <div class="text-gray-600 text-base">SKUs</div>
-                </div>
-                <div>
-                    <div class="text-5xl font-bold text-orange-500 mb-2">80M+</div>
-                    <div class="text-gray-600 text-base">Users</div>
-                </div>
-            </div>
-        </div>
-</div>
-
-<div class="py-16 bg-white">
-    <div class="container mx-auto px-4 mb-24 ">
-        <h2 class="text-3xl md:text-5xl	 font-bold py-24 text-center">Certification</h2>
-
-        <div class="mb-12">
-            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/aboutus3.jpg" alt="Certification" class="w-full">
-        </div>
-        </div>
-    </div>
 
 <div class="container mx-auto px-4 py-0  ">
 
@@ -215,7 +177,6 @@
     </form>
 </div>
 
-
 {% include '_footer.liquid' %}
 {% include '_footer_js.liquid' %}
 </body>

resources/views/liquid_src/1/cable_tech/pages_sp_contact.liquid

@@ -69,7 +69,7 @@
                     <i class="fas fa-handshake text-2xl text-orange-500"></i>
                 </div>
                 <h3 class="text-xl font-semibold mb-2">Coopertation</h3>
-                <p class="text-gray-600 mb-2">partner@mietubl.com</p>
+                <p class="text-gray-600 mb-2">mietubl.ph@gmail.com</p>
             </div>
 
             <!-- Customer service -->
@@ -78,7 +78,7 @@
                     <i class="fas fa-headset text-2xl text-orange-500"></i>
                 </div>
                 <h3 class="text-xl font-semibold mb-2">Customer service</h3>
-                <p class="text-gray-600 mb-2">support@mietubl.com</p>
+                <p class="text-gray-600 mb-2">+63 992 050 2040</p>
             </div>
 
             <!-- Marketing -->
@@ -87,7 +87,7 @@
                     <i class="fas fa-bullhorn text-2xl text-orange-500"></i>
                 </div>
                 <h3 class="text-xl font-semibold mb-2">Marketing</h3>
-                <p class="text-gray-600 mb-2">marketing@mietubl.com</p>
+                <p class="text-gray-600 mb-2">mietubl.ph@gmail.com</p>
             </div>
         </div>
 

resources/views/liquid_src/1/cable_tech/pages_sp_distributor.liquid

@@ -160,7 +160,7 @@
         <!-- Package Support -->
         <div class="flex flex-col md:flex-row items-center mb-16">
             <div class="w-full md:w-1/2">
-                <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/distributor_banner2.jpg" alt="Package Support"  class="w-full rounded-lg ">
+                <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/distributor_banner3.jpg" alt="Package Support"  class="w-full rounded-lg ">
             </div>
             <div class="w-full md:w-1/2 md:pl-12 mt-8 md:mt-0">
                 <h3 class="text-5xl font-bold mb-4">Package Support</h3>
@@ -178,32 +178,6 @@
                 <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/distributor_banner2.jpg" alt="Physical Materials Support" class="w-full rounded-lg ">
             </div>
         </div>
-
-        <!-- Global Exhibition Support -->
-        <div class="flex flex-col md:flex-row items-center">
-            <div class="w-full md:w-1/2">
-                <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/distributor_banner2.jpg" alt="Global Exhibition Support"  class="w-full rounded-lg ">
-            </div>
-            <div class="w-full md:w-1/2 md:pl-12 mt-8 md:mt-0">
-                <h3 class="text-5xl font-bold mb-4">Global Exhibition Support</h3>
-                <p class="text-base text-gray-600 mb-4">MIETUBL exhibits regularly, inviting our distributors to join us at major electronics trade shows around the world.</p>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- MIETUBL Market -->
-<div class="relative bg-cover bg-center py-16 md:py-24" style="background-image: url('{{ site.image_base_url }}static/tpl/cable_tech/images/distributor_bg3.jpg');">
-
-    <div class="container mx-auto px-4 relative z-10 md:py-24">
-        <div class="flex flex-col md:flex-row">
-            <div class="md:w-1/2">
-            </div>
-            <div class="w-full md:w-1/2  ">
-                <h2 class="text-5xl font-bold mb-6 py-6">MIETUBL Market</h2>
-                <p class="mb-4  text-lg">Metabo products are distributed in 130 countries worldwide and have been recognized by our long-standing customers.</p>
-            </div>
-        </div>
     </div>
 </div>
 

resources/views/liquid_src/1/cable_tech/products_categories.liquid

@@ -40,23 +40,6 @@
 <body class="bg-gray-100 tracking-wide">
 {% include '_header.liquid' %}
 
-
-
-
-
-<!-- Category Banner -->
-<div class="category-banner" style="background-image: url('{{ site.image_base_url }}static/tpl/cable_tech/images/category_banner_bg4b.jpg'); background-size: cover; background-position: left;">
-    <div class="container mx-auto px-4">
-        <div class="w-full md:w-1/2 text-white">
-            <div class="bg-orange-500 inline-block px-3 py-1 text-xs mb-2">New</div>
-            <h1 class="text-4xl md:text-5xl font-bold mb-2">{{category.name}}</h1>
-            <p class="text-sm text-gray-300 mb-4">{{category.seo_title}}</p>
-        </div>
-    </div>
-</div>
-
-
-
 <!-- Breadcrumb Navigation -->
 <div class=" pt-8">
     <div class="container mx-auto px-4 p-8">
@@ -77,25 +60,25 @@
 <div class="container mx-auto px-4 py-8">
     <div class="flex flex-col md:flex-row">
         <!-- Sidebar Categories -->
-        <div class="w-full md:w-1/5 pr-0 md:pr-6 mb-6 md:mb-0">
-            <div class="bg-white p-6">
+        <div class="w-full md:w-3/12 pr-0 md:pr-6 mb-6 md:mb-0">
+            <nav class="bg-white p-6">
                 <ul class="space-y-6">
-<li><a href="/products/categories/screen-protector" class="text-gray-900 hover:text-orange-500 font-medium  text-base"			>Screen Protector</a></li>
-<li><a href="/products/categories/intelligent-film-cutting-machine" class="text-gray-900 hover:text-orange-500 font-medium  text-base"	>Intelligent film cutting machine</a></li>
-<li><a href="/products/categories/data-cable" class="text-gray-900 hover:text-orange-500 font-medium  text-base"			>Data Cable</a></li>
-<li><a href="/products/categories/bluetooth-headphones" class="text-gray-900 hover:text-orange-500 font-medium  text-base"		>Bluetooth Headphones</a></li>
-<li><a href="/products/categories/car-charger" class="text-gray-900 hover:text-orange-500 font-medium  text-base"			>Car Charger</a></li>
-<li><a href="/products/categories/wall-charger" class="text-gray-900 hover:text-orange-500 font-medium  text-base"			>Wall Charger</a></li>
-<li><a href="/products/categories/bluetooth-speaker" class="text-gray-900 hover:text-orange-500 font-medium  text-base"			>Bluetooth Speaker</a></li>
-<li><a href="/products/categories/portable-power-supply" class="text-gray-900 hover:text-orange-500 font-medium  text-base"		>Portable Power Supply</a></li>
-<li><a href="/products/categories/cutting-machine-consumables" class="text-gray-900 hover:text-orange-500 font-medium  text-base"	>Cutting Machine Consumables</a></li>
+<li><a href="/categories-screen-protector" class="text-gray-900 hover:text-orange-500 font-medium  text-base"	                title="Screen Protector">Screen Protector</a></li>
+<li><a href="/categories-intelligent-film-cutting-machine" class="text-gray-900 hover:text-orange-500 font-medium  text-base"	title="Intelligent film cutting machine"	>Intelligent film cutting machine</a></li>
+<li><a href="/categories-data-cable" class="text-gray-900 hover:text-orange-500 font-medium  text-base"			            title="Data Cable"	>Data Cable</a></li>
+<li><a href="/categories-bluetooth-headphones" class="text-gray-900 hover:text-orange-500 font-medium  text-base"	        	title="Bluetooth Headphones"	>Bluetooth Headphones</a></li>
+<li><a href="/categories-car-charger" class="text-gray-900 hover:text-orange-500 font-medium  text-base"		            	title="Car Charger"	>Car Charger</a></li>
+<li><a href="/categories-wall-charger" class="text-gray-900 hover:text-orange-500 font-medium  text-base"		            	title="Wall Charger"	>Wall Charger</a></li>
+<li><a href="/categories-bluetooth-speaker" class="text-gray-900 hover:text-orange-500 font-medium  text-base"		        	title="Bluetooth Speaker"	>Bluetooth Speaker</a></li>
+<li><a href="/categories-portable-power-supply" class="text-gray-900 hover:text-orange-500 font-medium  text-base"		        title="Portable Power Supply"	>Portable Power Supply</a></li>
+<li><a href="/categories-cutting-machine-consumables" class="text-gray-900 hover:text-orange-500 font-medium  text-base"		title="Cutting Machine Consumables">Cutting Machine Consumables</a></li>
 
                 </ul>
-            </div>
+            </nav>
         </div>
 
         <!-- Products Grid -->
-        <div class="w-full md:w-4/5">
+        <div class="w-full md:w-9/12">
             <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                 {% for item in products %}
                     <!-- Product 1 -->
@@ -107,7 +90,7 @@
                                     {% assign image_url = item.images[0].image_url %}
                                     <img src="{% if image_url contains 'http' %}{{ image_url }}?x-oss-process=image/resize,m_pad,w_400,h_400{% else %}{{ site.image_base_url }}{{ image_url | append: '?x-oss-process=image/resize,m_pad,w_400,h_400' }}{% endif %}"   alt="{{ item.title | strip_html }}" class="w-full h-80 object-contain p-4">
                                 {% else %}
-                                    <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/product_default.jpg" class="card-img-top product-image"  alt="{{ item.title | strip_html }}" class="w-full h-80 object-contain p-4">
+                                    <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/product_default.jpg" class="card-img-top product-image w-full h-80 object-contain p-4"  alt="{{ item.title | strip_html }}">
                                 {% endif %}
                             </a>
                         </div>
@@ -125,13 +108,13 @@
                 <ul class="pagination justify-content-center flex-wrap flex justify-center">
                     {% if paginator.previous_page %}
                         <li class="page-item">
-                            <a class="page-link mx-1 px-3 py-1 bg-gray-200 rounded" href="{{ paginator.previous_page_url }}" tabindex="-1">
+                            <a class="page-link mx-1 px-3 py-1 bg-gray-200 rounded" href="{{ paginator.previous_page_url }}" tabindex="-1" title="previous page">
                                 <i class="fas fa-arrow-left fa-xs"></i>
                             </a>
                         </li>
                     {% else %}
                         <li class="page-item disabled">
-                            <a class="page-link mx-1 px-3 py-1 bg-gray-200 rounded text-gray" href="#" tabindex="-1">
+                            <a class="page-link mx-1 px-3 py-1 bg-gray-200 rounded text-gray" href="#" tabindex="-1" title="previous page">
                                 <i class="fas fa-arrow-left fa-xs"></i>
                             </a>
                         </li>
@@ -140,24 +123,24 @@
                     {% for page in paginator.pages %}
                         {% if page == paginator.current_page %}
                             <li class="page-item active" aria-current="page">
-                                <a class="page-link mx-1 px-3 py-1 bg-orange-500 text-white rounded" href="#">{{ page }}</a>
+                                <a class="page-link mx-1 px-3 py-1 bg-orange-500 text-white rounded" href="#" title="page {{ page }}">{{ page }}</a>
                             </li>
                         {% else %}
                             <li class="page-item">
-                                <a class="page-link mx-1 px-3 py-1 bg-gray-200 rounded" href="{{ paginator.page_url[page] }}">{{ page }}</a>
+                                <a class="page-link mx-1 px-3 py-1 bg-gray-200 rounded" href="{{ paginator.page_url[page] }}" title="page {{ page }}">{{ page }}</a>
                             </li>
                         {% endif %}
                     {% endfor %}
 
                     {% if paginator.next_page %}
                         <li class="page-item">
-                            <a class="page-link mx-1 px-3 py-1 bg-gray-200 rounded" href="{{ paginator.next_page_url }}">
+                            <a class="page-link mx-1 px-3 py-1 bg-gray-200 rounded" href="{{ paginator.next_page_url }}" title="next page">
                                 <i class="fas fa-arrow-right fa-xs"></i>
                             </a>
                         </li>
                     {% else %}
                         <li class="page-item disabled">
-                            <a class="page-link mx-1 px-3 py-1 bg-gray-200 rounded text-gray" href="#">
+                            <a class="page-link mx-1 px-3 py-1 bg-gray-200 rounded text-gray" href="#" title="next page">
                                 <i class="fas fa-arrow-right fa-xs"></i>
                             </a>
                         </li>
@@ -170,7 +153,7 @@
 
 
 <!-- Thunderbolt Information Section -->
-<div class="bg-gray-100 py-8 border-t border-gray-200">
+<div class="bg-gray-100 py-24 border-t border-gray-200">
     <div class="container mx-auto px-4">
         <div class="max-w-full mx-auto text-gray-700 text-sm leading-relaxed">
             <p>Thunderbolt cable is a computer connection cable technology, released by Intel. Use this <a href="#" class="text-gray-900 hover:underline">technology</a> to connect cables with built-in E-marker chips from Intel, which not only can transfer files like <a href="#" class="text-gray-900 hover:underline">USB cables</a>, but also power, video, and network signals. Realize a single cable to link multiple devices. CableTime Thunderbolt cable is super fast: 40 Gb/s. It can enable efficient charging and stable charging. If you want to bulk buy <a href="#" class="text-gray-900 hover:underline">Thunderbolt 4 cable</a> and <a href="#" class="text-gray-900 hover:underline">Thunderbolt 3 cable</a>, we can apply a discount for you. Believe me, the wholesale price is amazing! <a href="#" class="font-medium text-gray-900 hover:underline">Contact Us Now!</a></p>

resources/views/liquid_src/1/cable_tech/products_detail.liquid

@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html lang="{{site.dist.country_lang }}">
 <head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<meta name="robots" content="index, follow">
-<meta property="og:locale" content="{{site.dist.country_lang | replace: '-', '_' }}" />
-<meta name="author" content="Mietubl">
-<meta name="description" content="{{ product.seo_description  | strip_html| strip_newlines }}">
-<meta name="keywords" content="{{product.seo_keywords}}">
-<title>{{product.seo_title}}</title>
-<meta name="author" content="Mietubl">
-{% include '_header_css.liquid' %}
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="robots" content="index, follow">
+    <meta property="og:locale" content="{{site.dist.country_lang | replace: '-', '_' }}" />
+    <meta name="author" content="Mietubl">
+    <meta name="description" content="{{ product.seo_description  | strip_html| strip_newlines }}">
+    <meta name="keywords" content="{{product.seo_keywords}}">
+    <title>{{product.seo_title}}</title>
+    <meta name="author" content="Mietubl">
+    {% include '_header_css.liquid' %}
     <script type="application/ld+json">
         {
             "@context": "https://schema.org",
@@ -28,14 +28,14 @@
             "sku": "{{product.sku | strip_html }}",
             "offers": {
                 "@type": "Offer",
-                "price": "To be negotiated",
+                "price": "To be negotiated",                
                 "priceCurrency": "PESO",
                 "availability": "https://schema.org/InStock",
                 "itemCondition": "https://schema.org/NewCondition",
                 "url": "{{site.current_url}}"
             }
         }
-
+      
     </script>
 </head>
 <body class="bg-gray-100 tracking-wide">
@@ -44,10 +44,10 @@
   <!-- Breadcrumb Navigation -->
   <div class=" pt-8">
     <div class="container mx-auto px-4 p-8">
-      <nav class="flex text-sm">
+      <nav class="text-sm">
 
           {% for breadcrumb in breadcrumbs %}
-          <a href="{{ breadcrumb.url }}" class="text-gray-600 hover:text-orange-500">  {{ breadcrumb.name }} </a>
+          <a href="{{ breadcrumb.url }}" class="text-gray-600 hover:text-orange-500" titie="{{ breadcrumb.name }}">  {{ breadcrumb.name }} </a>
           {% if forloop.index != forloop.length %}
               <span class="mx-2 text-gray-500">/</span>
           {% endif %}
@@ -61,14 +61,14 @@
         <div class="flex flex-col md:flex-row">
             <!-- Product Images -->
             <div class="w-full sm:w-1/2 mb-8 sm:mb-0 px-2 ">
-                <div class="bg-white p-6 max-w-[660px] ">
+                <div class="bg-white p-6 max-w-[600px] ">
                     <!-- Main Product Image -->
                     <div class="mb-4">
 
                         {% if product.images and product.images.size > 0 %}
 
                             {% assign image_url = product.images[0].image_url %}
-                            <img src="{% if image_url contains 'http' %}{{ image_url }}?x-oss-process=image/resize,w_700,m_lfit{% else %}{{ site.image_base_url }}{{ image_url }}?x-oss-process=image/resize,w_500,m_lfit{% endif %}" alt="{{product.title | strip_html }}" class="w-full h-auto" id="main-product-image">
+                            <img src="{% if image_url contains 'http' %}{{ image_url }}?x-oss-process=image/resize,w_600,m_lfit{% else %}{{ site.image_base_url }}{{ image_url }}?x-oss-process=image/resize,w_600,m_lfit{% endif %}" alt="{{product.title | strip_html }}" class="w-full h-auto" id="main-product-image">
 
                         {% else %}
 
@@ -78,13 +78,13 @@
                     </div>
 
                     <!-- Thumbnail Gallery -->
-                    <div class="grid grid-cols-7 gap-2" id="thumbnail-gallery">
+                    <div class="grid grid-cols-4 md:grid-cols-6 gap-2" id="thumbnail-gallery">
 
                         {% if product.images and product.images.size > 0 %}
                             {% for item in product.images %}
                                 {% assign image_url = item.image_url %}
-                                <div class="{% if forloop.index == 1 %}border-orange-500 active{% endif %} border p-1 rounded thumbnail-item" data-image="{% if image_url contains 'http' %}{{ image_url }}?x-oss-process=image/resize,w_700,m_lfit{% else %}{{ site.image_base_url }}{{ image_url }}?x-oss-process=image/resize,w_700,m_lfit{% endif %}">
-                                    <img src="{% if image_url contains 'http' %}{{ image_url }}?x-oss-process=image/resize,w_700,m_lfit{% else %}{{ site.image_base_url }}{{ image_url }}?x-oss-process=image/resize,w_700,m_lfit{% endif %}" alt="{{product.title | strip_html }}"
+                                <div class="{% if forloop.index == 1 %}border-orange-500 active{% endif %} border p-1 rounded thumbnail-item" data-image="{% if image_url contains 'http' %}{{ image_url }}?x-oss-process=image/resize,w_600,m_lfit{% else %}{{ site.image_base_url }}{{ image_url }}?x-oss-process=image/resize,w_600,m_lfit{% endif %}">
+                                    <img src="{% if image_url contains 'http' %}{{ image_url }}?x-oss-process=image/resize,w_600,m_lfit{% else %}{{ site.image_base_url }}{{ image_url }}?x-oss-process=image/resize,w_600,m_lfit{% endif %}" alt="{{product.title | strip_html }}"
                                          class="w-full h-auto">
                                 </div>
 
@@ -96,61 +96,65 @@
                                 <img src="{{ site.image_base_url }}static/common/images/product_default.jpg" alt="{{product.title | strip_html }}" class="w-full h-auto">
                             </div>
                         {% endif %}
-
-
-
                     </div>
                 </div>
             </div>
 
             <!-- Product Info -->
-            <div class="md:w-1/2 md:pl-8">
+            <div class="sm:w-1/2">
                 <h1 class="text-4xl	 font-bold mb-8">{{product.title | strip_html }}</h1>
-                <p class="text-sm text-gray-600 mb-8">{{ product.seo_description | strip_html }}</p>
+                <h3 class="text-base text-gray-400 mb-8">Model:{{ product.sku | strip_html }}</h3>
+                <h2 class="text-lg text-gray-600 mb-8">{{ product.seo_description | strip_html }}</h2>
+                {% if product.sku %}
+
+                {% endif %}
                 <!-- Product Meta Info -->
-                <div class="border-t border-gray-200 pt-4">
+                <div class="border-t border-gray-200 pt-8 mb-8 ">
                     {% for item in product.parameters %}
 
-                        <div class="flex flex-wrap text-lg	 mb-2">
-                            <span class="text-gray-500 min-w-[260px]">{{ item.key }}:</span>
+                        <div class="flex flex-wrap mb-2">
+                            <span class="min-w-40">{{ item.key }}:</span>
                             <span class="flex-1 break-words pl-2">{{ item.value }}</span>
                         </div>
                     {% endfor %}
                 </div>
                 <!-- Action Buttons -->
-                <div class="flex mb-6">
-                    <button class="bg-orange-500 text-white px-8 py-3 rounded-md hover:bg-orange-600 transition mr-3"><a href="/contact">Get a quote</a></button>
+                <div class="flex mb-8">
+                    <button class="bg-orange-500 text-white px-8 py-3 rounded-md hover:bg-orange-600 transition mr-3" onclick="openQuoteModal()">Get a quote</button>
                 </div>
             </div>
         </div>
     </div>
 
+{% if relatedPages %}
 <!-- Product Description Section -->
 <div class="bg-white py-24 my-24">
-    <div class="container mx-auto px-4">
+    <div class="container product-content mx-auto px-4">
         {{product.content | raw }}
     </div>
-</div>
-
-<!-- FAQ Section -->
-<div class="mt-16">
-    <h2 class="text-2xl font-bold mb-8 text-center">FAQ</h2>
-
-    <div class="max-w-3xl mx-auto">
-        <!-- FAQ Item 1 -->
-        <div class="mb-6 border-b border-gray-200 pb-6">
-            <h3 class="font-bold text-lg mb-2">这款USB-C集线器是否适配所有MacBook设备？</h3>
-            <p class="text-gray-600">是的，此集线器兼容所有配备USB-C端口的MacBook设备，包括MacBook Pro、MacBook Air以及最新的M1/M2芯片设备。</p>
+    <!-- FAQ Section -->
+    <div class="mt-16">
+        <h2 class="text-3xl md:text-5xl	 font-bold py-24 text-center">FAQ</h2>
+
+        <div class="max-w-3xl mx-auto">
+           
+                {% for item in relatedPages %}
+                    <div class="mb-6 border-b border-gray-200 pb-6">
+                        <h3 class="font-bold text-lg mb-2">{{item.seo_title}}</h3>
+                        <p class="text-gray-600 text-base">{{item.content| raw}}</p>
+                    </div>
+                {% endfor %}
+           
         </div>
     </div>
 </div>
+{% endif %}
 
 
-
-    <!-- You May Also Like -->
+<!-- You May Also Like -->
 
         <div class="container mx-auto px-4 mb-24 ">
-            <h2 class="text-3xl md:text-5xl	 font-bold py-24 text-center">Related products</h2>
+            <h3 class="text-3xl md:text-5xl	 py-24 text-center">Related products</h3>
             <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                 {% for item in relatedProducts %}
 
@@ -163,7 +167,7 @@
                                     {% assign image_url = item.images[0].image_url %}
                                     <img src="{% if image_url contains 'http' %}{{ image_url }}?x-oss-process=image/resize,m_pad,w_400,h_400{% else %}{{ site.image_base_url }}{{ image_url | append: '?x-oss-process=image/resize,m_pad,w_400,h_400' }}{% endif %}"   alt="{{ item.title | strip_html }}" class="w-full h-80 object-contain p-4">
                                 {% else %}
-                                    <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/product_default.jpg" class="card-img-top product-image"  alt="{{ item.title | strip_html }}" class="w-full h-80 object-contain p-4">
+                                    <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/product_default.jpg" class="card-img-top product-image w-full h-80 object-contain p-4"  alt="{{ item.title | strip_html }}" >
                                 {% endif %}
                             </a>
                         </div>
@@ -178,48 +182,74 @@
             </div>
 
         </div>
+{% include '_footer.liquid' %}
+{% include '_footer_js.liquid' %}
+    <!-- Quote Modal -->
+    <div id="quoteModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full">
+        <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
+            <div class="flex justify-between items-center mb-4">
+                <h4 class="text-2xl font-bold text-gray-800">Get a quote</h4>
+                <button onclick="closeQuoteModal()" class="text-gray-500 hover:text-gray-700">
+                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                    </svg>
+                </button>
+            </div>
+            <form id="form_contact" data-action="/contact" class="bg-white rounded px-8 pt-6 pb-8 mb-4" role="form">
+                <input type="hidden" name="consulting_products" value="{{product.title | strip_html}}">
+                <div class="flex flex-wrap -mx-3 mb-6">
+                    <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
+                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="customer_name">
+                            Your name
+                        </label>
+                        <input type="text" name="customer_name" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" required>
+                        <div class="text-red-500 text-xs italic mt-1"></div>
+                    </div>
+                    <div class="w-full md:w-1/2 px-3">
+                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="email">
+                            Email address
+                        </label>
+                        <input type="email" name="email" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" required>
+                        <div class="text-red-500 text-xs italic mt-1"></div>
+                    </div>
+                </div>
 
+                <div class="flex flex-wrap -mx-3 mb-6">
+                    <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
+                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="company_name">
+                            Company name
+                        </label>
+                        <input type="text" name="company_name" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
+                        <div class="text-red-500 text-xs italic mt-1"></div>
+                    </div>
+                    <div class="w-full md:w-1/2 px-3">
+                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="whats_app">
+                            Phone/whats_app
+                        </label>
+                        <input type="text" name="whats_app" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" required>
+                        <div class="text-red-500 text-xs italic mt-1"></div>
+                    </div>
+                </div>
 
+                <div class="flex flex-wrap -mx-3 mb-6">
+                    <div class="w-full px-3">
+                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="content">
+                            Message
+                        </label>
+                        <textarea name="content" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500 resize-none" rows="5" required></textarea>
+                        <div class="text-red-500 text-xs italic mt-1"></div>
+                    </div>
+                </div>
 
-    <style>
-        .thumbnail-item {
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-        .thumbnail-item:hover {
-            border-color: #f97316 !important;
-            transform: scale(1.05);
-            box-shadow: 0 0 5px rgba(0,0,0,0.2);
-        }
-    </style>
-
-<script>
-    // Product Gallery Thumbnail Functionality
-    document.addEventListener('DOMContentLoaded', function() {
-        const mainImage = document.getElementById('main-product-image');
-        const thumbnails = document.querySelectorAll('.thumbnail-item');
-
-        // Add click event to each thumbnail
-        thumbnails.forEach(thumbnail => {
-            thumbnail.addEventListener('click', function() {
-                // Update main image src with the data-image attribute
-                const newImageSrc = this.getAttribute('data-image');
-                mainImage.src = newImageSrc;
-
-                // Remove active class from all thumbnails
-                thumbnails.forEach(item => {
-                    item.classList.remove('border-orange-500');
-                    item.classList.add('border');
-                });
-
-                // Add active class to clicked thumbnail
-                this.classList.remove('border');
-                this.classList.add('border-orange-500', 'border-2');
-            });
-        });
-    });
-</script>
-{% include '_footer.liquid' %}
-{% include '_footer_js.liquid' %}
+                <div class="flex items-center justify-start">
+                    <button type="reset" class="d-none"></button>
+                    <button type="submit" class="bg-orange-500 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
+                        Send message
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>   
+<script src="{{ site.image_base_url }}static/tpl/cable_tech/js/product.js" defer></script>
 </body>
-</html>
+</html>