app/template/user_data/service.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block javascript %}{% endblock %}
  5. {% block main %}
  6.     <div class="w-[880px] md:w-full mx-auto font-extralight text-lg mt-20 md:mt-10">
  7.         <p class="text-center text-[40px] md:text-xl tracking-[7px]">まなかの商品選び<br class="hidden md:block">サポートサービス</p>
  8.         <div class="relative w-full h-[1px] my-20 md:my-10">
  9.             <hr class="absolute left-0 w-[100vw] -ml-[calc(50vw-50%)]">
  10.         </div>
  11.         <div class="flex flex-col items-center md:px-4">
  12.             <div class="flex justify-center items-center md:items-start mb-10 md:mb-8">
  13.                 <div class="relative">
  14.                     <p class="text-3xl md:text-xl tracking-[7px] text-center">
  15.                         <img src="{{ asset('assets/img/service/leaf.svg') }}" class="h-[52px] w-[52px] mb-[-32px] ml-[-32px] md:ml-0 md:mr-[-40px]">
  16.                         商品選びに
  17.                         <br class="hidden md:block"/>お悩みではありませんか？
  18.                     </p>
  19.                 </div>
  20.             </div>
  21.             <p class="w-[708px] md:w-full text-center tracking-[0.33rem] leading-5 mb-14 md:mb-9 text-sm md:text-xs md:leading-7 sm:text-left">
  22.                 お客様に納得のいく商品探しをしていただくために、まなかでは商品を選ぶためのサポートサービスを複数ご用意しております。
  23.                 <br class"hidden md:block">下記より、お気軽にお申し付けください。
  24.             </p>
  25.             <div class="flex flex-col gap-10 md:gap-5 items-center">
  26.                 <div class="flex justify-between gap-10 md:gap-[5%]">
  27.                     <a href="{{url('user_data',{route:'catalog'})}}" class="flex flex-col w-[418px] md:w-[47.5%] shadow-[0px_0px_10px_0px_#8989891A] justify-center items-center px-10 md:px-4 pt-4 md:pt-5 md:pb-7 pb-8 hover">
  28.                         <img src="{{ asset('assets/img/service/catalog.svg') }}" class="w-[178px] md:w-[102px] aspect-square">
  29.                         <p class="text-base text-center tracking-widest md:text-sm md:mb-4 mb-8">カタログお届け<br class="hidden md:block">サービス</p>
  30.                         <img src="{{ asset('assets/img/service/free.svg') }}" class="h-[30px] md:h-[24px] w-[52px] md:w-[44px] mb-6 md:mb-4">
  31.                         <div class="flex-grow flex items-start">
  32.                             <p class="text-sm md:text-xs tracking-widest">まなかの商品カタログを無料でお届けします。</p>
  33.                         </div>
  34.                     </a>
  35.                     <a href="{{url('user_data',{route:'photo_services'})}}" class="flex flex-col w-[418px] md:w-[47.5%] shadow-[0px_0px_10px_0px_#8989891A] justify-center items-center px-10 md:px-[18px] pt-4 pb-8 md:pt-5 md:pb-7 hover">
  36.                         <img src="{{ asset('assets/img/service/camera.svg') }}" class="w-[178px] md:w-[102px] aspect-square">
  37.                         <p class="text-base text-center tracking-widest md:text-sm md:mb-4 mb-8">コーディネート<br class="hidden md:block">撮影サービス</p>
  38.                         <img src="{{ asset('assets/img/service/free.svg') }}" class="h-[30px] md:h-[24px] w-[52px] md:w-[44px] mb-6 md:mb-4">
  39.                         <div class="flex-grow flex items-start">
  40.                             <p class="text-sm md:text-xs tracking-widest">ご希望の商品の組み合わせをまなかが撮影し、メールでお送りするサービスです。</p>
  41.                         </div>
  42.                     </a>
  43.                 </div>
  44.                 <a href="{{url('user_data',{route:'pick_up_altar'})}}" class="flex flex-col w-[418px] md:w-[47.5%] shadow-[0px_0px_10px_0px_#8989891A] justify-center items-center px-10 md:px-[18px] pt-4 pb-8 md:pt-5 md:pb-7 hover">
  45.                     <img src="{{ asset('assets/img/service/altar.svg') }}" class="w-[178px] md:w-[102px] aspect-square">
  46.                     <p class="text-base text-center tracking-widest md:text-sm md:mb-4 mb-8">お仏壇引き取り<br class="hidden md:block">サービス</p>
  47.                     <img src="{{ asset('assets/img/service/paid.svg') }}" class="h-[30px] md:h-[24px] w-[52px] md:w-[44px] mb-6 md:mb-4">
  48.                     <div class="flex-grow flex items-start">
  49.                         <p class="text-sm md:text-xs tracking-widest">提携会社によるお仏壇引き取りサービス（有償）をご紹介します。</p>
  50.                     </div>
  51.                 </a>
  52.             </div>
  53.         </div>
  54.     </div>
  55.     {% set breadcrumbs = [{'name': 'まなかの商品選びサポートサービス'}] %}
  56.     {% include('Block/breadcrumbs.twig') %}
  57. {% endblock %}