app/Http/Controllers/PageController.php

@@ -3,6 +3,7 @@
 namespace App\Http\Controllers;
 
 use App\Models\DistAppearanceTemplate;
+use App\Models\DistProduct;
 use Illuminate\Http\Request;
 use App\Services\LiquidRenderer;
 use App\Models\SitePage;
@@ -120,6 +121,46 @@ class PageController extends Controller
         ];
         // 构建导航数据 结束
 
+
+        //能过 seo_keywords 查找相有相同 seo_keywords的产品, seo_keywords 可能是多个,用逗号分隔
+        $seo_keywords = $page->seo_keywords;
+
+        $seo_keywords_array = explode(',', $seo_keywords);
+
+        if(!empty($seo_keywords_array))
+        {
+            $seo_keywords_array = array_map('trim', $seo_keywords_array);
+            $seo_keywords_array = array_unique($seo_keywords_array);
+
+            // 构建查询条件
+            $query = DistProduct::where('dist_id', getDistId())
+                ->where('enabled', 1)
+                ->where('status', 2);
+
+            // 为每个关键词添加查询条件
+            $query->where(function($q) use ($seo_keywords_array) {
+                foreach ($seo_keywords_array as $keyword) {
+                    $q->orWhere(function($subQ) use ($keyword) {
+                        $subQ->where('seo_keywords', 'LIKE', $keyword)
+                            ->orWhere('seo_keywords', 'LIKE', $keyword . ',%')
+                            ->orWhere('seo_keywords', 'LIKE', '%,' . $keyword)
+                            ->orWhere('seo_keywords', 'LIKE', '%,' . $keyword . ',%');
+                    });
+                }
+            });
+
+            // 获取相关产品
+            $relatedProducts = $query->with('images')
+                ->orderBy('order', 'desc')
+                ->orderBy('id', 'desc')
+                ->limit(4)
+                ->get();
+
+        }
+
+
+
+
         $template_file ='pages_detail.liquid';
 
         if(!empty($page->template_file ))
@@ -139,6 +180,7 @@ class PageController extends Controller
                 'breadcrumbs' => $breadcrumbs,
                 'paginator' => $paginator,
                 'csrf_token' => csrf_token(),
+                'relatedProducts' => $relatedProducts,
 
             ]);
     }

app/Http/Controllers/ProductController.php

@@ -6,7 +6,7 @@ use Illuminate\Http\Request;
 use App\Services\LiquidRenderer;
 use App\Models\DistProduct;
 use App\Models\DistProductCategory; // 引入分类模型
-
+use App\Models\SitePage;
 
 class ProductController extends Controller
 {
@@ -162,6 +162,46 @@ class ProductController extends Controller
             'name' => $product->title,
         ];
 
+        //能过 seo_keywords 查找相有相同 seo_keywords的产品, seo_keywords 可能是多个,用逗号分隔
+        $seo_keywords = $product->seo_keywords;
+
+
+        if($seo_keywords) {
+            $seo_keywords_array = explode(',', $seo_keywords);
+        }
+        else {
+            $seo_keywords_array = [];
+        }
+        $relatedPages= [];
+
+        if(!empty($seo_keywords_array))
+        {
+            $seo_keywords_array = array_map('trim', $seo_keywords_array);
+            $seo_keywords_array = array_unique($seo_keywords_array);
+
+            // 构建查询条件
+            $query = SitePage::where('dist_id', getDistId())
+                ->where('status', 1);
+
+            // 为每个关键词添加查询条件
+            $query->where(function($q) use ($seo_keywords_array) {
+                foreach ($seo_keywords_array as $keyword) {
+                    $q->orWhere(function($subQ) use ($keyword) {
+                        $subQ->where('seo_keywords', 'LIKE', $keyword)
+                            ->orWhere('seo_keywords', 'LIKE', $keyword . ',%')
+                            ->orWhere('seo_keywords', 'LIKE', '%,' . $keyword)
+                            ->orWhere('seo_keywords', 'LIKE', '%,' . $keyword . ',%');
+                    });
+                }
+            });
+
+            // 获取相关产品
+            $relatedPages = $query->orderBy('id', 'desc')
+                ->limit(10)
+                ->get();
+
+        }
+
 
         // 渲染模板并传递数据
         return $this->liquidRenderer->render('products_detail.liquid',
@@ -169,6 +209,7 @@ class ProductController extends Controller
                 'product' => $product,
                 'relatedProducts' => $relatedProducts,
                 'breadcrumbs' => $breadcrumbs,
+                'relatedPages' => $relatedPages,
             ]);
     }
 }

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

@@ -1,33 +1,44 @@
 <!DOCTYPE html>
-<html lang="{{site.dist.country_lang }}">
+<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' %}
-
+    <meta charset="UTF-8">
+    <title>Page not found | Mietubl</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <meta name="keywords" content="" />
+    <meta name="description" content="" />
+    <link rel="canonical" href="{{site.current_url}}" />
+    <meta property="og:locale" content="en" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="" />
+    <meta property="og:description" content="" />
+    <meta property="og:url" content="{{site.current_url}}" />
+    <meta property="og:site_name" content="{{ site.dist.site_name | strip_html| strip_newlines }}" />
+    <link rel='shortlink' href="{{site.current_url}}" />
+    <!-- Bootstrap CSS -->
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Font Awesome para ícones sociais -->
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/fontawesome/css/all.min.css" rel="stylesheet">
+    <!-- CSS Personalizado -->
+    <link rel="stylesheet" href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/swiper/css/swiper.min.css">
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/css/styles.css" rel="stylesheet">
 </head>
-<body class="bg-gray-100 tracking-wide">
+<body>
+
 {% include '_header.liquid' %}
 
-<div class="min-h-[70vh] flex items-center justify-center px-4">
-    <div class="text-center">
-        <h1 class="text-6xl font-bold text-gray-800 mb-4">404</h1>
-        <h2 class="text-2xl font-semibold text-gray-600 mb-6">Page Not Found</h2>
-        <p class="text-gray-500 mb-8">Sorry, we couldn't find the page you're looking for.</p>
-        <a href="/" class="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors">
-            Return to Homepage
-        </a>
-    </div>
-</div>
+
+
+<section style="text-align:center;margin-top:150px;">
+    <h1 style="font-size:54px;color:#f08300;font-weight:400;">404 Page not found!</h1>
+    <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/404.gif" alt="Page not Found">
+</section>
+
 
 {% include '_footer.liquid' %}
-{% include '_footer_js.liquid' %}
+<script>
+    setTimeout(function() {
+        window.location.href = "/"; // 替换为主页URL
+    }, 5000); // 5000毫秒=5秒[3,4](@ref)
+</script>
 </body>
 </html>

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,68 +1,186 @@
-<!-- REVOLUTION SLIDER -->
-<div id="rev_slider_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-alias="image-hero39" data-source="gallery">
-    <!-- START REVOLUTION SLIDER 5.3.0.2 fullwidth mode -->
-    <div id="rev_slider_1" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.3.0.2" >
-        <ul>
-            {% for item in banners %}
-            <li data-index="rs-{{ forloop.index }}" data-transition="slidevertical" data-slotamount="1" data-hideafterloop="0" data-hideslideonmobile="off"  data-easein="default" data-easeout="default" data-masterspeed="1500"  data-thumb=""  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off"  data-title="{{ item.title }}" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
-                <!-- MAIN IMAGE -->
-                <a href="{{ item.banner_url }}">
-                    {% assign image_url = item.image_url %}
-                    {% if image_url contains 'http' %}
-                        <img src="{{ image_url }}" alt="" data-bgposition="top center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
-                    {% else %}
-                        <img src="{{ site.image_base_url }}{{ image_url }}" alt="" data-bgposition="top center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
-                    {% endif %}
-                </a>
-
-                <!-- LAYER NR. 2 -->
-                <div class="tp-caption title--style-1 c-white tp-resizeme" id="slide-2-layer-2"
-                     data-x="['right','right','right','right']" data-hoffset="['0','0','50','50']"
-                     data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
-                     data-fontsize="['16','16','16','16']"
-                     data-lineheight="['16','16','16','16']"
-                     data-width="[300, 300, 300, 300]"
-                     data-height="none"
-                     data-whitespace="nowrap"
-                     data-type="text"
-                     data-responsive_offset="on"
-                     data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":500,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
-                     data-textAlign="['left','left','left','left']"
-                     data-paddingtop="[0,0,0,0]"
-                     data-paddingright="[0,0,0,0]"
-                     data-paddingbottom="[0,0,0,0]"
-                     data-paddingleft="[0,0,0,0]"
-                     style="z-index: 11; white-space: nowrap;text-transform:left;">
-
-                    <span class="text-uppercase strong-400">	{{ item.subtitle }}</span>
-
-                </div>
-                <div class="tp-caption title--style-1 c-white tp-resizeme" id="slide-1-layer-3"
-                     data-x="['right','right','right','right']" data-hoffset="['0','0','50','50']"
-                     data-y="['middle','middle','middle','middle']" data-voffset="['70','70','70','70']"
-                     data-fontsize="['40','40','40','40']"
-                     data-lineheight="['50','40','40','40']"
-                     data-width="[300, 300, 300, 300]"
-                     data-height="none"
-                     data-whitespace="nowrap"
-                     data-type="text"
-                     data-responsive_offset="on"
-                     data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":1000,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
-                     data-textAlign="['left','left','left','left']"
-                     data-paddingtop="[0,0,0,0]"
-                     data-paddingright="[0,0,0,0]"
-                     data-paddingbottom="[0,0,0,0]"
-                     data-paddingleft="[0,0,0,0]"
-                     style="z-index: 11; white-space: nowrap;text-transform:left;">
-
-
-                    <span class="strong-600">
-					{{ item.title }}
-					</span>
-                </div>
-            </li>
-            {% endfor %}
-        </ul>
-        <div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>
+<!-- Spring Sale Banner -->
+<div class="relative bg-cover bg-center min-h-[600px] md:min-h-[650px]" id="banner-carousel">
+    <!-- 轮播图容器 -->
+    <div class="carousel-container relative w-full overflow-hidden min-h-[600px] md:min-h-[650px]">
+    {% 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 }}" >
+            <a href="{{ item.banner_url }}" class="block w-full h-full">
+            </a>
+        </div>
+
+    {% endfor %}
     </div>
-</div><!-- END REVOLUTION SLIDER -->
+    <!-- 轮播控制按钮 -->
+    <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>
+</div>
+
+<style>
+    /* 修复手机模式下的轮播图 */
+    @media (max-width: 768px) {
+        #banner-carousel, .carousel-container {
+            height: 220px !important;
+            min-height: 220px !important;
+        }
+
+        .carousel-slide {
+            background-size: cover !important;
+            background-position: center !important;
+        }
+    }
+</style>
+
+<!-- 轮播脚本 -->
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        // 轮播图功能实现
+        const slides = document.querySelectorAll('.carousel-slide');
+        const prevButton = document.querySelector('.carousel-control.prev');
+        const nextButton = document.querySelector('.carousel-control.next');
+        const carouselContainer = document.querySelector('#banner-carousel');
+        let currentSlide = 0;
+        let interval;
+
+        // 检测是否为移动设备
+        const isMobile = window.matchMedia('(max-width: 768px)').matches;
+
+        // 触摸事件变量
+        let touchStartX = 0;
+        let touchEndX = 0;
+        let touchStartY = 0;
+        let touchEndY = 0;
+
+        // 显示指定幻灯片
+        function showSlide(index) {
+            // 隐藏所有幻灯片
+            slides.forEach(slide => {
+                slide.style.opacity = 0;
+                slide.style.zIndex = 0;
+            });
+
+            // 显示当前幻灯片
+            slides[index].style.opacity = 1;
+            slides[index].style.zIndex = 1;
+
+            currentSlide = index;
+        }
+
+        // 下一张幻灯片
+        function nextSlide() {
+            let next = currentSlide + 1;
+            if (next >= slides.length) {
+                next = 0;
+            }
+            showSlide(next);
+        }
+
+        // 上一张幻灯片
+        function prevSlide() {
+            let prev = currentSlide - 1;
+            if (prev < 0) {
+                prev = slides.length - 1;
+            }
+            showSlide(prev);
+        }
+
+        // 自动轮播
+        function startAutoSlide() {
+            interval = setInterval(nextSlide, 5000); // 5秒切换一次
+        }
+
+        // 停止自动轮播
+        function stopAutoSlide() {
+            clearInterval(interval);
+        }
+
+        // 显示控制按钮（仅桌面版）
+        function showControls() {
+            if (!isMobile) {
+                prevButton.style.opacity = "1";
+                nextButton.style.opacity = "1";
+            }
+        }
+
+        // 隐藏控制按钮（仅桌面版）
+        function hideControls() {
+            if (!isMobile) {
+                prevButton.style.opacity = "0";
+                nextButton.style.opacity = "0";
+            }
+        }
+
+        // 初始化显示第一张幻灯片
+        showSlide(0);
+
+        // 开始自动轮播
+        startAutoSlide();
+
+        // 点击上一张按钮
+        prevButton.addEventListener('click', function(e) {
+            e.stopPropagation(); // 防止事件冒泡
+            stopAutoSlide();
+            prevSlide();
+            startAutoSlide();
+        });
+
+        // 点击下一张按钮
+        nextButton.addEventListener('click', function(e) {
+            e.stopPropagation(); // 防止事件冒泡
+            stopAutoSlide();
+            nextSlide();
+            startAutoSlide();
+        });
+
+        // 桌面端鼠标悬停事件
+        if (!isMobile) {
+            // 鼠标悬停在轮播图上时停止自动轮播并显示控制按钮
+            carouselContainer.addEventListener('mouseenter', function() {
+                stopAutoSlide();
+                showControls();
+            });
+
+            // 鼠标离开轮播图时恢复自动轮播并隐藏控制按钮
+            carouselContainer.addEventListener('mouseleave', function() {
+                startAutoSlide();
+                hideControls();
+            });
+        }
+
+        // 移动端触摸事件支持
+        carouselContainer.addEventListener('touchstart', function(e) {
+            stopAutoSlide();
+            touchStartX = e.changedTouches[0].screenX;
+            touchStartY = e.changedTouches[0].screenY;
+        }, { passive: true });
+
+        carouselContainer.addEventListener('touchend', function(e) {
+            touchEndX = e.changedTouches[0].screenX;
+            touchEndY = e.changedTouches[0].screenY;
+            handleSwipe();
+            startAutoSlide();
+        }, { passive: true });
+
+        // 处理滑动手势
+        function handleSwipe() {
+            const xDiff = touchEndX - touchStartX;
+            const yDiff = touchEndY - touchStartY;
+
+            // 确保是水平滑动而不是垂直滚动
+            if (Math.abs(xDiff) > Math.abs(yDiff) && Math.abs(xDiff) > 50) {
+                if (xDiff > 0) {
+                    // 右滑 - 上一张
+                    prevSlide();
+                } else {
+                    // 左滑 - 下一张
+                    nextSlide();
+                }
+            }
+        }
+    });
+</script>

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,31 +1,27 @@
 {% 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">HOT</div>
-
+                    <div class="absolute top-6 left-6 bg-red-500 text-white text-xs px-2 py-1 rounded bold_header">HOT</div>
 
+                    <a  href="/products/{{ item.id }}" target="_blank" >
 		 {% assign image_url = item.images[0].image_url %}
 
                     {% if image_url %}
                         {% if image_url contains 'http' %}
-                           <img src="{{ image_url }}?x-oss-process=image/resize,m_lfit,h_200"  alt=" {{ item.title }} " class="w-full h-80 object-cover rounded">
+                           <img src="{{ image_url }}?x-oss-process=image/resize,m_lfit,h_400"  alt=" {{ item.title }} " class="w-full h-80 object-cover rounded">
                         {% else %}
-                            <img src="{{ site.image_base_url }}{{ image_url | append: '?x-oss-process=image/resize,m_pad,w_300,h_300' }}" class="img-center default-image-thumbnail" alt="{{ item.title | strip_html }}">
+                            <img src="{{ site.image_base_url }}{{ image_url | append: '?x-oss-process=image/resize,m_pad,w_400,h_400' }}" class="img-center default-image-thumbnail" alt="{{ item.title | strip_html }}">
                         {% endif %}
                     {% else %}
                         <img src="{{ site.image_base_url }}static/common/images/product_default.jpg" class="img-center default-image-thumbnail" alt="{{ item.title | strip_html }}">
                     {% 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,126 +1,156 @@
+<!-- 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 -->
-    <div class="bg-black text-white text-xs">
-        <div class="container mx-auto px-4 py-1 flex justify-between items-center">
-            {% comment %}<div class="hidden sm:block bold">Free shipping on $49</div>{% endcomment %}
-            {% comment %}<div class="hidden md:block bold">Free shipping on $49</div>{% endcomment %}
-            {% comment %}<div class="block bold">Buy 2 for 15% Off, 3 for 20% off</div>{% endcomment %}
-            {% comment %}<div class="hidden lg:block bold">Free shipping on $49</div>{% endcomment %}
-            {% comment %}<div class="hidden xl:block bold">Buy 2 for 15% Off, 3 for 20% off</div>{% endcomment %}
-            {% comment %}<div class="hidden lg:block bold">Free shipping on $49</div>{% endcomment %}
-            <div class="hidden lg:block bold">Headquarters Support for Investment and Franchise</div>
-                <div class="hidden lg:block bold">Operational support</div>
-                    <div class="hidden lg:block bold">Price rebates</div>
-                        <div class="hidden lg:block bold">Regional protection</div>
-                            <div class="hidden lg:block bold">Customer resource sharing</div>
-                                <div class="hidden lg:block bold">Advertising support</div>
-                                    <div class="hidden lg:block bold">Profit assurance</div>
-        </div>
-    </div>
+                                    <img src="{{ site.image_base_url }}{{ site.dist.logo }}"  class="w-48 ">
 
-    <!-- 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>
+                                {% endif %}
+                            </div>
 
-                <!-- 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">
-                                {{ 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">{{ 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">{{ item.title }}</a>
-                                                    {% endfor %}
+                        </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>
-                                    <div class="w-64 p-6 border-l border-gray-100">
-                                        <div class="bg-orange-100 rounded-lg p-4 mb-4">
-                                            <h3 class="text-lg mb-2 text-orange-600 bold">HOT SALE</h3>
-                                            <img src="images/product1.jpg" alt="Hot Sale" class="w-full h-32 object-cover rounded">
-                                        </div>
-                                        <div class="bg-blue-100 rounded-lg p-4">
-                                            <h3 class="text-lg mb-2 text-blue-600 bold">NEW ARRIVAL</h3>
-                                            <img src="images/product1.jpg" alt="New Arrival" class="w-full h-32 object-cover rounded">
+                                </div>
+                            {% else %}
+                                <div class="dropdown   ">
+                                    {% if menu.children and menu.children.size > 0 %}
+                                        <a href="#" class="text-gray-900  bold_header	">
+                                            {{ menu.title }}
+                                            <i class="fas fa-chevron-down text-xs ml-1"></i>
+                                        </a>
+                                        <div class="dropdown-content border-0" style="left: 50%; ">
+                                            <div class="p-4 sub-menu">
+                                                            {% for child in menu.children %}
+                                                                {% if child.children and child.children.size > 0 %}
+
+                                                                        <h3 class="text-lg mb-4 text-gray-900 bold_header text-xl	 ">{{ child.title }}</h3>
+                                                                        <div class="space-y-2 sub-menu">
+                                                                            {% for item in child.children %}
+                                                                                <a href="{{ item.uri }}" class="block py-1 text-sm text-gray-700  bold_header font-size-17 whitespace-nowrap ">{{ item.title }}</a>
+                                                                            {% endfor %}
+                                                                        </div>
+
+                                                                {% 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>
-                                    </div>
+                                    {% else %}
+                                        <a href="{{ menu.uri }}" class="text-gray-800 hover:text-orange-500 bold_header font-size-17">{{ menu.title }}</a>
+                                    {% endif %}
                                 </div>
-                            </div>
-                        {% else %}
-                            <a href="{{ menu.uri }}" class="text-gray-800 hover:text-orange-500 bold">{{ menu.title }}</a>
-                        {% endif %}
+
+                            {% 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">
             <div class="p-4 flex justify-between items-center border-b">
                 <div class="flex items-center">
-                    <div class="h-8 w-8 bg-orange-500 rounded-md flex items-center justify-center mr-2">
-                        <span class="text-white font-bold text-sm">CT</span>
-                    </div>
-                    <span class="font-bold text-lg text-gray-800">CABLETIME</span>
+                    {% 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>
@@ -142,7 +172,7 @@
                                 <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">{{ item.title }}</a>
+                                    <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>
@@ -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,88 +10,153 @@
     <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-[600px] md:min-h-[650px]" style="background-image: url('{{ site.image_base_url }}static/tpl/cable_tech/images/index_banner_image.jpg');">
-        <div class="container mx-auto px-4 py-32 md:py-36 flex flex-col md:flex-row items-center">
-            <div class="md:w-1/2 z-10 bold">
-                <div class="text-orange-500 text-lg">March 14th - 31st</div>
-                <div class="text-2xl mt-4">New Product : <span class="text-orange-500 text-4xl font-bold"> Super Fast Charging
-                    </span></div>
-                <div class="my-8 text-gray-700 text-lg">Charging speed increased by 3 times!</div>
-                <button class="bg-orange-500 text-white px-10 py-4 rounded-full hover:bg-orange-600 transition text-xl">View Now</button>
+
+
+<!-- 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_home.liquid' %}
+{% include '_header_home.liquid' %}
+</div>
+
+{% include '_header_mobile.liquid' %}
+
+
+<!-- Category Navigation -->
+<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>
-        </div>
-    </div>
 
-    <!-- Category Navigation -->
-    <div class="bg-white">
-        <div class="container mx-auto py-12">
-            <div class="grid grid-cols-5 gap-8 text-center p-8">
-                <div class="flex flex-col items-center">
-                    <div class="w-16 h-16 flex items-center justify-center">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 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 3v18m0 0h6m-6 0H3m6-18h6m-6 0H3" />
-                        </svg>
+
+
+            <!-- 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>
-                    <span class="text-lg mt-2 bold"><a href="/products/categories/protetor-de-tela">Mobile and Tablet Films</a></span>
-                </div>
-                <div class="flex flex-col items-center">
-                    <div class="w-16 h-16 flex items-center justify-center">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 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.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-                        </svg>
+                </a>
+            </div>
+
+            <!-- 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>
-                    <span class="text-lg mt-2 bold"><a href="/products/categories/maquina-de-corte-de-protetor-de-tela">  Cutting Machines	</a></span>
-                </div>
-                <div class="flex flex-col items-center">
-                    <div class="w-16 h-16 flex items-center justify-center">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
-                        </svg>
+                </a>
+            </div>
+
+            <!-- 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>
-                    <span class="text-lg mt-2 bold"><a href="/products/categories/produtos-perifericos">Peripheral Products</a></span>
-                </div>
-                <div class="flex flex-col items-center">
-                    <div class="w-16 h-16 flex items-center justify-center">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 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.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                        </svg>
+                </a>
+            </div>
+
+            <!-- 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>
-                    <span class="text-lg mt-2 bold"><a href="/products/categories/materiais">Materials</a></span>
-                </div>
-                <div class="flex flex-col items-center">
-                    <div class="w-16 h-16 flex items-center justify-center">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 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 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
-                        </svg>
+                </a>
+            </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>
-                    <span class="text-lg mt-2 bold"><a href="/products/categories/cabos">  Data cable</a></span>
-                </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 -->
             {% comment %}<div class="bg-white rounded-lg shadow overflow-hidden">{% endcomment %}
                 {% comment %}<div class="relative p-4">{% endcomment %}
-                    {% comment %}<div class="absolute top-6 left-6 bg-red-500 text-white text-xs px-2 py-1 rounded bold">HOT</div>{% endcomment %}
+                    {% comment %}<div class="absolute top-6 left-6 bg-red-500 text-white text-xs px-2 py-1 rounded bold_header">HOT</div>{% endcomment %}
                     {% comment %}<img src="{{ site.image_base_url }}static/tpl/cable_tech/images/product1.jpg" alt="USB Hub" class="w-full h-56 object-cover rounded">{% endcomment %}
                 {% comment %}</div>{% endcomment %}
                 {% comment %}<div class="p-4">{% endcomment %}
@@ -103,7 +168,7 @@
             <!-- Product 2 -->
             {% comment %}<div class="bg-white rounded-lg shadow overflow-hidden">{% endcomment %}
                 {% comment %}<div class="relative p-4">{% endcomment %}
-                    {% comment %}<div class="absolute top-6 left-6 bg-red-500 text-white text-xs px-2 py-1 rounded bold">HOT</div>{% endcomment %}
+                    {% comment %}<div class="absolute top-6 left-6 bg-red-500 text-white text-xs px-2 py-1 rounded bold_header">HOT</div>{% endcomment %}
                     {% comment %}<img src="{{ site.image_base_url }}static/tpl/cable_tech/images/product1.jpg" alt="USB-C Adapter" class="w-full h-56 object-cover rounded">{% endcomment %}
                 {% comment %}</div>{% endcomment %}
                 {% comment %}<div class="p-4">{% endcomment %}
@@ -135,58 +200,90 @@
             {% 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">
-                <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">
-                    <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/middle-banner2.jpg" alt="Streaming Setup" class="w-full h-full object-cover">
-                </div>
-                <div class="bg-white rounded-lg shadow overflow-hidden h-full">
-                    <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/middle-banner3.jpg" alt="Office Setup" class="w-full h-full object-cover">
-                </div>
-                <div class="bg-white rounded-lg shadow overflow-hidden col-span-2 h-full">
-                    <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/middle-banner4.jpg" alt="Working Setup" class="w-full h-full object-cover">
-                </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 %}
         {% comment %}<h2 class="text-2xl font-bold mb-8 text-center">Featured On</h2>{% endcomment %}
         {% comment %}<div class="grid grid-cols-2 md:grid-cols-4 gap-8">{% endcomment %}
             {% comment %}<div class="text-center flex flex-col">{% endcomment %}
-                {% comment %}<p class="text-sm/6 text-gray-800 mb-4 flex-grow bold">"The CABLETIME USB-C dock delivers exceptional performance for its compact design"</p>{% endcomment %}
+                {% comment %}<p class="text-sm/6 text-gray-800 mb-4 flex-grow bold_header">"The CABLETIME USB-C dock delivers exceptional performance for its compact design"</p>{% endcomment %}
                 {% comment %}<div class="h-[100px] flex items-center justify-center">{% endcomment %}
                     {% comment %}<img src="{{ site.image_base_url }}static/tpl/cable_tech/images/index_feature.png" alt="Forbes Logo" class="max-w-[160px] max-h-[100px]">{% endcomment %}
                 {% comment %}</div>{% endcomment %}
             {% comment %}</div>{% endcomment %}
             {% comment %}<div class="text-center flex flex-col">{% endcomment %}
-                {% comment %}<p class="text-sm/6 text-gray-800 mb-4 flex-grow bold">"CABLETIME's USB-C dock is one of our favorite charging solutions"</p>{% endcomment %}
+                {% comment %}<p class="text-sm/6 text-gray-800 mb-4 flex-grow bold_header">"CABLETIME's USB-C dock is one of our favorite charging solutions"</p>{% endcomment %}
                 {% comment %}<div class="h-[100px] flex items-center justify-center">{% endcomment %}
                     {% comment %}<img src="{{ site.image_base_url }}static/tpl/cable_tech/images/index_feature.png" alt="PCMag Logo" class="max-w-[160px] max-h-[100px]">{% endcomment %}
                 {% comment %}</div>{% endcomment %}
             {% comment %}</div>{% endcomment %}
             {% comment %}<div class="text-center flex flex-col">{% endcomment %}
-                {% comment %}<p class="text-sm/6 text-gray-800 mb-4 flex-grow bold">"The best value display hub I've tested in years"</p>{% endcomment %}
+                {% comment %}<p class="text-sm/6 text-gray-800 mb-4 flex-grow bold_header">"The best value display hub I've tested in years"</p>{% endcomment %}
                 {% comment %}<div class="h-[100px] flex items-center justify-center">{% endcomment %}
                     {% comment %}<img src="{{ site.image_base_url }}static/tpl/cable_tech/images/index_feature.png" alt="TechRadar Logo" class="max-w-[160px] max-h-[100px]">{% endcomment %}
                 {% comment %}</div>{% endcomment %}
             {% comment %}</div>{% endcomment %}
             {% comment %}<div class="text-center flex flex-col">{% endcomment %}
-                {% comment %}<p class="text-sm/6 text-gray-800 mb-4 flex-grow bold">"CABLETIME makes some of the most reliable tech accessories"</p>{% endcomment %}
+                {% comment %}<p class="text-sm/6 text-gray-800 mb-4 flex-grow bold_header">"CABLETIME makes some of the most reliable tech accessories"</p>{% endcomment %}
                 {% comment %}<div class="h-[100px] flex items-center justify-center">{% endcomment %}
                     {% comment %}<img src="{{ site.image_base_url }}static/tpl/cable_tech/images/index_feature.png" alt="CNET Logo" class="max-w-[160px] max-h-[100px]">{% endcomment %}
                 {% comment %}</div>{% endcomment %}
@@ -195,60 +292,60 @@
     {% comment %}</div>{% endcomment %}
 
     <!-- Social Media Section -->
-    <div class="container mx-auto px-4 py-8">
-        <h2 class="text-2xl font-bold p-8 ">Share on Social Media</h2>
-        <div class="flex justify-center flex-wrap gap-8">
-            <div class="overflow-hidden rounded-lg shadow w-[250px] h-[280px]">
-                <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/index_media.jpg" alt="Social Media Post 1" class="w-[250px] h-[280px] object-cover">
-            </div>
-            <div class="overflow-hidden rounded-lg shadow w-[250px] h-[280px]">
-                <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/index_media.jpg" alt="Social Media Post 2" class="w-[250px] h-[280px] object-cover">
-            </div>
-            <div class="overflow-hidden rounded-lg shadow w-[250px] h-[280px]">
-                <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/index_media.jpg" alt="Social Media Post 3" class="w-[250px] h-[280px] object-cover">
-            </div>
-            <div class="overflow-hidden rounded-lg shadow w-[250px] h-[280px]">
-                <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/index_media.jpg" alt="Social Media Post 4" class="w-[250px] h-[280px] object-cover">
-            </div>
-            <div class="overflow-hidden rounded-lg shadow w-[250px] h-[280px]">
-                <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/index_media.jpg" alt="Social Media Post 5" class="w-[250px] h-[280px] object-cover">
-            </div>
-        </div>
-    </div>
-
+   {% comment %}<div class="container mx-auto px-4 py-8" style="display:">{% endcomment %}
+        {% comment %}<h2 class="text-2xl font-bold p-8 ">Share on Social Media</h2>{% endcomment %}
+        {% comment %}<div class="flex justify-center flex-wrap gap-8">{% endcomment %}
+            {% comment %}<div class="overflow-hidden rounded-lg shadow w-[250px] h-[280px]">{% endcomment %}
+                {% comment %}<img src="https://placehold.co/250x280" alt="Social Media Post 1" class="w-[250px] h-[280px] object-cover">{% endcomment %}
+            {% comment %}</div>{% endcomment %}
+            {% comment %}<div class="overflow-hidden rounded-lg shadow w-[250px] h-[280px]">{% endcomment %}
+                {% comment %}<img src="https://placehold.co/250x280" alt="Social Media Post 1" class="w-[250px] h-[280px] object-cover">{% endcomment %}
+            {% comment %}</div>{% endcomment %}
+            {% comment %}<div class="overflow-hidden rounded-lg shadow w-[250px] h-[280px]">{% endcomment %}
+                {% comment %}<img src="https://placehold.co/250x280" alt="Social Media Post 1" class="w-[250px] h-[280px] object-cover">{% endcomment %}
+            {% comment %}</div>{% endcomment %}
+            {% comment %}<div class="overflow-hidden rounded-lg shadow w-[250px] h-[280px]">{% endcomment %}
+                {% comment %}<img src="https://placehold.co/250x280" alt="Social Media Post 1" class="w-[250px] h-[280px] object-cover">{% endcomment %}
+            {% comment %}</div>{% endcomment %}
+            {% comment %}<div class="overflow-hidden rounded-lg shadow w-[250px] h-[280px]">{% endcomment %}
+                {% comment %}<img src="https://placehold.co/250x280" alt="Social Media Post 1" class="w-[250px] h-[280px] object-cover">{% endcomment %}
+            {% comment %}</div>{% endcomment %}
+        {% comment %}</div>{% endcomment %}
+    {% comment %}</div>{% endcomment %}
+   {% comment %}{% endcomment %}
     <!--   Program Section -->
-    <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">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">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">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 %}
@@ -296,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

@@ -12,110 +12,211 @@
     <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>
+
+<!-- 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;">
+
+    <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>
 </div>
 
+<!-- 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">
 
-    <!-- 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="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 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.
 
- </p>
+        <!-- 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>
-    </div>
+        <!-- Our Mission - 左边文字，右边图片 -->
+        <div class="flex flex-col md:flex-row items-center gap-12 ">
 
-    <!-- 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>
+            <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,69 @@
 
             <!-- 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>
+<!-- Product Description Section -->
+<div class="bg-white py-24 my-24">
+    <div class="container mx-auto px-4">
+        {{product.content | raw }}
+    </div>
+</div>
+
+<!-- FAQ Section -->
+<div class="mt-16">
+    <h2 class="text-2xl font-bold mb-8 text-center">FAQ</h2>
+
+    <div class="max-w-3xl mx-auto">
+        <!-- FAQ Item 1 -->
+        <div class="mb-6 border-b border-gray-200 pb-6">
+            <h3 class="font-bold text-lg mb-2">这款USB-C集线器是否适配所有MacBook设备？</h3>
+            <p class="text-gray-600">是的，此集线器兼容所有配备USB-C端口的MacBook设备，包括MacBook Pro、MacBook Air以及最新的M1/M2芯片设备。</p>
         </div>
     </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 +175,10 @@
 
                 {% endfor %}
 
-
-
-
-
             </div>
+
         </div>
-    </div>
+
 
 
     <style>

routes/web.php

@@ -75,6 +75,8 @@ Route::prefix('products')->group(function () {
     Route::get('/categories/{categoryId}', [ProductController::class, 'category'])->name('products.category');
 });
 
+
+
 // 视频路由
 Route::prefix('videos')->group(function () {
     Route::get('/', [VideoController::class, 'index'])->name('videos.index');
@@ -97,11 +99,12 @@ Route::prefix('contact')->group(function () {
     Route::get('/', [ContactController::class, 'create'])->name('contact.create');
     Route::post('/', [ContactController::class, 'store'])->name('contact.store');
 });
-
+//
 Route::prefix('collections')->group(function () {
     Route::get('/{slug}', [CollectionController::class, 'detail'])->name('collection.detail');
 });
 
+
 // Sitemap 路由
 Route::get('/sitemap.xml', [SitemapController::class, 'index'])->name('sitemap.index');
 
@@ -112,3 +115,16 @@ Route::fallback(function () {
     return $obj->abort404();
 });
 
+
+// 新分类路由
+// 产品分类路由
+Route::get('/categories-{slug}', [ProductController::class, 'category'])
+    ->name('products.category.slug');
+
+// 视频分类路由
+Route::get('/videos-{slug}', [VideoController::class, 'category'])
+    ->name('videos.category.slug');
+
+// 文章标签路由
+Route::get('/collections-{slug}', [CollectionController::class, 'detail'])
+    ->name('collections.tag.slug');