@extends('layouts.app')

@section('content')

<div id="catalog" class="container-fluid">
    <section class="mainVisualAreaPc">
        <div class="pageTopBannerPc"></div>
    </section>
    <section class="mainVisualAreaSp">
        <div class="pageTopBannerSp"></div>
    </section>
    <div class="container contentArea">
        <div class="title">
            <h1>Catalog</h1>
            <span>商品カテゴリ一覧</span>
        </div>
        <div class="content">
            <ul class="productCategory catalogPc">
                @foreach($categories as $category)
                <li class="categoryList">
                    <a href="{{ url('product_list') }}?product_category_id={{ $category->id }}">
                        <img src="{{ $category->category_image_after }}" class="categoryItem">
                        <p>{{ $category->name_jp }}</p>
                    </a>
                </li>
                @endforeach
            </ul>
            <ul class="productCategory catalogSp">
                @foreach($categories as $category)
                <li class="categoryList">
                    <a href="{{ url('product_list') }}?product_category_id={{ $category->id }}">
                        <img src="{{ $category->category_image_after }}" class="categoryItem">
                        <p>{{ $category->name_jp }}</p>
                    </a>
                </li>
                @endforeach
            </ul>
        </div>
    </div>
</div>

@endsection