Browse Source

feat: update template cable tech

igb 2 weeks ago
parent
commit
f1d89532f3

+ 35 - 24
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>

+ 186 - 67
resources/views/liquid_src/1/cable_tech/__banner_list.liquid

@@ -1,68 +1,187 @@
-<!-- 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>

+ 5 - 5
resources/views/liquid_src/1/cable_tech/__product_list_1.liquid

@@ -2,21 +2,21 @@
 
             <div class="bg-white rounded-lg shadow 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>

+ 36 - 36
resources/views/liquid_src/1/cable_tech/_header.liquid

@@ -1,22 +1,22 @@
 
     <!-- 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>
+    {% comment %}<div class="bg-black text-white text-xs">{% endcomment %}
+        {% comment %}<div class="container mx-auto px-4 py-1 flex justify-between items-center">{% endcomment %}
+            {% comment %}{% comment %}<div class="hidden sm:block bold_header">Free shipping on $49</div>{% endcomment %}{% endcomment %}
+            {% comment %}{% comment %}<div class="hidden md:block bold_header">Free shipping on $49</div>{% endcomment %}{% endcomment %}
+            {% comment %}{% comment %}<div class="block bold_header">Buy 2 for 15% Off, 3 for 20% off</div>{% endcomment %}{% endcomment %}
+            {% comment %}{% comment %}<div class="hidden lg:block bold_header">Free shipping on $49</div>{% endcomment %}{% endcomment %}
+            {% comment %}{% comment %}<div class="hidden xl:block bold_header">Buy 2 for 15% Off, 3 for 20% off</div>{% endcomment %}{% endcomment %}
+            {% comment %}{% comment %}<div class="hidden lg:block bold_header">Free shipping on $49</div>{% endcomment %}{% endcomment %}
+            {% comment %}<div class="hidden lg:block bold_header">Headquarters Support for Investment and Franchise</div>{% endcomment %}
+                {% comment %}<div class="hidden lg:block bold_header">Operational support</div>{% endcomment %}
+                    {% comment %}<div class="hidden lg:block bold_header">Price rebates</div>{% endcomment %}
+                        {% comment %}<div class="hidden lg:block bold_header">Regional protection</div>{% endcomment %}
+                            {% comment %}<div class="hidden lg:block bold_header">Customer resource sharing</div>{% endcomment %}
+                                {% comment %}<div class="hidden lg:block bold_header">Advertising support</div>{% endcomment %}
+                                    {% comment %}<div class="hidden lg:block bold_header">Profit assurance</div>{% endcomment %}
+        {% comment %}</div>{% endcomment %}
+    {% comment %}</div>{% endcomment %}
 
     <!-- Logo and Main Navigation -->
     <div class="bg-white shadow-sm">
@@ -42,7 +42,7 @@
                     {% 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">
+                            <a href="#" class="text-gray-800 hover:text-orange-500 bold_header font-size-17	">
                                 {{ menu.title }}
                                 <i class="fas fa-chevron-down text-xs ml-1"></i>
                             </a>
@@ -52,30 +52,30 @@
                                         <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>
+                                                <h3 class="text-lg mb-4 text-gray-900 bold_header text-xl	 ">{{ child.title }}</h3>
                                                 <div class="space-y-2">
                                                     {% for item in child.children %}
-                                                    <a href="{{ item.uri }}" class="block py-1 text-sm text-gray-500 hover:text-orange-500 bold">{{ item.title }}</a>
+                                                    <a href="{{ item.uri }}" class="block py-1 text-sm text-gray-500 hover:text-orange-500 bold_header font-size-17">{{ item.title }}</a>
                                                     {% endfor %}
                                                 </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>
-                                    </div>
+                                    {% comment %}<div class="w-64 p-6 border-l border-gray-100">{% endcomment %}
+                                        {% comment %}<div class="bg-orange-100 rounded-lg p-4 mb-4">{% endcomment %}
+                                            {% comment %}<h3 class="text-lg mb-2 text-orange-600 bold_header">HOT SALE</h3>{% endcomment %}
+                                            {% comment %}<img src="images/product1.jpg" alt="Hot Sale" class="w-full h-32 object-cover rounded">{% endcomment %}
+                                        {% comment %}</div>{% endcomment %}
+                                        {% comment %}<div class="bg-blue-100 rounded-lg p-4">{% endcomment %}
+                                            {% comment %}<h3 class="text-lg mb-2 text-blue-600 bold_header">NEW ARRIVAL</h3>{% endcomment %}
+                                            {% comment %}<img src="images/product1.jpg" alt="New Arrival" class="w-full h-32 object-cover rounded">{% endcomment %}
+                                        {% comment %}</div>{% endcomment %}
+                                    {% comment %}</div>{% endcomment %}
                                 </div>
                             </div>
                         {% else %}
-                            <a href="{{ menu.uri }}" class="text-gray-800 hover:text-orange-500 bold">{{ menu.title }}</a>
+                            <a href="{{ menu.uri }}" class="text-gray-800 hover:text-orange-500 bold_header font-size-17">{{ menu.title }}</a>
                         {% endif %}
                     </div>
                     {% endfor %}
@@ -117,10 +117,10 @@
         <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 +142,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>

+ 83 - 80
resources/views/liquid_src/1/cable_tech/home.liquid

@@ -14,67 +14,62 @@
 <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>
-            </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>
-                    </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" />
+<!-- banner -->
+{% banner limit=5 position=1 template='__banner_list.liquid' %}
+
+
+
+<!-- Category Navigation -->
+<div class="bg-white">
+    <div class="container mx-auto py-16">
+        <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-8 text-center">
+            <div class="flex flex-col items-center">
+                <a href="/products/categories/screen-protector">
+                    <div class="w-24 h-24 flex items-center justify-center mb-4">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 4h10a1 1 0 011 1v1H6V5a1 1 0 011-1z" />
                         </svg>
                     </div>
-                    <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" />
+                </a>
+                <span class="text-lg mt-2 bold_header"><a href="/products/categories/screen-protector">Screen Protector</a></span>
+            </div>
+            <div class="flex flex-col items-center">
+                <a href="/products/categories/intelligent-film-cutter">
+                    <div class="w-24 h-24 flex items-center justify-center mb-4">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.121 14.121L19 19m-7-7l7-7m-7 7l-2.879 2.879M12 12L9.121 9.121m0 0L4 4" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 8V6a2 2 0 012-2h2M4 16v2a2 2 0 002 2h2m8-16h2a2 2 0 012 2v2m0 8v2a2 2 0 01-2 2h-2" />
                         </svg>
                     </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" />
+                </a>
+                <span class="text-lg mt-2 bold_header"><a href="/products/categories/intelligent-film-cutter">  Intelligent Film Cutter</a></span>
+            </div>
+            <div class="flex flex-col items-center">
+                <a href="/products/categories/functional-products">
+                    <div class="w-24 h-24 flex items-center justify-center mb-4">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                         </svg>
                     </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" />
+                </a>
+                <span class="text-lg mt-2 bold_header"><a href="/products/categories/functional-products">Functional Products</a></span>
+            </div>
+            <div class="flex flex-col items-center">
+                <a href="/products/categories/printer">
+                    <div class="w-24 h-24 flex items-center justify-center mb-4">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
                         </svg>
                     </div>
-                    <span class="text-lg mt-2 bold"><a href="/products/categories/cabos">  Data cable</a></span>
-                </div>
+                </a>
+                <span class="text-lg mt-2 bold_header"><a href="/products/categories/printer">Printer</a></span>
             </div>
+
         </div>
     </div>
-
+</div>
 
 
 
@@ -91,7 +86,7 @@
             <!-- 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 +98,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 %}
@@ -141,17 +136,25 @@
         <h2 class="text-2xl font-bold  p-8">World of Electronic Products</h2>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div class="bg-white rounded-lg shadow overflow-hidden h-full">
+                <a href="/products/categories/intelligent-film-cutter" target="_blank">
                 <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/middle-banner1.jpg" alt="Gaming Setup" class="w-full h-full object-cover">
+                </a>
             </div>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div class="bg-white rounded-lg shadow overflow-hidden h-full">
+                    <a href="/products/categories/screen-protector" target="_blank">
                     <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/middle-banner2.jpg" alt="Streaming Setup" class="w-full h-full object-cover">
+                    </a>
                 </div>
                 <div class="bg-white rounded-lg shadow overflow-hidden h-full">
-                    <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/middle-banner3.jpg" alt="Office Setup" class="w-full h-full object-cover">
+                    <a href="/products/categories/bluetooth-speaker" target="_blank">
+                        <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/middle-banner3.jpg" alt="Office Setup" class="w-full h-full object-cover">
+                    </a>
                 </div>
                 <div class="bg-white rounded-lg shadow overflow-hidden col-span-2 h-full">
+                    <a href="/products/categories/functional-products" target="_blank">
                     <img src="{{ site.image_base_url }}static/tpl/cable_tech/images/middle-banner4.jpg" alt="Working Setup" class="w-full h-full object-cover">
+                    </a>
                 </div>
             </div>
         </div>
@@ -168,25 +171,25 @@
         {% 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,27 +198,27 @@
     {% 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>
@@ -227,7 +230,7 @@
                         <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>
+                <p class="text-sm/6 text-gray-800 bold_header">Become a local Dealer and help your customers with a more complete range.</p>
             </div>
             <div class="bg-white rounded-lg shadow p-6 text-center">
                 <h3 class="bold text-lg mb-4">Shine</h3>
@@ -236,7 +239,7 @@
                         <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>
+                <p class="text-sm/6 text-gray-800 bold_header">Partner with us as a Dealer and bring exclusive solutions to your clients</p>
             </div>
             <div class="bg-white rounded-lg shadow p-6 text-center">
                 <h3 class="bold text-lg mb-4">Lead</h3>
@@ -245,7 +248,7 @@
                         <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>
+                <p class="text-sm/6 text-gray-800 bold_header">Grow as a Regional Leader and deliver exceptional value to your market</p>
             </div>
         </div>
     </div>

+ 29 - 0
resources/views/liquid_src/1/cable_tech/pages_sp_aboutus.liquid

@@ -12,6 +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">
 {% include '_header.liquid' %}