@extends('front.layout.master')

@section('content')
    <!-- slideshow content begin -->
    <div class="uk-section uk-padding-remove-vertical in-slideshow-gradient">
        <div id="particles-js" class="uk-light in-slideshow uk-background-contain" style="background-size: cover;" data-src="{{asset(\Illuminate\Support\Facades\Storage::url('images/settings/'.setting('image_slider')))}}" data-uk-img data-uk-slideshow>
            <hr>
            <ul class="uk-slideshow-items">
                @foreach($sliders as $slider)
                    <li class="uk-flex uk-flex-middle">
                        <div class="uk-container">
                            <div class="uk-grid-large uk-flex-middle" data-uk-grid>
                                <div class="uk-width-1-2@s in-slide-text">

                                    <h1 class="uk-heading-small">{{$slider->name}}</h1>
                                    <p class="uk-text-lead uk-visible@m">{!!  $slider->content !!}</p>

                                </div>
                                <div class="in-slide-img" style="
    width: 310px;">
                                    <img src="{{$slider->image_path}}" data-src="{{$slider->image_path}}" alt="image-slide"  data-uk-img>
                                </div>
                            </div>
                        </div>
                    </li>
                @endforeach
            </ul>
            <div class="uk-container">
                <div class="uk-position-relative" data-uk-grid>
                    <ul class="uk-slideshow-nav uk-dotnav uk-position-bottom-right uk-flex uk-flex-middle"></ul>
                </div>
            </div>
        </div>
    </div>
    <!-- slideshow content end -->
    <!-- section content begin -->
    <div class="uk-section uk-section-primary uk-preserve-color in-equity-1">
        <div class="uk-container">
            <div class="uk-grid">
                <div class="uk-width-1-1">
{{--                    <h4>Popular products</h4>--}}
                </div>
            </div>
            <div class="uk-grid-match uk-grid-medium uk-child-width-1-4@m uk-child-width-1-2@s uk-margin-bottom" data-uk-grid>


                @foreach($products as $product)

                <div>
                    <div class="uk-card uk-card-body uk-card-default uk-border-rounded">
                        <div class="uk-flex uk-flex-middle">
                            <span class="in-product-name"><img src="{{$product->image_path}}"></span>
                            <h5 class="uk-margin-remove">{{$product->name}}</h5>
                        </div>
                        <p>{!! $product->content !!}</p>
                    </div>
                </div>

                    @endforeach
            </div>
        </div>
    </div>
    <!-- section content end -->
    <!-- section content begin -->
    <div class="uk-section in-equity-2 uk-background-contain uk-background-center" data-src="img/in-equity-2-bg.png" data-uk-img>
        <div class="uk-container uk-margin-top">
            <div class="uk-grid uk-flex uk-flex-center">
                <div class="uk-width-2xlarge@m uk-text-center">
{{--                    <span class="uk-label uk-label-warning">Fast execution, low latency<i class="fas fa-arrow-right fa-xs uk-margin-small-left"></i></span>--}}
                    <h1 class="uk-margin-top">{{setting(app()->getLocale().".title")}}</h1>
                    <p class="uk-text-lead uk-margin-medium-top">{!! setting(app()->getLocale().".content") !!}</p>
                </div>
                <div class="uk-width-3-4@m uk-margin-medium-top">
                    <img class="uk-align-center" src="{{asset(\Illuminate\Support\Facades\Storage::url('images/settings/'.setting('image_about')))}}" data-src="{{asset(\Illuminate\Support\Facades\Storage::url('images/settings/'.setting('image_about')))}}" alt="image" width="758" height="334" data-uk-img>
                </div>
                <div class="uk-width-2xlarge@m uk-margin-medium-top">
                    <div class="uk-grid uk-child-width-1-4@m uk-child-width-1-4@s uk-text-center in-feature-box" data-uk-grid>
                        <a href="#">
                                <span class="in-icon-wrap">
                                    <img src="{{asset('front/img/in-lazy.gif')}}" data-src="{{asset('front/img/in-equity-2-icon-1.svg')}}" alt="icon-1" width="35" height="42" data-uk-img>
                                </span>
                            <p class="uk-margin-top">Trading calculators</p>
                        </a>
                        <a href="#">
                                <span class="in-icon-wrap">
                                    <img src="{{asset('front/img/in-lazy.gif')}}" data-src="{{asset('front/img/in-equity-2-icon-2.svg')}}" alt="icon-2" width="38" height="42" data-uk-img>
                                </span>
                            <p class="uk-margin-top">Market analysis</p>
                        </a>
                        <a href="#">
                                <span class="in-icon-wrap">
                                    <img src="{{asset('front/img/in-lazy.gif')}}" data-src="{{asset('front/img/in-equity-2-icon-3.svg')}}" alt="icon-3" width="42" height="42" data-uk-img>
                                </span>
                            <p class="uk-margin-top">Market reviews</p>
                        </a>
                        <a href="#">
                                <span class="in-icon-wrap">
                                    <img src="{{asset('front/img/in-lazy.gif')}}" data-src="{{asset('front/img/in-equity-2-icon-4.svg')}}" alt="icon-4" width="42" height="42" data-uk-img>
                                </span>
                            <p class="uk-margin-top">Trading academy</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- section content end -->
    <!-- section content begin -->
    <div class="uk-section in-equity-16">
        <div class="uk-container uk-margin-top uk-margin-large-bottom">

            <div class="uk-grid uk-grid-large uk-flex uk-flex-middle" data-uk-grid="">
                <div class="uk-width-3-5@m uk-first-column">
                    <iframe width="100%" height="400"
                            src="https://{{setting('video')}}">
                    </iframe>
                </div>
                <div class="uk-width-expand@m">
                    <h3>{{setting(app()->getLocale().".video_title")}}</h3>
                    <ul class="uk-list uk-list-bullet in-list-check">
                        {!! setting(app()->getLocale().".video_content") !!}

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- section content end -->
    <!-- section content begin -->
    <div class="uk-section in-equity-4">
        <div class="uk-container uk-margin-top uk-margin-medium-bottom">
            <div class="uk-grid uk-child-width-1-2@m in-testimonial-2" data-uk-grid>
                <div class="uk-width-1-1@m uk-text-center">
                    <h1>More than <span class="in-highlight">23,000</span> traders joined</h1>
                </div>
                <div>
                    <div class="uk-background-contain uk-background-top-left" data-src="{{asset('front/img/in-equity-4-blob-1.svg')}}" data-uk-img>
                        <div class="uk-flex uk-flex-middle">
                            <div class="uk-margin-right">
                                <div class="uk-background-primary uk-border-pill">
                                    <img class="uk-align-center uk-border-pill" src="{{asset('front/img/in-lazy.gif')}}" data-src="{{asset('front/img/blockit/in-team-1.png')}}" alt="client-1" width="100" height="100" data-uk-img>
                                </div>
                            </div>
                            <div>
                                <h5 class="uk-margin-remove-bottom">Angela Nannenhorn</h5>
                                <p class="uk-text-muted uk-margin-remove-top">from United Kingdom</p>
                            </div>
                        </div>
                        <blockquote>
                            <p>Very convenience for trader, spread for gold is relatively low compare to other broker</p>
                        </blockquote>
                    </div>
                </div>
                <div>
                    <div class="uk-background-contain uk-background-top-left" data-src="{{asset('front/img/in-equity-4-blob-2.svg')}}" data-uk-img>
                        <div class="uk-flex uk-flex-middle">
                            <div class="uk-margin-right">
                                <div class="uk-background-primary uk-border-pill">
                                    <img class="uk-align-center uk-border-pill" src="{{asset('front/img/in-lazy.gif')}}" data-src="{{asset('front/img/blockit/in-team-8.png')}}" alt="client-2" width="100" height="100" data-uk-img>
                                </div>
                            </div>
                            <div>
                                <h5 class="uk-margin-remove-bottom">Wade Palmer</h5>
                                <p class="uk-text-muted uk-margin-remove-top">from Germany</p>
                            </div>
                        </div>
                        <blockquote>
                            <p>One of the best FX brokers, I have been using! their trading conditions are excellent</p>
                        </blockquote>
                    </div>
                </div>
                <div class="uk-width-1-1@m uk-text-center">
                    <a href="#" class="uk-button uk-button-text">See more traders stories from all over the world<i class="fas fa-arrow-circle-right uk-margin-small-left"></i></a>
                </div>
            </div>
        </div>
    </div>
    <!-- section content end -->
    <!-- section content begin -->
    <div class="uk-section in-equity-5">
        <div class="uk-container uk-margin-remove-bottom">
            <div class="uk-grid uk-child-width-1-3@m uk-child-width-1-2@s" data-uk-grid>
                <div>
                    <div class="uk-flex uk-flex-left in-award">
                        <div class="uk-margin-small-right">
                            <img src="{{asset('front/img/in-lazy.gif')}}" data-src="{{asset('front/img/in-equity-5-award-1.svg')}}" alt="award-1" width="91" height="82" data-uk-img>
                        </div>
                        <div>
                            <h6>Best Mobile Trading App</h6>
                            <p class="provider">European CEO Magazine</p>
                            <p class="year">2019</p>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="uk-flex uk-flex-left in-award">
                        <div class="uk-margin-small-right">
                            <img src="{{asset('front/img/in-lazy.gif')}}" data-src="{{asset('front/img/in-equity-5-award-2.svg')}}" alt="award-2" width="91" height="82" data-uk-img>
                        </div>
                        <div>
                            <h6>Best Forex Ecn Broker</h6>
                            <p class="provider">UK Forex awards</p>
                            <p class="year">2020</p>
                        </div>
                    </div>
                </div>
                <div class="uk-visible@m">
                    <div class="uk-flex uk-flex-left in-award">
                        <div class="uk-margin-small-right">
                            <img src="{{asset('front/img/in-lazy.gif')}}" data-src="{{asset('front/img/in-equity-5-award-3.svg')}}" alt="award-3" width="91" height="82" data-uk-img>
                        </div>
                        <div>
                            <h6>Best Trading Conditions</h6>
                            <p class="provider">Forex report magazine</p>
                            <p class="year">2021</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- section content end -->
    <!-- section content begin -->
    <div class="uk-section uk-section-primary uk-preserve-color in-equity-6 uk-background-contain uk-background-center" data-src="{{asset('front/img/in-equity-decor-2.svg')}}" data-uk-img>
        <div class="uk-container uk-margin-small-bottom">
            <div class="uk-grid uk-flex uk-flex-center">
                <div class="uk-width-2xlarge@m uk-text-center">
                    <h1>Ready to get started?</h1>
                    <p class="uk-text-lead">Global access to financial markets from a single account</p>
                </div>
                <div class="uk-width-3-4@m uk-margin-medium-top">
                    <div class="uk-flex uk-flex-center uk-flex-middle button-app">
                        <div>
                            <a href="#" class="uk-button uk-button-secondary uk-border-rounded">Open your account<i class="fas fa-arrow-circle-right uk-margin-small-left"></i></a>
                        </div>
                        <div class="uk-margin-left uk-margin-right">
                            <p class="uk-margin-remove">And download the app</p>
                        </div>
                        <div class="uk-margin-right">
                            <a href="#"><img src="{{asset('front/img/in-lazy.gif')}}" data-src="{{asset('front/img/in-app-store.svg')}}" alt="app-store" width="120" height="40" data-uk-img></a>
                        </div>
                        <div>
                            <a href="#"><img src="{{asset('front/img/in-lazy.gif')}}" data-src="{{asset('front/img/in-google-play.svg')}}" alt="google-play" width="135" height="40" data-uk-img></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- section content end -->
@endsection
@push('js')
    <script async>
        $(function (){



        })
    </script>
@endpush