AI video page modification

assets/js/script.js

@@ -23,4 +23,5 @@
 		arrows: false
 	});
 
-})(jQuery);
+})(jQuery);
+

assets/scss/_typography.scss

@@ -74,6 +74,8 @@ h6,
 
 .display-3{
   font-size: 3.5rem;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 600;
 }
 
 .linkedin_sec {

assets/scss/templates/_main.scss

@@ -360,4 +360,81 @@ a.post-title {
 .price{
   font-size: 50px;
   color: $text-color-dark;
-}
+}
+
+.banner {
+  h1 {
+    font-family: 'Poppins', sans-serif;
+    font-size: 3.5rem;
+  }
+}
+
+.section {
+  animation-duration: 2.5s;
+  animation-name: fadein;
+  animation-iteration-count: 1;
+  &-title {
+    font-size: 3.1rem;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 700;
+    text-shadow: 0 10px 20px rgba(grey, 0.3);
+    animation-duration: 3s;
+    animation-name: lighting;
+    animation-iteration-count: infinite;
+  }
+  &__footer {
+    animation: none;
+  }
+}
+
+.sec-video {
+  padding-top: 20vh;
+  height: 70vh;
+  background: linear-gradient(105deg, rgba(255, 255, 255, 0.438) 0%, rgba(255, 255, 255, 0.5) 100%, transparent 100%), url('https://i.imgur.com/skmbkUy.jpg');
+  background-position: center;
+  @media screen and(max-width: 576px) {
+      padding-top: 10vh;
+    }
+  .container {
+    animation-duration: 2.5s;
+    animation-name: fadein;
+    animation-iteration-count: 1;
+  }
+  .subtitle {
+    color: white;
+  }
+}
+
+.section-title.action-title {
+  font-size: 2rem;
+}
+
+.img-shadow {
+  box-shadow: 0 15px 25px 0 rgba(grey, 0.4);
+  transition: all .3s;
+}
+
+.img-shadow:hover {
+  transform: translateY(-.125em);
+  box-shadow: 0 5px 10px 0 rgba(grey, 0.3);
+}
+
+@keyframes fadein {
+    0% {
+        opacity: 0;
+        transform: translateY(20%);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0%);
+    }
+  }
+
+@keyframes lighting {
+    0% {
+        transform: translateY(-0.05em);
+    }
+    100% {
+        transform: translateY(0);
+    }
+  }

config.toml

@@ -42,7 +42,7 @@ languageName = "Ch"
 languageCode = "zh-Hant"
 weight = 1
 ########### footer content ##########
-footer_content = "<p style='display:flex;justify-content:center'><a href='https://www.linkedin.com/company/choozmo/?viewAsMember=true' class='linkedin_sec'><i class='ti-linkedin' style='color:#777;line-height:35px;'></i></a><a href='https://page.line.me/choozmo' class='linkedin_sec line'>LINE<i class='ti-line' style='color:#777;line-height:35px;'></i></a><p> <a href='https://www.google.com/maps?q=新竹縣竹北市復興二路229號9樓之9' target='_blank' style='color:#6c757d;'>新竹縣竹北市復興二路229號9樓之9</a> <p> <a href='tel:036670804' style='color:#6c757d;'>03-6670804</a> <p> <a href='mailto:service@choozmo.com'>service@choozmo.com</a>"
+footer_content = "<p style='display:flex;justify-content:center'><a href='https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg' class='linkedin_sec'><i class='ti-youtube' style='color:#777;line-height:35px;'></i></a><a href='https://twitter.com/ai_cmm' class='linkedin_sec'><i class='ti-twitter' style='color:#777;line-height:35px;'></i></a><a href='https://www.instagram.com/choozmo_cmm/' class='linkedin_sec'><i class='ti-instagram' style='color:#777;line-height:35px;'></i></a><a href='https://www.facebook.com/choozmo' class='linkedin_sec'><i class='ti-facebook' style='color:#777;line-height:35px;'></i></a><a href='https://www.linkedin.com/company/choozmo/?viewAsMember=true' class='linkedin_sec'><i class='ti-linkedin' style='color:#777;line-height:35px;'></i></a><a href='https://page.line.me/choozmo' class='linkedin_sec line'>LINE<i class='ti-line' style='color:#777;line-height:35px;'></i></a><p> <a href='https://www.google.com/maps?q=新竹縣竹北市復興二路229號9樓之9' target='_blank' style='color:#6c757d;'>Rm. 9, 9F., No. 229, Fuxing 2nd Rd., Zhubei City, Hsinchu County 302052, Taiwan (R.O.C.)</a> <p> <a href='tel:036670804' style='color:#6c757d;'>03-6670804</a> <p> <a href='mailto:service@choozmo.com'>service@choozmo.com</a>"
 # copyright
 copyright = "© 2021 集仕多股份有限公司 版權所有"
 # Navigation buttons
@@ -94,7 +94,7 @@ identifier = "contact"
 languageName = "En"
 languageCode = "en-us"
 weight = 2
-footer_content = "<p style='display:flex;justify-content:center'><a href='https://www.linkedin.com/company/choozmo/?viewAsMember=true' class='linkedin_sec'><i class='ti-linkedin' style='color:#777;line-height:35px;'></i></a><a href='https://page.line.me/choozmo' class='linkedin_sec line'>LINE<i class='ti-line' style='color:#777;line-height:35px;'></i></a><p> <a href='https://www.google.com/maps?q=新竹縣竹北市復興二路229號9樓之9' target='_blank' style='color:#6c757d;'>Rm. 9, 9F., No. 229, Fuxing 2nd Rd., Zhubei City, Hsinchu County 302052, Taiwan (R.O.C.)</a> <p> <a href='tel:036670804' style='color:#6c757d;'>03-6670804</a> <p> <a href='mailto:service@choozmo.com'>service@choozmo.com</a>"
+footer_content = "<p style='display:flex;justify-content:center'><a href='https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg' class='linkedin_sec'><i class='ti-youtube' style='color:#777;line-height:35px;'></i></a><a href='https://twitter.com/ai_cmm' class='linkedin_sec'><i class='ti-twitter' style='color:#777;line-height:35px;'></i></a><a href='https://www.instagram.com/choozmo_cmm/' class='linkedin_sec'><i class='ti-instagram' style='color:#777;line-height:35px;'></i></a><a href='https://www.facebook.com/choozmo' class='linkedin_sec'><i class='ti-facebook' style='color:#777;line-height:35px;'></i></a><a href='https://www.linkedin.com/company/choozmo/?viewAsMember=true' class='linkedin_sec'><i class='ti-linkedin' style='color:#777;line-height:35px;'></i></a><a href='https://page.line.me/choozmo' class='linkedin_sec line'>LINE<i class='ti-line' style='color:#777;line-height:35px;'></i></a><p> <a href='https://www.google.com/maps?q=新竹縣竹北市復興二路229號9樓之9' target='_blank' style='color:#6c757d;'>Rm. 9, 9F., No. 229, Fuxing 2nd Rd., Zhubei City, Hsinchu County 302052, Taiwan (R.O.C.)</a> <p> <a href='tel:036670804' style='color:#6c757d;'>03-6670804</a> <p> <a href='mailto:service@choozmo.com'>service@choozmo.com</a>"
 copyright = "Copyright © 2021 By Choozmo"
 
 [Languages.en.params.navigation_button]

content/AI國際代言人/_index.ch.md

@@ -10,20 +10,42 @@ service:
   enable : true
   service_item:
     # service item loop
-    - title : "多國語言AI主播"
+    - title : "多國語言AI短影片"
       images:
-      content : "虛擬主播幫你省下拍攝及人力成本，且免人臉肖像授權"
+      content : "我們運用深度學習及神經網路技術創造虛擬主播，並幫你省下拍攝及人力成本，只需上傳圖片、文字稿及選擇主播，即可快速產出影片，且免人臉肖像授權"
       button:
-        enable : false
-        label : "Check it out"
-        link : "#"
+        enable : true
+        label : "看更多範例影片"
+        link : "https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg"
       youtube:
         enable : true
-        link : "https://www.youtube.com/embed/E4Dt7eU3WCo?autoplay=1"
+        link : "https://www.youtube.com/embed/oO-jIgBdYGA?autoplay=1"
     - title : "Text To Video 技術"
       images:
       - "images/texttovideo.webp"
-      content : "只需要文字內容，幫您產生虛擬主播對嘴說話"
+      content : "融合 Text To Speech 及 Audio To Video 技術，只需要文字內容，幫您產生虛擬主播對嘴說話"
+      button:
+        enable : false
+        label : "Check it out"
+        link : "#"
+      #youtube:
+        #enable : true
+        #link : "https://www.youtube.com/embed/U_Iyc5wH1EA?autoplay=1"
+    - title : "表情自然生動"
+      images:
+      - "images/face_landmark.png"
+      content : "運用 Face Landmark Detection 精準掌握及控制人物表情動作"
+      button:
+        enable : false
+        label : "Check it out"
+        link : "#"
+      #youtube:
+        #enable : true
+        #link : "https://www.youtube.com/embed/U_Iyc5wH1EA?autoplay=1"
+    - title : "臉部合成技術"
+      images:
+      - "images/合成技術.png"
+      content : "運用獨家技術，將多人的局部特徵擷取並融合於目標人物之中，成為虛擬人主播"
       button:
         enable : false
         label : "Check it out"
@@ -41,7 +63,6 @@ service:
       youtube:
         enable : true
         link : "https://www.youtube.com/embed/U_Iyc5wH1EA?autoplay=1"
- 
 
 call_to_action:
   enable : false

content/AI國際代言人/_index.en.md

@@ -10,20 +10,42 @@ service:
   enable : true
   service_item:
     # service item loop
-    - title : "Multi-lingual AI Spokesgirl"
+    - title : "Multilingual AI Video"
       images:
-      content : "Virtual spokesgirl help you save the costs of shooting and labor, and free right of publicity"
+      content : "Our virtual presenters are created with deep learning and neural network, AI Video would help you save the costs of shooting and time. With just 3 steps, you can easily create video online. First, upload scripts. Second, upload background images. Last, choose the presenter you like. A fine video is ready in 3-5 minutes with everything all set."
       button:
         enable : false
         label : "Check it out"
         link : "#"
       youtube:
         enable : true
-        link : "https://www.youtube.com/embed/E4Dt7eU3WCo?autoplay=1"
+        link : "https://www.youtube.com/embed/agLGyBiCUVQ?autoplay=1"
     - title : "Text To Video Technique"
       images:
       - "images/texttovideo.webp"
-      content : "Only text content is needed to generate a virtual host speaking synchronously for you."
+      content : "Combined with Text To Speech y Audio To Video. Only text content is needed to generate a virtual presenter speaking synchronously for you."
+      button:
+        enable : false
+        label : "Check it out"
+        link : "#"
+      #youtube:
+        #enable : true
+        #link : "https://www.youtube.com/embed/U_Iyc5wH1EA?autoplay=1"
+    - title : "Rich And Vivid Expression"
+      images:
+      - "images/face_landmark.png"
+      content : "Track and detect facial expression and head movement by Face Landmark Detection."
+      button:
+        enable : false
+        label : "Check it out"
+        link : "#"
+      #youtube:
+        #enable : true
+        #link : "https://www.youtube.com/embed/U_Iyc5wH1EA?autoplay=1"
+    - title : "Face Swap With High Fidelity"
+      images:
+      - "images/合成技術.png"
+      content : "Based on exclusive technology to capture and integrate the features of multiple people into the target person to create a virtual person."
       button:
         enable : false
         label : "Check it out"

layouts/AI國際代言人/list.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 
-{{ partial "page-header.html" . }}
+{{ partial "page-header-video.html" . }}
 
 {{ if .Params.service.enable }}
 {{ with .Params.service }}
@@ -28,7 +28,7 @@
         {{ else }}
         <div {{if gt (len .images) 1}}class="slider" {{end}}>
           {{ range .images }}
-          <img src="{{ . | absURL }}" class="img-fluid">
+          <img src="{{ . | absURL }}" class="img-fluid img-shadow">
           {{ end }}
         {{ end }}
         </div>
@@ -51,7 +51,7 @@
         {{ else }}
         <div {{if gt (len .images) 1}}class="slider" {{end}}>
           {{ range .images }}
-          <img src="{{ . | absURL }}" class="img-fluid">
+          <img src="{{ . | absURL }}" class="img-fluid img-shadow">
           {{ end }}
         </div>
         {{ end }}

layouts/partials/footer.html

@@ -1,4 +1,4 @@
-<footer class="bg-light section pb-0">
+<footer class="bg-light section section__footer pb-0">
   <div class="container">
     <div class="row">
       <!-- <div class="col-md-3 col-sm-6 mb-5">

layouts/partials/head.html

@@ -20,7 +20,9 @@
   {{ "<!--Favicon-->" | safeHTML }}
   <link rel="shortcut icon" href="{{ `images/favicon.png` | absURL }}" type="image/x-icon">
   <link rel="icon" href="{{ `images/favicon.png` | absURL }}" type="image/x-icon">
-
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&display=swap" rel="stylesheet">
   
   {{ with .Params.Image }}
   <meta property="og:image" content="{{ . | absURL }}" />

layouts/partials/page-header-video.html

@@ -0,0 +1,13 @@
+<section class="section sec-video">
+  <div class="container text-center">
+    <h1 class="display-3 title">{{ .Title | markdownify }}</h1>
+    {{ with .Params.subtitle }}
+    <p class="subtitle">{{ . | markdownify }}</p>
+    {{ end }}
+    {{ if .Params.button }}
+    {{ with .Params.button }}
+    <a href="http://ai.choozmo.com/"><button class="btn btn btn-sm btn-primary learnMore">{{ . | markdownify }}</button></a>
+    {{ end }}
+    {{ end }}
+  </div>
+</section>

layouts/pricing/list.html

@@ -84,7 +84,7 @@
         <img src="{{ .image | absURL }}" class="img-fluid">
       </div>
       <div class="col-lg-5 col-md-6">
-        <h2 class="section-title">{{ .title | markdownify }}</h2>
+        <h2 class="section-title action-title">{{ .title | markdownify }}</h2>
         {{with .content }}<p class="mb-4">{{ . | markdownify }}</p>{{ end }}
         {{ if .button.enable }}
         {{ with .button }}