巴西官网

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

@@ -0,0 +1,20 @@
+
+<section class="hero d-flex align-items-center">
+    <div class="container swiper-container">
+        <div class="swiper-wrapper">
+            {% for item in banners %}
+            <div class="row swiper-slide">
+                <div class="col-md-6 text-center text-md-start">
+                    <h1 class="display-4">{{ item.title }}</h1>
+                    <p class="lead">{{ item.subtitle }}</p>
+                    <a href="{{ item.banner_url }}" class="btn btn-dark">Mais Informações</a>
+                </div>
+                <div class="col-md-6 text-center">
+                    <img src="{{ site.image_base_url }}{{ item.image_url }}" alt="{{ item.title }}" class="img-fluid mt-4">
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+        <div class="swiper-pagination"></div>
+    </div>
+</section>

resources/views/liquid_src/1/screen_protector_solutions/__collection_list_1.liquid

@@ -0,0 +1,37 @@
+
+<!-- FAQ Section -->
+<section class="py-5 bg-light">
+    <div class="container">
+        <div class="row justify-content-center">
+            <div class="col-md-12 col-lg-12">
+                <h2 class="mb-4 text-center fs-1 ">Perguntas frequentes</h2>
+
+                <!-- FAQ Accordion -->
+                <div class="accordion" id="faqAccordion">
+
+                    <!-- Item 1 -->
+                    {% for item in pages %}
+                    <div class="accordion-item border-0 mb-3">
+                        <h3 class="accordion-header">
+                            <button class="accordion-button bg-white shadow-sm rounded-3"
+                                    type="button"
+                                    data-bs-toggle="collapse"
+                                    data-bs-target="#collapseOne">
+                                {{ item.title | decode_html_entities | strip_html }}
+                            </button>
+                        </h3>
+                        <div id="collapseOne" class="accordion-collapse collapse show"
+                             data-bs-parent="#faqAccordion">
+                            <div class="accordion-body text-secondary">
+                                {{ item.content | strip_html}}
+                            </div>
+                        </div>
+                    </div>
+                    {% endfor %}
+
+
+                </div>
+            </div>
+        </div>
+    </div>
+</section>

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

@@ -0,0 +1,55 @@
+
+<!-- Rodapé -->
+<footer class="bg-dark text-white py-4 footer">
+    <!-- 品牌标识区 -->
+    <div class="container mb-4">
+        <div class="row align-items-center">
+            <h2 class="h4 mb-0 text-center">
+                <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/logo2.svg" class="logo">
+            </h2>
+        </div>
+        <div class="row">
+            <p class="mb-0 text-center logo-txt">Make It Easier To Use, Better Life</p>
+        </div>
+    </div>
+    </div>
+
+    <div class="container footer-links">
+        <div class="row">
+            <div class="col-md-4 footer-contact">
+                <h5>Contato</h5>
+                <a href="tel:123-456-7890">
+                    <p>{{ site.dist.company_name }}</p>
+                    <p>{{ site.dist.company_address }}</p>
+                    <p>Telefone {{ site.dist.service_hotline }}</p>
+                    <p>Horário de Atendimento:<br /> Segunda a Sexta das 9 às 17 horas</p>
+                </a>
+                <a href="{{ site.dist.facebook }}" class="text-white me-2"><i class="fab fa-facebook"></i></a>
+                <a href="{{ site.dist.instagram }}" class="text-white"><i class="fab fa-instagram"></i></a>
+            </div>
+
+            {% for menu in site.menus_footer %}
+                {% if menu.show %}
+                    <div class="col-md-4">
+                        <h5>{{ menu.title }}</h5>
+                        <ul class="list-unstyled">
+                            {% for child in menu.children %}
+                                {% if child.show %}
+                                    <li><a href="{{ child.uri }}" class="text-white" title="{{ child.title }}">{{ child.title }}</a></li>
+                                {% endif %}
+                            {% endfor %}
+                        </ul>
+                    </div>
+                {% endif %}
+            {% endfor %}
+        </div>
+    </div>
+</footer>
+
+<!-- jQuery e Bootstrap JS -->
+<script src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/js/jquery-3.6.0.min.js"></script>
+<script src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
+<script src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/swiper/js/swiper.min.js"></script>
+<!-- JS Personalizado -->
+<script src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/js/scripts.js"></script>
+

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

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Meleubi - Máquina de Protetor de Tela</title>
+    <!-- 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>
+<!-- Cabeçalho -->
+<header>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-orange">
+
+        <div class="container">
+            {% if site.dist.logo %}
+            <a class="header-logo position-absolute start-0 translate-middle-y" style="top:50%; z-index: 1000" href="/"><img src="{{ site.image_base_url }}{{ site.dist.logo }}" height="115px"></a>
+            {% endif %}
+
+            <div class="navbar-toggler-container position-absolute ">
+                <button class="navbar-toggler " type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#navbarNav"
+                        aria-controls="navbarNav"
+                        aria-expanded="false"
+                        aria-label="切换导航">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+            </div>
+
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav">
+                    {% for menu in site.menus_header %}
+                        <li class="nav-item {% if menu.children and menu.children.size > 0 %}dropdown{% endif %}">
+                            {% if menu.children and menu.children.size > 0 %}
+                                <a  class="nav-link dropdown-toggle"  id="protetoresTelasDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" href="{% if menu.children and menu.children.size > 0 %}#{% else %}{{ menu.uri }}{% endif %}">
+                                    {{ menu.title }}
+                                </a>
+                            {% else %}
+                                <a class="nav-link" href="{% if menu.children and menu.children.size > 0 %}#{% else %}{{ menu.uri }}{% endif %}">
+                                    {{ menu.title }}
+                                </a>
+                            {% endif %}
+                            {% if menu.children and menu.children.size > 0 %}
+                                <ul class="dropdown-menu w-100 p-0">
+                                    <div class="container py-3" style="max-width: 90%; margin: 0 auto;">
+                                        <div class="row g-4">
+                                            {% for child in menu.children %}
+                                            <div class="col-4">
+                                                <div class="d-flex align-items-start">
+
+                                                    <div class="flex-shrink-0">
+                                                        {%  if child.image_url %}
+                                                        <img src="{{ site.asset_base_url }}{{ child.image_url }}"
+                                                             class="img-fluid rounded"
+                                                             style="width: 100%; height: 100%; object-fit: cover;">
+                                                        {% else %}
+                                                            <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/product_default.jpg"
+                                                                 class="img-fluid rounded"
+                                                                 style="width: 100%; height: 100%; object-fit: cover;">
+                                                        {% endif %}
+                                                    </div>
+                                                    <div class="flex-grow-1 ms-3">
+                                                        <h6 class="mb-2 fw-bold"><a href="{{ child.uri }}" class="text-decoration-none text-reset">{{ child.title }}</a></h6>
+                                                        <div class="d-flex flex-column">
+                                                            {% for item in child.children %}
+                                                            <a href="{{ item.uri }}" class="text-decoration-none text-reset mb-1 small">{{ item.title }}</a>
+                                                            {% endfor %}
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            {% endfor %}
+                                        </div>
+                                    </div>
+                                </ul>
+                            {% endif %}
+                        </li>
+                    {% endfor %}
+
+                </ul>
+            </div>
+        </div>
+    </nav>
+</header>
+
+

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

@@ -0,0 +1,129 @@
+{% include '_header.liquid' %}
+
+
+<div class="container py-5 article-list">
+    <div class="row g-4">
+        <nav class="nav-orange">
+            <div class="container">
+                <div class="d-flex breadcrumb">
+                    {% for breadcrumb in breadcrumbs %}
+                        <a href="{{ breadcrumb.url }}" class="nav-link {% if forloop.last == false %}add-icon{% endif %}">
+                            {{ breadcrumb.name }}
+                        </a>
+                    {% endfor %}
+                </div>
+            </div>
+        </nav>
+    </div>
+
+    <div class="row g-4">
+        <!-- 左侧文章列表 -->
+        <div class="col-lg-8">
+            <div class="row row-cols-1 g-4">
+                {% for item in pages %}
+                <!-- 单篇文章卡片 -->
+                <div class="col">
+                    <div class="card article-card h-100 article-left">
+                        <div class="row g-0">
+                            <div class="col-md-4">
+                                {% 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_pad,w_1024,h_1024' }}{% endif %}" class="img-fluid rounded-start post-cover" alt="{{ item.title | strip_html }}">
+                                {% else %}
+                                    <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/" alt="{{ item.title | strip_html }}" class="post-cover">
+                                {% endif %}
+
+                            </div>
+                            <div class="col-md-8">
+                                <div class="card-body">
+                                    <h5 class="card-title">{{ item.title | strip_html }}</h5>
+
+                                    <div class="d-flex justify-content-between mb-2">
+                                        <small class="text-muted">{{ item.post_date | date: '%Y-%m-%d' }}</small>
+                                    </div>
+
+                                    <p class="card-text text-secondary">
+                                        {% if item.description %}
+                                            {{ item.description | truncatewords: 200 }}
+                                        {% else %}
+
+                                        {% endif %}
+                                    </p>
+                                </div>
+                            </div>
+                            <hr class="w-100 mx-auto">
+                        </div>
+                    </div>
+                </div>
+                {% endfor %}
+                <!-- 更多文章重复上述结构 -->
+                <!-- 分页代码 -->
+                <nav aria-label="Page navigation" class="mt-4">
+                    <ul class="pagination justify-content-center flex-wrap">
+                        {% if paginator.previous_page %}
+                            <li class="page-item mr-2">
+
+                                    <a class="page-link" href="{{ paginator.previous_page_url }}" tabindex="-1">
+                                        <i class="fas fa-arrow-left fa-xs"></i>
+                                    </a>
+                            </li>
+                        {% else %}
+                            <li class="page-item disabled mr-2">
+                                <a class="page-link 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 mr-2" aria-current="page">
+                                    <a class="page-link" href="#">{{ page }}</a>
+                                </li>
+                            {% else %}
+                                <li class="page-item mr-2">
+                                    <a class="page-link" href="{{ paginator.page_url[page] }}">{{ page }}</a>
+                                </li>
+                            {% endif %}
+                        {% endfor %}
+
+                        {% if paginator.next_page %}
+                            <li class="page-item">
+                                <a class="page-link" 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 text-gray" href="#">
+                                    <i class="fas fa-arrow-right fa-xs"></i>
+                                </a>
+                            </li>
+                        {% endif %}
+                    </ul>
+                </nav>
+            </div>
+        </div>
+
+        <!-- 右侧边栏 -->
+        <div class="col-lg-4">
+            <div class="recent-posts">
+                <h4 class="mb-4 bg-teal p-3 rounded">RECENT POSTS</h4>
+                <hr class="w-100 mx-auto ">
+                <div class="list-group">
+                    {% for item in pages %}
+                    <a href="/pages/{% if item.slug %}{{ item.slug }}{% else %}{{ item.id }}{% endif %}" class="list-group-item list-group-item-action d-flex justify-content-between" title="{{ item.title | strip_html }}">
+                        <span>{{ item.title | strip_html }}</span>
+                        <small class="text-muted">{{ item.post_date | date: '%m-%d' }}</small>
+                    </a>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+
+{% include '_footer.liquid' %}
+</body>
+</html>

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

@@ -0,0 +1,183 @@
+{% include '_header.liquid' %}
+
+<!-- Seção Hero -->
+
+{% banner limit=5 position=1 template='__banner_list.liquid' %}
+
+
+<!-- Seção de Produtos -->
+<section class="index-products py-5">
+    <div class="container">
+        <h2 class="text-center mb-4">Nossos Produtos</h2>
+        <hr class="w-25 mx-auto mb-5">
+        <div class="row">
+
+            <div class="col-md-4 mb-4">
+                <div class="card">
+                    <a href="#">
+                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/p1.webp" class="card-img-top" alt="Máquinas para Protetores de Telas">
+                        <div class="card-body">
+                            <h5 class="card-title">Máquinas para Protetores de Telas</h5>
+                            <p class="card-text">Máquinas para imprimir ou cortar protetores de tela para celulares.</p>
+                        </div>
+                    </a>
+                </div>
+            </div>
+
+            <div class="col-md-4 mb-4">
+                <div class="card">
+                    <a href="#">
+                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/p2.webp" class="card-img-top" alt="Protetores de Telas de Hidrogel">
+                        <div class="card-body">
+                            <h5 class="card-title">Protetores de Telas de Hidrogel</h5>
+                            <p class="card-text">Fáceis de aplicar e remover.</p>
+                        </div>
+                    </a>
+                </div>
+            </div>
+            <div class="col-md-4 mb-4">
+                <div class="card">
+                    <a href="#">
+                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/p3.webp" class="card-img-top" alt="Protetores de Telas de Hidrogel">
+                        <div class="card-body">
+                            <h5 class="card-title">Protetores de Telas de Hidrogel</h5>
+                            <p class="card-text">Fáceis de aplicar e remover.</p>
+                        </div>
+                    </a>
+                </div>
+            </div>
+            <!-- Adicione mais cards conforme necessário -->
+        </div>
+        <div class="row">
+            <div class="col-md-4 mb-4">
+                <div class="card">
+                    <a href="#">
+                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/p4.webp" class="card-img-top" alt="Máquinas para Protetores de Telas">
+                        <div class="card-body">
+                            <h5 class="card-title">Máquinas para Protetores de Telas</h5>
+                            <p class="card-text">Máquinas para imprimir ou cortar protetores de tela para celulares.</p>
+                        </div>
+                    </a>
+                </div>
+            </div>
+            <div class="col-md-4 mb-4">
+                <div class="card">
+                    <a href="#">
+                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/p5.webp" class="card-img-top" alt="Protetores de Telas de Hidrogel">
+                        <div class="card-body">
+                            <h5 class="card-title">Protetores de Telas de Hidrogel</h5>
+                            <p class="card-text">Fáceis de aplicar e remover.</p>
+                        </div>
+                    </a>
+                </div>
+            </div>
+            <div class="col-md-4 mb-4">
+                <div class="card">
+                    <a href="#">
+                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/p6.webp" class="card-img-top" alt="Protetores de Telas de Hidrogel">
+                        <div class="card-body">
+                            <h5 class="card-title">Protetores de Telas de Hidrogel</h5>
+                            <p class="card-text">Fáceis de aplicar e remover.</p>
+                        </div>
+                    </a>
+                </div>
+            </div>
+            <!-- Adicione mais cards conforme necessário -->
+        </div>
+    </div>
+</section>
+
+<!-- Banner de Chamada à Ação -->
+<section class="cta-banner text-center py-4 text-white" style="position: relative; height: 340px;">
+    <!-- 新增纯背景层 -->
+    <div class="bg-orange-overlay"></div>
+    <!-- 内容容器 -->
+    <div class="container d-flex h-100 position-relative" style="z-index: 1;">
+        <div class="container-txt d-flex flex-column justify-content-center">
+            <h3>Veja como é simples produzir telas de proteção personalizadas para celular.</h3>
+        </div>
+        <div class="elementor-widget-container">
+            <div class="elementor-wrapper elementor-open-inline">
+                <iframe class="elementor-video" frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" title="Mietubl mini phone skin printer- make DIY the highlight of your store" width="495" height="280" src="https://www.youtube.com/embed/oXRHiw72XMw?controls=0&amp;rel=0&amp;playsinline=0&amp;modestbranding=0&amp;cc_load_policy=0&amp;autoplay=0&amp;enablejsapi=1&amp;origin=https%3A%2F%2Fmietubloficial.com.br&amp;widgetid=1" id="widget2"></iframe>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Seção de Produtos Adicionais -->
+<section class="additional-products py-5">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-3 mb-4">
+                <div class="card border-orange">
+                    <a href="#">
+                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/index-plist1.webp" class="card-img-top" alt="Carregador 65W">
+                    </a>
+                </div>
+            </div>
+            <div class="col-md-3 mb-4">
+                <div class="card border-orange">
+                    <a href="#">
+                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/index-plist2.webp" class="card-img-top" alt="Carregador 65W">
+                    </a>
+                </div>
+            </div>
+
+            <div class="col-md-3 mb-4">
+                <div class="card border-orange">
+                    <a href="#">
+                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/index-plist3.webp" class="card-img-top" alt="Carregador 65W">
+                    </a>
+                </div>
+            </div>
+
+            <div class="col-md-3 mb-4">
+                <div class="card border-orange">
+                    <a href="#">
+                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/index-plist4.webp" class="card-img-top" alt="Carregador 65W">
+                    </a>
+                </div>
+            </div>
+
+            <!-- Adicione mais cards conforme necessário -->
+        </div>
+    </div>
+</section>
+
+
+
+
+{% include '_footer.liquid' %}
+
+<script>
+    //主页轮播图
+    var swiper = new Swiper('.swiper-container', {
+        pagination: '.swiper-pagination',
+        paginationClickable: true,
+        autoplay: 5000,
+    });
+
+    // 控制下拉菜单显示和箭头方向
+    $("#navbarNav .dropdown").hover(
+        function() {
+            const $toggle = $(this).find(".dropdown-toggle");
+            const $menu = $(this).find(".dropdown-menu");
+
+            $menu.addClass('show');
+            $toggle.attr('aria-expanded', 'true');
+        },
+        function() {
+            const $toggle = $(this).find(".dropdown-toggle");
+            const $menu = $(this).find(".dropdown-menu");
+
+            $menu.removeClass('show');
+            $toggle.attr('aria-expanded', 'false');
+        }
+    );
+</script>
+</body>
+</html>
+
+
+
+

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

@@ -0,0 +1,86 @@
+{% include '_header.liquid' %}
+
+
+<div class="container py-5 article-detail">
+    <div class="row g-4">
+        <!-- 面包屑导航 -->
+        <nav class="nav-orange">
+            <div class="container">
+                <div class="d-flex breadcrumb">
+                    {% for breadcrumb in breadcrumbs %}
+                        <a href="{{ breadcrumb.url }}" class="nav-link  {% if forloop.last == false %}add-icon{% endif %} ">
+                            {{ breadcrumb.name }}
+                        </a>
+                    {% endfor %}
+                </div>
+            </div>
+        </nav>
+    </div>
+
+    <div class="row g-4">
+        <!-- 主内容区 -->
+        <div class="col-lg-12">
+            <article class="card article-content">
+                <div class="card-body">
+                    <!-- 文章标题 -->
+                    <h1 class="mb-4 fw-bold display-6">{{ page.title | raw }}</h1>
+
+                    <!-- 文章元信息 -->
+                    <div class="d-flex justify-content-between mb-4 text-muted">
+                        <div>
+                            <span><i class="fas fa-clock me-1"></i>{{ page.post_date | date: '%Y-%m-%d' }}</span>
+                        </div>
+                    </div>
+
+
+                    <!-- 文章正文 -->
+                    <div class="article-body">
+                        {{page.content | raw }}
+                    </div>
+
+                    <!-- 分页导航 -->
+                    <nav class="mt-5 text-center">
+                        <ul class="pagination justify-content-center post-pagination">
+                            {% if paginator.previous_page %}
+                            <li class="page-item">
+                                <a class="page-link text-white page-bg-orange" href="{{ paginator.previous_page_url }}">
+                                    <i class="fas fa-chevron-left me-2"></i>
+                                </a>
+                            </li>
+                            {% else %}
+                                <li class="page-item disabled">
+                                    <a class="page-link text-white" href="#">
+                                        <i class="fas fa-chevron-left me-2"></i>
+                                    </a>
+                                </li>
+                            {% endif %}
+
+
+                            {% if paginator.next_page %}
+                                <li class="page-item">
+                                    <a class="page-link text-white page-bg-orange" href="{{ paginator.next_page_url }}">
+                                        <i class="fas fa-chevron-right ms-2"></i>
+                                    </a>
+                                </li>
+                            {% else %}
+                                <li class="page-item disabled">
+                                    <a class="page-link  text-white" href="#">
+                                        <i class="fas fa-chevron-right ms-2"></i>
+                                    </a>
+                                </li>
+                            {% endif %}
+                        </ul>
+                    </nav>
+                </div>
+            </article>
+        </div>
+
+        <!-- 右侧边栏 -->
+
+    </div>
+</div>
+
+
+{% include '_footer.liquid' %}
+</body>
+</html>

resources/views/liquid_src/1/screen_protector_solutions/pages_sp_about.liquid

@@ -0,0 +1,78 @@
+{% include '_header.liquid' %}
+
+
+
+<!-- Hero Section -->
+<section class="about-hero text-center" style="background-image: url('{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/contact_us.png');">
+    <div class="container">
+        <h1 class="display-4 fw-bold mb-4">Sobre Mietubl</h1>
+        <p class="lead">Nascido na China, crescendo com fabricação inteligente</p>
+    </div>
+</section>
+
+<!-- Main Content -->
+<section class="py-5">
+    <div class="container">
+        <div class="row align-items-center g-5">
+            <div class="col-lg-6">
+
+                <h3 class="section-title  text-center py-5"> {{ page.title | raw }}</h3>
+                <div class="text-muted lead">
+                    {{page.content | raw }}
+                </div>
+            </div>
+            <div class="col-lg-6">
+                <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/Profile.webp"
+                     alt="Manufacturing"
+                     class="img-fluid rounded-3 shadow">
+            </div>
+        </div>
+    </div>
+</section>
+
+
+
+
+
+<!-- Core Values -->
+<section class="core-values">
+    <div class="container text-center py-5">
+        <h3 class="section-title">O nosso compromisso</h3>
+        <div class="row g-4">
+            <div class="col-md-4">
+                <div class="card h-100 border-0">
+                    <div class="card-body">
+                        <i class="fas fa-globe-asia fa-3x text-primary mb-3"></i>
+                        <h5>Soluções Globais</h5>
+                        <p class="text-muted">Fornecer soluções tecnológicas em todo o mundo com experiência localizada</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="card h-100 border-0">
+                    <div class="card-body">
+                        <i class="fas fa-hand-holding-heart fa-3x text-danger mb-3"></i>
+                        <h5>Criação de Valor</h5>
+                        <p class="text-muted">Garantir a satisfação do consumidor e a rentabilidade do revendedor</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="card h-100 border-0">
+                    <div class="card-body">
+                        <i class="fas fa-link fa-3x text-success mb-3"></i>
+                        <h5>Construção de ecossistemas</h5>
+                        <p class="text-muted">Integração de recursos ao longo do ciclo de vida do produto</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+
+
+
+{% include '_footer.liquid' %}
+</body>
+</html>

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

@@ -0,0 +1,175 @@
+{% include '_header.liquid' %}
+
+
+
+
+<section class="contact-section py-5">
+    <div class="container">
+        <div class="row g-5">
+            <!-- Left Column -->
+            <div class="col-md-6">
+                <h2 class="mb-4">Contato</h2>
+                <div class="mb-4">
+                    <h3>{{ site.dist.company_name }}</h3>
+                    <p class="text-muted">
+                        {{ site.dist.company_address }}
+                    </p>
+                </div>
+
+                <div class="mb-4">
+                    <h5>Telefone</h5>
+                    <p class="text-muted">{{ site.dist.service_hotline }}</p>
+
+                    <h5>Horário de Atendimento</h5>
+                    <p class="text-muted">
+                        Segunda a Sexta das 09:00 às 17:00 horas
+                    </p>
+                </div>
+            </div>
+
+            <!-- Right Column -->
+
+            {% comment %}<div class="col-md-6">{% endcomment %}
+                {% comment %}<div class="form-container">{% endcomment %}
+                    {% comment %}<h3 class="mb-4">Seja um Representante</h3>{% endcomment %}
+                    {% comment %}<form id="form_contact" data-action="/contact" class="form-default" role="form">{% endcomment %}
+                        {% comment %}<div class="mb-3">{% endcomment %}
+                            {% comment %}<input type="text" name="customer_name" class="form-control" placeholder="Nome" required>{% endcomment %}
+                        {% comment %}</div>{% endcomment %}
+{% comment %}{% endcomment %}
+                        {% comment %}<div class="mb-3">{% endcomment %}
+                            {% comment %}<input type="email" name="email" class="form-control" placeholder="E-mail" required>{% endcomment %}
+                        {% comment %}</div>{% endcomment %}
+{% comment %}{% endcomment %}
+                        {% comment %}<div class="mb-3">{% endcomment %}
+                            {% comment %}<input type="text" name="company_name" class="form-control" placeholder="Nome da empresa">{% endcomment %}
+                        {% comment %}</div>{% endcomment %}
+{% comment %}{% endcomment %}
+                        {% comment %}<div class="mb-3">{% endcomment %}
+                            {% comment %}<input type="tel" name="whats_app" class="form-control" placeholder="WhatsApp">{% endcomment %}
+                        {% comment %}</div>{% endcomment %}
+{% comment %}{% endcomment %}
+                        {% comment %}<div class="mb-3">{% endcomment %}
+                            {% comment %}<textarea class="form-control" name="content" rows="4" placeholder="Mensagem"></textarea>{% endcomment %}
+                        {% comment %}</div>{% endcomment %}
+                        {% comment %}<button type="submit" class="btn btn-custom">Enviar</button>{% endcomment %}
+                    {% comment %}</form>{% endcomment %}
+                {% comment %}</div>{% endcomment %}
+            {% comment %}</div>{% endcomment %}
+
+
+            <div class="col-md-6 contact-form">
+                <div class="form-container">
+                    <h3 class="mb-4">Seja um Representante</h3>
+                    <form id="form_contact" data-action="/contact" class="form-default" role="form">
+                        <!-- 姓名 -->
+                        <div class="row mb-3 align-items-center">
+                            <label class="col-md-3 col-form-label">Nome</label>
+                            <div class="col-md-9">
+                                <input type="text" name="customer_name" class="form-control" required>
+                            </div>
+                        </div>
+
+                        <!-- 邮箱 -->
+                        <div class="row mb-3 align-items-center">
+                            <label class="col-md-3 col-form-label">E-mail</label>
+                            <div class="col-md-9">
+                                <input type="email" name="email" class="form-control" required>
+                            </div>
+                        </div>
+
+                        <!-- 公司名称 -->
+                        <div class="row mb-3 align-items-center">
+                            <label class="col-md-3 col-form-label">Empresa</label>
+                            <div class="col-md-9">
+                                <input type="text" name="company_name" class="form-control">
+                            </div>
+                        </div>
+
+                        <!-- WhatsApp -->
+                        <div class="row mb-3 align-items-center">
+                            <label class="col-md-3 col-form-label">WhatsApp</label>
+                            <div class="col-md-9">
+                                <input type="tel" name="whats_app" class="form-control">
+                            </div>
+                        </div>
+
+                        <!-- 消息 -->
+                        <div class="row mb-3 align-items-center">
+                            <label class="col-md-3 col-form-label">Mensagem</label>
+                            <div class="col-md-9">
+                                <textarea class="form-control" name="content" rows="4"></textarea>
+                            </div>
+                        </div>
+
+                        <!-- 提交按钮 -->
+                        <div class="row">
+                            <div class="col-md-9 offset-md-3">
+                                <button type="submit" class="btn btn-custom w-100">Enviar</button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+{% include '_footer.liquid' %}
+<script>
+    $(document).ready(function() {
+        $('#form_contact').on('submit', function(event) {
+            event.preventDefault();
+            var form = $(this);
+            var token = $('input[name="_token"]').val();
+            var formData = form.serialize();
+
+            // Validate required fields
+            var requiredFields = form.find('.required-field input, .required-field textarea');
+            var hasError = false;
+
+            requiredFields.each(function() {
+                if ($(this).val().trim() === '') {
+                    alert('please fill in all required fields');
+                    hasError = true;
+                }
+            });
+
+            if (hasError) return;
+
+            // Validate WhatsApp as a number
+            var whatsapp = $('input[name="whats_app"]').val();
+            if (whatsapp == "") {
+                alert('please enter a valid WhatsApp number');
+                return;
+            }
+
+            // Validate email format
+            var email = $('input[name="email"]').val();
+            if (email == "") {
+                alert('please enter a valid email address');
+                return;
+            }
+            // Submit via AJAX
+            $.ajax({
+                url: form.data('action'),
+                type: 'POST',
+                data: formData,
+                dataType: 'json',
+                beforeSend: function() {
+                    // Before send
+                },
+                success: function(response) {
+                    alert('Success!');
+                    form.trigger('reset');
+                },
+                error: function(xhr, status, error) {
+                    alert('error! Please try again later.');
+                }
+            });
+
+        });
+    });
+</script>
+</body>
+</html>

resources/views/liquid_src/1/screen_protector_solutions/pages_sp_faq.liquid

@@ -0,0 +1,10 @@
+{% include '_header.liquid' %}
+
+
+{% collection slug="FAQ" limit=3 template="__collection_list_1.liquid" %}
+
+
+
+{% include '_footer.liquid' %}
+</body>
+</html>

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

@@ -0,0 +1,81 @@
+{% include '_header.liquid' %}
+
+
+<div class="products-list container"> <!-- 修改外层容器类名 -->
+    <h2 class="section-header">{{category.name}}</h2>
+
+    <div class="row g-4 section-list"> <!-- 修改内层容器类名 -->
+        <!-- 头戴式降噪耳机 -->
+        {% for item in products %}
+        <div class="col-6 col-md-3">
+            <div class=" product-card">
+                <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_260,h_260{% else %}{{ site.image_base_url }}{{ image_url | append: '?x-oss-process=image/resize,m_pad,w_260,h_260' }}{% endif %}" class="card-img-top product-image"  alt="{{ item.title | strip_html }}">
+                    {% 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 }}">
+                    {% endif %}
+                    <div class="card-body text-center">
+                        <h3 class="product-title fw-bold mb-2">{{ item.title | strip_html }}</h3>
+                    </div>
+                </a>
+            </div>
+        </div>
+        {% endfor %}
+
+        <!-- 分页代码 -->
+        <nav aria-label="Page navigation" class="mt-4">
+            <ul class="pagination justify-content-center flex-wrap">
+                {% if paginator.previous_page %}
+                    <li class="page-item mr-2">
+
+                        <a class="page-link" href="{{ paginator.previous_page_url }}" tabindex="-1">
+                            <i class="fas fa-arrow-left fa-xs"></i>
+                        </a>
+                    </li>
+                {% else %}
+                    <li class="page-item disabled mr-2">
+                        <a class="page-link 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 mr-2" aria-current="page">
+                            <a class="page-link" href="#">{{ page }}</a>
+                        </li>
+                    {% else %}
+                        <li class="page-item mr-2">
+                            <a class="page-link" href="{{ paginator.page_url[page] }}">{{ page }}</a>
+                        </li>
+                    {% endif %}
+                {% endfor %}
+
+                {% if paginator.next_page %}
+                    <li class="page-item">
+                        <a class="page-link" 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 text-gray" href="#">
+                            <i class="fas fa-arrow-right fa-xs"></i>
+                        </a>
+                    </li>
+                {% endif %}
+            </ul>
+        </nav>
+
+    </div>
+</div>
+
+
+
+
+{% include '_footer.liquid' %}
+</body>
+</html>

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

@@ -0,0 +1,274 @@
+{% include '_header.liquid' %}
+
+
+<div class="container products-detail">
+    <div class="row g-4">
+        <!-- 面包屑导航 -->
+        <nav class="nav-orange">
+            <div class="container">
+                <div class="d-flex breadcrumb">
+                    {% for breadcrumb in breadcrumbs %}
+                        <a href="{{ breadcrumb.url }}" class="nav-link  {% if forloop.last == false %}add-icon{% endif %} ">
+                            {{ breadcrumb.name }}
+                        </a>
+                    {% endfor %}
+                </div>
+            </div>
+        </nav>
+    </div>
+    <!-- 第一行 -->
+    <div class="row g-4">
+        <!-- 左侧图片轮播 -->
+        <div class="col-md-5 top-left">
+            <div id="mainCarousel" class="carousel slide main-carousel">
+                <div class="carousel-inner">
+                    <div class="carousel-item active">
+                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/list1.webp" class="d-block w-100" alt="产品图1">
+                    </div>
+                    <div class="carousel-item">
+                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/list2.webp" class="d-block w-100" alt="产品图2">
+                    </div>
+                    <div class="carousel-item">
+                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/list3.webp" class="d-block w-100" alt="产品图3">
+                    </div>
+                    <div class="carousel-item">
+                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/list4.webp" class="d-block w-100" alt="产品图3">
+                    </div>
+                    <div class="carousel-item">
+                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/list5.webp" class="d-block w-100" alt="产品图3">
+                    </div>
+                    <div class="carousel-item">
+                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/list2.webp" class="d-block w-100" alt="产品图2">
+                    </div>
+                </div>
+            </div>
+
+            <div class="carousel-thumbnails   swiper-container" >
+                <div class="swiper-wrapper">
+                    <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/list1.webp" class="swiper-slide" data-bs-target="#mainCarousel" data-bs-slide-to="0" alt="缩略图1">
+                    <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/list2.webp" class="swiper-slide" data-bs-target="#mainCarousel" data-bs-slide-to="1" alt="缩略图2">
+                    <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/list3.webp" class="swiper-slide" data-bs-target="#mainCarousel" data-bs-slide-to="2" alt="缩略图3">
+                    <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/list4.webp" class="swiper-slide" data-bs-target="#mainCarousel" data-bs-slide-to="3" alt="缩略图3">
+                    <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/list5.webp" class="swiper-slide" data-bs-target="#mainCarousel" data-bs-slide-to="4" alt="缩略图3">
+                    <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/list2.webp" class="swiper-slide" data-bs-target="#mainCarousel" data-bs-slide-to="5" alt="缩略图2">
+                </div>
+            </div>
+        </div>
+
+        <!-- 右侧产品介绍 -->
+        <div class="col-md-7 top-right">
+            <h1 class="mb-4"> {{product.title | strip_html }}</h1>
+
+            <div class="product-parameters">
+                {{ product.seo_description | strip_html }}
+            </div>
+
+            <div class="contact-form">
+                <div class="form-container">
+                    <h3 class="mb-4">Obter Amostra Gratuita Agora</h3>
+
+                    <form id="form_contact" data-action="/contact" class="form-default" role="form">
+                        <!-- 姓名 -->
+                        <div class="row mb-3 align-items-center">
+                            <label class="col-md-3 col-form-label">Nome</label>
+                            <div class="col-md-9">
+                                <input type="text" name="customer_name" class="form-control" required>
+                            </div>
+                        </div>
+
+                        <!-- 邮箱 -->
+                        <div class="row mb-3 align-items-center">
+                            <label class="col-md-3 col-form-label">E-mail</label>
+                            <div class="col-md-9">
+                                <input type="email" name="email" class="form-control" required>
+                            </div>
+                        </div>
+
+                        <!-- 公司名称 -->
+                        <div class="row mb-3 align-items-center">
+                            <label class="col-md-3 col-form-label">Empresa</label>
+                            <div class="col-md-9">
+                                <input type="text" name="company_name" class="form-control">
+                            </div>
+                        </div>
+
+                        <!-- WhatsApp -->
+                        <div class="row mb-3 align-items-center">
+                            <label class="col-md-3 col-form-label">WhatsApp</label>
+                            <div class="col-md-9">
+                                <input type="tel" name="whats_app" class="form-control">
+                            </div>
+                        </div>
+
+                        <!-- 消息 -->
+                        <div class="row mb-3 align-items-center">
+                            <label class="col-md-3 col-form-label">Mensagem</label>
+                            <div class="col-md-9">
+                                <textarea class="form-control" name="content" rows="2"></textarea>
+                            </div>
+                        </div>
+
+                        <!-- 提交按钮 -->
+                        <div class="row">
+                            <div class="col-md-9 offset-md-3">
+                                <button type="submit" class="btn btn-custom w-100">Enviar</button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+
+            {% comment %}<button class="btn btn-quote"  data-bs-toggle="modal" data-bs-target="#quoteModal"  style="background-color: #ec6c00; color: white; width: 150px; height: 45px; border: none; margin-top: 20px;">Get a quote</button>{% endcomment %}
+        </div>
+    </div>
+
+
+    <!-- 第二行 产品详情 -->
+    <div class="row mt-5">
+        <div class="col-12">
+            <h2 class="mb-4">Informações adicionais
+            </h2>
+            <hr class="w-100 mx-auto mb-5">
+            <div class="product-description">
+                {{product.content | raw }}
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<!-- Hidden content -->
+<div class="modal fade" id="quoteModal" tabindex="-1" aria-labelledby="quoteModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="quoteModalLabel">Seja um Representante</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body contact-form">
+                <form id="form_contact" data-action="/contact" class="form-default" role="form">
+                    <input type="hidden" name="consulting_products" value="{{ product.title }}" />
+                    <!-- 姓名 -->
+                    <div class="row mb-3 align-items-center">
+                        <label class="col-md-3 col-form-label">Nome</label>
+                        <div class="col-md-9">
+                            <input type="text" name="customer_name" class="form-control" required>
+                        </div>
+                    </div>
+
+                    <!-- 邮箱 -->
+                    <div class="row mb-3 align-items-center">
+                        <label class="col-md-3 col-form-label">E-mail</label>
+                        <div class="col-md-9">
+                            <input type="email" name="email" class="form-control" required>
+                        </div>
+                    </div>
+
+                    <!-- 公司名称 -->
+                    <div class="row mb-3 align-items-center">
+                        <label class="col-md-3 col-form-label">Empresa</label>
+                        <div class="col-md-9">
+                            <input type="text" name="company_name" class="form-control">
+                        </div>
+                    </div>
+
+                    <!-- WhatsApp -->
+                    <div class="row mb-3 align-items-center">
+                        <label class="col-md-3 col-form-label">WhatsApp</label>
+                        <div class="col-md-9">
+                            <input type="tel" name="whats_app" class="form-control">
+                        </div>
+                    </div>
+
+                    <!-- 消息 -->
+                    <div class="row mb-3 align-items-center">
+                        <label class="col-md-3 col-form-label">Mensagem</label>
+                        <div class="col-md-9">
+                            <textarea class="form-control" name="content" rows="4"></textarea>
+                        </div>
+                    </div>
+
+                    <!-- 提交按钮 -->
+                    <div class="row">
+                        <div class="col-md-9 offset-md-3">
+                            <button type="submit" class="btn btn-custom w-100">Enviar</button>
+                        </div>
+                    </div>
+                </form>
+
+            </div>
+        </div>
+    </div>
+</div>
+
+
+{% include '_footer.liquid' %}
+
+<script>
+    var swiper = new Swiper('.swiper-container', {
+        slidesPerView: 5,
+        paginationClickable: true,
+        spaceBetween: 30,
+        freeMode: true
+    });
+
+    $(document).ready(function() {
+        $('#form_contact').on('submit', function(event) {
+            event.preventDefault();
+            var form = $(this);
+            var token = $('input[name="_token"]').val();
+            var formData = form.serialize();
+
+            // Validate required fields
+            var requiredFields = form.find('.required-field input, .required-field textarea');
+            var hasError = false;
+
+            requiredFields.each(function() {
+                if ($(this).val().trim() === '') {
+                    alert('please fill in all required fields');
+                    hasError = true;
+                }
+            });
+
+            if (hasError) return;
+
+            // Validate WhatsApp as a number
+            var whatsapp = $('input[name="whats_app"]').val();
+            if (whatsapp == "") {
+                alert('please enter a valid WhatsApp number');
+                return;
+            }
+
+            // Validate email format
+            var email = $('input[name="email"]').val();
+            if (email == "") {
+                alert('please enter a valid email address');
+                return;
+            }
+            console.log(formData);
+
+            // Submit via AJAX
+            $.ajax({
+                url: form.data('action'),
+                type: 'POST',
+                data: formData,
+                dataType: 'json',
+                beforeSend: function() {
+                    // Before send
+                },
+                success: function(response) {
+                    alert('Success!');
+                    form.trigger('reset');
+                },
+                error: function(xhr, status, error) {
+                    alert('error! Please try again later.');
+                }
+            });
+
+        });
+    });
+
+
+</script>
+</body>
+</html>