pick/resources/views/mobile/main.blade.php

@extends('mobile.layouts.app')

@section('content')
<div id="main" class="container-fluid">

    <div id="swiper_1" class="swiper">
        <div class="swiper-wrapper">
            @foreach($banners as $row)
            <div class="swiper-slide">
                <a href="https://link.coupang.com/a/{{ $row['href'] }}" target="_blank" referrerpolicy="unsafe-url"><img src="https://ads-partners.coupang.com/banners/{{ $row['src'] }}" alt="{{ $row['title'] }}"/></a>
            </div>
            @endforeach
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <br/>

    <div class="row">
        @foreach($products['data'] as $row)
            <div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xxl-2">
                <figure class="figure">
                    <a href="{{ $row['productUrl'] }}" target="_blank">
                        <img src="{{ $row['productImage'] }}" class="figure-img img-fluid rounded" alt="{{ $row['productName'] }}"/>
                    </a>
                    <figcaption class="figure-caption">
                        <a href="{{ $row['productUrl'] }}" target="_blank">{{ $row['productName'] }}</a>
                    </figcaption>
                    <p>{{ number_format($row['productPrice']) }} <small>원</small></p>
                    <div class="row g-2">
                        @if($row['isRocket'])
                            <div class="col-auto">
                            <span class="badge text-bg-info text-light">
                                <i class="bi bi-rocket-takeoff"></i> 로켓배송
                            </span>
                            </div>
                        @endif
                        @if($row['isFreeShipping'])
                            <div class="col-auto">
                            <span class="badge text-bg-warning">
                                <i class="bi bi-truck"></i> 무료배송
                            </span>
                            </div>
                        @endif
                    </div>
                </figure>
            </div>
        @endforeach
    </div>
</div>
@endsection