{#
This file is part of EC-CUBE
Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
http://www.ec-cube.co.jp/
For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% set body_class = 'front_page' %}
{% set recommends = [
{
'url':'/user_data/showroom',
'heading3':'REAL SHOP',
'heading2_1':'銀座・横浜元町',
'heading2_2':'ショールーム',
'image':'assets/img/recommend/recommend1.webp',
'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>'
},
{
'url':'/help/about',
'heading3':'CONCEPT',
'heading2_1':'祈りの道具屋',
'heading2_2':'まなかについて',
'image':'assets/img/recommend/recommend2.webp',
'pick_up':''
},
{
'url':'/special',
'heading3':'SPECIAL',
'heading2_1':'祈りに親しむ',
'heading2_2':'',
'image':'assets/img/recommend/recommend3.webp',
'pick_up':''
},
{
'url':'/user_data/catalog',
'heading3':'SERVICE',
'heading2_1':'カタログお届け',
'heading2_2':'サービス',
'image':'assets/img/recommend/recommend4.webp',
'pick_up':''
},
{
'url':'/user_data/pick_up_altar',
'heading3':'SERVICE',
'heading2_1':'仏壇引き取り',
'heading2_2':'サービス',
'image':'assets/img/recommend/recommend6.webp',
'pick_up':''
},
] %}
{% block main %}
<div class="bg-recommend py-9 w-full flex justify-center h-[400px] bg-cover lg:bg-recommend-md lg:h-[696px]">
<div class="max-w-[1120px] lg:max-w-[max(15.36vw,295px)] w-full flex flex-col gap-y-8 items-center justify-center">
<div class="flex items-center gap-x-2 w-full">
<div class="w-full flex flex-col">
<div class="w-full bg-[#C5C5C5] h-[1px]"></div>
<div class="w-full bg-white h-[1px]"></div>
</div>
<p class="whitespace-nowrap text-sm font-extralight ">おすすめコンテンツ</p>
<div class="w-full flex flex-col">
<div class="w-full bg-[#C5C5C5] h-[1px]"></div>
<div class="w-full bg-white h-[1px]"></div>
</div>
</div>
{# コンテンツ #}
<div class="relative gap-8 flex flex-wrap items-center justify-center xl:gap-y-4 w-full">
{% for recommend in recommends %}
<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">
{{recommend.pick_up|raw}}
<div class="flex flex-col items-center justify-center gap-y-2 whitespace-nowrap ">
<p class="text-[10px] xl:text-[8px] font-extralight tracking-widest">{{recommend.heading3}}</p>
<span class="flex flex-col gap-y-2 text-sm xl:text-xs font-extralight tracking-widest text-center">
<p>{{recommend.heading2_1}}</p>
<p>{{recommend.heading2_2}}</p>
</span>
</div>
<img src={{asset(recommend.image)}} alt="" class="w-[152px] xl:w-[110px] h-[104px] xl:h-[75px]">
</a>
{% endfor %}
</div>
</div>
</div>
{% endblock %}