app/template/default/index.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. {% block stylesheet %}
  16.     <link rel="stylesheet" href="{{ asset('assets/css/news-list.css') }}">
  17.     <link rel="stylesheet" href="{{ asset('assets/css/product-list.css') }}">
  18.     <link rel="stylesheet" href="{{ asset('assets/css/home.css') }}">
  19.     <link rel="stylesheet" href="{{ asset('assets/css/swiper-bundle.min.css') }}" defer>
  21. {% endblock %}
  23. {% block javascript %}
  24.     <script>
  26.     </script>
  27. {% endblock javascript %}
  29. {% block main %}
  30.     {# home #}
  32.     <!-- home page -->
  33.     <div class="banner-section-ui">
  34.         <div class="swiper banner-swiper">
  35.         <div class="swiper-wrapper" id="banner-slide-id">
  36.         {% for item in range(1, 4) %}
  37.             <div class="swiper-slide">
  38.                 <div class="banner-slide">
  39.                 <div class="banner-slide__content">
  40.                     <div class="banner-slide__text">
  41.                     <h2 class="banner-slide__heading">
  42.                         <span class="banner-slide__heading-line1">あの備長炭が</span>
  43.                         <span class="banner-slide__heading-line2">買えてしまう。</span>
  44.                     </h2>
  45.                     <p class="banner-slide__description">
  46.                         木こりがいない時代だからこそ、テクノロジーで森を守る。<br>
  47.                         植林が未来の町を守り、地域を豊かにする。<br>
  48.                         WoodTechは"木と人と地域の循環"を取り戻す挑戦を続けます。
  49.                     </p>
  50.                     <button class="btn_primary banner-slide__button" type="button" onclick="window.location.href='{{ url('help_about') }}'">
  51.                         <span class="btn_primary-text">WoodTechとは</span>
  52.                         <img class="btn_primary-icon" src="{{ asset('assets/img/default/icons/icon-arrow-nav.svg') }}" alt="" width="24" height="24" />
  53.                     </button>
  54.                     </div>
  55.                 </div>
  56.                 <div class="banner-slide__image banner-slide__image-right">
  57.                     <img src=" {% if loop.index % 2 == 1 %} {{ asset('assets/img/default/image/image_banner.png') }} {% else %} {{ asset('assets/img/default/image/image_banner_2.png') }} {% endif %}" alt="" />
  58.                 </div>
  59.                 </div>
  60.             </div>
  61.         {% endfor %}
  62.         </div>
  63.         <!-- Pagination -->
  64.         <div class="swiper-pagination banner-pagination"></div>
  65.         <!-- Navigation -->
  66.         <div class="swiper-button-next banner-button-next"></div>
  67.         <div class="swiper-button-prev banner-button-prev"></div>
  68.         </div>
  70.         <!-- product section -->
  71.         <div class="container-1200-fix product-section desktop-only-890">
  72.         <div class="product-section__wrapper">
  73.             <!-- title -->
  74.             <div class="base-title-wrapper">
  75.             <div class="base-title">
  76.                 <img class="base-title__icon" src="{{ asset('assets/img/default/icons/icon-title.png') }}" alt="" width="48" height="48" />
  77.                 <h2 class="base-title__text-heading">売れ筋ランキング</h2>
  78.             </div>
  79.             <button onclick="window.location.href='{{ url('product_list') }}'" class="btn_primary btn_primary--outline base-title__button" type="button">
  80.                 <span class="btn_primary-text">商品一覧</span>
  81.                 <img class="btn_primary-icon" src="{{ asset('assets/img/default/icons/icon-arrow-nav.svg') }}" alt="" width="24" height="24" />
  82.             </button>
  83.             </div>
  85.             <!-- product list -->
  86.             <div class="product-list" id="home-product-list">
  87.                 {% for Product in topRankingProducts %}
  88.                 <article class="product-card product-card--ranking">
  89.                     <a href="{{ url('product_detail', {'id': Product.id}) }}" class="product-card__link">
  90.                     <div class="product-card__image relative">
  91.                         <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" />
  92.                         <div class="ranking-badge">{{ loop.index }}位</div>
  93.                     </div>
  94.                     <div class="product-card__info">
  95.                         <div class="product-card__badge">{{ Product.name }}</div>
  96.                         <div class="product-card__details">
  97.                         <p class="product-card__price">
  98.                             <span class="product-card__price-main">
  99.                                 {% if Product.getPrice02Min == Product.getPrice02Max %}
  100.                                     {{ Product.getPrice02IncTaxMin|price }}
  101.                                 {% else %}
  102.                                     {{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}
  103.                                 {% endif %}
  104.                             </span>
  105.                             <span class="product-card__price-tax">(税抜 {{ Product.getPrice02Min|price }}円)</span>
  106.                         </p>
  107.                         <img class="product-card__arrow" src="{{ asset('assets/img/default/icons/icon-product-arrow.svg') }}" alt="" width="24" height="24" />
  108.                         </div>
  109.                     </div>
  110.                     </a>
  111.                 </article>
  112.                 {% endfor %}
  113.             </div>
  114.         </div>
  115.         </div>
  117.         <!-- product slide mobile only -->
  118.         <div class="mobile-only-890 mobile_slider_wrapper product-section">
  120.         <!-- title -->
  121.         <div class="base-title pl-16">
  122.             <img class="base-title__icon" src="{{ asset('assets/img/default/icons/icon-title.png') }}" alt="" width="48" height="48" />
  123.             <h2 class="base-title__text-heading">売れ筋ランキング</h2>
  124.         </div>
  126.         <!-- slider -->
  127.         <div class="swiper product-swiper">
  128.             <div class="swiper-wrapper product-swiper__wrapper" id="product-slide-id">
  129.                 {% for Product in topRankingProducts %}
  130.                 <div class="swiper-slide">
  131.                     <article class="product-card product-card--ranking product-card--ranking-mobile">
  132.                         <a href="{{ url('product_detail', {'id': Product.id}) }}" class="product-card__link">
  133.                         <div class="product-card__image relative">
  134.                             <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" />
  135.                             <div class="ranking-badge">{{ loop.index }}位</div>
  136.                         </div>
  137.                         <div class="product-card__info">
  138.                             <div class="product-card__badge">{{ Product.name }}</div>
  139.                             <div class="product-card__details">
  140.                             <p class="product-card__price">
  141.                                 <span class="product-card__price-main">
  142.                                     {% if Product.getPrice02Min == Product.getPrice02Max %}
  143.                                         {{ Product.getPrice02IncTaxMin|price }}
  144.                                     {% else %}
  145.                                         {{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}
  146.                                     {% endif %}
  147.                                 </span>
  148.                                 <span class="product-card__price-tax">(税抜 {{ Product.getPrice02Min|price }}円)</span>
  149.                             </p>
  150.                             <img class="product-card__arrow" src="{{ asset('assets/img/default/icons/icon-product-arrow.svg') }}" alt="" width="24" height="24" />
  151.                             </div>
  152.                         </div>
  153.                         </a>
  154.                     </article>
  155.                 </div>
  156.                 {% endfor %}
  157.             </div>
  158.             <!-- Pagination -->
  159.             <div class="swiper-pagination banner-pagination"></div>
  160.             <!-- Navigation -->
  161.             <div class="swiper-button-next banner-button-next"></div>
  162.             <div class="swiper-button-prev banner-button-prev"></div>
  163.         </div>
  165.         <!-- button mobile only -->
  166.         <div class="pl-16">
  167.             <button onclick="window.location.href='{{ url('product_list') }}'" class="btn_primary btn_primary--outline base-title__button" type="button">
  168.             <span class="btn_primary-text">商品一覧</span>
  169.             <img class="btn_primary-icon" src="{{ asset('assets/img/default/icons/icon-arrow-nav.svg') }}" alt="" width="24" height="24" />
  170.             </button>
  171.         </div>
  172.         </div>
  175.         <!-- about section -->
  176.         <div class="container-1200-fix about-section">
  177.         <div class="section__content_wrapper">
  178.             <div class="section__left about_left_image_wrapper">
  179.             <img class="about_left_image" src="{{ asset('assets/img/default/image/image_about.png') }}" alt="WoodTechについて" />
  180.             </div>
  182.             <!-- about section text -->
  183.             <div class="section__right">
  184.             <div class="about-section__content">
  185.                 <div>
  186.                 <div class="about-section__section-header">
  187.                     <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  188.                     <circle cx="10" cy="10" r="8" stroke="#828282" stroke-width="2" />
  189.                     <path
  190.                         d="M7.12671 8.30348C6.93657 6.66853 8.03012 5.17139 10.1251 5.17139C12.0661 5.17139 13.5076 6.63983 13.1489 8.17661C12.6279 10.4089 10.2424 9.78737 9.92637 12.143"
  191.                         stroke="#828282" stroke-width="2" stroke-linecap="round" />
  192.                     <circle cx="10" cy="15.0176" r="1.30469" fill="#828282" />
  193.                     </svg>
  194.                     <h3 class="about-section__section-title">WoodTechとは</h3>
  195.                 </div>
  196.                 <h4 class="about-section__heading">炭にこだわりがあるって？</h4>
  197.                 <p class="about-section__subheading">スミにおけないわね。</p>
  198.                 </div>
  199.                 <p class="about-section__description">
  200.                 WoodTechは、木こりの減少で荒れてしまった森をテクノロジーで守り、次世代へつなぐことを目指します。
  201.                 </p>
  202.                 <p class="about-section__description">
  203.                 木こりがいない時代だからこそ、テクノロジーで森を守る。<br>
  204.                 植林が未来の町を守り、地域を豊かにする。<br>
  205.                 WoodTechは“木と人と地域の循環”を取り戻す挑戦を続けます。
  206.                 </p>
  207.                 <button class="btn_primary about-section__button" type="button" onclick="window.location.href='{{ url('help_about') }}'">
  208.                 <span class="btn_primary-text">運営について</span>
  209.                 <img class="btn_primary-icon" src="{{ asset('assets/img/default/icons/icon-arrow-nav.svg') }}" alt="" width="24" height="24" />
  210.                 </button>
  211.             </div>
  212.             </div>
  213.         </div>
  214.         </div>
  216.         <!-- detail section -->
  217.         <div class="container-1200-fix">
  218.         <div class="section__content_wrapper">
  219.             <div class="section__left section__left-detail">
  220.             <div class="detail-section__content">
  223.                 <!-- Store Info -->
  224.                 <div class="detail-section__info">
  225.                 <!-- title section -->
  226.                 <div class="base-title m-0">
  227.                     <img class="base-title__icon" src="{{ asset('assets/img/default/icons/icon-title.png') }}" alt="" width="48" height="48" />
  228.                     <h2 class="base-title__text-heading">導入事例</h2>
  229.                 </div>
  230.                 <div class="detail-section__info-row">
  231.                     <div class="detail-section__badge">店舗名／業種</div>
  232.                     <div class="detail-section__value">炭火焼専門店「ほの家」／焼鳥・居酒屋業態</div>
  233.                 </div>
  234.                 <div class="detail-section__info-row">
  235.                     <div class="detail-section__badge">利用規模</div>
  236.                     <div class="detail-section__value">120kg / 月</div>
  237.                 </div>
  238.                 </div>
  240.                 <!-- Before Introduction -->
  241.                 <div class="detail-section__before">
  242.                 <div class="detail-section__section-header">
  243.                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  244.                     <g opacity="0.4">
  245.                     <circle cx="12" cy="12" r="9" stroke="#353535" stroke-width="2"/>
  246.                     <path d="M7.60156 11.6567L11.1371 15.1923L16.794 9.53542" stroke="#353535" stroke-width="2"/>
  247.                     </g>
  248.                     </svg>
  250.                     <h4 class="detail-section__section-title">導入前の課題</h4>
  251.                 </div>
  252.                 <div class="detail-section__list">
  253.                     <div class="detail-section__list-item">
  254.                     <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
  255.                         <circle cx="5" cy="5" r="5" fill="#828282" />
  256.                     </svg>
  258.                     <p class="detail-section__text">従来は国産炭と輸入炭を混在利用していたが、火力が不安定で焼きムラが発生。</p>
  259.                     </div>
  260.                     <div class="detail-section__list-item">
  261.                     <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
  262.                         <circle cx="5" cy="5" r="5" fill="#828282" />
  263.                     </svg>
  265.                     <p class="detail-section__text">高温維持のために常に追加が必要で、ピーク時の作業負担が大きかった</p>
  266.                     </div>
  267.                 </div>
  268.                 </div>
  270.                 <!-- After Introduction -->
  271.                 <div class="detail-section__after">
  272.                 <div class="detail-section__section-header detail-section__section-header--after">
  273.                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  274.                     <circle cx="12" cy="12" r="9" stroke="white" stroke-width="2"/>
  275.                     <path d="M7.60156 11.6567L11.1371 15.1923L16.794 9.53542" stroke="white" stroke-width="2"/>
  276.                     </svg>
  277.                     <h4 class="detail-section__section-title detail-section__section-title--after">導入後の効果</h4>
  278.                 </div>
  279.                 <div class="detail-section__list">
  280.                     <div class="detail-section__list-item">
  281.                     <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
  282.                         <circle cx="5" cy="5" r="5" fill="#8B6E00" />
  283.                     </svg>
  285.                     <p class="detail-section__text">火持ちが安定し、1回の火入れで営業終了まで持続。</p>
  286.                     </div>
  287.                     <div class="detail-section__list-item">
  288.                     <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
  289.                         <circle cx="5" cy="5" r="5" fill="#8B6E00" />
  290.                     </svg>
  292.                     <p class="detail-section__text">スタッフの炭追加回数が半減し、仕込み時間も短縮。</p>
  293.                     </div>
  294.                     <div class="detail-section__list-item">
  295.                     <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
  296.                         <circle cx="5" cy="5" r="5" fill="#8B6E00" />
  297.                     </svg>
  299.                     <p class="detail-section__text">結果： 焼き品質の均一化・人件費10％削減を実現。</p>
  300.                     </div>
  301.                 </div>
  302.                 </div>
  303.             </div>
  304.             </div>
  306.             <!-- about section text -->
  307.             <div class="section__right section__right-detail">
  308.             <img src="{{ asset('assets/img/default/image/image_detail.png') }}" alt="WoodTechについて" />
  309.             </div>
  310.         </div>
  311.         </div>
  313.         <!-- guide section -->
  314.         <div class="container-1200-fix">
  315.         <div class="section__content_wrapper guide-section-wrapper">
  316.             <div class="section__left guide-section__image-wrapper">
  317.             <img class="guide-section__image" src="{{ asset('assets/img/default/image/image_guide.png') }}" alt="WoodTechについて" />
  318.             </div>
  320.             <!-- guide section text -->
  321.             <div class="section__right">
  322.             <div class="guide-section__content">
  323.                 <!-- Header -->
  324.                 <div class="guide-section__header">
  325.                 <div class="guide-section__icon-wrapper">
  326.                     <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  327.                     <g clip-path="url(#clip0_207_428)">
  328.                     <mask id="path-1-inside-1_207_428" fill="white">
  329.                     <path d="M10 1.31445C15.8212 1.31445 19.2227 3.34052 19.2227 9C19.2227 14.6595 15.8212 16.6855 10 16.6855C9.42351 16.6855 8.87085 16.6644 8.34277 16.623L2.93359 19.7471V14.7422C1.53023 13.5206 0.777344 11.6624 0.777344 9C0.777344 3.34052 4.17882 1.31445 10 1.31445Z"/>
  330.                     </mask>
  331.                     <path d="M10 1.31445V-0.685547V1.31445ZM19.2227 9L21.2227 9V9H19.2227ZM10 16.6855L10 18.6855L10 16.6855ZM8.34277 16.623L8.49873 14.6291L7.87997 14.5807L7.34253 14.8911L8.34277 16.623ZM2.93359 19.7471H0.933594V23.2117L3.93384 21.479L2.93359 19.7471ZM2.93359 14.7422H4.93359V13.8315L4.2467 13.2336L2.93359 14.7422ZM0.777344 9L-1.22266 9L0.777344 9ZM10 1.31445L10 3.31445C12.7486 3.31445 14.517 3.80636 15.5748 4.62012C16.5208 5.34785 17.2227 6.5903 17.2227 9H19.2227H21.2227C21.2227 5.75022 20.2238 3.1499 18.0138 1.44972C15.9155 -0.164421 13.0726 -0.685547 10 -0.685547L10 1.31445ZM19.2227 9L17.2227 9C17.2227 11.4097 16.5208 12.6522 15.5748 13.3799C14.517 14.1936 12.7486 14.6855 10 14.6855L10 16.6855L10 18.6855C13.0726 18.6855 15.9155 18.1644 18.0138 16.5503C20.2238 14.8501 21.2227 12.2498 21.2227 9L19.2227 9ZM10 16.6855V14.6855C9.47238 14.6855 8.97185 14.6661 8.49873 14.6291L8.34277 16.623L8.18682 18.617C8.76985 18.6626 9.37464 18.6855 10 18.6855V16.6855ZM8.34277 16.623L7.34253 14.8911L1.93335 18.0152L2.93359 19.7471L3.93384 21.479L9.34302 18.355L8.34277 16.623ZM2.93359 19.7471H4.93359V14.7422H2.93359H0.933594V19.7471H2.93359ZM2.93359 14.7422L4.2467 13.2336C3.40679 12.5025 2.77734 11.2769 2.77734 9L0.777344 9L-1.22266 9C-1.22266 12.048 -0.346328 14.5387 1.62048 16.2507L2.93359 14.7422ZM0.777344 9H2.77734C2.77734 6.5903 3.47924 5.34785 4.42521 4.62012C5.48302 3.80636 7.25143 3.31445 10 3.31445V1.31445V-0.685547C6.92739 -0.685547 4.08447 -0.164421 1.98625 1.44972C-0.223815 3.1499 -1.22266 5.75022 -1.22266 9H0.777344Z" fill="#828282" mask="url(#path-1-inside-1_207_428)"/>
  332.                     <circle cx="6.1875" cy="9" r="1.25" fill="#828282"/>
  333.                     <circle cx="10" cy="9" r="1.25" fill="#828282"/>
  334.                     <circle cx="13.8125" cy="9" r="1.25" fill="#828282"/>
  335.                     </g>
  336.                     <defs>
  337.                     <clipPath id="clip0_207_428">
  338.                     <rect width="20" height="20" fill="white"/>
  339.                     </clipPath>
  340.                     </defs>
  341.                     </svg>
  342.                 </div>
  343.                 <h3 class="guide-section__title">利用者の声</h3>
  344.                 </div>
  346.                 <!-- Quote Content -->
  347.                 <div class="guide-section__quote">
  348.                 <svg class="guide-section__quote-start" width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  349.                     <path d="M10.4071 10.903C10.4558 13.324 8.8776 15.4373 5.94852 15.4373C3.01943 15.4373 0.898404 13.6863 0.765623 10.5573C0.768124 5.66795 2.9792 2.45827 4.48439 0.146973L7.75796 1.43551C7.07892 3.00802 6.45348 4.52693 6.32187 6.66694C8.54391 6.66694 10.3576 8.44455 10.4023 10.6661L10.4071 10.903Z" fill="#D9D9D9"/>
  350.                     <path d="M21.2352 10.903C21.2839 13.324 19.7057 15.4373 16.7766 15.4373C13.8476 15.4373 11.7265 13.6863 11.5937 10.5573C11.5962 5.66795 13.8073 2.45827 15.3125 0.146973L18.5861 1.43551C17.907 3.00802 17.2816 4.52693 17.15 6.66694C19.372 6.66694 21.1858 8.44455 21.2304 10.6661L21.2352 10.903Z" fill="#D9D9D9"/>
  351.                 </svg>
  353.                 <svg class="guide-section__quote-bottom" width="96" height="38" viewBox="0 0 96 38" fill="none" xmlns="http://www.w3.org/2000/svg">
  354.                     <path d="M1.5 0V16C1.5 20.4183 5.08172 24 9.5 24H14.5V34L30 24H96" stroke="#D9D9D9" stroke-width="3"/>
  355.                 </svg>
  357.                 <div class="guide-section__quote-content">
  358.                     <h4 class="guide-section__quote-heading">炭にこだわりがあるって？</h4>
  359.                     <p class="guide-section__quote-subheading">スミにおけないわね。</p>
  360.                 </div>
  362.                 <svg class="guide-section__quote-end" width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  363.                     <path d="M11.5929 5.09701C11.5442 2.67595 13.1224 0.562695 16.0515 0.562695C18.9806 0.562695 21.1016 2.31372 21.2344 5.44266C21.2319 10.332 19.0208 13.5417 17.5156 15.853L14.242 14.5645C14.9211 12.992 15.5465 11.4731 15.6781 9.33306C13.4561 9.33306 11.6424 7.55545 11.5977 5.33387L11.5929 5.09701Z" fill="#D9D9D9"/>
  364.                     <path d="M0.7648 5.09701C0.716104 2.67595 2.29427 0.562695 5.22336 0.562695C8.15244 0.562695 10.2735 2.31372 10.4063 5.44266C10.4038 10.332 8.19268 13.5417 6.68748 15.853L3.41392 14.5645C4.09296 12.992 4.71839 11.4731 4.85 9.33306C2.62797 9.33306 0.814248 7.55545 0.769565 5.33387L0.7648 5.09701Z" fill="#D9D9D9"/>
  365.                 </svg>
  367.         </div>
  369.                 <!-- Description -->
  370.                 <p class="guide-section__description">
  371.                 ユーザーの不明点を解決して信頼性を得る文章を書きます。<br>
  372.                 信頼性を得る文章を書きます。ユーザーの不明点を解決して信頼性を得る文章を書きます。木こりがいない時代だからこそ、テクノロジーで森を守る。<br>
  373.                 植林が未来の町を守り、地域を豊かにする。WoodTechは"木と人と地域の循環"を取り戻す挑戦を続けます。
  374.                 </p>
  375.             </div>
  376.             </div>
  377.         </div>
  378.         </div>
  380.         <!-- news section -->
  381.         <div class="container-1200-fix">
  382.         <div class="news-section-wrapper">
  383.             <div class="news-section__left">
  384.             <div class="news-section__content">
  385.                 <!-- Header -->
  386.                 <div class="news-section__header">
  387.                 <img class="news-section__icon" src="{{ asset('assets/img/default/icons/icon-title.png') }}" alt="" width="64" height="64" />
  388.                 <h3 class="news-section__title">お知らせ</h3>
  389.                 </div>
  391.                 <!-- Description -->
  392.                 <p class="news-section__description">
  393.                 営業時間の情報や備長炭についての情報をお知らせいたします。
  394.                 </p>
  396.                 <!-- Button -->
  397.                 <button class="btn_primary news-section__button" onclick="window.location.href='{{ url('news_list') }}'" type="button">
  398.                     <span class="btn_primary-text">お知らせ一覧</span>
  399.                     <img class="btn_primary-icon" src="{{ asset('assets/img/default/icons/icon-arrow-nav.svg') }}" alt="" width="24" height="24" />
  400.                 </button>
  401.             </div>
  402.             </div>
  403.             <div class="news-section__right">
  404.             <div class="news-list" id="news-list-id">
  405.                 {% if latestNews|length > 0 %}
  406.                     {% for News in latestNews %}
  407.                         <article class="news-list__item">
  408.                             <hr class="news-list__separator" />
  409.                             {% if News.url %}
  410.                                 {% if News.isLinkMethod %}
  411.                                     <a href="{{ News.url }}" target="_blank" rel="noopener noreferrer" class="news-list__link">
  412.                                 {% else %}
  413.                                     <a href="{{ News.url }}" class="news-list__link">
  414.                                 {% endif %}
  415.                             {% else %}
  416.                                 <a href="{{ url('news_detail', {'id': News.id}) }}" class="news-list__link">
  417.                             {% endif %}
  418.                                 <div class="news-list__content">
  419.                                     <img class="news-list__image" src="{{ asset('assets/img/default/image/news-image.png') }}" alt="{{ News.title }}" />
  420.                                     <div class="news-list__info">
  421.                                         <div class="news-list__text">
  422.                                             <time class="news-list__date">{{ News.publishDate|date('Y.m.d') }}</time>
  423.                                             <h2 class="news-list__title">{{ News.title }}</h2>
  424.                                         </div>
  425.                                         <img class="news-list__arrow" src="{{ asset('assets/img/default/icons/icon-arrow-news-list.svg') }}" alt="" width="24" height="24" />
  426.                                     </div>
  427.                                 </div>
  428.                             </a>
  429.                         </article>
  430.                     {% endfor %}
  431.                 {% else %}
  432.                     <!-- Fallback nếu không có tin tức -->
  433.                     <p>お知らせがありません。</p>
  434.                 {% endif %}
  435.             </div>
  436.             </div>
  437.         </div>
  438.         </div>
  439.     </div>
  441.     <!-- Swiper JS cdn -->
  442.     <script src="{{ asset('assets/js/swiper-bundle.min.js') }}"></script>
  443.     <script>
  445.     document.addEventListener('DOMContentLoaded', function () {
  446.       const swiper = new Swiper('.banner-swiper', {
  447.         slidesPerView: 1.32,
  448.         spaceBetween: 8,
  449.         centeredSlides: true,
  450.         loop: true,
  451.         // autoplay: {
  452.         //   delay: 5000,
  453.         //   disableOnInteraction: false,
  454.         // },
  455.         pagination: {
  456.           el: '.banner-pagination',
  457.           clickable: true,
  458.           renderBullet: function (index, className) {
  459.             return '<div class="' + className + ' banner-pagination__bar"></div>';
  460.           },
  461.         },
  462.         navigation: {
  463.           nextEl: '.banner-button-next',
  464.           prevEl: '.banner-button-prev',
  465.         },
  466.         breakpoints: {
  467.           1200: {
  468.             slidesPerView: 1.32,
  469.           },
  470.           890: {
  471.             slidesPerView: 1.1,
  472.           },
  473.           0: {
  474.             slidesPerView: 1.18,
  475.           },
  476.         },
  477.       });
  479.       // swiper product mobile only
  480.       const productSwiper = new Swiper('.product-swiper', {
  481.         slidesPerView: 1.2,
  482.         spaceBetween: 16,
  483.         loop: true,
  484.          pagination: {
  485.           el: '.banner-pagination',
  486.           clickable: true,
  487.           renderBullet: function (index, className) {
  488.             return '<div class="' + className + ' banner-pagination__bar"></div>';
  489.           },
  490.         },
  491.         navigation: {
  492.           nextEl: '.banner-button-next',
  493.           prevEl: '.banner-button-prev',
  494.         },
  495.         breakpoints: {
  496.           600: {
  497.             slidesPerView: 2.2,
  498.           },
  499.           0: {
  500.             slidesPerView: 1.2,
  501.           },
  502.         },
  503.       });
  504.     });
  505.     </script>
  506. {% endblock %}