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.     <style>
  17.         .slick-slider {
  18.             margin-bottom: 30px;
  19.         }
  21.         .slick-dots {
  22.             position: absolute;
  23.             bottom: -45px;
  24.             display: block;
  25.             width: 100%;
  26.             padding: 0;
  27.             list-style: none;
  28.             text-align: center;
  29.         }
  31.         .slick-dots li {
  32.             position: relative;
  33.             display: inline-block;
  34.             width: 20px;
  35.             height: 20px;
  36.             margin: 0 5px;
  37.             padding: 0;
  39.             cursor: pointer;
  40.         }
  42.         .slick-dots li button {
  43.             font-size: 0;
  44.             line-height: 0;
  45.             display: block;
  46.             width: 20px;
  47.             height: 20px;
  48.             padding: 5px;
  49.             cursor: pointer;
  50.             color: transparent;
  51.             border: 0;
  52.             outline: none;
  53.             background: transparent;
  54.         }
  56.         .slick-dots li button:hover,
  57.         .slick-dots li button:focus {
  58.             outline: none;
  59.         }
  61.         .slick-dots li button:hover:before,
  62.         .slick-dots li button:focus:before {
  63.             opacity: 1;
  64.         }
  66.         .slick-dots li button:before {
  67.             content: " ";
  68.             line-height: 20px;
  69.             position: absolute;
  70.             top: 0;
  71.             left: 0;
  72.             width: 12px;
  73.             height: 12px;
  74.             text-align: center;
  75.             opacity: .25;
  76.             background-color: black;
  77.             border-radius: 50%;
  79.         }
  81.         .slick-dots li.slick-active button:before {
  82.             opacity: .75;
  83.             background-color: black;
  84.         }
  86.         .slick-dots li button.thumbnail img {
  87.             width: 0;
  88.             height: 0;
  89.         }
  90.     </style>
  91. {% endblock %}
  93. {% block javascript %}
  94.     <script>
  95.         $(function() {
  96.             $('.main_visual').slick({
  97.                 dots: true,
  98.                 arrows: false,
  99.                 autoplay: true,
  100.                 speed: 300
  101.             });
  102.         });
  103.         
  104.     </script>
  105. {% endblock javascript %}
  107. {% block main %}
  108.     <section class="ec-sliderRole" data-aos="fade-up">
  109.         <div class="ec-sliderRole__inner standard-inner1 fullwidth">
  110.             <div class="main_visual">
  111.                 {% for i in 1..4 %}
  112.                     <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc0'~i~'.jpg', 'user_data') }}"></div>
  113.                 {% endfor %}
  114.             </div>
  115.         </div>
  116.     </section>
  118.     <section class="ec-categoryNavRole" id="about">
  119.         <div class="ec-aboutRole">
  120.             <div class="ec-aboutRole__inner standard-inner1">
  121.                 <div class="ec-aboutRole__figure" data-aos="fade-up">
  122.                     <img src="{{ asset('assets/img/logo_kikkoo.svg') }}" alt="" class="ec-aboutRole__img">
  123.                 </div>
  124.                 <h2 class="ec-aboutRole__title" data-aos="fade-up">心でつくる幸せ。その歓びをつないでいく。</h2>
  125.                 <div class="ec-aboutRole__text" data-aos="fade-up">
  126.                     KIKKOOの家具は、日本の伝統と格式を継承し、六方良しの精神を具現化したデザインが特徴です。<br>
  127.                     亀甲という日本に伝わる吉祥文様をシンボルマークに用いることで、六方良しの理念を視覚的に表現しています。<br>
  128.                     売り手、買い手、作り手、世間、地球、未来の全てに対して誠実であることを大切にし、<br>
  129.                     熟練の木工職人が一つ一つ心を込めて作り上げた家具、それは、使う人に心の安らぎと幸福を提供します。<br>
  130.                     深みのある美しさと斬新な存在感を持つKIKKOOの家具は、<br>
  131.                     日々の生活に豊かさを、環境に優しい素材を、未来の世代にも続く価値を。<br>
  132.                     めぐりめぐって日本の美意識と心の豊かさをつないでいきます。<br>
  133.                 </div>
  134.             </div>
  135.         </div>
  136.     </section>
  138.     <section class="ec-categoryNavRole">
  139.         {% set Category = repository('Eccube\\Entity\\Category').find(1) %}
  140.         {% set cate_childs = Category.getDescendants %}
  141.         <div class="ec-categoryNavRole__inner standard-inner1">
  142.             <h2 class="ec-categoryNavRole__title" data-aos="fade-up">CATEGORY</h2>
  143.             <div class="ec-categoryNav">
  144.                 <ul class="ec-categoryNav__list">
  145.                     {% for cate in cate_childs %}
  146.                         <li class="ec-categoryNav__item category" data-aos="fade-up">
  147.                             <a href="{{ url('product_list') }}?category_id={{ cate.id }}" class="ec-categoryNav__link">
  148.                                 <figure class="ec-categoryNav__figure">
  149.                                     <img src="{{ asset('assets/img/category/category'~cate.id~'.jpg', 'user_data') }}" class="ec-categoryNav__img">
  150.                                 </figure>
  151.                                 <span class="ec-categoryNav__name">{{ cate.name }}</span>
  152.                             </a>
  153.                         </li>
  154.                     {% endfor %}
  155.                 </ul>
  156.             </div>
  157.         </div>
  158.     </section>
  160.     <section class="ec-categoryNavRole">
  161.         {% set Category = repository('Eccube\\Entity\\Category').find(5) %}
  162.         {% set cate_childs = Category.getDescendants %}
  163.         {% set names = ['SHINJI OTSUKI','MANAMI'] %}
  164.         {% set i = 0 %}
  165.         <div class="ec-categoryNavRole__inner standard-inner1">
  166.             <h2 class="ec-categoryNavRole__title" data-aos="fade-up">DESIGNER</h2>
  167.             <div class="ec-categoryNav">
  168.                 <ul class="ec-categoryNav__list">
  169.                     {% for cate in cate_childs %}
  170.                         <li class="ec-categoryNav__item designer" data-aos="fade-up">
  171.                             <a href="/designers/otsuki/" class="ec-categoryNav__link">
  172.                                 <figure class="ec-categoryNav__figure">
  173.                                     <img src="{{ asset('assets/img/designer/designer'~cate.id~'.jpg', 'user_data') }}" class="ec-categoryNav__img">
  174.                                 </figure>
  175.                                 <span class="ec-categoryNav__name2">{{ names[i] }}</span>
  176.                                 <span class="ec-categoryNav__name3">{{ cate.name }}</span>
  177.                             </a>
  178.                         </li>
  179.                         {% set i = i + 1 %}
  180.                     {% endfor %}
  181.                 </ul>
  182.             </div>
  183.         </div>
  184.     </section>
  185. {% endblock %}