update

layouts/partials/components/ai-anchor.html

@@ -37,6 +37,17 @@
         並且需要從零開始發展知名度，增加宣傳費用。</p>
     </div>
 
+    <div class="col-12 mt-5">
+      <div class="background-cta">
+        <h2>想了解更多？</h2>
+        <p class="d-none d-sm-block">想了解 AI 智能客服如何幫助您提升服務品質及效率，讓您的品牌更具競爭力嗎？<br>歡迎點擊下方按鈕，與創辦人進行一對一交流！</p>
+        <p class="d-block d-sm-none">想了解 AI 智能客服<br>如何幫助您提升服務品質及效率<br>讓您的品牌更具競爭力嗎？<br>歡迎點擊下方按鈕<br>與創辦人進行一對一交流！</p>
+        <a href="https://cmm.ai/cal" target="_blank">
+          立即預約
+        </a>
+      </div>
+    </div>
+
     <div class="col-12">
       <h4 class="pt-5 my-3 text-center">常見問題</h4>
 

layouts/virtual-host-solution/single.html

@@ -23,27 +23,20 @@
       <div class="row">
         <div class="col-lg-8">
           <div class="d-flex flex-column align-items-center main-content">
-            <!-- <img src="/img/aicustomer/AI建模.webp" alt="ChoozMo AI客服｜首圖"> -->
-
-            <!-- <div class="row align-items-center mb-5">
-              <div class="col-xl-4">
-                <img src="/img/aicustomer/昇恆昌.gif" alt="ChoozMo AI客服｜昇恆昌">
-              </div>
-
-              <div class="col-xl-8">
-                <h2 class="mt-5 title">
-                  一鍵生成 AI 客服
-                </h2>
-
-                <p>結合 AI 合成主播與智能影片製作，為企業提供高效、創新的內容生產工具。透過先進的人工智慧技術，打造擬真人物，提升品牌形象，滿足多元行業需求。</p>
-              </div>
-            </div> -->
-
             <section class="taiwanese-content mb-5">
               <img src="/img/aicustomer/台語客服.webp" alt="ChoozMo AI客服｜台語客服">
 
               <h2 class="mt-5">AI 客服使用台語問答，讓長者更容易融入科技</h2>
 
+              <div class="background-cta">
+                <h2>想了解更多？</h2>
+                <p class="d-none d-sm-block">想了解 AI 智能客服如何幫助您提升服務品質及效率，讓您的品牌更具競爭力嗎？<br>歡迎點擊下方按鈕，與創辦人進行一對一交流！</p>
+                <p class="d-block d-sm-none">想了解 AI 智能客服<br>如何幫助您提升服務品質及效率<br>讓您的品牌更具競爭力嗎？<br>歡迎點擊下方按鈕<br>與創辦人進行一對一交流！</p>
+                <a href="https://cmm.ai/cal" target="_blank">
+                  立即預約
+                </a>
+              </div>
+
               <span class="d-flex justify-content-center">
                 <h3 class="my-5">💡 讓科技更親近長者</h3>
               </span>

static/css/style.css

@@ -5951,4 +5951,58 @@
 }
 .home-content #news_accordion .accordion-button::after {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
+}
+
+.background-cta {
+  padding: 40px;
+  margin: 50px auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #920783;
+  color: white;
+  border-radius: 20px;
+}
+@media (max-width: 575px) {
+  .background-cta {
+    padding: 40px 20px;
+  }
+}
+.background-cta p {
+  font-size: 1.25rem;
+}
+@media (max-width: 575px) {
+  .background-cta p {
+    font-size: 1rem !important;
+  }
+}
+.background-cta a {
+  display: block;
+  margin: 15px auto 5px;
+  padding: 15px 40px;
+  color: white !important;
+  font-size: 1.25rem;
+  font-weight: bold;
+  text-decoration: none;
+  border-radius: 100px;
+  transition: all 0.2s;
+  background-color: #ea5413;
+  border: 2px solid #920783;
+  box-shadow: 0 0 0 4px #ea5413, 0 0 0 4px #920783;
+}
+.background-cta a:hover {
+  opacity: 0.8;
+}
+.background-cta p {
+  text-align: center;
+}
+.background-cta h2 {
+  color: white;
+  font-size: 2.5rem;
+}
+@media (max-width: 575px) {
+  .background-cta h2 {
+    font-size: 2rem;
+    margin-bottom: 15px;
+  }
 }/*# sourceMappingURL=style.css.map */

static/css/style.scss

@@ -6970,4 +6970,61 @@
       }
     }
   }
+}
+
+.background-cta {
+  padding: 40px;
+  margin: 50px auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #920783;
+  // background: linear-gradient(140deg, #920783 65%, #ea5413 100%);
+  color: white;
+  border-radius: 20px;
+
+  @media (max-width: 575px) {
+    padding: 40px 20px;
+  }
+
+  p {
+    font-size: 1.25rem;
+
+    @media (max-width: 575px) {
+      font-size: 1rem !important;
+    }
+  }
+
+  a {
+    display: block;
+    margin: 15px auto 5px;
+    padding: 15px 40px;
+    color: white !important;
+    font-size: 1.25rem;
+    font-weight: bold;
+    text-decoration: none;
+    border-radius: 100px;
+    transition: all .2s;
+    background-color: #ea5413;
+    border: 2px solid #920783;
+    box-shadow: 0 0 0 4px #ea5413, 0 0 0 4px #920783;
+
+    &:hover {
+      opacity: .8;
+    }
+  }
+
+  p {
+    text-align: center;
+  }
+
+  h2 {
+    color: white;
+    font-size: 2.5rem;
+
+    @media (max-width: 575px) {
+      font-size: 2rem;
+      margin-bottom: 15px;
+    }
+  }
 }