update

layouts/ai-transform-video/single.html

@@ -134,17 +134,109 @@
           </div>
 
           <div class="col-6">
-            <img src="/imgs/dm/ai-video/SaaS-15.webp" alt="" class="img-fluid">
+            <div class="contrast">
+              <img src="/imgs/dm/ai-video/SaaS-15.webp" alt="" class="img-fluid">
+              <p>原始拍攝影片</p>
+            </div>
           </div>
 
           <div class="col-6">
-            <img src="/imgs/dm/ai-video/SaaS-16.webp" alt="" class="img-fluid">
+            <div class="contrast">
+              <img src="/imgs/dm/ai-video/SaaS-16.webp" alt="" class="img-fluid">
+              <p class="ai">ChoozMo 再製 - 影片AI化</p>
+            </div>
           </div>
         </div>
-      </div>
-    </section>
 
+        <div class="row justify-content-center position-relative user-content">
+          <img src="/imgs/dm/ai-video/SaaS-08.webp" alt="" class="img-fluid bg-img">
+
+          <p class="title">適合誰使用？</p>
+
+          <div class="col-4 mt-5">
+            <div class="item">
+              <h5>企業與品牌</h5>
+              <ul>
+                <li>已經有拍攝幾支影片，<br>但不想再花費更多的拍攝成本與時間嗎？</li>
+                <li>缺乏人力與金費拍攝公司影片？</li>
+                <li>有想使用的代言人、但他擠不出時間拍攝？</li>
+                <li>使用 AI 主播展示產品或是活動宣傳主持、不須進棚即可製作新影片、提升品牌專業感。</li>
+              </ul>
+            </div>
+          </div>
+
+          <div class="col-4 mt-5 ms-4">
+            <div class="item">
+              <h5>內容創作者</h5>
+              <ul>
+                <li>影片缺乏亮點嗎？<br>您也可以為自己製作專屬的AI主播！</li>
+                <li>想增加不同語言，拓展各國群眾嗎？</li>
+                <li>想走在時代的最前端嗎？</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <p class="mt-5 title">常見問答（FAQ）</p>
+
+        <div class="faq-list">
+          <div class="q-item q-1">
+            <img src="/imgs/dm/ai-video/SaaS-19.webp" alt="">
+            <p>這項服務如何將真人轉換為 AI 主播？</p>
+          </div>
+
+          <div class="a-item a-1">
+            <img src="/imgs/dm/ai-video/SaaS-24.webp" alt="">
+            <p>透過Generative AI、Deep Learning以及GPU的能量，ChoozMo SaaS
+              能夠讓使用者用簡單的方法製作影片，大幅節省製作影片時間和費用，並且能夠精準的捕捉真人形象的特徵，生成高擬真的虛擬主播效果。</p>
+          </div>
+
+          <div class="q-item q-2">
+            <img src="/imgs/dm/ai-video/SaaS-21.webp" alt="">
+            <p>我可以選擇哪些風格？</p>
+          </div>
 
+          <div class="a-item a-2">
+            <img src="/imgs/dm/ai-video/SaaS-24.webp" alt="">
+            <p>休閒、正式、專業、創意、超現實…只要您想的到的，都不是問題。</p>
+          </div>
+
+          <div class="q-item q-3">
+            <img src="/imgs/dm/ai-video/SaaS-19.webp" alt="">
+            <p>需要哪些素材來製作 AI 主播？</p>
+          </div>
+
+          <div class="a-item a-2">
+            <img src="/imgs/dm/ai-video/SaaS-24.webp" alt="">
+            <p>您只需提供清晰的真人影片或照片，ChoozMo SaaS 將處理其餘的轉換工作！</p>
+          </div>
+
+          <div class="q-item q-4">
+            <img src="/imgs/dm/ai-video/SaaS-20.webp" alt="">
+            <p>如果我沒有真人影片，但想製作AI主播影片可以嗎？</p>
+          </div>
+
+          <div class="a-item a-2">
+            <img src="/imgs/dm/ai-video/SaaS-24.webp" alt="">
+            <p>沒有問題，您可以提供現有的影片，我們有許多現成的AI主播可供選擇。</p>
+          </div>
+
+          <div class="q-item q-5">
+            <img src="/imgs/dm/ai-video/SaaS-21.webp" alt="">
+            <p>如何開始使用？</p>
+          </div>
+
+          <div class="a-item a-2">
+            <img src="/imgs/dm/ai-video/SaaS-24.webp" alt="">
+            <p>請填寫資料，我們會立即和您聯繫，線上溝通後續製作流程。</p>
+          </div>
+        </div>
+      </div>
+
+      <div id="form">
+        {{ partial "form-main.html" . }}
+      </div>
+    </section>
 
   </main>
 

layouts/partials/components/nav.html

@@ -47,7 +47,7 @@
             中 / en
           </button>
         </li>
-        <li class="me-3 mb-4 mb-xl-0 pb-1 pb-xl-0">
+        <li class="me-2 mb-4 mb-xl-0 pb-1 pb-xl-0">
           <a href="/virtual-host-solution/" class="solution-link">客製化 AI 主持人報價</a>
         </li>
         <li>

static/css/style.scss

@@ -1841,6 +1841,7 @@
 }
 
 @media (max-width: 767px) {
+
   // .header {
   //   height: 70vh;
   // }
@@ -2627,7 +2628,7 @@
   }
 
   .card-content {
-    & > div {
+    &>div {
       display: flex;
       flex-direction: column;
       // border: 2px solid #ffebe2;
@@ -3217,6 +3218,8 @@
 /* ai-video Start */
 
 #ai-video {
+  margin-top: 75px;
+
   h2 {
     padding: 10px;
     font-weight: 600;
@@ -3240,9 +3243,10 @@
   .bg-img {
     width: 100%;
     position: absolute;
-    top: 50px;
+    top: 30px;
     z-index: -1;
-    transform: scale(1.15);
+    opacity: .5;
+    transform: scale(1.5);
   }
 
   .process {
@@ -3269,6 +3273,193 @@
       object-fit: contain;
     }
   }
+
+  .contrast {
+    position: relative;
+
+    p {
+      position: absolute;
+      right: 13vw;
+      top: 3vw;
+      font-size: 20px;
+    }
+
+    .ai {
+      right: 6vw;
+    }
+  }
+
+  .title {
+    font-size: 30px;
+    color: #e95513;
+    text-align: center;
+  }
+
+  .user-content {
+    .bg-img {
+      top: 130px;
+      transform: scaleX(-1) scale(1.5);
+    }
+
+    .item {
+      h5 {
+        padding: 20px;
+        color: #fff;
+        font-size: 24px;
+        text-align: center;
+        font-weight: 600;
+        letter-spacing: 1px;
+        border-radius: 20px 20px 0 0;
+        background-color: #e95513;
+      }
+
+      ul {
+        min-height: 250px;
+        padding: 20px 20px 20px 40px;
+        box-shadow: 3px 3px 5px #909090;
+        border-radius: 0 0 20px 20px;
+        background-color: #fff;
+
+        li {
+          margin-bottom: 15px;
+          color: #910782;
+          font-weight: 600;
+          text-align: justify;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .faq-list {
+    max-width: 700px;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+
+    p {
+      margin: 0;
+      line-height: 1.6;
+      position: absolute;
+    }
+
+    .q-item,
+    .a-item {
+      position: relative;
+      // padding: 20px;
+      // background-size: contain;
+      // background-repeat: no-repeat;
+    }
+
+    .q-item {
+      margin-right: auto;
+      margin-bottom: -35px;
+
+      p {
+        top: 45px;
+        color: #fff;
+      }
+
+      &.q-1 {
+        img {
+          width: 380px;
+          height: 120px;
+        }
+
+        p {
+          left: 60px;
+        }
+      }
+
+      &.q-2 {
+        img {
+          width: 255px;
+          height: 110px;
+        }
+
+        p {
+          left: 50px;
+        }
+      }
+
+      &.q-3 {
+        img {
+          width: 315px;
+          height: 120px;
+        }
+
+        p {
+          left: 50px;
+        }
+      }
+
+      &.q-4 {
+        img {
+          width: 470px;
+          height: 115px;
+        }
+
+        p {
+          left: 40px;
+        }
+      }
+
+      &.q-5 {
+        img {
+          width: 210px;
+          height: 110px;
+        }
+
+        p {
+          left: 50px;
+        }
+      }
+    }
+
+
+    .a-item {
+      display: flex;
+      justify-content: end;
+
+      p {
+        color: #e95513;
+      }
+
+      &.a-1 {
+        img {
+          width: 550px;
+          height: 210px;
+        }
+
+        p {
+          width: 435px;
+          top: 53px;
+          right: 53px;
+        }
+      }
+
+      &.a-2 {
+        img {
+          width: 420px;
+          height: 140px;
+        }
+
+        p {
+          width: 330px;
+          top: 45px;
+          right: 40px;
+        }
+      }
+    }
+  }
+
+  #form {
+    max-width: 900px;
+    margin: 100px auto;
+  }
 }
 
 /* ai-video End */
@@ -3354,7 +3545,7 @@
       filter: invert(33%) sepia(55%) saturate(2232%) hue-rotate(357deg) brightness(102%) contrast(89%);
     }
 
-    .content > div {
+    .content>div {
       margin-bottom: 40px;
       padding: 0px 15px;
       border-left: 1px solid rgba(0, 0, 0, 0.125);
@@ -3756,7 +3947,7 @@
     .row {
       padding: 0 5vw;
 
-      & > div {
+      &>div {
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -4347,15 +4538,15 @@
       }
     }
 
-    .table-striped > tbody > tr:nth-child(odd) > td,
-    .table-striped > tbody > tr:nth-child(odd) > th {
+    .table-striped>tbody>tr:nth-child(odd)>td,
+    .table-striped>tbody>tr:nth-child(odd)>th {
       box-shadow: none;
       background-color: #fdeae1;
       border-bottom-width: 0px !important;
     }
 
-    .table-striped > tbody > tr:nth-child(even) > td,
-    .table-striped > tbody > tr:nth-child(even) > th {
+    .table-striped>tbody>tr:nth-child(even)>td,
+    .table-striped>tbody>tr:nth-child(even)>th {
       border-bottom-width: 0px !important;
     }
 
@@ -5437,4 +5628,4 @@
   .accordion-item:not(:first-of-type) {
     border-top: 1px solid rgba(0, 0, 0, 0.125);
   }
-}
+}