src/Eccube/Resource/template/default/recommendation.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. {% set body_class = 'front_page' %}
  12. {% set recommends = [
  13.     {
  14.         'url':'/user_data/showroom',
  15.         'heading3':'REAL SHOP',
  16.         'heading2_1':'銀座・横浜元町',
  17.         'heading2_2':'ショールーム',
  18.         'image':'assets/img/recommend/recommend1.webp',
  19.         'pick_up':'<p class="absolute z-10 text-white font-extralight tracking-widest text-[10px] px-2 py-1 whitespace-nowrap bg-[#B50000] top-[-10px] lg:top-[-12px] left-[-10px] rounded-full first:block hidden">PICK UP</p>'
  20.     },
  21.     {
  22.         'url':'/help/about',
  23.         'heading3':'CONCEPT',
  24.         'heading2_1':'祈りの道具屋',
  25.         'heading2_2':'まなかについて',
  26.         'image':'assets/img/recommend/recommend2.webp',
  27.         'pick_up':''
  28.     },
  29.     {
  30.         'url':'/special',
  31.         'heading3':'SPECIAL',
  32.         'heading2_1':'祈りに親しむ',
  33.         'heading2_2':'',
  34.         'image':'assets/img/recommend/recommend3.webp',
  35.         'pick_up':''
  36.     },
  37.     {
  38.         'url':'/user_data/catalog',
  39.         'heading3':'SERVICE',
  40.         'heading2_1':'カタログお届け',
  41.         'heading2_2':'サービス',
  42.         'image':'assets/img/recommend/recommend4.webp',
  43.         'pick_up':''
  44.     },
  45.     {
  46.         'url':'/user_data/pick_up_altar',
  47.         'heading3':'SERVICE',
  48.         'heading2_1':'仏壇引き取り',
  49.         'heading2_2':'サービス',
  50.         'image':'assets/img/recommend/recommend6.webp',
  51.         'pick_up':''
  52.     },
  54. ] %}
  55. {% block main %}
  56.     <div class="bg-recommend py-9 w-full flex justify-center h-[400px] bg-cover lg:bg-recommend-md lg:h-[696px]">
  57.         <div class="max-w-[1120px] lg:max-w-[max(15.36vw,295px)] w-full flex flex-col gap-y-8 items-center justify-center">
  58.             <div class="flex items-center gap-x-2 w-full">
  59.                 <div class="w-full flex flex-col">
  60.                     <div class="w-full bg-[#C5C5C5]  h-[1px]"></div>
  61.                     <div class="w-full bg-white h-[1px]"></div>
  62.                 </div>
  63.                 <p class="whitespace-nowrap text-sm font-extralight ">おすすめコンテンツ</p>
  64.                 <div class="w-full flex flex-col">
  65.                     <div class="w-full bg-[#C5C5C5]  h-[1px]"></div>
  66.                     <div class="w-full bg-white h-[1px]"></div>
  67.                 </div>
  68.             </div>
  69.             {# コンテンツ #}
  70.             <div class="relative gap-8 flex flex-wrap items-center justify-center xl:gap-y-4 w-full">
  71.                 {% for recommend in recommends %}
  72.                     <a href={{recommend.url}} class="relative w-[348px] xl:w-[275px] flex py-[3px] pl-[36px] pr-[3px] xl:pl-7 justify-between rounded drop-shadow-[0px_2px_12px_rgba(137,137,137,0.15)] bg-white hover:drop-shadow-[0px_2px_8px_rgba(137,137,137,0.5)] hover:duration-500">
  73.                         {{recommend.pick_up|raw}}
  74.                         <div class="flex flex-col items-center justify-center gap-y-2 whitespace-nowrap ">
  75.                             <p class="text-[10px] xl:text-[8px] font-extralight tracking-widest">{{recommend.heading3}}</p>
  76.                             <span class="flex flex-col gap-y-2 text-sm xl:text-xs font-extralight tracking-widest text-center">
  77.                                 <p>{{recommend.heading2_1}}</p>
  78.                                 <p>{{recommend.heading2_2}}</p>
  79.                             </span>
  80.                         </div>
  81.                         <img src={{asset(recommend.image)}} alt="" class="w-[152px] xl:w-[110px] h-[104px] xl:h-[75px]">
  82.                     </a>
  83.                 {% endfor %}
  84.             </div>
  85.         </div>
  86.     </div>
  87. {% endblock %}