LP template

layouts/index.html

@@ -19,7 +19,11 @@
 
        {{ partial "LP_components/blogs_tab.html" . }}
 
-        {{ partial "footer.html" . }}
+       {{ partial "LP_components/action.html" . }}
+
+       {{ partial "LP_components/Footer.html" . }}
+
+      
 
     </div>
     <!-- /#all -->
@@ -45,6 +49,37 @@
             }
         }
         tabLP();
+
+        function debounce(func, wait = 20, immediate = true) {
+          var timeout;
+          return function() {
+            var context = this, args = arguments;
+            var later = function() {
+              timeout = null;
+              if (!immediate) func.apply(context, args);
+            };
+            var callNow = immediate && !timeout;
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+            if (callNow) func.apply(context, args);
+          };
+      };
+      const featuresBlock = document.querySelectorAll('.features-block');
+
+      function checkSlide() {
+        console.log('pass');
+        featuresBlock.forEach(block => {
+        // half way through the image
+        const slideInAt = (window.scrollY + window.innerHeight) - block.offsetHeight / 2;
+        console.log(block.offsetHeight / 2);
+        // bottom of the image
+        const isHalfShown = slideInAt > block.offsetTop;
+        if (isHalfShown) {
+          block.classList.add('active');
+        }
+      });
+      }
+      window.addEventListener('scroll', debounce(checkSlide));
     </script>
 
   </body>

layouts/partials/LP_components/Footer.html

@@ -0,0 +1,27 @@
+<footer class="footer">
+    <div class="container">
+        <div class="row">
+            <div class="col-xs-12 col-md-6">
+                <img src="img/CMM_LOGO.png" alt="" width="250">
+                <div class="footer-aigirl">Choozmo AI Spokesgirl</div>
+                <div class="footer-follow">關注我們</div>
+                <div class="footer-socials">
+                    <a href="https://www.linkedin.com/company/choozmo/"><img src="img/linkedin-logo.png" alt=""></a>
+                    <a href="https://www.facebook.com/choozmo/"><img src="img/facebook.png" alt=""></a>
+                    <a href="https://line.me/R/ti/p/@choozmo?from=page"><img src="img/line.png" alt=""></a>
+                    <a href="https://www.youtube.com/channel/UCi3jHOCCmx0Zyl2ZvoHzHQg"><img src="img/youtube-new-flat-logo-1.png" alt="" width="32px" height="32px"></a>
+                    <a href="https://www.instagram.com/choozmo_cmm/"><img src="img/instagram.png" alt="" width="32px" height="32px"></a>
+                    <a href="https://twitter.com/ai_cmm"><img src="img/twitter.png" alt="" width="32px" height="32px"></a>
+                </div>
+            </div>
+            <div class="col-xs-12 col-md-6">
+                <div class="footer-contacts">
+                    <h5>CONTACT</h5>
+                    <div>
+                        集仕多股份有限公司<br>新竹縣竹北市復興二路229號9樓之9<br>聯絡電話：036670804<br>聯絡信箱：SERVICE@CHOOZMO.COM
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</footer>

layouts/partials/LP_components/action.html

@@ -0,0 +1,14 @@
+<section class="sec-action">
+    <div class="container-fluid">
+        <div class="action-clip text-center">
+            <h2>想要快速製作影音內容？<br>
+                立即註冊，開始創作！</h2>
+        </div>
+    </div>
+    <div class="container text-center">
+        <form action="" method="post">
+            <input type="email" placeholder="請輸入信箱" class="action-input">
+            <input type="submit" value="立即開始" class="action-btn">
+        </form>
+    </div>
+</section>

layouts/partials/LP_components/blogs_tab.html

@@ -1,5 +1,5 @@
 <section class="sec-blogtab">
-    <div class="container">
+    <div class="container text-center">
         <h2 class="blogtab-title">BLOG</h2>
         <div class="row">
             <div class="col-md-12">
@@ -13,7 +13,6 @@
                       <li><a href="#blog-tab-6">如何製作一個AI主播？</a></li>
                     </ul>
                     <div class="blog-tabs-stage">
-                        <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 80%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//IzHhpC_bD6g?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
                       <div id="blog-tab-1" class="blog-tab-box">
                         <div class="blog-txt">
                             <p>「AI主播」是透過虛擬人技術的的支持下， 通过人臉的關鍵特色偵測、人臉特徵擷取、臉部重構、唇語辨別、情感及表 情的分析等多項先進科技合成AI主播， 並結合圖像及語音等資料建立模型，並且進行模型的訓練精準化模型，生成與真 人高度相似的的AI虛擬分身模型，進而合成AI主播。 合成的主播能夠將所輸入的中英文文稿自動生成相對應之影片，在 播報過程中，AI主播的音頻、表情以及唇語嘴形可以保持自然一致，AI主播完全展現出與真人主播無差異的資訊傳達效果。</p>

layouts/partials/LP_components/features.html

@@ -1,10 +1,13 @@
 <section class="sec-features">
     <div class="container text-center">
         <h2 class="features-title"><strong>4</strong>大特色</h2>
-        <div class="row">
+        <div class="row" style="position: relative;">
+            <img src="img/背景-橘.png" alt="" width="300px" class="features-orangel">
             <div class="col-xs-12 col-md-6">
                 <div class="features-imgfr">
-                    <img src="https://addons.cdn.mozilla.net/user-media/previews/full/210/210007.png?modified=1622133785" alt="">
+                    <video autoplay muted loop>
+                        <source src="img/官網1_加速.mp4" type="video/mp4">
+                    </video>
                 </div>
             </div>
             <div class="col-xs-12 col-md-6 features-col">
@@ -21,7 +24,8 @@
                 </div>
             </div>
         </div>
-        <div class="row">
+        <div class="row" style="position: relative;">
+            <img src="img/背景-紫.png" alt="" width="300px" class="features-purpler">
             <div class="col-xs-12 col-md-6 features-col">
                 <div class="features-block">
                     <span class="features-num">2</span>
@@ -37,14 +41,19 @@
             </div>
             <div class="col-xs-12 col-md-6">
                 <div class="features-imgfr">
-                    <img src="https://addons.cdn.mozilla.net/user-media/previews/full/210/210007.png?modified=1622133785" alt="">
+                    <video autoplay muted loop>
+                        <source src="img/官網2.mp4" type="video/mp4">
+                    </video>
                 </div>
             </div>
         </div>
-        <div class="row">
+        <div class="row" style="position: relative;">
+            <img src="img/背景-紫.png" alt="" width="300px" class="features-purplel">
             <div class="col-xs-12 col-md-6">
                 <div class="features-imgfr">
-                    <img src="https://addons.cdn.mozilla.net/user-media/previews/full/210/210007.png?modified=1622133785" alt="">
+                    <video autoplay muted loop>
+                        <source src="img/官網3.mp4" type="video/mp4">
+                    </video>
                 </div>
             </div>
             <div class="col-xs-12 col-md-6 features-col">
@@ -62,7 +71,8 @@
                 </div>
             </div>
         </div>
-        <div class="row">
+        <div class="row" style="position: relative;">
+            <img src="img/背景-橘.png" alt="" width="300px" class="features-oranger">
             <div class="col-xs-12 col-md-6 features-col">
                 <div class="features-block">
                     <span class="features-num">4</span>
@@ -77,11 +87,12 @@
             </div>
             <div class="col-xs-12 col-md-6">
                 <div class="features-imgfr">
-                    <img src="https://addons.cdn.mozilla.net/user-media/previews/full/210/210007.png?modified=1622133785" alt="">
+                    <video autoplay muted loop>
+                        <source src="img/官網4.mp4" type="video/mp4">
+                    </video>
                 </div>
             </div>
         </div>
-        <button class="btn-light">取得影片</button>
         <button class="btn-dark">立即開始</button>
     </div>
 </section>

layouts/partials/LP_components/hero.html

@@ -8,8 +8,11 @@
                     大幅省下時間、人力、器材成本。</p>
                 <button class="hero-btn">立即開始</button>
             </div>
-            <div class="col-md-6">
-                <img src="" alt="">
+            <div class="col-md-6" style="position: relative;">
+                <img src="img/背景-紫.png" alt="" width="100px" class="hero-purple">
+                <img src="img/背景-橘.png" alt="" width="150px" class="hero-orange">
+                <img src="img/背景-橘.png" alt="" width="70px" class="hero-orange-s">
+                <div class="hero-imgfr"><img src="img/電腦.png" alt=""></div>
             </div>
         </div>
     </div>

layouts/partials/LP_components/steps.html

@@ -4,7 +4,7 @@
         <div class="row">
             <div class="col-xs-12 col-md-4">
                 <div class="steps-block">
-                    <div class="steps-imgfr"><img src="https://imgur.com/gallery/9Yw2SNu.png" alt=""></div>
+                    <div class="steps-imgfr"><img src="img/aigirls.png" alt=""></div>
                     <div class="steps-txt">
                         <span>1</span>
                         <h3 class="steps-sub">選擇AI人物</h3>
@@ -13,7 +13,7 @@
             </div>
             <div class="col-xs-12 col-md-4">
                 <div class="steps-block">
-                    <div class="steps-imgfr"><img src="" alt=""></div>
+                    <div class="steps-imgfr"><img src="img/textgrp.png" alt=""></div>
                     <div class="steps-txt">
                         <span>2</span>
                         <h3 class="steps-sub">輸入腳本文字</h3>
@@ -22,7 +22,7 @@
             </div>
             <div class="col-xs-12 col-md-4">
                 <div class="steps-block">
-                    <div class="steps-imgfr"><img src="" alt=""></div>
+                    <div class="steps-imgfr"><img src="img/imagesgrp.png" alt=""></div>
                     <div class="steps-txt">
                         <span>3</span>
                         <h3 class="steps-sub">輸入背景圖片素材</h3>
@@ -30,7 +30,6 @@
                 </div>
             </div>
         </div>
-        <button class="btn-light">取得影片</button>
         <button class="btn-dark">立即開始</button>
     </div>
 </section>

static/css/custom.css

@@ -53,11 +53,14 @@
 /* sec-hero */
 .sec-hero {
   padding: 6rem 0;
+  padding-bottom: 0;
+  margin-bottom: 0 !important;
 }
 
 .sec-hero .hero-title {
   font-size: 3.5rem;
   letter-spacing: 1px;
+  padding-top: 2.5rem;
 }
 
 .sec-hero .hero-txt {
@@ -77,6 +80,36 @@
   box-shadow: 1px 1px 5px 1px rgba(207, 207, 207, 0.534);
 }
 
+.hero-orange {
+  position: absolute;
+  left: 10%;
+  top: 0%;
+}
+
+.hero-purple {
+  position: absolute;
+  right: 10%;
+  top: 25%;
+  z-index: 3;
+}
+
+.hero-orange-s {
+  position: absolute;
+  right: 40%;
+  bottom: 15%;
+  z-index: 3;
+}
+
+.hero-imgfr {
+  width: 100%;
+  height: 85%;
+}
+
+.hero-imgfr img {
+  width: 100%;
+  transform: translateY(-8rem);
+}
+
 /* sec-usecase */
 .sec-usecase {
   padding: 3rem 0;
@@ -113,7 +146,8 @@
 .sec-usecase .usecase-imgfr {
   width: 100%;
   height: 25rem;
-  border-radius: 3px;
+  border-radius: 1rem;
+  overflow: hidden;
   box-shadow: 0 3px 11px 3px rgba(192, 192, 192, 0.637);
 }
 
@@ -159,10 +193,8 @@
 }
 
 .sec-steps .steps-imgfr {
-  width: 100%;
-  height: 22rem;
-  border-radius: 3px;
-  box-shadow: 0 3px 11px 3px rgba(192, 192, 192, 0.637);
+  width: 75%;
+  height: 23rem;
 }
 
 .sec-steps .steps-imgfr img {
@@ -194,6 +226,38 @@
   padding: 5rem 0;
 }
 
+.sec-features .row {
+  margin: 10rem 0;
+}
+
+.features-orangel {
+  position: absolute;
+  left: -150px;
+  top: 5%;
+  z-index: -1;
+}
+
+.features-purpler {
+  position: absolute;
+  right: -150px;
+  top: 5%;
+  z-index: -1;
+}
+
+.features-purplel {
+  position: absolute;
+  left: -150px;
+  top: 5%;
+  z-index: -1;
+}
+
+.features-oranger {
+  position: absolute;
+  right: -150px;
+  top: 5%;
+  z-index: -1;
+}
+
 .sec-features .features-col {
   position: relative;
 }
@@ -201,10 +265,17 @@
 .sec-features .features-col .features-block {
   position: absolute;
   left: 10rem;
-  top: 15rem;
+  top: 6rem;
   display: flex;
+  opacity: 0;
+  transition: all 1s;
+}
+
+.sec-features .features-col .features-block.active {
+  opacity: 1;
 }
 
+
 .sec-features .features-num {
   display: inline-block;
   font-size: 12rem;
@@ -228,7 +299,7 @@
   width: 100%;
 }
 
-.sec-features .features-imgfr img {
+.sec-features .features-imgfr video {
   width: 100%;
 }
 
@@ -236,15 +307,31 @@
   text-align: left;
 }
 
+.sec-blogtab {
+  padding-bottom: 5rem;
+}
+
 .blog-tabs {
   display: flex;
+  align-items: center;
+}
+
+.blogtab-title {
+  font-size: 3rem;
+  letter-spacing: 1px;
+  padding-bottom: 6px;
+  border-bottom: 8px solid #EA5413;
+  display: inline-block;
+  text-align: center;
 }
 
 .blog-tabs .blog-tabs-nav {
   width: 35%;
   background-color: #F0F0F0;
-  padding: 4rem 1.5rem;
+  padding: 4rem 2.5rem;
   list-style: none;
+  box-shadow: 0 2px 5px -2px rgb(173, 173, 173);
+  text-align: left;
 }
 
 .blog-tabs .blog-tabs-nav li {
@@ -260,8 +347,9 @@
   padding: 3.5rem;
   padding-bottom: 8rem;
   box-shadow: 1px 1px 10px 2px grey;
-  height: 40rem;
+  height: 48rem;
   overflow: hidden;
+  text-align: left;
 }
 
 .blog-tab-box {
@@ -269,6 +357,10 @@
   overflow: scroll;
 }
 
+.blog-tabs .blog-tabs-stage .blog-txt {
+  font-size: 1.6rem;
+}
+
 .btn-light {
   color: black;
   border: 1px solid #EA5413;
@@ -295,8 +387,100 @@
 
 .blog-tabs .btn-light {
   margin-top: 1.5rem;
+  color: #EA5413;
 }
 
+/* sec-action */
+
+.sec-action {
+  padding-bottom: 7rem;
+  background-color: #FFEBE2;
+  margin-bottom: 0 !important;
+}
+
+.sec-action .container-fluid {
+  padding: 0;
+}
+
+.sec-action .action-clip {
+  width: 100%;
+  background-color: #EA5413;
+  padding: 2rem 0;
+}
+
+.sec-action .action-clip h2 {
+  color: white;
+}
+
+.sec-action form {
+  padding: 4rem 0;
+}
+
+.sec-action form .action-input {
+  padding: .8rem;
+  display: block;
+  width: 35rem;
+  margin: 0 auto;
+  border: 1px solid #9B9B9B;
+  border-radius: 8px;
+  outline: none;
+}
+
+.sec-action form .action-input::placeholder {
+  color: #9B9B9B;
+}
+
+.sec-action form .action-input::-webkit-input-placeholder {
+  color: #9B9B9B;
+}
+
+.sec-action form .action-input:-moz-input-placeholder{
+  color: #9B9B9B;
+}
+
+.sec-action form .action-input:-ms-input-placeholder{
+  color: #9B9B9B;
+}
+
+.sec-action .action-btn {
+  border: none;
+  outline: none;
+  padding: .8rem 3.5rem;
+  border-radius: 3rem;
+  font-size: 2.2rem;
+  background-color: white;
+  color: #EA5413;
+  margin-top: 3rem;
+}
+
+/* footer */
+
+.footer {
+  background-color: #F0F0F0;
+  padding: 3rem;
+}
+
+.footer .row{
+  display: flex;
+  align-items: center;
+}
+
+.footer .footer-aigirl {
+  font-weight: 600;
+  font-size: 2rem;
+  margin-top: 1rem;
+  margin-bottom: 2.5rem;
+}
+
+.footer .footer-follow {
+  font-size: 1.6rem;
+  margin-bottom: 1rem;
+}
+
+.footer .footer-socials a{
+  margin-right: 5px;
+}
+ 
 #content .container {
   margin-top: 50px;
 }

static/css/style.default.css

@@ -2545,9 +2545,9 @@ fieldset[disabled] .btn-template-primary.active {
   margin: 0 0 20px;
 }
 #footer {
-  background: #555555;
+  background: #F0F0F0;
   padding: 50px 0;
-  color: #999999;
+  color: #24282F;
 }
 #footer h1,
 #footer h2,

webSite/config.toml

@@ -42,7 +42,7 @@ page = ["HTML"]
 [[menu.main]]
     identifier="blog"
     name = "部落格"
-    url  = "/blog/"
+    url  = "/tags/vtuber/"
     weight = 3
 
 [[menu.main]]