@extends('layouts.front-layout')
@section('title') Home @endsection
@section('content')

    <div class="preLoader black">
        <img src="upload/images/footerlogo.webp" alt="img">
    </div>
    <div class="preLoader white"></div>



    <section class="main-banner">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6" data-aos="fade-up">
                    <figure>
                        <img src="upload/images/bannerimg1.webp" class="img-fluid" alt="">
                    </figure>
                </div>
                <div class="col-md-6" data-aos="fade-up">
                    <div class="mainwraps">
                        <h4><span>News</span> {{ $pageData['Home']['professional_top_title'] ?? '' }} <img src="upload/images/starbnr.webp"
                                                                                   class="img-fluid" alt=""> </h4>
                        <h2>{{ $pageData['Home']['professional_heading'] ?? '' }}</h2>
                        <h3>{{ $pageData['Home']['professional_sub_heading'] ?? '' }}"</h3>
                        {!!$pageData['Home']['professional_description'] ?? '' !!}
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="whats-makes">
        <div class="container">
            <div class="whastmakestop">
                {!! $pageData['Makes Us Different']['makes_us_different_section_description'] ?? '' !!}

            </div>
            <div class="row align-items-center">
                @forelse($get_makes_us_different as $makes_us_different)
                <div class="col-md-3" data-aos="fade-up">
                    <div class="makeswrap">
                        <figure>
                            <img src="{{$makes_us_different->makesUsDifferentImage('makes_us_different_image') ? : ''}}" class="img-fluid" alt="">
                        </figure>
                        <div class="makescntnt">
                            <h3>{{$makes_us_different->heading ? : ''}}</h3>
                            <h4>{!! $makes_us_different->description ? :''!!}</h4>
                        </div>
                    </div>
                </div>
                @empty
                    <h2 class="text-center">makes us different not available</h2>
                @endforelse

            </div>
        </div>
    </section>

    <section class="select-pricing">
        <div class="container">
            <div class="select-top">
                <h2 class="mainHead" data-aos="fade-up">Select Pricing <span>That suit For You</span></h2>
                <p>There are no hidden charges or costs. (MDG) Service fee is only $25/month per account (Subscription
                    to Forex signals is billed separately, based on the selected Forex signals). Additionally, if you
                    are a signal provider, we charge only 30% of your subscription fee for which you get a complete,
                    professional and managed solution for your signal service.</p>
            </div>
            <div class="row align-items-center">

                <div class="col-md-6" data-aos="fade-up">
                    <div class="selectbox">
                        <div class="leftselect">
                            <h2>$25 <span>/Month</span></h2>
                            <p>Time Limited Offer for signal followers! Test Our service for 1 week for $1 only (instead
                                of $25 per month)!</p>
                            <a href="" class="themeBtn">Select Plan</a>
                        </div>
                        <div class="rightsleclist">
                            <ul>
                                <li><i class="fas fa-check"></i>Test Our service for 1 week for $1 only</li>
                                <li><i class="fas fa-check"></i>instead of $25 per month!</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-md-6" data-aos="fade-up">
                    <div class="selectbox blueselect">
                        <div class="leftselect">
                            <h2>$25 <span>/Month</span></h2>
                            <p>Time Limited Offer for signal followers! Test Our service for 1 week for $1 only (instead
                                of $25 per month)!</p>
                            <a href="" class="themeBtn">Select Plan</a>
                        </div>
                        <div class="rightsleclist">
                            <ul>
                                <li><i class="fas fa-check"></i>Test Our service for 1 week for $1 only</li>
                                <li><i class="fas fa-check"></i>instead of $25 per month!</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section class="testimonialSec">
        <div class="container">

            <div class="row align-items-center justify-content-between">
                <div class="col-md-7" data-aos="fade-up">
                    <h2 class="mainHead" data-aos="fade-up">{{ $pageData['Our Value Client']['heading'] ?? '' }} <span>{{ $pageData['Our Value Client']['sub_heading'] ?? '' }}</span></h2>
                    <div class="swiper reviewSlider">
                        <div class="swiper-wrapper">
                            @forelse($get_our_valued_clients as $our_valued_client)


                            <div class="swiper-slide">
                                <div class="reviewBox">

                                    <div class="revewImg">
                                        <img src="{{$our_valued_client->ourValueClientImage('our_value_client_image') ? : ''}}" class="img-fluid" alt="img">
                                        <div>

                                            <h6>{{$our_valued_client->heading ? : ''}} <span>{{$our_valued_client->sub_heading ? : ''}}</span></h6>
                                        </div>
                                    </div>
                                   {!! $our_valued_client->description ? : ''!!}
                                </div>
                            </div>

                            @empty
                                <h2 class="text-center">our valued clients not available</h2>
                            @endforelse
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <div class="col-md-5">
                    <figure class="testifigure">
                        <img src="{{ pagesSingleImage('Our Value Client', 'right_side_image') }}"class="img-fluid" alt="">
                        <img src="upload/images/storiesicon1.webp" class="img-fluid storiesimg11" alt="">
                        <img src="upload/images/storiesicon2.webp" class="img-fluid storiesimg22" alt="">
                        <img src="upload/images/storiesicon3.webp" class="img-fluid storiesimg33" alt="">
                    </figure>
                </div>
            </div>
        </div>
    </section>



    <section class="market-direction">
        <div class="container">
            <div class="row align-items-center ">
                <div class="col-md-6" data-aos="fade-up">
                    <div class="market-direct">
                        <h2 class="mainHead">{{ $pageData['Home']['we_have_also_presented_heading'] ?? '' }}</h2>
                        <h2 class="mainHead "><span>{{ $pageData['Home']['we_have_also_presented_sub_heading'] ?? '' }}</span></h2>
                        {!!$pageData['Home']['we_have_also_presented_description'] ?? '' !!}
                        <ul>
                            <li><img src="{{ pagesSingleImage('Home', 'we_have_also_presented_first_logo_image') }}" class="img-fluid" alt=""></li>
                            <li><img src="{{ pagesSingleImage('Home', 'we_have_also_presented_second_logo_image') }}" class="img-fluid" alt=""></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-5" data-aos="fade-up">
                    <figure class="marketimg11">
                        <img src="{{ pagesSingleImage('Home', 'we_have_also_presented_right_side_image')}}" class="img-fluid" alt="">
                    </figure>
                </div>
            </div>
        </div>
    </section>


    <section class="RecentSec">
        <div class="container">
            <h2 class="mainHead" data-aos="fade-up">Recent <span>Trades</span></h2>
            <div class="row">
                <div class="swiper recentSlider">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="recenteBox">
                                <figure>
                                    <img src="upload/images/recentimg1.webp" class="img-fluid" alt="">
                                </figure>
                                <div class="recentcntnt">
                                    <h3>Sell   0.29   XAUUSD   3341.84</h3>
                                    <h5>+75.0 pips </h5>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="recenteBox">
                                <figure>
                                    <img src="upload/images/recentimg2.webp" class="img-fluid" alt="">
                                </figure>
                                <div class="recentcntnt">
                                    <h3>Sell   0.29   XAUUSD   3341.84</h3>
                                    <h5>+75.0 pips </h5>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="recenteBox">
                                <figure>
                                    <img src="upload/images/recentimg3.webp" class="img-fluid" alt="">
                                </figure>
                                <div class="recentcntnt">
                                    <h3>Buy   0.03   XAUUSDX   3342.76</h3>
                                    <h5>+405.0 pips   </h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
    </section>


    <section class="support-sec">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-8" data-aos="fade-up">
                    <div class="supportwrap">
                        <h2 class="mainHead">
                            {!!$pageData['Home']['for_any_inquiries_section_description'] ?? ''!!}
                        </h2>
                    </div>
                </div>
                <div class="col-md-4" data-aos="fade-up">
                    <div class="phonesides">
                        <div class="phonewrap">
                            <figure>
                                <img src="upload/images/phoneimg1.webp" class="img-fluid" alt="">
                            </figure>
                            <a href="">For Call <span>(+12) 34 6754 345</span></a>
                        </div>
                        <div class="phonewrap">
                            <figure>
                                <img src="upload/images/phoneimg2.webp" class="img-fluid" alt="">
                            </figure>
                            <a href="">For Consultation<span>contact@gmail.com</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection