AI_Video_LP/layouts/partials/components/main.html

<div id="main">
  <div class="content" id="info">
    <section>
      <img src="https://i.imgur.com/P1gNopa.png" alt="" class="logo mb-3">
      <h4>
        不再侷限一種廣告類型 <br>
        搭配各式分析工具 <br>
        使用 AI 自動化系統 <br>
        給您一條龍的行銷規劃
      </h4>
    </section>

    <div class="d-flex mt-4">
      <img src="/imgs/home/icon-01.png" alt="" width="45">
      <section>
        <h3>
          AI 廣告投放 <br>
          高速 SEO <br>
          AI 虛擬人像
        </h3>
      </section>
    </div>
    <div>
      <button class="action-btn" onclick="window.location.href=`/contact/service/`">立即諮詢</button>
    </div>
  </div>

  <div class="journey-content" id="journey">
    <div class="container">
      <h3 class="d-none d-md-block">ChoozMo Digital Customer Journey 數位顧客旅程</h3>
      <h3 class="d-block d-md-none">ChoozMo Digital Customer Journey <br> 數位顧客旅程</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>品牌與產品曝光：</h5>
            <p>各式 Google 廣告 GDN、搜尋、地標、購物廣告、YT、FB 廣告</p>
            <strong>
              適合廣告投放
            </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>自然搜尋：</h5>
            <p>消費者知道產品或品牌後，做消費功課與各家產品比較</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>口碑參考：</h5>
            <p>
              消費者查詢品牌或產品的使用心得與評價
            </p>
            <strong>
              適合新聞和口碑寫手
            </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>轉換：</h5>
            <p>
              填寫資料，線上購買，到門市購物等等
            </p>
            <strong>
              優化購買流程
            </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">
            <h5>品牌與產品曝光：</h5>
            <p>各式 Google 廣告 GDN、搜尋、地標、購物廣告、YT、FB 廣告</p>
            <strong>
              適合廣告投放
            </strong>
          </section>
        </div>
        <div class="col-3 d-flex justify-content-center mb-4">
          <section class="list">
            <h5>自然搜尋：</h5>
            <p>消費者知道產品或品牌後，做消費功課與各家產品比較</p>
            <strong>
              適合 SEO 優化
            </strong>
          </section>
        </div>
        <div class="col-3 d-flex justify-content-center mb-4">
          <section class="list">
            <h5>口碑參考：</h5>
            <p>
              消費者查詢品牌或產品的使用心得與評價
            </p>
            <strong>
              適合新聞和口碑寫手
            </strong>
          </section>
        </div>
        <div class="col-3 d-flex justify-content-center mb-4">
          <section class="list">
            <h5>轉換：</h5>
            <p>
              填寫資料，線上購買，到門市購物等等
            </p>
            <strong>
              優化購買流程
            </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>團隊獲得專業創投千萬元投資， <br>
          技術能力獲得工業局 AI 服務能量登錄。</h4>
          <ul>
            <li>以品牌獲利為目標</li>
            <li>精準的預算規劃 | 多元的行銷方案</li>
            <li>優於業界的價錢 | 專業的 AI 認可</li>
            <li>擁有自己的研發團隊</li>
          </ul>
      </div>
      <div class="col-12 col-md-4 mt-3 mt-md-0">
        <img src="imgs/home/首頁-03.png" alt="">
      </div>
    </div>
  </div>
</div>