update ai-virtual-star

layouts/ai-virtual-star/single.html

@@ -63,10 +63,15 @@
           創意滿滿的您是不是在煩惱怎麼讓影片更有亮點，<br>或是對於枯燥乏味的週期性短片拍攝感到疲累，<br>最好還能帥到觀眾下巴掉下來？<br>
           現在還覺得成為 AI 網紅很遙遠嗎？<br>是不是想要一個 AI 分身幫您工作呢？<br>現在集仕多免費幫您訂製您的 AI 分身！</p>
 
-        <h2 class="mt-5 title">活動獎勵：前三名將獲得專屬的 AI 分身建模</h2>
+        <div class="d-flex justify-content-center my-5">
+          <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" target="_blank"
+            class="sign-up-btn">加入 LINE OA 專人介紹</a>
+        </div>
+
+        <h2 class="mt-5 title">活動獎勵：將有機會獲得專屬的 AI 分身建模</h2>
 
-        <p class="mb-0">根據所有報名者所提供的企劃，經由團隊篩選過後，最終將選出 3 位最具潛力的影音創作者<br>為您量身訂做專屬於您的
-          「AI 分身」，分身可供您製作成影片，並發布於您的頻道中，讓您的頻道形象超級吸睛！<br>
+        <p class="mb-0">根據所有報名者所提供的企劃，經由團隊篩選過後，最終將選出多位最具潛力的影音創作者<br>為您量身訂做專屬於您的「AI
+          分身」，分身可供您製作成影片，並發布於您的頻道中，讓您的頻道形象超級吸睛！<br>
           也歡迎得獎者自帶團隊拍建模的幕後花絮，記錄下獨一無二的建模過程！<br>🎁 凡報名者皆獲得參與禮：算力傳媒專訪一篇
         </p>
 
@@ -80,7 +85,7 @@
       </div>
 
       <div class="d-flex justify-content-center my-5">
-        <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" target="_blank" class="sign-up-btn">加
+        <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" target="_blank" class="sign-up-btn">加入
           LINE OA 即可報名</a>
       </div>
 
@@ -119,7 +124,19 @@
           </p> -->
         </div>
 
-        <div class="row align-items-center mt-5">
+        <div class="w-100 d-flex justify-content-center mt-5 pt-5">
+          <button class="d-flex justify-content-center align-items-center activity-btn">
+            <span>點擊展開活動詳情</span>
+
+            <div class="ms-3 arrow-wave">
+              <span></span>
+              <span></span>
+            </div>
+          </button>
+
+        </div>
+
+        <div class="row align-items-center mt-5 activity-info">
           <div class="col-lg-6 d-flex flex-column align-items-center">
             <h4>活動流程</h4>
 
@@ -164,10 +181,9 @@
         </div>
       </div>
 
-      <div class="d-flex justify-content-center my-5">
-        <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" target="_blank" class="sign-up-btn">加
-          LINE OA 即可報名</a>
-      </div>
+      <!-- <div class="d-flex justify-content-center my-5">
+        <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" target="_blank" class="sign-up-btn">加入 LINE OA 即可報名</a>
+      </div> -->
 
       <div class="row align-items-center py-5">
         <div class="col-lg-6">
@@ -255,7 +271,7 @@
       </div>
 
       <div class="d-flex justify-content-center mb-lg-5">
-        <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" target="_blank" class="sign-up-btn">加
+        <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" target="_blank" class="sign-up-btn">加入
           LINE OA 即可報名</a>
       </div>
 
@@ -288,6 +304,15 @@
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
     integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
     crossorigin="anonymous"></script>
+  <script>
+    console.log('>>', $(".activity-btn"));
+    $('.activity-btn').on('click', function () {
+      // 切換箭頭方向
+      $('.arrow-wave').toggleClass('active');
+      // 展開或收起內容
+      $('.activity-info').toggleClass('active');
+    })
+  </script>
 </body>
 
 </html>

layouts/index.html

@@ -18,6 +18,7 @@
         <!-- {{ partial "components/main.html" . }} -->
         <!-- {{ partial "components/serve.html" . }} -->
         <!-- {{ partial "components/ai-video.html" . }} -->
+        <!-- {{ partial "components/ai-saas.html" . }} -->
         {{ partial "components/ai-reporter.html" . }}
         <!-- <div class="reporter-img">
           <img src="imgs/home/ai-reporter.webp" alt="AI記者｜語音專訪">

layouts/partials/components/ai-saas.html

@@ -0,0 +1,3 @@
+<div class="container my-5 ai-saas">
+    <img src="imgs/home/SaaS_banner.webp" alt="Choozmo SaaS｜AI人物影片 快速製作" class="img-fluid pt-4">
+</div>

static/css/style.css

@@ -5629,7 +5629,6 @@
 #ai-virtual-star .header .main p {
   margin-bottom: 1.5rem;
   text-align: center;
-  font-weight: bold;
 }
 @media (max-width: 575px) {
   #video-editing .header .main p,
@@ -5652,7 +5651,7 @@
 }
 #ai-virtual-star p,
 #ai-virtual-star li {
-  line-height: 3;
+  line-height: 2.5;
 }
 #ai-virtual-star .cover-img {
   width: 100vw;
@@ -5665,7 +5664,7 @@
 }
 #ai-virtual-star h2 {
   font-size: 2.75rem;
-  line-height: 1.8;
+  line-height: 1.6;
 }
 @media (max-width: 1200px) {
   #ai-virtual-star h2 {
@@ -5708,7 +5707,7 @@
   list-style: none;
 }
 #ai-virtual-star ul li {
-  line-height: 3;
+  line-height: 2.5;
 }
 #ai-virtual-star small {
   font-size: 1rem;
@@ -5743,7 +5742,7 @@
   padding: 2rem 4rem;
   display: inline-block;
   border-radius: 20px;
-  border: 2px solid #3cd3b9;
+  border: 4px solid #3cd3b9;
 }
 @media (max-width: 575px) {
   #ai-virtual-star .info {
@@ -5776,6 +5775,8 @@
   letter-spacing: 1px;
 }
 #ai-virtual-star .sign-up-btn {
+  width: 365px;
+  text-align: center;
   display: block;
   margin: 3rem auto;
   padding: 1rem 3rem;
@@ -5790,6 +5791,101 @@
 #ai-virtual-star .sign-up-btn:hover {
   opacity: 0.8;
 }
+@media (max-width: 575px) {
+  #ai-virtual-star .sign-up-btn {
+    width: 100%;
+  }
+}
+#ai-virtual-star .activity-info {
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition: height 1.5s ease, opacity 1.5s ease;
+}
+#ai-virtual-star .activity-info.active {
+  height: auto;
+  opacity: 1;
+}
+#ai-virtual-star .activity-btn {
+  width: 365px;
+  padding: 1rem 3rem;
+  background-color: transparent;
+  border-radius: 5px;
+  border: none;
+  box-shadow: 0px 0px 10px #3cd3b9;
+  text-align: center;
+}
+@media (max-width: 575px) {
+  #ai-virtual-star .activity-btn {
+    width: 100%;
+  }
+}
+#ai-virtual-star .activity-btn span {
+  color: #fff;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+#ai-virtual-star .arrow-wave span {
+  display: block;
+  position: relative;
+  height: 19px;
+  width: 30px;
+  /* background-color: rgba(100, 100, 100, 0.4); */
+  opacity: 0.2;
+}
+#ai-virtual-star .arrow-wave span::before, #ai-virtual-star .arrow-wave span::after {
+  display: block;
+  content: "";
+  position: absolute;
+  height: 4px;
+  width: 23px;
+  background-color: #fff;
+  transition: transform 0.3s ease;
+}
+#ai-virtual-star .arrow-wave span::before {
+  top: -2px;
+  left: 0;
+  transform-origin: left center;
+  transform: rotate(45deg);
+}
+#ai-virtual-star .arrow-wave span::after {
+  top: -2px;
+  right: 0;
+  transform-origin: right center;
+  transform: rotate(-45deg);
+}
+#ai-virtual-star .arrow-wave span:nth-child(1n) {
+  animation: animate-arrow-wave 2s infinite;
+  animation-delay: 0.25s;
+}
+#ai-virtual-star .arrow-wave span:nth-child(2n) {
+  animation: animate-arrow-wave 2s infinite;
+  animation-delay: 0.5s;
+}
+#ai-virtual-star .arrow-wave span:nth-child(3n) {
+  animation: animate-arrow-wave 2s infinite;
+  animation-delay: 0.75s;
+}
+#ai-virtual-star .arrow-wave.active span {
+  bottom: -15px;
+}
+#ai-virtual-star .arrow-wave.active span::before {
+  transform: rotate(-45deg);
+}
+#ai-virtual-star .arrow-wave.active span::after {
+  transform: rotate(45deg);
+}
+@keyframes animate-arrow-wave {
+  0%, 25%, 50% {
+    opacity: 0.2;
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}
 #ai-virtual-star #form {
   margin: 0 0.5rem;
 }

static/css/style.scss

@@ -6183,7 +6183,7 @@
       p {
         margin-bottom: 1.5rem;
         text-align: center;
-        font-weight: bold;
+        // font-weight: bold;
 
         @media (max-width: 575px) {
           font-size: 1rem;
@@ -6206,7 +6206,7 @@
 
   p,
   li {
-    line-height: 3;
+    line-height: 2.5;
   }
 
   .cover-img {
@@ -6221,7 +6221,7 @@
 
   h2 {
     font-size: 2.75rem;
-    line-height: 1.8;
+    line-height: 1.6;
 
     @media (max-width: 1200px) {
       font-size: 2rem;
@@ -6262,7 +6262,7 @@
     list-style: none;
 
     li {
-      line-height: 3;
+      line-height: 2.5;
     }
   }
 
@@ -6301,7 +6301,7 @@
     padding: 2rem 4rem;
     display: inline-block;
     border-radius: 20px;
-    border: 2px solid #3cd3b9;
+    border: 4px solid #3cd3b9;
 
     @media (max-width: 575px) {
       padding: 2rem;
@@ -6336,6 +6336,8 @@
   }
 
   .sign-up-btn {
+    width: 365px;
+    text-align: center;
     display: block;
     margin: 3rem auto;
     padding: 1rem 3rem;
@@ -6350,6 +6352,124 @@
     &:hover {
       opacity: 0.8;
     }
+
+    @media (max-width: 575px) {
+      width: 100%;
+    }
+  }
+
+  .activity-info {
+    height: 0;
+    opacity: 0;
+    overflow: hidden;
+    transition: height 1.5s ease, opacity 1.5s ease;
+
+    &.active {
+      height: auto;
+      opacity: 1;
+    }
+  }
+
+  .activity-btn {
+    width: 365px;
+    padding: 1rem 3rem;
+    background-color: transparent;
+    border-radius: 5px;
+    border: none;
+    box-shadow: 0px 0px 10px #3cd3b9;
+    text-align: center;
+
+    @media (max-width: 575px) {
+      width: 100%;
+    }
+
+    span {
+      color: #fff;
+      font-size: 1.5rem;
+      font-weight: bold;
+    }
+  }
+
+  .arrow-wave {
+    span {
+      display: block;
+      position: relative;
+      height: 19px;
+      width: 30px;
+      /* background-color: rgba(100, 100, 100, 0.4); */
+      opacity: 0.2;
+
+      &::before,
+      &::after {
+        display: block;
+        content: "";
+        position: absolute;
+        height: 4px;
+        width: 23px;
+        background-color: #fff;
+        transition: transform 0.3s ease;
+      }
+
+      &::before {
+        top: -2px;
+        left: 0;
+        transform-origin: left center;
+        transform: rotate(45deg);
+      }
+
+      &::after {
+        top: -2px;
+        right: 0;
+        transform-origin: right center;
+        transform: rotate(-45deg);
+      }
+
+      &:nth-child(1n) {
+        animation: animate-arrow-wave 2s infinite;
+        animation-delay: 0.25s;
+      }
+
+      &:nth-child(2n) {
+        animation: animate-arrow-wave 2s infinite;
+        animation-delay: 0.5s;
+      }
+
+      &:nth-child(3n) {
+        animation: animate-arrow-wave 2s infinite;
+        animation-delay: 0.75s;
+      }
+    }
+
+    &.active {
+      span {
+        bottom: -15px;
+
+        &::before {
+          transform: rotate(-45deg); // 向上箭頭
+        }
+
+        &::after {
+          transform: rotate(45deg); // 向上箭頭
+        }
+      }
+    }
+  }
+
+  @keyframes animate-arrow-wave {
+
+    0%,
+    25%,
+    50% {
+      opacity: 0.2;
+    }
+
+    75% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0.2;
+    }
   }
 
   #form {