@extends('layouts.frontend')
@inject('setting', 'App\Setting')
@section('content')
    <section id="section-01" class="container-fluid">
        <video autoplay muted loop id="myVideo">
            <source src="{{ url('/')}}/img/background/Banner-animación-AFX.mp4" type="video/mp4">
        </video>
        <div class="row">
            <div class="col-md ad">
            <h1 class="animated bounceInLeft">
                <figure>
                    <a href="http://afx.local/dashboard">
                    <img src="{{ url('/')}}/img/icons/logo-black.png" class="img-fluid" height="400px" width="auto">
              </a>
            </figure></h1>
            <h3 class="animated bounceInRight">Plataforma para intercambio de activos digitales</h3>
            </div>
        </div>
        <div class="row">
            @guest
            <a href="{{ route('contract') }}" class="mx-auto">
                <button class ="bt-02">{{__('messages.register')}}</button>
            </a>
            @else
            <a href="{{route('dashboard')}}" class="mx-auto">
                <button class ="bt-02">{{__('messages.enter')}}</button>
            </a>
            @endguest
        </div>
        <div class="linePrices">
            <div class="mover-1">
            </div>
        </div>
    </section>
    <section id="section-02" class="container-fluid whit">
        <div class="row afx">
            <h2 class="">¿Por qué AFX?</h2>
        </div>
        <div class="row bd-highlight icon" data-wow-delay="0.6s" style="margin-top: -50px">
            <div class="col-sm col-md-2">
            <figure class="wow fadeIn ines"><img src="{{ url('/') }}/img/icons/A.png"/></figure>
            <h4>Bajo Costo</h4>
            <p>Opera y realiza tus transacciones a bajo costo.</p>
            </div>
            <div class="col-sm col-md-2">
            <figure class="wow fadeIn ines" data-wow-delay="0.4s"><img src="{{ url('/') }}/img/icons/B.png"/></figure>
            <h4>Seguridad</h4>
            <p>Altos estándares de seguridad y tranferencia mantienen sus fondos protegidos.</p>
            </div>
            <div class="col-sm col-md-2">
            <figure class="wow fadeIn ines" data-wow-delay="0.8s"><img src="{{ url('/') }}/img/icons/C.png"/></figure>
            <h4>Liquidez</h4>
            <p>Parametrizamos los volúmenes de transacciones</p>
            </div>
            <div class="col-sm col-md-2">
            <figure class="wow fadeIn ines" data-wow-delay="1.2s"><img src="{{ url('/') }}/img/icons/D.png"/></figure>
            <h4>Rapidez</h4>
            <p>Compra, vende y convierte en solo segundos</p>
            </div>
        </div>
    </section>
    <section id="section-03" class="container-fluid">
    <div id="particles-js"></div>
        <figure id="side-01" class="side" >
            <img src="{{ url('/') }}/img/icons/LATERAL.png"/>
        </figure>
        <div class="row who">
            <h2>¿Quiénes Somos?</h2>
            <p>Somos una casa <b>intercambio de activos digitales en Venezuela</b> autorizados por la SUNACRIP.</p>
            <p><b>AFX</b> cuenta con una plataforma tecnológica probada, moderna y de fácil uso.</p>
            <p>Nuestro equipo de profesionales velan por ofrecer los más altos estándares de
                servicios y permiten que la experiencia del usuario sea sencilla y confiable en el
                manejo de activos de esta nueva economía digital.</p>
        </div>
        <figure id="side-02" class="side">
            <img src="{{ url('/') }}/img/icons/LATERAL2.png"/>
        </figure>
        <div class="row loren wow bounceInRight">
            <div class="col-7 mone justify-content-center">
                <img id="btc" class="wow fadeIn" src="{{ url('/') }}/img/icons/BTCicon.png"/>
                <img id="eth" class="wow fadeIn" data-wow-delay="0.4s" src="{{ url('/') }}/img/icons/ETHicon.png"/>
                <img id="dash" class="wow fadeIn" data-wow-delay="0.8s" src="{{ url('/') }}/img/icons/DASHicon.png"/>
                <img id="ltc" class="wow fadeIn" data-wow-delay="1.2s" src="{{ url('/') }}/img/icons/LTCicon.png"/>
                <img id="petro" class="wow fadeIn" data-wow-delay="1.6s" src="{{ url('/') }}/img/icons/PETROicon.png"/>
            </div>
            <div class="text col-md-5 offset-md-6 text-center pl-md-4" >
                <h2 class="wow bounceInRight my-auto" data-wow-delay="0.6s" >COMPRA<span style="color:#29ABE2">,</span> VENDE</h2>
                <h2 class="wow bounceInRight my-auto" data-wow-delay="0.6s">INTERCAMBIA</h3>
                <h2 class="wow bounceInRight my-auto" data-wow-delay="0.6s">TRANSFIERE</h2>
                <div class="mx-auto" style="width: 358px;height: 8px;background: #29ABE2;border-radius: 10px;"></div>
                <p>PTR, BTC, LTC, ETH y DASH en segundos.</p>
            </div>
            <div class="mone2">
                <img id="btc2" class="wow fadeIn" src="{{ url('/') }}/img/icons/BTCicon.png"/>
                <img id="eth2" class="wow fadeIn" data-wow-delay="0.4s" src="{{ url('/') }}/img/icons/ETHicon.png"/>
                <img id="dash2" class="wow fadeIn" data-wow-delay="0.8s" src="{{ url('/') }}/img/icons/DASHicon.png"/>
                <img id="ltc2" class="wow fadeIn" data-wow-delay="1.2s" src="{{ url('/') }}/img/icons/LTCicon.png"/>
                <img id="petro2" class="wow fadeIn" data-wow-delay="1.6s" src="{{ url('/') }}/img/icons/PETROicon.png"/>
            </div>
        </div>
    </section>
    <section id="section-04" class="container-fluid whit">
        <div>
            <p>Como miembro de AFX, tienes acceso a una gama completa
                de beneficios que se obtienen con servicios financieros
                fáciles, instantáneos y transparentes.
            </p>
        </div>
        <div class="row justify-content-center bd-highlight icon">
            <div class="col-md-2">
            <figure><img src="{{ url('/') }}/img/icons/001.png"/></figure>
            <h4>Atención Al Cliente</h4>
            </div>
            <div class="col-md-2">
            <figure><img src="{{ url('/') }}/img/icons/002.png"/></figure>
            <h4>Alianzas Estratégicos</h4>
            </div>
            <div class="col-md-2">
            <figure ><img src="{{ url('/') }}/img/icons/003.png"/></figure>
            <h4>Constante Innovación</h4>
            </div>
        </div>
    </section>
   <div class="modal fade show" id="modalReleases" tabindex="-1" role="dialog" aria-labelledby="modalReleases" style="display: block;background-color: #000000c9;">
      <div class="modal-dialog modal-lg" role="document" style="margin-top: 65px;">
        <div class="modal-content" style="border-radius:10px;height: 80vh;width: 75%;margin-left: auto;margin-right: auto;background-color: transparent;box-shadow: none;">
            <div class="modal-body" id="newsBody" style="padding: 0;">
                <div class="bgMsgCnt"></div>
            </div>
        </div>
      </div>
    </div>
@endsection