@extends(get_view('index'))
@section('title')@endsection
@section('menu-active-homepage') active @endsection
@section('header')
    <style>
        .icon{
            width: 50px;
            height: 50px;
            background-color: var(--theme-opacity-color);
            color: var(--bs-dark);
            border-radius: 50%;
            font-size: 30px;
        }
    </style>
@endsection
@section('content')

@include(get_view('components.slider.slider'))


<div class="d-sm-none custom-icons">
    <div class="position-absolute" style="margin-top: -100px; z-index: 0;">
        <img src="{{ get_asset('images/icons/3.png') }}" alt="{{ Site::get_site_title() }}" width="150">
    </div>
</div>
<div class="container">
    <!-- === Category List === -->
    @if ( count(Site::categories()) > 0 )
        <div class="row py-5">
            <div class="col-12">
                <h1 class="aniview" data-av-animation="animate__fadeInDown">{{ translate('Our Services') }}</h1>
            </div>
        </div>
        @include(get_view('components.category.home-list'))
    @endif
</div>



<!-- === Showroom List === -->
@if ( count(Site::showroom()) > 0 )
    <div class="bg-light pt-5 pb-5">
        <div class="container">
            <div class="row">
                <div class="col-12 mb-3">
                    <h2><i class="fas fa-hand-scissors" style="color: var(--theme-color);"></i> {{ translate('our_picks_for_you') }}</h2>
                    <p class="text-muted">{{ translate('our_picks_for_you_text') }}</p>
                </div>
            </div><!-- row -->

            <div class="d-sm-block custom-icons" style="z-index: 0;">
                <div class="position-absolute end-0" style="margin-top: -50px;">
                    <img src="{{ get_asset('images/icons/5.png') }}" alt="{{ Site::get_site_title() }}" width="200">
                </div>
            </div>

            <div class="row">
                @foreach (Site::showroom() as $product)
                <div class="col-md-4 col-sm-6 col-12">
                    @include(get_view('components.product.single-product'))
                </div>
                @endforeach
            </div><!-- row -->
        </div>
    </div>
@endif

<div class="container">
    <div class="row mt-3">
        <div class="col-md-4 col-sm-12 col-12">
            <div class="bg-white p-3 pt-4 pb-4 ">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-rocket fs-1" style="color:var(--theme-color)"></i>
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <p class="m-0 p-0"><strong>{{ translate('free_shipping') }}</strong></p>
                        <p class="m-0 p-0 fs-14 text-muted">{{ translate('free_shipping_text') }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-12 col-12">
            <div class="bg-white p-3 pt-4 pb-4 ">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-undo fs-1" style="color:var(--theme-color)"></i>
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <p class="m-0 p-0"><strong>{{ translate('return_exchange_guarantee') }}</strong></p>
                        <p class="m-0 p-0 fs-14 text-muted">{{ translate('return_exchange_guarantee_text') }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-12 col-12">
            <div class="bg-white p-3 pt-4 pb-4 ">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-user-shield fs-1" style="color:var(--theme-color)"></i>
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <p class="m-0 p-0"><strong>{{ translate('secure_shopping') }}</strong></p>
                        <p class="m-0 p-0 fs-14 text-muted">{{ translate('secure_shopping_text') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- row -->
</div><!-- container -->

@endsection
@section('footer')

@endsection