update css

layouts/ai-presenter/single.html

@@ -21,7 +21,7 @@
   <div class="ai-presenter">
     <div class="container">
       <div class="d-flex flex-column align-items-center">
-
+        <img src="/imgs/ai-presenter/SaaS首圖.webp" alt="ChoozMo AI人物影片｜SaaS首圖">
 
         <h2 class="mt-5 title">
           輸入文字 取得 AI 分鏡表<br>快速製作「AI 人物影片」
@@ -29,9 +29,7 @@
 
         <a href="https://cloud.choozmo.com/main/make-video" class="link-btn" target="_blank">免費開始體驗</a>
 
-        <img src="/imgs/ai-presenter/SaaS首圖.webp" alt="ChoozMo AI人物影片｜SaaS首圖">
-
-        <h4 class="my-4 pt-5 title">
+        <h4 class="my-4 pt-lg-5 title">
           💡 如何從文字生成AI人物影片
         </h4>
 
@@ -58,102 +56,51 @@
 
         <p>ChoozMo 讓影片製作變得簡單高效，省時又省力，讓您專注於創意發揮！</p>
 
-        <a href="https://cloud.choozmo.com/main/generate-zip" class="link-btn" target="_blank">免費開始體驗</a>
+        <img src="/imgs/ai-presenter/AI分鏡表.webp" alt="ChoozMo AI人物影片｜AI分鏡表" class="my-5">
 
-        <img src="/imgs/ai-presenter/AI分鏡表.webp" alt="ChoozMo AI人物影片｜AI分鏡表" class="mb-5">
+        <a href="https://cloud.choozmo.com/main/generate-zip" class="link-btn" target="_blank">免費開始體驗</a>
 
         <h4 class="my-4 pt-5 title">
           💡 看 AI 影片案例
         </h4>
 
-        <!-- 電腦版 -->
-        <table class="d-none d-lg-table">
-          <tbody>
-            <tr>
-              <td>
-                <div class="iframe-box">
-                  <iframe src="https://www.youtube.com/embed/TzKQGBDmnXg?si=i-KbVD-7JlSaIeWS&autoplay=1&mute=1"
-                    title="YouTube video player" frameborder="0"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-                </div>
-              </td>
-              <td>
-                <div class="iframe-box">
-                  <iframe src="https://www.youtube.com/embed/1iCJZFJva2c?si=16RaVI7kdapf8eLG&autoplay=1&mute=1"
-                    title="YouTube video player" frameborder="0"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-                </div>
-              </td>
-              <td>
-                <div class="iframe-box">
-                  <iframe src="https://www.youtube.com/embed/o2puhV1Gfe4?si=QL6QYJEgVDFwO3pw&autoplay=1&mute=1"
-                    title="YouTube video player" frameborder="0"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-                </div>
-              </td>
-              <td>
-                <div class="iframe-box">
-                  <iframe src="https://www.youtube.com/embed/95gce-Upi_A?si=syarZKF-BRWB96Fv&autoplay=1&mute=1"
-                    title="YouTube video player" frameborder="0"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-        <!-- 手機版 -->
-        <table class="d-table d-lg-none">
-          <tbody>
-            <tr>
-              <td>
-                <div class="iframe-box">
-                  <iframe src="https://www.youtube.com/embed/TzKQGBDmnXg?si=i-KbVD-7JlSaIeWS&autoplay=1&mute=1"
-                    title="YouTube video player" frameborder="0"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-                </div>
-              </td>
-            </tr>
+        <div class="row">
+          <div class="col-md-6">
+            <div class="iframe-box">
+              <iframe src="https://www.youtube.com/embed/TzKQGBDmnXg?si=i-KbVD-7JlSaIeWS&autoplay=1&mute=1"
+                title="YouTube video player" frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+            </div>
+          </div>
 
-            <tr>
-              <td>
-                <div class="iframe-box">
-                  <iframe src="https://www.youtube.com/embed/1iCJZFJva2c?si=16RaVI7kdapf8eLG&autoplay=1&mute=1"
-                    title="YouTube video player" frameborder="0"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-                </div>
-              </td>
-            </tr>
+          <div class="col-md-6">
+            <div class="iframe-box">
+              <iframe src="https://www.youtube.com/embed/1iCJZFJva2c?si=16RaVI7kdapf8eLG&autoplay=1&mute=1"
+                title="YouTube video player" frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+            </div>
+          </div>
 
-            <tr>
-              <td>
-                <div class="iframe-box">
-                  <iframe src="https://www.youtube.com/embed/o2puhV1Gfe4?si=QL6QYJEgVDFwO3pw&autoplay=1&mute=1"
-                    title="YouTube video player" frameborder="0"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-                </div>
-              </td>
-            </tr>
+          <div class="col-md-6">
+            <div class="iframe-box">
+              <iframe src="https://www.youtube.com/embed/o2puhV1Gfe4?si=QL6QYJEgVDFwO3pw&autoplay=1&mute=1"
+                title="YouTube video player" frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+            </div>
+          </div>
 
-            <tr>
-              <td>
-                <div class="iframe-box">
-                  <iframe src="https://www.youtube.com/embed/95gce-Upi_A?si=syarZKF-BRWB96Fv&autoplay=1&mute=1"
-                    title="YouTube video player" frameborder="0"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+          <div class="col-md-6">
+            <div class="iframe-box">
+              <iframe src="https://www.youtube.com/embed/95gce-Upi_A?si=syarZKF-BRWB96Fv&autoplay=1&mute=1"
+                title="YouTube video player" frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+            </div>
+          </div>
+        </div>
 
         <h4 class="my-4 pt-5 title">
           💡 為什麼選擇 ChoozMo SaaS AI 影片生成器？
@@ -354,7 +301,7 @@
 
                 <p>透過 AI 影片製作工具，無論是商業用途還是個人創作，都能輕鬆打造專業級內容！</p>
 
-                <div class="my-5 d-flex align-items-center demo-img">
+                <div class="my-5 d-flex flex-column flex-lg-row align-items-center demo-img">
                   <img src="/imgs/ai-presenter/YT3.webp" alt="ChoozMo AI人物影片｜綠幕主播">
                   <p class="mb-0">➡️</p>
                   <img src="/imgs/ai-presenter/綠幕主播.webp" alt="ChoozMo AI人物影片｜綠幕主播">

static/css/style.css

@@ -4260,7 +4260,7 @@
 /* 共用 className End */
 /* ai-presenter Start */
 .ai-presenter {
-  margin-top: 100px;
+  margin-top: 120px;
   overflow: hidden;
   /* 舊版 */
 }
@@ -4347,9 +4347,9 @@
 }
 .ai-presenter .link-btn {
   display: inline-block;
-  padding: 12px 35px;
+  padding: 16px 60px;
   margin: 2rem auto 3rem;
-  font-size: 18px;
+  font-size: 26px;
   font-weight: bold;
   border-radius: 100px;
   text-decoration: none;
@@ -4361,12 +4361,22 @@
   opacity: 0.8;
 }
 .ai-presenter .demo-img img {
-  max-width: 300px;
+  max-width: 30vw;
+}
+@media (max-width: 991px) {
+  .ai-presenter .demo-img img {
+    max-width: 100%;
+  }
 }
 .ai-presenter .demo-img p {
   margin: 0 1rem;
   font-size: 2rem;
 }
+@media (max-width: 991px) {
+  .ai-presenter .demo-img p {
+    transform: rotate(90deg);
+  }
+}
 .ai-presenter table {
   width: 100%;
   border-collapse: collapse;
@@ -4393,18 +4403,14 @@
 }
 .ai-presenter .iframe-box {
   width: 100%;
+  margin-bottom: 15px;
   padding-top: 5px;
   overflow: hidden;
 }
 .ai-presenter .iframe-box iframe {
   width: 100%;
-  height: 100%;
-}
-@media (max-width: 991px) {
-  .ai-presenter .iframe-box iframe {
-    height: auto;
-    aspect-ratio: 16/9;
-  }
+  height: auto;
+  aspect-ratio: 16/9;
 }
 .ai-presenter .terms-content {
   font-weight: bold;

static/css/style.scss

@@ -4696,7 +4696,7 @@
 /* ai-presenter Start */
 
 .ai-presenter {
-  margin-top: 100px;
+  margin-top: 120px;
   overflow: hidden;
 
   a {
@@ -4808,9 +4808,9 @@
 
   .link-btn {
     display: inline-block;
-    padding: 12px 35px;
+    padding: 16px 60px;
     margin: 2rem auto 3rem;
-    font-size: 18px;
+    font-size: 26px;
     font-weight: bold;
     border-radius: 100px;
     text-decoration: none;
@@ -4825,12 +4825,20 @@
 
   .demo-img {
     img {
-      max-width: 300px;
+      max-width: 30vw;
+
+      @media (max-width: 991px) {
+        max-width: 100%;
+      }
     }
 
     p {
       margin: 0 1rem;
       font-size: 2rem;
+
+      @media (max-width: 991px) {
+        transform: rotate(90deg);
+      }
     }
   }
 
@@ -4864,17 +4872,14 @@
 
   .iframe-box {
     width: 100%;
+    margin-bottom: 15px;
     padding-top: 5px;
     overflow: hidden;
 
     iframe {
       width: 100%;
-      height: 100%;
-
-      @media (max-width: 991px) {
-        height: auto;
-        aspect-ratio: 16 / 9;
-      }
+      height: auto;
+      aspect-ratio: 16 / 9;
     }
   }