AI_Video_LP/layouts/partials/components/en/ai-video.html

<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 ｘ Customized subtitles ｘ 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>