update en

layouts/index.html

@@ -31,6 +31,8 @@
         <!-- {{ partial "components/en/main.html" . }} -->
         <!-- {{ partial "components/en/serve.html" . }} -->
         <!-- {{ partial "components/en/ai-video.html" . }} -->
+        {{ partial "components/en/ai-anchor.html" . }}
+        {{ partial "components/en/genseo.html" . }}
         {{ partial "components/progress.html" . }}
         {{ partial "components/en/action.html" . }}
         {{ partial "components/en/footer.html" . }}
@@ -181,8 +183,29 @@
       slidesPerGroup: 1,
     });
 
-    let aiModal = new bootstrap.Modal(document.getElementById('aiModal')); // relatedTarget
-    aiModal.show();
+    // let aiModal = new bootstrap.Modal(document.getElementById('aiModal')); // relatedTarget
+    // aiModal.show();
+
+    // 判斷網址是否有語言參數
+    function getUrlParams() {
+      const urlParams = new URLSearchParams(window.location.search);
+
+      if (urlParams.has('lang')) {
+        const lang = urlParams.get('lang');
+        console.log('網址語言參數', lang);
+
+        if (lang === 'en') {
+          localStorage.setItem('lang', 'en');
+        } else {
+          localStorage.setItem('lang', 'cn');
+        }
+
+        toggleTemplate(lang);
+      }
+
+    }
+
+    getUrlParams();
   </script>
   <!-- 進度條 -->
   <script src="../js/progress.js"></script>

layouts/partials/components/en/ai-anchor.html

@@ -0,0 +1,257 @@
+<div class="container mt-5 home-content">
+  <h2>AI Virtual Host Revolution: A New Era of 24-Hour Unlimited Media Possibilities</h2>
+  <p>AI virtual hosts are transforming the media industry, from news broadcasting to customized content generation, with
+    a wide and diverse range of applications.</p>
+
+  <div class="col-12 mt-4 pt-4">
+    <div class="founder-cta">
+      <a class="cta" href="https://cmm.ai/cal" target="_blank" onclick="gtag('event', 'click_founder_contact', { 
+              'event_category': 'Button Click', 
+              'event_label': '與創辦人交流',
+              'value': 1
+          })">
+        <span class="pt-1">Talk with the Founder</span>
+        <span class="d-none d-lg-inline-block">
+          <svg width="55px" height="32px" viewBox="0 0 66 43" version="1.1" xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink">
+            <g id="arrow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+              <path class="one"
+                d="M40.1543933,3.89485454 L43.9763149,0.139296592 C44.1708311,-0.0518420739 44.4826329,-0.0518571125 44.6771675,0.139262789 L65.6916134,20.7848311 C66.0855801,21.1718824 66.0911863,21.8050225 65.704135,22.1989893 C65.7000188,22.2031791 65.6958657,22.2073326 65.6916762,22.2114492 L44.677098,42.8607841 C44.4825957,43.0519059 44.1708242,43.0519358 43.9762853,42.8608513 L40.1545186,39.1069479 C39.9575152,38.9134427 39.9546793,38.5968729 40.1481845,38.3998695 C40.1502893,38.3977268 40.1524132,38.395603 40.1545562,38.3934985 L56.9937789,21.8567812 C57.1908028,21.6632968 57.193672,21.3467273 57.0001876,21.1497035 C56.9980647,21.1475418 56.9959223,21.1453995 56.9937605,21.1432767 L40.1545208,4.60825197 C39.9574869,4.41477773 39.9546013,4.09820839 40.1480756,3.90117456 C40.1501626,3.89904911 40.1522686,3.89694235 40.1543933,3.89485454 Z"
+                fill="#FFFFFF"></path>
+              <path class="two"
+                d="M20.1543933,3.89485454 L23.9763149,0.139296592 C24.1708311,-0.0518420739 24.4826329,-0.0518571125 24.6771675,0.139262789 L45.6916134,20.7848311 C46.0855801,21.1718824 46.0911863,21.8050225 45.704135,22.1989893 C45.7000188,22.2031791 45.6958657,22.2073326 45.6916762,22.2114492 L24.677098,42.8607841 C24.4825957,43.0519059 24.1708242,43.0519358 23.9762853,42.8608513 L20.1545186,39.1069479 C19.9575152,38.9134427 19.9546793,38.5968729 20.1481845,38.3998695 C20.1502893,38.3977268 20.1524132,38.395603 20.1545562,38.3934985 L36.9937789,21.8567812 C37.1908028,21.6632968 37.193672,21.3467273 37.0001876,21.1497035 C36.9980647,21.1475418 36.9959223,21.1453995 36.9937605,21.1432767 L20.1545208,4.60825197 C19.9574869,4.41477773 19.9546013,4.09820839 20.1480756,3.90117456 C20.1501626,3.89904911 20.1522686,3.89694235 20.1543933,3.89485454 Z"
+                fill="#FFFFFF"></path>
+              <path class="three"
+                d="M0.154393339,3.89485454 L3.97631488,0.139296592 C4.17083111,-0.0518420739 4.48263286,-0.0518571125 4.67716753,0.139262789 L25.6916134,20.7848311 C26.0855801,21.1718824 26.0911863,21.8050225 25.704135,22.1989893 C25.7000188,22.2031791 25.6958657,22.2073326 25.6916762,22.2114492 L4.67709797,42.8607841 C4.48259567,43.0519059 4.17082418,43.0519358 3.97628526,42.8608513 L0.154518591,39.1069479 C-0.0424848215,38.9134427 -0.0453206733,38.5968729 0.148184538,38.3998695 C0.150289256,38.3977268 0.152413239,38.395603 0.154556228,38.3934985 L16.9937789,21.8567812 C17.1908028,21.6632968 17.193672,21.3467273 17.0001876,21.1497035 C16.9980647,21.1475418 16.9959223,21.1453995 16.9937605,21.1432767 L0.15452076,4.60825197 C-0.0425130651,4.41477773 -0.0453986756,4.09820839 0.148075568,3.90117456 C0.150162624,3.89904911 0.152268631,3.89694235 0.154393339,3.89485454 Z"
+                fill="#FFFFFF"></path>
+            </g>
+          </svg>
+        </span>
+    
+        <img src="../../imgs/icon/click.png" alt="" class="click-img">
+      </a>
+    
+      <ul class="mb-0">
+        <li>
+          📅 Book Now – Done in 30 Seconds!
+        </li>
+        <li>
+          <span class="d-none d-sm-block"> 🎯 Have a 1-on-1 with the Founder and Get Personalized Advice!</span>
+          <span class="d-block d-sm-none"> 🎯 1-on-1 with the Founder!</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="row justify-content-center">
+    <div class="col-11 col-sm-10 main">
+
+      <span class="d-flex">
+        <h3 class="my-4 pt-4 mx-auto">💡 The Definition and Features of AI Virtual Hosts</h3>
+      </span>
+      <p>AI virtual hosts are virtual characters created and operated by artificial intelligence technology. They
+        combine AI technology, speech synthesis, virtual character design, and digital media platforms, enabling them to
+        host shows, report news, and live stream games just like real human anchors. These AI hosts have multiple
+        features, including the use of highly realistic speech synthesis technology, making their voices sound similar
+        to real humans. Some AI hosts also have virtual character designs, with facial expressions and movements
+        generated by specialized algorithms or animation techniques, making them appear more lifelike. In addition, AI
+        hosts can automatically generate scripts based on preset topics or themes to conduct conversations and
+        reporting. More advanced AI hosts can even interact with audiences in real time, answering questions and
+        engaging in dialogue. Thanks to advances in speech synthesis technology, some AI hosts can also host in multiple
+        languages, expanding their audience reach and operating 24/7 without time limitations.</p>
+
+      <span class="d-flex">
+        <h3 class="pt-5 my-4 mx-auto">💡 Advantages of AI Virtual Hosts</h3>
+      </span>
+      <p>Compared to human anchors, AI virtual hosts have several notable advantages. First, they can work 24/7 without
+        interruption, meeting the demands of round-the-clock broadcasting. AI hosts can translate into target languages
+        in real time, eliminating the need to hire anchors fluent in local languages and reducing personnel costs.
+        Moreover, brands can create AI influencers that perfectly match their corporate identity, avoiding the
+        time-consuming task of finding real influencers who fit the brand image and reducing the risk of PR crises. AI
+        hosts can also incorporate more creativity, such as animations and special effects, to attract more traffic and
+        attention.</p>
+
+      <span class="d-flex">
+        <h3 class="pt-5 my-4 mx-auto">💡 Applications of AI Virtual Hosts</h3>
+      </span>
+      <p>AI virtual hosts have been applied in various fields, especially in the news media sector. Since news media
+        requires the production of a large volume of content with immediacy as a core feature, AI can quickly handle
+        massive and frequently updated information. The application process of AI anchors is relatively simple, making
+        it easy for news organizations to adopt. For example, SET News collaborated with ChoozMo to create a unique AI
+        version of the famous anchor Fei-Chuan Chen using AI technology. Clone-Chuan and Chen co-host the news remotely,
+        delivering a distinctive broadcasting experience. In e-commerce live streaming, AI anchors can interact with
+        viewers and fans bidirectionally. Additionally, AI virtual hosts are being used in education, such as online
+        learning platforms that employ AI to provide problem-solving explanations.</p>
+
+      <span class="d-flex">
+        <h3 class="pt-5 my-4 mx-auto">💡 Challenges and Limitations of AI Virtual Hosts</h3>
+      </span>
+      <p>Although AI virtual hosts offer many advantages, they also face some challenges and limitations. First, deep
+        learning technology in AI can be misused, such as generating fake images, videos, and audio, which could
+        influence public opinion, affect elections, and even cause social panic or legal issues. Secondly, AI models are
+        trained on human data, which may carry long-standing ideological biases, potentially reinforcing prejudice and
+        discrimination. Moreover, AI influencers require significant time and resources for development, training, and
+        fine-tuning, and must build recognition from scratch, leading to increased promotional costs.</p>
+    </div>
+
+    <div class="col-12">
+      <h4 class="pt-5 my-3 text-center">FAQ</h4>
+
+      <div class="accordion my-4" id="faq_accordion">
+        <div class="accordion-item">
+          <h2 class="accordion-header" id="faq_heading_1">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+              data-bs-target="#faq_collapse_1" aria-expanded="true" aria-controls="faq_collapse_1">
+              Q1. How do AI anchors differ from traditional news anchors? What are the advantages of AI anchors?
+            </button>
+          </h2>
+          <div id="faq_collapse_1" class="accordion-collapse collapse" aria-labelledby="faq_heading_1"
+            data-bs-parent="#faq_accordion">
+            <div class="accordion-body">
+              AI anchors are virtual presenters created and operated by artificial intelligence technology, integrating
+              AI, speech synthesis, virtual character design, and modern digital media platforms.
+              <br>
+              AI anchors offer numerous advantages, such as 24/7 operation, reduced costs, and error-free information
+              delivery.
+              <br>
+              They can host in multiple languages, rapidly deliver breaking news, and ensure message accuracy.
+              <br>
+              In contrast, traditional news anchors are limited by time, language, and cost, and may mispronounce words
+              or react unpredictably in unexpected situations.
+              <br>
+              AI anchors can simulate human thought and expression, create personalized service experiences, and
+              interact with audiences in real-time and customized ways to meet diverse industry needs.
+              <br>
+              ChoozMo collaborated with Hakka TV to launch a weekly program called "AI Anchor Talks Weather," where the
+              AI anchor delivers accurate weather updates in fluent Hakka and keeps the audience informed with regular
+              weekly updates.
+            </div>
+          </div>
+        </div>
+
+        <div class="accordion-item">
+          <h2 class="accordion-header" id="faq_heading_2">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+              data-bs-target="#faq_collapse_2" aria-expanded="false" aria-controls="faq_collapse_2">
+              Q2. In which industries are virtual humans applied? How do they generate business value?
+            </button>
+          </h2>
+          <div id="faq_collapse_2" class="accordion-collapse collapse" aria-labelledby="faq_heading_2"
+            data-bs-parent="#faq_accordion">
+            <div class="accordion-body">
+              AI virtual humans, also known as AI digital humans, are intelligent characters created with advanced AI
+              technologies that can communicate, respond, and perform tasks like real humans.
+              <br>
+              They can be applied in entertainment, advertising, retail, gaming, and other industries, creating new
+              market opportunities.
+              <br>
+              According to MIC industry analyst Hung Chia-ya, AI virtual humans are already widely used in media,
+              healthcare, finance, retail, and gaming.
+              <br>
+              For example, in media, AI news anchors can explain news content and help broaden its dissemination.
+              <br>
+              In retail, AI virtual humans can act as virtual receptionists, provide event information, or guide
+              visitors around a venue.
+              <br>
+              Businesses can leverage AI virtual humans to enhance task performance, boost service value, and unlock new
+              business opportunities.
+              <br>
+              Moreover, AI virtual humans can actively understand customer communication patterns to create personalized
+              services, combining multimodal large language models (LLMs) and multisensory feedback to drive engagement,
+              conversion, and reach-based revenue.
+            </div>
+          </div>
+        </div>
+
+        <div class="accordion-item">
+          <h2 class="accordion-header" id="faq_heading_3">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+              data-bs-target="#faq_collapse_3" aria-expanded="false" aria-controls="faq_collapse_3">
+              Q3. How can businesses create their own AI virtual human? What technologies and steps are needed?
+            </button>
+          </h2>
+          <div id="faq_collapse_3" class="accordion-collapse collapse" aria-labelledby="faq_heading_3"
+            data-bs-parent="#faq_accordion">
+            <div class="accordion-body">
+              Creating an AI virtual human involves several steps, including defining the purpose, selecting
+              technologies, designing and developing, training and testing, and deployment and maintenance.
+              <br>
+              First, the role and functions of the AI virtual human need to be clearly defined, such as virtual guides,
+              brand ambassadors, or customer service representatives.
+              <br>
+              Next, the appropriate AI models, software, and hardware should be selected, including machine learning,
+              natural language processing, speech synthesis, animation and motion AI, and computer vision technologies.
+              <br>
+              Then, character design and development should be carried out, including appearance, voice, and
+              personality.
+              <br>
+              Subsequently, the AI model is trained with a large amount of data, followed by testing and iteration to
+              ensure it can accurately understand and respond to users.
+              <br>
+              Finally, the AI virtual human is deployed to the target platform, followed by continuous monitoring and
+              maintenance.
+            </div>
+          </div>
+        </div>
+
+        <div class="accordion-item">
+          <h2 class="accordion-header" id="faq_heading_4">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+              data-bs-target="#faq_collapse_4" aria-expanded="false" aria-controls="faq_collapse_4">
+              Q4. What challenges and risks might businesses face when implementing AI virtual humans? How should they
+              address them?
+            </button>
+          </h2>
+          <div id="faq_collapse_4" class="accordion-collapse collapse" aria-labelledby="faq_heading_4"
+            data-bs-parent="#faq_accordion">
+            <div class="accordion-body">
+              Implementing AI virtual humans may involve multiple challenges related to ethics, technology, and quality
+              costs.
+              <br>
+              Ethical issues include data privacy, AI bias, and misuse, which require transparent AI policies, bias
+              audits, and responsible AI development.
+              <br>
+              Technically, issues include system integration, data security, and compatibility. Collaborating with
+              experienced AI providers is essential to ensure the scalability and security of the AI solutions.
+              <br>
+              In terms of quality and cost, achieving high-quality results, such as reducing AI hallucinations, ensuring
+              fine visual presentation, and smooth interactions, will require significant investment in infrastructure
+              and comprehensive evaluations.
+              <br>
+              Additionally, attention must be paid to the "uncanny valley" phenomenon, where the human-likeness of the
+              virtual human should be carefully managed to avoid evoking fear or other negative emotions.
+            </div>
+          </div>
+        </div>
+
+        <div class="accordion-item">
+          <h2 class="accordion-header" id="faq_heading_5">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+              data-bs-target="#faq_collapse_5" aria-expanded="false" aria-controls="faq_collapse_5">
+              Q5. What are the future development trends for AI anchors and virtual humans?
+            </button>
+          </h2>
+          <div id="faq_collapse_5" class="accordion-collapse collapse" aria-labelledby="faq_heading_5"
+            data-bs-parent="#faq_accordion">
+            <div class="accordion-body">
+              The development trends of AI virtual humans include becoming smarter, more human-like, and expanding into
+              more diverse applications.
+              <br>
+              In the future, AI virtual humans will not only follow scripts but also understand emotions, express
+              natural facial expressions, and adjust in real-time.
+              <br>
+              AI virtual humans will expand into new roles, such as AI tutors, virtual coaches, and mental health
+              supporters.
+              <br>
+              Furthermore, AI technologies will place more emphasis on ethics and responsibility, ensuring transparency,
+              fairness, and stringent security.
+              <br>
+              As technology continues to advance, the application of AI virtual humans across various industries will
+              become more widespread and deep, bringing more value to businesses and individuals.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

layouts/partials/components/en/genseo.html

@@ -0,0 +1,85 @@
+<div class="container mt-5 home-content">
+  <img src="imgs/home/genseo/算力seo.webp" alt="算力 SEO" class="my-md-5 img-fluid">
+
+  <section>
+    <h2 class="pt-5 pb-4">Global Exposure, the Best Value Choice!</h2>
+
+    <p class="fw-bold">
+      News is not just published; it needs to be searchable! Google News inclusion ensures your brand is easily seen!
+    </p>
+
+    <p>
+      Now, by publishing news through "Computation Media," your brand can easily make headlines! In this age of information overload, news exposure is key to business success.
+<br>
+However, simply publishing is not enough—being searchable on Google News is where true influence lies!
+</p>
+
+    <p>Now, for only NT$6,800 per article, get your news featured on 30 major news platforms worldwide and indexed by Google News.<br>This makes your brand easily discoverable on global search engines, enhancing credibility and trust!</p>
+  </section>
+
+  <div class="d-flex justify-content-center mt-5">
+    <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" class="link-btn" target="_blank">
+      Free consultation with professional service
+    </a>
+  </div>
+
+  <img src="imgs/home/genseo/報導截圖.webp" alt="算力 SEO｜報導截圖" class="my-5 img-fluid">
+  <img src="imgs/home/genseo/報導截圖(綜合).webp" alt="算力 SEO｜報導截圖" class="my-5 img-fluid">
+
+  <div class="accordion my-4" id="news_accordion">
+    <div class="accordion-item">
+      <h3 class="accordion-header" id="heading">
+        <button class="accordion-button px-0" type="button" data-bs-toggle="collapse" data-bs-target="#collapse"
+          aria-expanded="true" aria-controls="collapse">
+          Why choose us? The lowest market price + Google News indexing!
+        </button>
+      </h3>
+
+      <div id="collapse" class="accordion-collapse collapse show" aria-labelledby="heading"
+        data-bs-parent="#news_accordion">
+        <div class="accordion-body d-flex justify-content-center px-0">
+          <ul>
+            <li>
+              <h4>✅ Lowest price, high exposure</h4>
+              <p>Compared to the news release packages priced in the tens of thousands in the market, we offer an incredibly valuable price of NT$6,800 to get your news featured on 30 major news media platforms, ensuring the best value for your investment!</p>
+            </li>
+
+            <li>
+              <h4>✅ Google News searchable, increasing brand trust</h4>
+              <p>Your news will be indexed by Google News, making it easy for potential customers, investors, and media journalists to find your brand information and build a professional and trustworthy corporate image.</p>
+            </li>
+
+            <li>
+              <h4>✅ Covering authoritative media domestically and internationally</h4>
+              <p>Your news will be published on 30 quality news platforms worldwide, covering various fields like finance, technology, industry, and general news, reaching a broader target audience.</p>
+            </li>
+
+            <li>
+              <h4>✅ Bulk purchases offer better deals</h4>
+              <p>For businesses with long-term exposure needs, the more you buy, the more discount you get! (Feel free to inquire about special offers!)</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <h2 class="pt-5 pb-4">Great value upgrade! Instant exposure for your brand's news!</h2>
+
+  <ul class="text-center">
+    <li>
+      📢 Publish your news through our 'Compute Media' and quickly boost brand awareness!
+    </li>
+
+    <li>
+      🔥 Add NT$6,800 for global reach! Get instant release to 30 top news outlets and increase exposure through Google News, making your brand the center of attention!
+    </li>
+  </ul>
+
+
+  <div class="d-flex justify-content-center my-5 py-5">
+    <a href="https://cloud.choozmo.com/gen-seo" class="link-btn" target="_blank">
+      💡 A rare opportunity, act now!
+    </a>
+  </div>
+</div>

static/js/progress.js

@@ -47,52 +47,52 @@ $(document).ready(function () {
 var scroll = 0;
 let scrollVal = '';
 
-$(window).scroll(function () {
-  console.log($('#info').offset().top);
-  // 於特定區塊顯示進度條
-  if ($(this).scrollTop() > $('#info').offset().top - 200) {
-    $(".progress-item").css("opacity", "1");
-  } else if ($(this).scrollTop() < $('#info').offset().top) {
-    $(".progress-item").css("opacity", "0");
-  }
-  if ($(this).scrollTop() > $('#blog').offset().top - 700) {
-    $(".progress-item").css("opacity", "0");
-  }
+// $(window).scroll(function () {
+//   console.log($('#info').offset().top);
+//   // 於特定區塊顯示進度條
+//   if ($(this).scrollTop() > $('#info').offset().top - 200) {
+//     $(".progress-item").css("opacity", "1");
+//   } else if ($(this).scrollTop() < $('#info').offset().top) {
+//     $(".progress-item").css("opacity", "0");
+//   }
+//   if ($(this).scrollTop() > $('#blog').offset().top - 700) {
+//     $(".progress-item").css("opacity", "0");
+//   }
 
-  // 依捲軸高度調整 progress-bar value
-  if ($(this).scrollTop() > $('#info').offset().top - 100 && $(this).scrollTop() < $('#info').offset().top + 50) {
-    scrollVal = '0';
-    $('.info').nextAll().removeClass('border-change');
-  } else if ($(this).scrollTop() > $('#journey').offset().top - 100 && $(this).scrollTop() < $('#journey').offset().top + 50) {
-    scrollVal = '20';
-    $('.journey').nextAll().removeClass('border-change');
-    $('.journey').prevAll().addClass('border-change');
-    $('.journey').addClass('border-change');
-  } else if ($(this).scrollTop() > $('#team').offset().top - 100 && $(this).scrollTop() < $('#team').offset().top + 50) {
-    scrollVal = '40';
-    $('.team').nextAll().removeClass('border-change');
-    $('.team').prevAll().addClass('border-change');
-    $('.team').addClass('border-change');
-  } else if ($(this).scrollTop() > $('#ai-ad').offset().top - 100 && $(this).scrollTop() < $('#ai-ad').offset().top + 50) {
-    scrollVal = '60';
-    $('.ai-ad').nextAll().removeClass('border-change');
-    $('.ai-ad').prevAll().addClass('border-change');
-    $('.ai-ad').addClass('border-change');
-  } else if ($(this).scrollTop() > $('#seo').offset().top - 100 && $(this).scrollTop() < $('#seo').offset().top + 50) {
-    scrollVal = '80';
-    $('.seo').nextAll().removeClass('border-change');
-    $('.seo').prevAll().addClass('border-change');
-    $('.seo').addClass('border-change');
-  } else if ($(this).scrollTop() > $('#ai-video').offset().top - 100 && $(this).scrollTop() < $('#ai-video').offset().top + 500) {
-    scrollVal = '100';
-    $('.ai-video').nextAll().removeClass('border-change');
-    $('.ai-video').prevAll().addClass('border-change');
-    $('.ai-video').addClass('border-change');
-  }
-  // else if ($(this).scrollTop() > $('#blog').offset().top - 100 && $(this).scrollTop() < $('#blog').offset().top + 50) {
-  //   scrollVal = '100';
-  //   $('.blog').addClass('border-change');
-  // }
+//   // 依捲軸高度調整 progress-bar value
+//   if ($(this).scrollTop() > $('#info').offset().top - 100 && $(this).scrollTop() < $('#info').offset().top + 50) {
+//     scrollVal = '0';
+//     $('.info').nextAll().removeClass('border-change');
+//   } else if ($(this).scrollTop() > $('#journey').offset().top - 100 && $(this).scrollTop() < $('#journey').offset().top + 50) {
+//     scrollVal = '20';
+//     $('.journey').nextAll().removeClass('border-change');
+//     $('.journey').prevAll().addClass('border-change');
+//     $('.journey').addClass('border-change');
+//   } else if ($(this).scrollTop() > $('#team').offset().top - 100 && $(this).scrollTop() < $('#team').offset().top + 50) {
+//     scrollVal = '40';
+//     $('.team').nextAll().removeClass('border-change');
+//     $('.team').prevAll().addClass('border-change');
+//     $('.team').addClass('border-change');
+//   } else if ($(this).scrollTop() > $('#ai-ad').offset().top - 100 && $(this).scrollTop() < $('#ai-ad').offset().top + 50) {
+//     scrollVal = '60';
+//     $('.ai-ad').nextAll().removeClass('border-change');
+//     $('.ai-ad').prevAll().addClass('border-change');
+//     $('.ai-ad').addClass('border-change');
+//   } else if ($(this).scrollTop() > $('#seo').offset().top - 100 && $(this).scrollTop() < $('#seo').offset().top + 50) {
+//     scrollVal = '80';
+//     $('.seo').nextAll().removeClass('border-change');
+//     $('.seo').prevAll().addClass('border-change');
+//     $('.seo').addClass('border-change');
+//   } else if ($(this).scrollTop() > $('#ai-video').offset().top - 100 && $(this).scrollTop() < $('#ai-video').offset().top + 500) {
+//     scrollVal = '100';
+//     $('.ai-video').nextAll().removeClass('border-change');
+//     $('.ai-video').prevAll().addClass('border-change');
+//     $('.ai-video').addClass('border-change');
+//   }
+//   // else if ($(this).scrollTop() > $('#blog').offset().top - 100 && $(this).scrollTop() < $('#blog').offset().top + 50) {
+//   //   scrollVal = '100';
+//   //   $('.blog').addClass('border-change');
+//   // }
 
-  $('#progress-bar').val(scrollVal);
-})
+//   $('#progress-bar').val(scrollVal);
+// })