@extends('layout.desktop.main')
@section('content')
    <main>
        <div class="container">
            @include('layout.desktop.running_text')
            <div class="app-header__extra">
                <nav class="app-breadcrumbs">
                    <ul>
                        <li data-pos="start" class="nav-observer"></li>
                        <li class="nav-item nav-item--home"><a href="/" class="app-link--active" name="Beranda">
                                Beranda
                            </a></li>
                        <li class="nav-item nav-item--fill"><i class="fas fa-chevron-right fa-xs"></i>
                        </li>
                        <li class="nav-item"><a href="/promotion" aria-current="page"
                                class="app-link--exact-active app-link--active" name="Promotion" data-ref="promotion">
                                Promotion
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <section class="promotions">

                <ul data-v-48f0ae32="" class="promotions-list">
                    @foreach ($promotion as $promotion)
                        <li data-v-48f0ae32="" class="promotions__item surface"><a data-v-48f0ae32=""
                                href="/promotion/{{ $promotion->id }}" class="promotion__image"><img data-v-48f0ae32=""
                                    src="{{ asset('storage/' . $promotion->img) }}" alt="BONUS NEW MEMBER 20%"></a> <!---->
                            <div data-v-48f0ae32="" class="promotion__teaser"><a data-v-48f0ae32=""
                                    href="/promotion/{{ $promotion->id }}" class="">
                                    <h4 data-v-48f0ae32="" class="promotion__title">{{ $promotion->title }}</h4>
                                </a> <a data-v-48f0ae32="" href="/promotion/{{ $promotion->id }}"
                                    class="btn btn--sm btn--flex btn--accent detail">
                                    Detail
                                </a>
                                <p data-v-48f0ae32=""></p>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </section>
        </div>
    </main>
@endsection