update carousel&button

layouts/ai-presenter/single.html

@@ -31,6 +31,7 @@
                 可以使用集仕多的影片版型<br>
                 也可以自己客製化
               </p>
+              <a href="https://cloud.choozmo.com/login" class="link-btn" target="_blank">開始製作影片</a>
             </section>
           </div>
           <div class="col-12 col-md-6 my-5 my-md-0">
@@ -142,7 +143,7 @@
               <h4>1. 註冊 AI Spokesgirl 專屬帳號</h4>
               <p class="excerpt">一旦註冊即送 60 秒影片製作服務，使用滿意可後續加值</p>
               <div class="d-flex justify-content-center">
-                <a href="https://video.choozmo.com/register.html" class="link-btn" target="_blank">點我免費註冊</a>
+                <a href="https://cloud.choozmo.com/signup" class="link-btn" target="_blank">點我免費註冊</a>
               </div>
             </li>
             <li>
@@ -174,7 +175,7 @@
                 請您耐心等候，待製作完畢可於通知網址查看
               </h4>
               <div class="d-flex justify-content-center">
-                <a href="https://video.choozmo.com/register.html" class="link-btn" target="_blank">立即開始</a>
+                <a href="https://cloud.choozmo.com/login" class="link-btn" target="_blank">立即開始</a>
               </div>
             </li>
           </ul>

layouts/index.html

@@ -109,6 +109,13 @@
         el: ".swiper-pagination",
         clickable: true,
       },
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+      observer: true,
+      observeParents: true,
+      parallax: true,
     });
   </script>
   <!-- 進度條 -->

layouts/partials/components/carousel.html

@@ -2,21 +2,24 @@
   <div class="swiper-wrapper">
     <div class="swiper-slide">
       <a target="_blank" href="https://cmm.ai/ces2023vid/">
-        <img src="/imgs/home/banner01.webp" alt="Choozmo in 2023CES">
+        <img src="/imgs/home/banner01.webp" alt="Choozmo in 2023CES" class="d-none d-md-block">
+        <img src="/imgs/home/banner01_mb.webp" alt="Choozmo in 2023CES" class="d-block d-md-none p-4">
       </a>
     </div>
     <div class="swiper-slide">
       <a href="/seo-image/dm/">
-        <img src="/imgs/home/banner02.webp" alt="形象SEO搶救負評大作戰">
+        <img src="/imgs/home/banner02.webp" alt="形象SEO搶救負評大作戰" class="d-none d-md-block">
+        <img src="/imgs/home/banner02_mb.webp" alt="形象SEO搶救負評大作戰" class="d-block d-md-none p-4">
       </a>
     </div>
     <div class="swiper-slide">
       <a href="/ai-anchor/dm/">
-        <img src="/imgs/home/banner03.webp" alt="高畫質AI主播">
+        <img src="/imgs/home/banner03.webp" alt="高畫質AI主播" class="d-none d-md-block">
+        <img src="/imgs/home/banner03_mb.webp" alt="高畫質AI主播" class="d-block d-md-none p-4">
       </a>
     </div>
   </div>
-  <!-- <div class="swiper-button-next"></div> -->
-  <!-- <div class="swiper-button-prev"></div> -->
+  <div class="swiper-button-next d-none d-md-block"></div>
+  <div class="swiper-button-prev d-none d-md-block"></div>
   <div class="swiper-pagination"></div>
 </div>

layouts/partials/components/nav.html

@@ -42,8 +42,8 @@
       </ul>
 
       <ul class="nav navbar-nav navbar-right flex-row ms-auto my-3 my-lg-0">
-        <li><a href="https://video.choozmo.com/login.html" class="signin-link">登入</a></li>
-        <li><a href="https://video.choozmo.com/register.html" class="signup-link">註冊</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">
         <li class="nav-item">

layouts/partials/navbar.html

@@ -58,8 +58,8 @@
       </ul>
 
       <ul class="nav navbar-nav navbar-right flex-row ms-auto my-3 my-lg-0">
-        <li><a href="https://video.choozmo.com/login.html" class="signin-link">登入</a></li>
-        <li><a href="https://video.choozmo.com/register.html" class="signup-link">註冊</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>
   </div>

static/css/style.css

@@ -515,6 +515,10 @@
 #home .swiper .swiper-pagination-bullet-active {
   background-color: #000 !important;
 }
+#home .swiper .swiper-button-next,
+#home .swiper .swiper-button-prev {
+  color: #6c6d70;
+}
 #home #main {
   overflow: hidden;
 }
@@ -569,12 +573,13 @@
 }
 #home #main .content .action-btn {
   margin-top: 60px;
-  padding: 8px 22px;
-  color: #fff;
-  transition: all 0.3s;
+  padding: 13px 30px;
   border: none;
-  border-radius: 20px;
+  color: #fff;
   background-color: #ea5413;
+  text-decoration: none;
+  border-radius: 100px;
+  transition: all 0.3s;
 }
 #home #main .content .action-btn:hover {
   background-color: #d54d13;
@@ -1428,7 +1433,7 @@
     font-size: 1.3rem;
   }
   .header__sub::before,
-.header__sub::after {
+  .header__sub::after {
     width: 8%;
   }
   .header__sub::before {
@@ -2842,7 +2847,7 @@
 }
 @media (max-width: 991px) {
   #youtube-views .direction-list,
-#youtube-views-zh .direction-list {
+  #youtube-views-zh .direction-list {
     margin-top: 60px;
   }
 }
@@ -2889,13 +2894,13 @@
 }
 @media (max-width: 767px) {
   #youtube-views .category.dm-description,
-#youtube-views-zh .category.dm-description {
+  #youtube-views-zh .category.dm-description {
     padding-top: 6rem;
   }
 }
 @media (max-width: 575px) {
   #youtube-views .category.dm-description,
-#youtube-views-zh .category.dm-description {
+  #youtube-views-zh .category.dm-description {
     padding-top: 14rem;
   }
 }
@@ -3199,7 +3204,7 @@
 }
 @media (max-width: 991px) {
   .seo-image .purple-circle,
-.seo-image .orange-circle {
+  .seo-image .orange-circle {
     width: 60%;
   }
 }
@@ -3308,6 +3313,21 @@
     margin-top: -34px;
   }
 }
+.ai-presenter .link-btn {
+  display: inline-block;
+  padding: 12px 35px;
+  margin-top: 25px;
+  font-size: 18px;
+  font-weight: bold;
+  border-radius: 100px;
+  text-decoration: none;
+  color: #fff;
+  background: #ea5413;
+  transition: all 0.3s;
+}
+.ai-presenter .link-btn:hover {
+  opacity: 0.8;
+}
 .ai-presenter .usecace-list {
   margin-bottom: 100px;
 }
@@ -3414,21 +3434,6 @@
 .ai-presenter .template-content .bg-bottom {
   bottom: -10px;
 }
-.ai-presenter .step-content .link-btn,
-.ai-presenter .template-content .link-btn {
-  display: inline-block;
-  padding: 12px 20px;
-  margin-top: 25px;
-  border-radius: 100px;
-  text-decoration: none;
-  color: #fff;
-  background: #ea5413;
-  transition: all 0.3s;
-}
-.ai-presenter .step-content .link-btn:hover,
-.ai-presenter .template-content .link-btn:hover {
-  opacity: 0.8;
-}
 .ai-presenter .step-content ul,
 .ai-presenter .template-content ul {
   padding: 0;
@@ -3456,7 +3461,7 @@
 }
 @media (max-width: 575px) {
   .ai-presenter .step-content ul li h4,
-.ai-presenter .template-content ul li h4 {
+  .ai-presenter .template-content ul li h4 {
     font-size: 20px;
   }
 }
@@ -3470,7 +3475,7 @@
 }
 @media (max-width: 575px) {
   .ai-presenter .step-content ul li .point-list li,
-.ai-presenter .template-content ul li .point-list li {
+  .ai-presenter .template-content ul li .point-list li {
     margin: 5px 0 5px 20px;
   }
 }
@@ -3492,13 +3497,13 @@
 }
 @media (max-width: 575px) {
   .ai-presenter .step-content .excerpt,
-.ai-presenter .template-content .excerpt {
+  .ai-presenter .template-content .excerpt {
     font-size: 16px;
   }
 }
 @media (max-width: 575px) {
   .ai-presenter .step-content .caption,
-.ai-presenter .template-content .caption {
+  .ai-presenter .template-content .caption {
     font-size: 15px;
   }
 }
@@ -3601,26 +3606,26 @@
 }
 @media (max-width: 1200px) {
   .ai-presenter .template-content .info .img-text-left,
-.ai-presenter .template-content .info .img-text-right {
+  .ai-presenter .template-content .info .img-text-right {
     top: 8%;
     font-size: 28px;
   }
 }
 @media (max-width: 991px) {
   .ai-presenter .template-content .info .img-text-left,
-.ai-presenter .template-content .info .img-text-right {
+  .ai-presenter .template-content .info .img-text-right {
     font-size: 22px;
   }
 }
 @media (max-width: 767px) {
   .ai-presenter .template-content .info .img-text-left,
-.ai-presenter .template-content .info .img-text-right {
+  .ai-presenter .template-content .info .img-text-right {
     font-size: 30px;
   }
 }
 @media (max-width: 575px) {
   .ai-presenter .template-content .info .img-text-left,
-.ai-presenter .template-content .info .img-text-right {
+  .ai-presenter .template-content .info .img-text-right {
     font-size: 4.8vw;
   }
 }

static/css/style.scss

@@ -535,6 +535,10 @@
     .swiper-pagination-bullet-active {
       background-color: #000 !important;
     }
+    .swiper-button-next,
+    .swiper-button-prev {
+      color: #6c6d70;
+    }
   }
   #main {
     overflow: hidden;
@@ -582,12 +586,13 @@
       }
       .action-btn {
         margin-top: 60px;
-        padding: 8px 22px;
-        color: #fff;
-        transition: all 0.3s;
+        padding: 13px 30px;
         border: none;
-        border-radius: 20px;
+        color: #fff;
         background-color: #ea5413;
+        text-decoration: none;
+        border-radius: 100px;
+        transition: all 0.3s;
         &:hover {
           background-color: #d54d13;
         }
@@ -3046,6 +3051,21 @@
       }
     }
   }
+  .link-btn {
+    display: inline-block;
+    padding: 12px 35px;
+    margin-top: 25px;
+    font-size: 18px;
+    font-weight: bold;
+    border-radius: 100px;
+    text-decoration: none;
+    color: #fff;
+    background: #ea5413;
+    transition: all 0.3s;
+    &:hover {
+      opacity: 0.8;
+    }
+  }
   .usecace-list {
     margin-bottom: 100px;
     img {
@@ -3145,19 +3165,6 @@
     .bg-bottom {
       bottom: -10px;
     }
-    .link-btn {
-      display: inline-block;
-      padding: 12px 20px;
-      margin-top: 25px;
-      border-radius: 100px;
-      text-decoration: none;
-      color: #fff;
-      background: #ea5413;
-      transition: all 0.3s;
-      &:hover {
-        opacity: 0.8;
-      }
-    }
     ul {
       padding: 0;
       list-style: none;