feat: update template cable tech

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

@@ -0,0 +1,184 @@
+<!-- __banner_home.liquid -->
+    <!-- 轮播图容器 -->
+    <div class="carousel-container bg-cover bg-left relative w-full overflow-hidden min-h-[700px] md:min-h-[950px]">
+    {% 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>
+
+    {% endfor %}
+    </div>
+    <!-- 轮播控制按钮 -->
+    <button class="carousel-control prev absolute top-1/2 left-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-left text-xl"></i>
+    </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>

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

@@ -1,4 +1,3 @@
-
 <!-- Spring Sale Banner -->
 <div class="relative bg-cover bg-center min-h-[600px] md:min-h-[650px]" id="banner-carousel">
     <!-- 轮播图容器 -->
@@ -6,7 +5,7 @@
     {% 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: center;"  alt="{{ item.title }}" >
+        <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: center;"  alt="{{ item.title }}" >
             <a href="{{ item.banner_url }}" class="block w-full h-full">
             </a>
         </div>
@@ -184,4 +183,4 @@
             }
         }
     });
-</script>
+</script>

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

@@ -1,25 +1,28 @@
-
 <!-- Blogs and News Section -->
-<div class="container mx-auto px-4 py-8">
-    <div class="flex justify-between items-center p-8">
-        <h2 class="text-2xl font-bold">Blogs and News</h2>
-        <a href="collections/news" class="text-orange-500 text-sm">View All</a>
-    </div>
+<div class="container mx-auto px-4 py-0">
+    <h2 class="text-3xl md:text-5xl	 font-bold py-24 text-center">News</h2>
+
     <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
         {% for item in pages %}
-            <div class="bg-white rounded-lg shadow overflow-hidden">
+            <div>
+            <div class="overflow-hidden">
+                <a href="/pages/{{ item.id }}" title="{{ item.title | decode_html_entities | strip_html }}">
                 {% if item.cover_image %}
-                    <img src="{% if item.cover_image contains 'http' %}{{ item.cover_image }}{% else %}{{ site.image_base_url }}{{ item.cover_image | append: '?x-oss-process=image/resize,m_fill,w_250,h_280' }}{% endif %}"
+                    <img src="{% if item.cover_image contains 'http' %}{{ item.cover_image }}{% else %}{{ site.image_base_url }}{{ item.cover_image | append: '?x-oss-process=image/resize,m_fill,w_380,h_210' }}{% endif %}"
                          alt="{{ item.title | strip_html }}"
-                         class="w-full h-48 object-cover">
+                         class="w-full h-52 object-cover">
                 {% else %}
-                    <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/product_default.jpg?x-oss-process=image/resize,m_fill,w_250,h_280"
+                    <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/product_default.jpg?x-oss-process=image/resize,m_fill,w_380,h_210"
                          alt="{{ item.title | strip_html }}"
-                         class="w-full h-48 object-cover">
+                         class="w-full h-52 object-cover">
                 {% endif %}
+                </a>
+            </div>
 
-                <div class="p-4">
-                    <h3 class="font-bold text-lg mb-4">{{ item.title | decode_html_entities | strip_html }}</h3>
+                <div class="py-12">
+                    <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>
+                    </a>
                     <p class="text-sm/6 text-gray-600 mb-4 ">  {% if item.seo_description %}
                             {{ item.seo_description |raw | truncatewords: 20 }}
                         {% else %}
@@ -33,4 +36,4 @@
             </div>
         {% endfor %}
     </div>
-</div>
+</div>

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

@@ -1,6 +1,6 @@
 {% for item in products %}
 
-            <div class="bg-white rounded-lg shadow overflow-hidden">
+            <div class="bg-white rounded-lg  overflow-hidden ">
                 <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>
 
@@ -18,14 +18,10 @@
                     {% endif %}
                     </a>
                 </div>
-                <div class="p-4">
-                   <div class="text-xs/6 text-gray-500 mb-1"> {{ item.seo_keywords }}</div>
-                    <h3 class="bold text-sm/6 mb-2"> <a  href="/products/{{ item.id }}" target="_blank" > {{ item.title }}</a></h3>
+                <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>
                 </div>
             </div>
 
-{% endfor %}
-
-
-
-
+{% endfor %}

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

@@ -1,117 +1,147 @@
+<!-- Logo and Main Navigation -->
+    <div class=" ">
+        <div 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 ">
+                                {% if site.dist.logo %}
 
-    <!-- Top Navigation Bar -->
-    {% comment %}<div class="bg-black text-white text-xs">{% endcomment %}
-        {% comment %}<div class="container mx-auto px-4 py-1 flex justify-between items-center">{% endcomment %}
-            {% comment %}{% comment %}<div class="hidden sm:block bold_header">Free shipping on $49</div>{% endcomment %}{% endcomment %}
-            {% comment %}{% comment %}<div class="hidden md:block bold_header">Free shipping on $49</div>{% endcomment %}{% endcomment %}
-            {% comment %}{% comment %}<div class="block bold_header">Buy 2 for 15% Off, 3 for 20% off</div>{% endcomment %}{% endcomment %}
-            {% comment %}{% comment %}<div class="hidden lg:block bold_header">Free shipping on $49</div>{% endcomment %}{% endcomment %}
-            {% comment %}{% comment %}<div class="hidden xl:block bold_header">Buy 2 for 15% Off, 3 for 20% off</div>{% endcomment %}{% endcomment %}
-            {% comment %}{% comment %}<div class="hidden lg:block bold_header">Free shipping on $49</div>{% endcomment %}{% endcomment %}
-            {% comment %}<div class="hidden lg:block bold_header">Headquarters Support for Investment and Franchise</div>{% endcomment %}
-                {% comment %}<div class="hidden lg:block bold_header">Operational support</div>{% endcomment %}
-                    {% comment %}<div class="hidden lg:block bold_header">Price rebates</div>{% endcomment %}
-                        {% comment %}<div class="hidden lg:block bold_header">Regional protection</div>{% endcomment %}
-                            {% comment %}<div class="hidden lg:block bold_header">Customer resource sharing</div>{% endcomment %}
-                                {% comment %}<div class="hidden lg:block bold_header">Advertising support</div>{% endcomment %}
-                                    {% comment %}<div class="hidden lg:block bold_header">Profit assurance</div>{% endcomment %}
-        {% comment %}</div>{% endcomment %}
-    {% comment %}</div>{% endcomment %}
-
-    <!-- Logo and Main Navigation -->
-    <div class="bg-white shadow-sm">
-        <div class="container mx-auto px-4 py-4">
-            <div class="flex justify-between items-center">
-                <!-- Logo -->
-                <div class="flex items-center">
-                    <a href="#" class="flex items-center">
-                        <div class="h-12 w-32 rounded-md flex items-center justify-center mr-2">
-                                                           {% if site.dist.logo %}
-            <a class="header-logo" href="/">
-                <img src="{{ site.image_base_url }}{{ site.dist.logo }}"  class="w-48">
-            </a>
-            {% endif %}
-                        </div>
-<!--                        <span class="font-bold text-xl text-gray-800">{{site.dist.site_name}}</span>-->
-                    </a>
-                </div>
+                                    <img src="{{ site.image_base_url }}{{ site.dist.logo }}"  class="w-48 ">
 
-                <!-- Main Menu -->
-                <!-- Main Menu -->
-                <div class="hidden md:flex space-x-8 items-center">
-                    {% for menu in site.menus_header %}
-                    <div class="dropdown">
-                        {% if menu.children and menu.children.size > 0 %}
-                            <a href="#" class="text-gray-800 hover:text-orange-500 bold_header font-size-17	">
-                                {{ menu.title }}
-                                <i class="fas fa-chevron-down text-xs ml-1"></i>
-                            </a>
-                            <div class="dropdown-content mt-2">
-                                <div class="flex" style="width: 1000px;">
-                                    <div class="flex-1">
-                                        <div class="p-6 grid grid-cols-3 gap-8">
-                                            {% for child in menu.children %}
-                                            <div>
-                                                <h3 class="text-lg mb-4 text-gray-900 bold_header text-xl	 ">{{ child.title }}</h3>
-                                                <div class="space-y-2">
-                                                    {% for item in child.children %}
-                                                    <a href="{{ item.uri }}" class="block py-1 text-sm text-gray-500 hover:text-orange-500 bold_header font-size-17">{{ item.title }}</a>
-                                                    {% endfor %}
+                                {% endif %}
+                            </div>
+
+                        </a>
+                    </div>
+
+                    <!-- Main Menu -->
+                    <div class="hidden md:flex space-x-8 items-center">
+
+                        {% for menu in site.menus_header %}
+                            {% if menu.title == "Products" %}
+
+                                <!-- Products with dropdown -->
+                                <div class="dropdown products-dropdown">
+                                    <a href="#" class="  bold_header">
+                                        Products
+                                        <i class="fas fa-chevron-down text-xs ml-1"></i>
+                                    </a>
+                                    <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>
+                                                </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">
+                                                            <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">
+                                                            <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">
+                                                            <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">
+                                                            <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">
+                                                            <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">
+                                                            <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">
+                                                            <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">
+                                                            <span class="text-gray-900 text-sm">Screen Protector</span>
+                                                        </a>
+                                                    </div>
                                                 </div>
                                             </div>
-                                            {% endfor %}
                                         </div>
                                     </div>
-                                    {% comment %}<div class="w-64 p-6 border-l border-gray-100">{% endcomment %}
-                                        {% comment %}<div class="bg-orange-100 rounded-lg p-4 mb-4">{% endcomment %}
-                                            {% comment %}<h3 class="text-lg mb-2 text-orange-600 bold_header">HOT SALE</h3>{% endcomment %}
-                                            {% comment %}<img src="images/product1.jpg" alt="Hot Sale" class="w-full h-32 object-cover rounded">{% endcomment %}
-                                        {% comment %}</div>{% endcomment %}
-                                        {% comment %}<div class="bg-blue-100 rounded-lg p-4">{% endcomment %}
-                                            {% comment %}<h3 class="text-lg mb-2 text-blue-600 bold_header">NEW ARRIVAL</h3>{% endcomment %}
-                                            {% comment %}<img src="images/product1.jpg" alt="New Arrival" class="w-full h-32 object-cover rounded">{% endcomment %}
-                                        {% comment %}</div>{% endcomment %}
-                                    {% comment %}</div>{% endcomment %}
                                 </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 %}
+                                <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>
+
+                                                                {% 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 %}
+                                </div>
+
+                            {% endif %}
+                        {% endfor %}
                     </div>
-                    {% 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 %}
+                    <!-- 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>
-                    </button>
+                        {% comment %}</button>{% endcomment %}
+                        <!-- Mobile menu button -->
+                        <button class="md:hidden text-gray-800" id="mobile-menu-button">
+                            <i class="fas fa-bars"></i>
+                        </button>
+                    </div>
+                    <!------------------->
                 </div>
             </div>
         </div>
     </div>
 
-    <!-- search overlay -->
-    <div class="search-overlay" id="search-overlay">
-        <div class="search-container">
-            <div class="search-form-container">
-                <form action="search.html" method="get" class="search-form flex items-center">
-                    <input type="text" name="q" id="search-input" class="flex-grow px-4 py-2 border border-gray-300 rounded-l-md" placeholder="Search for products...">
-                    <button type="submit" class="bg-orange-500 text-white px-6 py-2 border border-orange-500 rounded-r-md hover:bg-orange-600 transition">
-                        <i class="fas fa-search mr-2"></i><span class="search-button-text">Search</span>
-                    </button>
-                </form>
-                <button class="close-search-button text-gray-500 hover:text-gray-700" id="close-search-button">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-        </div>
-    </div>
-
     <!-- mobile -->
     <div class="mobile-menu" id="mobile-menu">
         <div class="mobile-menu-content shadow-xl">
@@ -157,4 +187,22 @@
             </nav>
         </div>
     </div>
-</body>
+
+    <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>

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

@@ -0,0 +1,141 @@
+<!-- Logo and Main Navigation -->
+<div class="nav-wrapper">
+    <div 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 ">
+                        {% if site.dist.logo %}
+
+                            <img src="{{ site.image_base_url }}{{ site.dist.logo }}"  class="w-48 ">
+
+                        {% endif %}
+                        </div>
+
+                    </a>
+                </div>
+
+                <!-- Main Menu -->
+                <div class="hidden md:flex space-x-8 items-center">
+                    {% for menu in site.menus_header %}
+                    {% if menu.title == "Products" %}
+                        <!-- Products with dropdown -->
+                                <div class="dropdown products-dropdown">
+                                    <a href="#" class="  bold_header text-white ">
+                                        Products
+                                        <i class="fas fa-chevron-down text-xs ml-1"></i>
+                                    </a>
+                                    <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>
+                                                </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">
+                                                            <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">
+                                                            <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">
+                                                            <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">
+                                                            <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">
+                                                            <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">
+                                                            <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">
+                                                            <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">
+                                                            <span class="text-gray-900 text-sm">Screen Protector</span>
+                                                        </a>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                    {% else %}
+                        <div class="dropdown ">
+                            {% if menu.children and menu.children.size > 0 %}
+                                <a href="#" class=" text-white  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>
+
+                                            {% else %}
+                                            <a href="{{ child.uri }}" class="block py-2 text-sm text-gray-700  bold_header font-size-17 whitespace-nowrap ">{{ 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>
+                            {% endif %}
+                        </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-900" id="mobile-menu-button">
+                        <i class="fas fa-bars"></i>
+                    </button>
+                </div>
+                <!------------------->
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,47 @@
+
+<!-- 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>
+            <button id="close-menu-button" class="text-gray-500">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+
+        <nav class="p-4">
+            <ul class="space-y-2">
+                {% for menu in site.menus_header %}
+                    <li>
+                        {% if menu.children and menu.children.size > 0 %}
+                            <div class="flex justify-between items-center py-2 px-4 text-gray-800 hover:bg-gray-100 rounded cursor-pointer submenu-toggle">
+                                <span>{{ menu.title }}</span>
+                                <i class="fas fa-chevron-down text-xs"></i>
+                            </div>
+                            <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>
+                                        <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>
+                                            {% endfor %}
+                                        </div>
+                                    </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>
+                        {% endif %}
+                    </li>
+                {% endfor %}
+            </ul>
+        </nav>
+    </div>
+</div>
+

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

@@ -11,7 +11,32 @@
 <title>{{tag.seo_title}}</title>
     <meta name="author" content="Mietubl">
     {% include '_header_css.liquid' %}
-
+    <script type="application/ld+json">
+        {
+            "@context": "https://schema.org",
+            "@type": "ItemList",
+            "name": "{{tag.seo_title}}",
+            "description": "{{ site.dist.seo_description  | strip_html| strip_newlines }}",
+            "url": "{{site.current_url}}",
+            "numberOfItems": {{pages | size}},
+            "itemListOrder": "Descending",
+            "itemListElement": [
+        {% for item in pages %}
+                    {
+                      "@type": "ListItem",
+                      "position": {{forloop.index}},
+                      "item": {
+                        "@type": "NewsArticle",
+                        "headline": "{{ item.title | strip_html }}",
+                        "image": "{% if item.cover_image contains 'http' %}{{ item.cover_image }}{% else %}{{ site.image_base_url }}{{ item.cover_image }}{% endif %}",
+                        "datePublished": "{{ item.post_date | date: '%Y-%m-%d' }}",
+                        "author": {"@type": "Organization", "name": "Mietubl"}
+                      }
+                    }{% if forloop.last == false %},{% endif %}
+        {% endfor %}
+            ]
+        }
+    </script>
 </head>
 <body class="bg-gray-100 tracking-wide">
 {% include '_header.liquid' %}
@@ -43,34 +68,35 @@
 
 <!-- Article Grid -->
 <div class="container mx-auto px-4 py-8">
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
         {% for item in pages %}
-
             <!-- Article 1 -->
-            <div class="bg-white rounded-lg shadow-lg overflow-hidden">
-                <a href="/pages/{% if item.slug %}{{ item.slug }}{% else %}{{ item.id }}{% endif %}" title="{{ item.title | strip_html }}">
-
-                    {% if item.cover_image %}
-                        <img src="{% if item.cover_image contains 'http' %}{{ item.cover_image }}{% else %}{{ site.image_base_url }}{{ item.cover_image }}{% endif %}" alt="{{ item.title | strip_html }}" class="w-full h-48 object-cover">
-                    {% else %}
-                        <img src="{{ site.image_base_url }}static/common/images/product_default.jpg"  alt="{{ item.title | strip_html }}" class="w-full h-48 object-cover">
-                    {% endif %}
-
-
-                    <div class="p-4">
-                        <h3 class="font-bold text-lg mb-4">{{ item.title | decode_html_entities | strip_html }}</h3>
-                        <p class="text-sm/6 text-gray-600 mb-4 ">  {% if item.seo_description %}
-                                {{ item.seo_description |raw | truncatewords: 20 }}
-                            {% else %}
-                                No description available
-                            {% endif %}</p>
-                        <div class="flex justify-between items-center">
-                            <span class="text-xs text-gray-500">{{ item.post_date | date: 'M %d.%Y' }}</span>
-                            <a href="/pages/{{ item.id }}" title="{{ item.title | decode_html_entities | strip_html }}" class="text-orange-500 text-sm">Read More</a>
-                        </div>
+            <div>
+                <div class="  rounded-md   overflow-hidden">
+
+                    <a href="/pages/{{ item.id }}" title="{{ item.title | decode_html_entities | strip_html }}">
+                        {% if item.cover_image %}
+                            <img src="{% if item.cover_image contains 'http' %}{{ item.cover_image }}{% else %}{{ site.image_base_url }}{{ item.cover_image }}{% endif %}" alt="{{ item.title | strip_html }}" class="w-full h-52 object-cover">
+                        {% else %}
+                            <img src="{{ site.image_base_url }}static/common/images/product_default.jpg"  alt="{{ item.title | strip_html }}" class="w-full h-52 object-cover">
+                        {% endif %}
+                    </a>
+                </div>
+                <div class="p-4">
+
+                    <a href="/pages/{{ item.id }}" title="{{ item.title | decode_html_entities | strip_html }}">
+                    <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 }}
+                        {% else %}
+                            No description available
+                        {% endif %}</p>
+                    <div class="flex justify-between items-center">
+                        <span class="text-xs text-gray-500">{{ item.post_date | date: 'M %d.%Y' }}</span>
+                        <a href="/pages/{{ item.id }}" title="{{ item.title | decode_html_entities | strip_html }}" class="text-orange-500 text-sm">Read More</a>
                     </div>
-                </a>
+                </div>
             </div>
 
         {% endfor %}
@@ -131,4 +157,4 @@
 {% include '_footer.liquid' %}
 {% include '_footer_js.liquid' %}
 </body>
-</html>
+</html>

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

@@ -10,77 +10,147 @@
     <meta name="author" content="Mietubl">
     <title>{{ site.dist.seo_title }}</title>
     {% include '_header_css.liquid' %}
+    <script type="application/ld+json">
+        {
+            "@context": "https://schema.org",
+            "@type": "LocalBusiness",
+            "name": "Mietubl Philippines",
+            "image": "{{ site.image_base_url }}{{ site.dist.logo }}",
+            "address": {
+                "@type": "PostalAddress",
+                "streetAddress": "",
+                "addressLocality": "",
+                "addressRegion": "PH",
+                "postalCode": "",
+                "addressCountry": "PH"
+            },
+            "telephone": "",
+            "openingHoursSpecification": {
+                "@type": "OpeningHoursSpecification",
+                "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
+                "opens": "09:00",
+                "closes": "17:00"
+            },
+            "sameAs": [
+                "{{ site.dist.facebook }}"
+            ]
+        }
+    </script>    
 </head>
 <body class="bg-gray-100 tracking-wide">
-{% include '_header.liquid' %}
 
 
+<!-- Spring Sale Banner -->
+<div class="relative bg-cover bg-center min-h-[700px] md:min-h-[750px]" id="banner-carousel">
 <!-- banner -->
-{% banner limit=5 position=1 template='__banner_list.liquid' %}
+{% banner limit=5 position=1 template='__banner_home.liquid' %}
+{% include '_header_home.liquid' %}
+</div>
 
+{% include '_header_mobile.liquid' %}
 
 
 <!-- Category Navigation -->
-<div class="bg-white">
-    <div class="container mx-auto py-16">
-        <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-8 text-center">
-            <div class="flex flex-col items-center">
-                <a href="/products/categories/screen-protector">
-                    <div class="w-24 h-24 flex items-center justify-center mb-4">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 4h10a1 1 0 011 1v1H6V5a1 1 0 011-1z" />
-                        </svg>
+<div class="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">
+            <!-- Power Banks - 占据2行 -->
+            <div class="relative md:row-span-2 overflow-hidden">
+                <a href="/products/categories/intelligent-film-cutting-machine" target=_blank>
+                    <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>
+                    </div>
+                </a>
+            </div>
+
+
+
+            <!-- Screen Protector -->
+            <div class="relative overflow-hidden  aspect-ratio-card">
+                <a href="/products/categories/screen-protector" target=_blank>
+                    <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>
                     </div>
                 </a>
-                <span class="text-lg mt-2 bold_header"><a href="/products/categories/screen-protector">Screen Protector</a></span>
             </div>
-            <div class="flex flex-col items-center">
-                <a href="/products/categories/intelligent-film-cutter">
-                    <div class="w-24 h-24 flex items-center justify-center mb-4">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.121 14.121L19 19m-7-7l7-7m-7 7l-2.879 2.879M12 12L9.121 9.121m0 0L4 4" />
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 8V6a2 2 0 012-2h2M4 16v2a2 2 0 002 2h2m8-16h2a2 2 0 012 2v2m0 8v2a2 2 0 01-2 2h-2" />
-                        </svg>
+
+            <!-- Chargers -->
+            <div class="relative overflow-hidden aspect-ratio-card">
+                <a href="/products/categories/wall-charger" target=_blank>
+                    <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>
                     </div>
                 </a>
-                <span class="text-lg mt-2 bold_header"><a href="/products/categories/intelligent-film-cutter">  Intelligent Film Cutter</a></span>
             </div>
-            <div class="flex flex-col items-center">
-                <a href="/products/categories/functional-products">
-                    <div class="w-24 h-24 flex items-center justify-center mb-4">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
-                        </svg>
+
+            <!-- AC Power -->
+            <div class="relative overflow-hidden aspect-ratio-card">
+                <a href="/products/categories/portable-power-supply" target=_blank>
+                    <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>
                     </div>
                 </a>
-                <span class="text-lg mt-2 bold_header"><a href="/products/categories/functional-products">Functional Products</a></span>
             </div>
-            <div class="flex flex-col items-center">
-                <a href="/products/categories/printer">
-                    <div class="w-24 h-24 flex items-center justify-center mb-4">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
-                        </svg>
+
+            <!-- Cables -->
+            <div class="relative overflow-hidden aspect-ratio-card">
+                <a href="/products/categories/data-cable" target=_blank>
+                    <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>
                     </div>
                 </a>
-                <span class="text-lg mt-2 bold_header"><a href="/products/categories/printer">Printer</a></span>
             </div>
 
+            <!-- Hubs and Docks -->
+            <div class="relative overflow-hidden aspect-ratio-card">
+                <a href="/products/categories/cutting-machine-consumables" target=_blank>
+                    <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>
+                    </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">
+                    <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>
+                    </div>
+                </a>
+            </div>
         </div>
     </div>
 </div>
 
+<!-- Category Navigation -->
 
 
-    <!-- Hot Sale Section -->
-    <div class="container mx-auto px-4 py-8">
-        <h2 class="text-2xl font-bold p-8">Hot</h2>
 
-        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 pb">
 
+    <!-- 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 ">
+    <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 ">
 
-            {% product  mode="list" limit=4 template='__product_list_1.liquid' %}
+
+            {% product  mode="list" limit=3 template='__product_list_1.liquid' %}
 
 
             <!-- Product 1 -->
@@ -130,41 +200,65 @@
             {% comment %}</div>{% endcomment %}
         </div>
     </div>
-
-    <!-- Connect Your Digital Time Section -->
-    <div class="container mx-auto px-4 py-8">
-        <h2 class="text-2xl font-bold  p-8">World of Electronic Products</h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div class="bg-white rounded-lg shadow overflow-hidden h-full">
-                <a href="/products/categories/intelligent-film-cutter" target="_blank">
-                <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/middle-banner1.jpg" alt="Gaming Setup" class="w-full h-full object-cover">
+</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="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">
+                    LEARN MORE
                 </a>
             </div>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div class="bg-white rounded-lg shadow overflow-hidden h-full">
-                    <a href="/products/categories/screen-protector" target="_blank">
-                    <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/middle-banner2.jpg" alt="Streaming Setup" class="w-full h-full object-cover">
-                    </a>
-                </div>
-                <div class="bg-white rounded-lg shadow overflow-hidden h-full">
-                    <a href="/products/categories/bluetooth-speaker" target="_blank">
-                        <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/middle-banner3.jpg" alt="Office Setup" class="w-full h-full object-cover">
-                    </a>
-                </div>
-                <div class="bg-white rounded-lg shadow overflow-hidden col-span-2 h-full">
-                    <a href="/products/categories/functional-products" target="_blank">
-                    <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/middle-banner4.jpg" alt="Working Setup" class="w-full h-full object-cover">
-                    </a>
-                </div>
+        </div>
+       
+
+        <!--   -->
+        
+        <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">
+                    LEARN MORE
+                </a>
             </div>
         </div>
+        
     </div>
+</div>
+
 
-    <!-- 8K Series Banner -->
-    <a href="#" class="block">
-        <div class="relative bg-cover bg-center py-24 md:py-32 min-h-[300px] md:min-h-[400px] text-white" style="background-image: url('{{ site.image_base_url }}static/tpl/cable_tech/images/8k_banner_image.jpg');">
+<!-- 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="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>
+                <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">
+                <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>
-    </a>
+    </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 %}
@@ -220,38 +314,38 @@
     {% comment %}</div>{% endcomment %}
    {% comment %}{% endcomment %}
     <!--   Program Section -->
-    <div class="container mx-auto px-4 py-8">
-        <h2 class="text-2xl font-bold p-8">Agent Plan</h2>
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <div class="bg-white rounded-lg shadow p-6 text-center">
-                <h3 class="bold text-lg mb-4">Distributor</h3>
-                <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                    <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">
-                        <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" />
-                    </svg>
-                </div>
-                <p class="text-sm/6 text-gray-800 bold_header">Become a local Dealer and help your customers with a more complete range.</p>
-            </div>
-            <div class="bg-white rounded-lg shadow p-6 text-center">
-                <h3 class="bold text-lg mb-4">Shine</h3>
-                <div class="w-20 h-20 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                    <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">
-                        <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" />
-                    </svg>
-                </div>
-                <p class="text-sm/6 text-gray-800 bold_header">Partner with us as a Dealer and bring exclusive solutions to your clients</p>
-            </div>
-            <div class="bg-white rounded-lg shadow p-6 text-center">
-                <h3 class="bold text-lg mb-4">Lead</h3>
-                <div class="w-20 h-20 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                    <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">
-                        <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" />
-                    </svg>
-                </div>
-                <p class="text-sm/6 text-gray-800 bold_header">Grow as a Regional Leader and deliver exceptional value to your market</p>
-            </div>
-        </div>
-    </div>
+    {% 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 %}
@@ -299,7 +393,112 @@
 
 {% 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>
+        <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">
+                <div class="w-16 h-16 mb-4 flex items-center justify-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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" />
+                    </svg>
+                </div>
+                <h3 class="font-bold text-base mb-2">Delivery</h3>
+                <p class="text-sm text-gray-600">1-2 working days for sample, 5-9 working days for production.</p>
+            </div>
+
+            <!-- Shipping Terms -->
+            <div class="bg-gray-200 p-6 rounded flex flex-col items-center text-center">
+                <div class="w-16 h-16 mb-4 flex items-center justify-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+                    </svg>
+                </div>
+                <h3 class="font-bold text-base mb-2">Shipping terms</h3>
+                <p class="text-sm text-gray-600">Within 45 working days after received the payment by air or your request.</p>
+            </div>
+
+            <!-- Sample Charge Policy -->
+            <div class="bg-gray-200 p-6 rounded flex flex-col items-center text-center">
+                <div class="w-16 h-16 mb-4 flex items-center justify-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                    </svg>
+                </div>
+                <h3 class="font-bold text-base mb-2">Sample charge/refund policy</h3>
+                <p class="text-sm text-gray-600">We assure to return the fee once after the first order, pay 100% of the sample fee in advance.</p>
+            </div>
+
+            <!-- Payment Terms -->
+            <div class="bg-gray-200 p-6 rounded flex flex-col items-center text-center">
+                <div class="w-16 h-16 mb-4 flex items-center justify-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
+                    </svg>
+                </div>
+                <h3 class="font-bold text-base mb-2">Payment terms:Bank transfer</h3>
+                <p class="text-sm text-gray-600">100% Payment in advance.</p>
+            </div>
+        </div>
+    </div>
+
+
 {% 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>
 </body>
-</html>
+</html>

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

@@ -0,0 +1,131 @@
+<!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="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>
+    <meta name="author" content="Mietubl">
+    {% include '_header_css.liquid' %}
+
+    <script type="application/ld+json">
+        {
+          "@context": "https://schema.org",
+          "@type": "Article",
+          "headline": "{{page.seo_title}}",
+  "description": "{{page.seo_description  | strip_html| strip_newlines }}",
+  "image": {
+    "@type": "ImageObject",
+    "url": "{{ page.cover_image }}",
+    "height": 885,
+    "width": 509
+  },
+
+  "publisher": {
+    "@type": "Organization",
+    "name": "Mietubl",
+    "logo": {
+      "@type": "ImageObject",
+      "url": "https://www.screenguardfactory.com/static/images/logo-black.svg",
+      "height": 114,
+      "width": 38
+    }
+  },
+  "datePublished": "{{page.post_date}}",
+  "dateModified": "{{page.post_date}}",
+  "mainEntityOfPage": "{{site.current_url}}",
+  "inLanguage": "en-US"
+}
+    </script>
+
+</head>
+<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">
+            {% for breadcrumb in breadcrumbs %}
+                <a href="{{ breadcrumb.url }}" class="text-gray-600 hover:text-orange-500">  {{ breadcrumb.name }} </a>
+                {% if forloop.index != forloop.length %}
+                    <span class="mx-2 text-gray-500">/</span>
+                {% endif %}
+            {% endfor %}
+        </nav>
+    </div>
+</div>
+
+<div class="container mx-auto px-4 py-8">
+
+        <h1 class="text-4xl font-bold text-center mb-10">Wholesale  Inquiry </h1>
+        
+        <div class="text-center max-w-3xl mx-auto mb-12">
+            <p class="text-gray-700">Mietubl is excited to offer our business customers even greater savings on top-quality tech essentials.</p>
+        </div>
+
+    <h4 class="text-2xl font-bold text-gray-800 mb-6 text-center">Get a quote</h4>
+    <form id="form_contact" data-action="/contact" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 max-w-3xl mx-auto" role="form">
+        <input type="hidden" name="consulting_products" value="{{product.title }}">
+        <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>
+
+        <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>
+
+{% include '_footer.liquid' %}
+{% include '_footer_js.liquid' %}
+
+</body>
+</html>

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

@@ -45,106 +45,178 @@
 <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">
-
-            {% for breadcrumb in breadcrumbs %}
-            <a href="{{ breadcrumb.url }}" class="text-gray-600 hover:text-orange-500">  {{ breadcrumb.name }} </a>
-            {% if forloop.index != forloop.length %}
-                <span class="mx-2 text-gray-500">/</span>
-            {% endif %}
-            {% endfor %}
-    </nav>
+
+<!-- Hero Banner -->
+<div class="relative bg-white">
+    <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/aboutus_banner1.jpg" alt=" Banner" class="w-full">
+
 </div>
+
+
+
+
+<!-- Who We Are Section -->
+<div class="py-16 bg-gray-100">
+    <div class="container mx-auto px-4 py-16 ">
+        <h2 class="text-5xl	 font-bold text-center mb-8 py-16">Who We Are?</h2>
+        <p class="text-gray-600 text-center   mx-auto text-justify text-base">
+            Mietubl, born from the heart of China’s manufacturing excellence, has evolved alongside the nation’s advancement in intelligent technology. We are dedicated to driving innovation, resource integration, and a seamless product lifecycle, all while fostering the development of a sustainable ecosystem. Our mission is to deliver high-quality, cutting-edge technology products to global customers, ensuring consumer satisfaction and enabling profitable opportunities for our business partners.
+        </p>
+    </div>
 </div>
 
+<!-- Design Section -->
+<div class="relative py-24 bg-gray-900" style="background-image: url('{{ site.image_base_url }}static/tpl/cable_tech/images/aboutus_banner2.jpg'); background-size: cover; background-position: center;">
 
-    <!-- Hero Banner -->
-    <div class="relative  h-96">
-        <div class="absolute inset-0">
-            <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/category_banner_bg5b.png" alt="{{category.name}}" alt="About Us Banner" class="w-full h-full object-cover0">
+    <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>
+            <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 class="relative container mx-auto px-4 h-full flex items-center">
-            <div class="text-white">
-                <h1 class="text-4xl font-bold mb-4">Who We Are?</h1>
-                <p class="text-lg max-w-2xl">Mietubl, originated from Made in China, growing up with intellectually manufactured in China. Focus on product intelligence, resource integration in all aspects of product circulation, construction of ecological chain. To provide global customers with high-quality technology products that consumers are satisfied and dealers can make a profit.
+    </div>
+</div>
 
- </p>
+<!-- Mission & Vision Section -->
+<div class="py-16 bg-white">
+    <div class="container mx-auto px-4 max-w-7xl">
+        <!-- Our Mission - 左边文字，右边图片 -->
+        <div class="flex flex-col md:flex-row items-center gap-12 mb-16">
+
+            <div class="md:w-1/2 p-8">
+                <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/aboutus_banner3.jpg" alt="Mission" class="w-full rounded-lg ">
+            </div>
+            <div class="md:w-1/2 p-8">
+                <h2 class="text-5xl  font-bold mb-6">OUR MISSION</h2>
+                <p class="text-gray-600 text-base">Connect the world, let more people enjoy the joy of technology.</p>
             </div>
         </div>
-    </div>
 
-    <!-- Design Section -->
-    <div class="py-16 bg-white">
-        <div class="container mx-auto px-4">
-            <div class="flex flex-col md:flex-row items-center gap-12">
-                <div class="md:w-1/2">
-                    <h2 class="text-3xl font-bold mb-6">Mietubl</h2>
-                      {{page.content | raw }}
-                </div>
-                <div class="md:w-1/2">
-                    <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/aboutus1.jpg" alt="Design Process" class="w-full rounded-lg shadow-lg">
-                </div>
+        <!-- Our Vision - 左边图片，右边文字 -->
+        <div class="flex flex-col md:flex-row-reverse items-center gap-12  mb-16">
+
+            <div class="md:w-1/2 p-8">
+                <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/aboutus_banner4.jpg" alt="Vision" class="w-full rounded-lg ">
+            </div>
+            <div class="md:w-1/2 p-8">
+                <h2 class="text-5xl font-bold mb-6">OUR VISION</h2>
+                <p class="text-gray-600 text-base">Become a globally trusted digital accessory brand of choice and quality.</p>
+            </div>
+        </div>
+        <!-- Our Mission - 左边文字，右边图片 -->
+        <div class="flex flex-col md:flex-row items-center gap-12 ">
+
+            <div class="md:w-1/2 p-8">
+                <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/aboutus_banner5.jpg" alt="Mission" class="w-full rounded-lg ">
+            </div>
+            <div class="md:w-1/2 p-8">
+                <h2 class="text-5xl  font-bold mb-6">OUR VALUES</h2>
+                <p class="text-gray-600 text-base">Honesty, User-Oriented, Interconnection.</p>
             </div>
         </div>
     </div>
+</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>
 
- 
-    <!-- Global Business Section -->
-    <div class="py-16 bg-gray-100">
-        <div class="container mx-auto px-4">
-            <h2 class="text-3xl font-bold text-center mb-12">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-4 gap-8 text-center">
+            <div class="grid grid-cols-2 md:grid-cols-3 gap-8 text-center">
                 <div>
-                    <div class="text-4xl font-bold text-orange-500 mb-2">20+</div>
-                    <div class="text-gray-600">Patents</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-4xl font-bold text-orange-500 mb-2">100+</div>
-                    <div class="text-gray-600">Partners</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-4xl font-bold text-orange-500 mb-2">500+</div>
-                    <div class="text-gray-600">SKUs</div>
-                </div>
-                <div>
-                    <div class="text-4xl font-bold text-orange-500 mb-2">50M+</div>
-                    <div class="text-gray-600">Users</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>
 
-    <!-- Certification Section -->
-    <div class="py-16 bg-white">
-        <div class="container mx-auto px-4">
-            <h2 class="text-3xl font-bold text-center mb-12">Certification</h2>
-            <div class="flex justify-center">
-                <div class="grid grid-cols-3 md:grid-cols-5 gap-12">
-                    <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/certificate1.jpg" alt="Certification 1" class="w-full">
-                    <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/certificate2.jpg" alt="Certification 2" class="w-full">
-                    <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/certificate3.jpg" alt="Certification 3" class="w-full">
-                    <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/certificate4.jpg" alt="Certification 4" class="w-full">
-                    <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/certificate5.jpg" alt="Certification 5" class="w-full">
+<div class="container mx-auto px-4 py-0  ">
 
-                </div>
+    <h4 class="text-3xl md:text-5xl	 font-bold py-24 text-center font-bold text-gray-900 mb-6 ">Contact Us</h4>
+    <form id="form_contact" data-action="/contact" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-24 max-w-3xl mx-auto" role="form">
+        <input type="hidden" name="consulting_products" value="{{product.title }}">
+        <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>
 
+        <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>
 
+        <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>
 
 
 {% include '_footer.liquid' %}
 {% include '_footer_js.liquid' %}
 </body>
-</html>
+</html>

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

@@ -12,7 +12,35 @@
     <meta name="author" content="Mietubl">
     {% include '_header_css.liquid' %}
 
+    <script type="application/ld+json">
+        {
+          "@context": "https://schema.org",
+          "@type": "Article",
+          "headline": "{{page.seo_title}}",
+  "description": "{{page.seo_description  | strip_html| strip_newlines }}",
+  "image": {
+    "@type": "ImageObject",
+    "url": "{{ page.cover_image }}",
+    "height": 885,
+    "width": 509
+  },
 
+  "publisher": {
+    "@type": "Organization",
+    "name": "Mietubl",
+    "logo": {
+      "@type": "ImageObject",
+      "url": "https://www.screenguardfactory.com/static/images/logo-black.svg",
+      "height": 114,
+      "width": 38
+    }
+  },
+  "datePublished": "{{page.post_date}}",
+  "dateModified": "{{page.post_date}}",
+  "mainEntityOfPage": "{{site.current_url}}",
+  "inLanguage": "en-US"
+}
+    </script>
 
 </head>
 <body class="bg-gray-100 tracking-wide">
@@ -123,4 +151,4 @@
 {% include '_footer_js.liquid' %}
 
 </body>
-</html>
+</html>

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

@@ -0,0 +1,275 @@
+<!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="{{ tag.seo_description  | strip_html| strip_newlines  }}">
+<meta name="keywords" content="{{tag.seo_keywords}}">
+<title>{{tag.seo_title}}</title>
+    <meta name="author" content="Mietubl">
+    {% include '_header_css.liquid' %}
+
+    <script type="application/ld+json">
+        {
+          "@context": "https://schema.org",
+          "@type": "Article",
+          "headline": "{{page.seo_title}}",
+  "description": "{{page.seo_description  | strip_html| strip_newlines }}",
+  "image": {
+    "@type": "ImageObject",
+    "url": "{{ page.cover_image }}",
+    "height": 885,
+    "width": 509
+  },
+
+  "publisher": {
+    "@type": "Organization",
+    "name": "Mietubl",
+    "logo": {
+      "@type": "ImageObject",
+      "url": "https://www.screenguardfactory.com/static/images/logo-black.svg",
+      "height": 114,
+      "width": 38
+    }
+  },
+  "datePublished": "{{page.post_date}}",
+  "dateModified": "{{page.post_date}}",
+  "mainEntityOfPage": "{{site.current_url}}",
+  "inLanguage": "en-US"
+}
+    </script>
+</head>
+<body class="bg-gray-100 tracking-wide">
+{% include '_header.liquid' %}
+
+
+
+<!-- Distributor Program Banner -->
+<div class="relative bg-cover bg-right	 py-24" style="background-image: url('{{ site.image_base_url }}static/tpl/cable_tech/images/distributor_bg1.jpg');">
+    <div class="container mx-auto px-4 relative z-10 md:py-52">
+        <div class="md:w-1/2 ">
+            <h1 class="text-5xl font-bold mb-4 py-6">DISTRIBUTOR PROGRAM</h1>
+            <p class="mb-6  text-base 0">As the official brand owner of MIETUBL, we offer exclusive distribution opportunities for potential partners worldwide. We provide superior support for electronic and mobile accessories, ensuring our partners receive excellent service through the MIETUBL email system. By joining our distribution network, you will gain access to high-quality products and comprehensive solutions, helping you grow your business and meet customer demands efficiently.</p>
+            <a href="/contact" class="bg-orange-500 hover:bg-orange-600 text-white px-6 py-2 rounded text-sm font-medium transition-colors inline-block">
+                Join Now
+            </a>
+        </div>
+    </div>
+</div>
+
+<!-- Brand Story Section -->
+<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_bg2.jpg');">
+
+    <div class="container mx-auto px-4 relative z-10 md:py-40">
+        <div class="flex flex-col md:flex-row">
+            <div class="md:w-1/2">
+            </div>
+            <div class="w-full md:w-1/2  text-white">
+                <h2 class="text-5xl font-bold mb-6 py-6">BRAND STORY</h2>
+                <p class="mb-4  text-base">Over the years, MIETUBL has built strong relationships with customers worldwide, continuously evolving to meet their needs. Over 70% of the products we offer are specifically designed to cater to personal customer requirements, and our ODM business continues to thrive. Our wide range of electronic accessories reflects our commitment to innovation and customer satisfaction.</p>
+                <p class="mb-4  text-base">At MIETUBL, we are always looking to the future. We continue to innovate and expand our product portfolio to provide the highest quality digital accessories for our customers globally, while maintaining our commitment to excellence and customer satisfaction..</p>
+                
+            </div>
+        </div>
+    </div>
+</div>
+
+
+
+<!-- Why Choose MIETUBL -->
+<div class="bg-gray-100 pb-16">
+    <div class="container mx-auto px-4">
+        <h2 class="text-5xl font-bold mb-12 text-center py-24">Why Choose MIETUBL</h2>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-24">
+            <!-- Innovative Design -->
+            <div class="text-center">
+                <div class="  w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/distributor_ico1.png" alt="Design Icon" class="w-16 h-16">
+                </div>
+                <h3 class="font-bold text-xl mb-2 py-6">Innovative Design</h3>
+                <p class="text-base text-gray-600">MIETUBL places an emphasis on design as one of our most critical priorities, ensuring a strong combination of both appearance and functionality.</p>
+            </div>
+
+            <!-- Superior Quality -->
+            <div class="text-center">
+                <div class="  w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/distributor_ico2.png" alt="Quality Icon" class="w16 h-16">
+                </div>
+                <h3 class="font-bold text-xl mb-2 py-6">Superior Quality</h3>
+                <p class="text-base text-gray-600">We use only premium materials and conduct rigorous testing to ensure every MIETUBL product meets or exceeds industry standards for performance and durability.</p>
+            </div>
+
+            <!-- Dedicated Customer Support -->
+            <div class="text-center">
+                <div class=" w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/distributor_ico3.png" alt="Support Icon" class="w-16 h-16">
+                </div>
+                <h3 class="font-bold text-xl mb-2  py-6">Dedicated Customer Support</h3>
+                <p class="text-base text-gray-600">Our knowledgeable support team is available to help with technical questions, order inquiries, and after-sales service to ensure complete satisfaction.</p>
+            </div>
+
+            <!-- One-Stop Solution -->
+            <div class="text-center">
+                <div class=" w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/distributor_ico4.png" alt="Solution Icon" class="w-16 h-16">
+                </div>
+                <h3 class="font-bold text-xl mb-2  py-6">One-Stop Solution</h3>
+                <p class="text-base text-gray-600">MIETUBL offers a comprehensive portfolio that meets all your connectivity needs in one place, from cables and adapters to hubs and more.</p>
+            </div>
+
+            <!-- Competitive Pricing -->
+            <div class="text-center">
+                <div class=" w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/distributor_ico5.png" alt="Pricing Icon" class="w-16 h-16">
+                </div>
+                <h3 class="font-bold text-xl mb-2  py-6">Competitive Pricing</h3>
+                <p class="text-base text-gray-600">As a manufacturer with direct sales channels, MIETUBL provides competitive pricing on high-quality products with no compromise on performance or reliability.</p>
+            </div>
+
+            <!-- High Trend -->
+            <div class="text-center">
+                <div class=" w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/distributor_ico6.png" alt="Trend Icon" class="w-16 h-16">
+                </div>
+                <h3 class="font-bold text-xl mb-2  py-6">High Trend</h3>
+                <p class="text-base text-gray-600">MIETUBL closely monitors market trends to ensure our product development stays ahead of the curve, meeting evolving connectivity needs and emerging technologies.</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Global Business -->
+<div class="bg-white py-16">
+    <div class="container mx-auto px-4">
+        <h2 class="text-5xl font-bold mb-12 text-center py-24">GLOBAL BUSINESS</h2>
+
+        <!-- Promotion Support -->
+        <div class="flex flex-col md:flex-row items-center mb-16">
+            <div class="w-full md:w-1/2 order-2 md:order-1 md:pr-12 mt-8 md:mt-0">
+                <h3 class="text-5xl font-bold mb-4">Promotion Support</h3>
+                <p class="text-base text-gray-600 mb-4">We offer professional design services to create promotional materials for distributors, providing effective promotional tools to boost sales.</p>
+            </div>
+            <div class="w-full md:w-1/2 order-1 md:order-2">
+                <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/distributor_banner1.jpg" alt="Promotion Support" class="w-full rounded-lg ">
+            </div>
+        </div>
+
+        <!-- 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 ">
+            </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>
+                <p class="text-base text-gray-600 mb-4">We can supply customized packaging to meet your specific branding and marketing needs.</p>
+            </div>
+        </div>
+
+        <!-- Physical Materials Support -->
+        <div class="flex flex-col md:flex-row items-center mb-16">
+            <div class="w-full md:w-1/2 order-2 md:order-1 md:pr-12 mt-8 md:mt-0">
+                <h3 class="text-5xl font-bold mb-4">Physical Materials Support</h3>
+                <p class="text-base text-gray-600 mb-4">Our in-store physical materials include banners, posters, and product displays to enhance your retail presence.</p>
+            </div>
+            <div class="w-full md:w-1/2 order-1 md:order-2">
+                <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>
+
+
+
+<div class="container mx-auto px-4 py-0  ">
+
+    <h4 class="text-3xl md:text-5xl	 font-bold pt-24 text-center font-bold text-gray-900 mb-6 ">Become Our Partners</h4>
+    <p class="text-center mb-12 pb-12">Fill in basic information about your agency to join us. Become a part of the MIETUBL's distribution system.</p>
+    <form id="form_contact" data-action="/contact" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-24 max-w-3xl mx-auto" role="form">
+        <input type="hidden" name="consulting_products" value="{{product.title }}">
+        <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>
+
+        <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>
+
+
+{% include '_footer.liquid' %}
+{% include '_footer_js.liquid' %}
+</body>
+</html>

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

@@ -10,97 +10,173 @@
 <title>{{category.seo_title}}</title>
 <meta name="author" content="Mietubl">
 {% include '_header_css.liquid' %}
-    {% include '_header_css.liquid' %}
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "ItemList",
+      "name": "{{category.seo_title}}",
+      "description": "{{ site.dist.seo_description  | strip_html| strip_newlines }}",
+      "url": "{{site.current_url}}",
+      "numberOfItems": {{products | size}},
+      "itemListElement": [
+       {% for item in products %} {% if item.images and item.images[0].image_url %}{% assign image_url = item.images[0].image_url %}{% endif %}
+        {
+          "@type": "ListItem",
+          "position": {{forloop.index}},
+          "item": {
+            "@type": "Product",
+            "name": "{{ item.title | strip_html }}",
+            "image": "{% if image_url contains 'http' %}{{ image_url }}{% else %}{{ site.image_base_url }}{{ image_url}}{% endif %}",
+            "url": "/product/{{ item.slug }}",
+            "brand": {"@type": "Brand", "name": "Mietubl"},
+            "description": "{{ item.seo_description }}"
+          }
+        }{% if forloop.last == false %},{% endif %}
+        {% endfor %}
+      ]
+    }
+    </script>
 </head>
 <body class="bg-gray-100 tracking-wide">
 {% include '_header.liquid' %}
 
 
 
-    <!-- Category Banner -->
-    <div class="category-banner">
-        <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/category_banner_bg5b.png" alt="{{category.name}}" class="w-full h-40 md:h-48 object-cover">
-        <div class="absolute inset-0 flex items-center justify-center">
-            <h1 class="text-white text-3xl font-bold">{{category.name}}</h1>
+
+
+<!-- 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>
 
-    <!-- Product List Section -->
-    <div class="container mx-auto px-4 py-8 ">
-        <!-- Products Grid -->
-        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8  p-8">
-
-            {% for item in products %}
-
-                <!-- Product 1 -->
-                <div class="bg-white rounded-lg shadow overflow-hidden product-card">
-                    <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_300,h_300{% else %}{{ site.image_base_url }}{{ image_url | append: '?x-oss-process=image/resize,m_pad,w_300,h_300' }}{% 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">
-                        <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 %}
 
+<!-- Breadcrumb Navigation -->
+<div class=" pt-8">
+    <div class="container mx-auto px-4 p-8">
+        <nav class="flex text-sm">
 
+            {% for breadcrumb in breadcrumbs %}
+                <a href="{{ breadcrumb.url }}" class="text-gray-600 hover:text-orange-500">  {{ breadcrumb.name }} </a>
+                {% if forloop.index != forloop.length %}
+                    <span class="mx-2 text-gray-500">/</span>
+                {% endif %}
+            {% endfor %}
+        </nav>
+    </div>
+</div>
+
+
+<!-- Category Sidebar and Products -->
+<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">
+                <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>
+
+                </ul>
+            </div>
         </div>
 
-        <!-- 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 %}
+        <!-- Products Grid -->
+        <div class="w-full md:w-4/5">
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                {% for item in products %}
+                    <!-- 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 %}
 
-                {% 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>
+            </div>
+
+            <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.page_url[page] }}">{{ page }}</a>
+                            <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 %}
-                {% endfor %}
+                </ul>
+            </nav>
+        </div>
+    </div>
+</div>
 
-                {% 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>
+
+<!-- Thunderbolt Information Section -->
+<div class="bg-gray-100 py-8 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>
+        </div>
     </div>
+</div>
 
 
 
@@ -108,4 +184,4 @@
 {% include '_footer.liquid' %}
 {% include '_footer_js.liquid' %}
 </body>
-</html>
+</html>

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

@@ -11,7 +11,32 @@
 <title>{{product.seo_title}}</title>
 <meta name="author" content="Mietubl">
 {% include '_header_css.liquid' %}
-{% include '_header_css.liquid' %}
+    <script type="application/ld+json">
+        {
+            "@context": "https://schema.org",
+            "@type": "Product",
+            "name": "{{product.seo_title}}",
+            "image": [
+                {% for item in product.images %}{% assign image_url = item.image_url %}"{% if image_url contains 'http' %}{{ image_url }}{% else %}{{ site.image_base_url }}{{ image_url }}{% endif %}"{% if forloop.last == false %},{% endif %}{% endfor %}
+            ],
+            "description": "{{product.seo_description}}",
+            "brand": {
+                "@type": "Brand",
+                "name": "Mietubl",
+                "logo": "{{ site.image_base_url }}{{ site.dist.logo }}"
+            },
+            "sku": "{{product.sku | strip_html }}",
+            "offers": {
+                "@type": "Offer",
+                "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">
 {% include '_header.liquid' %}
@@ -35,16 +60,15 @@
     <div class="container mx-auto px-4 py-8">
         <div class="flex flex-col md:flex-row">
             <!-- Product Images -->
-            <div class="md:w-1/2 mb-8 md:mb-0">
-                <div class="bg-white p-6 rounded-lg shadow-md">
+            <div class="w-full sm:w-1/2 mb-8 sm:mb-0 px-2 ">
+                <div class="bg-white p-6 max-w-[660px] ">
                     <!-- 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_500,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_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">
 
                         {% else %}
 
@@ -59,8 +83,8 @@
                         {% 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_500,m_lfit{% else %}{{ site.image_base_url }}{{ image_url }}?x-oss-process=image/resize,w_500,m_lfit{% endif %}">
-                                    <img src="{% if image_url contains 'http' %}{{ image_url }}?x-oss-process=image/resize,w_500,m_lfit{% else %}{{ site.image_base_url }}{{ image_url }}?x-oss-process=image/resize,w_500,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_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 }}"
                                          class="w-full h-auto">
                                 </div>
 
@@ -81,81 +105,56 @@
 
             <!-- Product Info -->
             <div class="md:w-1/2 md:pl-8">
-                <h1 class="text-2xl font-bold mb-8">{{product.title | strip_html }}</h1>
+                <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>
-
-                <!-- 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>
-
-
                 <!-- Product Meta Info -->
                 <div class="border-t border-gray-200 pt-4">
-
-
                     {% for item in product.parameters %}
 
-                        <div class="flex flex-wrap text-sm mb-2">
-                            <span class="text-gray-500 min-w-[120px]">{{ item.key }}:</span>
+                        <div class="flex flex-wrap text-lg	 mb-2">
+                            <span class="text-gray-500 min-w-[260px]">{{ 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>
             </div>
         </div>
     </div>
 
-    <!-- Product Description Section -->
-    <div class="bg-gray-100 py-12">
-        <div class="container mx-auto px-4">
-            <h2 class="text-2xl font-bold text-center mb-8">Product Description</h2>
-            <div class="bg-white rounded-lg shadow-md p-8 prose prose-sm max-w-none">
-                <style>
-                    .prose img {
-                        margin: 1.5rem;
-                        max-width: 100%;
-                        height: auto;
-                        display: block;
-                    }
-                    .prose p {
-                        margin-bottom: 1rem;
-                    }
-                </style>
-                {{product.content | raw }}
-            </div>
-        </div>
+<!-- Product Description Section -->
+<div class="bg-white py-24 my-24">
+    <div class="container mx-auto px-4">
+        {{product.content | raw }}
     </div>
+</div>
 
 
 
     <!-- You May Also Like -->
-    <div class="bg-white py-12">
-        <div class="container mx-auto px-4">
-            <h2 class="text-2xl font-bold mb-8">Related products</h2>
 
+        <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 rounded-lg shadow overflow-hidden product-card">
-                        <div class="relative">
+                    <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_300,h_300{% else %}{{ site.image_base_url }}{{ image_url | append: '?x-oss-process=image/resize,m_pad,w_300,h_300' }}{% endif %}"   alt="{{ item.title | strip_html }}" class="w-full h-60 object-contain p-4">
+                                    <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-60 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"  alt="{{ item.title | strip_html }}" class="w-full h-80 object-contain p-4">
                                 {% endif %}
                             </a>
                         </div>
-                        <div class="p-4">
+                        <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>
@@ -163,13 +162,10 @@
 
                 {% endfor %}
 
-
-
-
-
             </div>
+
         </div>
-    </div>
+
 
 
     <style>
@@ -213,4 +209,4 @@
 {% include '_footer.liquid' %}
 {% include '_footer_js.liquid' %}
 </body>
-</html>
+</html>