add trends

layouts/index.html

@@ -13,14 +13,14 @@
 
         {{ partial "carousel.html" . }}
 
-        {{ partial "visualfeature.html" . }}
+        {{ partial "trends.html" . }}
 
-        {{ partial "testimonials.html" . }}
-
-        {{ partial "features.html" . }}
+        {{ partial "videoDemo.html" . }}
 
         {{ partial "videos.html" . }}
 
+        {{ partial "features.html" . }}
+
         {{ partial "comparison.html" . }}
 
         {{ partial "see_more.html" . }}

layouts/partials/carousel.html

@@ -1,7 +1,7 @@
 {{ if isset .Site.Params "carousel" }}
 {{ if .Site.Params.carousel.enable }}
 {{ if gt (len .Site.Data.carousel) 0 }}
-<section>
+<section style="margin-bottom: 0px;">
     <div class="home-carousel">
         <div class="dark-mask"></div>
         <div class="container">

layouts/partials/comparison.html

@@ -12,8 +12,8 @@
                     <div class="box-simple">
                         <h3 class="video__title"></h3>
                         <p class="video__desc">ChoozMo擅長以數據行銷概念，結合獨創AI視覺影像為客戶品牌及產品特色傳達理念。我們具備商業策略 、數據技術、影像製作的能力。
-                            ​豐富專案經驗，具備優異技術工程師，以及良好溝通能力，結合資訊數據蒐集及分析，評估影片內容與市場現況，提供客戶可行的建議 ，強效的戰略替客戶在險峻疫情下拓展跨國際遠距行銷新銷售市場。
-                            <br>選擇ChoozMo為您的企業、品牌、商品、形象做最完整的影像傳達，提供最優質的服務，歡迎洽詢合作。
+                            ​具備豐富專案經驗，以及良好溝通能力，結合資訊數據蒐集及分析，評估影片內容與市場現況，提供客戶可行的建議 ，強效的戰略替客戶在險峻疫情下拓展跨國際遠距行銷新銷售市場。
+                            <br>選擇ChoozMo為您的企業、品牌、商品、形象做最完整的影像傳達，提供最優質的服務。
                             </p>
                         <a href="https://docs.google.com/forms/d/e/1FAIpQLSeygs4xXy-Xxeh2w9rI4zuQNFutLP_71Bwxo5hqqs2Ca-u5VA/viewform" class="btn btn-lg">洽詢專案製作</a>
                     </div>

layouts/partials/trends.html

@@ -0,0 +1,27 @@
+<!-- 趨勢日報內容 -->
+{{ if isset .Site.Params "trends" }}
+{{ if .Site.Params.trends.enable }}
+{{ if gt (len .Site.Data.trends) 0 }}
+<section class="bar background-gray mb-0">
+    <div class="container">
+        <div class="heading text-center">
+            <h2>趨勢排行</h2>
+        </div>
+        <div class="col-md-12">
+            <div class="row row__rank">
+            {{ range $index, $element := sort .Site.Data.trends "weight" }}
+                <div class="col-6 col-md-3 rank">
+                    <div class="box-simple rank__box">
+                        <span class="rank__num">{{ $element.weight | markdownify }}</span>
+                        <h3 class="rank__word">{{ $element.name | markdownify }}</h3>
+                    </div>
+                </div>
+            {{ end }}
+            </div>
+        </div>
+    </div>
+</section>
+{{ end }}
+{{ end }}
+{{ end }}
+

layouts/partials/videoDemo.html

@@ -0,0 +1,54 @@
+{{ if .Site.Params.videoDemo.enable }}
+{{ if gt (len .Site.Data.videoDemo) 0 }}
+<section class="bar background-white mb-0">
+    <div class="container">
+        <div class="heading text-center">
+            <h2>AI 短影片</h2>
+        </div>
+        <div class="col-md-12">
+            <div class="row">
+                <div class="col-md-6 video__col video__steps">
+                    <div class="video-steps">
+                        <div class="steps__box">
+                            <div class="steps__num">
+                                1
+                            </div>
+                            <div>
+                                <i class="fas fa-heading steps__icon"></i>
+                                <p class="steps__name">命名影片</p>
+                            </div>
+                        </div>
+                        <div class="steps__box">
+                            <div class="steps__num">
+                                2
+                            </div>
+                            <div>
+                                <i class="fas fa-scroll steps__icon"></i>
+                                <p class="steps__name">輸入講稿</p>
+                            </div>
+                        </div>
+                        <div class="steps__box">
+                            <div class="steps__num">
+                                3
+                            </div>
+                            <div>
+                                <i class="fas fa-images steps__icon"></i>
+                                <p class="steps__name">輸入背景圖片</p>
+                            </div>
+                        </div>
+                    </div>
+                    <a href="https://docs.google.com/forms/d/e/1FAIpQLSeygs4xXy-Xxeh2w9rI4zuQNFutLP_71Bwxo5hqqs2Ca-u5VA/viewform" class="btn btn-lg btn-video">洽詢專案製作</a>
+                </div>
+                <div class="col-md-6 video__col">
+                    <div class="box-simple box__video">
+                        <iframe src="https://www.youtube.com/embed/E4Dt7eU3WCo?autoplay=1" frameborder="0" style="width: 100%; height: 220px;"></iframe>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+{{ end }}
+{{ end }}
+
+

layouts/partials/videos.html

@@ -11,9 +11,6 @@
             {{ range $index, $element := sort .Site.Data.videos "weight" }}
                 <div class="col-md-6 video__col">
                     <div class="box-simple box__video">
-                        {{ with $element.url }}
-                        <a href="{{ $element.url }}">
-                        {{ end }}
                         {{ with $element.url }}
                         </a>
                         {{ end }}

static/css/custom.css

@@ -275,4 +275,86 @@
       box-shadow: 0 0 0 transparent;
   }
 
-}
+}
+
+.row__rank {
+  height: min-content;
+}
+
+.rank__box {
+  min-height: min-content;
+}
+
+.rank .rank__word {
+  display: inline-block;
+  font-weight: 500;
+  position: relative;
+}
+
+.rank .rank__word::after {
+  position: absolute;
+  content: " ";
+  width: 100%;
+  height: 2px;
+  left: 20%;
+  top: 90%;
+  background-color: #499aa8af;
+}
+
+.rank__num {
+  display: inline-block;
+  font-size: 3.5rem;
+  color: #38a7bb;
+  font-style: italic;
+  font-weight: 600;
+}
+
+.video__steps {
+  margin-top: 6rem;
+}
+
+.btn-video {
+  text-align: center;
+  display: block;
+  width: 18rem;
+  margin: 1rem auto;
+}
+
+@media (max-width: 992px) {
+  .video__steps {
+    margin-top: 1rem;
+  }
+}
+
+.video-steps {
+  display: flex;
+  text-align: center;
+
+}
+
+.steps__box {
+  flex: 20%;
+  position: relative;
+}
+
+.steps__icon {
+  font-size: 5rem;
+  color: #38a7bb;
+}
+
+.steps__name {
+  font-size: 1.8rem;
+  color: rgb(68, 67, 67);
+  margin-bottom: 1rem;
+}
+
+.steps__num {
+  position: absolute;
+  left: 15%;
+  top: -2.5rem;
+  font-size: 4rem;
+  color: #72969c;
+  font-weight: 500;
+}
+
+

webSite/config.toml

@@ -16,8 +16,8 @@ paginate = 10
 
 
 [outputs]
-  home = ["HTML"]
-  page = ["HTML"]
+ home = ["HTML"]
+ page = ["HTML"]
 
 
 [menu]
@@ -30,6 +30,12 @@ paginate = 10
     url  = "/"
     weight = 1
 
+[[menu.main]]
+    identifier="login"
+    name = "登入"
+    url  = "http://ai.choozmo.com"
+    weight = 2
+
 [[menu.main]]
     identifier="立即洽詢"
     name = "立即洽詢"
@@ -140,8 +146,11 @@ paginate = 10
     # at 'exampleSite/data/carousel'.
     # For more informtion take a look at the README.
 
-[params.visualfeature]
+[params.trends]
     enable = true
+
+[params.visualfeature]
+    enable = false
     # All features are defined in their own files. You can find example items
     # at 'exampleSite/data/features'.
     # For more informtion take a look at the README.
@@ -153,13 +162,16 @@ paginate = 10
     # For more informtion take a look at the README.
 
 [params.testimonials]
-    enable = true
+    enable = false
     # All testimonials are defined in their own files. You can find example items
     # at 'exampleSite/data/testimonials'.
     # For more informtion take a look at the README.
     title = "服務項目"
     subtitle = "我們替您傳遞價值，將值得說的，好好說得精采"
 
+[params.videoDemo]
+    enable = true
+
 [params.videos]
     enable = true
     title = "Testimonials"

webSite/data/carousel/aivideo.yaml

@@ -1,4 +1,4 @@
-weight: 3
+weight: 1
 title: 獨家AI-短影片<br>助攻國際商機
 description: 
   <ul class="list-style-none">

webSite/data/carousel/design.yaml

@@ -1,9 +0,0 @@
-weight: 1
-title: 不畏疫情!線上商機開發<br>故事行銷打動消費者
-description: 
-  <ul class="list-style-none">
-    <li>故事行銷可為事物附加心理價值</li>
-    <li>改變認知價值，用故事行銷品牌，連結消費者情感共鳴而創造價值，感動消費者的心</li>
-    <li>搭配視覺呈現敘述好故事是數位行銷時代必行的趨勢</li>
-  </ul>
-image: "img/carousel/Content Marketing.png"

webSite/data/trends/1.yaml

@@ -0,0 +1,2 @@
+weight: 1
+name: "Delta病毒"

webSite/data/trends/2.yaml

@@ -0,0 +1,2 @@
+weight: 2
+name: "紓困補助"

webSite/data/trends/3.yaml

@@ -0,0 +1,2 @@
+weight: 3
+name: "紓困補助"

webSite/data/trends/4.yaml

@@ -0,0 +1,2 @@
+weight: 4
+name: "紓困補助"

webSite/data/trends/5.yaml

@@ -0,0 +1,2 @@
+weight: 5
+name: "Delta病毒"

webSite/data/trends/6.yaml

@@ -0,0 +1,2 @@
+weight: 6
+name: "紓困補助"

webSite/data/trends/7.yaml

@@ -0,0 +1,2 @@
+weight: 7
+name: "紓困補助"

webSite/data/trends/8.yaml

@@ -0,0 +1,2 @@
+weight: 8
+name: "紓困補助"

webSite/data/videoDemo/1.yaml

@@ -0,0 +1,4 @@
+weight: 1
+name: "新聞報導式 AI 主播"
+description: "強化關鍵說服力，適合電子塑膠等外銷產品"
+url: "https://www.youtube.com/embed/E4Dt7eU3WCo?autoplay=1"