AI_Video_LP/layouts/partials/components/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: 40px;">AI 主播</h5>
  </div>
  <div class="container">
    <h4>
      AI 虛擬人像
    </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">製作影片 一鍵合成</h2>
          <p>
            上傳文字與素材，即速產生影片<br>
            大幅省下時間、人力、器材成本<br>
            腳本內容直接上鏈，紀錄透明<br>
            可以使用集仕多的影片版型<br>
            也可以自己客製化
          </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>2022 年集仕多的研發團隊 <br>
            在 AI 虛擬人像上有了技術突破 <br>
            第三代 AI 虛擬人像 <br>
            不僅是視覺、聽覺也更加擬真 <br>
            像真正的新聞播報員等級 <br>
            現在不只能用集仕多的模板 <br>
            可以諮詢我們客製化主播以及字幕邊框</p>
        </section>
      </div>
    </div>

    <section class="sec-video">
      <div class="container">
        <h2 class="video-title">三代主播－客製化範例影片</h2>
        <h2 class="video-mb-title">
          三代主播
          <br>
          客製化範例影片
        </h2>
        <span class="line"></span>
        <p class="video-text">
          2022 年與藝點新聞合作之活動宣傳影片 <br>
          歐美主播 ｘ 客製化字幕 ｘ 高解析度人像
        </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">使用情境</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> 產品介紹</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> 教育培訓</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> 資訊傳播</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> 個人內容創作</h3>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>