@extends('layouts.guest')
@section('title', 'Home')
  <section class="banner" id="homepage">
    @if($content->banner_type == 0)
        <div class="swiper slideshow">
			<div class="swiper-wrapper">
				@foreach ($banners as $banner )
                    <div class="swiper-slide">
                        <div class="slideshow-slide">
                            <picture>
                                <source media="(min-width:641px)" srcset="{{asset('banners_images/'.$banner->image)}}">
                                <source media="(max-width: 640px)" srcset="{{asset('banners_images/'.$banner->image)}}">
                                <img src="{{asset('banners_images/'.$banner->image)}}" class="w-100" alt="Men's Shop" />
                            </picture>
                        </div>
                        <div class="slideshow-contents position-absolute">
                            <div class="container">
                                <h1>{{$banner->title}}</h1>
                                <p>{{$banner->description}}</p>
                                <div class="slideshow-btn"><a href="{{$banner->banner_url}}" class="btn btn-black">@lang('pages.read_more')</a></div>
                            </div>
                        </div>
                    </div>
                @endforeach
			</div>
			<div class="swiper-button-next slideshow-button-next"><img src="{{ asset('guest/images/arrow.svg')}}" class="arrow" alt=""/></div>
			<div class="swiper-button-prev slideshow-button-prev"><img src="{{ asset('guest/images/arrow.svg')}}" class="arrow" alt=""/></div>
			<div class="swiper-pagination slideshow-pagination"></div>
		</div>
    @else
        <div class="row">
            @foreach ($banners as $banner )
            <div class="col-6 col-lg-6 col-md-6 col-sm-6 left-banner">
                <a href="{{$banner->banner_url}}">
                    <img src="{{asset('banners_images/'.$banner->image)}}" class="w-100" alt="Men's Shop" />
                    <span class="position-absolute">{{$banner->title}}</span>
                </a>
            </div>
            @endforeach
        </div>
    @endif
    </section>
    <section class="product">
        <div class="container">
            <div class="row card-row">
                <div class="col-lg-5 col-md-5 col-sm-5 leftcol">
                    <div class="small-title" data-aos="fade-up">@lang('pages.the_best_design')</div>
                    <h1 data-aos="fade-up">{{$product1->title??''}}</h1>
                    <div class="product-text" data-aos="fade-up">
                        {{$product1->description??''}}
                    </div>
                    <div class="shop-now" data-aos="fade-up"><a href="{{$product1->banner_url??''}}" class="shop-now-link">@lang('pages.shop_now')</a></div>
                </div>
                <div class="col-lg-7 col-md-7 col-sm-7 rightcol">
                    <div class="img-holder" data-aos="fade-up"><img src="{{$product1?asset('banners_images/'.$product1->image):''}}" class="w-100" alt="Women's shop" /></div>
                </div>
            </div>
            <div class="row card-row">
                <div class="col-lg-7 col-md-7 col-sm-7 rightcol">
                    <div class="img-holder" data-aos="fade-up"><img src="{{$product2?asset('banners_images/'.$product2->image):''}}" class="w-100" alt="Women's shop" /></div>
                </div>
                <div class="col-lg-5 col-md-5 col-sm-5 leftcol">
                    <div class="small-title" data-aos="fade-up">@lang('pages.the_best_design')</div>
                    <h1 data-aos="fade-up">{{$product1->title??''}}</h1>
                    <div class="product-text" data-aos="fade-up">
                        {{$product1->description??''}}
                    </div>
                    <div class="shop-now" data-aos="fade-up"><a href="{{$product2->banner_url??''}}" class="shop-now-link">@lang('pages.shop_now')</a></div>
                </div>
            </div>
            <div class="row card-row">
                <div class="col-lg-5 col-md-5 col-sm-5 leftcol">
                    <div class="small-title" data-aos="fade-up">@lang('pages.the_best_design')</div>
                    <h1 data-aos="fade-up">{{$product1->title??''}}</h1>
                    <div class="product-text" data-aos="fade-up">
                        {{$product1->description??''}}
                    </div>
                    <div class="shop-now" data-aos="fade-up"><a href="{{$product3->banner_url??''}}" class="shop-now-link">@lang('pages.shop_now')</a></div>
                </div>
                <div class="col-lg-7 col-md-7 col-sm-7 rightcol">
                    <div class="img-holder" data-aos="fade-up"><img src="{{$product3?asset('banners_images/'.$product3->image):''}}" class="w-100" alt="Women's shop" /></div>
                </div>
            </div>
        </div>
    </section>
    <section class="must-have">
        <div class="container">
            <div class="row">
                <div class="col-12 title text-center" data-aos="fade-up"><h1 class="d-inline-block"><span class="d-inline-block text-uppercase">@lang('pages.must_have')</span></h1></div>
            </div>
            <div class="row">
                @foreach ($mustHave as $k=>$prod)