app/template/user_data/catalog.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% set body_class = 'second catalog' %}
  5. {% block main %}
  6.     <div class="w-[880px] md:w-full mx-auto font-extralight text-lg md:px-6">
  7.         <div class="flex flex-col gap-20 md:gap-10">
  8.             <img src="{{ asset('assets/img/catalog/pc_main_catalog_seikyu.gif') }}" class="md:hidden">
  9.             <img src="{{ asset('assets/img/catalog/sp_main_catalog_seikyu.gif') }}" class="hidden md:block aspect-square">
  10.             <p class="text-center text-[40px] md:text-xl tracking-[7px] md:hidden leading-normal">カタログお届けサービス</p>
  11.             <div class="hidden md:block">
  12.                 <p class="text-center text-[40px] md:text-xl tracking-[7px]">カタログお届け</p>
  13.                 <p class="text-center text-[40px] md:text-xl tracking-[7px]">サービス</p>
  14.             </div>
  15.         </div>
  16.         <div class="relative w-full h-[1px] my-20 md:my-10">
  17.             <hr class="absolute left-0 w-[100vw] -ml-[calc(50vw-50%)]">
  18.         </div>
  19.         <div class="flex flex-col items-center gap-1">
  20.             <div class="flex justify-center items-center md:items-start mb-10 relative">
  21.                 <img src="{{ asset('assets/img/catalog/leaf.svg') }}" class="absolute left-[-36px] w-[52px] h-[58px] top-[-16px] md:w-9 md:h-10 md:left-[-22px] md:top-[-14px]">
  22.                 <p class="text-[28px] md:text-xl tracking-[7px] md:tracking-[5.6px]">まなかの世界を冊子で<br class="hidden md:block">ご覧になりませんか？</p>
  23.             </div>
  24.             <p class="tracking-widest  md:text-sm">「祈りの道具屋まなか」のオリジナルカタログを無料でご自宅までお届けします。</p>
  25.             <p class="tracking-widest  md:text-sm">お問い合わせフォーム、またはお電話でお気軽にお申し込み下さい。</p>
  26.         </div>
  27.         <div class="relative w-full h-[1px] my-20 md:my-10">
  28.             <hr class="absolute left-0 w-[100vw] -ml-[calc(50vw-50%)]">
  29.         </div>
  30.         <div class="flex flex-col items-center">
  31.             <p class="text-[28px] md:text-xl mb-10 tracking-[7px]">ご利用料金</p>
  32.             <div class="text-center md:text-start gap-1 md:text-sm">
  33.                 <p class="tracking-widest">無料でご利用いただけます</p>
  34.                 <p class="tracking-widest">※ご購入を必須としたサービスではありませんのでご安心ください。</p>
  35.             </div>
  36.         </div>
  37.         <div class="relative w-full h-[1px] my-20 md:my-10">
  38.             <hr class="absolute left-0 w-[100vw] -ml-[calc(50vw-50%)]">
  39.         </div>
  40.         <div class="flex flex-col items-center">
  41.             <p class="text-[28px] md:text-[20px] mb-[88px] md:mb-10 tracking-[7px]">お申込み/ご利用方法</p>
  42.             <div class="flex flex-col items-start gap-12">
  43.                 <div class="flex items-start justify-start gap-14 md:hidden">
  44.                     <img src="{{ asset('assets/img/catalog/img-catalog-step1.png') }}" class="w-[200px] h-[200px]">
  45.                     <div class="flex flex-col gap-6 mt-[12px]">
  46.                         <div class="flex items-center text-[24px] md:text-[16px] gap-[10px] md:gap-[2px]">
  47.                             <p class="tracking-widest">Step</p>
  48.                             <p class="text-[28px] md:text-[16px]">1</p>
  49.                             <img src="{{ asset('assets/img/catalog/ber.svg') }}" class="md:mx-[10px]">
  50.                             <p class="tracking-widest">お申し込み</p>
  51.                         </div>
  52.                         <p class="tracking-widest md:text-xs leading-relaxed">電話またはフォームにて、お名前、メールアドレス、ご住所などをご連絡ください。</p>
  53.                     </div>
  54.                 </div>
  55.                 <div class="flex items-start justify-start gap-14 md:hidden">
  56.                     <img src="{{ asset('assets/img/catalog/img-catalog-step2.png') }}" class="w-[200px] h-[200px]">
  57.                     <div class="flex flex-col gap-6 mt-[12px]">
  58.                         <div class="flex items-center text-[24px] md:text-[16px] gap-[10px] md:gap-[2px]">
  59.                             <p class="tracking-widest">Step</p>
  60.                             <p class="text-[28px] md:text-[16px]">2</p>
  61.                             <img src="{{ asset('assets/img/catalog/ber.svg') }}" class="md:mx-[10px]">
  62.                             <p class="tracking-widest">カタログ配送</p>
  63.                         </div>
  64.                         <p class="tracking-widest md:text-xs leading-relaxed">ご連絡いただいたご住所へカタログを配送させていただきます。</p>
  65.                     </div>
  66.                 </div>
  67.             </div>
  68.             <!-- SP時 -->
  69.             <div class="hidden md:block px-[15px] mb-10">
  70.                 <div class="flex gap-3 items-center text-[16px] mb-8">
  71.                     <p class="tracking-widest">Step 1</p>
  72.                     <img src="{{ asset('assets/img/catalog/ber.svg') }}" class="h-[30px] w-[1px]">
  73.                     <p class="tracking-widest">お申し込み</p>
  74.                 </div>
  75.                 <div class="flex justify-center items-start gap-[8px]">
  76.                     <img src="{{ asset('assets/img/catalog/img-catalog-step1.png') }}" class="h-[106px] w-[106px]">
  77.                     <span class="tracking-[3px] md:text-xs leading-relaxed">電話またはお問い合わせメールにて、カタログ請求の旨とお名前、メールアドレス、ご住所をご連絡ください。</span>
  78.                 </div>
  79.             </div>
  80.             <div class="hidden md:block px-[15px]">
  81.                 <div class="flex gap-3 items-center text-[16px] mb-8">
  82.                     <p class="tracking-widest">Step 2</p>
  83.                     <img src="{{ asset('assets/img/catalog/ber.svg') }}" class="h-[30px] w-[1px]">
  84.                     <p class="tracking-widest">カタログ配送</p>
  85.                 </div>
  86.                 <div class="flex justify-center items-start gap-[8px]">
  87.                     <img src="{{ asset('assets/img/catalog/img-catalog-step2.png') }}" class="h-[106px] w-[106px]">
  88.                     <span class="tracking-[3px] md:text-xs">ご連絡いただいたご住所へカタログを配送させていただきます。</span>
  89.                 </div>
  90.             </div>
  91.             <p class="tracking-widest md:text-sm mt-14 md:mt-7 leading-relaxed">
  92.                 ※カタログは通常、ご請求後1週間前後で届きますが、長期休暇期間（年末年始、GW、夏季）や カタログ在庫などの都合により遅れることがございます。
  93.             </p>
  94.             <p class="tracking-widest md:text-sm mt-8 md:mt-5 leading-relaxed">
  95.                 ※カタログに記載されている商品価格・仕様等については事前の告知なく変更になる場合がございますので ご了承ください。最新の価格についてはオンラインショップの商品詳細ページをご確認ください。
  96.             </p>
  97.             <div class="bg-[#dcd2c6] py-11 md:py-[25px] px-0 mt-12 rounded-md w-full flex flex-col justify-center text-[24px] md:text-[16px] md:mt-8 md:px-4">
  98.                 <h3 class="tracking-widest text-center">カタログのご請求はこちら</h3>
  99.                 <div
  100.                     class="w-[554px] md:w-full mx-auto mt-10 md:mt-4 bg-white">
  101.                     {# FIXME:遷移仮 #}
  102.                     <a href="{{url('catalog_confirm')}}" class="justify-end gap-20 md:gap-10 flex items-center relative py-10 px-12 border-b-4 border-[#585858] tracking-widest shadow-md text-xl md:text-sm md:h-[60px] md:px-4 md:py-5 hover">
  103.                         ご請求フォーム
  104.                         <img src="{{ asset('assets/icon/long-arrow.svg') }}" alt="" class="md:w-8 md:h-8">
  105.                     </a>
  106.                 </div>
  107.                 <div class="text-center mt-12 md:mt-6">
  108.                     <div class="hidden md:block">
  109.                         <p class="tracking-widest">お電話でも</p>
  110.                         <p class="tracking-widest">お申込みいただけます</p>
  111.                     </div>
  112.                     <h3 class="tracking-widest md:hidden">お電話でもお申込みいただけます</h3>
  113.                     <div class="pt-8 md:pt-2">
  114.                         <a href="tel:03-5579-5671" class="flex justify-center items-center text-4xl tracking-widest no-underline hover:no-underline hover">
  115.                             <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">
  116.                                 <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"/>
  117.                             </svg>
  118.                             <span class="text-[26px] md:text-[20px] tracking-widest">
  119.                                 03-5579-5671
  120.                             </span>
  121.                         </a>
  122.                     </div>
  123.                 </div>
  124.             </div>
  125.         </div>
  126.     </div>
  127.     {% set breadcrumbs = [{'name':'カタログお届けサービス'}] %}
  128.     {{include('Block/breadcrumbs.twig')}}
  129. {% endblock %}