LP template

layouts/index.html

@@ -9,27 +9,15 @@
 
         {{ partial "nav.html" . }}
 
-       {{ partial "carousel.html" . }} 
+       {{ partial "LP_components/hero.html" . }} 
 
-        <!--  partial "trends.html"  -->
-<!-- 
-        {{ partial "newsanchor.html" . }}
+       {{ partial "LP_components/use_cases.html" . }}
 
-        {{ partial "videoDemo.html" . }}
+       {{ partial "LP_components/steps.html" . }}
 
-        {{ partial "videos.html" . }}
+       {{ partial "LP_components/features.html" . }}
 
-        {{ partial "features.html" . }}
-
-        {{ partial "comparison.html" . }}
-
-        {{ partial "see_more.html" . }}
-
-        {{ partial "steps.html" . }} 
-
-        {{ partial "manywords.html" . }} -->
-
-        {{ partial "content-aianchor.html" . }}
+       {{ partial "LP_components/blogs_tab.html" . }}
 
         {{ partial "footer.html" . }}
 
@@ -37,6 +25,27 @@
     <!-- /#all -->
 
     {{ partial "scripts.html" . }}
+    <script>
+      function tabLP () {
+            console.log('pass');
+            if(('.m-tabs').length){
+                  // Show the first tab by default
+              $('.blog-tabs-stage>div').hide();
+              $('.blog-tabs-stage>div:first').show();
+              $('.blog-tabs-nav li:first').addClass('blog-tab-active');
+
+              // Change tab class and display content
+              $('.blog-tabs-nav a').on('click', function(event){
+                  event.preventDefault();
+                  $('.blog-tabs-nav li').removeClass('blog-tab-active');
+                  $(this).parent().addClass('blog-tab-active');
+                  $('.blog-tabs-stage>div').hide();
+                  $($(this).attr('href')).show();
+              });
+            }
+        }
+        tabLP();
+    </script>
 
   </body>
 </html>

layouts/partials/LP_components/blogs_tab.html

@@ -0,0 +1,69 @@
+<section class="sec-blogtab">
+    <div class="container">
+        <h2 class="blogtab-title">BLOG</h2>
+        <div class="row">
+            <div class="col-md-12">
+                <div class="blog-tabs">
+                    <ul class="blog-tabs-nav">
+                      <li><a href="#blog-tab-1">AI主播是什麼?</a></li>
+                      <li><a href="#blog-tab-2">誰是AI主播韓小夏(Summer Hen)？</a></li>
+                      <li><a href="#blog-tab-3">AI主播使用什麼技術？</a></li>
+                      <li><a href="#blog-tab-4">全球有哪些AI主播？</a></li>
+                      <li><a href="#blog-tab-5">新聞主播的工作內容是什麼？</a></li>
+                      <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>
+                        </div>
+                      </div>
+                      <div id="blog-tab-2" class="blog-tab-box">
+                        <div class="blog-txt">
+                            <p>「AI主播」韓小夏(Summer Hen)是集仕多股份有限公司(ChoozMo inc) 所製作的台灣第一個AI主播。 「AI主播」韓小夏是個人工智能新聞主播，擬真程度與人類表現驚人地相當高。它不僅具有與新聞主持人的特色和聲音，而且 還模仿了一般主播做出的小動作，例如在報導新聞時展現一些手勢。集仕多股份有限公司(ChoozMo inc)使用獨家的技術，通過深度學習與機器學習技術 學習真人的動作及表情，學習聲音的細節、說話的方式、面部表情、她的嘴唇和她移動身體的方式，生成出高度擬真的AI主播韓小夏。</p>
+                        </div>
+                      </div>
+                      <div id="blog-tab-3" class="blog-tab-box">
+                        <div class="blog-txt">
+                            <p>「AI主播」主要運用深度神經網路、深度學習、Deep Fake技術透過虛擬人技術的的支持下， 通過人臉的關鍵特色偵測、人臉特徵擷取、臉部重構、 唇語辨別、情感及表情的分析等多項先進科技合成AI主播， 並結合圖像及語音等資料建立模型，並且進行模型的訓 練精準化模型，生成與真人高度相似的的AI虛擬分身模型，進而合成AI主播。 合成的AI主播能夠將所輸入的中英文 文稿自動生成相對應之影片，在播報過程中，AI主播的音頻、表情以及唇語嘴形可以保持自然一致，AI主播完全展現 出與真人主播無差異的資訊傳達效果。</p>
+                        </div>
+                      </div>
+                      <div id="blog-tab-4" class="blog-tab-box">
+                        <div class="blog-txt">
+                            <p>韓國首位AI主播日前正式上工，引起網友熱烈討論，與真人幾乎無差別的發音及動作神態引發關注，網友感嘆科技進步同時 不免感到相當憂心，作為AI主播原型的主播金柱夏也直呼要更努力，才不會被AI主播取代。
+                                韓國電視台MBN推出全國首名AI主播，這名以MBN當家主播金柱夏為原型的AI主播「AI金柱夏」是MBN與人工智慧（AI） 開發公司MoneyBrAIn合作研發，只要在系統鍵入1000字以內的原稿，就能自動產生播報畫面。
+                                MoneyBrAIn公司代 表張世榮接受媒體訪問時表示，新聞講求即時性，有了AI主播，無論在什麼時後發生重大新聞，都可快速即時提供播報畫面 MBN表示，「使用AI主播可在突發災難狀況時，迅速向觀眾播報新聞內容，
+                                且能一天24小時持續工作」，並可節省下大量 人力、時間和費用成本，用於嘗試製作其他新節目也能有效節約資源。AI金柱夏的影片播出後，可以看到許多網友在MBN 的YouTube頻道中留言，對AI主播的逼真程度感到驚艷，
+                                感嘆科技進步之快，「完全看不出來是AI」，也有人直呼「好可怕 ，雖然很方便，但工作機會可能又要減少了」。金柱夏本人表示，在看到AI主播的表現後，「對於AI技術總有一天可能威脅 到我的工作而感到不安」，但她也說，
+                                會更加努力及全面的傳達屬於人類的情感，這點是AI主播目前還無法做到的。也有不願 透露身分的主播對媒體表示，在AI主播出現後，以真人主播進行的新聞節目競爭預期更加激烈，可望激發出後續更具感性及趣味 的節目內容。
+                                韓國著名 YouTuber「Rui」 （루이）在之前證實，過去在影片中實際露臉的面貌，其實是由南韓軟體技術公司 dob Studio （디오비스튜디）以人工智慧技術打造。依照”扮演” YouTuber「Rui」的本人接受採訪時表示，實際上是因為希望成為一名歌手 ，但是在南韓演藝界極度重視外表的情況下，接受與 dob Studio 合作，透過深度學習的技術，將統計數據中最受歡迎面容組 合，以人工智慧方式動態合成在「Rui」本人在影片中的臉譜上，如AI主播一般 ，運用Deepfake技術， dob Studio 將深 度學習組合出的面容套用在影片內容中，因此實際上僅有頸部以下身體、頭髮與聲音部分為「Rui」本人。除了 YouTube 影片 內容藉由 dob Studio 合成面容，包含在 Instagram 上的靜態照片內容，其實也是藉由人工智慧技術合成。而借助人工智慧 創造的虛擬人物網紅、實況主，在目前相關技術持續精進之下，顯然也有越來越多應用可能性，例如可播報新聞的AI主播，虛擬實 況主，日本 Hololive 便是提供讓人以虛擬人物形式進行實況直播，而南韓 MBN 電視台也以當紅主播金柱夏形象，與人工智慧技 術公司。MoneyBrAIn 合作打造人工智慧AI主播「AI 金柱夏」 （AI 김주하），藉此協助新聞內容播報。
+
+
+中國在AI主播的發展市場上，也陸續發表了多款AI合成主播，這款被命名「新小浩」的站立式AI主播，仍然以 新華社主播邱浩為原型，在聲音和圖像兩大引擎上有了較大的優化和突破。在聲音方面，採用領先的波形建模技術生 成音頻，大大提升了合成音頻的表現力和真實度，使聲音更具起伏及情感。在圖像方面，通過模型優化及多重數據的使用， 實現更加逼真的表情合成、肢體動作與語義的恰當匹配以及更加自然的唇動及嘴形效果。「新小浩」不僅能坐著播報新聞，還 能站起來，帶著手勢、姿態等多種肢體動作聲情並茂地播報新聞，更加智能，更接近於真人。對於引人關注的新推出的AI女主播 ，基於AI合成主播更加成熟的技術，AI女主播播報效果和穩定性顯著提升。在2018年舉行的第五屆世界互聯網大會上，新華社聯合搜 狗發布全球首個合成新聞主播——「AI合成主播」，運用最新人工智慧技術，創造出與真人主播擁有同樣播報能力的「分身」，引起了世 界的關注。
+
+
+由三星旗下獨立實驗室STAR Labs孵化出NEON虛擬人，之所以叫NEON，是因為NEON一詞源自NEO（新）+ humaN（人類）。 NEON虛擬人在對人物原始面部、聲音等數據進行捕捉並學習之後，可以自主創建未錄入過的新表情、新動作、新對話，甚至能 說其他語言，可應用於AI主播等層面，未來的應用相當的廣大。NEON虛擬人不只是百科般的語音助手,而是能像真人一樣快速響 應對話,做出真實表情神態的夥伴。三星Star labs戰略負責人Bob Lian提到：「我們希望創造一個有自己的表情、行為、情感、 甚至感覺和記憶的新生命。」
+                            </p>
+                        </div>
+                      </div>
+                      <div id="blog-tab-5" class="blog-tab-box">
+                        <div class="blog-txt">
+                            <p>新聞主播是通過報導在地方、國家和國際層面上發生的新聞故事和事件來通知公眾的記者。作為電視新聞廣播的首席記者，他們利用自己的公開演講技巧準確而簡潔地將新聞傳達給觀眾。正如職位所暗示的那樣，他們是共同主持或主持新聞節目的專業人士。在現場記者發表各自的故事後，他們保持節目片段之間的連續性。
+                                成功的新聞主播擁有追隨者，即在特定市場中信任並偏愛他們而不是其他選擇的觀眾。一些主播因報導歷史上的特定事件而退休多年後仍被人們記住。已故的沃爾特·克朗凱特（Walter Cronkite）當然就是這種情況，他在 CBS 的 19 年職業生涯包括報導 1963 年約翰·肯尼迪總統遇刺事件和 1969 年首次登月。</p>
+                        </div>
+                      </div>
+                      <div id="blog-tab-6" class="blog-tab-box">
+                        <div class="blog-txt">
+                            <p>
+                                建立輸入文稿與輸出音頻訊息的關聯，在圖像的生成技術中，使用人的臉孔辨識，以及三維的臉部重建、表情建模以及肢體動作模型， 建立輸入的文稿、輸出的音頻和視覺動畫的關聯及合成，最終產出栩栩如生AI主播。
+                            </p>
+                        </div>
+                      </div>
+                      <button class="btn-light">閱讀更多 ></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>

layouts/partials/LP_components/features.html

@@ -0,0 +1,87 @@
+<section class="sec-features">
+    <div class="container text-center">
+        <h2 class="features-title"><strong>4</strong>大特色</h2>
+        <div class="row">
+            <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="">
+                </div>
+            </div>
+            <div class="col-xs-12 col-md-6 features-col">
+                <div class="features-block">
+                    <span class="features-num">1</span>
+                    <div>
+                        <h3>輸入文字腳本及素材<br>一鍵輸出合成影片</h3>
+                        <ul class="features-list">
+                            <li>只需等待數分鐘即產製完成</li>
+                            <li>可上傳圖片或是影片作為背景</li>
+                            <li>生成MP4檔</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-xs-12 col-md-6 features-col">
+                <div class="features-block">
+                    <span class="features-num">2</span>
+                    <div>
+                        <h3>多位AI虛擬人物選擇</h3>
+                        <ul class="features-list">
+                            <li>無人物肖像權問題</li>
+                            <li>人物表情、動作自然</li>
+                            <li>因應主題，選擇合適人物</li>
+                        </ul>
+                    </div>
+                </div>
+            </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="">
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <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="">
+                </div>
+            </div>
+            <div class="col-xs-12 col-md-6 features-col">
+                <div class="features-block">
+                    <span class="features-num">3</span>
+                    <div>
+                        <h3>投影片轉製為影片</h3>
+                        <ul class="features-list">
+                            <li>輸入文字腳本及投影片連結
+                                <br>一鍵完成影片
+                            </li>
+                            <li>生成MP4檔</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-xs-12 col-md-6 features-col">
+                <div class="features-block">
+                    <span class="features-num">4</span>
+                    <div>
+                        <h3>多語言支援</h3>
+                        <ul class="features-list">
+                            <li>支援中英文內容</li>
+                            <li>可加入字幕</li>
+                        </ul>
+                    </div>
+                </div>
+            </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="">
+                </div>
+            </div>
+        </div>
+        <button class="btn-light">取得影片</button>
+        <button class="btn-dark">立即開始</button>
+    </div>
+</section>

layouts/partials/hero.html → layouts/partials/LP_components/hero.html

@@ -2,11 +2,11 @@
     <div class="container">
         <div class="row">
             <div class="col-md-6">
-                <h2>製作影片 一鍵合成</h2>
-                <p>輸入文字素材，即速產生影片
-                    創作影片，不再需要錄影機、演員、麥克風繁雜器材。
+                <h2 class="hero-title">製作影片 一鍵合成</h2>
+                <p class="hero-txt">輸入文字素材，即速產生影片<br>
+                    創作影片，不再需要錄影機、演員、麥克風繁雜器材。<br>
                     大幅省下時間、人力、器材成本。</p>
-                <button>立即合成</button>
+                <button class="hero-btn">立即開始</button>
             </div>
             <div class="col-md-6">
                 <img src="" alt="">

layouts/partials/LP_components/steps.html

@@ -0,0 +1,36 @@
+<section class="sec-steps">
+    <div class="container text-center">
+        <h2 class="steps-title"><strong>3</strong>步驟快速合成影片</h2>
+        <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-txt">
+                        <span>1</span>
+                        <h3 class="steps-sub">選擇AI人物</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="col-xs-12 col-md-4">
+                <div class="steps-block">
+                    <div class="steps-imgfr"><img src="" alt=""></div>
+                    <div class="steps-txt">
+                        <span>2</span>
+                        <h3 class="steps-sub">輸入腳本文字</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="col-xs-12 col-md-4">
+                <div class="steps-block">
+                    <div class="steps-imgfr"><img src="" alt=""></div>
+                    <div class="steps-txt">
+                        <span>3</span>
+                        <h3 class="steps-sub">輸入背景圖片素材</h3>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <button class="btn-light">取得影片</button>
+        <button class="btn-dark">立即開始</button>
+    </div>
+</section>

layouts/partials/nav.html

@@ -17,24 +17,28 @@
             <!--/.navbar-header -->
 
             <div class="navbar-collapse collapse" id="navigation">
-                <ul class="nav navbar-nav navbar-right">
+                <ul class="nav navbar-nav navbar-left">
                   {{ $current := . }}
                   {{ range .Site.Menus.main }}
                   {{ $topLevel := replace .URL "/" "" }}
                   <li class="dropdown{{ if eq $current.RelPermalink .URL | or (eq $current.Type $topLevel) | or (and (eq (default (trim .URL "/") .Identifier) "blog") (in (slice "taxonomy" "taxonomyTerm") $current.Kind)) }} active{{ end }}">
                     {{ if .HasChildren }}
-                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ .Name }} <span class="caret"></span></a>
+                      <a href="#" class="dropdown-toggle main-link" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ .Name }} <span class="caret"></span></a>
                     <ul class="dropdown-menu">
                       {{ range .Children }}
                         <li><a href="{{ .URL }}">{{ .Name }}</a></li>
                       {{ end }}
                     </ul>
                     {{ else }}
-                    <a href="{{ .URL }}">{{ .Name }}</a>
+                    <a href="{{ .URL }}" class="main-link">{{ .Name }}</a>
                     {{ end  }}
                   </li>
                   {{ end }}
                 </ul>
+                <ul class="nav navbar-nav navbar-right">
+                  <li><a href="#" class="signin-link">登入</a></li>
+                  <li><a href="#" class="signup-link">註冊</a></li>
+                </ul>
             </div>
             <!--/.nav-collapse -->
 

layouts/shortcodes/vtuber.html

@@ -127,7 +127,7 @@
                             </div>
                           </div>
                         </div>
-                      </div>
+                    </div>
                 </div>
             </div>
         </div>

static/css/custom.css

@@ -1,4 +1,302 @@
 /* your styles go here */
+.text-center {
+  text-align: center;
+}
+/* LP-components nav */
+#navigation .navbar-nav .main-link {
+  background-color: white;
+  border-top: none;
+  color: black;
+  font-weight: 400;
+  padding: 3px 3px 3px 3px;
+  margin: 18px 12px 18px 12px;
+  font-size: 1.5rem;
+  text-decoration: none;
+}
+
+#navigation .navbar-nav .dropdown.active .main-link {
+  border-bottom: 3px solid #EA5413;
+}
+
+#navigation .navbar-nav .signin-link {
+  padding: 8px 18px 8px 18px;
+  margin: 13px 10px 13px 10px;
+  text-decoration: none;
+  color: #EA5413;
+  font-size: 1.5rem;
+  font-weight: 400;
+  border: 1px solid #EA5413;
+  border-radius: 3rem;
+}
+
+#navigation .navbar-nav .signin-link:hover, #navigation .navbar-nav .signin-link:focus {
+  
+  background-color: transparent;
+}
+
+#navigation .navbar-nav .signup-link {
+  padding: 8px 18px 8px 18px;
+  margin: 13px 10px 13px 10px;
+  text-decoration: none;
+  color: white;
+  font-size: 1.5rem;
+  font-weight: 400;
+  border: 1px solid #EA5413;
+  border-radius: 3rem;
+  background-color: #EA5413;
+}
+
+#navigation .navbar-nav .signup-link:hover, #navigation .navbar-nav .signup-link:focus {
+  background-color: #EA5413;
+}
+
+/* sec-hero */
+.sec-hero {
+  padding: 6rem 0;
+}
+
+.sec-hero .hero-title {
+  font-size: 3.5rem;
+  letter-spacing: 1px;
+}
+
+.sec-hero .hero-txt {
+  font-size: 1.8rem;
+  letter-spacing: 1px;
+}
+
+.sec-hero .hero-btn {
+  border: none;
+  outline: none;
+  border-radius: 3rem;
+  margin-top: 2rem;
+  padding: 1rem 2.5rem;
+  background: linear-gradient(20deg, #EA5413, #920783);
+  color: white;
+  font-size: 1.8rem;
+  box-shadow: 1px 1px 5px 1px rgba(207, 207, 207, 0.534);
+}
+
+/* sec-usecase */
+.sec-usecase {
+  padding: 3rem 0;
+  position: relative;
+}
+
+.sec-usecase::after {
+  content: " ";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 40%;
+  width: 100%;
+  background-color: #FFEBE2;
+  z-index: -1;
+}
+
+.sec-usecase .usecase-title {
+  font-size: 3rem;
+  text-align: center;
+}
+
+.sec-usecase .usecase-sub {
+  font-size: 1.8rem;
+  text-align: center;
+}
+
+.sec-usecase .usecase-block {
+  padding: 0 1rem;
+  z-index: 3;
+}
+
+.sec-usecase .usecase-imgfr {
+  width: 100%;
+  height: 25rem;
+  border-radius: 3px;
+  box-shadow: 0 3px 11px 3px rgba(192, 192, 192, 0.637);
+}
+
+.sec-usecase .usecase-imgfr img {
+  width: 100%;
+  height: 100%;
+}
+
+/* sec-steps */
+.sec-steps {
+  padding: 6rem 0;
+}
+
+.sec-steps .steps-title {
+  font-size: 3rem;
+  text-align: center;
+  letter-spacing: 1px;
+}
+
+.sec-steps .steps-title strong {
+  font-size: 5rem;
+}
+
+.sec-steps .steps-block {
+  padding: 0 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.sec-steps .steps-block::after {
+  position: absolute;
+  bottom: -1rem;
+  left: 0;
+  width: 100%;
+  height: 15rem;
+  background-color: #FFEBE2;
+  content: " ";
+  z-index: -1;
+  border-radius: 2rem;
+}
+
+.sec-steps .steps-imgfr {
+  width: 100%;
+  height: 22rem;
+  border-radius: 3px;
+  box-shadow: 0 3px 11px 3px rgba(192, 192, 192, 0.637);
+}
+
+.sec-steps .steps-imgfr img {
+  width: 100%;
+  height: 100%;
+}
+
+.sec-steps .steps-txt {
+  display: flex;
+  align-items: center;
+}
+
+.sec-steps .steps-txt span {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  background-color: #EA5413;
+  color: white;
+  font-size: 2.5rem;
+  line-height: 40px;
+  border-radius: 50%;
+  text-align: center;
+  margin-right: 1rem;
+}
+
+/* sec-features */
+
+.sec-features {
+  padding: 5rem 0;
+}
+
+.sec-features .features-col {
+  position: relative;
+}
+
+.sec-features .features-col .features-block {
+  position: absolute;
+  left: 10rem;
+  top: 15rem;
+  display: flex;
+}
+
+.sec-features .features-num {
+  display: inline-block;
+  font-size: 12rem;
+  color: #F0F0F0;
+}
+
+.sec-features .features-title {
+  font-size: 3rem;
+  text-align: center;
+  letter-spacing: 1px;
+  padding-bottom: 6px;
+  border-bottom: 8px solid #EA5413;
+  display: inline-block;
+}
+
+.sec-features .features-title strong {
+  font-size: 5rem;
+}
+
+.sec-features .features-imgfr {
+  width: 100%;
+}
+
+.sec-features .features-imgfr img {
+  width: 100%;
+}
+
+.sec-features .features-list {
+  text-align: left;
+}
+
+.blog-tabs {
+  display: flex;
+}
+
+.blog-tabs .blog-tabs-nav {
+  width: 35%;
+  background-color: #F0F0F0;
+  padding: 4rem 1.5rem;
+  list-style: none;
+}
+
+.blog-tabs .blog-tabs-nav li {
+  padding: 10px;
+  border-bottom: 1px dashed grey;
+}
+.blog-tabs .blog-tabs-nav li a {
+  color: #EA5413;
+}
+
+.blog-tabs .blog-tabs-stage {
+  width: 65%;
+  padding: 3.5rem;
+  padding-bottom: 8rem;
+  box-shadow: 1px 1px 10px 2px grey;
+  height: 40rem;
+  overflow: hidden;
+}
+
+.blog-tab-box {
+  height: 95%;
+  overflow: scroll;
+}
+
+.btn-light {
+  color: black;
+  border: 1px solid #EA5413;
+  padding: 1rem 2.5rem;
+  outline: none;
+  background-color: white;
+  margin-top: 4rem;
+  border-radius: 3rem;
+  font-size: 1.8rem;
+  box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
+}
+
+.btn-dark {
+  color: white;
+  border: 1px solid #EA5413;
+  padding: 1rem 2.5rem;
+  outline: none;
+  background-color: #EA5413;
+  margin-top: 4rem;
+  border-radius: 3rem;
+  font-size: 1.8rem;
+  box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
+}
+
+.blog-tabs .btn-light {
+  margin-top: 1.5rem;
+}
+
 #content .container {
   margin-top: 50px;
 }

static/css/style.default.css

@@ -313,10 +313,7 @@ ul.list-style-none {
   letter-spacing: 0.08em;
   border-top: solid 5px transparent;
 }
-.navbar ul.nav > li > a:hover {
-  border-top: solid 5px #38a7bb;
-}
-.navbar ul.nav > li.active > a,
+
 .navbar ul.nav > li.open > a {
   text-decoration: none !important;
   border-top: solid 5px #20616d;

webSite/config.toml

@@ -1,4 +1,4 @@
-baseurl = "https://ai.choozmo.com"
+baseurl = "https://ai.choozmo.com/"
 title = "AI Spokesgirl | 台灣第一個AI合成主播"
 theme = "AI_Video_LP"
 themesDir = "../.."
@@ -29,25 +29,25 @@ page = ["HTML"]
 
 [[menu.main]]
     identifier="home"
-    name = "Home"
+    name = "首頁"
     url  = "/"
     weight = 1
 
 [[menu.main]]
-    identifier="blog"
-    name = "部落格"
-    url  = "/blog/"
+    identifier="login"
+    name = "特色"
+    url  = "http://ai.choozmo.com"
     weight = 2
 
 [[menu.main]]
-    identifier="login"
-    name = "登入"
-    url  = "http://ai.choozmo.com"
+    identifier="blog"
+    name = "部落格"
+    url  = "/blog/"
     weight = 3
 
 [[menu.main]]
-    identifier="立即洽詢"
-    name = "立即洽詢"
+    identifier="聯絡我們"
+    name = "聯絡我們"
     url  = "https://docs.google.com/forms/d/e/1FAIpQLSeygs4xXy-Xxeh2w9rI4zuQNFutLP_71Bwxo5hqqs2Ca-u5VA/viewform"
     weight = 4