app/template/user_data/line_consultation.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block main %}
  4.     <style>
  5.         .line-intro {
  6.             display: flex;
  7.             flex-wrap: wrap;
  8.             align-items: flex-start;
  9.             gap: 20px;
  10.             margin-bottom: 20px;
  11.         }
  12.         .line-intro__qr {
  13.             flex: 0 0 auto;
  14.             width: 150px;
  15.             max-width: 100%;
  16.             height: auto;
  17.         }
  18.         .line-intro__text {
  19.             flex: 1 1 320px;
  20.             min-width: 0;
  21.         }
  22.         @media (max-width: 767px) {
  23.             .line-intro {
  24.                 gap: 12px;
  25.             }
  26.             .line-intro__qr {
  27.                 width: 120px;
  28.                 margin: 0 auto;
  29.             }
  30.         }
  31.     </style>
  32.     <div class="ec-role">
  33.         <div class="ec-pageHeader">
  34.             <h1>{{ 'LINEお見積もり相談'|trans }}</h1>
  35.         </div>
  36.         <div class="ec-off2Grid">
  37.             <div class="ec-off2Grid__cell">
  38.                 <div class="ec-borderedDefs">
  40.             <h3>LINEお見積もり相談の流れ</h3>
  41.             <div class="line-intro">
  42.                 <img class="line-intro__qr" src="/html/user_data/assets/img/LINE_eTVDtCT_QR.png" alt="LINE QRコード" width="150" height="150">
  43.                 <div class="line-intro__text">
  44.                     Line公式アカウント「Exteria Plus」<br/><br/>
  45.                     お見積もりのご相談から、エクステリアのコーディネートのご相談を受け付けています。<br/>
  46.                     <strong>返信対応時間</strong><br/>
  47.                     対応時間は <strong>10:00～17:00</strong>（日曜、祝日を除く）<br/><br/>
  48.                     <a href="https://lin.ee/eTVDtCT" target="_blank" rel="noopener" style="display:inline-block;background:#06C755;color:#fff;padding:10px 18px;border-radius:6px;text-decoration:none;font-weight:bold;">
  49.                         LINE で友だち追加 (URL から)
  50.                     </a><br/>
  51.                     <small style="color:#666;">スマートフォンでは上のボタン、PC では左の QR コードをスマホで読み取ってください。</small>
  52.                 </div>
  53.             </div>
  54.             <ol>
  55.                  <li><strong>友だち追加</strong>
  56.             画面のQRコードからLINEの「友だち追加」を行ってください。
  57.             
  58.             
  59.             </li>
  60.                  <li><strong>相談内容の選択</strong>
  61.             画面のバナーから以下のどちらかの相談内容を選んでください。
  62.             <ul>
  63.                  <li>エクステリアのお見積もり・ご相談はこちら</li>
  64.                  <li>コーディネート質問・相談</li>
  65.             </ul>
  66.             <img src="/html/user_data/assets/img/Line_Menu.png" alt="LINEメニュー" width="300" height="auto" style="max-width:100%;height:auto;display:block;">
  67.             </li>
  68.                  <li><strong>お申込みに必要な情報を返信</strong>
  69.             以下の情報をLINEでご返信ください：
  70.             <ul>
  71.                  <li>お名前、電話番号</li>
  72.                  <li>お住まいの地域</li>
  73.                  <li>工事希望時期（ご希望の日程がある場合はご記入ください）</li>
  74.                  <li>提案希望商品（例：カーポート、ウッドデッキなど）</li>
  75.                  <li>ご相談内容（できるだけ詳細にご記入ください）</li>
  76.                  <li>図面やお庭の画像もお送りいただけますと、よりスムーズなご案内が可能です。</li>
  77.             </ul>
  78.             </li>
  79.             </ol>
  81.             <hr />
  83.             こちらの手順に従って、ご相談内容を送信いただき、返信をお待ちください。<br/>
  84.             営業日でしたら当日中に返信いたします。<br/>
  85.             ご質問の内容によってお時間をいただく可能性があります。
  86.                 </div>
  87.             </div>
  88.         </div>
  90.     </div>
  91. {% endblock %}