@extends('layouts.new_front.shell')

@section('cssdefine')


<link href="{{ asset('new_front/css/page/product_page.css') }}?1742059578" rel="stylesheet">


@endsection

@section('content')
<div class="container-fluid bg_size_cover bg_norepeat bg_position_center vh-100" style="background-image: url('{{ asset('new_front/img/product/photo_10_1920x945px.png') }}');">
  <div class="row area_0">
    <div class="col-12">
      <div class="banner_title">智慧同步翻譯 ｜ <span class="fw_700">高畫質專業會議</span>的全新體驗</div>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row area area_1 align-items-center">
    <div class="col-12">
      <div class="color_blue content_0 text-center">
        <span class="content_1 font-weight-normal">EZ</span><span>&ensp;but&ensp;</span><span class="content_1 font-weight-normal">PROFESSIONAL</span>
      </div>
      <div class="sub_title text-center fw_400">簡易操作，專業商務會議的最佳選擇</div>
    </div>
  </div>
  <div class="row area_2 align-items-center">
    <div class="col-lg">
      <img src="{{ asset('new_front//img/product/photo_11_875x590px.png') }}" class="img-fluid">
    </div>
    <div class="col-lg col-xl-5">
      <div class="row justify-content-center">
        <div class="col-auto">
          <div class="content_1 text-center">
            <div>隨開隨用無需綁定</div>
            <div>方案任您自由選</div>
          </div>
          <div class="line"></div>
          <div class="block text-center">
            線上會議註冊無門檻<br>依據需求，可自行選擇使用方案及翻譯點數<br>語音辨識即時字幕功能依照用量點數扣除<br>用戶使用翻譯額度可安心控管且透明化<br>
          </div>
        </div>
      </div>
      <div class="row mt-4 mt-md-5">
        <div class="col">
          <!-- <button class="btn_text btn_primary_outline w-100">免費註冊</button> -->
          <a href="{{route('new_login.sh_register')}}" class="btn_text btn_primary_outline w-100">免費註冊</a>
        </div>
        <div class="col">
          <!-- <button class="btn_text btn_primary_outline w-100">發起會議</button> -->
          <a href="{{route('enterRoom')}}" class="btn_text btn_primary_outline w-100">發起會議</a>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row area_scrollspy_content bg_size_cover bg_norepeat bg_position_center" id="list-item-1" style="background-image: url('{{ asset('new_front/img/product/photo_12_1920x1080px.png') }}');">

    <div class="col-3 d-none d-lg-flex">
      <div class="scrollspy_space"></div>
    </div>
    <div class="col">
      <div class="content_1 text-center">享受不受場地、語言、畫面侷限之會議</div>
      <div class="content_1 text-center">任何地方都是您的最佳辦公室</div>
      <div class="row justify-content-end">
        <div class="col-xl-7">
          <div class="block block_bg text-center">
            <div>Live EZ 線上視訊會議，無論場合、地區、國家或語言，<br>於操作者使用上皆無限制，去除世界隔閡。<br>會議前再也無需繁瑣之軟體下載與註冊程序，<br>設備連接網路，即可發起新會議或是加入現有會議，<br>簡化流程與前置作業</div>
            <button class="btn_text btn_secondary py-lg-2 mx-auto mt-4 fw_300">將時間留給您的專業表現！</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row area_scrollspy_content bg_black color_white" id="list-item-2">
    <div class="col-3 d-none d-lg-flex">
      <div class="scrollspy_space"></div>
    </div>
    <div class="col">
      <div class="content_1 text-center mb-3 mb-lg-5">專業畫質與音訊，支援您的創意表現</div>
      <div class="block text-center mb-4">會議中視訊畫質最高可至1080p，提供清晰的影像品質，<br>支援專業工作中所需呈現的討論畫面<br>藉由高音質與高畫質達到會議視聽最佳效果呈現</div>
      <img src="{{ asset('new_front/img/product/photo_14.png') }}" class="w-100">
    </div>
  </div>
  <div class="row area_scrollspy_content bg_black color_white" id="list-item-3">
    <div class="col-3 d-none d-lg-flex">
      <div class="scrollspy_space"></div>
    </div>
    <div class="col">
      <div class="content_1 text-center mb-3 mb-lg-5">多國語系可同步即時翻譯為本國語言</div>
      <div class="block text-center mb-4 mb-lg-5">不同語系與會人一同討論議題時，可即時翻譯成本國語言文字<br>且可多國語系同時產生翻譯字幕<br>去除與自身之語言隔閡 ， 消弭溝通落差</div>
      <img src="{{ asset('new_front/img/product/photo_15.png') }}" class="w-100">
    </div>
  </div>
  <div class="row area_scrollspy_content" id="list-item-4">
    <div class="col-3 d-none d-lg-flex">
      <div class="scrollspy_space"></div>
    </div>
    <div class="col">
      <div class="content_1 text-center mb-3 mb-lg-5">會議記錄全面支援字幕</div>
      <div class="w-100 d-flex justify-content-center mb-5">
        <img src="{{ asset('new_front/img/product/photo_16.png') }}" class="img-fluid object-fit-center">
      </div>
      <div class="row align-items-center">
        <div class="col-md-6">
          <img src="{{ asset('new_front/img/product/photo_17_600x338px.png') }}" class="w-100">
        </div>
        <div class="col-md-6 block">
          <div class="mb-4">會議可同步錄音及錄影並儲存於電腦中<br>已錄製完成的影片可重複觀看或複習會議內容，<br>且錄影檔案完整保留翻譯字幕！<br>並於會後生成可編輯的會議記錄文字檔案，<br>輕鬆為會議內容正確編輯、加強補充</div>
          <div class="row">
            <div class="col">
              <a href="{{route('new_login.sh_register')}}" class="btn_text btn_primary_outline w-100">免費註冊</a>
            </div>
            <div class="col">
              <a href="{{route('enterRoom')}}" class="btn_text btn_primary_outline w-100">發起會議</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row area_start align-content-center justify-content-around align-items-center">
    <div class="col-auto text-center content_1 fw_400 mb-3">

      <div class="row align-items-center justify-content-center">
        <div class="col-12 mb-3">Ready to get started?</div>
        <div class="col-auto mb-3">
          <a href="{{route('new.sh_plan')}}" alt="了解方案內容">
            <img src="{{ asset('new_front/img/product/photo_18_335x92px.png') }}" class="img-fluid">
          </a>
        </div>
        <div class="col-auto mb-3">
          <a href="{{route('enterRoom')}}" alt="發起新會議">
            <img src="{{ asset('new_front/img/index/photo_08_420x230px.png') }}" class="img-fluid">
          </a>
        </div>
      </div>
    </div>

  </div>
</div>

@endsection

@section('scrollpy')


<div id="scrollspy">
  <div class="vh-100 d-flex align-items-center">
    <div id="list-example" class="list-group">
      <a class="list-group-item list-group-item-action border-0 bg-transparent" href="#list-item-1">
        <i class="fa-solid fa-computer-mouse"></i>&emsp;專業線上視訊會議 </a>
      <a class="list-group-item list-group-item-action border-0 bg-transparent" href="#list-item-2">
        <i class="fa-solid fa-computer-mouse"></i>&emsp;高解析畫質與音訊 </a>
      <a class="list-group-item list-group-item-action border-0 bg-transparent" href="#list-item-3">
        <i class="fa-solid fa-computer-mouse"></i>&emsp;多國語系同步翻譯 </a>
      <a class="list-group-item list-group-item-action border-0 bg-transparent" href="#list-item-4">
        <i class="fa-solid fa-computer-mouse"></i>&emsp;全面支援翻譯字幕 </a>
    </div>
  </div>
</div>



<script>
  $('#scrollspy').hide();
  $(document).scroll(function() {
    $('body').scrollspy({
      target: '#scrollspy'
    });
    var screenPosition = $(this).scrollTop() + $(window).height();

    var startPosition = $("#list-item-1").offset().top + $("#list-item-1").outerHeight() * .6;
    var endPosition = $("#list-item-4").offset().top + $("#list-item-4").outerHeight() * 1.3;
    var start = screenPosition - startPosition;
    var end = screenPosition - endPosition;

    if (start > 0) {
      $('#scrollspy').show();
    } else {
      $('#scrollspy').hide();
    }
    if (end > 0) {
      $('#scrollspy').hide();
    }

  });
</script>
@endsection