模版更新

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

@@ -1,11 +1,14 @@
 <section class="additional-products py-5">
-    <div class="container swiper-container-bottom">
-        <div class="row swiper-wrapper">
-            {% for item in banners %}
-            <div class="col-md-3 mb-4 swiper-slide">
-                <div  class="card border-orange" > <a href="{{ item.banner_url }}"><img src="{{ site.image_base_url }}{{ item.image_url }}" alt="{{ item.title }}" class="card-img-top"/></a></div>
+    <div class="container">
+        <!-- 添加导航按钮 -->
+        <div class="swiper-container-bottom">
+            <div class="swiper-wrapper">
+                {% for item in banners %}
+                <div class="col-md-3 mb-4 swiper-slide">
+                    <div  class="card border-orange" > <a href="{{ item.banner_url }}"><img src="{{ site.image_base_url }}{{ item.image_url }}" alt="{{ item.title }}" class="card-img-top"/></a></div>
+                </div>
+                {% endfor %}
             </div>
-            {% endfor %}
         </div>
     </div>
 </section>

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

@@ -1,35 +1,33 @@
 
+
 <!-- FAQ Section -->
-<section class="py-5 bg-light">
-    <div class="container">
+<section>
+    <div class="container faq">
+        <div class="breadcrumb"><a href="/" title="Home page">Home</a>  <strong>Perguntas frequentes</strong></div>
         <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>
-
+                <h2 class="faq-title">Perguntas frequentes</h2>
                 <!-- FAQ Accordion -->
                 <div class="accordion" id="faqAccordion">
-
-                    <!-- Item 1 -->
+                    <!-- 修改了data-bs-target和id使其动态绑定 -->
                     {% 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 class="accordion-item border-0 mb-3">
+                            <h3 class="accordion-header">
+                                <div class="accordion-button "
+                                     type="button"
+                                     data-bs-toggle="collapse"
+                                     data-bs-target="#collapse{{ forloop.index }}">  <!-- 动态ID -->
+                                    {{ item.title | decode_html_entities | strip_html }}
+                                </div>
+                            </h3>
+                            <div id="collapse{{ forloop.index }}" class="accordion-collapse collapse"
+                                 data-bs-parent="#faqAccordion">  <!-- 移除默认show类 -->
+                                <div class="accordion-body text-secondary">
+                                    {{ item.content | strip_html}}
+                                </div>
                             </div>
                         </div>
-                    </div>
                     {% endfor %}
-
-
                 </div>
             </div>
         </div>

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

@@ -49,6 +49,7 @@
                                                                  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">

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

@@ -27,59 +27,50 @@
 {% 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="container article-list">
+
+    <div class="breadcrumb">{% for breadcrumb in breadcrumbs %} {%if forloop.last%} <strong>Perguntas frequentes</strong> {%else%} <a href="{{ breadcrumb.url }}" title="Home page">{{ breadcrumb.name }}</a>{% endif %}{% endfor %} </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 class="col">
+                        <div class="card article-card h-100 article-left">
+                            <div class="row g-0">
+                                <div class="col-md-4">
+                                    <a href="/pages/{% if item.slug %}{{ item.slug }}{% else %}{{ item.id }}{% endif %}" target="_blank">
+                                        {% 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 %}
+                                    </a>
+                                </div>
+                                <div class="col-md-8">
+                                    <div class="card-body">
+                                        <a href="/pages/{% if item.slug %}{{ item.slug }}{% else %}{{ item.id }}{% endif %}" target="_blank">
+                                            <h5 class="card-title">{{ item.title | strip_html }}</h5>
+                                        </a>
 
-                            </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>
 
-                                    <div class="d-flex justify-content-between mb-2">
-                                        <small class="text-muted">{{ item.post_date | date: '%Y-%m-%d' }}</small>
+                                        <p class="card-text text-secondary">
+                                            {% if item.seo_description %}
+                                                {{ item.seo_description | truncatewords: 200 }}
+                                            {% endif %}
+                                        </p>
                                     </div>
-
-                                    <p class="card-text text-secondary">
-                                        {% if item.description %}
-                                            {{ item.description | truncatewords: 200 }}
-                                        {% else %}
-
-                                        {% endif %}
-                                    </p>
                                 </div>
+                                <hr class="w-100 mx-auto">
                             </div>
-                            <hr class="w-100 mx-auto">
                         </div>
                     </div>
-                </div>
                 {% endfor %}
                 <!-- 更多文章重复上述结构 -->
                 <!-- 分页代码 -->
@@ -88,9 +79,9 @@
                         {% 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>
+                                <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">
@@ -137,10 +128,10 @@
                 <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>
+                        <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 }}" target="_blank">
+                            <span>{{ item.title | strip_html }}</span>
+                            <small class="text-muted">{{ item.post_date | date: '%m-%d' }}</small>
+                        </a>
                     {% endfor %}
                 </div>
             </div>

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

@@ -177,7 +177,7 @@
 
 <!-- Seção de Produtos Adicionais -->
 
-{% banner limit=4 position=2 template='__banner_list_2.liquid' %}
+{% banner limit=10 position=2 template='__banner_list_2.liquid' %}
 
 
 
@@ -190,14 +190,29 @@
         paginationClickable: true,
         autoplay: 5000,
     });
-
-
-    var swiper2 = new Swiper('.swiper-container-bottom', {
-        slidesPerView: 5,
-        paginationClickable: true,
-        spaceBetween: 30,
-        freeMode: true,
-        autoplay: 15000,
+    var swiperBottom = new Swiper('.swiper-container-bottom', {
+        loop: true,
+        autoplay: 5000,
+        slidesPerView: 4,
+        spaceBetween: 31,
+        breakpoints: {
+            0: {    // 手机端
+                slidesPerView: 1,
+                spaceBetween: 10
+            },
+            576: {  // 小屏
+                slidesPerView: 2,
+                spaceBetween: 20
+            },
+            768: {  // 平板
+                slidesPerView: 3,
+                spaceBetween: 25
+            },
+            992: {  // 桌面
+                slidesPerView: 4,
+                spaceBetween: 30
+            }
+        }
     });
 </script>
 </body>

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

@@ -27,38 +27,28 @@
 {% 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="container article-detail">
+
+    <div class="breadcrumb">{% for breadcrumb in breadcrumbs %} {%if forloop.last%} <strong>Perguntas frequentes</strong> {%else%} <a href="{{ breadcrumb.url }}" title="Home page">{{ breadcrumb.name }}</a>{% endif %}{% endfor %} </div>
 
-    <div class="row g-4">
+
+    <div class="row">
         <!-- 主内容区 -->
         <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>
+                    <h1 class="mb-5 fw-bold display-6">{{ page.title | raw }}</h1>
 
                     <!-- 文章元信息 -->
-                    <div class="d-flex justify-content-between mb-4 text-muted">
+                    <div class="d-flex justify-content-between mb-4 text-muted article-date">
                         <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 }}
@@ -83,13 +73,13 @@
 
 
                             {% if paginator.next_page %}
-                                <li class="page-item">
+                                <li class="page-item button-next">
                                     <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">
+                                <li class="page-item disabled button-next">
                                     <a class="page-link  text-white" href="#">
                                         <i class="fas fa-chevron-right ms-2"></i>
                                     </a>

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

@@ -29,59 +29,34 @@
 
 
 
-<section class="contact-section py-5">
+<section class="contact-section">
     <div class="container">
-        <div class="row g-5">
+        <div class="breadcrumb"><a href="/" title="Home page">Home</a>  <strong>Perguntas frequentes</strong></div>
+        <div class="row g-5 contact-row">
             <!-- Left Column -->
             <div class="col-md-6">
-                <h2 class="mb-4" mtb_edit="2">Contato</h2>
-                <div class="mb-4">
+                <h2 class="mb-5" mtb_edit="2">Contato</h2>
+                <div class="mb-5">
                     <h3>{{ site.dist.company_name }}</h3>
                     <p class="text-muted">
                         {{ site.dist.company_address }}
                     </p>
                 </div>
 
-                <div class="mb-4">
-                    <h5>Telefone</h5>
+                <div class="mb-5">
+                    <h3>Telefone</h3>
                     <p class="text-muted">{{ site.dist.service_hotline }}</p>
+                </div>
 
-                    <h5 mtb_edit="2">Horário de Atendimento</h5>
+                <div class="mb-5">
+                    <h3 mtb_edit="2">Horário de Atendimento</h3>
                     <p class="text-muted" mtb_edit="2">
                         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">
@@ -131,7 +106,7 @@
                         <!-- 提交按钮 -->
                         <div class="row">
                             <div class="col-md-9 offset-md-3">
-                                <button type="submit" class="btn btn-custom w-100" mtb_edit="2">Enviar</button>
+                                <button class="quote btnch"  data-bs-toggle="modal" data-bs-target="#quoteModal">Get a quote</button>
                             </div>
                         </div>
                     </form>

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

@@ -28,6 +28,8 @@
 
 
 <div class="products-list container"> <!-- 修改外层容器类名 -->
+    <div class="breadcrumb"><a href="/" title="Home page">Home</a>  <strong>{{category.name}}</strong></div>
+
     <h2 class="section-header">{{category.name}}</h2>
 
     <div class="row g-4 section-list"> <!-- 修改内层容器类名 -->
@@ -43,7 +45,7 @@
                         <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>
+                        <h3 class="product-title">{{ item.title | strip_html }}</h3>
                     </div>
                 </a>
             </div>

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

@@ -30,20 +30,10 @@
 
 
 <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="breadcrumb">{% for breadcrumb in breadcrumbs %} {%if forloop.last%} <strong>Perguntas frequentes</strong> {%else%} <a href="{{ breadcrumb.url }}" title="Home page">{{ breadcrumb.name }}</a>{% endif %}{% endfor %} </div>
+
+
+
     <!-- 第一行 -->
     <div class="row g-4">
         <!-- 左侧图片轮播 -->
@@ -53,9 +43,9 @@
                     {% if product.images and product.images.size > 0 %}
                         {% for item in product.images %}
                             {% assign image_url = item.image_url %}
-                        <div class="carousel-item {% if forloop.first %}active {% endif %}">
-                            <img src="{% if image_url contains 'http' %}{{ image_url }}?x-oss-process=image/resize,w_500,m_lfit{% else %}{{ site.image_base_url }}{{ image_url }}?x-oss-process=image/resize,w_500,m_lfit{% endif %}" class="d-block w-100" alt="{{ product.title }}">
-                        </div>
+                            <div class="carousel-item {% if forloop.first %}active {% endif %}">
+                                <img src="{% if image_url contains 'http' %}{{ image_url }}?x-oss-process=image/resize,w_500,m_lfit{% else %}{{ site.image_base_url }}{{ image_url }}?x-oss-process=image/resize,w_500,m_lfit{% endif %}" class="d-block w-100" alt="{{ product.title }}">
+                            </div>
                         {% endfor %}
                     {% else %}
                         <div class="carousel-item active">
@@ -82,89 +72,138 @@
 
         <!-- 右侧产品介绍 -->
         <div class="col-md-7 top-right">
-            <h1 class="mb-4"> {{product.title | strip_html }}</h1>
+            <h1> {{product.title | strip_html }}</h1>
+
+            <div class="sku">{{product.sku | strip_html }}</div>
 
             <div class="product-parameters">
                 {{ product.seo_description | strip_html }}
             </div>
 
-            <div class="contact-form">
-                <div class="form-container">
-                    <h3 class="mb-4" mtb_edit="2">Obter Amostra Gratuita Agora</h3>
-
-                    <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" mtb_edit="2">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" mtb_edit="2">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" mtb_edit="2">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" mtb_edit="2">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" mtb_edit="2">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" mtb_edit="2">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 class="features"></div>
+
+
+            {% comment %}{% endcomment %}
+            {% comment %}<div class="contact-form">{% endcomment %}
+            {% comment %}<div class="form-container">{% endcomment %}
+            {% comment %}<h3 class="mb-4" mtb_edit="2">Obter Amostra Gratuita Agora</h3>{% endcomment %}
+            {% comment %}{% endcomment %}
+            {% comment %}<form id="form_contact" data-action="/contact" class="form-default" role="form">{% endcomment %}
+            {% comment %}<input type="hidden" name="consulting_products" value="{{ product.title }}" />{% endcomment %}
+            {% comment %}<!-- 姓名 -->{% endcomment %}
+            {% comment %}<div class="row mb-3 align-items-center">{% endcomment %}
+            {% comment %}<label class="col-md-3 col-form-label" mtb_edit="2">Nome</label>{% endcomment %}
+            {% comment %}<div class="col-md-9">{% endcomment %}
+            {% comment %}<input type="text" name="customer_name" class="form-control" required>{% endcomment %}
+            {% comment %}</div>{% endcomment %}
+            {% comment %}</div>{% endcomment %}
+            {% comment %}{% endcomment %}
+            {% comment %}<!-- 邮箱 -->{% endcomment %}
+            {% comment %}<div class="row mb-3 align-items-center">{% endcomment %}
+            {% comment %}<label class="col-md-3 col-form-label" mtb_edit="2">E-mail</label>{% endcomment %}
+            {% comment %}<div class="col-md-9">{% endcomment %}
+            {% comment %}<input type="email" name="email" class="form-control" required>{% endcomment %}
+            {% comment %}</div>{% endcomment %}
+            {% comment %}</div>{% endcomment %}
+            {% comment %}{% endcomment %}
+            {% comment %}<!-- 公司名称 -->{% endcomment %}
+            {% comment %}<div class="row mb-3 align-items-center">{% endcomment %}
+            {% comment %}<label class="col-md-3 col-form-label" mtb_edit="2">Empresa</label>{% endcomment %}
+            {% comment %}<div class="col-md-9">{% endcomment %}
+            {% comment %}<input type="text" name="company_name" class="form-control">{% endcomment %}
+            {% comment %}</div>{% endcomment %}
+            {% comment %}</div>{% endcomment %}
+            {% comment %}{% endcomment %}
+            {% comment %}<!-- WhatsApp -->{% endcomment %}
+            {% comment %}<div class="row mb-3 align-items-center">{% endcomment %}
+            {% comment %}<label class="col-md-3 col-form-label" mtb_edit="2">WhatsApp</label>{% endcomment %}
+            {% comment %}<div class="col-md-9">{% endcomment %}
+            {% comment %}<input type="tel" name="whats_app" class="form-control">{% endcomment %}
+            {% comment %}</div>{% endcomment %}
+            {% comment %}</div>{% endcomment %}
+            {% comment %}{% endcomment %}
+            {% comment %}<!-- 消息 -->{% endcomment %}
+            {% comment %}<div class="row mb-3 align-items-center">{% endcomment %}
+            {% comment %}<label class="col-md-3 col-form-label" mtb_edit="2">Mensagem</label>{% endcomment %}
+            {% comment %}<div class="col-md-9">{% endcomment %}
+            {% comment %}<textarea class="form-control" name="content" rows="2"></textarea>{% endcomment %}
+            {% comment %}</div>{% endcomment %}
+            {% comment %}</div>{% endcomment %}
+            {% comment %}{% endcomment %}
+            {% comment %}<!-- 提交按钮 -->{% endcomment %}
+            {% comment %}<div class="row">{% endcomment %}
+            {% comment %}<div class="col-md-9 offset-md-3">{% endcomment %}
+            {% comment %}<button type="submit" class="btn btn-custom w-100" mtb_edit="2">Enviar</button>{% endcomment %}
+            {% comment %}</div>{% endcomment %}
+            {% comment %}</div>{% endcomment %}
+            {% comment %}</form>{% endcomment %}
+            {% comment %}</div>{% endcomment %}
+            {% comment %}</div>{% endcomment %}
+
+            <button class="quote btnch"  data-bs-toggle="modal" data-bs-target="#quoteModal">Get a quote</button>
         </div>
     </div>
 
 
     <!-- 第二行 产品详情 -->
+    {% comment %}<div class="row mt-5">{% endcomment %}
+        {% comment %}<div class="col-12">{% endcomment %}
+            {% comment %}<h2 class="mb-4" mtb_edit="2">{% endcomment %}
+                {% comment %}Informações adicionais{% endcomment %}
+            {% comment %}</h2>{% endcomment %}
+            {% comment %}<hr class="w-100 mx-auto mb-5">{% endcomment %}
+            {% comment %}<div class="product-description">{% endcomment %}
+                {% comment %}{{product.content | raw }}{% endcomment %}
+            {% comment %}</div>{% endcomment %}
+        {% comment %}</div>{% endcomment %}
+    {% comment %}</div>{% endcomment %}
+
     <div class="row mt-5">
         <div class="col-12">
-            <h2 class="mb-4" mtb_edit="2">Informações adicionais
-            </h2>
-            <hr class="w-100 mx-auto mb-5">
-            <div class="product-description">
-                {{product.content | raw }}
+            <ul class="nav nav-tabs mb-4" id="myTab" role="tablist">
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link active" id="description-tab" data-bs-toggle="tab" data-bs-target="#description" type="button" role="tab" aria-controls="description" aria-selected="true">
+                        Descrição
+                    </button>
+                </li>
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link" id="specification-tab" data-bs-toggle="tab" data-bs-target="#specification" type="button" role="tab" aria-controls="specification" aria-selected="false">
+                        Especificação
+                    </button>
+                </li>
+            </ul>
+
+            <div class="tab-content" id="myTabContent">
+                <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
+                    <div class="product-description">
+                        {{product.content | raw }}
+                    </div>
+                </div>
+                <div class="tab-pane fade" id="specification" role="tabpanel" aria-labelledby="specification-tab">
+                    <!-- 在这里添加Specification的内容 -->
+                    <table class="table table-striped table-hover parameters-table">
+                        {% for item in product.parameters %}
+                        <tr>
+                            <td>
+                                <strong>{{ item.key }}</strong>
+                            </td>
+                            <td>
+                                {{ item.value }}
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    </table>
+
+                </div>
             </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">
@@ -176,57 +215,41 @@
                 <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 class="mb-3">
+                        <label class="form-label">Nome</label>
+                        <input type="text" name="customer_name" class="form-control" required>
                     </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 class="mb-3">
+                        <label class="form-label">E-mail</label>
+                        <input type="email" name="email" class="form-control" required>
                     </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 class="mb-3">
+                        <label class="form-label">Empresa</label>
+                        <input type="text" name="company_name" class="form-control">
                     </div>
 
-
-                    <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 class="mb-3">
+                        <label class="form-label">WhatsApp</label>
+                        <input type="tel" name="whats_app" class="form-control">
                     </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 class="mb-3">
+                        <label class="form-label">Mensagem</label>
+                        <textarea class="form-control" name="content" rows="4"></textarea>
                     </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 class="d-grid text-center" style="display: grid; justify-content: center;">
+                        <button type="submit" class="quote btnch">Enviar</button>
                     </div>
                 </form>
-
             </div>
         </div>
     </div>
 </div>
---->
 
 {% include '_footer.liquid' %}