app/template/user_data/photo_services.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'default_frame.twig' %}
  13. {% set body_class = 'front_page' %}
  15. {% block main %}
  16.     <div class="md:mt-8 max-w-[880px] flex flex-col justify-center items-center w-full mx-auto lg:px-6 font-extralight">
  17.         <div
  18.             class="w-full flex flex-col items-center">
  19.             {# top #}
  20.             <img src="{{asset('assets/img/photo_services/pc_main_coordinate_satsuei.gif')}}" alt="お仏壇引取りサービスのGIF" class="w-[max(45.8vw,880px)] h-auto md:hidden">
  21.             <img src="{{asset('assets/img/photo_services/sp_main_coordinate_satsuei.gif')}}" alt="お仏壇引取りサービスのGIF" class="w-[325px] h-[325px] hidden md:block">
  22.             <h2 class="text-[40px] leading-[160%] tracking-[12px] md:tracking-widest my-20 md:my-10 md:text-center md:text-xl ">コーディネート<br class="hidden md:block">撮影サービス</h2>
  23.             <hr class="bg-[#DFDFDF] w-[100vw] mx-[calc(50%-50vw)] px-[calc(50%-50vw)]">
  24.         </div>
  25.         <div class="flex flex-col items-center w-full py-24 md:py-10">
  26.             <div class="relative mb-10 md:mb-7">
  27.                 <img src="{{asset('assets/img/corporate/reef.webp')}}" alt="葉" class="absolute left-[-36px] w-[52px] h-[58px] top-[-16px] md:w-9 md:h-10 md:left-[-8px] md:top-[-12px]">
  28.                 <h2 class="text-[28px] md:text-xl md:text-center tracking-[0.5rem] md:tracking-widest font-extralight">あなた専用の仏壇・仏具
  29.                     <br class="hidden lg:block">
  30.                     セットを作りませんか？</h2>
  31.             </div>
  32.             <p class="text-sm leading-relaxed tracking-widest text-center md:text-start md:text-xs">ご希望の商品の組み合わせ（コーディネート）をまなかが撮影し、メールでお送りするサービスです。
  33.                 <br class="md:hidden">
  34.                 遠方の方など、ショールームに足を運べないお客様にご好評頂いております。</p>
  35.         </div>
  36.         <hr class="bg-[#DFDFDF] w-[100vw] mx-[calc(50%-50vw)] px-[calc(50%-50vw)]">
  37.         <div class="flex flex-col items-center w-full py-24 md:py-10">
  38.             <h2 class="text-[28px] tracking-[0.5rem] mb-10 md:mb-7 md:text-xl font-extralight">ご利用料金</h2>
  39.             <p class="text-sm leading-relaxed tracking-widest text-center md:text-start md:text-xs">無料でご利用いただけます（最大2回まで）。<br>
  40.                 ※ご購入を必須としたサービスではありませんのでご安心ください。</p>
  41.         </div>
  42.         <hr class="bg-[#DFDFDF] w-[100vw] mx-[calc(50%-50vw)] px-[calc(50%-50vw)]">
  43.         <div class="max-w-[880px] mx-auto w-full flex-col items-center py-24 md:py-10 md:px-5">
  44.             <h2 class="text-[28px] tracking-[0.5rem] mb-[88px] md:mb-10 md:text-xl font-extralight text-center">お申込み/ご利用方法</h2>
  45.             <div class="flex mb-12 md:mb-10">
  46.                 <img src="{{asset('assets/img/photo_services/coordinate_step1.webp')}}" alt="" class="w-[200px] h-[200px] mr-14 md:hidden">
  47.                 <div>
  48.                     <div class="flex mb-7 align-baseline items-center md:order-1">
  49.                         <p class="text-[22px] tracking-[5.28px] md:text-sm">Step</p>
  50.                         <p class="text-[26px] md:text-lg">
  51.                             1
  52.                         </p>
  53.                         <hr class="w-[1px] h-11 md:h-8 mx-5 bg-black ">
  54.                         <p class="text-[22px] tracking-[5.28px] md:text-base">お申し込み</p>
  55.                     </div>
  56.                     <div class="md:flex">
  57.                         <img src="{{asset('assets/img/photo_services/coordinate_step1.webp')}}" alt="" class="w-[106px] h-[106px] mr-3 md:block hidden">
  58.                         <p class="tracking-[3px] leading-relaxed text-sm">電話またはフォームにて、お名前、メールアドレス、ご希望の商品などをご連絡ください。</p>
  59.                     </div>
  60.                 </div>
  61.             </div>
  62.             <div class="flex mb-12 md:mb-10">
  63.                 <img src="{{asset('assets/img/photo_services/coordinate_step2.webp')}}" alt="" class="w-[200px] h-[200px] mr-14 md:hidden">
  64.                 <div>
  65.                     <div class="flex mb-7 align-baseline">
  66.                         <p class="text-[22px] tracking-[5.28px] mt-2 md:text-sm">Step</p>
  67.                         <p class="text-[26px] mt-2 md:text-lg">
  68.                             2
  69.                         </p>
  70.                         <hr class="w-[1px] h-auto mx-5 bg-black ">
  71.                         <p class="text-[22px] tracking-[5.28px] leading-10 md:text-base ">専門スタッフがコーディネートを<br class="md:hidden">検討し撮影</p>
  72.                     </div>
  73.                     <div class="md:flex">
  74.                         <img src="{{asset('assets/img/photo_services/coordinate_step2.webp')}}" alt="" class="w-[106px] h-[106px] mr-3 md:block hidden">
  75.                         <p class="tracking-[3px] leading-relaxed text-sm">弊社の専門スタッフがご要望に沿うコーディネートを検討し、撮影いたします。</p>
  76.                     </div>
  77.                 </div>
  78.             </div>
  79.             <div class="flex mb-12 md:mb-10">
  80.                 <img src="{{asset('assets/img/photo_services/coordinate_step3.webp')}}" alt="" class="w-[200px] h-[200px] mr-14 md:hidden">
  81.                 <div>
  82.                     <div class="flex mb-7 align-baseline items-center ">
  83.                         <p class="text-[22px] tracking-[5.28px] md:text-sm">Step</p>
  84.                         <p class="text-[26px] md:text-lg">
  85.                             3
  86.                         </p>
  87.                         <hr class="w-[1px] h-11 md:h-8 mx-5 bg-black ">
  88.                         <p class="text-[22px] tracking-[5.28px] md:text-base">メールで写真をご確認</p>
  89.                     </div>
  90.                     <div class="md:flex">
  91.                         <img src="{{asset('assets/img/photo_services/coordinate_step3.webp')}}" alt="" class="w-[106px] h-[106px] mr-3 md:block hidden">
  92.                         <p class="tracking-[3px] leading-relaxed text-sm">メールでコーディネート案（お写真）をお送りします。</p>
  93.                     </div>
  94.                 </div>
  95.             </div>
  96.         </div>
  97.         <hr class="bg-[#DFDFDF] w-[100vw] mx-[calc(50%-50vw)] px-[calc(50%-50vw)]">
  98.         <div class="max-w-[880px] w-full mx-autoflex flex-col items-center py-24 md:py-10">
  99.             <h2 class="text-[28px] tracking-[0.5rem] md:mb-7 md:text-lg font-extralight mb-12 text-center">コーディネート撮影サービス
  100.                 <br class="hidden lg:block">
  101.                 お申し込みについて</h2>
  102.             <div class="bg-[#DCD2C6] py-12 w-full flex flex-col items-center px-5 md:py-8">
  103.                 <p class="text-2xl font-light mb-10 md:text-base md:mb-4 tracking-[7px]">フォームでのお申込みはこちら</p>
  104.                 <a href={{url('coordinate_confirm')}} class="flex w-[554px] md:w-[280px] md:h-[60px] md:gap-10 gap-20 h-[120px] md:px-6 md:mb-5 justify-end px-12 bg-[#FFFFFF] font-extralight text-lg border-b-[6px] items-center border-[#585858] mb-6">
  105.                     <p class="text-center text-xl tracking-[4px] font-extralight md:text-sm">お申し込みフォーム</p>
  106.                     <img src="{{ asset('assets/icon/long-arrow.svg') }}" alt="" class="md:w-8 md:h-8">
  107.                 </a>
  108.                 <p class="font-light text-sm text-center leading-relaxed md:text-start tracking-[2.8px]">※メールアドレスを正しくお伝え頂けない場合、<br class="md:hidden">
  109.                     コーディネート写真をお送りできない場合がございます。ご了承ください。</p>
  110.                 <hr class="w-8 border-black my-8 md:my-6">
  111.                 <p class="tracking-[7px] text-2xl mb-8 md:hidden">お電話でもお申込みいただけます</p>
  112.                 <p class="hidden md:block font-extralight md:mb-5">お電話でのお申込み</p>
  113.                 <p class="font-light text-sm mb-8 text-center leading-relaxed md:text-start">「コーディネート撮影サービス」利用希望とお申し付けください。<br class="md:hidden">
  114.                     担当スタッフより必要事項をヒアリングさせて頂きます。</p>
  115.                 <a href="tel:0355795671" class="flex gap-x-5 items-center">
  116.                     <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="w-9 h-9 md:w-7 md:h-7">
  117.                         <path fillrule="evenodd" d="M1.5 4.5a3 3 0 0 1 3-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 0 1-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 0 0 6.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 0 1 1.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 0 1-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5Z" cliprule="evenodd"/>
  118.                     </svg>
  119.                     <p class="text-[26px] lg:text-xl tracking-[8px] md:text-xl">03-5579-5671</p>
  120.                 </a>
  121.             </div>
  122.         </div>
  123.         {% set breadcrumbs = [
  124.             {
  125.                 'name':'お仏壇コーディネート撮影サービス',
  126.             }
  127.         ] %}
  128.         {{ include("Block/breadcrumbs.twig") }}
  129.     </div>
  130. {% endblock %}