app/template/user_data/guide_top.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. {% set guide_details = [
  16.     {
  17.         'name':'1. ご注文手順',
  18.         'href':'/user_data/guide_detail#sec01'
  19.     },
  20.     {
  21.         'name':'2. 送料・配送方法',
  22.         'href':'/user_data/guide_detail#sec02'
  23.     },
  24.     {
  25.         'name':'3. お支払い方法',
  26.         'href':'/user_data/guide_detail#sec03'
  27.     },
  28.     {
  29.         'name':'4. 会員登録について',
  30.         'href':'/user_data/guide_detail#sec04'
  31.     },
  32.     {
  33.         'name':'5. お仏壇の引き取りについて',
  34.         'href':'/user_data/guide_detail#sec05'
  35.     },
  36.     {
  37.         'name':'6. お位牌への名入れサービス',
  38.         'href':'/user_data/guide_detail#sec06'
  39.     },
  40.     {
  41.         'name':'7. 返品・交換・キャンセル・追加',
  42.         'href':'/user_data/guide_detail#sec07'
  43.     },
  44.     {
  45.         'name':'8. 領収書の発行',
  46.         'href':'/user_data/guide_detail#sec08'
  47.     },
  48.     {
  49.         'name':'9. 運営会社について',
  50.         'href':'/user_data/guide_detail#sec09'
  51.     },
  52. ] %}
  54. {% block main %}
  55.     <div class="w-full max-w-[720px] lg:max-w-none lg:mx-0 flex flex-col tems-center justify-center mx-auto">
  56.         <div class="w-full lg:px-4 flex gap-x-[70px]  justify-center  animate-slideIn">
  57.             <div class="w-full max-w-[720px] xl:w-full flex flex-col mt-10 md:mt-6 font-extralight">
  58.                 <div class="flex flex-col mb-8 md:mb-4">
  59.                     <h2 class="text-[26px] md:text-lg mb-7 md:mb-5 font-extralight">ご利用ガイド・サービス</h2>
  60.                     <p class="text-[#666666] md:text-sm font-extralight">「祈りの道具屋まなか」をご利用いただくのに便利な情報をまとめました。</p>
  61.                 </div>
  62.                 <div class="px-6 py-5 bg-manakaBeige md:px-5 md:py-4 hover:bg-[#EEEEE9]">
  63.                     <a href="{{url('user_data',{route:'guide_detail'})}}" class="flex justify-between items-start mb-5">
  64.                         <div class="flex flex-col gap-y-4 w-full ">
  65.                             <div class="flex justify-between items-center">
  66.                                 <div class="flex gap-x-[10px]">
  67.                                     <img src="{{ asset('assets/img/guide/icn-guide.svg') }}" alt="ご利用ガイド" class="w-[38px] md:w-[26px]">
  68.                                     <h3 class="text-2xl md:text-lg font-bold">ご利用ガイド</h3>
  69.                                 </div>
  70.                                 <img src="{{ asset('assets/icon/ChevronDownOutline.svg') }}" alt="ご利用ガイド詳細へ" class="w-6 md:w-6 h-auto -rotate-90">
  71.                             </div>
  72.                             <p class="text-[#666666] md:text-sm">ご注文方法・商品がお手元に届くまでの手順などをご紹介します。</p>
  73.                         </div>
  74.                     </a>
  75.                     <ul class="px-3 grid grid-rows-5 grid-flow-col gap-x-4 gap-y-0 lg:grid-rows-9 md:px-1">
  76.                         {% for guide_detail in guide_details %}
  77.                             <a href="{{guide_detail.href}} ">
  78.                                 <li class="flex justify-between items-center w-full pr-4 border-[#CCCCCC] border-y-[2px] mb-[-2px] py-4 text-[#666666] md:text-sm">
  79.                                     <p>{{guide_detail.name}}</p>
  80.                                     <img src="{{ asset('assets/icon/ChevronDownOutline.svg') }}" alt="" class="w-4 h-4 -rotate-90">
  81.                                 </li>
  82.                             </a>
  83.                         {% endfor %}
  84.                     </ul>
  85.                 </div>
  86.                 <div class="px-6 py-8 bg-manakaBeige md:px-5 md:py-4 hover:bg-[#EEEEE9] mt-7">
  87.                     <a href="{{ url('user_data', {'route': 'qa' }) }}" class="flex justify-between items-start">
  88.                         <div class="flex flex-col gap-y-4 w-full">
  89.                             <div class="flex justify-between items-center">
  90.                                 <div class="flex gap-x-[10px]">
  91.                                     <img src="{{ asset('assets/img/guide/icn-qa.svg') }}" alt="ご利用ガイド" class="w-[38px] md:w-[26px]">
  92.                                     <h3 class="text-2xl md:text-lg font-bold">よくあるご質問</h3>
  93.                                 </div>
  94.                                 <img src="{{ asset('assets/icon/ChevronDownOutline.svg') }}" alt="ご利用ガイド詳細へ" class="w-6 md:w-6 h-auto -rotate-90">
  95.                             </div>
  96.                             <p class="text-[#666666]">よく頂く質問へのご回答をまとめました。</p>
  97.                         </div>
  98.                     </a>
  99.                 </div>
  100.                 <div class="px-6 py-8 bg-manakaBeige md:px-5 md:py-4 hover:bg-[#EEEEE9] mt-7">
  101.                     <a href="{{ url('user_data', {'route': 'catalog' }) }}" class="flex justify-between items-start ">
  102.                         <div class=" flex flex-col gap-y-4 w-full">
  103.                             <div class="flex justify-between items-center">
  104.                                 <div class="flex gap-x-[10px] items-center">
  105.                                     <img src="{{ asset('assets/img/guide/icn-catalog.svg') }}" alt="ご利用ガイド" class="w-[38px] md:w-[26px]">
  106.                                     <h3 class="text-2xl md:text-lg font-bold">カタログ請求</h3>
  107.                                     <p class="px-3 py-[1px] bg-[#A7A79B] text-white rounded-full text-center items-center flex md:text-[10px] text-sm">無料</p>
  108.                                 </div>
  109.                                 <img src="{{ asset('assets/icon/ChevronDownOutline.svg') }}" alt="ご利用ガイド詳細へ" class="w-6 md:w-6 h-auto -rotate-90">
  110.                             </div>
  111.                             <p class="text-[#666666]">まなかの商品カタログを無料でお届けします。</p>
  112.                         </div>
  113.                     </a>
  114.                 </div>
  115.                 <div class="px-6 py-8 bg-manakaBeige  md:px-5 md:py-4 hover:bg-[#EEEEE9] mt-7">
  116.                     <a href="{{ url('user_data', {'route': 'photo_services' }) }}" class="flex justify-between items-start">
  117.                         <div class="flex flex-col gap-y-4 w-full">
  118.                             <div class="items-center flex justify-between">
  119.                                 <div class="flex gap-x-[10px] items-center lg:flex-col lg:items-start lg:justify-start lg:gap-y-[6px]">
  120.                                     <div class="gap-x-2 flex">
  121.                                         <img src="{{ asset('assets/img/guide/icn-photo.svg') }}" alt="ご利用ガイド" class="w-[38px] md:w-[26px]">
  122.                                         <h3 class="text-2xl md:text-lg font-bold whitespace-nowrap">コーディネート撮影サービス</h3>
  123.                                     </div>
  124.                                     <p class="px-3 py-[1px] bg-[#A7A79B] text-white rounded-full text-center items-center flex md:text-[10px] text-sm md:ml-9">無料</p>
  125.                                 </div>
  126.                                 <img src="{{ asset('assets/icon/ChevronDownOutline.svg') }}" alt="ご利用ガイド詳細へ" class="w-6 md:w-6 h-auto -rotate-90">
  127.                             </div>
  128.                             <div class="flex flex-col gap-y-1">
  129.                                 <p class="text-[#666666] md:text-sm">ご希望の商品の組み合わせをまなかが撮影し、メールでお送りするサービスです。</p>
  130.                                 <p class="text-[#666666] md:text-sm">遠方の方など、ショールームに足を運べないお客様にご好評頂いております。</p>
  131.                             </div>
  132.                         </div>
  133.                     </a>
  134.                 </div>
  135.                 <div class="px-6 py-8 bg-manakaBeige md:px-5 md:py-4 hover:bg-[#EEEEE9] mt-7">
  136.                     <a href="{{ url('user_data', {'route': 'naire' }) }}" class="flex justify-between items-start">
  137.                         <div class="w-full flex flex-col gap-y-4">
  138.                             <div class="flex items-center justify-between">
  139.                                 <div class="flex gap-x-[10px] items-center">
  140.                                     <img src="{{ asset('assets/img/guide/icn-jihori.svg') }}" alt="ご利用ガイド" class="w-[38px] md:w-[26px]">
  141.                                     <h3 class="text-2xl md:text-lg font-bold">お位牌への名入れについて</h3>
  142.                                 </div>
  143.                                 <img src="{{ asset('assets/icon/ChevronDownOutline.svg') }}" alt="ご利用ガイド詳細へ" class="w-6 md:w-6 h-auto -rotate-90">
  144.                             </div>
  145.                             <p class="text-[#666666] md:text-sm ">お位牌ごとの仕様や、注意事項をまとめました。</p>
  146.                         </div>
  147.                     </a>
  148.                 </div>
  149.             </div>
  150.         </div>
  151.         {% set breadcrumbs = [
  152.             {
  153.                 'name':'ご利用ガイド',
  154.             }
  155.         ] %}
  156.         {{ include("Block/breadcrumbs.twig") }}
  157.     </div>
  158. {% endblock %}