Merge branch 'master' of http://git.choozmo.com:3000/choozmo/AI_Video_LP

layouts/partials/components/nav.html

@@ -47,7 +47,12 @@
             中 / en
           </button>
         </li>
-        <li><a href="https://cloud.choozmo.com/login" target="_blank" class="signin-link">開始製作 AI 主播影片</a></li>
+        <li class="me-3 mb-4 mb-xl-0">
+          <a href="/virtual-host-solution/" class="solution-link">客製化 AI 主持人報價</a>
+        </li>
+        <li>
+          <a href="https://cloud.choozmo.com/login" target="_blank" class="signin-link">開始製作 AI 主播影片</a>
+        </li>
         <!-- <li><a href="https://video.choozmo.com/register.html" class="signup-link">註冊</a></li> -->
       </ul>
       <!-- <ul class="navbar-nav me-auto mb-2 mb-lg-0">

layouts/partials/navbar.html

@@ -15,9 +15,9 @@
         <li class="nav-item">
           <a class="nav-link" href="/ai-presenter/info/">AI 主播</a>
         </li>
-        <li class="nav-item">
+        <!-- <li class="nav-item">
           <a class="nav-link" href="/virtual-host-solution/">AI 主持人方案</a>
-        </li>
+        </li> -->
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
             aria-expanded="false">
@@ -63,7 +63,12 @@
       </ul>
 
       <ul class="nav navbar-nav navbar-right flex-row ms-auto my-3 my-lg-0">
-        <li><a href="https://cloud.choozmo.com/login" target="_blank" class="signin-link">開始製作 AI 主播影片</a></li>
+        <li class="me-3 mb-4 mb-xl-0">
+          <a href="/virtual-host-solution/" class="solution-link">客製化 AI 主持人報價</a>
+        </li>
+        <li>
+          <a href="https://cloud.choozmo.com/login" target="_blank" class="signin-link">開始製作 AI 主播影片</a>
+        </li>
         <!-- <li><a href="https://video.choozmo.com/register.html" class="signup-link">註冊</a></li> -->
       </ul>
     </div>

static/css/style.css

@@ -34,6 +34,24 @@
   background-color: #fff;
   padding: 8px 17px 8px 23px;
 }
+.navbar-nav .solution-link {
+  padding: 8px 18px;
+  text-decoration: none;
+  color: #fff;
+  font-weight: 400;
+  border: 1px solid #ea5413;
+  background-color: #ea5413;
+  border-radius: 3rem;
+  transition: all 0.3s;
+}
+.navbar-nav .solution-link:hover {
+  opacity: 0.8;
+}
+@media (max-width: 1400px) {
+  .navbar-nav .solution-link {
+    font-size: 14px;
+  }
+}
 .navbar-nav .signin-link {
   padding: 8px 18px;
   text-decoration: none;
@@ -42,7 +60,7 @@
   border: 1px solid #ea5413;
   border-radius: 3rem;
 }
-@media (max-width: 1200px) {
+@media (max-width: 1400px) {
   .navbar-nav .signin-link {
     font-size: 14px;
   }
@@ -64,6 +82,17 @@
   opacity: 0.8;
 }
 
+@media (max-width: 1400px) {
+  .navbar {
+    font-size: 14px;
+  }
+}
+@media (max-width: 1200px) {
+  .navbar {
+    font-size: 16px;
+  }
+}
+
 .header {
   margin-top: 70px;
   position: relative;
@@ -4700,7 +4729,7 @@
 }
 .privacy-consent button {
   padding: 7px 30px;
-  display: inline-block;
+  display: inlinsolution-linke-block;
   color: #fff;
   border: none;
   border-radius: 5px;
@@ -4709,4 +4738,41 @@
 }
 .privacy-consent button:hover {
   opacity: 0.8;
+}
+
+.solution-accordion {
+  padding-bottom: 50px;
+}
+.solution-accordion h2 {
+  margin: 0;
+}
+.solution-accordion h2 button {
+  font-weight: bold;
+}
+.solution-accordion ul:first-child {
+  padding-left: 0;
+  list-style: none;
+}
+.solution-accordion li,
+.solution-accordion p {
+  margin-bottom: 10px;
+}
+.solution-accordion .accordion-body {
+  padding: 20px 40px;
+}
+.solution-accordion .accordion-item {
+  margin-bottom: 30px;
+}
+.solution-accordion .accordion-button:not(.collapsed) {
+  color: #000;
+  background-color: transparent !important;
+}
+.solution-accordion .accordion-button:not(.collapsed)::after {
+  filter: invert(32%) sepia(100%) saturate(1158%) hue-rotate(353deg) brightness(101%) contrast(96%);
+}
+.solution-accordion .accordion-button:focus {
+  box-shadow: none;
+}
+.solution-accordion .accordion-item:not(:first-of-type) {
+  border-top: 1px solid rgba(0, 0, 0, 0.125);
 }/*# sourceMappingURL=style.css.map */

static/css/style.scss

@@ -39,6 +39,25 @@
     }
   }
 
+  .solution-link {
+    padding: 8px 18px;
+    text-decoration: none;
+    color: #fff;
+    font-weight: 400;
+    border: 1px solid #ea5413;
+    background-color: #ea5413;
+    border-radius: 3rem;
+    transition: all .3s;
+
+    &:hover {
+      opacity: .8;
+    }
+
+    @media (max-width: 1400px) {
+      font-size: 14px;
+    }
+  }
+
   .signin-link {
     padding: 8px 18px;
     text-decoration: none;
@@ -47,7 +66,7 @@
     border: 1px solid #ea5413;
     border-radius: 3rem;
 
-    @media (max-width: 1200px) {
+    @media (max-width: 1400px) {
       font-size: 14px;
     }
   }
@@ -72,6 +91,16 @@
   }
 }
 
+.navbar {
+  @media (max-width: 1400px) {
+    font-size: 14px;
+  }
+
+  @media (max-width: 1200px) {
+    font-size: 16px;
+  }
+}
+
 .header {
   margin-top: 70px;
   position: relative;
@@ -5166,7 +5195,7 @@
 
   button {
     padding: 7px 30px;
-    display: inline-block;
+    display: inlinsolution-linke-block;
     color: #fff;
     border: none;
     border-radius: 5px;
@@ -5177,4 +5206,51 @@
       opacity: .8;
     }
   }
+}
+
+.solution-accordion {
+  padding-bottom: 50px;
+
+  h2 {
+    margin: 0;
+
+    button {
+      font-weight: bold;
+    }
+  }
+
+  ul:first-child {
+    padding-left: 0;
+    list-style: none;
+  }
+
+  li,
+  p {
+    margin-bottom: 10px;
+  }
+
+  .accordion-body {
+    padding: 20px 40px;
+  }
+
+  .accordion-item {
+    margin-bottom: 30px;
+  }
+
+  .accordion-button:not(.collapsed) {
+    color: #000;
+    background-color: transparent !important;
+
+    &::after {
+      filter: invert(32%) sepia(100%) saturate(1158%) hue-rotate(353deg) brightness(101%) contrast(96%);
+    }
+  }
+
+  .accordion-button:focus {
+    box-shadow: none;
+  }
+
+  .accordion-item:not(:first-of-type) {
+    border-top: 1px solid rgba(0, 0, 0, .125);
+  }
 }

webSite/config.toml

@@ -44,17 +44,11 @@ page = ["HTML"]
     url  = "/ai-presenter/info/"
     weight = 2
 
-[[menu.main]]
-    identifier="AI 主持人方案"
-    name = "AI 主持人方案"
-    url  = "/virtual-host-solution/"
-    weight = 3
-
 [[menu.main]]
     identifier="home"
     name = "服務"
     url  = ""
-    weight = 4
+    weight = 3
 
 [[menu.main]]
     identifier="youtube-views-zh"
@@ -130,25 +124,25 @@ page = ["HTML"]
     identifier="blog"
     name = "部落格"
     url  = "/tags/vtuber/"
-    weight = 5
+    weight = 4
 
 [[menu.main]]
     identifier="main-news"
     name = "最新消息"
     url  = "/main-news/"
-    weight = 6
+    weight = 5
 
 [[menu.main]]
     identifier="聯絡我們"
     name = "聯絡我們"
     url  = "/contact/service/"
-    weight = 7
+    weight = 6
 
 [[menu.main]]
     identifier="關於我們"
     name = "關於我們"
     url  = "/aboutus/info/"
-    weight = 8
+    weight = 7
 
 # Top bar social links menu
 

webSite/content/main-news/virtual-host-solution/index.md

@@ -67,3 +67,96 @@ AI 虛擬人在科技日新月異的今天，已經逐漸走進我們的日常
 華視新聞 2023 亞錦賽宣傳影片
 
 {{< form >}}
+
+<div class="accordion solution-accordion" id="accordionExample">
+  <div class="accordion-item">
+    <h2 class="accordion-header" id="heading_1">
+      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_1" aria-expanded="true" aria-controls="collapse_1">
+        什麼是AI主持人？
+      </button>
+    </h2>
+    <div id="collapse_1" class="accordion-collapse collapse show" aria-labelledby="heading_1" data-bs-parent="#accordionExample">
+      <div class="accordion-body">
+        AI主持人是一種由人工智慧技術創建的虛擬人物，可以負責在不同場合擔任主持人的角色。AI主持人能夠模擬人類的語言和表達能力以及肢體語言，使其能夠有效地進行對話和主持各種活動。
+      </div>
+    </div>
+  </div>
+  <div class="accordion-item">
+    <h2 class="accordion-header" id="heading_2">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_2" aria-expanded="true" aria-controls="collapse_2">
+        AI主持人與真人主持人有什麼不同？
+      </button>
+    </h2>
+    <div id="collapse_2" class="accordion-collapse collapse" aria-labelledby="heading_2" data-bs-parent="#accordionExample">
+      <div class="accordion-body">
+        AI主持人與真人主持人的區別在於，AI主持人與真人主持人相比，它能隨時切換場景、服裝、妝容、語言，以提供全方位的服務，並在不受感情波動或生理限制的情況下保持穩定的表現。
+      </div>
+    </div>
+  </div>
+  <div class="accordion-item">
+    <h2 class="accordion-header" id="heading_3">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_3" aria-expanded="true" aria-controls="collapse_3">
+        集仕多AI主持人的優點有哪些？
+      </button>
+    </h2>
+    <div id="collapse_3" class="accordion-collapse collapse" aria-labelledby="heading_3" data-bs-parent="#accordionExample">
+      <div class="accordion-body">
+        <ul>
+            <li>1. 隨時隨地提供服務：AI主持人可以24小時全天候工作，不受時間及地點的限制，可以應用於企業商用（產品介紹、展覽展示、發表會）、企業娛樂（尾牙主持、春酒主持、年會主持）、教育學程（教學影片）、旅遊指南（導覽解說、觀光宣導）、智慧助手（客服諮詢）等。可以幫助企業提供更高效率的客戶服務，並為使用者提供更好的體驗。</li>
+            <li>2. 多語言和多口音：集仕多 AI 主持人支援 20 種以上語言和多種口音的能力，這樣可以適應不同地區和文化的需求，並且擴大受眾範圍。</li>
+            <li>3. 表演穩定一致：AI 主持人可以確保表演的穩定性和一致性，而不會受到情緒或生理狀態的影響。</li>
+            <li>4. 快速生成造型、情境：集仕多 AI 主持人能夠快速生成前景、背景、燈光效果，最快每小時可算出 10 種不同角色情境。</li>
+            <li>5. 企業級客製化：依照服裝、妝髮造型需求客製人物，依照腳本需求客製配樂、素材樣式，最重要的是不需要支付薪水或投入其他人力成本、服裝費、製作費等。</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div class="accordion-item">
+    <h2 class="accordion-header" id="heading_4">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_4" aria-expanded="true" aria-controls="collapse_4">
+        為什麼需要AI主持人？
+      </button>
+    </h2>
+    <div id="collapse_4" class="accordion-collapse collapse" aria-labelledby="heading_4" data-bs-parent="#accordionExample">
+      <div class="accordion-body">
+       集仕多AI主持人能夠根據客戶需求客製化，提供高擬真的AI主持人；它可不受時間限制，能夠24小時提供服務，確保客戶可以隨時應用，同時降低各項人力成本，減少場地費用、治裝費、製作費。使用集仕多AI主持人，可以選擇真人建模 (擬真外觀、聲音)，來製作逼真的AI人物模型；另外，臉部特徵、服裝、體格、背景等，都可以依據客戶想法打造。
+      </div>
+    </div>
+  </div>
+
+  <div class="accordion-item">
+    <h2 class="accordion-header" id="heading_5">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_5" aria-expanded="true" aria-controls="collapse_5">
+       如何應用AI主持人？
+      </button>
+    </h2>
+    <div id="collapse_5" class="accordion-collapse collapse" aria-labelledby="heading_5" data-bs-parent="#accordionExample">
+      <div class="accordion-body">
+       <ul>
+        <li>
+        <p>1） 企業應用</p>
+        <ul>
+          <li>尾牙活動主持：無論是線上或線下活動，使用AI主持人可以讓觀眾有一個新的活動體驗，讓活動氣氛可以更精采。</li>
+          <li>產品發表會：AI主持人可以用於產品演示和推廣，用以生動的介紹和宣傳產品</li>
+          <li>企業培訓：可在會議中使用虛擬培訓講師，增加互動性和吸引力。</li>
+          <li>AI 主持：於公司內外部宣傳活動，使用AI主持人</li>
+        </ul>
+        </li>
+        <li>
+         <p>2） 新聞媒體領域</p>
+         <ul>
+            <li>虛擬主播：可應用於新聞播報、展演、電視節目、廣告等場合，以提供更具互動性和多樣性的娛樂體驗。</li>
+            <li>影片製作： 使用AI主持人參與影片製作，打造虛擬AI主持人，以降低成本並擴大創作可能性。</li>
+          </ul>
+        </li>
+        <li>
+            <p>3） 教學領域</p>
+            <ul>
+                <li>AI 語言老師：支援20種以上語言，可以用於教育領域、語言課程，提供課程解說、回答問題，以增加教學互動性。</li>
+            </ul>
+        </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>