@extends(get_view('index'))
@section('title')@endsection
@section('menu-active-homepage') active @endsection
@section('header')

@endsection
@section('content')

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

<div class="container">
    <!-- === About Us List === -->
    @if ( Site::about_us() != null )
        <div class="row">
            <div class="col-12 mt-5 mb-3">
                <h2>{{ translate('who_are_we') }}</h2>
                <p class="text-muted">{{ translate('who_are_we_text') }}</p>
            </div>
        </div><!-- row -->

        <div class="row">
            <div class="col-sm-12 col-12">
                <div class="bg-white  mb-3 p-4">
                    <div class="mobile-height-200px text-muted">
                        {!! strip_tags(Site::about_us()->content) ?? '-' !!}

                        <div class="mobile-height-shadow"></div>
                    </div>
                    <div class="mobile-height-button d-sm-none d-block">
                        <a href="{{ url('about-us') }}">{{ translate('review') }}</a>
                    </div>
                </div>
            </div>
        </div><!-- row -->
    @endif


    <!-- === Category List === -->
    @if ( count(Site::categories()) > 0 )
        <div class="row">
            <div class="col-12 mt-5 mb-3">
                <h2>{{ translate('what_we_do') }}</h2>
                <p class="text-muted">{{ translate('what_we_do_text') }}.</p>
            </div>
        </div><!-- row -->
        
        @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>{{ translate('our_picks_for_you') }}</h2>
                    <p class="text-muted">{{ translate('our_picks_for_you_text') }}</p>
                </div>
            </div><!-- row -->

            <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">
                        <img src="{{ asset('images/icons/special/truck.png') }}" alt="{{ translate('free_shipping') }}" width="80">
                    </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">
                        <img src="{{ asset('images/icons/special/return.png') }}" alt="{{ translate('return_exchange_guarantee') }}" width="80">
                    </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">
                        <img src="{{ asset('images/icons/special/secure-payment.png') }}" alt="{{ translate('secure_shopping') }}" width="80">
                    </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