Browse Source

update en

SyuanYu 1 year ago
parent
commit
6d5701873d

+ 50 - 17
layouts/index.html

@@ -13,6 +13,27 @@
     {{ partial "components/nav.html" . }}
 
     <div id="home">
+      {{ partial "components/carousel.html" . }}
+      <div class="home-cn">
+        {{ partial "components/main.html" . }}
+        {{ partial "components/serve.html" . }}
+        {{ partial "components/ai-video.html" . }}
+        {{ partial "components/progress.html" . }}
+        {{ partial "LP_components/blogs_tab.html" . }}
+        {{ partial "LP_components/action.html" . }}
+        {{ partial "footer.html" . }}
+      </div>
+      <div class="home-en">
+        {{ partial "components/en/main.html" . }}
+        {{ partial "components/en/serve.html" . }}
+        {{ partial "components/en/ai-video.html" . }}
+        {{ partial "components/progress.html" . }}
+        {{ partial "components/en/action.html" . }}
+        {{ partial "components/en/footer.html" . }}
+      </div>
+    </div>
+
+    <!-- <div id="home">
       {{ partial "components/carousel.html" . }}
       {{ partial "components/main.html" . }}
       {{ partial "components/serve.html" . }}
@@ -21,34 +42,52 @@
       {{ partial "LP_components/blogs_tab.html" . }}
       {{ partial "LP_components/action.html" . }}
       {{ partial "footer.html" . }}
-    </div>
+    </div> -->
 
     <!-- {{ partial "nav.html" . }}
-
     {{ partial "LP_components/hero.html" . }}
-
     {{ partial "LP_components/video.html" . }}
-
     {{ partial "LP_components/use_cases.html" . }}
-
     {{ partial "LP_components/steps.html" . }}
-
     {{ partial "LP_components/features.html" . }}
-
     {{ partial "LP_components/blogs_tab.html" . }}
-
     {{ partial "LP_components/action.html" . }}
-
     {{ partial "LP_components/Footer.html" . }}
-
     {{ partial "LP_components/news.html" . }} -->
-
   </div>
   <!-- /#all -->
 
   {{ partial "components/scripts.html" . }}
 
   <script>
+    $('#home_en').hide();
+    localStorage.setItem('lang', 'cn'); // 預設為中文
+
+    // 切換首頁語言
+    function toggleLang() {
+      let currentLang = localStorage.getItem('lang');
+      if (currentLang === 'en') {
+        localStorage.setItem('lang', 'cn');
+      } else if (currentLang === 'cn') {
+        localStorage.setItem('lang', 'en');
+      }
+      let lang = localStorage.getItem('lang');
+      toggleTemplate(lang);
+    }
+
+    function toggleTemplate(lang) {
+      if (lang === 'en') {
+        $('.home-en').show();
+        $('.home-cn').hide();
+      } else {
+        $('.home-en').hide();
+        $('.home-cn').show();
+      }
+      $('html, body').animate({
+        scrollTop: $(`.home-${lang}`).offset().top
+      }, 0);
+    }
+
     function tabLP() {
       if (('.m-tabs').length) {
         // Show the first tab by default
@@ -98,12 +137,6 @@
     }
     window.addEventListener('scroll', debounce(checkSlide));
 
-    // $('.navbar-nav .dropdown:nth-of-type(2)').click(function () {
-    //   $('html, body').animate({
-    //     scrollTop: $("#sec-features").offset().top
-    //   }, 1000);
-    // })
-
     var swiper = new Swiper(".carousel", {
       pagination: {
         el: ".swiper-pagination",

+ 16 - 0
layouts/partials/components/en/action.html

@@ -0,0 +1,16 @@
+<section class="sec-action">
+    <div class="container-fluid">
+        <div class="action-clip text-center">
+            <h2 class="mb-0" style="line-height: 46px;">
+                Want to quickly create audiovisual content?
+                <br>
+                Register now and start creating!
+            </h2>
+        </div>
+        <div class="action-triangle">
+        </div>
+    </div>
+    <div class="container text-center">
+        <button class="action-btn" onclick="window.location.href=`/contact/service/`">Contact Us</button>
+    </div>
+</section>

+ 99 - 0
layouts/partials/components/en/ai-video.html

@@ -0,0 +1,99 @@
+<div class="container-fluid position-relative px-0 ai-content" id="ai-video">
+  <div class="tag-item">
+    <img src="imgs/home/裝飾-01.png" alt="">
+    <h5 class="fw-bold" style="right: 8px;">AI Anchor</h5>
+  </div>
+  <div class="container">
+    <h4>
+      AI Virtual Avatar
+    </h4>
+
+    <div class="row my-5 py-0 py-md-5 justify-content-center align-items-center">
+      <div class="col-12 col-md-6 d-flex justify-content-center">
+        <section>
+          <h2 class="title">Create videos in a click</h2>
+          <p>
+            Create videos quickly simply by uploading text and materials<br>
+            Greatly reduces time, labor, and equipment costs<br>
+            Script content connected<br>
+            You can use our layouts or create your own
+          </p>
+        </section>
+      </div>
+      <div class="col-12 col-md-6 my-5 my-md-0">
+        <div class="position-relative">
+          <img src="/img/背景紫.png" alt="" class="hero-purple">
+          <img src="/img/背景橘.png" alt="" class="hero-orange-s">
+          <img src="/img/textgrp3.png" alt="" class="hero-textgrp">
+          <img src="/img/video.png" alt="" class="hero-video">
+          <img src="/img/放大鏡.png" alt="" class="hero-amplify">
+          <div class="hero-imgfr"><img src="/img/2222.png" alt=""></div>
+        </div>
+      </div>
+      <div class="col-12">
+        <section class="position-relative img-item">
+          <img src="imgs/home/首頁-06.png" alt="">
+          <p>ChoozMo’s R&D team released the 3rd generation of its AI Virtual Avatar with realistic vision and hearing, which is at par with real-life newscasters. Aside from preset layouts, you can contact us for customized avatars and layouts.</p>
+        </section>
+      </div>
+    </div>
+
+    <section class="sec-video">
+      <div class="container">
+        <h2 class="video-title">3rd Generation Presenter – Customized Sample Video</h2>
+        <h2 class="video-mb-title">
+          3rd Generation Presenter
+          <br>
+          Customized Sample Video
+        </h2>
+        <span class="line"></span>
+        <p class="video-text">
+          Collaboration with A.I. News: Event promotion video <br>
+          Western presenter x Customized subtitles x High-resolution avatar
+        </p>
+        <div class="video-box">
+          <iframe src="https://www.youtube.com/embed/rTML9TAsUS8" title="YouTube video player" frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen></iframe>
+        </div>
+      </div>
+    </section>
+    <!-- <div class="d-flex justify-content-center mt-5">
+        <a href="" class="more-btn">
+          點我了解更多
+        </a>
+      </div> -->
+  </div>
+
+  <section class="sec-usecase">
+    <div class="container">
+      <h2 class="usecase-title">Usage scenario</h2>
+      <div class="row">
+        <div class="col-xs-12 col-sm-6 col-md-3">
+          <div class="usecase-block">
+            <div class="usecase-imgfr"><img src="/img/產品介紹.png" alt=""></div>
+            <h3 class="usecase-sub"><i class="fas fa-circle"></i> Product introduction</h3>
+          </div>
+        </div>
+        <div class="col-xs-12 col-sm-6 col-md-3">
+          <div class="usecase-block">
+            <div class="usecase-imgfr"><img src="/img/教育.png" alt=""></div>
+            <h3 class="usecase-sub"><i class="fas fa-circle"></i> Training</h3>
+          </div>
+        </div>
+        <div class="col-xs-12 col-sm-6 col-md-3">
+          <div class="usecase-block">
+            <div class="usecase-imgfr"><img src="/img/A短影片_1.png" alt=""></div>
+            <h3 class="usecase-sub"><i class="fas fa-circle"></i> Information broadcasting</h3>
+          </div>
+        </div>
+        <div class="col-xs-12 col-sm-6 col-md-3">
+          <div class="usecase-block">
+            <div class="usecase-imgfr"><img src="/img/內容創作.png" alt=""></div>
+            <h3 class="usecase-sub"><i class="fas fa-circle"></i> Personal content creation</h3>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</div>

+ 39 - 0
layouts/partials/components/en/footer.html

@@ -0,0 +1,39 @@
+<footer class="footer">
+  <div class="container">
+    <div class="row">
+      <div class="col-xs-12 col-sm-6 px-0">
+        <img src="https://i.imgur.com/P1gNopa.png" alt="" style="width: 100%; max-width: 250px;">
+        <div class="footer-aigirl">Choozmo AI Spokesgirl</div>
+        <div class="footer-follow">Follow us</div>
+        <div class="footer-socials">
+          <a href="https://www.linkedin.com/company/choozmo/">
+            <img src="https://i.imgur.com/qnd9QrT.png" alt="" width="32px" height="32px">
+            </a>
+          <a href="https://www.facebook.com/choozmo/">
+            <img src="https://i.imgur.com/WdCAhSo.png" alt="" width="48px" height="48px">
+            </a>
+          <a href="https://line.me/R/ti/p/@choozmo?from=page">
+            <img src="https://i.imgur.com/dNZ2aGW.png" alt="" width="32px" height="32px">
+          </a>
+          <a href="https://www.instagram.com/choozmo_cmm/">
+            <img src="https://i.imgur.com/pdJPY7m.png" alt="" width="60px" height="60px" style="margin-left: -6px; margin-right: -8px;">
+          </a>
+          <a href="https://twitter.com/ai_cmm">
+            <img src="https://i.imgur.com/qGBzq4J.png" alt="" width="32px" height="28px" style="margin-right: 3px;">
+          </a>
+          <a href="https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg">
+            <img src="https://i.imgur.com/zn6DUY8.png" alt="" width="38px" height="38px">
+          </a>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-6">
+        <div class="footer-contacts">
+          <h5>CONTACT</h5>
+          <div>
+            ChoozMo Inc.<br>9F-9, No. 229, Fuxing 2nd Rd., Zhubei City, Hsinchu County, Taiwan<br>TEL: +886-3-667-0804<br>Email: service@choozmo.com
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>

+ 198 - 0
layouts/partials/components/en/main.html

@@ -0,0 +1,198 @@
+<div id="main">
+  <div class="content" id="info">
+    <section>
+      <img src="https://i.imgur.com/P1gNopa.png" alt="" class="logo mb-3">
+      <h4>
+        Without Ad Type Limitations <br>
+        Combined with Analysis Tools <br>
+        Using AI Automated Systems <br>
+        Your One-Stop Marketing Planner
+      </h4>
+    </section>
+
+    <div class="d-flex mt-4">
+      <img src="/imgs/home/icon-01.png" alt="" width="45">
+      <section>
+        <h3>
+          AI Ad Placement <br>
+          High-speed SEO <br>
+          AI Virtual Avatar
+        </h3>
+      </section>
+    </div>
+    <div>
+      <button class="action-btn" onclick="window.location.href=`/contact/service/`">Contact Us</button>
+    </div>
+  </div>
+
+  <div class="journey-content" id="journey">
+    <div class="container">
+      <h3>ChoozMo Digital Customer Journey</h3>
+      <!-- 手機版 -->
+      <div class="row d-md-none">
+        <div class="col-12 px-5 px-sm-4 title">
+          <h4 class="mb-4">
+            Awareness
+          </h4>
+          <!-- <img src="/imgs/home/icon-02.png" alt=""> -->
+          <!-- <span class="line"></span> -->
+          <section class="list">
+            <h5>Brand and product exposure:</h5>
+            <p>Google Ads (GDN, Search, Local, Shopping), YouTube Ads, Facebook Ads</p>
+            <strong>
+              Ad Placement
+            </strong>
+          </section>
+          <span class="position-relative">
+            <span class="line"></span>
+            <img src="/imgs/home/icon-02.png" alt="">
+          </span>
+        </div>
+        <div class="col-12 px-5 px-sm-4 title">
+          <h4 class="mb-4">
+            Search
+          </h4>
+          <section class="list">
+            <h5>Organic search:</h5>
+            <p>After knowing the brand/product, customer does comparisons with other products</p>
+            <strong>
+              SEO
+            </strong>
+          </section>
+          <span class="position-relative">
+            <span class="line"></span>
+            <img src="/imgs/home/icon-02.png" alt="">
+          </span>
+        </div>
+        <div class="col-12 px-5 px-sm-4 title">
+          <h4 class="mb-4">
+            Reputation
+          </h4>
+          <section class="list">
+            <h5>Word-of-mouth references:</h5>
+            <p>
+              Customers search for brand / product reviews
+            </p>
+            <strong>
+              News and Review Writers
+            </strong>
+          </section>
+          <span class="position-relative">
+            <span class="line"></span>
+            <img src="/imgs/home/icon-02.png" alt="">
+          </span>
+        </div>
+        <div class="col-12 px-5 px-sm-4 title pb-5">
+          <h4>
+            Conversion
+          </h4>
+          <section class="list">
+            <h5>Conversion:</h5>
+            <p>
+              Signups, purchases, visits
+            </p>
+            <strong>
+              Improved Shopping Experience
+            </strong>
+          </section>
+        </div>
+      </div>
+      <!-- 電腦版 -->
+      <div class="row d-none d-md-flex">
+        <div class="col-3 title">
+          <h4>
+            Awareness
+          </h4>
+          <img src="/imgs/home/icon-02.png" alt="">
+        </div>
+        <div class="col-3 title">
+          <h4>
+            Search
+          </h4>
+          <img src="/imgs/home/icon-02.png" alt="">
+        </div>
+        <div class="col-3 title">
+          <h4>
+            Reputation
+          </h4>
+          <img src="/imgs/home/icon-02.png" alt="">
+        </div>
+        <div class="col-3">
+          <h4>
+            Conversion
+          </h4>
+        </div>
+        <div class="col-12">
+          <span class="line"></span>
+        </div>
+        <div class="col-3 d-flex justify-content-center mb-4">
+          <section class="list">
+            <span>
+              <h5>Brand and product exposure:</h5>
+              <p>Google Ads (GDN, Search, Local, Shopping), YouTube Ads, Facebook Ads</p>
+            </span>
+            <strong>
+              Ad Placement
+            </strong>
+          </section>
+        </div>
+        <div class="col-3 d-flex justify-content-center mb-4">
+          <section class="list">
+            <span>
+              <h5>Organic search:</h5>
+              <p>After knowing the brand / product, customer does comparisons with other products</p>
+            </span>
+            <strong>
+              SEO
+            </strong>
+          </section>
+        </div>
+        <div class="col-3 d-flex justify-content-center mb-4">
+          <section class="list">
+            <span>
+              <h5>Word-of-mouth references:</h5>
+              <p>
+                Customers search for brand / product reviews
+              </p>
+            </span>
+            <strong>
+              News and Review Writers
+            </strong>
+          </section>
+        </div>
+        <div class="col-3 d-flex justify-content-center mb-4">
+          <section class="list">
+            <span>
+              <h5>Conversion:</h5>
+              <p>
+                Signups, purchases, visits
+              </p>
+            </span>
+            <strong>
+              Improved Shopping Experience
+            </strong>
+          </section>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="container team-content" id="team">
+    <div class="row justify-content-center align-items-center">
+      <div class="col-12 col-md-5 px-4 px-md-0">
+        <strong>Choozmo Team</strong>
+        <h4>Trusted by investors <br>
+          Technical skills acknowledged by Industry Development Bureau, Taiwan</h4>
+        <ul>
+          <li>Making brands profitable</li>
+          <li>Accurate budget planning | Varied marketing plans</li>
+          <li>Value-for-money | Professional AI recognition</li>
+          <li>In-house R&D team</li>
+        </ul>
+      </div>
+      <div class="col-12 col-md-4 mt-3 mt-md-0">
+        <img src="imgs/home/首頁-03-en.png" alt="">
+      </div>
+    </div>
+  </div>
+</div>

+ 146 - 0
layouts/partials/components/en/serve.html

@@ -0,0 +1,146 @@
+<!-- AI 廣告 -->
+<div class="container-fluid ad-content position-relative" id="ai-ad">
+  <div class="tag-item" style="top: -50px; right: -5vw;">
+    <img src="imgs/home/裝飾-01.png" alt="">
+    <h5 style="right: 40px;">AI Ad</h5>
+  </div>
+  <section class="d-flex justify-content-center">
+    <h4>
+      AI Smart Advertising<br>
+      <strong>Accurate Budgeting | Create the best results wiith less cost than the industry standard</strong>
+    </h4>
+  </section>
+  <div class="row justify-content-center align-items-center px-4 px-lg-0">
+    <div class="col-12 col-lg-3">
+      <img src="imgs/home/首頁-04-en.png" alt="" class="d-lg-block d-none">
+      <img src="imgs/home/首頁-04-en-mb.png" alt="" class="d-lg-none d-block mx-auto">
+    </div>
+    <div class="col-12 col-lg-6 mt-5 mt-lg-0">
+      <ul>
+        <li>
+          <h5>Q: How can I know the most suitable type of advertising I can use?</h5>
+          <p>
+            Using big data analytics techniques, we can recommend the most suitable type of advertising for your
+            business which can accurately capture the target audience without any unnecessary costs.
+          </p>
+        </li>
+        <li>
+          <h5>Q: If I ask someone to help me place ads, doesn’t it mean I’m spending more money?</h5>
+          <p>
+            Asking an AI advertising specialist is better than doing the advertising yourself, since you can save more
+            and get the best results from advertising in the shortest time, without running the risk of guessing and
+            running the wrong type of advertisement which can result in budget wastage.
+          </p>
+        </li>
+        <li>
+          <h5>Q: Why pick ChoozMo?</h5>
+          <p>
+            As a software company with many engineers, ChoozMo has been actively developing in the martech industry.
+            ChoozMo has won numerous awards and government grants and projects. With the team’s skills, the team is
+            capable of providing the latest marketing solutions. ChoozMo is one of the very few companies in Taiwan to
+            be accredited for its AI Advertising techniques, and ChoozMo is one of the top choices for accurate AI
+            advertising.
+          </p>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <div class="d-flex justify-content-center mb-5">
+    <a href="/ad-operation/dm/" class="more-btn">
+      Learn More
+    </a>
+  </div>
+  <div class="row justify-content-center align-items-center mx-auto w-100 py-4 py-sm-5"
+    style="background-color: #efe5ee;">
+    <div class="col-12 col-sm-4 col-lg-3 position-relative">
+      <img src="imgs/home/裝飾-03.png" alt="">
+      <span class="img-text">
+        YouTube Ads
+        <br>
+        Real Views
+      </span>
+    </div>
+    <div class="col-12 col-sm-8 col-lg-4 px-4 px-sm-3 px-lg-0">
+      <h5>Only 1.3 cents per view <br>
+        <strong>
+          Using Google Ads to boost real views from YouTube videos
+          Selectable target audience
+          Performance report included
+          <br>
+        </strong>
+        <small>
+          Customer success story: YouTube ad placement helps their <br> YouTube video reach 580,000 people and 220,000
+          views!
+        </small>
+      </h5>
+    </div>
+    <div class="col-12 col-lg-5 mt-5 mt-lg-0">
+      <img src="imgs/home/首頁-07.png" alt="">
+    </div>
+  </div>
+</div>
+
+<!-- SEO -->
+<div class="container-fluid position-relative pt-4 px-0" id="seo">
+  <div class="tag-item">
+    <img src="imgs/home/裝飾-01.png" alt="">
+    <h5>SEO</h5>
+  </div>
+  <div class="container seo-content">
+    <h4>
+      High-speed SEO
+    </h4>
+    <section class="d-flex flex-column align-items-lg-center justify-content-center px-3 px-sm-0">
+      <p class="my-5">
+        How long does it take to perform SEO? <br>
+        ChoozMo’s High-speed SEO inspects your website, gives you advice for improving your website and recommends
+        suitable keywords for your website.
+        Many of ChoozMo’s customers see their SEO ranking improve in as short as 2 weeks.
+      </p>
+      <div class="d-none d-lg-flex">
+        <ul>
+          <li><strong>➤ Brand Image SEO</strong></li>
+          <li><strong>➤ News SEO</strong></li>
+          <li><strong>➤ Business SEO</strong></li>
+        </ul>
+        <ul>
+          <li>Moves negative reviews, news, and discussions lower into the ranking, giving brands a more positive image.
+          </li>
+          <li>Write an SEO news article, create an AI presenter video, and distribute the news article and video to
+            multiple news outlets</li>
+          <li>Helps businesses create their local brand by writing a recommendation article from a third person
+            perspective</li>
+        </ul>
+      </div>
+      <div class="d-block d-lg-none">
+        <ul class="p-0">
+          <li>
+            <strong class="d-inline-block mb-1">➤ Brand Image SEO</strong> <br>
+            Moves negative reviews, news, and discussions lower into the ranking, giving brands a more positive image.
+          </li>
+          <li class="my-4">
+            <strong class="d-inline-block mb-1">➤ News SEO</strong> <br>
+            Write an SEO news article, create an AI presenter video, and distribute the news article and video to
+            multiple news outlets
+          </li>
+          <li>
+            <strong class="d-inline-block mb-1">➤ Business SEO</strong> <br>
+            Helps businesses create their local brand by writing a recommendation article from a third person
+            perspective
+          </li>
+        </ul>
+      </div>
+    </section>
+    <div class="video-box">
+      <iframe src="https://www.youtube.com/embed/6uMQaljwMig" title="YouTube video player" frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen></iframe>
+    </div>
+    <div class="d-flex justify-content-center">
+      <a href="/seo/dm/" class="more-btn">
+        Learn More
+      </a>
+    </div>
+  </div>
+  <img src="imgs/home/首頁-05.png" alt="" class="bg-img">
+</div>

+ 4 - 4
layouts/partials/components/main.html

@@ -88,12 +88,12 @@
             Conversion
           </h4>
           <section class="list">
-            <h5>口碑參考:</h5>
+            <h5>轉換:</h5>
             <p>
-              消費者查詢品牌或產品的使用心得與評價
+              填寫資料,線上購買,到門市購物等等
             </p>
             <strong>
-              適合新聞和口碑寫手
+              優化購買流程
             </strong>
           </section>
         </div>
@@ -102,7 +102,7 @@
       <div class="row d-none d-md-flex">
         <div class="col-3 title">
           <h4>
-            awareness
+            Awareness
           </h4>
           <img src="/imgs/home/icon-02.png" alt="">
         </div>

+ 6 - 1
layouts/partials/components/nav.html

@@ -41,7 +41,12 @@
         {{ end }}
       </ul>
 
-      <ul class="nav navbar-nav navbar-right flex-row ms-auto my-3 my-lg-0">
+      <ul class="nav navbar-nav navbar-right flex-column flex-lg-row ms-auto mb-3 mb-lg-0">
+        <li class="me-2 mb-3 mb-lg-0">
+          <button class="language-btn" onclick="toggleLang()">
+            中 / en
+          </button>
+        </li>
         <li><a href="https://cloud.choozmo.com/login" target="_blank" class="signin-link">開始製作 AI 主播影片</a></li>
         <!-- <li><a href="https://video.choozmo.com/register.html" class="signup-link">註冊</a></li> -->
       </ul>

+ 14 - 2
static/css/custom.css

@@ -1604,8 +1604,20 @@
 }
 
 .logo {
-  width: 187px;
-  height: 48px;
+  width: 185px;
+}
+
+@media (max-width: 1200px) {
+  .logo {
+    width: 165px;
+  }
+}
+
+@media (max-width: 1200px) {
+  .navbar-expand-lg .navbar-nav .nav-link {
+    padding-right: 0.3rem;
+    padding-left: 0.3rem;
+  }
 }
 
 .logo-sm {

+ 58 - 0
static/css/style.css

@@ -42,6 +42,11 @@
   border: 1px solid #ea5413;
   border-radius: 3rem;
 }
+@media (max-width: 1200px) {
+  .navbar-nav .signin-link {
+    font-size: 14px;
+  }
+}
 .navbar-nav .signup-link {
   padding: 8px 18px;
   margin: 13px;
@@ -1090,6 +1095,59 @@
   transition: all 0.3s ease-in-out;
 }
 
+.language-btn {
+  border: none;
+  text-decoration: none;
+  background-color: #fff;
+  color: rgba(0, 0, 0, 0.55);
+}
+
+#home .home-en {
+  display: none;
+}
+#home .home-en .ai-content .img-item p {
+  max-width: 500px;
+  top: 35%;
+  left: 48%;
+}
+@media (max-width: 1400px) {
+  #home .home-en .ai-content .img-item p {
+    top: 35%;
+    left: 45%;
+  }
+}
+@media (max-width: 1200px) {
+  #home .home-en .ai-content .img-item p {
+    max-width: 350px;
+    top: 28%;
+    left: 50%;
+  }
+}
+@media (max-width: 767px) {
+  #home .home-en .ai-content .img-item p {
+    max-width: 500px;
+    top: 30%;
+    left: 35%;
+  }
+}
+@media (max-width: 475px) {
+  #home .home-en .ai-content .img-item p {
+    top: 25%;
+  }
+}
+#home .home-en .journey-content .list span {
+  display: block;
+  height: 155px;
+}
+@media (max-width: 991px) {
+  #home .home-en .journey-content .list span {
+    height: 180px;
+  }
+}
+#home .home-en .journey-content .list p {
+  height: auto !important;
+}
+
 /* content page */
 .cntheader {
   margin-top: 81px;

File diff suppressed because it is too large
+ 0 - 0
static/css/style.css.map


+ 65 - 0
static/css/style.scss

@@ -46,6 +46,10 @@
     font-weight: 400;
     border: 1px solid #ea5413;
     border-radius: 3rem;
+
+    @media (max-width: 1200px) {
+      font-size: 14px;
+    }
   }
 
   .signup-link {
@@ -1255,6 +1259,67 @@
   }
 }
 
+.language-btn {
+  border: none;
+  text-decoration: none;
+  background-color: #fff;
+  color: rgba(0, 0, 0, .55);
+}
+
+#home {
+  .home-en {
+    display: none;
+
+    .ai-content {
+      .img-item {
+        p {
+          max-width: 500px;
+          top: 35%;
+          left: 48%;
+
+          @media (max-width: 1400px) {
+            top: 35%;
+            left: 45%;
+          }
+
+          @media (max-width: 1200px) {
+            max-width: 350px;
+            top: 28%;
+            left: 50%;
+          }
+
+          @media (max-width: 767px) {
+            max-width: 500px;
+            top: 30%;
+            left: 35%;
+          }
+
+          @media (max-width: 475px) {
+            top: 25%;
+          }
+        }
+      }
+    }
+
+    .journey-content {
+      .list {
+        span {
+          display: block;
+          height: 155px;
+
+          @media (max-width: 991px) {
+            height: 180px;
+          }
+        }
+
+        p {
+          height: auto !important;
+        }
+      }
+    }
+  }
+}
+
 /* content page */
 
 .cntheader {

BIN
static/imgs/home/首頁-03-en.png


BIN
static/imgs/home/首頁-04-en-mb.png


BIN
static/imgs/home/首頁-04-en.png


Some files were not shown because too many files changed in this diff