@extends('layouts.app')

@section('content')

<div class="container-fluid slick-slider">
    <div class="slick-list">
        <div class="slickTrackPc">
            <img src="{{ asset('images/home/slider/pc/slide_1.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/pc/slide_2.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/pc/slide_3.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/pc/slide_4.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/pc/slide_5.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/pc/slide_6.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/pc/slide_7.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/pc/slide_8.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/pc/slide_9.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/pc/slide_10.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/pc/slide_11.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/pc/slide_12.jpg') }}" alt="メインビジュアル">
        </div>
        <div class="slickTrackSp">
            <img src="{{ asset('images/home/slider/sp/slide_1.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/sp/slide_2.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/sp/slide_3.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/sp/slide_4.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/sp/slide_5.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/sp/slide_6.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/sp/slide_7.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/sp/slide_8.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/sp/slide_9.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/sp/slide_10.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/sp/slide_11.jpg') }}" alt="メインビジュアル">
            <img src="{{ asset('images/home/slider/sp/slide_12.jpg') }}" alt="メインビジュアル">
        </div>
    </div>
</div>

<div class="container">
    <div id="recommendArea">
        <div class="title">
            <h1>Recommend</h1>
            <span>おすすめ</span>
        </div>
        <div class="content">
            <ul class="recommend">
                <li class="recommendList">
                    <a href="{{ url('product_list') }}?product_category_id=23"><img src="{{ asset('images/home/recommend/1.jpg') }}"></a>
                    <p>スマートな切立（きったち）形状は様々な用途に使えます</p>
                </li>
                <li class="recommendList">
                    <a href="{{ url('product_list') }}?product_category_id=3"><img src="{{ asset('images/home/recommend/2.jpg') }}"></a>
                    <p>うどんやそばにぴったりなどんぶりはカラーも豊富</p>
                </li>
                <li class="recommendList">
                    <a href="{{ url('product_list') }}?product_category_id=29"><img src="{{ asset('images/home/recommend/3.jpg') }}"></a>
                    <p>パック小鉢は食卓でうつわ、保存容器として利用できます</p>
                </li>
                <li class="recommendList">
                    <a href="{{ url('product_list') }}?product_category_id=31"><img src="{{ asset('images/home/recommend/4.jpg') }}"></a>
                    <p>毎日の食事を特別な時間にするテーブルウェア</p>
                </li>
            </ul>
        </div>
    </div>
    <div id="topicArea">
        <div class="title">
            <h1>Topics</h1>
            <span>トピック</span>
        </div>
        <div class="content">
            <div id="linkTopicArea" class="slick-slider">
                <div class="slick-list">
                    <div class="autoplay">
                        @foreach($linkTopics as $linkTopic)
                        @if($linkTopic->is_active == 1)
                        <ul>
                            <li>
                                <a href="{{ url('topic') }}?topic_id={{ $linkTopic->id }}">
                                    <img src="{{ $linkTopic->topic_image }}" alt="トピック画像">
                                    <p>{{ $linkTopic->title }}</p>
                                </a>

                            </li>
                        </ul>
                        @endif
                        @endforeach
                    </div>
                </div>
            </div>
            <!--<div id="noLinkTopikArea" class="slick-slider">
                <div class="slick-list">
                    <div class="autoplay">
                        @foreach($noLinkTopics as $noLinkTopic)
                        @if($noLinkTopic->is_active == 1)
                        <ul>
                            <li>
                                <img src="{{ $noLinkTopic->topic_image }}" alt="トピック画像">
                                <p>{{ $noLinkTopic->title }}</p>
                            </li>
                        </ul>
                        @endif
                        @endforeach
                    </div>
                </div>
            </div>-->
        </div>
    </div>
    <div id="webStoreArea">
        <div class="title">
            <h1>Web Store</h1>
            <span>ウェブストア</span>
        </div>
        <div class="content">
            <ul class="webStoreCategory">
                <h4>■個人のお客様向け</h4>
                <p>みのる陶器オリジナル商品を中心に、食卓を楽しくするテーブルウェアをご紹介しております。</p>
                <li class="webStorecategoryList">
                    <a href="https://www.amazon.co.jp/stores/node/5378256051?_encoding=UTF8&field-lbr_brands_browse-bin=%E3%81%BF%E3%81%AE%E3%82%8B%E9%99%B6%E5%99%A8%28Minorutouki%29&ref_=bl_dp_s_web_5378256051" target="_blank">
                        <img src="./images/home/webStore/amazon.png" alt="amazon">
                    </a>
                </li>
                <li class="webStorecategoryList">
                    <a href="https://www.rakuten.ne.jp/gold/minorutouki/" target="_blank">
                        <img src="./images/home/webStore/rakuten.png" alt="rakuten">
                    </a>
                </li>
                <li class="webStorecategoryList">
                    <a href="https://shopping.geocities.jp/minorutouki/">
                        <img src="./images/home/webStore/yahoo.png" alt="yahoo">
                    </a>
                </li>
                <li class="webStorecategoryList">
                    <a href="https://lohaco.jp/store/minorutouki/?sc_i=p_b_t_blbr_minorutouki">
                        <img src="./images/home/webStore/lohaco.png" alt="LOHACO">
                    </a>
                </li>
            </ul>
            <ul class="webStoreCategory">
                <h4>■小売店様・飲食店様向け</h4>
                <p>企業様向けの卸売サイトへ出展しております。直接のお取引も可能ですのでお問い合わせよりご連絡くださいませ。</p>
                <li class="webStorecategoryList">
                    <a href="https://www.superdelivery.com/p/do/psl/?word=%E3%81%BF%E3%81%AE%E3%82%8B%E9%99%B6%E5%99%A8&so=score&vi=1&sb=all" target="_blank">
                        <img src="./images/home/webStore/super_delivery.png" alt="super_delivery">
                    </a>
                </li>
                <li class="webStorecategoryList">
                    <a href="https://www.bnet.gr.jp/list.php?id=seiya3195" target="_blank">
                        <img src="./images/home/webStore/bnet.png" alt="bnet">
                    </a>
                </li>
                <li class="webStorecategoryList">
                    <a href="https://www.askul.co.jp/ksearch/?searchWord=%E3%81%BF%E3%81%AE%E3%82%8B%E9%99%B6%E5%99%A8&categoryLl=&categoryL=&categoryM=&categoryS=&categoryLll=&fluxSearch=ON" target="_blank">
                        <img src="./images/home/webStore/askul.png" alt="askul">
                    </a>
                </li>
                <li class="webStorecategoryList">
                    <a href="https://www.netsea.jp/shop/634413">
                        <img src="./images/home/webStore/netsea.png" alt="NETSEA">
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!--
    <div id="movieArea">
        <div class="title">
            <h1>Movies</h1>
            <span>関連動画</span>
        </div>
        <div class="content">
            <div class="movieContent">
                <iframe width="100%" height="315" src="https://www.youtube.com/embed/4GnzmqPQ-6A?rel=0&showinfo=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <div class="movieContent">
                <iframe width="100%" height="315" src="https://www.youtube.com/embed/aGvf_3kHJZM?rel=0&showinfo=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div>
    </div>
    -->
</div>

@endsection