Acasă Explorează Ajutor
Autentificare
choozmo
/
AI_Video_LP
4
0
Bifurcare 0
Fisiere Probleme 0 Trageți solicitările 0 Wiki
Răsfoiți Sursa

update

SyuanYu 1 săptămână în urmă
părinte
aef8f14beb
comite
1a903714cd
26 a modificat fișierele cu 3106 adăugiri și 929 ștergeri
Vedere unificată Arată Statisticile Diff
  1. 40 6
      layouts/ad-operation/single.html
  2. 840 0
      layouts/ai-presenter/single copy 2.html
  3. 405 719
      layouts/ai-presenter/single.html
  4. 428 0
      layouts/ai-video-maker/single.html
  5. 19 182
      layouts/ai-virtual-presenter/single.html
  6. 32 1
      layouts/crawler/single.html
  7. 33 0
      layouts/partials/head_single.html
  8. 2 0
      layouts/partials/navbar.html
  9. 710 0
      layouts/saas-ai-video-maker/single.html
  10. 3 3
      static/css/custom.css
  11. 251 0
      static/css/service.css
  12. 0 0
      static/css/service.css.map
  13. 291 0
      static/css/service.scss
  14. BIN
      static/imgs/ai-presenter/change_outfit.webp
  15. BIN
      static/imgs/ai-presenter/chibi_1.webp
  16. BIN
      static/imgs/ai-presenter/chibi_2.webp
  17. BIN
      static/imgs/ai-presenter/cover_1.webp
  18. BIN
      static/imgs/ai-presenter/demo.webp
  19. BIN
      static/imgs/ai-presenter/img121.webp
  20. BIN
      static/imgs/ai-presenter/img122.webp
  21. BIN
      static/imgs/ai-presenter/img125.webp
  22. 34 18
      webSite/config.toml
  23. 8 0
      webSite/content/ai-video-maker/dm.md
  24. 8 0
      webSite/content/saas-ai-video-maker/dm.md
  25. 1 0
      webSite/var/www/html/collaboration/index.html
  26. 1 0
      webSite/var/www/html/collaboration/info/index.html

+ 40 - 6
layouts/ad-operation/single.html
Vizualizați fișierul 

@@ -14,6 +14,37 @@
 
   <!-- Start of HubSpot Embed Code -->
 
   <!-- Start of HubSpot Embed Code -->
 
   <!-- <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script> -->
 
   <!-- <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script> -->
 
   <!-- End of HubSpot Embed Code -->
 
   <!-- End of HubSpot Embed Code -->
 
+
 
+  <!-- Google Tag Manager -->
 
+  <script>(function (w, d, s, l, i) {
 
+      w[l] = w[l] || []; w[l].push({
 
+        'gtm.start':
 
+          new Date().getTime(), event: 'gtm.js'
 
+      }); var f = d.getElementsByTagName(s)[0],
 
+        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
 
+          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
 
+    })(window, document, 'script', 'dataLayer', 'GTM-MTWWP3G');</script>
 
+  <!-- End Google Tag Manager -->
 
+
 
+  <!-- Google tag (gtag.js) -->
 
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-G5H9MMGQFM"></script>
 
+  <script>
 
+    window.dataLayer = window.dataLayer || [];
 
+    function gtag() { dataLayer.push(arguments); }
 
+    gtag('js', new Date());
 
+
 
+    gtag('config', 'G-G5H9MMGQFM');
 
+  </script>
 
+
 
+  <!-- Global site tag (gtag.js) - Google Ads: 474336061 -->
 
+  <script async src="https://www.googletagmanager.com/gtag/js?id=AW-474336061"></script>
 
+  <script>
 
+    window.dataLayer = window.dataLayer || [];
 
+    function gtag() { dataLayer.push(arguments); }
 
+    gtag('js', new Date());
 
+
 
+    gtag('config', 'AW-474336061');
 
+  </script>
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
@@ -303,21 +334,24 @@
 
             <div class="accordion-body">
 
             <div class="accordion-body">
 
               <ul>
 
               <ul>
 
                 <li>
 
                 <li>
 
-                  1. 將品質分數作為您的首要任務:品質分數是 Google 衡量廣告與搜尋者查詢的相關程度的指標。它評估您的廣告文字對使用者搜尋查詢、出價、登陸頁面品質、歷史點擊率等的回應程度。您的品質分數越高，您的每次點擊費用就越低。
 
+                  1. 將品質分數作為您的首要任務:品質分數是 Google
 
+                  衡量廣告與搜尋者查詢的相關程度的指標。它評估您的廣告文字對使用者搜尋查詢、出價、登陸頁面品質、歷史點擊率等的回應程度。您的品質分數越高，您的每次點擊費用就越低。
 
                 </li>
 
                 </li>
 
                 <li>
 
                 <li>
 
                   2.使用否定關鍵字:若要將使用者池縮小到僅目標受眾，您需要新增否定關鍵字。這些否定關鍵字是與您所定位的關鍵字類似的短語，但它們與您想要吸引的用戶無關。排除否定關鍵字將從您的廣告活動中消除不相關的用戶，並提高廣告的點擊率。
 
                   2.使用否定關鍵字:若要將使用者池縮小到僅目標受眾，您需要新增否定關鍵字。這些否定關鍵字是與您所定位的關鍵字類似的短語，但它們與您想要吸引的用戶無關。排除否定關鍵字將從您的廣告活動中消除不相關的用戶，並提高廣告的點擊率。
 
                 </li>
 
                 </li>
 
-              <li>
 
-                3. 在你的標題中加入促銷訊息: 標題提及對時間敏感的促銷活動和促銷代碼將激發更多點擊，因為人們會想了解更多資訊。除了提高點擊率之外，它還會帶來轉換熱潮。研究表明，包含數字的頭條新聞的點擊率提高了 200%，轉換率提高了近 25%。
 
+                <li>
 
+                  3. 在你的標題中加入促銷訊息: 標題提及對時間敏感的促銷活動和促銷代碼將激發更多點擊，因為人們會想了解更多資訊。除了提高點擊率之外，它還會帶來轉換熱潮。研究表明，包含數字的頭條新聞的點擊率提高了
 
+                  200%，轉換率提高了近 25%。
 
                 </li>
 
                 </li>
 
                 <li>
 
                 <li>
 
-                  4. 寫出問題形式的標題: 不要過度專注於創建吸引人的標題，而應專注於提出直接解決搜尋意圖的問題。Social Influence 的研究表明，問題形式的標題比普通標題的點擊量高出 150%。此外，透過在標題中加入「您」一詞，您的點擊次數可能會增加 175%。
 
-                  </li>  
+                  4. 寫出問題形式的標題: 不要過度專注於創建吸引人的標題，而應專注於提出直接解決搜尋意圖的問題。Social Influence 的研究表明，問題形式的標題比普通標題的點擊量高出
 
+                  150%。此外，透過在標題中加入「您」一詞，您的點擊次數可能會增加 175%。
 
+                </li>
 
               </ul>
 
               </ul>
 
 
 
 
 
-              </div>
 
+            </div>
 
           </div>
 
           </div>
 
         </div>
 
         </div>

+ 840 - 0
layouts/ai-presenter/single copy 2.html
Vizualizați fișierul 

@@ -0,0 +1,840 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  {{ partial "head_single.html" . }}
 
+
 
+  <title>ChoozMo SaaS AI 主播｜快速製作 AI 人物影片｜集仕多</title>
 
+  <meta name="description" content="輸入文字，即可生成 AI 分鏡表與 AI 人物影片。支援多語、綠幕下載、字幕自動化與模板套用，快速、高效、低成本，適用教育訓練、宣傳行銷、活動開場與新媒體製作。">
 
+  <meta property="og:title" content="ChoozMo SaaS AI 主播｜快速製作 AI 人物影片">
 
+  <meta property="og:description" content="用 AI 分鏡把靈感變成分鏡表與成片：自動腳本、自由修改、雲端製作、綠幕下載、字幕自動化。">
 
+  <meta property="og:type" content="website">
 
+
 
+  <!-- Icons -->
 
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
 
+
 
+  <style>
 
+    :root {
 
+      --brand: #ea5413;
 
+      --brand-dark: #c43e00;
 
+      --brand-light: #fff3ed;
 
+      --gray-border: #e5e7eb;
 
+      --text-dark: #0b1120;
 
+      --text-secondary: #555;
 
+    }
 
+
 
+    body {
 
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
+      color: var(--text-dark);
 
+      background-color: #fff;
 
+    }
 
+
 
+    .text-primary {
 
+      color: var(--brand) !important;
 
+    }
 
+
 
+    .hero {
 
+      background:
 
+        radial-gradient(1200px 520px at 15% -10%, rgba(234, 84, 19, 0.18), transparent),
 
+        radial-gradient(800px 420px at 100% 0%, rgba(234, 84, 19, 0.1), transparent),
 
+        linear-gradient(180deg, #fffdfc, #fff7f3);
 
+      border-bottom: 1px solid var(--gray-border);
 
+    }
 
+
 
+    .badge-soft {
 
+      background: rgba(234, 84, 19, 0.1);
 
+      color: var(--brand);
 
+      border: 1px solid rgba(234, 84, 19, 0.2);
 
+      font-weight: 600;
 
+    }
 
+
 
+    .shadow-soft {
 
+      box-shadow: 0 8px 30px rgba(234, 84, 19, 0.15);
 
+    }
 
+
 
+    .feature-card {
 
+      border: 1px solid var(--gray-border);
 
+      border-radius: 16px;
 
+      padding: 20px;
 
+      background: #fff;
 
+      height: 100%;
 
+      transition: all .25s ease;
 
+    }
 
+
 
+    .feature-card:hover {
 
+      border-color: var(--brand);
 
+      box-shadow: 0 6px 20px rgba(234, 84, 19, 0.15);
 
+    }
 
+
 
+    .feature-card h5 {
 
+      background: var(--brand-light);
 
+      color: var(--brand-dark);
 
+      text-align: center;
 
+      padding: 0.75rem;
 
+      border-radius: 10px;
 
+      font-weight: 700;
 
+      font-size: 1.1rem;
 
+      margin-bottom: 1rem;
 
+    }
 
+
 
+    .feature-card h5 i {
 
+      color: var(--brand);
 
+    }
 
+
 
+    .feature-card {
 
+      overflow: hidden;
 
+      /* 防止內容超出邊框 */
 
+    }
 
+
 
+    .feature-card img.demo-img {
 
+      max-width: 100%;
 
+      height: auto;
 
+      object-fit: contain;
 
+      display: block;
 
+      border-radius: 12px;
 
+    }
 
+
 
+    @media (min-width: 992px) {
 
+      .feature-card img.demo-img {
 
+        max-width: 45%;
 
+        /* 桌機時左右各佔一半寬度 */
 
+      }
 
+    }
 
+
 
+    .line {
 
+      border-bottom: 2px solid var(--brand-light);
 
+      padding-bottom: 5rem;
 
+      margin-bottom: 5rem;
 
+    }
 
+
 
+    .link-btn {
 
+      display: inline-flex;
 
+      align-items: center;
 
+      gap: .5rem;
 
+      background: var(--brand);
 
+      color: #fff;
 
+      padding: .9rem 1.2rem;
 
+      border-radius: .8rem;
 
+      text-decoration: none;
 
+      transition: all .2s ease-in-out;
 
+      font-weight: 600;
 
+      box-shadow: 0 3px 8px rgba(234, 84, 19, 0.2);
 
+    }
 
+
 
+    .link-btn:hover {
 
+      background: var(--brand-dark);
 
+      color: #fff;
 
+      transform: translateY(-1px);
 
+      box-shadow: 0 6px 14px rgba(196, 62, 0, 0.25);
 
+    }
 
+
 
+    .outline-btn {
 
+      display: inline-flex;
 
+      align-items: center;
 
+      gap: .5rem;
 
+      border: 2px solid var(--brand);
 
+      color: var(--brand);
 
+      padding: .8rem 1.2rem;
 
+      border-radius: .8rem;
 
+      font-weight: 600;
 
+      background: transparent;
 
+      text-decoration: none;
 
+      transition: all .2s ease-in-out;
 
+    }
 
+
 
+    .outline-btn:hover {
 
+      background: var(--brand);
 
+      color: #fff;
 
+      transform: translateY(-1px);
 
+    }
 
+
 
+    .kicker {
 
+      letter-spacing: .12em;
 
+      text-transform: uppercase;
 
+      font-weight: 700;
 
+      color: var(--brand-dark);
 
+    }
 
+
 
+    .media-card img,
 
+    .media-card video {
 
+      border-radius: 14px;
 
+      width: 100%;
 
+      height: auto;
 
+    }
 
+
 
+    .accordion-button {
 
+      color: var(--brand-dark);
 
+      background-color: #fff;
 
+      font-weight: 600;
 
+    }
 
+
 
+    .accordion-button:not(.collapsed) {
 
+      color: var(--brand);
 
+      background-color: var(--brand-light);
 
+      box-shadow: inset 0 -1px 0 rgba(234, 84, 19, 0.1);
 
+    }
 
+
 
+    .accordion-button:focus {
 
+      box-shadow: 0 0 0 .2rem rgba(234, 84, 19, 0.25);
 
+    }
 
+
 
+    .accordion-button:not(.collapsed)::after {
 
+      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ea5413'%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");
 
+    }
 
+
 
+    a {
 
+      color: var(--brand);
 
+      text-decoration: none;
 
+    }
 
+
 
+    a:hover {
 
+      color: var(--brand-dark);
 
+    }
 
+
 
+    .ratio iframe {
 
+      border: 1px solid var(--gray-border);
 
+      border-radius: 12px;
 
+    }
 
+
 
+    /* 桌機比較表美化 */
 
+    table {
 
+      width: 100%;
 
+      border-collapse: separate;
 
+      border-spacing: 0;
 
+    }
 
+
 
+    th,
 
+    td {
 
+      border: 1px solid var(--gray-border);
 
+      padding: 1rem;
 
+      vertical-align: top;
 
+    }
 
+
 
+    thead th {
 
+      background: var(--brand-light);
 
+      color: var(--text-dark);
 
+      font-weight: 700;
 
+      text-align: center;
 
+      border-bottom: none;
 
+    }
 
+
 
+    tbody td p {
 
+      margin-bottom: .5rem;
 
+    }
 
+
 
+    tbody ul {
 
+      padding-left: 1.1rem;
 
+      margin-bottom: 0;
 
+    }
 
+
 
+    /* 案例區塊：左側彩條與間距節奏 */
 
+    .case-block {
 
+      position: relative;
 
+      padding-left: 0.25rem;
 
+    }
 
+
 
+    @media (min-width: 992px) {
 
+      .case-block {
 
+        padding-left: .75rem;
 
+      }
 
+
 
+      .case-block::before {
 
+        content: "";
 
+        position: absolute;
 
+        left: -2px;
 
+        top: 8px;
 
+        bottom: 8px;
 
+        width: 4px;
 
+        background: linear-gradient(180deg, var(--brand), var(--brand-dark));
 
+        border-radius: 4px;
 
+        opacity: .15;
 
+      }
 
+    }
 
+
 
+    .case-meta .badge {
 
+      background: var(--brand-light) !important;
 
+      color: var(--brand-dark) !important;
 
+      border: 1px solid rgba(234, 84, 19, .25) !important;
 
+      font-weight: 600;
 
+    }
 
+
 
+    .case-block .media-card {
 
+      border-radius: 14px;
 
+    }
 
+
 
+    .case-block .media-card img {
 
+      display: block;
 
+      width: 100%;
 
+      height: auto;
 
+      border-radius: 12px;
 
+    }
 
+
 
+    .case-block .outline-btn {
 
+      margin-top: .25rem;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  {{ partial "navbar.html" . }}
 
+
 
+  <header class="hero py-5 mt-5">
 
+    <div class="container pt-5 pb-4">
 
+      <div class="row align-items-center g-4">
 
+        <div class="col-lg-6">
 
+          <span class="badge badge-soft mb-3">AI 分鏡 × 一鍵影片生成 × 綠幕下載</span>
 
+          <h1 class="display-6 fw-bold mb-3">
 
+            輸入文字 → 生成 <span class="text-primary">AI 分鏡表</span><br class="d-none d-md-block"> 快速製作「AI 人物影片」
 
+          </h1>
 
+          <p class="lead text-secondary mb-4">
 
+            不用會剪輯也能做影片：自動腳本、自由修改、雲端製作、字幕自動化、綠幕原檔下載。
 
+            適用教育訓練、產品/公司宣傳、活動開場、新媒體與社群內容。
 
+          </p>
 
+          <div class="d-flex flex-wrap gap-3">
 
+            <a href="https://cloud.choozmo.com/main/make-video" class="link-btn" target="_blank" rel="noopener">
 
+              <i class="bi bi-lightning-charge"></i> 免費開始體驗
 
+            </a>
 
+            <a href="#cases" class="outline-btn">
 
+              <i class="bi bi-play-circle"></i> AI 影片案例
 
+            </a>
 
+          </div>
 
+          <div class="mt-3 small text-secondary">
 
+            <i class="bi bi-shield-check me-1"></i> 穩定 · 多語 · 綠幕下載 · 模板套用
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-lg-6">
 
+          <div class="media-card">
 
+            <img src="/imgs/ai-presenter/SaaS首圖.webp" alt="ChoozMo AI 人物影片｜SaaS 首圖" loading="lazy" class="img-fluid">
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </header>
 
+
 
+  <!-- 首圖 & 教學 -->
 
+  <section class="py-5">
 
+    <div class="container-fluid">
 
+      <div class="row">
 
+        <div class="col-lg-8 px-5">
 
+          <div class="line">
 
+            <div class="text-center mb-4">
 
+              <p class="kicker mb-2">How It Works</p>
 
+              <h2 class="fw-bold">如何從文字生成 AI 人物影片？</h2>
 
+            </div>
 
+
 
+            <div class="media-card">
 
+              <img src="/imgs/ai-presenter/四格SaaS教學gif.gif" alt="ChoozMo AI 人物影片｜四格 SaaS 教學" loading="lazy">
 
+            </div>
 
+          </div>
 
+
 
+          <div class="line">
 
+            <div class="text-center mb-4">
 
+              <p class="kicker mb-2">AI Storyboard</p>
 
+              <h2 class="fw-bold">什麼是 AI 分鏡？</h2>
 
+            </div>
 
+            <div class="d-flex flex-column align-items-center">
 
+              <p>AI 分鏡是 ChoozMo 的獨家功能，讓你<strong>不用學剪輯</strong>也能創作專業影片：</p>
 
+              <ol>
 
+                <li><strong>自動生成腳本：</strong>AI 依文字提示產生完整腳本與分鏡設計。</li>
 
+                <li><strong>輕鬆修改：</strong>不滿意可直接改，直到符合需求。</li>
 
+                <li><strong>無縫製作：</strong>把分鏡上傳至系統，即可生成專屬 AI 主播影片。</li>
 
+              </ol>
 
+              <p class="mb-5">讓製作流程更簡單、更高效，你專心發揮創意即可！</p>
 
+
 
+              <a href="https://cloud.choozmo.com/main/generate-zip" class="link-btn" target="_blank" rel="noopener">
 
+                <i class="bi bi-magic"></i> 立即體驗生成
 
+              </a>
 
+            </div>
 
+
 
+            <div class="media-card mt-5">
 
+              <img src="/imgs/ai-presenter/AI分鏡表.webp" alt="ChoozMo AI 人物影片｜AI 分鏡表" loading="lazy">
 
+            </div>
 
+          </div>
 
+
 
+          <div class="line">
 
+            <div class="text-center">
 
+              <p class="kicker mb-2">Why ChoozMo</p>
 
+              <h2 class="fw-bold mb-4">為什麼選擇 ChoozMo SaaS AI 影片生成器？</h2>
 
+            </div>
 
+
 
+            <div class="row g-4">
 
+              <!-- 卡片 1 -->
 
+              <div class="col-12 col-lg-4">
 
+                <div class="feature-card h-100">
 
+                  <h5 class="fw-bold mb-2">
 
+                    <i class="bi bi-broadcast-pin me-2 text-primary"></i>電視台的專業品質
 
+                  </h5>
 
+                  <p class="mb-2">與多家知名電視台長期合作、參與大型 AI 活動，成片畫質與效果達業界高標。</p>
 
+                  <p class="mb-0">大螢幕播放依然清晰震撼，品質有保證。</p>
 
+                </div>
 
+              </div>
 
+
 
+              <!-- 卡片 2 -->
 
+              <div class="col-12 col-lg-4">
 
+                <div class="feature-card h-100">
 
+                  <h5 class="fw-bold mb-2">
 
+                    <i class="bi bi-images me-2 text-primary"></i>無需素材也能輕鬆創作
 
+                  </h5>
 
+                  <p class="mb-2">AI 精準理解文字提示，生成高品質圖片並自動剪輯成片。</p>
 
+                  <ul class="mb-0">
 
+                    <li>輸入幾段文字就有精美畫面</li>
 
+                    <li><strong>無素材數量限制</strong>，人人都能輕鬆創作</li>
 
+                  </ul>
 
+                </div>
 
+              </div>
 
+
 
+              <!-- 卡片 3 -->
 
+              <div class="col-12 col-lg-4">
 
+                <div class="feature-card h-100">
 
+                  <h5 class="fw-bold mb-2">
 
+                    <i class="bi bi-speedometer2 me-2 text-primary"></i>快速、高效、低成本
 
+                  </h5>
 
+                  <p class="mb-2">雲端流程不需專人協助，<strong>一天內可產出多支高品質影片</strong>。</p>
 
+                  <ul class="mb-0">
 
+                    <li><strong>省時：</strong>縮短製作週期</li>
 
+                    <li><strong>省錢：</strong>大幅降低成本，適用各規模團隊</li>
 
+                  </ul>
 
+                </div>
 
+              </div>
 
+            </div>
 
+
 
+            <!-- 應用場合 & 綠幕下載 -->
 
+            <section class="pt-4">
 
+              <div class="row g-4 align-items-stretch">
 
+                <div class="col-12">
 
+                  <div class="feature-card h-100">
 
+                    <div class="info-head d-flex align-items-center justify-content-center text-center mb-3">
 
+                      <i class="bi bi-play-circle me-2"></i>
 
+                      <span class="fw-bold">AI 人物影片的應用場合</span>
 
+                    </div>
 
+                    <div class="d-flex flex-column align-items-center">
 
+                      <p class="text-secondary mb-2">AI 人物影片適用於多種情境：</p>
 
+                      <ul class="mb-0 ps-3">
 
+                        <li>教育訓練：快速生成教學影片，提升學習效果。</li>
 
+                        <li>開幕會場：吸睛開場介紹，增添活動亮點。</li>
 
+                        <li>產品／公司宣傳：生動呈現品牌與價值。</li>
 
+                        <li>個人品牌／創作者：YouTube／IG／TikTok 一鍵量產內容。</li>
 
+                        <li>企業內訓與對外簡報：標準化輸出、效率高。</li>
 
+                      </ul>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+
 
+                <div class="col-12">
 
+                  <div class="feature-card h-100 overflow-hidden">
 
+                    <div class="info-head d-flex align-items-center justify-content-center text-center mb-3">
 
+                      <i class="bi bi-filetype-mp4 me-2"></i>
 
+                      <span class="fw-bold">自由下載綠幕原檔</span>
 
+                    </div>
 
+
 
+                    <div class="d-flex flex-column align-items-center">
 
+                      <p class="text-secondary mb-2">
 
+                        完成的 AI 人物影片可直接用，亦可下載<strong>綠幕原檔</strong>，方便進一步合成與設計：
 
+                      </p>
 
+                      <ul class="mb-3 ps-3">
 
+                        <li>導入剪輯工具進一步編輯。</li>
 
+                        <li>替換背景、加上特效與轉場。</li>
 
+                      </ul>
 
+                    </div>
 
+
 
+                    <div
 
+                      class="my-4 d-flex flex-column flex-lg-row align-items-center justify-content-center gap-3 text-center">
 
+                      <img src="/imgs/ai-presenter/YT3.webp" alt="ChoozMo AI 人物影片｜綠幕示意1"
 
+                        class="img-fluid demo-img rounded shadow-sm">
 
+                      <span class="d-block d-lg-none fs-3">⬇️</span>
 
+                      <span class="d-none d-lg-block fs-3">➡️</span>
 
+                      <img src="/imgs/ai-presenter/綠幕主播.webp" alt="ChoozMo AI 人物影片｜綠幕示意2"
 
+                        class="img-fluid demo-img rounded shadow-sm">
 
+                    </div>
 
+
 
+                    <p class="mb-0 text-center">
 
+                      到
 
+                      <a href="https://cloud.choozmo.com/main/make-video" target="_blank" rel="noopener">製作影片頁</a>
 
+                      挑選「主播」與「模板」，即可快速產出符合品牌風格的影片。
 
+                    </p>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </section>
 
+          </div>
 
+
 
+          <!-- 應用實例 -->
 
+          <div id="cases">
 
+            <div class="text-center my-5">
 
+              <p class="kicker mb-2">Case Studies</p>
 
+              <h2 class="fw-bold">應用實例</h2>
 
+            </div>
 
+
 
+            <!-- Case 1 -->
 
+            <div class="row align-items-center g-4 case-block mb-5">
 
+              <div class="col-lg-6 order-2 order-lg-1">
 
+                <div class="case-meta mb-2">
 
+                  <span class="badge rounded-pill text-bg-light border"><i class="bi bi-translate me-1"></i>客語</span>
 
+                  <span class="badge rounded-pill text-bg-light border"><i class="bi bi-cloud-sun me-1"></i>氣象節目</span>
 
+                </div>
 
+                <h3 class="h4 fw-bold mb-3">客家電視台｜AI 主播講天時</h3>
 
+                <p class="mb-2">
 
+                  客家電視台每週推出
 
+                  <a href="https://www.youtube.com/watch?v=IdbJ5ueOME0&list=PL96kIIcXJpMtO2gEqCOkkXLWeUyzetgZN"
 
+                    target="_blank" rel="noopener">【AI 主播講天時】</a>
 
+                  ，由兩位客語 AI 主播輪流主持，以流利客語帶來精準天氣資訊。
 
+                </p>
 
+
 
+                <ul class="my-4">
 
+                  <li>流利客語 × 精準氣象敘事</li>
 
+                  <li>每週定期更新，讓您隨時掌握最新天氣動態</li>
 
+                </ul>
 
+
 
+                <a class="outline-btn"
 
+                  href="https://www.youtube.com/watch?v=IdbJ5ueOME0&list=PL96kIIcXJpMtO2gEqCOkkXLWeUyzetgZN"
 
+                  target="_blank" rel="noopener">
 
+                  <i class="bi bi-box-arrow-up-right"></i> 觀看影片
 
+                </a>
 
+              </div>
 
+              <div class="col-lg-6 order-1 order-lg-2">
 
+                <div class="media-card">
 
+                  <img src="/imgs/ai-presenter/客家2.webp" alt="AI 主播講天時 範例 1" loading="lazy">
 
+                </div>
 
+                <p class="small text-secondary mt-2">▲ AI 主播講天時：節目畫面示意</p>
 
+              </div>
 
+            </div>
 
+
 
+            <!-- Case 2 -->
 
+            <div class="row align-items-center g-4 case-block mb-5">
 
+              <div class="col-lg-6">
 
+                <div class="media-card">
 
+                  <img src="/imgs/dm/ai-virtual-star/aivs08.webp" alt="三立新聞 克隆娟 應用實例" loading="lazy">
 
+                </div>
 
+              </div>
 
+              <div class="col-lg-6">
 
+                <div class="case-meta mb-2">
 
+                  <span class="badge rounded-pill text-bg-light border"><i
 
+                      class="bi bi-broadcast-pin me-1"></i>新聞節目</span>
 
+                  <span class="badge rounded-pill text-bg-light border"><i
 
+                      class="bi bi-link-45deg me-1"></i>AI×真人連線</span>
 
+                </div>
 
+                <h3 class="h4 fw-bold mb-3">三立新聞｜克隆娟</h3>
 
+                <p class="mb-2">
 
+                  為知名主播 <strong>陳斐娟</strong> 打造專屬 AI 造型，並與本人遠端連線共同播報，帶來全新新聞體驗。
 
+                </p>
 
+
 
+                <ul class="my-4">
 
+                  <li>打造專屬 AI 人設，品牌識別度提升</li>
 
+                  <li>AI 與真人同台互動，打造全新節目形式</li>
 
+                </ul>
 
+
 
+                <a class="outline-btn" href="https://youtu.be/CUR_9L8RtDk?si=aCt3Z20u2Co4uAjZ" target="_blank"
 
+                  rel="noopener">
 
+                  <i class="bi bi-box-arrow-up-right"></i> 觀看影片
 
+                </a>
 
+              </div>
 
+            </div>
 
+
 
+            <!-- Case 3 -->
 
+            <div class="row align-items-center g-4 case-block mb-5">
 
+              <div class="col-lg-6 order-2 order-lg-1">
 
+                <div class="case-meta mb-2">
 
+                  <span class="badge rounded-pill text-bg-light border"><i class="bi bi-newspaper me-1"></i>新媒體</span>
 
+                  <span class="badge rounded-pill text-bg-light border"><i class="bi bi-mic me-1"></i>AI 採訪</span>
 
+                  <span class="badge rounded-pill text-bg-light border"><i
 
+                      class="bi bi-filetype-doc me-1"></i>即時新聞稿</span>
 
+                </div>
 
+                <h3 class="h4 fw-bold mb-3">算力傳媒｜AI 品牌助理</h3>
 
+                <p class="mb-2">
 
+                  <a href="https://news.aimedium.org/" target="_blank" rel="noopener">【算力傳媒】</a> 以 AI 助理完成線上採訪，
 
+                  自動彙整重點、產出 AI 主播訪談影片，並可即時生成新聞稿，加速內容上線。
 
+                </p>
 
+
 
+                <ul class="my-4">
 
+                  <li><strong>音檔重點萃取：</strong>AI 自動提取關鍵內容，快速整理重點。</li>
 
+                  <li><strong>AI 主播訪談影片：</strong>生成專業級訪談影片，強化品牌形象。</li>
 
+                  <li><strong>即時新聞稿生成：</strong>採訪後自動生成新聞稿，立即發布。</li>
 
+                </ul>
 
+
 
+                <a class="outline-btn" href="https://news.aimedium.org/" target="_blank" rel="noopener">
 
+                  <i class="bi bi-box-arrow-up-right"></i> 造訪網站
 
+                </a>
 
+              </div>
 
+              <div class="col-lg-6 order-1 order-lg-2">
 
+                <div class="media-card">
 
+                  <img src="/imgs/ai-presenter/YT1.webp" alt="算力傳媒 範例頁" loading="lazy">
 
+                </div>
 
+                <div class="d-flex gap-3 mt-3 flex-wrap justify-content-center justify-content-lg-start">
 
+                  <div class="media-card">
 
+                    <img src="/imgs/ai-presenter/算力首頁.webp" alt="算力傳媒 首頁" loading="lazy">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-lg-4 pe-lg-5">
 
+          <div id="form" class="mt-0">
 
+            {{ partial "form-main.html" . }}
 
+
 
+            {{ partial "founder-cta.html" . }}
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </section>
 
+
 
+  <!-- 影片案例 -->
 
+  <section class="py-5 bg-light">
 
+    <div class="container">
 
+      <div class="text-center mb-4">
 
+        <p class="kicker mb-2">Showcase</p>
 
+        <h2 class="fw-bold">其他 AI 影片案例</h2>
 
+      </div>
 
+
 
+      <div class="row g-4">
 
+        <div class="col-md-4">
 
+          <div class="media-card">
 
+            <video src="/img/aicustomer/LIHO-DEMO.mp4" autoplay muted playsinline loop></video>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-md-4">
 
+          <div class="ratio ratio-16x9">
 
+            <iframe src="https://www.youtube.com/embed/TzKQGBDmnXg?autoplay=1&mute=1" title="YouTube video player"
 
+              loading="lazy"
 
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 
+              allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-md-4">
 
+          <div class="ratio ratio-16x9">
 
+            <iframe src="https://www.youtube.com/embed/1iCJZFJva2c?autoplay=1&mute=1" title="YouTube video player"
 
+              loading="lazy"
 
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 
+              allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-md-4">
 
+          <div class="media-card">
 
+            <video src="/img/aicustomer/客家整年合輯.mp4" autoplay muted playsinline loop></video>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-md-4">
 
+          <div class="ratio ratio-16x9">
 
+            <iframe src="https://www.youtube.com/embed/95gce-Upi_A?autoplay=1&mute=1" title="YouTube video player"
 
+              loading="lazy"
 
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 
+              allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-md-4">
 
+          <div class="ratio ratio-16x9">
 
+            <iframe src="https://www.youtube.com/embed/o2puhV1Gfe4?autoplay=1&mute=1" title="YouTube video player"
 
+              loading="lazy"
 
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 
+              allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </section>
 
+
 
+  <div class="container py-5">
 
+    <!-- FAQ -->
 
+    <div class="line">
 
+      <div class="text-center">
 
+        <p class="kicker mb-2">FAQ</p>
 
+        <h2 class="fw-bold mb-4">常見問題</h2>
 
+      </div>
 
+
 
+      <div class="accordion" id="faq_accordion">
 
+        <div class="accordion-item">
 
+          <h2 class="accordion-header" id="faq_heading_1">
 
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+              data-bs-target="#faq_collapse_1" aria-expanded="true" aria-controls="faq_collapse_1">
 
+              如何修改 AI 分鏡表內容？
 
+            </button>
 
+          </h2>
 
+          <div id="faq_collapse_1" class="accordion-collapse collapse" aria-labelledby="faq_heading_1"
 
+            data-bs-parent="#faq_accordion">
 
+            <div class="accordion-body">
 
+              AI 分鏡表提供了直觀的編輯功能，您可以輕鬆進入編輯頁面，自行設定大標題、字幕和素材文字內容。此外，素材圖片也可以自由更換，讓您的創作更加靈活。
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="accordion-item">
 
+          <h2 class="accordion-header" id="faq_heading_2">
 
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+              data-bs-target="#faq_collapse_2" aria-expanded="false" aria-controls="faq_collapse_2">
 
+              是否可以上傳自己的圖片或影片素材？
 
+            </button>
 
+          </h2>
 
+          <div id="faq_collapse_2" class="accordion-collapse collapse" aria-labelledby="faq_heading_2"
 
+            data-bs-parent="#faq_accordion">
 
+            <div class="accordion-body">
 
+              當然可以！下載 AI 分鏡表後，所有內容皆可隨意編輯，您還能輕鬆上傳個人圖片或影片素材，讓影片更加個性化。
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="accordion-item">
 
+          <h2 class="accordion-header" id="faq_heading_3">
 
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+              data-bs-target="#faq_collapse_3" aria-expanded="false" aria-controls="faq_collapse_3">
 
+              系統是否會自動上字幕？
 
+            </button>
 
+          </h2>
 
+          <div id="faq_collapse_3" class="accordion-collapse collapse" aria-labelledby="faq_heading_3"
 
+            data-bs-parent="#faq_accordion">
 
+            <div class="accordion-body">
 
+              是的，AI 分鏡表具備全自動字幕生成功能，無需手動剪輯字幕，大幅提升製作效率！
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="accordion-item">
 
+          <h2 class="accordion-header" id="faq_heading_4">
 
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+              data-bs-target="#faq_collapse_4" aria-expanded="false" aria-controls="faq_collapse_4">
 
+              如何更換影片背景和主播？
 
+            </button>
 
+          </h2>
 
+          <div id="faq_collapse_4" class="accordion-collapse collapse" aria-labelledby="faq_heading_4"
 
+            data-bs-parent="#faq_accordion">
 
+            <div class="accordion-body">
 
+              完成分鏡表後，您只需將內容上傳至 SaaS 的
 
+              <a href="https://cloud.choozmo.com/main/make-video" target="_blank" rel="noopener">製作影片頁面</a>，
 
+              即可挑選喜愛的「主播」與「模板」，讓影片風格更加符合需求。
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="accordion-item">
 
+          <h2 class="accordion-header" id="faq_heading_5">
 
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+              data-bs-target="#faq_collapse_5" aria-expanded="false" aria-controls="faq_collapse_5">
 
+              製作影片需要多長時間？
 
+            </button>
 
+          </h2>
 
+          <div id="faq_collapse_5" class="accordion-collapse collapse" aria-labelledby="faq_heading_5"
 
+            data-bs-parent="#faq_accordion">
 
+            <div class="accordion-body">
 
+              影片製作的時間取決於影片長度。舉例來說，一支 30 秒的影片，製作時間約為 10 分鐘，快速又高效！
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="accordion-item">
 
+          <h2 class="accordion-header" id="faq_heading_6">
 
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+              data-bs-target="#faq_collapse_6" aria-expanded="false" aria-controls="faq_collapse_6">
 
+              如何查看完成的影片？
 
+            </button>
 
+          </h2>
 
+          <div id="faq_collapse_6" class="accordion-collapse collapse" aria-labelledby="faq_heading_6"
 
+            data-bs-parent="#faq_accordion">
 
+            <div class="accordion-body">
 
+              透過
 
+              <a href="https://cloud.choozmo.com/main/progress" target="_blank" rel="noopener">影片清單</a>，
 
+              您可以即時查看所有正在製作中的影片以及已完成的影片，並可直接下載成品。
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="accordion-item">
 
+          <h2 class="accordion-header" id="faq_heading_7">
 
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+              data-bs-target="#faq_collapse_7" aria-expanded="false" aria-controls="faq_collapse_7">
 
+              如何付款？是否提供免費試用？
 
+            </button>
 
+          </h2>
 
+          <div id="faq_collapse_7" class="accordion-collapse collapse" aria-labelledby="faq_heading_7"
 
+            data-bs-parent="#faq_accordion">
 
+            <div class="accordion-body">
 
+              AI 分鏡表提供免費試用版，您只需連結 Google 帳號，即可立即體驗！若需正式版功能，可直接在
 
+              <a href="https://cloud.choozmo.com/main/dashboard" target="_blank" rel="noopener">首頁</a>
 
+              線上儲值製作秒數，輕鬆升級使用完整功能。
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+    </div>
 
+
 
+    <!-- 使用者義務 / 免責 -->
 
+    <div>
 
+      <div class="text-center my-5">
 
+        <p class="kicker mb-2">Terms & Policy</p>
 
+        <h2 class="fw-bold">使用者義務與免責聲明</h2>
 
+      </div>
 
+
 
+      <div class="accordion my-5 pb-4" id="disclaimer">
 
+        <div class="accordion-item">
 
+          <h2 class="accordion-header" id="disclaimerHeading_1">
 
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+              data-bs-target="#disclaimerCollapse_1" aria-expanded="false" aria-controls="disclaimerCollapse_1">
 
+              使用者的守法義務
 
+            </button>
 
+          </h2>
 
+        </div>
 
+        <div id="disclaimerCollapse_1" class="accordion-collapse collapse" aria-labelledby="disclaimerHeading_1"
 
+          data-bs-parent="#disclaimer">
 
+          <div class="accordion-body">
 
+            <section class="terms-content">
 
+              <p>
 
+                您承諾絕不為任何非法目的或以任何非法方式使用本服務，並承諾遵守中華民國相關法規及一切使用網際網路之國際慣例。您若係中華民國以外之使用者，並同意遵守所屬國家或地域之法令。您同意並保證不得利用本服務從事侵害他人權益或違法之行為，包括但不限於：
 
+              </p>
 
+              <ul>
 
+                <li>上載、張貼、公布或傳送任何誹謗、侮辱、具威脅性、攻擊性、不雅、猥褻、不實、違反公共秩序或善良風俗或其他不法之文字、圖片或任何形式的檔案於本服務上</li>
 
+                <li>侵害他人名譽、隱私權、營業秘密、商標權、著作權、專利權、其他智慧財產權及其他權利</li>
 
+                <li>違反依法律或契約所應負之保密義務</li>
 
+                <li>冒用他人名義使用本服務</li>
 
+              </ul>
 
+            </section>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="accordion-item">
 
+          <h2 class="accordion-header" id="disclaimerheading_2">
 
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+              data-bs-target="#disclaimerCollapse_2" aria-expanded="false" aria-controls="disclaimerCollapse_2">
 
+              免責聲明
 
+            </button>
 
+          </h2>
 
+        </div>
 
+        <div id="disclaimerCollapse_2" class="accordion-collapse collapse" aria-labelledby="disclaimerheading_2"
 
+          data-bs-parent="#disclaimer">
 
+          <div class="accordion-body">
 
+            <section class="terms-content">
 
+              <p>
 
+                您明確了解並同意：ChoozMo
 
+                對本服務不提供任何明示或默示的擔保，包含但不限於權利完整、商業適售性、特定目的之適用性及未侵害他人權利。本服務乃依其「現狀」及「提供使用時」之基礎提供，您使用本服務時，須自行承擔相關風險。ChoozMo
 
+                不保證以下事項：
 
+              </p>
 
+              <ul>
 
+                <li>本服務將符合您的需求</li>
 
+                <li>本服務不受干擾、及時提供、安全可靠或無錯誤</li>
 
+                <li>由本服務之使用而取得之結果為正確或可靠</li>
 
+              </ul>
 
+              <p>是否經由本服務之使用下載或取得任何資料應由您自行考量且自負風險，並拋棄因前開任何資料之下載而導致您電腦系統、網路存取、下載或播放設備之任何損壞或資料流失，對 ChoozMo
 
+                提出任何請求或採取法律行動，您應自負完全責任。</p>
 
+            </section>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+  {{ partial "footer.html" . }}
 
+
 
+  <script>
 
+    const yEl = document.getElementById('y');
 
+    if (yEl) yEl.textContent = new Date().getFullYear();
 
+  </script>
 
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 
+</body>
 
+
 
+</html>

+ 405 - 719
layouts/ai-presenter/single.html
Vizualizați fișierul 

@@ -1,838 +1,524 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
-<html lang="en">
 
+<html lang="zh-Hant">
 
 
 
 <head>
 
 <head>
 
   {{ partial "head_single.html" . }}
 
   {{ partial "head_single.html" . }}
 
-
 
-  <title>ChoozMo SaaS AI 主播｜快速製作 AI 人物影片｜集仕多</title>
 
-  <meta name="description" content="輸入文字，即可生成 AI 分鏡表與 AI 人物影片。支援多語、綠幕下載、字幕自動化與模板套用，快速、高效、低成本，適用教育訓練、宣傳行銷、活動開場與新媒體製作。">
 
-  <meta property="og:title" content="ChoozMo SaaS AI 主播｜快速製作 AI 人物影片">
 
-  <meta property="og:description" content="用 AI 分鏡把靈感變成分鏡表與成片：自動腳本、自由修改、雲端製作、綠幕下載、字幕自動化。">
 
-  <meta property="og:type" content="website">
 
-
 
-  <!-- Icons -->
 
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
 
-
 
-  <style>
 
-    :root {
 
-      --brand: #ea5413;
 
-      --brand-dark: #c43e00;
 
-      --brand-light: #fff3ed;
 
-      --gray-border: #e5e7eb;
 
-      --text-dark: #0b1120;
 
-      --text-secondary: #555;
 
-    }
 
-
 
-    body {
 
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
-      color: var(--text-dark);
 
-      background-color: #fff;
 
-    }
 
-
 
-    .text-primary {
 
-      color: var(--brand) !important;
 
-    }
 
-
 
-    .hero {
 
-      background:
 
-        radial-gradient(1200px 520px at 15% -10%, rgba(234, 84, 19, 0.18), transparent),
 
-        radial-gradient(800px 420px at 100% 0%, rgba(234, 84, 19, 0.1), transparent),
 
-        linear-gradient(180deg, #fffdfc, #fff7f3);
 
-      border-bottom: 1px solid var(--gray-border);
 
-    }
 
-
 
-    .badge-soft {
 
-      background: rgba(234, 84, 19, 0.1);
 
-      color: var(--brand);
 
-      border: 1px solid rgba(234, 84, 19, 0.2);
 
-      font-weight: 600;
 
-    }
 
-
 
-    .shadow-soft {
 
-      box-shadow: 0 8px 30px rgba(234, 84, 19, 0.15);
 
-    }
 
-
 
-    .feature-card {
 
-      border: 1px solid var(--gray-border);
 
-      border-radius: 16px;
 
-      padding: 20px;
 
-      background: #fff;
 
-      height: 100%;
 
-      transition: all .25s ease;
 
-    }
 
-
 
-    .feature-card:hover {
 
-      border-color: var(--brand);
 
-      box-shadow: 0 6px 20px rgba(234, 84, 19, 0.15);
 
-    }
 
-
 
-    .feature-card h5 {
 
-      background: var(--brand-light);
 
-      color: var(--brand-dark);
 
-      text-align: center;
 
-      padding: 0.75rem;
 
-      border-radius: 10px;
 
-      font-weight: 700;
 
-      font-size: 1.1rem;
 
-      margin-bottom: 1rem;
 
-    }
 
-
 
-    .feature-card h5 i {
 
-      color: var(--brand);
 
-    }
 
-
 
-    .feature-card {
 
-      overflow: hidden;
 
-      /* 防止內容超出邊框 */
 
-    }
 
-
 
-    .feature-card img.demo-img {
 
-      max-width: 100%;
 
-      height: auto;
 
-      object-fit: contain;
 
-      display: block;
 
-      border-radius: 12px;
 
-    }
 
-
 
-    @media (min-width: 992px) {
 
-      .feature-card img.demo-img {
 
-        max-width: 45%;
 
-        /* 桌機時左右各佔一半寬度 */
 
-      }
 
-    }
 
-
 
-    .line {
 
-      border-bottom: 2px solid var(--brand-light);
 
-      padding-bottom: 5rem;
 
-      margin-bottom: 5rem;
 
-    }
 
-
 
-    .link-btn {
 
-      display: inline-flex;
 
-      align-items: center;
 
-      gap: .5rem;
 
-      background: var(--brand);
 
-      color: #fff;
 
-      padding: .9rem 1.2rem;
 
-      border-radius: .8rem;
 
-      text-decoration: none;
 
-      transition: all .2s ease-in-out;
 
-      font-weight: 600;
 
-      box-shadow: 0 3px 8px rgba(234, 84, 19, 0.2);
 
-    }
 
-
 
-    .link-btn:hover {
 
-      background: var(--brand-dark);
 
-      color: #fff;
 
-      transform: translateY(-1px);
 
-      box-shadow: 0 6px 14px rgba(196, 62, 0, 0.25);
 
-    }
 
-
 
-    .outline-btn {
 
-      display: inline-flex;
 
-      align-items: center;
 
-      gap: .5rem;
 
-      border: 2px solid var(--brand);
 
-      color: var(--brand);
 
-      padding: .8rem 1.2rem;
 
-      border-radius: .8rem;
 
-      font-weight: 600;
 
-      background: transparent;
 
-      text-decoration: none;
 
-      transition: all .2s ease-in-out;
 
-    }
 
-
 
-    .outline-btn:hover {
 
-      background: var(--brand);
 
-      color: #fff;
 
-      transform: translateY(-1px);
 
-    }
 
-
 
-    .kicker {
 
-      letter-spacing: .12em;
 
-      text-transform: uppercase;
 
-      font-weight: 700;
 
-      color: var(--brand-dark);
 
-    }
 
-
 
-    .media-card img,
 
-    .media-card video {
 
-      border-radius: 14px;
 
-      width: 100%;
 
-      height: auto;
 
-    }
 
-
 
-    .accordion-button {
 
-      color: var(--brand-dark);
 
-      background-color: #fff;
 
-      font-weight: 600;
 
-    }
 
-
 
-    .accordion-button:not(.collapsed) {
 
-      color: var(--brand);
 
-      background-color: var(--brand-light);
 
-      box-shadow: inset 0 -1px 0 rgba(234, 84, 19, 0.1);
 
-    }
 
-
 
-    .accordion-button:focus {
 
-      box-shadow: 0 0 0 .2rem rgba(234, 84, 19, 0.25);
 
-    }
 
-
 
-    .accordion-button:not(.collapsed)::after {
 
-      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ea5413'%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");
 
-    }
 
-
 
-    a {
 
-      color: var(--brand);
 
-      text-decoration: none;
 
-    }
 
-
 
-    a:hover {
 
-      color: var(--brand-dark);
 
-    }
 
-
 
-    .ratio iframe {
 
-      border: 1px solid var(--gray-border);
 
-      border-radius: 12px;
 
-    }
 
-
 
-    /* 桌機比較表美化 */
 
-    table {
 
-      width: 100%;
 
-      border-collapse: separate;
 
-      border-spacing: 0;
 
-    }
 
-
 
-    th,
 
-    td {
 
-      border: 1px solid var(--gray-border);
 
-      padding: 1rem;
 
-      vertical-align: top;
 
-    }
 
-
 
-    thead th {
 
-      background: var(--brand-light);
 
-      color: var(--text-dark);
 
-      font-weight: 700;
 
-      text-align: center;
 
-      border-bottom: none;
 
-    }
 
-
 
-    tbody td p {
 
-      margin-bottom: .5rem;
 
-    }
 
-
 
-    tbody ul {
 
-      padding-left: 1.1rem;
 
-      margin-bottom: 0;
 
-    }
 
-
 
-    /* 案例區塊：左側彩條與間距節奏 */
 
-    .case-block {
 
-      position: relative;
 
-      padding-left: 0.25rem;
 
-    }
 
-
 
-    @media (min-width: 992px) {
 
-      .case-block {
 
-        padding-left: .75rem;
 
-      }
 
-
 
-      .case-block::before {
 
-        content: "";
 
-        position: absolute;
 
-        left: -2px;
 
-        top: 8px;
 
-        bottom: 8px;
 
-        width: 4px;
 
-        background: linear-gradient(180deg, var(--brand), var(--brand-dark));
 
-        border-radius: 4px;
 
-        opacity: .15;
 
-      }
 
-    }
 
-
 
-    .case-meta .badge {
 
-      background: var(--brand-light) !important;
 
-      color: var(--brand-dark) !important;
 
-      border: 1px solid rgba(234, 84, 19, .25) !important;
 
-      font-weight: 600;
 
-    }
 
-
 
-    .case-block .media-card {
 
-      border-radius: 14px;
 
-    }
 
-
 
-    .case-block .media-card img {
 
-      display: block;
 
-      width: 100%;
 
-      height: auto;
 
-      border-radius: 12px;
 
-    }
 
-
 
-    .case-block .outline-btn {
 
-      margin-top: .25rem;
 
-    }
 
-  </style>
 
+  <link rel="stylesheet" href="/css/service.css">
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
   {{ partial "navbar.html" . }}
 
   {{ partial "navbar.html" . }}
 
 
 
+  <!-- Hero -->
 
   <header class="hero py-5 mt-5">
 
   <header class="hero py-5 mt-5">
 
-    <div class="container pt-5 pb-4">
 
+    <div class="container pt-5">
 
       <div class="row align-items-center g-4">
 
       <div class="row align-items-center g-4">
 
         <div class="col-lg-6">
 
         <div class="col-lg-6">
 
-          <span class="badge badge-soft mb-3">AI 分鏡 × 一鍵影片生成 × 綠幕下載</span>
 
           <h1 class="display-6 fw-bold mb-3">
 
           <h1 class="display-6 fw-bold mb-3">
 
-            輸入文字 → 生成 <span class="text-primary">AI 分鏡表</span><br class="d-none d-md-block"> 快速製作「AI 人物影片」
 
+            為品牌打造的專業建模<br class="d-none d-md-block">
 
+            <strong class="text-primary">AI 擬真人</strong>
 
           </h1>
 
           </h1>
 
           <p class="lead text-secondary mb-4">
 
           <p class="lead text-secondary mb-4">
 
-            不用會剪輯也能做影片：自動腳本、自由修改、雲端製作、字幕自動化、綠幕原檔下載。
 
-            適用教育訓練、產品/公司宣傳、活動開場、新媒體與社群內容。
 
+            自然真實的互動體驗，靈活應用於多場景：新聞播報、企業宣傳、產品介紹、個性化教學等。支援多語切換、形象與語氣客製，24/7 不受時間與地點限制；一次製作，可於不同平台重複使用，高效且低成本。
 
           </p>
 
           </p>
 
           <div class="d-flex flex-wrap gap-3">
 
           <div class="d-flex flex-wrap gap-3">
 
-            <a href="https://cloud.choozmo.com/main/make-video" class="link-btn" target="_blank" rel="noopener">
 
-              <i class="bi bi-lightning-charge"></i> 免費開始體驗
 
+            <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" class="link-btn" target="_blank"
 
+              rel="noopener">
 
+              <i class="bi bi-chat-dots"></i> 立即與專人諮詢
 
             </a>
 
             </a>
 
-            <a href="#cases" class="outline-btn">
 
-              <i class="bi bi-play-circle"></i> AI 影片案例
 
+            <a href="#cases" class="outline-btn d-inline-flex align-items-center">
 
+              <i class="bi bi-play-circle"></i> 查看實際案例
 
             </a>
 
             </a>
 
           </div>
 
           </div>
 
-          <div class="mt-3 small text-secondary">
 
-            <i class="bi bi-shield-check me-1"></i> 穩定 · 多語 · 綠幕下載 · 模板套用
 
+          <div class="mt-4 text-secondary small">
 
+            <i class="bi bi-shield-check me-1"></i> 自然 · 多語 · 可擴充 · 品牌一致性
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-
 
         <div class="col-lg-6">
 
         <div class="col-lg-6">
 
           <div class="media-card">
 
           <div class="media-card">
 
-            <img src="/imgs/ai-presenter/SaaS首圖.webp" alt="ChoozMo AI 人物影片｜SaaS 首圖" loading="lazy" class="img-fluid">
 
+            <img src="/imgs/ai-presenter/cover_1.webp" alt="AI 擬真人" class="img-fluid">
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
   </header>
 
   </header>
 
 
 
-  <!-- 首圖 & 教學 -->
 
-  <section class="py-5">
 
-    <div class="container-fluid">
 
-      <div class="row">
 
-        <div class="col-lg-8 px-5">
 
-          <div class="line">
 
-            <div class="text-center mb-4">
 
-              <p class="kicker mb-2">How It Works</p>
 
-              <h2 class="fw-bold">如何從文字生成 AI 人物影片？</h2>
 
-            </div>
 
+  <!-- Value Props -->
 
+  <section class="py-5 mt-5">
 
+    <div class="container">
 
+      <div class="text-center">
 
+        <p class="kicker mb-2">Advantages</p>
 
+        <h2 class="fw-bold mb-4">自然互動 · 多場景運用 · 高效低成本</h2>
 
+      </div>
 
 
 
-            <div class="media-card">
 
-              <img src="/imgs/ai-presenter/四格SaaS教學gif.gif" alt="ChoozMo AI 人物影片｜四格 SaaS 教學" loading="lazy">
 
+      <div class="row g-4 align-items-stretch">
 
+        <div class="col-lg-6">
 
+          <div class="feature-card h-100">
 
+            <div class="d-flex align-items-center mb-2">
 
+              <i class="bi bi-people fs-3 text-primary me-2"></i>
 
+              <strong>自然真實的互動體驗</strong>
 
             </div>
 
             </div>
 
+            <p class="text-secondary mb-2">
 
+              表情、口型與語氣自然，降低觀看違和感；適合導覽、解說、教學等需要陪伴感的場景。
 
+            </p>
 
+            <ul class="text-secondary m-0 ps-3">
 
+              <li>擬真人口型與視線優化</li>
 
+              <li>語速、語氣、停頓可調</li>
 
+            </ul>
 
           </div>
 
           </div>
 
+        </div>
 
 
 
-          <div class="line">
 
-            <div class="text-center mb-4">
 
-              <p class="kicker mb-2">AI Storyboard</p>
 
-              <h2 class="fw-bold">什麼是 AI 分鏡？</h2>
 
-            </div>
 
-            <div class="d-flex flex-column align-items-center">
 
-              <p>AI 分鏡是 ChoozMo 的獨家功能，讓你<strong>不用學剪輯</strong>也能創作專業影片：</p>
 
-              <ol>
 
-                <li><strong>自動生成腳本：</strong>AI 依文字提示產生完整腳本與分鏡設計。</li>
 
-                <li><strong>輕鬆修改：</strong>不滿意可直接改，直到符合需求。</li>
 
-                <li><strong>無縫製作：</strong>把分鏡上傳至系統，即可生成專屬 AI 主播影片。</li>
 
-              </ol>
 
-              <p class="mb-5">讓製作流程更簡單、更高效，你專心發揮創意即可！</p>
 
-
 
-              <a href="https://cloud.choozmo.com/main/generate-zip" class="link-btn" target="_blank" rel="noopener">
 
-                <i class="bi bi-magic"></i> 立即體驗生成
 
-              </a>
 
+        <div class="col-lg-6">
 
+          <div class="feature-card h-100">
 
+            <div class="d-flex align-items-center mb-2">
 
+              <i class="bi bi-boxes fs-3 text-primary me-2"></i>
 
+              <strong>靈活應用於多場景</strong>
 
             </div>
 
             </div>
 
+            <p class="text-secondary mb-2">
 
+              新聞播報、企業宣傳、產品介紹、教育訓練、導覽講解、客服說明皆適用。
 
+            </p>
 
+            <ul class="text-secondary m-0 ps-3">
 
+              <li>多場景用途快速製作影片</li>
 
+              <li>虛擬代身（專屬虛擬形象建模）</li>
 
+            </ul>
 
+          </div>
 
+        </div>
 
 
 
-            <div class="media-card mt-5">
 
-              <img src="/imgs/ai-presenter/AI分鏡表.webp" alt="ChoozMo AI 人物影片｜AI 分鏡表" loading="lazy">
 
+        <div class="col-lg-6">
 
+          <div class="feature-card h-100">
 
+            <div class="d-flex align-items-center mb-2">
 
+              <i class="bi bi-translate fs-3 text-primary me-2"></i>
 
+              <strong>多語言版本產製</strong>
 
             </div>
 
             </div>
 
+            <p class="text-secondary mb-2">
 
+              支援多語切換（中 / 英 / 日 / 韓…），字幕模板與品牌字型套用，觸及國際市場。
 
+            </p>
 
+            <ul class="text-secondary m-0 ps-3">
 
+              <li>多口音選擇與語調設定</li>
 
+              <li>跨平台版型一鍵套用</li>
 
+            </ul>
 
           </div>
 
           </div>
 
+        </div>
 
 
 
-          <div class="line">
 
-            <div class="text-center">
 
-              <p class="kicker mb-2">Why ChoozMo</p>
 
-              <h2 class="fw-bold mb-4">為什麼選擇 ChoozMo SaaS AI 影片生成器？</h2>
 
+        <div class="col-lg-6">
 
+          <div class="feature-card h-100">
 
+            <div class="d-flex align-items-center mb-2">
 
+              <i class="bi bi-currency-dollar fs-3 text-primary me-2"></i>
 
+              <strong>高效與低成本</strong>
 
             </div>
 
             </div>
 
+            <p class="text-secondary mb-2">
 
+              不受時間、地點限制；一次製作可在不同平台重複使用，整體製作與維運成本更友善。
 
+            </p>
 
+            <ul class="text-secondary m-0 ps-3">
 
+              <li>腳本更新快速重產，多版本敏捷迭代</li>
 
+              <li>素材與角色可長期複用</li>
 
+            </ul>
 
+          </div>
 
+        </div>
 
+      </div>
 
 
 
-            <div class="row g-4">
 
-              <!-- 卡片 1 -->
 
-              <div class="col-12 col-lg-4">
 
-                <div class="feature-card h-100">
 
-                  <h5 class="fw-bold mb-2">
 
-                    <i class="bi bi-broadcast-pin me-2 text-primary"></i>電視台的專業品質
 
-                  </h5>
 
-                  <p class="mb-2">與多家知名電視台長期合作、參與大型 AI 活動，成片畫質與效果達業界高標。</p>
 
-                  <p class="mb-0">大螢幕播放依然清晰震撼，品質有保證。</p>
 
-                </div>
 
-              </div>
 
-
 
-              <!-- 卡片 2 -->
 
-              <div class="col-12 col-lg-4">
 
-                <div class="feature-card h-100">
 
-                  <h5 class="fw-bold mb-2">
 
-                    <i class="bi bi-images me-2 text-primary"></i>無需素材也能輕鬆創作
 
-                  </h5>
 
-                  <p class="mb-2">AI 精準理解文字提示，生成高品質圖片並自動剪輯成片。</p>
 
-                  <ul class="mb-0">
 
-                    <li>輸入幾段文字就有精美畫面</li>
 
-                    <li><strong>無素材數量限制</strong>，人人都能輕鬆創作</li>
 
-                  </ul>
 
-                </div>
 
-              </div>
 
-
 
-              <!-- 卡片 3 -->
 
-              <div class="col-12 col-lg-4">
 
-                <div class="feature-card h-100">
 
-                  <h5 class="fw-bold mb-2">
 
-                    <i class="bi bi-speedometer2 me-2 text-primary"></i>快速、高效、低成本
 
-                  </h5>
 
-                  <p class="mb-2">雲端流程不需專人協助，<strong>一天內可產出多支高品質影片</strong>。</p>
 
-                  <ul class="mb-0">
 
-                    <li><strong>省時：</strong>縮短製作週期</li>
 
-                    <li><strong>省錢：</strong>大幅降低成本，適用各規模團隊</li>
 
-                  </ul>
 
-                </div>
 
-              </div>
 
-            </div>
 
+      <div class="row g-4 mt-4">
 
+        <div class="col-md-6 col-lg-3">
 
+          <div class="stat-card text-center p-4 rounded-4 bg-light h-100">
 
+            <div class="fs-2 fw-bold">24/7</div>
 
+            <div class="text-secondary small">不受時間地點限制</div>
 
+          </div>
 
+        </div>
 
+        <div class="col-md-6 col-lg-3">
 
+          <div class="stat-card text-center p-4 rounded-4 bg-light h-100">
 
+            <div class="fs-2 fw-bold">多語</div>
 
+            <div class="text-secondary small">中 / 英 / 日 / 韓…自由切換</div>
 
+          </div>
 
+        </div>
 
+        <div class="col-md-6 col-lg-3">
 
+          <div class="stat-card text-center p-4 rounded-4 bg-light h-100">
 
+            <div class="fs-2 fw-bold">客製</div>
 
+            <div class="text-secondary small">形象 · 語氣 · 風格可調</div>
 
+          </div>
 
+        </div>
 
+        <div class="col-md-6 col-lg-3">
 
+          <div class="stat-card text-center p-4 rounded-4 bg-light h-100">
 
+            <div class="fs-2 fw-bold">跨平台</div>
 
+            <div class="text-secondary small">一次製作，靈活應用於各平台</div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </section>
 
 
 
-            <!-- 應用場合 & 綠幕下載 -->
 
-            <section class="pt-4">
 
-              <div class="row g-4 align-items-stretch">
 
-                <div class="col-12">
 
-                  <div class="feature-card h-100">
 
-                    <div class="info-head d-flex align-items-center justify-content-center text-center mb-3">
 
-                      <i class="bi bi-play-circle me-2"></i>
 
-                      <span class="fw-bold">AI 人物影片的應用場合</span>
 
-                    </div>
 
-                    <div class="d-flex flex-column align-items-center">
 
-                      <p class="text-secondary mb-2">AI 人物影片適用於多種情境：</p>
 
-                      <ul class="mb-0 ps-3">
 
-                        <li>教育訓練：快速生成教學影片，提升學習效果。</li>
 
-                        <li>開幕會場：吸睛開場介紹，增添活動亮點。</li>
 
-                        <li>產品／公司宣傳：生動呈現品牌與價值。</li>
 
-                        <li>個人品牌／創作者：YouTube／IG／TikTok 一鍵量產內容。</li>
 
-                        <li>企業內訓與對外簡報：標準化輸出、效率高。</li>
 
-                      </ul>
 
-                    </div>
 
-                  </div>
 
-                </div>
 
-
 
-                <div class="col-12">
 
-                  <div class="feature-card h-100 overflow-hidden">
 
-                    <div class="info-head d-flex align-items-center justify-content-center text-center mb-3">
 
-                      <i class="bi bi-filetype-mp4 me-2"></i>
 
-                      <span class="fw-bold">自由下載綠幕原檔</span>
 
-                    </div>
 
-
 
-                    <div class="d-flex flex-column align-items-center">
 
-                      <p class="text-secondary mb-2">
 
-                        完成的 AI 人物影片可直接用，亦可下載<strong>綠幕原檔</strong>，方便進一步合成與設計：
 
-                      </p>
 
-                      <ul class="mb-3 ps-3">
 
-                        <li>導入剪輯工具進一步編輯。</li>
 
-                        <li>替換背景、加上特效與轉場。</li>
 
-                      </ul>
 
-                    </div>
 
-
 
-                    <div
 
-                      class="my-4 d-flex flex-column flex-lg-row align-items-center justify-content-center gap-3 text-center">
 
-                      <img src="/imgs/ai-presenter/YT3.webp" alt="ChoozMo AI 人物影片｜綠幕示意1"
 
-                        class="img-fluid demo-img rounded shadow-sm">
 
-                      <span class="d-block d-lg-none fs-3">⬇️</span>
 
-                      <span class="d-none d-lg-block fs-3">➡️</span>
 
-                      <img src="/imgs/ai-presenter/綠幕主播.webp" alt="ChoozMo AI 人物影片｜綠幕示意2"
 
-                        class="img-fluid demo-img rounded shadow-sm">
 
-                    </div>
 
-
 
-                    <p class="mb-0 text-center">
 
-                      到
 
-                      <a href="https://cloud.choozmo.com/main/make-video" target="_blank" rel="noopener">製作影片頁</a>
 
-                      挑選「主播」與「模板」，即可快速產出符合品牌風格的影片。
 
-                    </p>
 
-                  </div>
 
-                </div>
 
-              </div>
 
-            </section>
 
-          </div>
 
-
 
-          <!-- 應用實例 -->
 
-          <div id="cases">
 
-            <div class="text-center my-5">
 
-              <p class="kicker mb-2">Case Studies</p>
 
-              <h2 class="fw-bold">應用實例</h2>
 
-            </div>
 
+  <!-- 適用情境 -->
 
+  <section class="py-5 mb-5 bg-light">
 
+    <div class="container text-center">
 
+      <p class="kicker mb-2">Use Cases</p>
 
+      <h2 class="fw-bold mb-4">AI 擬真人適用情境</h2>
 
 
 
-            <!-- Case 1 -->
 
-            <div class="row align-items-center g-4 case-block mb-5">
 
-              <div class="col-lg-6 order-2 order-lg-1">
 
-                <div class="case-meta mb-2">
 
-                  <span class="badge rounded-pill text-bg-light border"><i class="bi bi-translate me-1"></i>客語</span>
 
-                  <span class="badge rounded-pill text-bg-light border"><i class="bi bi-cloud-sun me-1"></i>氣象節目</span>
 
-                </div>
 
-                <h3 class="h4 fw-bold mb-3">客家電視台｜AI 主播講天時</h3>
 
-                <p class="mb-2">
 
-                  客家電視台每週推出
 
-                  <a href="https://www.youtube.com/watch?v=IdbJ5ueOME0&list=PL96kIIcXJpMtO2gEqCOkkXLWeUyzetgZN"
 
-                    target="_blank" rel="noopener">【AI 主播講天時】</a>
 
-                  ，由兩位客語 AI 主播輪流主持，以流利客語帶來精準天氣資訊。
 
-                </p>
 
-
 
-                <ul class="my-4">
 
-                  <li>流利客語 × 精準氣象敘事</li>
 
-                  <li>每週定期更新，讓您隨時掌握最新天氣動態</li>
 
-                </ul>
 
-
 
-                <a class="outline-btn"
 
-                  href="https://www.youtube.com/watch?v=IdbJ5ueOME0&list=PL96kIIcXJpMtO2gEqCOkkXLWeUyzetgZN"
 
-                  target="_blank" rel="noopener">
 
-                  <i class="bi bi-box-arrow-up-right"></i> 觀看影片
 
-                </a>
 
-              </div>
 
-              <div class="col-lg-6 order-1 order-lg-2">
 
-                <div class="media-card">
 
-                  <img src="/imgs/ai-presenter/客家2.webp" alt="AI 主播講天時 範例 1" loading="lazy">
 
-                </div>
 
-                <p class="small text-secondary mt-2">▲ AI 主播講天時：節目畫面示意</p>
 
-              </div>
 
-            </div>
 
+      <div class="row g-4">
 
+        <div class="col-6 col-md-3">
 
+          <i class="bi bi-newspaper fs-1 text-brand"></i>
 
+          <p class="fw-semibold mt-2 mb-0">新聞播報</p>
 
+        </div>
 
+        <div class="col-6 col-md-3">
 
+          <i class="bi bi-broadcast-pin fs-1 text-brand"></i>
 
+          <p class="fw-semibold mt-2 mb-0">企業宣傳 / 產品介紹</p>
 
+        </div>
 
+        <div class="col-6 col-md-3">
 
+          <i class="bi bi-mortarboard fs-1 text-brand"></i>
 
+          <p class="fw-semibold mt-2 mb-0">個性化教學 / 內部訓練</p>
 
+        </div>
 
+        <div class="col-6 col-md-3">
 
+          <i class="bi bi-person-badge fs-1 text-brand"></i>
 
+          <p class="fw-semibold mt-2 mb-0">虛擬替身建模</p>
 
+        </div>
 
+        <div class="col-6 col-md-3">
 
+          <i class="bi bi-camera-reels fs-1 text-brand"></i>
 
+          <p class="fw-semibold mt-2 mb-0">多場景影片快速製作</p>
 
+        </div>
 
+        <div class="col-6 col-md-3">
 
+          <i class="bi bi-translate fs-1 text-brand"></i>
 
+          <p class="fw-semibold mt-2 mb-0">多語版本內容產製</p>
 
+        </div>
 
+        <div class="col-6 col-md-3">
 
+          <i class="bi bi-headset fs-1 text-brand"></i>
 
+          <p class="fw-semibold mt-2 mb-0">智慧客服導覽</p>
 
+        </div>
 
+        <div class="col-6 col-md-3">
 
+          <i class="bi bi-bar-chart-line fs-1 text-brand"></i>
 
+          <p class="fw-semibold mt-2 mb-0">行銷活動 / 展演導覽</p>
 
+        </div>
 
+      </div>
 
 
 
-            <!-- Case 2 -->
 
-            <div class="row align-items-center g-4 case-block mb-5">
 
-              <div class="col-lg-6">
 
-                <div class="media-card">
 
-                  <img src="/imgs/dm/ai-virtual-star/aivs08.webp" alt="三立新聞 克隆娟 應用實例" loading="lazy">
 
-                </div>
 
-              </div>
 
-              <div class="col-lg-6">
 
-                <div class="case-meta mb-2">
 
-                  <span class="badge rounded-pill text-bg-light border"><i
 
-                      class="bi bi-broadcast-pin me-1"></i>新聞節目</span>
 
-                  <span class="badge rounded-pill text-bg-light border"><i
 
-                      class="bi bi-link-45deg me-1"></i>AI×真人連線</span>
 
-                </div>
 
-                <h3 class="h4 fw-bold mb-3">三立新聞｜克隆娟</h3>
 
-                <p class="mb-2">
 
-                  為知名主播 <strong>陳斐娟</strong> 打造專屬 AI 造型，並與本人遠端連線共同播報，帶來全新新聞體驗。
 
-                </p>
 
-
 
-                <ul class="my-4">
 
-                  <li>打造專屬 AI 人設，品牌識別度提升</li>
 
-                  <li>AI 與真人同台互動，打造全新節目形式</li>
 
-                </ul>
 
-
 
-                <a class="outline-btn" href="https://youtu.be/CUR_9L8RtDk?si=aCt3Z20u2Co4uAjZ" target="_blank"
 
-                  rel="noopener">
 
-                  <i class="bi bi-box-arrow-up-right"></i> 觀看影片
 
-                </a>
 
-              </div>
 
+      <p class="text-secondary mt-5 mb-0">
 
+        產品概述：集仕多 AI 虛擬人已於媒體與企業場域廣泛導入，並逐步擴展至 LLM 與 AI 客服應用。
 
+      </p>
 
+    </div>
 
+  </section>
 
+
 
+  <!-- Q 版人物建模 -->
 
+  <section class="py-5">
 
+    <div class="container">
 
+      <div class="text-center">
 
+        <p class="kicker mb-2">Chibi Avatar</p>
 
+        <h2 class="fw-bold mb-3">Q 版人物建模｜免拍攝、吸睛、可高度客製</h2>
 
+        <p class="text-secondary mb-5">客製 Q 版虛擬主播，免拍攝快速產出影音！可愛造型吸睛、AI 精準對嘴與自然動態，成為你的專屬代言人。</p>
 
+      </div>
 
+
 
+      <div class="row g-4 align-items-start">
 
+        <div class="col-lg-6">
 
+          <div class="feature-card h-100">
 
+            <div class="d-flex align-items-center mb-2">
 
+              <i class="bi bi-stars fs-3 text-primary me-2"></i>
 
+              <strong>客製 Q 版虛擬主播</strong>
 
             </div>
 
             </div>
 
+            <ul class="text-secondary m-0 ps-3">
 
+              <li class="mb-2"><strong>Q 版造型吸睛：</strong>可愛親和、記憶點強，適合年輕或娛樂導向內容。</li>
 
+              <li class="mb-2"><strong>對嘴精準：</strong>AI 語音同步，發音與嘴型對齊，說話自然不違和。</li>
 
+              <li class="mb-2"><strong>自然動態：</strong>頭部與表情輕鬆擺動，不僵硬、不機械，更有「生命力」。</li>
 
+              <li class="mb-0"><strong>高度客製：</strong>外型、聲線、語調、穿搭與版型皆可依品牌打造。</li>
 
+            </ul>
 
+          </div>
 
 
 
-            <!-- Case 3 -->
 
-            <div class="row align-items-center g-4 case-block mb-5">
 
-              <div class="col-lg-6 order-2 order-lg-1">
 
-                <div class="case-meta mb-2">
 
-                  <span class="badge rounded-pill text-bg-light border"><i class="bi bi-newspaper me-1"></i>新媒體</span>
 
-                  <span class="badge rounded-pill text-bg-light border"><i class="bi bi-mic me-1"></i>AI 採訪</span>
 
-                  <span class="badge rounded-pill text-bg-light border"><i
 
-                      class="bi bi-filetype-doc me-1"></i>即時新聞稿</span>
 
-                </div>
 
-                <h3 class="h4 fw-bold mb-3">算力傳媒｜AI 品牌助理</h3>
 
-                <p class="mb-2">
 
-                  <a href="https://news.aimedium.org/" target="_blank" rel="noopener">【算力傳媒】</a> 以 AI 助理完成線上採訪，
 
-                  自動彙整重點、產出 AI 主播訪談影片，並可即時生成新聞稿，加速內容上線。
 
-                </p>
 
-
 
-                <ul class="my-4">
 
-                  <li><strong>音檔重點萃取：</strong>AI 自動提取關鍵內容，快速整理重點。</li>
 
-                  <li><strong>AI 主播訪談影片：</strong>生成專業級訪談影片，強化品牌形象。</li>
 
-                  <li><strong>即時新聞稿生成：</strong>採訪後自動生成新聞稿，立即發布。</li>
 
-                </ul>
 
-
 
-                <a class="outline-btn" href="https://news.aimedium.org/" target="_blank" rel="noopener">
 
-                  <i class="bi bi-box-arrow-up-right"></i> 造訪網站
 
-                </a>
 
-              </div>
 
-              <div class="col-lg-6 order-1 order-lg-2">
 
-                <div class="media-card">
 
-                  <img src="/imgs/ai-presenter/YT1.webp" alt="算力傳媒 範例頁" loading="lazy">
 
-                </div>
 
-                <div class="d-flex gap-3 mt-3 flex-wrap justify-content-center justify-content-lg-start">
 
-                  <div class="media-card">
 
-                    <img src="/imgs/ai-presenter/算力首頁.webp" alt="算力傳媒 首頁" loading="lazy">
 
-                  </div>
 
-                </div>
 
-              </div>
 
+          <div class="feature-card p-0 overflow-hidden mt-4">
 
+            <div class="table-responsive compare-table">
 
+              <table class="table table-bordered table-striped align-middle mb-0">
 
+                <thead>
 
+                  <tr>
 
+                    <th scope="col" class="w-25">項目</th>
 
+                    <th scope="col">👑 Q 版虛擬主播</th>
 
+                    <th scope="col">真人主播</th>
 
+                  </tr>
 
+                </thead>
 
+                <tbody>
 
+                  <tr>
 
+                    <td>製作成本</td>
 
+                    <td>💰 低，免拍攝</td>
 
+                    <td>💸 高，需要場地與人力</td>
 
+                  </tr>
 
+                  <tr>
 
+                    <td>製作時間</td>
 
+                    <td>⚡ 快速生成，隨時可用</td>
 
+                    <td>⏳ 拍攝＋後製流程繁瑣</td>
 
+                  </tr>
 
+                  <tr>
 
+                    <td>品牌形象</td>
 
+                    <td>🎨 可愛吸睛，品牌專屬設計</td>
 
+                    <td>👔 受個人狀態與風格限制</td>
 
+                  </tr>
 
+                  <tr>
 
+                    <td>穩定度</td>
 
+                    <td>🎯 AI 對嘴精準＋自然動態</td>
 
+                    <td>🎬 表現受臨場狀態影響</td>
 
+                  </tr>
 
+                </tbody>
 
+              </table>
 
             </div>
 
             </div>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
 
 
-        <div class="col-lg-4 pe-lg-5">
 
-          <div id="form" class="mt-0">
 
-            {{ partial "form-main.html" . }}
 
-
 
-            {{ partial "founder-cta.html" . }}
 
+        <div class="col-lg-6">
 
+          <div class="media-card">
 
+            <img src="/imgs/ai-presenter/chibi_1.webp" alt="Q 版虛擬主播實例" class="img-fluid">
 
           </div>
 
           </div>
 
+          <p class="mt-2 small text-secondary text-center">▲ Q 版新聞主播</p>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
+
 
     </div>
 
     </div>
 
   </section>
 
   </section>
 
 
 
-  <!-- 影片案例 -->
 
-  <section class="py-5 bg-light">
 
+  <!-- 比較區塊 -->
 
+  <section class="py-5 compare-block">
 
     <div class="container">
 
     <div class="container">
 
       <div class="text-center mb-4">
 
       <div class="text-center mb-4">
 
-        <p class="kicker mb-2">Showcase</p>
 
-        <h2 class="fw-bold">其他 AI 影片案例</h2>
 
+        <p class="kicker mb-2">Compare</p>
 
+        <h2 class="fw-bold mb-0">AI 擬真人 vs 傳統拍攝</h2>
 
       </div>
 
       </div>
 
 
 
-      <div class="row g-4">
 
-        <div class="col-md-4">
 
+      <div class="row g-4 align-items-start">
 
+        <div class="col-lg-6">
 
           <div class="media-card">
 
           <div class="media-card">
 
-            <video src="/img/aicustomer/LIHO-DEMO.mp4" autoplay muted playsinline loop></video>
 
+            <img src="/imgs/ai-presenter/demo.webp" alt="AI 擬真人應用實例">
 
           </div>
 
           </div>
 
+          <p class="mt-2 small text-secondary text-center">▲ AI 擬真人應用於電視台：客家新聞｜AI 主播講天時、華視｜杭州亞運直播、三立｜克隆娟
 
+          </p>
 
         </div>
 
         </div>
 
 
 
-        <div class="col-md-4">
 
-          <div class="ratio ratio-16x9">
 
-            <iframe src="https://www.youtube.com/embed/TzKQGBDmnXg?autoplay=1&mute=1" title="YouTube video player"
 
-              loading="lazy"
 
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 
-              allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>
 
+        <div class="col-lg-6">
 
+          <div class="feature-card p-0 overflow-hidden">
 
+            <div class="table-responsive compare-table">
 
+              <table class="table table-bordered table-striped align-middle mb-0">
 
+                <thead>
 
+                  <tr>
 
+                    <th scope="col" class="w-25">項目</th>
 
+                    <th scope="col">👑 AI 擬真人</th>
 
+                    <th scope="col">傳統真人拍攝</th>
 
+                  </tr>
 
+                </thead>
 
+                <tbody>
 
+                  <tr>
 
+                    <td>地點限制</td>
 
+                    <td>24/7 隨時可用，不受地點限制</td>
 
+                    <td>需排程、人員與場地</td>
 
+                  </tr>
 
+                  <tr>
 
+                    <td>製作效率</td>
 
+                    <td>快速重產多版本，更新即上線</td>
 
+                    <td>拍攝＋後製流程較冗長</td>
 
+                  </tr>
 
+                  <tr>
 
+                    <td>多語支援</td>
 
+                    <td>多語切換、字幕同步</td>
 
+                    <td>需外語人才或後配</td>
 
+                  </tr>
 
+                  <tr>
 
+                    <td>品牌一致性</td>
 
+                    <td>形象 / 語氣 / 風格可控</td>
 
+                    <td>受現場與個人狀態影響</td>
 
+                  </tr>
 
+                  <tr>
 
+                    <td>重複使用</td>
 
+                    <td>一次建模，內容可跨平台靈活運用</td>
 
+                    <td>重拍或大量後製調整</td>
 
+                  </tr>
 
+                </tbody>
 
+              </table>
 
+            </div>
 
           </div>
 
           </div>
 
+
 
+          <p class="text-secondary text-center mt-3 mb-0">
 
+            以擬真人承載品牌形象與專業知識，讓內容長期、穩定且可擴充。
 
+          </p>
 
         </div>
 
         </div>
 
 
 
-        <div class="col-md-4">
 
-          <div class="ratio ratio-16x9">
 
-            <iframe src="https://www.youtube.com/embed/1iCJZFJva2c?autoplay=1&mute=1" title="YouTube video player"
 
-              loading="lazy"
 
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 
-              allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>
 
+      </div>
 
+    </div>
 
+  </section>
 
+
 
+  <!-- 工作流程 -->
 
+  <section class="py-5 mb-5">
 
+    <div class="container">
 
+      <div class="text-center">
 
+        <p class="kicker mb-2">How It Works</p>
 
+        <h2 class="fw-bold mb-4">導入流程，四步完成</h2>
 
+      </div>
 
+
 
+      <div class="row g-4">
 
+        <div class="col-md-6 col-lg-3">
 
+          <div class="feature-card h-100">
 
+            <h5>Step 1<br>需求訪談</h5>
 
+            <p class="text-secondary mb-0">場景、受眾與語氣風格確認；規劃多語與版本需求</p>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
 
 
-        <div class="col-md-4">
 
-          <div class="media-card">
 
-            <video src="/img/aicustomer/客家整年合輯.mp4" autoplay muted playsinline loop></video>
 
+        <div class="col-md-6 col-lg-3">
 
+          <div class="feature-card h-100">
 
+            <h5>Step 2<br>角色與形象設定</h5>
 
+            <p class="text-secondary mb-0">擬真人外觀、聲線、語調與字幕模板建立</p>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
 
 
-        <div class="col-md-4">
 
-          <div class="ratio ratio-16x9">
 
-            <iframe src="https://www.youtube.com/embed/95gce-Upi_A?autoplay=1&mute=1" title="YouTube video player"
 
-              loading="lazy"
 
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 
-              allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>
 
+        <div class="col-md-6 col-lg-3">
 
+          <div class="feature-card h-100">
 
+            <h5>Step 3<br>內容製作與校對</h5>
 
+            <p class="text-secondary mb-0">腳本與視覺生成，對嘴與節奏微調，批次產出多語言 / 多版本影片</p>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
 
 
-        <div class="col-md-4">
 
-          <div class="ratio ratio-16x9">
 
-            <iframe src="https://www.youtube.com/embed/o2puhV1Gfe4?autoplay=1&mute=1" title="YouTube video player"
 
-              loading="lazy"
 
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 
-              allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>
 
+        <div class="col-md-6 col-lg-3">
 
+          <div class="feature-card h-100">
 
+            <h5>Step 4<br>上線與擴充</h5>
 
+            <p class="text-secondary mb-0">多平台發布與版本管理；素材可長期複用並持續擴充</p>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
   </section>
 
   </section>
 
 
 
-  <div class="container py-5">
 
-    <!-- FAQ -->
 
-    <div class="line">
 
-      <div class="text-center">
 
-        <p class="kicker mb-2">FAQ</p>
 
-        <h2 class="fw-bold mb-4">常見問題</h2>
 
-      </div>
 
+  <!-- Cases -->
 
+  <section id="cases" class="py-5 bg-light">
 
+    <div class="container text-center">
 
+      <p class="kicker mb-2">Case Studies</p>
 
+      <h2 class="fw-bold mb-4">AI 擬真人實例</h2>
 
 
 
-      <div class="accordion" id="faq_accordion">
 
-        <div class="accordion-item">
 
-          <h2 class="accordion-header" id="faq_heading_1">
 
-            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
-              data-bs-target="#faq_collapse_1" aria-expanded="true" aria-controls="faq_collapse_1">
 
-              如何修改 AI 分鏡表內容？
 
-            </button>
 
-          </h2>
 
-          <div id="faq_collapse_1" class="accordion-collapse collapse" aria-labelledby="faq_heading_1"
 
-            data-bs-parent="#faq_accordion">
 
-            <div class="accordion-body">
 
-              AI 分鏡表提供了直觀的編輯功能，您可以輕鬆進入編輯頁面，自行設定大標題、字幕和素材文字內容。此外，素材圖片也可以自由更換，讓您的創作更加靈活。
 
-            </div>
 
+      <div class="row g-4">
 
+        <div class="col-lg-4">
 
+          <div class="media-card">
 
+            <img src="/imgs/ai-presenter/img121.webp" alt="交通部觀光署－署長數位分身" class="img-fluid">
 
           </div>
 
           </div>
 
+          <p class="mt-2 small text-secondary">▲ 交通部觀光署－署長數位分身</p>
 
         </div>
 
         </div>
 
 
 
-        <div class="accordion-item">
 
-          <h2 class="accordion-header" id="faq_heading_2">
 
-            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
-              data-bs-target="#faq_collapse_2" aria-expanded="false" aria-controls="faq_collapse_2">
 
-              是否可以上傳自己的圖片或影片素材？
 
-            </button>
 
-          </h2>
 
-          <div id="faq_collapse_2" class="accordion-collapse collapse" aria-labelledby="faq_heading_2"
 
-            data-bs-parent="#faq_accordion">
 
-            <div class="accordion-body">
 
-              當然可以！下載 AI 分鏡表後，所有內容皆可隨意編輯，您還能輕鬆上傳個人圖片或影片素材，讓影片更加個性化。
 
-            </div>
 
+         <div class="col-lg-4">
 
+          <div class="media-card">
 
+            <img src="/imgs/ai-presenter/img122.webp" alt="經濟部中小及新創企業署－吳佳穎 副署長" class="img-fluid">
 
           </div>
 
           </div>
 
+          <p class="mt-2 small text-secondary">▲ 經濟部中小及新創企業署－吳佳穎 副署長</p>
 
         </div>
 
         </div>
 
 
 
-        <div class="accordion-item">
 
-          <h2 class="accordion-header" id="faq_heading_3">
 
-            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
-              data-bs-target="#faq_collapse_3" aria-expanded="false" aria-controls="faq_collapse_3">
 
-              系統是否會自動上字幕？
 
-            </button>
 
-          </h2>
 
-          <div id="faq_collapse_3" class="accordion-collapse collapse" aria-labelledby="faq_heading_3"
 
-            data-bs-parent="#faq_accordion">
 
-            <div class="accordion-body">
 
-              是的，AI 分鏡表具備全自動字幕生成功能，無需手動剪輯字幕，大幅提升製作效率！
 
-            </div>
 
+         <div class="col-lg-4">
 
+          <div class="media-card">
 
+            <img src="/imgs/ai-presenter/img125.webp" alt="中華開發文教基金會" class="img-fluid">
 
           </div>
 
           </div>
 
+          <p class="mt-2 small text-secondary">▲ 中華開發文教基金會</p>
 
         </div>
 
         </div>
 
 
 
-        <div class="accordion-item">
 
-          <h2 class="accordion-header" id="faq_heading_4">
 
-            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
-              data-bs-target="#faq_collapse_4" aria-expanded="false" aria-controls="faq_collapse_4">
 
-              如何更換影片背景和主播？
 
-            </button>
 
-          </h2>
 
-          <div id="faq_collapse_4" class="accordion-collapse collapse" aria-labelledby="faq_heading_4"
 
-            data-bs-parent="#faq_accordion">
 
-            <div class="accordion-body">
 
-              完成分鏡表後，您只需將內容上傳至 SaaS 的
 
-              <a href="https://cloud.choozmo.com/main/make-video" target="_blank" rel="noopener">製作影片頁面</a>，
 
-              即可挑選喜愛的「主播」與「模板」，讓影片風格更加符合需求。
 
-            </div>
 
+          <div class="col-lg-4">
 
+          <div class="media-card">
 
+            <img src="/imgs/ai-presenter/chibi_2.webp" alt="Q 版虛擬主播實例" class="img-fluid">
 
           </div>
 
           </div>
 
+          <p class="mt-2 small text-secondary">▲ Q 版新聞主播</p>
 
         </div>
 
         </div>
 
 
 
-        <div class="accordion-item">
 
-          <h2 class="accordion-header" id="faq_heading_5">
 
-            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
-              data-bs-target="#faq_collapse_5" aria-expanded="false" aria-controls="faq_collapse_5">
 
-              製作影片需要多長時間？
 
-            </button>
 
-          </h2>
 
-          <div id="faq_collapse_5" class="accordion-collapse collapse" aria-labelledby="faq_heading_5"
 
-            data-bs-parent="#faq_accordion">
 
-            <div class="accordion-body">
 
-              影片製作的時間取決於影片長度。舉例來說，一支 30 秒的影片，製作時間約為 10 分鐘，快速又高效！
 
+        <div class="col-lg-4">
 
+          <div class="media-card">
 
+            <div class="ratio ratio-16x9">
 
+              <iframe
 
+                src="https://www.youtube.com/embed/CUR_9L8RtDk?autoplay=1&mute=1&loop=1&playlist=CUR_9L8RtDk&playsinline=1&controls=0&modestbranding=1&rel=0"
 
+                title="AI 擬真人案例" frameborder="0"
 
+                allow="autoplay; encrypted-media; gyroscope; picture-in-picture; web-share"
 
+                referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
 
+              </iframe>
 
             </div>
 
             </div>
 
           </div>
 
           </div>
 
+          <p class="mt-2 small text-secondary">▲ 三立新聞網－「AI克隆娟」</p>
 
         </div>
 
         </div>
 
 
 
-        <div class="accordion-item">
 
-          <h2 class="accordion-header" id="faq_heading_6">
 
-            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
-              data-bs-target="#faq_collapse_6" aria-expanded="false" aria-controls="faq_collapse_6">
 
-              如何查看完成的影片？
 
-            </button>
 
-          </h2>
 
-          <div id="faq_collapse_6" class="accordion-collapse collapse" aria-labelledby="faq_heading_6"
 
-            data-bs-parent="#faq_accordion">
 
-            <div class="accordion-body">
 
-              透過
 
-              <a href="https://cloud.choozmo.com/main/progress" target="_blank" rel="noopener">影片清單</a>，
 
-              您可以即時查看所有正在製作中的影片以及已完成的影片，並可直接下載成品。
 
-            </div>
 
+         <div class="col-lg-4">
 
+          <div class="media-card">
 
+            <img src="/imgs/ai-presenter/change_outfit.webp" alt="AI 換裝" class="img-fluid">
 
           </div>
 
           </div>
 
+          <p class="mt-2 small text-secondary">▲ AI 換裝：可依品牌形象、場景或節日快速更換服裝與風格</p>
 
         </div>
 
         </div>
 
+      </div>
 
 
 
-        <div class="accordion-item">
 
-          <h2 class="accordion-header" id="faq_heading_7">
 
-            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
-              data-bs-target="#faq_collapse_7" aria-expanded="false" aria-controls="faq_collapse_7">
 
-              如何付款？是否提供免費試用？
 
-            </button>
 
-          </h2>
 
-          <div id="faq_collapse_7" class="accordion-collapse collapse" aria-labelledby="faq_heading_7"
 
-            data-bs-parent="#faq_accordion">
 
-            <div class="accordion-body">
 
-              AI 分鏡表提供免費試用版，您只需連結 Google 帳號，即可立即體驗！若需正式版功能，可直接在
 
-              <a href="https://cloud.choozmo.com/main/dashboard" target="_blank" rel="noopener">首頁</a>
 
-              線上儲值製作秒數，輕鬆升級使用完整功能。
 
-            </div>
 
-          </div>
 
-        </div>
 
+      <p class="my-5 text-center" style="line-height: 2;">
 
+        🚀 選擇 ChoozMo AI 擬真人方案<br>
 
+        以專屬品牌形象與多語內容，打造可擴充、可重複運用的 AI 影片
 
+      </p>
 
+
 
+      <div class="text-center">
 
+        <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" class="link-btn" target="_blank"
 
+          rel="noopener">
 
+          <i class="bi bi-rocket-takeoff"></i> 立即諮詢與評估方案
 
+        </a>
 
       </div>
 
       </div>
 
+    </div>
 
+  </section>
 
 
 
+  <!-- CTA band -->
 
+  <section class="py-5 mt-5">
 
+    <div class="container">
 
+      <div class="cta-band p-4 p-md-5 d-flex flex-column flex-lg-row align-items-center justify-content-between gap-3">
 
+        <div>
 
+          <h3 class="mb-2 fw-bold">想打造專屬 AI 擬真人，快速製作多語言、多場景影片嗎？</h3>
 
+          <p class="mb-0">支援角色形象與語氣客製、字幕模板與多版本產製，一次設定、長期複用。</p>
 
+        </div>
 
+        <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" class="cta-btn">
 
+          取得免費顧問建議
 
+        </a>
 
+      </div>
 
     </div>
 
     </div>
 
+  </section>
 
 
 
-    <!-- 使用者義務 / 免責 -->
 
-    <div>
 
-      <div class="text-center my-5">
 
-        <p class="kicker mb-2">Terms & Policy</p>
 
-        <h2 class="fw-bold">使用者義務與免責聲明</h2>
 
+  <!-- FAQ -->
 
+  <section class="py-5 mb-5">
 
+    <div class="container">
 
+      <div class="text-center">
 
+        <p class="kicker mb-2">FAQ</p>
 
+        <h2 class="fw-bold mb-4">常見問題</h2>
 
       </div>
 
       </div>
 
 
 
-      <div class="accordion my-5 pb-4" id="disclaimer">
 
-        <div class="accordion-item">
 
-          <h2 class="accordion-header" id="disclaimerHeading_1">
 
-            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
-              data-bs-target="#disclaimerCollapse_1" aria-expanded="false" aria-controls="disclaimerCollapse_1">
 
-              使用者的守法義務
 
-            </button>
 
-          </h2>
 
-        </div>
 
-        <div id="disclaimerCollapse_1" class="accordion-collapse collapse" aria-labelledby="disclaimerHeading_1"
 
-          data-bs-parent="#disclaimer">
 
-          <div class="accordion-body">
 
-            <section class="terms-content">
 
-              <p>
 
-                您承諾絕不為任何非法目的或以任何非法方式使用本服務，並承諾遵守中華民國相關法規及一切使用網際網路之國際慣例。您若係中華民國以外之使用者，並同意遵守所屬國家或地域之法令。您同意並保證不得利用本服務從事侵害他人權益或違法之行為，包括但不限於：
 
-              </p>
 
-              <ul>
 
-                <li>上載、張貼、公布或傳送任何誹謗、侮辱、具威脅性、攻擊性、不雅、猥褻、不實、違反公共秩序或善良風俗或其他不法之文字、圖片或任何形式的檔案於本服務上</li>
 
-                <li>侵害他人名譽、隱私權、營業秘密、商標權、著作權、專利權、其他智慧財產權及其他權利</li>
 
-                <li>違反依法律或契約所應負之保密義務</li>
 
-                <li>冒用他人名義使用本服務</li>
 
-              </ul>
 
-            </section>
 
-          </div>
 
-        </div>
 
-
 
-        <div class="accordion-item">
 
-          <h2 class="accordion-header" id="disclaimerheading_2">
 
-            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
-              data-bs-target="#disclaimerCollapse_2" aria-expanded="false" aria-controls="disclaimerCollapse_2">
 
-              免責聲明
 
-            </button>
 
-          </h2>
 
-        </div>
 
-        <div id="disclaimerCollapse_2" class="accordion-collapse collapse" aria-labelledby="disclaimerheading_2"
 
-          data-bs-parent="#disclaimer">
 
-          <div class="accordion-body">
 
-            <section class="terms-content">
 
-              <p>
 
-                您明確了解並同意：ChoozMo
 
-                對本服務不提供任何明示或默示的擔保，包含但不限於權利完整、商業適售性、特定目的之適用性及未侵害他人權利。本服務乃依其「現狀」及「提供使用時」之基礎提供，您使用本服務時，須自行承擔相關風險。ChoozMo
 
-                不保證以下事項：
 
-              </p>
 
-              <ul>
 
-                <li>本服務將符合您的需求</li>
 
-                <li>本服務不受干擾、及時提供、安全可靠或無錯誤</li>
 
-                <li>由本服務之使用而取得之結果為正確或可靠</li>
 
-              </ul>
 
-              <p>是否經由本服務之使用下載或取得任何資料應由您自行考量且自負風險，並拋棄因前開任何資料之下載而導致您電腦系統、網路存取、下載或播放設備之任何損壞或資料流失，對 ChoozMo
 
-                提出任何請求或採取法律行動，您應自負完全責任。</p>
 
-            </section>
 
+      <div class="row g-4">
 
+        <div class="col-md-6">
 
+          <div class="feature-card">
 
+            <h6 class="mb-2"><i class="bi bi-question-circle me-1"></i> 沒有素材也能製作嗎？</h6>
 
+            <p class="mb-0 text-secondary">
 
+              可以！輸入文字即可由 AI 生成視覺與語音，並自動剪輯成片；亦可使用自建人物素材與品牌版型。
 
+            </p>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-md-6">
 
+          <div class="feature-card">
 
+            <h6 class="mb-2"><i class="bi bi-translate me-1"></i> 是否支援多語言？</h6>
 
+            <p class="mb-0 text-secondary">支援全球主要語言（中 / 英 / 日 / 韓…），語氣與口音可調，字幕可套品牌字型。</p>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-md-6">
 
+          <div class="feature-card">
 
+            <h6 class="mb-2"><i class="bi bi-person-badge me-1"></i> 可否訂製專屬形象？</h6>
 
+            <p class="mb-0 text-secondary">可進行虛擬代身建模，並調整造型、聲線、語氣與風格，維持品牌辨識一致。</p>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-md-6">
 
+          <div class="feature-card">
 
+            <h6 class="mb-2"><i class="bi bi-aspect-ratio me-1"></i> 是否能產出不同尺寸與版本？</h6>
 
+            <p class="mb-0 text-secondary">可同時輸出多尺寸（16:9、1:1、9:16），並快速生成多版本內容，靈活對應各平台需求。</p>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-md-6">
 
+          <div class="feature-card">
 
+            <h6 class="mb-2"><i class="bi bi-clock-history me-1"></i> 有歷史版本可回溯嗎？</h6>
 
+            <p class="mb-0 text-secondary">提供版本紀錄與差異回看，方便審核與改版管理。</p>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-md-6">
 
+          <div class="feature-card">
 
+            <h6 class="mb-2"><i class="bi bi-shield-lock me-1"></i> 品牌與資料安全如何保障？</h6>
 
+            <p class="mb-0 text-secondary">素材與模型可採私有儲存，權限與存取可控，依企業保密規範進行管理。</p>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
-  </div>
 
+  </section>
 
 
 
   {{ partial "footer.html" . }}
 
   {{ partial "footer.html" . }}
 
 
 
   <script>
 
   <script>
 
-    const yEl = document.getElementById('y');
 
-    if (yEl) yEl.textContent = new Date().getFullYear();
 
+    document.getElementById('y').textContent = new Date().getFullYear();
 
   </script>
 
   </script>
 
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 
 </body>
 
 </body>

+ 428 - 0
layouts/ai-video-maker/single.html
Vizualizați fișierul 

@@ -0,0 +1,428 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  {{ partial "head_single.html" . }}
 
+
 
+  <link rel="stylesheet" href="/css/service.css">
 
+</head>
 
+
 
+<body>
 
+  {{ partial "navbar.html" . }}
 
+
 
+  <!-- Hero -->
 
+  <header class="hero py-5 mt-5">
 
+    <div class="container pt-5">
 
+      <div class="row align-items-center g-4">
 
+        <div class="col-lg-6">
 
+          <!-- <span class="badge badge-soft mb-3">AI 影片製作 · 多語多版本自動化</span> -->
 
+          <h1 class="display-6 fw-bold mb-3">專為品牌與行銷打造的<br class="d-none d-md-block"> <strong class="text-primary">AI 影片製作</strong></h1>
 
+          <p class="lead text-secondary mb-4">
 
+            一次拍攝精準建模，AI 對嘴自然精準；支援多語多版本自動化，從腳本 → 配音 → 字幕一站完成，
 
+            讓跨國行銷更輕鬆、製作更高效。
 
+          </p>
 
+          <div class="d-flex flex-wrap gap-3">
 
+            <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" class="link-btn" target="_blank"
 
+              rel="noopener">
 
+              <i class="bi bi-chat-dots"></i> 立即與專人諮詢
 
+            </a>
 
+            <a href="#cases" class="outline-btn d-inline-flex align-items-center">
 
+              <i class="bi bi-play-circle"></i> 查看實際案例
 
+            </a>
 
+          </div>
 
+          <div class="mt-4 text-secondary small">
 
+            <i class="bi bi-shield-check me-1"></i> 穩定 · 多語 · 可擴充 · 品牌一致性
 
+          </div>
 
+        </div>
 
+        <div class="col-lg-6">
 
+          <div class="media-card">
 
+            <img src="/img/aicustomer/三立娟姐.gif" alt="AI 影片製作" class="img-fluid">
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </header>
 
+
 
+  <!-- Value Props -->
 
+  <section class="py-5 mt-5">
 
+    <div class="container">
 
+      <div class="text-center">
 
+        <p class="kicker mb-2">Why AI Video</p>
 
+        <h2 class="fw-bold mb-4">多語多版本自動化，製作影片更快、更穩、更省</h2>
 
+      </div>
 
+
 
+      <div class="row g-4 align-items-stretch">
 
+        <div class="col-lg-6">
 
+          <div class="feature-card h-100">
 
+            <div class="d-flex align-items-center mb-2">
 
+              <i class="bi bi-lightning-charge fs-3 text-primary me-2"></i>
 
+              <strong>快速產出</strong>
 
+            </div>
 
+            <p class="text-secondary mb-2">腳本 → 配音 → 字幕全流程自動化，縮短製作週期與人力投入。</p>
 
+            <ul class="text-secondary m-0 ps-3">
 
+              <li>批次生成多版本素材</li>
 
+              <li>腳本更新後可立即重新生成影片，快速完成修改</li>
 
+            </ul>
 
+          </div>
 
+        </div>
 
+        <div class="col-lg-6">
 
+          <div class="feature-card h-100">
 
+            <div class="d-flex align-items-center mb-2">
 
+              <i class="bi bi-person-video3 fs-3 text-primary me-2"></i>
 
+              <strong>輕量拍攝建模</strong>
 
+            </div>
 
+            <p class="text-secondary mb-2">一次建模長期複用，AI 精準對嘴、自然動態，長線維護低成本。</p>
 
+            <ul class="text-secondary m-0 ps-3">
 
+              <li>主播造型可高度客製</li>
 
+              <li>品牌辨識度一致、風格可變</li>
 
+            </ul>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-lg-6">
 
+          <div class="feature-card h-100">
 
+            <div class="d-flex align-items-center mb-2">
 
+              <i class="bi bi-translate fs-3 text-primary me-2"></i>
 
+              <strong>多國語言擴散</strong>
 
+            </div>
 
+            <p class="text-secondary mb-2">自動生成多國語音 + 字幕（中/英/日/韓…），輕鬆覆蓋海外市場。</p>
 
+            <ul class="text-secondary m-0 ps-3">
 
+              <li>口音選擇與語調設定</li>
 
+              <li>字幕同步、可套品牌字型</li>
 
+            </ul>
 
+          </div>
 
+        </div>
 
+        <div class="col-lg-6">
 
+          <div class="feature-card h-100">
 
+            <div class="d-flex align-items-center mb-2">
 
+              <i class="bi bi-brush fs-3 text-primary me-2"></i>
 
+              <strong>品牌級客製</strong>
 
+            </div>
 
+            <p class="text-secondary mb-2">角色造型、聲線、穿搭、版型依品牌打造，跨平台素材一致。</p>
 
+            <ul class="text-secondary m-0 ps-3">
 
+              <li>模板化片頭片尾、商品版位</li>
 
+              <li>圖像/特效可套用品牌元素</li>
 
+            </ul>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+      <div class="row g-4 mt-4">
 
+        <div class="col-md-6 col-lg-3">
 
+          <div class="stat-card text-center p-4 rounded-4 bg-light h-100">
 
+            <div class="fs-2 fw-bold">10+ / 日</div>
 
+            <div class="text-secondary small">單日可產出高質量影片數</div>
 
+          </div>
 
+        </div>
 
+        <div class="col-md-6 col-lg-3">
 
+          <div class="stat-card text-center p-4 rounded-4 bg-light h-100">
 
+            <div class="fs-2 fw-bold">4x</div>
 
+            <div class="text-secondary small">製作效率提升（相較傳統）</div>
 
+          </div>
 
+        </div>
 
+        <div class="col-md-6 col-lg-3">
 
+          <div class="stat-card text-center p-4 rounded-4 bg-light h-100">
 
+            <div class="fs-2 fw-bold">多語</div>
 
+            <div class="text-secondary small">中 / 英 / 日 / 韓…全自動字幕</div>
 
+          </div>
 
+        </div>
 
+        <div class="col-md-6 col-lg-3">
 
+          <div class="stat-card text-center p-4 rounded-4 bg-light h-100">
 
+            <div class="fs-2 fw-bold">TV 等級</div>
 
+            <div class="text-secondary small">畫質與特效達電視台標準</div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </section>
 
+
 
+  <!-- 適用情境 -->
 
+  <section class="py-5 mb-5 bg-light">
 
+    <div class="container text-center">
 
+      <p class="kicker mb-2">Use Cases</p>
 
+      <h2 class="fw-bold mb-4">AI 影片適用情境</h2>
 
+
 
+      <div class="row g-4">
 
+        <div class="col-6 col-md-3">
 
+          <i class="bi bi-camera-reels fs-1 text-brand"></i>
 
+          <p class="fw-semibold mt-2 mb-0">社群短影音</p>
 
+        </div>
 
+        <div class="col-6 col-md-3">
 
+          <i class="bi bi-bag-check fs-1 text-brand"></i>
 
+          <p class="fw-semibold mt-2 mb-0">商品介紹</p>
 
+        </div>
 
+        <div class="col-6 col-md-3">
 
+          <i class="bi bi-mic fs-1 text-brand"></i>
 
+          <p class="fw-semibold mt-2 mb-0">品牌廣告 / 形象片</p>
 
+        </div>
 
+        <div class="col-6 col-md-3">
 
+          <i class="bi bi-mortarboard fs-1 text-brand"></i>
 
+          <p class="fw-semibold mt-2 mb-0">教育訓練 / 內部宣導</p>
 
+        </div>
 
+        <div class="col-6 col-md-3">
 
+          <i class="bi bi-calendar-event fs-1 text-brand"></i>
 
+          <p class="fw-semibold mt-2 mb-0">活動開場 / 預告影片</p>
 
+        </div>
 
+        <div class="col-6 col-md-3">
 
+          <i class="bi bi-newspaper fs-1 text-brand"></i>
 
+          <p class="fw-semibold mt-2 mb-0">新聞播報 / 節目製作</p>
 
+        </div>
 
+        <div class="col-6 col-md-3">
 
+          <i class="bi bi-headset fs-1 text-brand"></i>
 
+          <p class="fw-semibold mt-2 mb-0">客服說明 / 常見問題影片</p>
 
+        </div>
 
+        <div class="col-6 col-md-3">
 
+          <i class="bi bi-bar-chart-line fs-1 text-brand"></i>
 
+          <p class="fw-semibold mt-2 mb-0">內部簡報 / 專案報告</p>
 
+        </div>
 
+      </div>
 
+
 
+      <p class="text-secondary mt-5 mb-0">
 
+        內容零素材也能開拍：輸入文字，AI 生成高質感視覺並自動剪輯成片。
 
+      </p>
 
+    </div>
 
+
 
+  </section>
 
+
 
+  <!-- 比較區塊 -->
 
+  <section class="py-5 compare-block">
 
+    <div class="container">
 
+      <div class="text-center mb-4">
 
+        <p class="kicker mb-2">Compare</p>
 
+        <h2 class="fw-bold mb-0">AI 主播 vs 真人主播</h2>
 
+      </div>
 
+
 
+      <div class="row g-4 align-items-start">
 
+        <!-- Left: Table -->
 
+        <div class="col-lg-12">
 
+          <div class="feature-card p-0 overflow-hidden">
 
+            <div class="table-responsive compare-table">
 
+              <table class="table table-bordered table-striped align-middle mb-0">
 
+                <thead>
 
+                  <tr>
 
+                    <th scope="col" class="w-25">項目</th>
 
+                    <th scope="col">👑 AI 主播</th>
 
+                    <th scope="col">真人主播</th>
 
+                  </tr>
 
+                </thead>
 
+                <tbody>
 
+                  <tr>
 
+                    <td>製作成本</td>
 
+                    <td>低且可預測</td>
 
+                    <td>高，需人事、場地、器材</td>
 
+                  </tr>
 
+                  <tr>
 
+                    <td>製作速度</td>
 
+                    <td>快速生成，隨時可用</td>
 
+                    <td>拍攝 + 後製流程繁瑣</td>
 
+                  </tr>
 
+                  <tr>
 
+                    <td>語言覆蓋</td>
 
+                    <td>多語多口音、字幕同步</td>
 
+                    <td>需外語人才或後配</td>
 
+                  </tr>
 
+                  <tr>
 
+                    <td>穩定度</td>
 
+                    <td>AI 對嘴精準 + 自然動態</td>
 
+                    <td>表現受臨場狀態影響</td>
 
+                  </tr>
 
+                </tbody>
 
+              </table>
 
+            </div>
 
+          </div>
 
+
 
+          <p class="text-secondary text-center mt-3 mb-0">
 
+            電視台等級專業品質：與多家電視台長期合作，大螢幕也銳利不失真。
 
+          </p>
 
+        </div>
 
+
 
+        <!-- Right: Image -->
 
+        <!-- <div class="col-lg-5">
 
+          <div class="media-card">
 
+            <img src="/img/aicustomer/三立娟姐.gif" alt="AI 主播實例－三立新聞">
 
+          </div>
 
+          <p class="mt-2 small text-secondary text-center">▲ AI 主播實例－三立新聞</p>
 
+        </div> -->
 
+      </div>
 
+    </div>
 
+  </section>
 
+
 
+
 
+  <!-- 工作流程（變化版式：Timeline） -->
 
+  <section class="py-5 mb-5">
 
+    <div class="container">
 
+      <div class="text-center">
 
+        <p class="kicker mb-2">How It Works</p>
 
+        <h2 class="fw-bold mb-4">導入流程超簡單，四步完成</h2>
 
+      </div>
 
+
 
+      <div class="row g-4">
 
+        <div class="col-md-6 col-lg-3">
 
+          <div class="feature-card h-100">
 
+            <h5>Step 1<br>需求訪談</h5>
 
+            <p class="text-secondary mb-0">釐清受眾、渠道、品牌語氣與多語需求，確認腳本方向與素材版型</p>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-md-6 col-lg-3">
 
+          <div class="feature-card h-100">
 
+            <h5>Step 2<br>腳本與建模</h5>
 
+            <p class="text-secondary mb-0">撰寫腳本 & 一次拍攝建模；設定聲線、造型與字幕樣式</p>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-md-6 col-lg-3">
 
+          <div class="feature-card h-100">
 
+            <h5>Step 3<br>自動生成與校稿</h5>
 
+            <p class="text-secondary mb-0">批次產生多語版本與尺寸版型，對嘴/節奏/圖像微調</p>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-md-6 col-lg-3">
 
+          <div class="feature-card h-100">
 
+            <h5>Step 4<br>上線與擴充</h5>
 
+            <p class="text-secondary mb-0">多平台發佈與數據回饋；模板化長期複用，快速擴充新素材</p>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+    </div>
 
+  </section>
 
+
 
+  <!-- Cases -->
 
+  <section id="cases" class="py-5 bg-light">
 
+    <div class="container text-center">
 
+      <p class="kicker mb-2">Case Studies</p>
 
+      <h2 class="fw-bold mb-4">AI 影片實例</h2>
 
+
 
+      <div class="row g-4">
 
+        <div class="col-lg-6">
 
+          <div class="media-card">
 
+            <video src="/img/aicustomer/客家整年合輯.mp4" autoplay muted playsinline loop></video>
 
+          </div>
 
+          <p class="mt-2 small text-secondary">▲ 客家電視台（整年合輯）</p>
 
+        </div>
 
+
 
+        <div class="col-lg-6">
 
+          <div class="media-card">
 
+            <video src="/img/aicustomer/LIHO-DEMO.mp4" autoplay muted playsinline loop></video>
 
+          </div>
 
+          <p class="mt-2 small text-secondary">▲ LiHo TV</p>
 
+        </div>
 
+
 
+        <div class="col-lg-6">
 
+          <div class="media-card">
 
+            <div class="ratio ratio-16x9">
 
+              <iframe
 
+                src="https://www.youtube.com/embed/CUR_9L8RtDk?autoplay=1&mute=1&loop=1&playlist=CUR_9L8RtDk&playsinline=1&controls=0&modestbranding=1&rel=0"
 
+                title="AI 影片實例－客家電視台" frameborder="0"
 
+                allow="autoplay; encrypted-media; gyroscope; picture-in-picture; web-share"
 
+                referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
 
+              </iframe>
 
+            </div>
 
+          </div>
 
+          <p class="mt-2 small text-secondary">▲ 三立新聞網－「AI克隆娟」</p>
 
+        </div>
 
+
 
+        <div class="col-lg-6">
 
+          <div class="media-card">
 
+            <div class="ratio ratio-16x9">
 
+              <iframe
 
+                src="https://www.youtube.com/embed/TzKQGBDmnXg?autoplay=1&mute=1&loop=1&playlist=TzKQGBDmnXg&playsinline=1&controls=0&modestbranding=1&rel=0"
 
+                title="AI 影片實例－客家電視台" frameborder="0"
 
+                allow="autoplay; encrypted-media; gyroscope; picture-in-picture; web-share"
 
+                referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
 
+              </iframe>
 
+            </div>
 
+          </div>
 
+          <p class="mt-2 small text-secondary">▲ AI 影片實例－算力傳媒</p>
 
+        </div>
 
+      </div>
 
+
 
+      <p class="my-5 text-center" style="line-height: 2;">🚀 選擇 ChoozMo AI 影片製作方案<br>一次建模長期複用，為跨國行銷帶來穩定且可擴充的內容供給</p>
 
+
 
+      <div class="text-center">
 
+        <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" class="link-btn" target="_blank"
 
+          rel="noopener">
 
+          <i class="bi bi-rocket-takeoff"></i> 立即諮詢與評估方案
 
+        </a>
 
+      </div>
 
+    </div>
 
+  </section>
 
+
 
+  <!-- CTA band -->
 
+  <section class="py-5 mt-5">
 
+    <div class="container">
 
+      <div class="cta-band p-4 p-md-5 d-flex flex-column flex-lg-row align-items-center justify-content-between gap-3">
 
+        <div>
 
+          <h3 class="mb-2 fw-bold">想讓同支影片輕鬆擴展多語言、多版本？</h3>
 
+          <p class="mb-0">我們提供腳本客製、聲線設定、字幕模板與批次生成，一站式搞定海外在地化。</p>
 
+        </div>
 
+        <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" class="cta-btn">
 
+          取得免費顧問建議
 
+        </a>
 
+      </div>
 
+    </div>
 
+  </section>
 
+
 
+  <!-- FAQ -->
 
+  <section class="py-5 mb-5">
 
+    <div class="container">
 
+      <div class="text-center">
 
+        <p class="kicker mb-2">FAQ</p>
 
+        <h2 class="fw-bold mb-4">常見問題</h2>
 
+      </div>
 
+
 
+      <div class="row g-4">
 
+        <div class="col-md-6">
 
+          <div class="feature-card">
 
+            <h6 class="mb-2"><i class="bi bi-question-circle me-1"></i> 沒有素材也能製作嗎？</h6>
 
+            <p class="mb-0 text-secondary">
 
+              可以！輸入文字即可由 AI 生成高質感照片與視覺元素，並自動剪輯成片；亦可套用既有素材與品牌版型。
 
+            </p>
 
+          </div>
 
+        </div>
 
+        <div class="col-md-6">
 
+          <div class="feature-card">
 
+            <h6 class="mb-2"><i class="bi bi-translate me-1"></i> 支援哪些語言？</h6>
 
+            <p class="mb-0 text-secondary">支援全球主要語言（中/英/日/韓…），字幕可套品牌字型與樣式，確保識別一致。</p>
 
+          </div>
 
+        </div>
 
+        <div class="col-md-6">
 
+          <div class="feature-card">
 
+            <h6 class="mb-2"><i class="bi bi-aspect-ratio me-1"></i> 可否一次產出不同尺寸與版本？</h6>
 
+            <p class="mb-0 text-secondary">可以。支援多尺寸輸出（16:9、1:1、9:16）與多版本腳本生成，靈活應對不同平台需求。</p>
 
+          </div>
 
+        </div>
 
+        <div class="col-md-6">
 
+          <div class="feature-card">
 
+            <h6 class="mb-2"><i class="bi bi-shield-lock me-1"></i> 品牌與資料安全如何保障？</h6>
 
+            <p class="mb-0 text-secondary">內容依企業保密規範處理，模型與素材可採自家或私有儲存，避免外流風險；輸出檔案權限可控。</p>
 
+          </div>
 
+        </div>
 
+        <div class="col-md-6">
 
+          <div class="feature-card">
 
+            <h6 class="mb-2"><i class="bi bi-speedometer2 me-1"></i> 交期需要多久？</h6>
 
+            <p class="mb-0 text-secondary">建立模型後可日更十餘支影片；首次導入視規模與客製程度不同而異，通常於短週期內完成上線。</p>
 
+          </div>
 
+        </div>
 
+        <div class="col-md-6">
 
+          <div class="feature-card">
 
+            <h6 class="mb-2"><i class="bi bi-mic me-1"></i> 對嘴與表情自然嗎？</h6>
 
+            <p class="mb-0 text-secondary">AI 對嘴精準並搭配自然動態，音色與語速可依品牌語氣調整，維持一致且專業的觀感。</p>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </section>
 
+
 
+  {{ partial "footer.html" . }}
 
+
 
+  <script>
 
+    document.getElementById('y').textContent = new Date().getFullYear();
 
+  </script>
 
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 
+</body>
 
+
 
+
 
+</html>

+ 19 - 182
layouts/ai-virtual-presenter/single.html
Vizualizați fișierul 

@@ -4,168 +4,7 @@
 
 <head>
 
 <head>
 
   {{ partial "head_single.html" . }}
 
   {{ partial "head_single.html" . }}
 
 
 
-  <title>AI 主持人｜企業活動、直播、品牌發表的智能主持解決方案</title>
 
-  <meta name="description" content="AI 主持人：低成本、高效率、穩定專業、多語支援。適用新品發表、企業年會、展覽、線上直播與 Kiosk 互動服務，打造高質感、零失誤的專業主持體驗。">
 
-  <meta property="og:title" content="AI 主持人｜智能主持解決方案">
 
-  <meta property="og:description" content="穩定表現、品質一致、24/7、多語支援，讓活動更省心、專業又具國際感。">
 
-  <meta property="og:type" content="website">
 
-
 
-  <!-- Icons -->
 
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
 
-
 
-  <style>
 
-    :root {
 
-      --brand: #ea5413;
 
-      /* 主色 */
 
-      --brand-dark: #c43e00;
 
-      /* 深色版本 (hover、強調用) */
 
-      --brand-light: #fff3ed;
 
-      /* 淡色背景 */
 
-      --gray-border: #e5e7eb;
 
-      --text-dark: #0b1120;
 
-      --text-secondary: #555;
 
-    }
 
-
 
-    body {
 
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
-      color: var(--text-dark);
 
-      background-color: #fff;
 
-    }
 
-
 
-    .text-primary {
 
-      color: var(--brand) !important;
 
-    }
 
-
 
-    .hero {
 
-      background: radial-gradient(1200px 500px at 20% -10%, rgba(234, 84, 19, 0.18), transparent),
 
-        radial-gradient(800px 400px at 100% 0%, rgba(234, 84, 19, 0.1), transparent),
 
-        linear-gradient(180deg, #fffdfc, #fff7f3);
 
-      border-bottom: 1px solid var(--gray-border);
 
-    }
 
-
 
-    .badge-soft {
 
-      background: rgba(234, 84, 19, 0.1);
 
-      color: var(--brand);
 
-      border: 1px solid rgba(234, 84, 19, 0.2);
 
-      font-weight: 600;
 
-    }
 
-
 
-    .shadow-soft {
 
-      box-shadow: 0 8px 30px rgba(234, 84, 19, 0.15);
 
-    }
 
-
 
-    .feature-card {
 
-      border: 1px solid var(--gray-border);
 
-      border-radius: 16px;
 
-      padding: 20px;
 
-      background: #fff;
 
-      height: 100%;
 
-      transition: all 0.3s ease;
 
-    }
 
-
 
-    .feature-card:hover {
 
-      border-color: var(--brand);
 
-      box-shadow: 0 6px 20px rgba(234, 84, 19, 0.15);
 
-    }
 
-
 
-    .title {
 
-      border-bottom: 2px solid var(--brand-light);
 
-    }
 
-
 
-    .link-btn {
 
-      display: inline-flex;
 
-      align-items: center;
 
-      gap: 0.5rem;
 
-      background: var(--brand);
 
-      color: #fff;
 
-      padding: 0.9rem 1.2rem;
 
-      border-radius: 0.8rem;
 
-      text-decoration: none;
 
-      transition: all 0.2s ease-in-out;
 
-      font-weight: 600;
 
-      box-shadow: 0 3px 8px rgba(234, 84, 19, 0.2);
 
-    }
 
-
 
-    .link-btn:hover {
 
-      background: var(--brand-dark);
 
-      color: #fff;
 
-      box-shadow: 0 6px 14px rgba(196, 62, 0, 0.25);
 
-    }
 
-
 
-    .outline-btn {
 
-      display: inline-flex;
 
-      align-items: center;
 
-      gap: 0.5rem;
 
-      border: 2px solid var(--brand);
 
-      color: var(--brand);
 
-      padding: 0.8rem 1.2rem;
 
-      border-radius: 0.8rem;
 
-      font-weight: 600;
 
-      background: transparent;
 
-      text-decoration: none;
 
-      transition: all 0.2s ease-in-out;
 
-    }
 
-
 
-    .outline-btn:hover {
 
-      background: var(--brand);
 
-      color: #fff;
 
-      transform: translateY(-1px);
 
-      box-shadow: 0 4px 10px rgba(234, 84, 19, 0.25);
 
-    }
 
-
 
-    .cta-band {
 
-      background: linear-gradient(135deg, var(--brand), var(--brand-dark));
 
-      color: #fff;
 
-      border-radius: 20px;
 
-      box-shadow: 0 8px 25px rgba(234, 84, 19, 0.25);
 
-    }
 
-
 
-    .accordion-button {
 
-      color: var(--brand-dark);
 
-      background-color: #fff;
 
-      font-weight: 600;
 
-    }
 
-
 
-    .accordion-button:not(.collapsed) {
 
-      color: var(--brand);
 
-      background-color: var(--brand-light);
 
-      box-shadow: inset 0 -1px 0 rgba(234, 84, 19, 0.1);
 
-    }
 
-
 
-    .accordion-button:focus {
 
-      box-shadow: 0 0 0 0.2rem rgba(234, 84, 19, 0.25);
 
-    }
 
-
 
-    .media-card img,
 
-    .media-card video {
 
-      border-radius: 14px;
 
-      width: 100%;
 
-      height: auto;
 
-      border: 1px solid var(--gray-border);
 
-      box-shadow: 0 4px 16px rgba(234, 84, 19, 0.1);
 
-    }
 
-
 
-    .kicker {
 
-      letter-spacing: 0.12em;
 
-      text-transform: uppercase;
 
-      font-weight: 700;
 
-      color: var(--brand-dark);
 
-    }
 
-
 
-    a {
 
-      color: var(--brand);
 
-      text-decoration: none;
 
-    }
 
-
 
-    a:hover {
 
-      color: var(--brand-dark);
 
-    }
 
-
 
-    .accordion-button:not(.collapsed)::after {
 
-      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ea5413'%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");
 
-    }
 
-  </style>
 
-
 
+  <link rel="stylesheet" href="/css/service.css">
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
@@ -175,9 +14,9 @@
 
   <header class="hero py-5 mt-5">
 
   <header class="hero py-5 mt-5">
 
     <div class="container pt-5">
 
     <div class="container pt-5">
 
       <div class="row align-items-center g-4">
 
       <div class="row align-items-center g-4">
 
-        <div class="col-lg-7">
 
+        <div class="col-lg-6">
 
           <!-- <span class="badge badge-soft mb-3">AI 主持人 · 智能內容創作</span> -->
 
           <!-- <span class="badge badge-soft mb-3">AI 主持人 · 智能內容創作</span> -->
 
-          <h1 class="display-5 fw-bold mb-3">專為活動與品牌打造的 <strong class="text-primary">AI 主持人</strong></h1>
 
+          <h1 class="display-6 fw-bold mb-3">專為活動與品牌打造的 <br class="d-none d-md-block"><strong class="text-primary">AI 主持人</strong></h1>
 
           <p class="lead text-secondary mb-4">
 
           <p class="lead text-secondary mb-4">
 
             以 AI 主持人打造高品質、可擴充、零情緒波動的主持體驗。支援多語切換、腳本客製、品牌語氣一致，
 
             以 AI 主持人打造高品質、可擴充、零情緒波動的主持體驗。支援多語切換、腳本客製、品牌語氣一致，
 
             適用新品發表、年會、展覽、直播與 Kiosk 互動服務。
 
             適用新品發表、年會、展覽、直播與 Kiosk 互動服務。
 
@@ -195,11 +34,10 @@
 
             <i class="bi bi-shield-check me-1"></i> 穩定 · 多語 · 可擴充 · 品牌一致性
 
             <i class="bi bi-shield-check me-1"></i> 穩定 · 多語 · 可擴充 · 品牌一致性
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-        <div class="col-lg-5">
 
-          <div class="p-3 bg-white shadow-soft rounded-4">
 
-            <img src="/img/meet-taipei.webp" alt="AI 主持人範例" class="w-100 rounded-3">
 
+        <div class="col-lg-6">
 
+          <div class="media-card">
 
+            <img src="/img/meet-taipei.webp" alt="AI 主持人範例" class="img-fluid" style="height: 355px; object-fit: cover;">
 
           </div>
 
           </div>
 
-          <p class="text-center small text-secondary mt-2">▲ AI 主持人示意</p>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
@@ -319,30 +157,30 @@
 
       <div class="row g-4">
 
       <div class="row g-4">
 
         <div class="col-md-6 col-lg-3">
 
         <div class="col-md-6 col-lg-3">
 
           <div class="feature-card h-100">
 
           <div class="feature-card h-100">
 
-            <span class="badge text-secondary mb-2 ps-0">Step 1</span>
 
-            <h5>需求訪談</h5>
 
-            <p class="text-secondary mb-0">活動型態、觀眾輪廓、品牌語氣與多語需求確認。</p>
 
+            <!-- <span class="badge text-secondary mb-2 ps-0">Step 1</span> -->
 
+            <h5>Step 1<br>需求訪談</h5>
 
+            <p class="text-secondary mb-0">活動型態、觀眾輪廓、品牌語氣與多語需求確認</p>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
         <div class="col-md-6 col-lg-3">
 
         <div class="col-md-6 col-lg-3">
 
           <div class="feature-card h-100">
 
           <div class="feature-card h-100">
 
-            <span class="badge text-secondary mb-2 ps-0">Step 2</span>
 
-            <h5>腳本與角色設定</h5>
 
-            <p class="text-secondary mb-0">主持稿、互動節點、Q&A 知識庫與語音人設建立。</p>
 
+            <!-- <span class="badge text-secondary mb-2 ps-0">Step 2</span> -->
 
+            <h5>Step 2<br>腳本與角色設定</h5>
 
+            <p class="text-secondary mb-0">主持稿、互動節點、Q&A 知識庫與語音人設建立</p>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
         <div class="col-md-6 col-lg-3">
 
         <div class="col-md-6 col-lg-3">
 
           <div class="feature-card h-100">
 
           <div class="feature-card h-100">
 
-            <span class="badge text-secondary mb-2 ps-0">Step 3</span>
 
-            <h5>錄製與測試</h5>
 
-            <p class="text-secondary mb-0">多輪測試優化發音節奏、視覺、音樂與互動節拍。</p>
 
+            <!-- <span class="badge text-secondary mb-2 ps-0">Step 3</span> -->
 
+            <h5>Step 3<br>錄製與測試</h5>
 
+            <p class="text-secondary mb-0">多輪測試優化發音節奏、視覺、音樂與互動節拍</p>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
         <div class="col-md-6 col-lg-3">
 
         <div class="col-md-6 col-lg-3">
 
           <div class="feature-card h-100">
 
           <div class="feature-card h-100">
 
-            <span class="badge text-secondary mb-2 ps-0">Step 4</span>
 
-            <h5>正式上線</h5>
 
-            <p class="text-secondary mb-0">現場／線上部署，提供技術支援與成效報告。</p>
 
+            <!-- <span class="badge text-secondary mb-2 ps-0">Step 4</span> -->
 
+            <h5>Step 4<br>正式上線</h5>
 
+            <p class="text-secondary mb-0">現場／線上部署，提供技術支援與成效報告</p>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
@@ -404,8 +242,7 @@
 
           <h3 class="mb-2 fw-bold">想讓你的下一場活動，穩、準、亮眼？</h3>
 
           <h3 class="mb-2 fw-bold">想讓你的下一場活動，穩、準、亮眼？</h3>
 
           <p class="mb-0">我們提供腳本客製、多語配音、品牌語調訓練與現場部署，一站式搞定。</p>
 
           <p class="mb-0">我們提供腳本客製、多語配音、品牌語調訓練與現場部署，一站式搞定。</p>
 
         </div>
 
         </div>
 
-        <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true"
 
-          class="btn btn-light btn-lg fw-semibold">
 
+        <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" class="cta-btn">
 
           取得免費顧問建議
 
           取得免費顧問建議
 
         </a>
 
         </a>
 
       </div>
 
       </div>

+ 32 - 1
layouts/crawler/single.html
Vizualizați fișierul 

@@ -14,6 +14,37 @@
 
   <!-- Start of HubSpot Embed Code -->
 
   <!-- Start of HubSpot Embed Code -->
 
   <!-- <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script> -->
 
   <!-- <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script> -->
 
   <!-- End of HubSpot Embed Code -->
 
   <!-- End of HubSpot Embed Code -->
 
+
 
+  <!-- Google Tag Manager -->
 
+  <script>(function (w, d, s, l, i) {
 
+      w[l] = w[l] || []; w[l].push({
 
+        'gtm.start':
 
+          new Date().getTime(), event: 'gtm.js'
 
+      }); var f = d.getElementsByTagName(s)[0],
 
+        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
 
+          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
 
+    })(window, document, 'script', 'dataLayer', 'GTM-MTWWP3G');</script>
 
+  <!-- End Google Tag Manager -->
 
+
 
+  <!-- Google tag (gtag.js) -->
 
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-G5H9MMGQFM"></script>
 
+  <script>
 
+    window.dataLayer = window.dataLayer || [];
 
+    function gtag() { dataLayer.push(arguments); }
 
+    gtag('js', new Date());
 
+
 
+    gtag('config', 'G-G5H9MMGQFM');
 
+  </script>
 
+
 
+  <!-- Global site tag (gtag.js) - Google Ads: 474336061 -->
 
+  <script async src="https://www.googletagmanager.com/gtag/js?id=AW-474336061"></script>
 
+  <script>
 
+    window.dataLayer = window.dataLayer || [];
 
+    function gtag() { dataLayer.push(arguments); }
 
+    gtag('js', new Date());
 
+
 
+    gtag('config', 'AW-474336061');
 
+  </script>
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
@@ -137,7 +168,7 @@
 
   </main>
 
   </main>
 
 
 
   {{ partial "footer.html" . }}
 
   {{ partial "footer.html" . }}
 
-  
+
 
   <script type="application/javascript">
 
   <script type="application/javascript">
 
     var doNotTrack = false;
 
     var doNotTrack = false;
 
     if (!doNotTrack) {
 
     if (!doNotTrack) {

+ 33 - 0
layouts/partials/head_single.html
Vizualizați fișierul 

@@ -3,8 +3,31 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1">
 
   <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1">
 
   <meta http-equiv="Cache-Control" content="no-cache">
 
   <meta http-equiv="Cache-Control" content="no-cache">
 
+
 
+  <!-- Title -->
 
   {{ $title_plain := .Title | markdownify | plainify }}
 
   {{ $title_plain := .Title | markdownify | plainify }}
 
   <title>{{ $title_plain }}</title>
 
   <title>{{ $title_plain }}</title>
 
+
 
+  <!-- Description -->
 
+  {{ $desc := .Params.description | markdownify | plainify }}
 
+  <meta name="description" content="{{ $desc }}">
 
+
 
+  <!-- Open Graph -->
 
+  <meta property="og:title" content="{{ $title_plain }}">
 
+  <meta property="og:description" content="{{ $desc }}">
 
+  <meta property="og:type" content="website">
 
+  {{ with .Params.og_image }}
 
+  <meta property="og:image" content="{{ . | absURL }}">
 
+  {{ else }}
 
+  <meta property="og:image" content="{{ " /img/ChoozmoLOGO.png" | absURL }}">
 
+  {{ end }}
 
+  <meta property="og:image:alt" content="{{ with .Params.og_alt }}{{ . }}{{ else }}ChoozMo AI 影片製作示意圖{{ end }}">
 
+  <meta property="og:site_name" content="ChoozMo">
 
+
 
+  <!-- Icons -->
 
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
 
+
 
+  <!-- CSS -->
 
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
 
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
 
     integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
     integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
   <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.11.2/css/all.css">
 
   <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.11.2/css/all.css">
 
@@ -32,6 +55,16 @@
 
     gtag('config', 'G-G5H9MMGQFM');
 
     gtag('config', 'G-G5H9MMGQFM');
 
   </script>
 
   </script>
 
 
 
+  <!-- Global site tag (gtag.js) - Google Ads: 474336061 -->
 
+  <script async src="https://www.googletagmanager.com/gtag/js?id=AW-474336061"></script>
 
+  <script>
 
+    window.dataLayer = window.dataLayer || [];
 
+    function gtag() { dataLayer.push(arguments); }
 
+    gtag('js', new Date());
 
+
 
+    gtag('config', 'AW-474336061');
 
+  </script>
 
+
 
   <!-- emailjs -->
 
   <!-- emailjs -->
 
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js">
 
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js">
 
   </script>
 
   </script>

+ 2 - 0
layouts/partials/navbar.html
Vizualizați fișierul 

@@ -30,6 +30,8 @@
 
             服務
 
             服務
 
           </a>
 
           </a>
 
           <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
           <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
+            <li><a class="dropdown-item" href="/ai-video-maker/dm/">AI 影片製作</a></li>
 
+            <li><a class="dropdown-item" href="/saas-ai-video-maker/dm/">AI 影片 SaaS</a></li>
 
             <li><a class="dropdown-item" href="/genseo/">算力 SEO</a></li>
 
             <li><a class="dropdown-item" href="/genseo/">算力 SEO</a></li>
 
             <li><a class="dropdown-item" href="/agentic-web/dm/">企業 Agentic Web 建置</a></li>
 
             <li><a class="dropdown-item" href="/agentic-web/dm/">企業 Agentic Web 建置</a></li>
 
             <li><a class="dropdown-item" href="/free-pr-service/dm/">新聞發布服務</a></li>
 
             <li><a class="dropdown-item" href="/free-pr-service/dm/">新聞發布服務</a></li>

+ 710 - 0
layouts/saas-ai-video-maker/single.html
Vizualizați fișierul 

@@ -0,0 +1,710 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  {{ partial "head_single.html" . }}
 
+
 
+  <link rel="stylesheet" href="/css/service.css">
 
+</head>
 
+
 
+<body>
 
+  {{ partial "navbar.html" . }}
 
+
 
+  <header class="hero py-5 mt-5">
 
+    <div class="container pt-5 pb-4">
 
+      <div class="row align-items-center g-4">
 
+        <div class="col-lg-7">
 
+          <!-- <span class="badge badge-soft mb-3">AI 分鏡 × 一鍵影片生成 × 綠幕下載</span> -->
 
+          <h1 class="display-6 fw-bold mb-3">
 
+            SaaS AI 影片製作系統
 
+            <br class="d-none d-md-block">輕鬆製作<strong class="text-primary">多語、多版本</strong>專屬影片
 
+            <!-- 輸入文字 → 生成 <span class="text-primary">AI 分鏡表</span><br class="d-none d-md-block"> 快速製作「AI 人物影片」 -->
 
+          </h1>
 
+          <p class="lead text-secondary mb-4">
 
+            不用會剪輯也能做影片：自動腳本、自由修改、雲端製作、字幕自動化、綠幕原檔下載。
 
+            適用教育訓練、產品/公司宣傳、活動開場、新媒體與社群內容。
 
+          </p>
 
+          <div class="d-flex flex-wrap gap-3">
 
+            <a href="https://cloud.choozmo.com/main/make-video" class="link-btn" target="_blank" rel="noopener">
 
+              <i class="bi bi-lightning-charge"></i> 免費開始體驗
 
+            </a>
 
+            <a href="#cases" class="outline-btn">
 
+              <i class="bi bi-play-circle"></i> AI 影片案例
 
+            </a>
 
+          </div>
 
+          <div class="mt-3 small text-secondary">
 
+            <i class="bi bi-shield-check me-1"></i> 穩定 · 多語 · 綠幕下載 · 模板套用
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-lg-5">
 
+          <div class="media-card">
 
+            <img src="/imgs/ai-presenter/SaaS首圖.webp" alt="ChoozMo AI 人物影片｜SaaS 首圖" loading="lazy" class="img-fluid">
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </header>
 
+
 
+  <!-- 首圖 & 教學 -->
 
+  <section class="py-5">
 
+    <div class="container-fluid">
 
+      <div class="row">
 
+        <div class="col-lg-8 px-5">
 
+          <!-- 適用情境 -->
 
+          <div class="text-center line">
 
+            <p class="kicker mb-2">Use Cases</p>
 
+            <h2 class="fw-bold mb-4">AI 影片適用情境</h2>
 
+
 
+            <div class="row g-4">
 
+              <div class="col-6 col-md-3">
 
+                <i class="bi bi-camera-reels fs-1 text-brand"></i>
 
+                <p class="fw-semibold mt-2 mb-0">社群短影音</p>
 
+              </div>
 
+              <div class="col-6 col-md-3">
 
+                <i class="bi bi-bag-check fs-1 text-brand"></i>
 
+                <p class="fw-semibold mt-2 mb-0">商品介紹</p>
 
+              </div>
 
+              <div class="col-6 col-md-3">
 
+                <i class="bi bi-mic fs-1 text-brand"></i>
 
+                <p class="fw-semibold mt-2 mb-0">品牌廣告 / 形象片</p>
 
+              </div>
 
+              <div class="col-6 col-md-3">
 
+                <i class="bi bi-mortarboard fs-1 text-brand"></i>
 
+                <p class="fw-semibold mt-2 mb-0">教育訓練 / 內部宣導</p>
 
+              </div>
 
+              <div class="col-6 col-md-3">
 
+                <i class="bi bi-calendar-event fs-1 text-brand"></i>
 
+                <p class="fw-semibold mt-2 mb-0">活動開場 / 預告影片</p>
 
+              </div>
 
+              <div class="col-6 col-md-3">
 
+                <i class="bi bi-newspaper fs-1 text-brand"></i>
 
+                <p class="fw-semibold mt-2 mb-0">新聞播報 / 節目製作</p>
 
+              </div>
 
+              <div class="col-6 col-md-3">
 
+                <i class="bi bi-headset fs-1 text-brand"></i>
 
+                <p class="fw-semibold mt-2 mb-0">客服說明 / 常見問題影片</p>
 
+              </div>
 
+              <div class="col-6 col-md-3">
 
+                <i class="bi bi-bar-chart-line fs-1 text-brand"></i>
 
+                <p class="fw-semibold mt-2 mb-0">內部簡報 / 專案報告</p>
 
+              </div>
 
+            </div>
 
+
 
+            <p class="text-secondary mt-5 mb-0">
 
+              內容零素材也能開拍：輸入文字，AI 生成高質感視覺並自動剪輯成片。
 
+            </p>
 
+          </div>
 
+
 
+          <!-- 系統優勢 -->
 
+          <div class="line">
 
+            <div class="container">
 
+              <div class="text-center">
 
+                <p class="kicker mb-2">Why SaaS</p>
 
+                <h2 class="fw-bold mb-4">使用 SaaS 系統<br>讓影片製作更高效</h2>
 
+                <p class="text-secondary mb-5">自助操作、模板化流程與素材管理，讓影片製作更快、更穩、更好維護。</p>
 
+              </div>
 
+
 
+              <div class="row g-4">
 
+                <!-- 1 -->
 
+                <div class="col-md-6 col-lg-4">
 
+                  <div class="feature-card h-100">
 
+                    <div class="d-flex align-items-center mb-2">
 
+                      <i class="bi bi-hand-index-thumb fs-3 text-primary me-2"></i>
 
+                      <strong>門檻低、上手快</strong>
 
+                    </div>
 
+                    <p class="text-secondary mb-0">
 
+                      介面直覺、步驟清楚；輸入文字即可開始製作，非專業也能完成高質感影片。
 
+                    </p>
 
+                  </div>
 
+                </div>
 
+
 
+                <!-- 2 -->
 
+                <div class="col-md-6 col-lg-4">
 
+                  <div class="feature-card h-100">
 
+                    <div class="d-flex align-items-center mb-2">
 
+                      <i class="bi bi-layers fs-3 text-primary me-2"></i>
 
+                      <strong>多語多版本</strong>
 
+                    </div>
 
+                    <p class="text-secondary mb-0">
 
+                      一鍵產出多語與多版腳本／字幕樣式，快速做 A/B 測試，提升行銷投放效率。
 
+                    </p>
 
+                  </div>
 
+                </div>
 
+
 
+                <!-- 3 -->
 
+                <div class="col-md-6 col-lg-4">
 
+                  <div class="feature-card h-100">
 
+                    <div class="d-flex align-items-center mb-2">
 
+                      <i class="bi bi-layout-text-window fs-3 text-primary me-2"></i>
 
+                      <strong>品牌一致與模板化</strong>
 
+                    </div>
 
+                    <p class="text-secondary mb-0">
 
+                      片頭片尾、字幕樣式與商品版位可模板化設定，維持跨平台一致的品牌識別。
 
+                    </p>
 
+                  </div>
 
+                </div>
 
+
 
+                <!-- 4 -->
 
+                <div class="col-md-6 col-lg-4">
 
+                  <div class="feature-card h-100">
 
+                    <div class="d-flex align-items-center mb-2">
 
+                      <i class="bi bi-clock-history fs-3 text-primary me-2"></i>
 
+                      <strong>歷史版本追蹤</strong>
 
+                    </div>
 
+                    <p class="text-secondary mb-0">
 
+                      每支影片皆可查看歷史紀錄與版本差異，方便回溯修改與品質控管。
 
+                    </p>
 
+                  </div>
 
+                </div>
 
+
 
+                <!-- 5 -->
 
+                <div class="col-md-6 col-lg-4">
 
+                  <div class="feature-card h-100">
 
+                    <div class="d-flex align-items-center mb-2">
 
+                      <i class="bi bi-person-plus fs-3 text-primary me-2"></i>
 
+                      <strong>自建人物素材</strong>
 
+                    </div>
 
+                    <p class="text-secondary mb-0">
 
+                      可新增自家人物模型與聲線素材，打造品牌專屬的 AI 主播角色。
 
+                    </p>
 
+                  </div>
 
+                </div>
 
+
 
+                <!-- 6 -->
 
+                <div class="col-md-6 col-lg-4">
 
+                  <div class="feature-card h-100">
 
+                    <div class="d-flex align-items-center mb-2">
 
+                      <i class="bi bi-shield-lock fs-3 text-primary me-2"></i>
 
+                      <strong>安全合規、私有儲存</strong>
 
+                    </div>
 
+                    <p class="text-secondary mb-0">
 
+                      素材與模型可採私有儲存並設定權限，符合企業安全與保密需求。
 
+                    </p>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+
 
+          <!-- <div class="line">
 
+            <div class="text-center mb-4">
 
+              <p class="kicker mb-2">How It Works</p>
 
+              <h2 class="fw-bold">如何從文字生成 AI 人物影片？</h2>
 
+            </div>
 
+
 
+            <div class="media-card">
 
+              <img src="/imgs/ai-presenter/四格SaaS教學gif.gif" alt="ChoozMo AI 人物影片｜四格 SaaS 教學" loading="lazy">
 
+            </div>
 
+          </div> -->
 
+
 
+          <!-- <div class="line">
 
+            <div class="text-center mb-4">
 
+              <p class="kicker mb-2">AI Storyboard</p>
 
+              <h2 class="fw-bold">什麼是 AI 分鏡？</h2>
 
+            </div>
 
+            <div class="d-flex flex-column align-items-center">
 
+              <p>AI 分鏡是 ChoozMo 的獨家功能，讓你<strong>不用學剪輯</strong>也能創作專業影片：</p>
 
+              <ol>
 
+                <li><strong>自動生成腳本：</strong>AI 依文字提示產生完整腳本與分鏡設計。</li>
 
+                <li><strong>輕鬆修改：</strong>不滿意可直接改，直到符合需求。</li>
 
+                <li><strong>無縫製作：</strong>把分鏡上傳至系統，即可生成專屬 AI 主播影片。</li>
 
+              </ol>
 
+              <p class="mb-5">讓製作流程更簡單、更高效，你專心發揮創意即可！</p>
 
+
 
+              <a href="https://cloud.choozmo.com/main/generate-zip" class="link-btn" target="_blank" rel="noopener">
 
+                <i class="bi bi-magic"></i> 立即體驗生成
 
+              </a>
 
+            </div>
 
+
 
+            <div class="media-card mt-5">
 
+              <img src="/imgs/ai-presenter/AI分鏡表.webp" alt="ChoozMo AI 人物影片｜AI 分鏡表" loading="lazy">
 
+            </div>
 
+          </div> -->
 
+
 
+          <div class="line">
 
+            <div class="text-center">
 
+              <p class="kicker mb-2">Why ChoozMo</p>
 
+              <h2 class="fw-bold mb-4">為什麼選擇 ChoozMo？</h2>
 
+            </div>
 
+
 
+            <div class="row g-4">
 
+              <!-- 卡片 1 -->
 
+              <div class="col-12 col-lg-4">
 
+                <div class="feature-card h-100">
 
+                  <h5 class="fw-bold mb-2">
 
+                    <i class="bi bi-broadcast-pin me-2 text-primary"></i>電視台的專業品質
 
+                  </h5>
 
+                  <p class="mb-2">與多家知名電視台長期合作、參與大型 AI 活動，成片畫質與效果達業界高標。</p>
 
+                  <p class="mb-0">大螢幕播放依然清晰震撼，品質有保證。</p>
 
+                </div>
 
+              </div>
 
+
 
+              <!-- 卡片 2 -->
 
+              <div class="col-12 col-lg-4">
 
+                <div class="feature-card h-100">
 
+                  <h5 class="fw-bold mb-2">
 
+                    <i class="bi bi-images me-2 text-primary"></i>無需素材也能輕鬆創作
 
+                  </h5>
 
+                  <p class="mb-2">AI 精準理解文字提示，生成高品質圖片並自動剪輯成片。</p>
 
+                  <ul class="mb-0">
 
+                    <li>輸入幾段文字就有精美畫面</li>
 
+                    <li><strong>無素材數量限制</strong>，人人都能輕鬆創作</li>
 
+                  </ul>
 
+                </div>
 
+              </div>
 
+
 
+              <!-- 卡片 3 -->
 
+              <div class="col-12 col-lg-4">
 
+                <div class="feature-card h-100">
 
+                  <h5 class="fw-bold mb-2">
 
+                    <i class="bi bi-speedometer2 me-2 text-primary"></i>快速、高效、低成本
 
+                  </h5>
 
+                  <p class="mb-2">雲端流程不需專人協助，<strong>一天內可產出多支高品質影片</strong>。</p>
 
+                  <ul class="mb-0">
 
+                    <li><strong>省時：</strong>縮短製作週期</li>
 
+                    <li><strong>省錢：</strong>大幅降低成本，適用各規模團隊</li>
 
+                  </ul>
 
+                </div>
 
+              </div>
 
+            </div>
 
+
 
+            <!-- 應用場合 & 綠幕下載 -->
 
+            <section class="pt-4">
 
+              <div class="row g-4 align-items-stretch">
 
+                <!-- <div class="col-12">
 
+                  <div class="feature-card h-100">
 
+                    <div class="info-head d-flex align-items-center justify-content-center text-center mb-3">
 
+                      <i class="bi bi-play-circle me-2"></i>
 
+                      <span class="fw-bold">AI 人物影片的應用場合</span>
 
+                    </div>
 
+                    <div class="d-flex flex-column align-items-center">
 
+                      <p class="text-secondary mb-2">AI 人物影片適用於多種情境：</p>
 
+                      <ul class="mb-0 ps-3">
 
+                        <li>教育訓練：快速生成教學影片，提升學習效果。</li>
 
+                        <li>開幕會場：吸睛開場介紹，增添活動亮點。</li>
 
+                        <li>產品／公司宣傳：生動呈現品牌與價值。</li>
 
+                        <li>個人品牌／創作者：YouTube／IG／TikTok 一鍵量產內容。</li>
 
+                        <li>企業內訓與對外簡報：標準化輸出、效率高。</li>
 
+                      </ul>
 
+                    </div>
 
+                  </div>
 
+                </div> -->
 
+
 
+                <div class="col-12">
 
+                  <div class="feature-card h-100 overflow-hidden">
 
+                    <div class="info-head d-flex align-items-center justify-content-center text-center mb-3">
 
+                      <i class="bi bi-filetype-mp4 me-2"></i>
 
+                      <span class="fw-bold">自由下載綠幕原檔</span>
 
+                    </div>
 
+
 
+                    <div class="d-flex flex-column align-items-center">
 
+                      <p class="text-secondary mb-2">
 
+                        完成的 AI 人物影片可直接用，亦可下載<strong>綠幕原檔</strong>，方便進一步合成與設計：
 
+                      </p>
 
+                      <ul class="mb-3 ps-3">
 
+                        <li>導入剪輯工具進一步編輯。</li>
 
+                        <li>替換背景、加上特效與轉場。</li>
 
+                      </ul>
 
+                    </div>
 
+
 
+                    <div
 
+                      class="my-4 d-flex flex-column flex-lg-row align-items-center justify-content-center gap-3 text-center">
 
+                      <img src="/imgs/ai-presenter/YT3.webp" alt="ChoozMo AI 人物影片｜綠幕示意1"
 
+                        class="img-fluid demo-img rounded shadow-sm">
 
+                      <span class="d-block d-lg-none fs-3">⬇️</span>
 
+                      <span class="d-none d-lg-block fs-3">➡️</span>
 
+                      <img src="/imgs/ai-presenter/綠幕主播.webp" alt="ChoozMo AI 人物影片｜綠幕示意2"
 
+                        class="img-fluid demo-img rounded shadow-sm">
 
+                    </div>
 
+
 
+                    <p class="mb-0 text-center">
 
+                      到
 
+                      <a href="https://cloud.choozmo.com/main/make-video" target="_blank" rel="noopener">製作影片頁</a>
 
+                      挑選「主播」與「模板」，即可快速產出符合品牌風格的影片。
 
+                    </p>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </section>
 
+          </div>
 
+
 
+          <!-- 應用實例 -->
 
+          <div id="cases">
 
+            <div class="text-center my-5">
 
+              <p class="kicker mb-2">Case Studies</p>
 
+              <h2 class="fw-bold">應用實例</h2>
 
+            </div>
 
+
 
+            <!-- Case 1 -->
 
+            <div class="row align-items-center g-4 case-block mb-5">
 
+              <div class="col-lg-6 order-2 order-lg-1">
 
+                <div class="case-meta mb-2">
 
+                  <span class="badge rounded-pill text-bg-light border"><i class="bi bi-translate me-1"></i>客語</span>
 
+                  <span class="badge rounded-pill text-bg-light border"><i class="bi bi-cloud-sun me-1"></i>氣象節目</span>
 
+                </div>
 
+                <h3 class="h4 fw-bold mb-3">客家電視台｜AI 主播講天時</h3>
 
+                <p class="mb-2">
 
+                  客家電視台每週推出
 
+                  <a href="https://www.youtube.com/watch?v=IdbJ5ueOME0&list=PL96kIIcXJpMtO2gEqCOkkXLWeUyzetgZN"
 
+                    target="_blank" rel="noopener">【AI 主播講天時】</a>
 
+                  ，由兩位客語 AI 主播輪流主持，以流利客語帶來精準天氣資訊。
 
+                </p>
 
+
 
+                <ul class="my-4">
 
+                  <li>流利客語 × 精準氣象敘事</li>
 
+                  <li>每週定期更新，讓您隨時掌握最新天氣動態</li>
 
+                </ul>
 
+
 
+                <a class="outline-btn"
 
+                  href="https://www.youtube.com/watch?v=IdbJ5ueOME0&list=PL96kIIcXJpMtO2gEqCOkkXLWeUyzetgZN"
 
+                  target="_blank" rel="noopener">
 
+                  <i class="bi bi-box-arrow-up-right"></i> 觀看影片
 
+                </a>
 
+              </div>
 
+              <div class="col-lg-6 order-1 order-lg-2">
 
+                <div class="media-card">
 
+                  <img src="/imgs/ai-presenter/客家2.webp" alt="AI 主播講天時 範例 1" loading="lazy">
 
+                </div>
 
+                <p class="small text-secondary mt-2">▲ AI 主播講天時：節目畫面示意</p>
 
+              </div>
 
+            </div>
 
+
 
+            <!-- Case 2 -->
 
+            <div class="row align-items-center g-4 case-block mb-5">
 
+              <div class="col-lg-6">
 
+                <div class="media-card">
 
+                  <img src="/imgs/dm/ai-virtual-star/aivs08.webp" alt="三立新聞 克隆娟 應用實例" loading="lazy">
 
+                </div>
 
+              </div>
 
+              <div class="col-lg-6">
 
+                <div class="case-meta mb-2">
 
+                  <span class="badge rounded-pill text-bg-light border"><i
 
+                      class="bi bi-broadcast-pin me-1"></i>新聞節目</span>
 
+                  <span class="badge rounded-pill text-bg-light border"><i
 
+                      class="bi bi-link-45deg me-1"></i>AI×真人連線</span>
 
+                </div>
 
+                <h3 class="h4 fw-bold mb-3">三立新聞｜克隆娟</h3>
 
+                <p class="mb-2">
 
+                  為知名主播 <strong>陳斐娟</strong> 打造專屬 AI 造型，並與本人遠端連線共同播報，帶來全新新聞體驗。
 
+                </p>
 
+
 
+                <ul class="my-4">
 
+                  <li>打造專屬 AI 人設，品牌識別度提升</li>
 
+                  <li>AI 與真人同台互動，打造全新節目形式</li>
 
+                </ul>
 
+
 
+                <a class="outline-btn" href="https://youtu.be/CUR_9L8RtDk?si=aCt3Z20u2Co4uAjZ" target="_blank"
 
+                  rel="noopener">
 
+                  <i class="bi bi-box-arrow-up-right"></i> 觀看影片
 
+                </a>
 
+              </div>
 
+            </div>
 
+
 
+            <!-- Case 3 -->
 
+            <div class="row align-items-center g-4 case-block mb-5">
 
+              <div class="col-lg-6 order-2 order-lg-1">
 
+                <div class="case-meta mb-2">
 
+                  <span class="badge rounded-pill text-bg-light border"><i class="bi bi-newspaper me-1"></i>新媒體</span>
 
+                  <span class="badge rounded-pill text-bg-light border"><i class="bi bi-mic me-1"></i>AI 採訪</span>
 
+                  <span class="badge rounded-pill text-bg-light border"><i
 
+                      class="bi bi-filetype-doc me-1"></i>即時新聞稿</span>
 
+                </div>
 
+                <h3 class="h4 fw-bold mb-3">算力傳媒｜AI 品牌助理</h3>
 
+                <p class="mb-2">
 
+                  <a href="https://news.aimedium.org/" target="_blank" rel="noopener">【算力傳媒】</a> 以 AI 助理完成線上採訪，
 
+                  自動彙整重點、產出 AI 主播訪談影片，並可即時生成新聞稿，加速內容上線。
 
+                </p>
 
+
 
+                <ul class="my-4">
 
+                  <li><strong>音檔重點萃取：</strong>AI 自動提取關鍵內容，快速整理重點。</li>
 
+                  <li><strong>AI 主播訪談影片：</strong>生成專業級訪談影片，強化品牌形象。</li>
 
+                  <li><strong>即時新聞稿生成：</strong>採訪後自動生成新聞稿，立即發布。</li>
 
+                </ul>
 
+
 
+                <a class="outline-btn" href="https://news.aimedium.org/" target="_blank" rel="noopener">
 
+                  <i class="bi bi-box-arrow-up-right"></i> 造訪網站
 
+                </a>
 
+              </div>
 
+              <div class="col-lg-6 order-1 order-lg-2">
 
+                <div class="media-card">
 
+                  <img src="/imgs/ai-presenter/YT1.webp" alt="算力傳媒 範例頁" loading="lazy">
 
+                </div>
 
+                <div class="d-flex gap-3 mt-3 flex-wrap justify-content-center justify-content-lg-start">
 
+                  <div class="media-card">
 
+                    <img src="/imgs/ai-presenter/算力首頁.webp" alt="算力傳媒 首頁" loading="lazy">
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-lg-4 pe-lg-5">
 
+          <div id="form" class="mt-0">
 
+            {{ partial "form-main.html" . }}
 
+
 
+            {{ partial "founder-cta.html" . }}
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </section>
 
+
 
+  <!-- 影片案例 -->
 
+  <section class="py-5 bg-light">
 
+    <div class="container">
 
+      <div class="text-center mb-4">
 
+        <p class="kicker mb-2">Showcase</p>
 
+        <h2 class="fw-bold">其他 AI 影片案例</h2>
 
+      </div>
 
+
 
+      <div class="row g-4">
 
+        <div class="col-md-4">
 
+          <div class="media-card">
 
+            <video src="/img/aicustomer/LIHO-DEMO.mp4" autoplay muted playsinline loop></video>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-md-4">
 
+          <div class="ratio ratio-16x9">
 
+            <iframe src="https://www.youtube.com/embed/TzKQGBDmnXg?autoplay=1&mute=1" title="YouTube video player"
 
+              loading="lazy"
 
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 
+              allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-md-4">
 
+          <div class="ratio ratio-16x9">
 
+            <iframe src="https://www.youtube.com/embed/1iCJZFJva2c?autoplay=1&mute=1" title="YouTube video player"
 
+              loading="lazy"
 
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 
+              allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-md-4">
 
+          <div class="media-card">
 
+            <video src="/img/aicustomer/客家整年合輯.mp4" autoplay muted playsinline loop></video>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-md-4">
 
+          <div class="ratio ratio-16x9">
 
+            <iframe src="https://www.youtube.com/embed/95gce-Upi_A?autoplay=1&mute=1" title="YouTube video player"
 
+              loading="lazy"
 
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 
+              allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-md-4">
 
+          <div class="ratio ratio-16x9">
 
+            <iframe src="https://www.youtube.com/embed/o2puhV1Gfe4?autoplay=1&mute=1" title="YouTube video player"
 
+              loading="lazy"
 
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 
+              allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </section>
 
+
 
+  <div class="container py-5">
 
+    <!-- FAQ -->
 
+    <div class="line">
 
+      <div class="text-center">
 
+        <p class="kicker mb-2">FAQ</p>
 
+        <h2 class="fw-bold mb-4">常見問題</h2>
 
+      </div>
 
+
 
+      <div class="accordion" id="faq_accordion">
 
+        <!-- <div class="accordion-item">
 
+          <h2 class="accordion-header" id="faq_heading_1">
 
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+              data-bs-target="#faq_collapse_1" aria-expanded="true" aria-controls="faq_collapse_1">
 
+              如何修改 AI 分鏡表內容？
 
+            </button>
 
+          </h2>
 
+          <div id="faq_collapse_1" class="accordion-collapse collapse" aria-labelledby="faq_heading_1"
 
+            data-bs-parent="#faq_accordion">
 
+            <div class="accordion-body">
 
+              AI 分鏡表提供了直觀的編輯功能，您可以輕鬆進入編輯頁面，自行設定大標題、字幕和素材文字內容。此外，素材圖片也可以自由更換，讓您的創作更加靈活。
 
+            </div>
 
+          </div>
 
+        </div> -->
 
+
 
+        <div class="accordion-item">
 
+          <h2 class="accordion-header" id="faq_heading_2">
 
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+              data-bs-target="#faq_collapse_2" aria-expanded="false" aria-controls="faq_collapse_2">
 
+              是否可以上傳自己的圖片或影片素材？
 
+            </button>
 
+          </h2>
 
+          <div id="faq_collapse_2" class="accordion-collapse collapse" aria-labelledby="faq_heading_2"
 
+            data-bs-parent="#faq_accordion">
 
+            <div class="accordion-body">
 
+              當然可以！所有內容皆可隨意編輯，您還能輕鬆上傳個人圖片或影片素材，讓影片更加個性化。
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="accordion-item">
 
+          <h2 class="accordion-header" id="faq_heading_3">
 
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+              data-bs-target="#faq_collapse_3" aria-expanded="false" aria-controls="faq_collapse_3">
 
+              系統是否會自動上字幕？
 
+            </button>
 
+          </h2>
 
+          <div id="faq_collapse_3" class="accordion-collapse collapse" aria-labelledby="faq_heading_3"
 
+            data-bs-parent="#faq_accordion">
 
+            <div class="accordion-body">
 
+              是的，系統具備全自動字幕生成功能，無需手動剪輯字幕，大幅提升製作效率！
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="accordion-item">
 
+          <h2 class="accordion-header" id="faq_heading_4">
 
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+              data-bs-target="#faq_collapse_4" aria-expanded="false" aria-controls="faq_collapse_4">
 
+              如何更換影片背景和主播？
 
+            </button>
 
+          </h2>
 
+          <div id="faq_collapse_4" class="accordion-collapse collapse" aria-labelledby="faq_heading_4"
 
+            data-bs-parent="#faq_accordion">
 
+            <div class="accordion-body">
 
+              透過 SaaS 的
 
+              <a href="https://cloud.choozmo.com/main/make-video" target="_blank" rel="noopener">製作影片頁面</a>，
 
+              您可以自由挑選喜愛的「主播」與「模板」，讓影片風格更加符合需求。
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="accordion-item">
 
+          <h2 class="accordion-header" id="faq_heading_5">
 
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+              data-bs-target="#faq_collapse_5" aria-expanded="false" aria-controls="faq_collapse_5">
 
+              製作影片需要多長時間？
 
+            </button>
 
+          </h2>
 
+          <div id="faq_collapse_5" class="accordion-collapse collapse" aria-labelledby="faq_heading_5"
 
+            data-bs-parent="#faq_accordion">
 
+            <div class="accordion-body">
 
+              影片製作的時間取決於影片長度。舉例來說，一支 30 秒的影片，製作時間約為 10 分鐘，快速又高效！
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="accordion-item">
 
+          <h2 class="accordion-header" id="faq_heading_6">
 
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+              data-bs-target="#faq_collapse_6" aria-expanded="false" aria-controls="faq_collapse_6">
 
+              如何查看完成的影片？
 
+            </button>
 
+          </h2>
 
+          <div id="faq_collapse_6" class="accordion-collapse collapse" aria-labelledby="faq_heading_6"
 
+            data-bs-parent="#faq_accordion">
 
+            <div class="accordion-body">
 
+              透過
 
+              <a href="https://cloud.choozmo.com/main/progress" target="_blank" rel="noopener">影片清單</a>，
 
+              您可以即時查看所有正在製作中的影片以及已完成的影片，並可直接下載成品。
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="accordion-item">
 
+          <h2 class="accordion-header" id="faq_heading_7">
 
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+              data-bs-target="#faq_collapse_7" aria-expanded="false" aria-controls="faq_collapse_7">
 
+              如何付款？是否提供免費試用？
 
+            </button>
 
+          </h2>
 
+          <div id="faq_collapse_7" class="accordion-collapse collapse" aria-labelledby="faq_heading_7"
 
+            data-bs-parent="#faq_accordion">
 
+            <div class="accordion-body">
 
+              我們有提供 SaaS AI 影片製作服務的免費試用方案，您只需連結 Google 帳號，即可立即體驗！若需正式版功能，可直接在
 
+              <a href="https://cloud.choozmo.com/main/dashboard" target="_blank" rel="noopener">首頁</a>
 
+              線上儲值製作秒數，輕鬆升級使用完整功能。
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+    </div>
 
+
 
+    <!-- 使用者義務 / 免責 -->
 
+    <div>
 
+      <div class="text-center my-5">
 
+        <p class="kicker mb-2">Terms & Policy</p>
 
+        <h2 class="fw-bold">使用者義務與免責聲明</h2>
 
+      </div>
 
+
 
+      <div class="accordion my-5 pb-4" id="disclaimer">
 
+        <div class="accordion-item">
 
+          <h2 class="accordion-header" id="disclaimerHeading_1">
 
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+              data-bs-target="#disclaimerCollapse_1" aria-expanded="false" aria-controls="disclaimerCollapse_1">
 
+              使用者的守法義務
 
+            </button>
 
+          </h2>
 
+        </div>
 
+        <div id="disclaimerCollapse_1" class="accordion-collapse collapse" aria-labelledby="disclaimerHeading_1"
 
+          data-bs-parent="#disclaimer">
 
+          <div class="accordion-body">
 
+            <section class="terms-content">
 
+              <p>
 
+                您承諾絕不為任何非法目的或以任何非法方式使用本服務，並承諾遵守中華民國相關法規及一切使用網際網路之國際慣例。您若係中華民國以外之使用者，並同意遵守所屬國家或地域之法令。您同意並保證不得利用本服務從事侵害他人權益或違法之行為，包括但不限於：
 
+              </p>
 
+              <ul>
 
+                <li>上載、張貼、公布或傳送任何誹謗、侮辱、具威脅性、攻擊性、不雅、猥褻、不實、違反公共秩序或善良風俗或其他不法之文字、圖片或任何形式的檔案於本服務上</li>
 
+                <li>侵害他人名譽、隱私權、營業秘密、商標權、著作權、專利權、其他智慧財產權及其他權利</li>
 
+                <li>違反依法律或契約所應負之保密義務</li>
 
+                <li>冒用他人名義使用本服務</li>
 
+              </ul>
 
+            </section>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="accordion-item">
 
+          <h2 class="accordion-header" id="disclaimerheading_2">
 
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+              data-bs-target="#disclaimerCollapse_2" aria-expanded="false" aria-controls="disclaimerCollapse_2">
 
+              免責聲明
 
+            </button>
 
+          </h2>
 
+        </div>
 
+        <div id="disclaimerCollapse_2" class="accordion-collapse collapse" aria-labelledby="disclaimerheading_2"
 
+          data-bs-parent="#disclaimer">
 
+          <div class="accordion-body">
 
+            <section class="terms-content">
 
+              <p>
 
+                您明確了解並同意：ChoozMo
 
+                對本服務不提供任何明示或默示的擔保，包含但不限於權利完整、商業適售性、特定目的之適用性及未侵害他人權利。本服務乃依其「現狀」及「提供使用時」之基礎提供，您使用本服務時，須自行承擔相關風險。ChoozMo
 
+                不保證以下事項：
 
+              </p>
 
+              <ul>
 
+                <li>本服務將符合您的需求</li>
 
+                <li>本服務不受干擾、及時提供、安全可靠或無錯誤</li>
 
+                <li>由本服務之使用而取得之結果為正確或可靠</li>
 
+              </ul>
 
+              <p>是否經由本服務之使用下載或取得任何資料應由您自行考量且自負風險，並拋棄因前開任何資料之下載而導致您電腦系統、網路存取、下載或播放設備之任何損壞或資料流失，對 ChoozMo
 
+                提出任何請求或採取法律行動，您應自負完全責任。</p>
 
+            </section>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+  {{ partial "footer.html" . }}
 
+
 
+  <script>
 
+    const yEl = document.getElementById('y');
 
+    if (yEl) yEl.textContent = new Date().getFullYear();
 
+  </script>
 
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 
+</body>
 
+
 
+</html>

+ 3 - 3
static/css/custom.css
Vizualizați fișierul 

@@ -1728,13 +1728,13 @@ td {
 
   color: white;
 
   color: white;
 
 }
 
 }
 
 
 
-.table {
 
+/* .table {
 
   display: flex;
 
   display: flex;
 
-  /* box-shadow: 0 0 5px 1px rgb(197, 197, 197); */
 
+  box-shadow: 0 0 5px 1px rgb(197, 197, 197);
 
   border-radius: 15px;
 
   border-radius: 15px;
 
   align-items: center;
 
   align-items: center;
 
   height: 280px;
 
   height: 280px;
 
-}
 
+} */
 
 
 
 .table .column {
 
 .table .column {
 
   min-height: 280px;
 
   min-height: 280px;

+ 251 - 0
static/css/service.css
Vizualizați fișierul 

@@ -0,0 +1,251 @@
 
+@charset "UTF-8";
 
+/* =========================
 
+   Service Pages – Shared Styles
 
+   ========================= */
 
+/* Design tokens */
 
+:root {
 
+  --brand: #ea5413;
 
+  --brand-dark: #c43e00;
 
+  --brand-light: #fff3ed;
 
+  --gray-border: #e5e7eb;
 
+  --text-dark: #0b1120;
 
+  --text-secondary: #555;
 
+}
 
+
 
+/* Base */
 
+body {
 
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
+  color: #0b1120;
 
+  background-color: #fff;
 
+}
 
+
 
+a {
 
+  color: #ea5413;
 
+  text-decoration: none;
 
+}
 
+a:hover {
 
+  color: #c43e00;
 
+}
 
+
 
+/* Utilities */
 
+.text-primary {
 
+  color: #ea5413 !important;
 
+}
 
+
 
+.shadow-soft {
 
+  box-shadow: 0 8px 30px rgba(234, 84, 19, 0.15);
 
+}
 
+
 
+.kicker {
 
+  letter-spacing: 0.12em;
 
+  text-transform: uppercase;
 
+  font-weight: 700;
 
+  color: #c43e00;
 
+}
 
+
 
+.hero {
 
+  background: radial-gradient(1200px 520px at 15% -10%, rgba(234, 84, 19, 0.18), transparent), radial-gradient(800px 420px at 100% 0%, rgba(234, 84, 19, 0.1), transparent), linear-gradient(180deg, #fffdfc, #fff7f3);
 
+  border-bottom: 1px solid #e5e7eb;
 
+}
 
+
 
+.line {
 
+  border-bottom: 2px solid #fff3ed;
 
+  padding-bottom: 5rem;
 
+  margin-bottom: 5rem;
 
+}
 
+
 
+.link-btn {
 
+  display: inline-flex;
 
+  align-items: center;
 
+  gap: 0.5rem;
 
+  background: #ea5413;
 
+  color: #fff;
 
+  padding: 0.9rem 1.2rem;
 
+  border-radius: 0.8rem;
 
+  text-decoration: none;
 
+  transition: all 0.2s ease-in-out;
 
+  font-weight: 600;
 
+  box-shadow: 0 3px 8px rgba(234, 84, 19, 0.2);
 
+}
 
+.link-btn:hover {
 
+  background: #c43e00;
 
+  color: #fff;
 
+  transform: translateY(-1px);
 
+  box-shadow: 0 6px 14px rgba(196, 62, 0, 0.25);
 
+}
 
+
 
+.outline-btn {
 
+  display: inline-flex;
 
+  align-items: center;
 
+  gap: 0.5rem;
 
+  border: 2px solid #ea5413;
 
+  color: #ea5413;
 
+  padding: 0.8rem 1.2rem;
 
+  border-radius: 0.8rem;
 
+  font-weight: 600;
 
+  background: transparent;
 
+  text-decoration: none;
 
+  transition: all 0.2s ease-in-out;
 
+}
 
+.outline-btn:hover {
 
+  background: #ea5413;
 
+  color: #fff;
 
+  transform: translateY(-1px);
 
+}
 
+
 
+.badge-soft {
 
+  background: rgba(234, 84, 19, 0.1);
 
+  color: #ea5413;
 
+  border: 1px solid rgba(234, 84, 19, 0.2);
 
+  font-weight: 600;
 
+}
 
+
 
+.feature-card {
 
+  border: 1px solid #e5e7eb;
 
+  border-radius: 16px;
 
+  padding: 20px;
 
+  background: #fff;
 
+  height: 100%;
 
+  transition: all 0.25s ease;
 
+  overflow: hidden;
 
+  /* 防止內容超出邊框 */
 
+}
 
+.feature-card:hover {
 
+  border-color: #ea5413;
 
+  box-shadow: 0 6px 20px rgba(234, 84, 19, 0.15);
 
+}
 
+.feature-card h5 {
 
+  background: #fff3ed;
 
+  color: #c43e00;
 
+  text-align: center;
 
+  padding: 0.75rem;
 
+  border-radius: 10px;
 
+  font-weight: 700;
 
+  font-size: 1.1rem;
 
+  margin-bottom: 1rem;
 
+  line-height: 1.5;
 
+}
 
+.feature-card h5 i {
 
+  color: #ea5413;
 
+}
 
+.feature-card img.demo-img {
 
+  max-width: 100%;
 
+  height: auto;
 
+  -o-object-fit: contain;
 
+     object-fit: contain;
 
+  display: block;
 
+  border-radius: 12px;
 
+}
 
+@media (min-width: 992px) {
 
+  .feature-card img.demo-img {
 
+    max-width: 45%;
 
+  }
 
+}
 
+
 
+.media-card img,
 
+.media-card video {
 
+  border-radius: 14px;
 
+  width: 100%;
 
+  height: auto;
 
+}
 
+
 
+.accordion-button {
 
+  color: #c43e00;
 
+  background-color: #fff;
 
+  font-weight: 600;
 
+}
 
+.accordion-button:not(.collapsed) {
 
+  color: #ea5413;
 
+  background-color: #fff3ed;
 
+  box-shadow: inset 0 -1px 0 rgba(234, 84, 19, 0.1);
 
+}
 
+.accordion-button:not(.collapsed)::after {
 
+  /* 若要跟隨品牌色動態變更，可改成以 SCSS 產圖或使用 mask + background-color 技法。
 
+     這裡先沿用原本 data-uri（#ea5413）。*/
 
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ea5413'%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");
 
+}
 
+.accordion-button:focus {
 
+  box-shadow: 0 0 0 0.2rem rgba(234, 84, 19, 0.25);
 
+}
 
+
 
+.ratio iframe {
 
+  border: 1px solid #e5e7eb;
 
+  border-radius: 12px;
 
+}
 
+
 
+table {
 
+  width: 100%;
 
+  border-collapse: separate;
 
+  border-spacing: 0;
 
+}
 
+table th,
 
+table td {
 
+  border: 1px solid #e5e7eb;
 
+  padding: 1rem;
 
+  vertical-align: top;
 
+}
 
+table thead th {
 
+  background: #fff3ed;
 
+  color: #0b1120;
 
+  font-weight: 700;
 
+  text-align: center;
 
+  border-bottom: none;
 
+}
 
+table tbody td p {
 
+  margin-bottom: 0.5rem;
 
+}
 
+table tbody ul {
 
+  padding-left: 1.1rem;
 
+  margin-bottom: 0;
 
+}
 
+
 
+.case-block {
 
+  position: relative;
 
+  padding-left: 0.25rem;
 
+}
 
+@media (min-width: 992px) {
 
+  .case-block {
 
+    padding-left: 0.75rem;
 
+  }
 
+  .case-block::before {
 
+    content: "";
 
+    position: absolute;
 
+    left: -2px;
 
+    top: 8px;
 
+    bottom: 8px;
 
+    width: 4px;
 
+    background: linear-gradient(180deg, #ea5413, #c43e00);
 
+    border-radius: 4px;
 
+    opacity: 0.15;
 
+  }
 
+}
 
+.case-block .media-card {
 
+  border-radius: 14px;
 
+}
 
+.case-block .media-card img {
 
+  display: block;
 
+  width: 100%;
 
+  height: auto;
 
+  border-radius: 12px;
 
+}
 
+.case-block .outline-btn {
 
+  margin-top: 0.25rem;
 
+}
 
+
 
+.case-meta .badge {
 
+  background: #fff3ed !important;
 
+  color: #c43e00 !important;
 
+  border: 1px solid rgba(234, 84, 19, 0.25) !important;
 
+  font-weight: 600;
 
+}
 
+
 
+.title {
 
+  border-bottom: 2px solid #fff3ed;
 
+}
 
+
 
+.cta-band {
 
+  background: linear-gradient(135deg, #ea5413, #c43e00);
 
+  color: #fff;
 
+  border-radius: 20px;
 
+  box-shadow: 0 8px 25px rgba(234, 84, 19, 0.25);
 
+}/*# sourceMappingURL=service.css.map */

Fișier diff suprimat deoarece este prea mare
+ 0 - 0
static/css/service.css.map


+ 291 - 0
static/css/service.scss
Vizualizați fișierul 

@@ -0,0 +1,291 @@
 
+/* =========================
 
+   Service Pages – Shared Styles
 
+   ========================= */
 
+
 
+/* Design tokens */
 
+$brand: #ea5413;
 
+$brand-dark: #c43e00;
 
+$brand-light: #fff3ed;
 
+$gray-border: #e5e7eb;
 
+$text-dark: #0b1120;
 
+$text-secondary: #555;
 
+
 
+:root {
 
+  --brand: #{$brand};
 
+  --brand-dark: #{$brand-dark};
 
+  --brand-light: #{$brand-light};
 
+  --gray-border: #{$gray-border};
 
+  --text-dark: #{$text-dark};
 
+  --text-secondary: #{$text-secondary};
 
+}
 
+
 
+/* Base */
 
+body {
 
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
+  color: $text-dark;
 
+  background-color: #fff;
 
+}
 
+
 
+a {
 
+  color: $brand;
 
+  text-decoration: none;
 
+
 
+  &:hover {
 
+    color: $brand-dark;
 
+  }
 
+}
 
+
 
+/* Utilities */
 
+.text-primary {
 
+  color: $brand !important;
 
+}
 
+
 
+.shadow-soft {
 
+  box-shadow: 0 8px 30px rgba($brand, 0.15);
 
+}
 
+
 
+.kicker {
 
+  letter-spacing: .12em;
 
+  text-transform: uppercase;
 
+  font-weight: 700;
 
+  color: $brand-dark;
 
+}
 
+
 
+.hero {
 
+  background:
 
+    radial-gradient(1200px 520px at 15% -10%, rgba($brand, 0.18), transparent),
 
+    radial-gradient(800px 420px at 100% 0%, rgba($brand, 0.1), transparent),
 
+    linear-gradient(180deg, #fffdfc, #fff7f3);
 
+  border-bottom: 1px solid $gray-border;
 
+}
 
+
 
+.line {
 
+  border-bottom: 2px solid $brand-light;
 
+  padding-bottom: 5rem;
 
+  margin-bottom: 5rem;
 
+}
 
+
 
+.link-btn {
 
+  display: inline-flex;
 
+  align-items: center;
 
+  gap: .5rem;
 
+  background: $brand;
 
+  color: #fff;
 
+  padding: .9rem 1.2rem;
 
+  border-radius: .8rem;
 
+  text-decoration: none;
 
+  transition: all .2s ease-in-out;
 
+  font-weight: 600;
 
+  box-shadow: 0 3px 8px rgba($brand, 0.2);
 
+
 
+  &:hover {
 
+    background: $brand-dark;
 
+    color: #fff;
 
+    transform: translateY(-1px);
 
+    box-shadow: 0 6px 14px rgba($brand-dark, 0.25);
 
+  }
 
+}
 
+
 
+.outline-btn {
 
+  display: inline-flex;
 
+  align-items: center;
 
+  gap: .5rem;
 
+  border: 2px solid $brand;
 
+  color: $brand;
 
+  padding: .8rem 1.2rem;
 
+  border-radius: .8rem;
 
+  font-weight: 600;
 
+  background: transparent;
 
+  text-decoration: none;
 
+  transition: all .2s ease-in-out;
 
+
 
+  &:hover {
 
+    background: $brand;
 
+    color: #fff;
 
+    transform: translateY(-1px);
 
+  }
 
+}
 
+
 
+.badge-soft {
 
+  background: rgba($brand, 0.1);
 
+  color: $brand;
 
+  border: 1px solid rgba($brand, 0.2);
 
+  font-weight: 600;
 
+}
 
+
 
+.feature-card {
 
+  border: 1px solid $gray-border;
 
+  border-radius: 16px;
 
+  padding: 20px;
 
+  background: #fff;
 
+  height: 100%;
 
+  transition: all .25s ease;
 
+  overflow: hidden;
 
+  /* 防止內容超出邊框 */
 
+
 
+  &:hover {
 
+    border-color: $brand;
 
+    box-shadow: 0 6px 20px rgba($brand, 0.15);
 
+  }
 
+
 
+  h5 {
 
+    background: $brand-light;
 
+    color: $brand-dark;
 
+    text-align: center;
 
+    padding: 0.75rem;
 
+    border-radius: 10px;
 
+    font-weight: 700;
 
+    font-size: 1.1rem;
 
+    margin-bottom: 1rem;
 
+    line-height: 1.5;
 
+
 
+    i {
 
+      color: $brand;
 
+    }
 
+  }
 
+
 
+  img.demo-img {
 
+    max-width: 100%;
 
+    height: auto;
 
+    object-fit: contain;
 
+    display: block;
 
+    border-radius: 12px;
 
+  }
 
+
 
+  @media (min-width: 992px) {
 
+    img.demo-img {
 
+      max-width: 45%;
 
+    }
 
+  }
 
+}
 
+
 
+.media-card {
 
+
 
+  img,
 
+  video {
 
+    border-radius: 14px;
 
+    width: 100%;
 
+    height: auto;
 
+  }
 
+}
 
+
 
+.accordion-button {
 
+  color: $brand-dark;
 
+  background-color: #fff;
 
+  font-weight: 600;
 
+
 
+  &:not(.collapsed) {
 
+    color: $brand;
 
+    background-color: $brand-light;
 
+    box-shadow: inset 0 -1px 0 rgba($brand, 0.1);
 
+
 
+    &::after {
 
+      /* 若要跟隨品牌色動態變更，可改成以 SCSS 產圖或使用 mask + background-color 技法。
 
+         這裡先沿用原本 data-uri（#ea5413）。*/
 
+      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ea5413'%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");
 
+    }
 
+  }
 
+
 
+  &:focus {
 
+    box-shadow: 0 0 0 .2rem rgba($brand, 0.25);
 
+  }
 
+}
 
+
 
+.ratio {
 
+  iframe {
 
+    border: 1px solid $gray-border;
 
+    border-radius: 12px;
 
+  }
 
+}
 
+
 
+table {
 
+  width: 100%;
 
+  border-collapse: separate;
 
+  border-spacing: 0;
 
+
 
+  th,
 
+  td {
 
+    border: 1px solid $gray-border;
 
+    padding: 1rem;
 
+    vertical-align: top;
 
+  }
 
+
 
+  thead {
 
+    th {
 
+      background: $brand-light;
 
+      color: $text-dark;
 
+      font-weight: 700;
 
+      text-align: center;
 
+      border-bottom: none;
 
+    }
 
+  }
 
+
 
+  tbody {
 
+    td {
 
+      p {
 
+        margin-bottom: .5rem;
 
+      }
 
+    }
 
+
 
+    ul {
 
+      padding-left: 1.1rem;
 
+      margin-bottom: 0;
 
+    }
 
+  }
 
+}
 
+
 
+.case-block {
 
+  position: relative;
 
+  padding-left: 0.25rem;
 
+
 
+  @media (min-width: 992px) {
 
+    padding-left: .75rem;
 
+
 
+    &::before {
 
+      content: "";
 
+      position: absolute;
 
+      left: -2px;
 
+      top: 8px;
 
+      bottom: 8px;
 
+      width: 4px;
 
+      background: linear-gradient(180deg, $brand, $brand-dark);
 
+      border-radius: 4px;
 
+      opacity: .15;
 
+    }
 
+  }
 
+
 
+  .media-card {
 
+    border-radius: 14px;
 
+  }
 
+
 
+  .media-card img {
 
+    display: block;
 
+    width: 100%;
 
+    height: auto;
 
+    border-radius: 12px;
 
+  }
 
+
 
+  .outline-btn {
 
+    margin-top: .25rem;
 
+  }
 
+}
 
+
 
+.case-meta {
 
+  .badge {
 
+    background: $brand-light !important;
 
+    color: $brand-dark !important;
 
+    border: 1px solid rgba($brand, .25) !important;
 
+    font-weight: 600;
 
+  }
 
+}
 
+
 
+.title {
 
+  border-bottom: 2px solid $brand-light;
 
+}
 
+
 
+.cta-band {
 
+  background: linear-gradient(135deg, $brand, $brand-dark);
 
+  color: #fff;
 
+  border-radius: 20px;
 
+  box-shadow: 0 8px 25px rgba($brand, 0.25);
 
+}

BIN
static/imgs/ai-presenter/change_outfit.webp
Vizualizați fișierul


BIN
static/imgs/ai-presenter/chibi_1.webp
Vizualizați fișierul


BIN
static/imgs/ai-presenter/chibi_2.webp
Vizualizați fișierul


BIN
static/imgs/ai-presenter/cover_1.webp
Vizualizați fișierul


BIN
static/imgs/ai-presenter/demo.webp
Vizualizați fișierul


BIN
static/imgs/ai-presenter/img121.webp
Vizualizați fișierul


BIN
static/imgs/ai-presenter/img122.webp
Vizualizați fișierul


BIN
static/imgs/ai-presenter/img125.webp
Vizualizați fișierul


+ 34 - 18
webSite/config.toml
Vizualizați fișierul 

@@ -66,11 +66,27 @@ page = ["HTML"]
 
     weight = 4
 
     weight = 4
 
     params = { name_en = "Serve" }
 
     params = { name_en = "Serve" }
 
 
 
+[[menu.main]]
 
+    identifier="ai-video-maker"
 
+    name = "AI 影片製作"
 
+    url = "/ai-video-maker/dm/"
 
+    weight = 1
 
+    parent = "home"
 
+    params = { name_en = "AI Video Production" }
 
+
 
+[[menu.main]]
 
+    identifier="saas-ai-video-maker"
 
+    name = "AI 影片 SaaS"
 
+    url = "/saas-ai-video-maker/dm/"
 
+    weight = 2
 
+    parent = "home"
 
+    params = { name_en = "AI Video SaaS Platform" }
 
+
 
 [[menu.main]]
 
 [[menu.main]]
 
     identifier="genseo"
 
     identifier="genseo"
 
     name = "算力 SEO"
 
     name = "算力 SEO"
 
     url = "/genseo/"
 
     url = "/genseo/"
 
-    weight = 1
 
+    weight = 3
 
     parent = "home"
 
     parent = "home"
 
     params = { name_en = "Gen SEO" }
 
     params = { name_en = "Gen SEO" }
 
 
 
@@ -78,7 +94,7 @@ page = ["HTML"]
 
     identifier="agentic-web"
 
     identifier="agentic-web"
 
     name = "企業 Agentic Web 建置"
 
     name = "企業 Agentic Web 建置"
 
     url = "/agentic-web/dm/"
 
     url = "/agentic-web/dm/"
 
-    weight = 2
 
+    weight = 4
 
     parent = "home"
 
     parent = "home"
 
     params = { name_en = "Agentic Web" }
 
     params = { name_en = "Agentic Web" }
 
 
 
@@ -86,7 +102,7 @@ page = ["HTML"]
 
     identifier="free-pr-service"
 
     identifier="free-pr-service"
 
     name = "新聞發布服務"
 
     name = "新聞發布服務"
 
     url = "/free-pr-service/dm/"
 
     url = "/free-pr-service/dm/"
 
-    weight = 3
 
+    weight = 5
 
     parent = "home"
 
     parent = "home"
 
     params = { name_en = "Free PR Service" }
 
     params = { name_en = "Free PR Service" }
 
 
 
@@ -94,7 +110,7 @@ page = ["HTML"]
 
     identifier="global-yt"
 
     identifier="global-yt"
 
     name = "全球 YT 推廣服務"
 
     name = "全球 YT 推廣服務"
 
     url = "/global-yt/dm/"
 
     url = "/global-yt/dm/"
 
-    weight = 4
 
+    weight = 6
 
     parent = "home"
 
     parent = "home"
 
     params = { name_en = "Global YT" }
 
     params = { name_en = "Global YT" }
 
 
 
@@ -102,7 +118,7 @@ page = ["HTML"]
 
     identifier="video-editing"
 
     identifier="video-editing"
 
     name = "影片剪輯服務"
 
     name = "影片剪輯服務"
 
     url = "/video-editing/dm/"
 
     url = "/video-editing/dm/"
 
-    weight = 5
 
+    weight = 7
 
     parent = "home"
 
     parent = "home"
 
     params = { name_en = "Video Editing" }
 
     params = { name_en = "Video Editing" }
 
 
 
@@ -110,7 +126,7 @@ page = ["HTML"]
 
     identifier="ai-transform-video"
 
     identifier="ai-transform-video"
 
     name = "現有影片 AI 化"
 
     name = "現有影片 AI 化"
 
     url = "/ai-transform-video/dm/"
 
     url = "/ai-transform-video/dm/"
 
-    weight = 6
 
+    weight = 8
 
     parent = "home"
 
     parent = "home"
 
     params = { name_en = "AI Transform Video" }
 
     params = { name_en = "AI Transform Video" }
 
 
 
@@ -118,14 +134,14 @@ page = ["HTML"]
 
 #    identifier="seo-search"
 
 #    identifier="seo-search"
 
 #    name = "AI 記者"
 
 #    name = "AI 記者"
 
 #    url = "/ai-copywriter/dm/"
 
 #    url = "/ai-copywriter/dm/"
 
-#    weight = 4
 
+#    weight = 9
 
 #    parent = "home"
 
 #    parent = "home"
 
 
 
 [[menu.main]]
 
 [[menu.main]]
 
     identifier="seo-image"
 
     identifier="seo-image"
 
     name = "AI 平衡報導"
 
     name = "AI 平衡報導"
 
     url = "/ai-balanced-news-reporting/"
 
     url = "/ai-balanced-news-reporting/"
 
-    weight = 7
 
+    weight = 10
 
     parent = "home"
 
     parent = "home"
 
     params = { name_en = "AI Balanced News Reporting" }
 
     params = { name_en = "AI Balanced News Reporting" }
 
 
 
@@ -133,7 +149,7 @@ page = ["HTML"]
 
     identifier="ad-operation"
 
     identifier="ad-operation"
 
     name = "AI 廣告投放"
 
     name = "AI 廣告投放"
 
     url = "/ad-operation/dm/"
 
     url = "/ad-operation/dm/"
 
-    weight = 8
 
+    weight = 11
 
     parent = "home"
 
     parent = "home"
 
     params = { name_en = "AD Operation" }
 
     params = { name_en = "AD Operation" }
 
 
 
@@ -141,7 +157,7 @@ page = ["HTML"]
 
 #    identifier="youtube-views-zh"
 
 #    identifier="youtube-views-zh"
 
 #    name = "影音流量推手"
 
 #    name = "影音流量推手"
 
 #    url = "/youtube-views-zh/dm/"
 
 #    url = "/youtube-views-zh/dm/"
 
-#    weight = 9
 
+#    weight = 12
 
 #    parent = "home"
 
 #    parent = "home"
 
 #    params = { name_en = "YouTube Views" }
 
 #    params = { name_en = "YouTube Views" }
 
 
 
@@ -149,7 +165,7 @@ page = ["HTML"]
 
     identifier="bigdata"
 
     identifier="bigdata"
 
     name = "大數據分析"
 
     name = "大數據分析"
 
     url = "/bigdata/dm/"
 
     url = "/bigdata/dm/"
 
-    weight = 10
 
+    weight = 13
 
     parent = "home"
 
     parent = "home"
 
     params = { name_en = "Big Data" }
 
     params = { name_en = "Big Data" }
 
 
 
@@ -157,7 +173,7 @@ page = ["HTML"]
 
     identifier="crawler"
 
     identifier="crawler"
 
     name = "資訊爬蟲"
 
     name = "資訊爬蟲"
 
     url = "/crawler/dm/"
 
     url = "/crawler/dm/"
 
-    weight = 11
 
+    weight = 14
 
     parent = "home"
 
     parent = "home"
 
     params = { name_en = "Crawler" }
 
     params = { name_en = "Crawler" }
 
 
 
@@ -165,7 +181,7 @@ page = ["HTML"]
 
     identifier="research"
 
     identifier="research"
 
     name = "企業系統研發委外"
 
     name = "企業系統研發委外"
 
     url = "/research/dm/"
 
     url = "/research/dm/"
 
-    weight = 12
 
+    weight = 15
 
     parent = "home"
 
     parent = "home"
 
     params = { name_en = "Research" }
 
     params = { name_en = "Research" }
 
     
     
@@ -173,21 +189,21 @@ page = ["HTML"]
 
 #    identifier="video-making"
 
 #    identifier="video-making"
 
 #    name = "影片製作服務"
 
 #    name = "影片製作服務"
 
 #    url = "/video-making/dm/"
 
 #    url = "/video-making/dm/"
 
-#    weight = 11
 
+#    weight = 16
 
 #    parent = "home"
 
 #    parent = "home"
 
 
 
 #[[menu.main]]
 
 #[[menu.main]]
 
 #    identifier="global-expo-promotion"
 
 #    identifier="global-expo-promotion"
 
 #    name = "新聞媒體發布服務"
 
 #    name = "新聞媒體發布服務"
 
 #    url = "/global-expo-promotion"
 
 #    url = "/global-expo-promotion"
 
-#    weight = 12
 
+#    weight = 17
 
 #    parent = "home"
 
 #    parent = "home"
 
 
 
 [[menu.main]]
 
 [[menu.main]]
 
     identifier="llm-service"
 
     identifier="llm-service"
 
     name = "領域大型語言模型建置服務"
 
     name = "領域大型語言模型建置服務"
 
     url = "/llm-service"
 
     url = "/llm-service"
 
-    weight = 13
 
+    weight = 18
 
     parent = "home"
 
     parent = "home"
 
     params = { name_en = "LLM Service" }
 
     params = { name_en = "LLM Service" }
 
 
 
@@ -195,14 +211,14 @@ page = ["HTML"]
 
 #    identifier="blog-traffic"
 
 #    identifier="blog-traffic"
 
 #    name = "創業家專案"
 
 #    name = "創業家專案"
 
 #    url = "/blog-traffic/dm/"
 
 #    url = "/blog-traffic/dm/"
 
-#    weight = 14
 
+#    weight = 19
 
 #    parent = "home"
 
 #    parent = "home"
 
 
 
 #[[menu.main]]
 
 #[[menu.main]]
 
 #    identifier="genseo"
 
 #    identifier="genseo"
 
 #    name = "GenSEO生成式SEO"
 
 #    name = "GenSEO生成式SEO"
 
 #    url = "/genseo/dm/"
 
 #    url = "/genseo/dm/"
 
-#    weight = 15
 
+#    weight = 20
 
 #    parent = "home"
 
 #    parent = "home"
 
 
 
 [[menu.main]]
 
 [[menu.main]]

+ 8 - 0
webSite/content/ai-video-maker/dm.md
Vizualizați fișierul 

@@ -0,0 +1,8 @@
 
++++
 
+title = "AI 影片製作｜高效率生成多語言 AI 影片，輕鬆打造專屬品牌內容｜ChoozMo 集仕多"
 
+description = "一次拍攝精準建模，AI 對嘴自然；支援多語配音與字幕、自動批次輸出多版本。品牌級客製、電視台等級畫質，適用社群短影音、廣告、教育訓練與國際行銷。"
 
+og_image = "/imgs/ai-presenter/SaaS首圖.webp"
 
+og_alt = "ChoozMo AI 影片製作示意圖"
 
+type = "ai-video-maker"
 
+layout = "single"
 
++++

+ 8 - 0
webSite/content/saas-ai-video-maker/dm.md
Vizualizați fișierul 

@@ -0,0 +1,8 @@
 
++++
 
+title = "SaaS AI 影片製作平台｜輕鬆打造專屬 AI 人物影片｜ChoozMo 集仕多"
 
+description = "輸入文字，即可生成 AI 分鏡表與 AI 人物影片。支援多語、綠幕下載、字幕自動化與模板套用，快速、高效、低成本，適用教育訓練、宣傳行銷、活動開場與新媒體製作。"
 
+og_image = "/imgs/ai-presenter/SaaS首圖.webp"
 
+og_alt = "ChoozMo AI 影片製作示意圖"
 
+type = "saas-ai-video-maker"
 
+layout = "single"
 
++++

+ 1 - 0
webSite/var/www/html/collaboration/index.html
Vizualizați fișierul 

@@ -124,6 +124,7 @@
 
             服務
 
             服務
 
           </a>
 
           </a>
 
           <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
           <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
+            <li><a class="dropdown-item" href="/saas-ai-video-maker/">AI 影片 SaaS</a></li>
 
             <li><a class="dropdown-item" href="/genseo/">算力 SEO</a></li>
 
             <li><a class="dropdown-item" href="/genseo/">算力 SEO</a></li>
 
             <li><a class="dropdown-item" href="/agentic-web/dm/">企業 Agentic Web 建置</a></li>
 
             <li><a class="dropdown-item" href="/agentic-web/dm/">企業 Agentic Web 建置</a></li>
 
             <li><a class="dropdown-item" href="/free-pr-service/dm/">新聞發布服務</a></li>
 
             <li><a class="dropdown-item" href="/free-pr-service/dm/">新聞發布服務</a></li>

+ 1 - 0
webSite/var/www/html/collaboration/info/index.html
Vizualizați fișierul 

@@ -42,6 +42,7 @@
 
             服務
 
             服務
 
           </a>
 
           </a>
 
           <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
           <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
+            <li><a class="dropdown-item" href="/saas-ai-video-maker/">AI 影片 SaaS</a></li>
 
             <li><a class="dropdown-item" href="/genseo/">算力 SEO</a></li>
 
             <li><a class="dropdown-item" href="/genseo/">算力 SEO</a></li>
 
             <li><a class="dropdown-item" href="/agentic-web/dm/">企業 Agentic Web 建置</a></li>
 
             <li><a class="dropdown-item" href="/agentic-web/dm/">企業 Agentic Web 建置</a></li>
 
             <li><a class="dropdown-item" href="/free-pr-service/dm/">新聞發布服務</a></li>
 
             <li><a class="dropdown-item" href="/free-pr-service/dm/">新聞發布服務</a></li>

Unele fișiere nu au fost afișate deoarece prea multe fișiere au fost modificate în acest diff