index.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. <!DOCTYPE html>
  2. <html lang="{{ .Site.LanguageCode }}">
  3. {{ partial "components/head.html" . }}
  4. <!-- Start of HubSpot Embed Code -->
  5. <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script>
  6. <!-- End of HubSpot Embed Code -->
  7. <body>
  8. <div id="all" style="overflow: hidden;">
  9. {{ partial "components/nav.html" . }}
  10. <div id="home">
  11. {{ partial "components/carousel.html" . }}
  12. <div class="home-cn">
  13. {{ partial "components/main.html" . }}
  14. {{ partial "components/serve.html" . }}
  15. {{ partial "components/ai-video.html" . }}
  16. {{ partial "components/progress.html" . }}
  17. {{ partial "LP_components/blogs_tab.html" . }}
  18. {{ partial "LP_components/action.html" . }}
  19. {{ partial "footer.html" . }}
  20. </div>
  21. <div class="home-en">
  22. {{ partial "components/en/main.html" . }}
  23. {{ partial "components/en/serve.html" . }}
  24. {{ partial "components/en/ai-video.html" . }}
  25. {{ partial "components/progress.html" . }}
  26. {{ partial "components/en/action.html" . }}
  27. {{ partial "components/en/footer.html" . }}
  28. </div>
  29. </div>
  30. <!-- <div id="home">
  31. {{ partial "components/carousel.html" . }}
  32. {{ partial "components/main.html" . }}
  33. {{ partial "components/serve.html" . }}
  34. {{ partial "components/ai-video.html" . }}
  35. {{ partial "components/progress.html" . }}
  36. {{ partial "LP_components/blogs_tab.html" . }}
  37. {{ partial "LP_components/action.html" . }}
  38. {{ partial "footer.html" . }}
  39. </div> -->
  40. <!-- {{ partial "nav.html" . }}
  41. {{ partial "LP_components/hero.html" . }}
  42. {{ partial "LP_components/video.html" . }}
  43. {{ partial "LP_components/use_cases.html" . }}
  44. {{ partial "LP_components/steps.html" . }}
  45. {{ partial "LP_components/features.html" . }}
  46. {{ partial "LP_components/blogs_tab.html" . }}
  47. {{ partial "LP_components/action.html" . }}
  48. {{ partial "LP_components/Footer.html" . }}
  49. {{ partial "LP_components/news.html" . }} -->
  50. </div>
  51. <!-- /#all -->
  52. {{ partial "components/scripts.html" . }}
  53. <script>
  54. $('#home_en').hide();
  55. localStorage.setItem('lang', 'cn'); // 預設為中文
  56. // 切換首頁語言
  57. function toggleLang() {
  58. let currentLang = localStorage.getItem('lang');
  59. if (currentLang === 'en') {
  60. localStorage.setItem('lang', 'cn');
  61. } else if (currentLang === 'cn') {
  62. localStorage.setItem('lang', 'en');
  63. }
  64. let lang = localStorage.getItem('lang');
  65. toggleTemplate(lang);
  66. }
  67. function toggleTemplate(lang) {
  68. if (lang === 'en') {
  69. $('.home-en').show();
  70. $('.home-cn').hide();
  71. } else {
  72. $('.home-en').hide();
  73. $('.home-cn').show();
  74. }
  75. $('html, body').animate({
  76. scrollTop: $(`.home-${lang}`).offset().top
  77. }, 0);
  78. }
  79. function tabLP() {
  80. if (('.m-tabs').length) {
  81. // Show the first tab by default
  82. $('.blog-tabs-stage>div').hide();
  83. $('.blog-tabs-stage>div:first').show();
  84. $('.blog-tabs-nav li:first').addClass('blog-tab-active');
  85. // Change tab class and display content
  86. $('.blog-tabs-nav a').on('click', function (event) {
  87. event.preventDefault();
  88. $('.blog-tabs-nav li').removeClass('blog-tab-active');
  89. $(this).parent().addClass('blog-tab-active');
  90. $('.blog-tabs-stage>div').hide();
  91. $($(this).attr('href')).show();
  92. });
  93. }
  94. }
  95. tabLP();
  96. function debounce(func, wait = 20, immediate = true) {
  97. var timeout;
  98. return function () {
  99. var context = this, args = arguments;
  100. var later = function () {
  101. timeout = null;
  102. if (!immediate) func.apply(context, args);
  103. };
  104. var callNow = immediate && !timeout;
  105. clearTimeout(timeout);
  106. timeout = setTimeout(later, wait);
  107. if (callNow) func.apply(context, args);
  108. };
  109. };
  110. const featuresBlock = document.querySelectorAll('.features-block');
  111. const featuresRow = document.querySelectorAll('.sec-features .row');
  112. function checkSlide() {
  113. featuresRow.forEach((block, i) => {
  114. // half way through the image
  115. const slideInAt = (window.scrollY + window.innerHeight) - block.offsetHeight / 2;
  116. // bottom of the image
  117. const isHalfShown = slideInAt > block.offsetTop;
  118. if (isHalfShown) {
  119. console.log('active');
  120. featuresBlock[i].classList.add('active');
  121. }
  122. });
  123. }
  124. window.addEventListener('scroll', debounce(checkSlide));
  125. var swiper = new Swiper(".carousel", {
  126. pagination: {
  127. el: ".swiper-pagination",
  128. clickable: true,
  129. },
  130. navigation: {
  131. nextEl: '.swiper-button-next',
  132. prevEl: '.swiper-button-prev',
  133. },
  134. loop: true,
  135. observer: true,
  136. observeParents: true,
  137. parallax: true,
  138. slidesPerView: 1,
  139. slidesPerGroup: 1,
  140. });
  141. </script>
  142. <!-- 進度條 -->
  143. <script src="../js/progress.js"></script>
  144. </body>
  145. </html>