@extends('front.front')
@push('css')
<style>
    .container {
        max-width: 1440px !important;
    }
</style>
@endpush
@section('content')
    <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" class="video_skf">
        <source src="{{ asset('video/Video_pagina_web_SKF.mp4') }}" type="video/mp4">
    </video>
    <div class="header_height">
        <div class="container header-full" style="z-index: -55">
        </div>
        <div class="row" style="z-index: 55">
            <div class="text-header hide-mobile">
                <p class="titulo pb-5 wow slideInDown" data-wow-duration="2.5s">Bienvenido al portal de <br> Clientes SKF</p>
            </div>
        </div>
        <div class="class_left row">
            <div class="col text-left scroll-arrow hide-mobile">
                <p class="subtitulo wow slideInDown" data-wow-duration="2.5s" > 
                    Aquí podrás encontrar toda la información que necesitas
                </p>
                <a href="{{ url('login') }}" class="boton_azul dark-btn">Ingresar</a>
            </div>
            <div class="col text-right scroll-arrow hide-mobile wow slideInRight">
                <div class="row">
                    <div class="text-right" style="display: flex; justify-content:flex-end; width: 95%">
                        <div class="text-right" style="width: 180px;">
                            <a class="p_texto_white pt-2 seccion_uno" href="">
                                CONOCE LOS BENEFICIOS
                                DE SER CLIENTE SKF 
                            </a>
                        </div>
                    </div>
                    <div class="seccion_uno" style="width: 5%; margin-top: -10px">
                        <a href="">
                            <img src="https://skftutoriales.mx/images_videos/down-arrow-2.png" alt="arrow" class="img_arrow bounce2">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="hide-desktop text-center seccion-mobile-ingresar" style="background-color: #0b5cd7;height: 100%;">
            <p class="titulo-mobile pt-5 wow slideInDown" data-wow-duration="2.5s">Bienvenido al portal de <br> Clientes SKF</p>
            <p class="subtitulo-mobile pb-2 wow slideInDown" data-wow-duration="2.5s" >
                Aquí podrás encontrar toda la información que necesitas
            </p>
            <a href="{{ url('login') }}" class="boton-mobile">Ingresar</a>
            <p></p>
        </div>
    </div>

    <div class="container-fluid" id="seccion_uno" style="background-color: #0b5cd7;">
        <div class="container contenedor-body">
            <div class="row pl-2 pr-2 pl-lg-2 pl-lg-2 pr-xl-2 pr-xl-2">
                <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 wow slideInLeft" data-wow-duration="2s" >
                    <p class="titulo-body">Trabajamos todos los días para lograr calidad a través de la innovación</p>
                </div>
                <div class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 pl-3 pl-sm-3 pl-lg-5 pl-xl-5 wow slideInRight" data-wow-duration="2s" >
                    <p class="texto_plano">
                    Solo los clientes SKF México
                    tienen acceso a todos nuestros documentos y
                    actividades que impactarán profundamente en
                    tu negocio.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid imagenes-seccion">
        <div class="container pt-5" >
            <div class="row">
                <!-- EMPIEZA SECCIÓN NOTICIAS -->
                <div class="col-12 col-lg-6 col-md-6 col-sm-6 pb-5 pr-lg-5 wow slideInLeft">
                    <div class="back_general" style="background-image: url({{ asset('imagenes/imagenes_landing/Noticias.jpg') }});"></div>
                </div>
                <div class="col-12 col-lg-6 col-md-6 col-sm-6 pb-5 info-skf slideInRight">
                    <p class="category">Noticias</p>
                    <p class="title_category hide-mobile">
                        Las noticias más recientes
                        siempre a tu alcance
                    </p>
                    <p class="title_category hide-desktop">
                        Las noticias más recientes siempre a tu alcance
                    </p>
                    <p class="text_paragraph">
                        Sumérgete en el flujo constante de información relevante con nuestro portal exclusivo para clientes SKF, 
                        donde las noticias más recientes están siempre a tu alcance. Mantente actualizado sobre lanzamientos de 
                        productos, eventos destacados y avances tecnológicos, garantizando que estés al tanto de las últimas 
                        novedades que afectan a tu industria.
                    </p>
                    <p style="text-align:left;">
                        <a href="{{ url('login') }}" class="button_login">
                            Accede a noticias
                        </a>
                    </p>
                </div>
                <!-- TERMINA SECCIÓN NOTICIAS -->
                <!-- EMPIEZA SECCIÓN DOCUMENTOS -->
                <div class="col-12 col-lg-6 col-md-6 col-sm-6 pb-5 pr-lg-5 hide-desktop wow slideInLeft">
                    <div class="back_general" style="background-image: url({{ asset('imagenes/imagenes_landing/Documentos.jpg') }});"></div>
                </div>
                <div class="col-12 col-lg-6 col-md-6 col-sm-6 pb-5 info-skf slideInLeft">
                    <p class="category">Documentos</p>
                    <p class="title_category hide-mobile">
                        Consulta documentos disponibles
                        solo para Clientes SKF
                    </p>
                    <p class="title_category hide-desktop">
                        Consulta documentos disponibles solo para Clientes SKF
                    </p>
                    <p class="text_paragraph">
                        Descubre la comodidad de acceder a una amplia variedad de documentos cruciales diseñados para clientes SKF. 
                        Nuestro portal te brinda la capacidad de consultar y descargar fácilmente documentos esenciales, 
                        desde manuales detallados hasta certificaciones, proporcionando un acceso rápido y eficiente a la 
                        información que necesitas para optimizar tus operaciones.
                    </p>
                    <p style="text-align:left;">
                        <a href="{{ url('login') }}" class="button_login">
                            Accede a documentos
                        </a>
                    </p>
                </div>
                <div class="col-12 col-lg-6 col-md-6 col-sm-6 pb-5 pl-lg-5 hide-mobile wow slideInRight">
                    <div class="back_general" style="background-image: url({{ asset('imagenes/imagenes_landing/Documentos.jpg') }});"></div>
                </div>
                <!-- TERMINA SECCIÓN DOCUMENTOS -->
                <!-- EMPIEZA SECCIÓN CAMPAÑAS -->
                <!-- <div class="col-12 col-lg-6 col-md-6 col-sm-6 pb-5 pr-lg-5 wow slideInLeft">
                    <div class="back_general" style="background-image: url({{ asset('imagenes/imagenes_landing/Campanas.jpg') }});"></div>
                </div>
                <div class="col-12 col-lg-6 col-md-6 col-sm-6 pb-5 info-skf slideInRight">
                    <p class="category">Campañas</p>
                    <p class="title_category hide-mobile">
                        Entérate de las campañas que
                        hemos creado para ti
                    </p>
                    <p class="title_category hide-desktop">
                        Entérate de las campañas que hemos creado para ti
                    </p>
                    <p class="text_paragraph">
                        Entra en el mundo de las campañas personalizadas diseñadas exclusivamente para ti en el portal SKF. 
                        Descubre promociones exclusivas, ofertas especiales y programas que hemos creado pensando en tus 
                        necesidades específicas. Mantente informado sobre oportunidades que maximizarán tu experiencia como cliente SKF.
                    </p>
                    <p style="text-align:left;">
                        <a href="{{ url('login') }}" class="button_login">
                            Accede a campañas
                        </a>
                    </p>
                </div> -->
                <!-- TERMINA SECCIÓN CAMPAÑAS -->
                <!-- EMPIEZA SECCIÓN CATÁLOGOS -->
                <div class="col-12 col-lg-6 col-md-6 col-sm-6 pb-5 pr-lg-5 hide-desktop wow slideInLeft">
                    <div class="back_general" style="background-image: url({{ asset('imagenes/imagenes_landing/Catalogos.jpg') }});"></div>
                </div>
                <div class="col-12 col-lg-6 col-md-6 col-sm-6 pb-5 info-skf slideInLeft">
                    <p class="category" style="text-transform: none !important">Comunicados y Circulares</p>
                    <p class="title_category hide-mobile">
                        Agiliza la búsqueda de información
                        consultando los comunicados disponibles
                    </p>
                    <p class="title_category hide-desktop">
                        Agiliza la búsqueda de información consultando los comunicados disponibles
                    </p>
                    <p class="text_paragraph">
                        Simplifica la búsqueda de información accediendo a nuestros comunicados en línea. 
                        Nuestro portal te permite agilizar la consulta de datos relevantes, 
                        desde especificaciones de productos hasta detalles técnicos, facilitando una 
                        toma de decisiones más informada y eficaz en cada paso de tu proceso.
                    </p>
                    <p style="text-align:left;">
                        <a href="{{ url('login') }}" class="button_login">
                            Accede a comunicados
                        </a>
                    </p>
                </div>
                <div class="col-12 col-lg-6 col-md-6 col-sm-6 pb-5 pl-lg-5 hide-mobile wow slideInRight">
                    <div class="back_general" style="background-image: url({{ asset('imagenes/imagenes_landing/Catalogos.jpg') }});"></div>
                </div>
                <!-- TERMINA SECCIÓN CATÁLOGOS -->
                <!-- EMPIEZA SECCIÓN CURSOS -->
                <div class="col-12 col-lg-6 col-md-6 col-sm-6 pb-5 pr-lg-5 wow slideInLeft">
                    <div class="back_general" style="background-image: url({{ asset('imagenes/imagenes_landing/Cursos.jpg') }});"></div>
                </div>
                <div class="col-12 col-lg-6 col-md-6 col-sm-6 pb-5 info-skf slideInRight">
                    <p class="category">Cursos</p>
                    <p class="title_category hide-mobile">
                        Mejora tus conocimientos y habilidades
                        empleando el mínimo de recursos y de tiempo
                    </p>
                    <p class="title_category hide-desktop">
                        Mejora tus conocimientos y habilidades empleando el mínimo de recursos y de tiempo
                    </p>
                    <p class="text_paragraph">
                        Potencia tus conocimientos y habilidades con nuestra sección diseñada para mejorar tu 
                        rendimiento con el mínimo de recursos y tiempo. Accede a herramientas de formación, 
                        webinars exclusivos y cursos especializados que te permitirán expandir tus 
                        habilidades de manera eficiente, impulsando tu éxito en la industria.
                    </p>
                    <p style="text-align:left;">
                        <a href="{{ url('login') }}" class="button_login">
                            Accede a cursos
                        </a>
                    </p>
                </div>
                <!-- TERMINA SECCIÓN CURSOS -->
                <!-- EMPIEZA SECCIÓN PROMOCIONALES -->
                {{-- <div class="col-12 col-lg-6 col-md-6 col-sm-6 pb-5 pr-lg-5 hide-desktop wow slideInLeft">
                    <div class="back_general" style="background-image: url({{ asset('imagenes/imagenes_landing/e-Commerce.jpg') }});"></div>
                </div>
                <div class="col-12 col-lg-6 col-md-6 col-sm-6 pb-5 info-skf">
                    <p class="category">Promocionales</p>
                    <p class="title_category hide-mobile">
                        Adquiere productos
                        promocionales SKF
                    </p>
                    <p class="title_category hide-desktop">
                        Genera pedidos desde la comodidad de tu casa
                    </p>
                    <p class="text_paragraph">
                        Solo los Distribuidores Autorizados SKF tienes
                        acceso a nuestras actividades de investigación
                        llevadas a cabo en nuestro Centro de Ingeniería e
                        Investigación (Engineering & Research Centre) en
                        Holanda, único en capacidades e instalaciones en el
                        mundo de las soluciones industriales.
                    </p>
                    <p style="text-align:left;">
                        <a href="{{ url('login') }}" class="button_login">
                            Ingresar
                        </a>
                    </p>
                </div>
                <div class="col-12 col-lg-6 col-md-6 col-sm-6 pb-5 pl-lg-5 hide-mobile wow slideInRight">
                    <div class="back_general" style="background-image: url({{ asset('imagenes/imagenes_landing/e-Commerce.jpg') }});"></div>
                </div> --}}
                <!-- TERMINA SECCIÓN PROMOCIONALES -->
            </div>
        </div>
    </div>
    <!-- SECCIÓN WEBS-->
    <div class="container-fluid">
        <div class="container contenedor-skf" style="flex-direction: column">
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 text-center wow slideInLeft" data-wow-duration="1s" >
                    <p class="titulo-body hide-mobile" style="color: rgba(0,0,0,0.85)">
                        Visíta también nuestros otros sitios <br />
                        donde encontrarás más recursos
                    </p>
                    <p class="titulo-body hide-desktop" style="color: rgba(0,0,0,0.85)">
                        Visíta también nuestros otros sitios
                        donde encontrarás más recursos disponibles
                    </p>
                    <p class="texto_plano" style="color: rgba(0,0,0,0.85)">
                        Solo los clientes SKF México
                        tienen acceso a todos nuestros documentos y
                        actividades que impactarán profundamente
                        en tu negocio.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="principal container-fluid">
        <div class="container">
            <div class="row p-0 m-0">
                <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 skf wow slideInLeft" data-wow-duration="1s">
                    <div style="background-color: #ebf0f0;">
                        <div class="back_image" style="background-image: url({{ asset('imagenes/imagenes_landing/skf_01.jpg') }})"></div>
                        <p class="skf_title">
                            SKF México
                        </p>
                        <div class="botones_derecha">
                            <a href="https://www.skf.com/mx" class="skf_button">
                                <i class="fa fa-arrow-right" aria-hidden="true"></i> Saber más
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 skf wow slideInDown" data-wow-duration="1s">
                    <div style="background-color: #ebf0f0;">
                        <div class="back_image" style="background-image: url({{ asset('imagenes/imagenes_landing/skf_02.jpg') }})"></div>
                        <p class="skf_title">
                            SKF Tutoriales
                        </p>
                        <div class="botones_derecha">
                            <a href="https://skftutoriales.mx/" class="skf_button">
                                <i class="fa fa-arrow-right" aria-hidden="true"></i> Saber más
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 skf wow bounceInUp" data-wow-duration="1s">
                    <div style="background-color: #ebf0f0;">
                        <div class="back_image" style="background-image: url({{ asset('imagenes/imagenes_landing/skf_03.jpg') }})"></div>
                        <p class="skf_title">
                            SKF Entrenamientos
                        </p>
                        <div class="botones_derecha">
                            <a href="https://www.skfentrenamientos.mx/" class="skf_button">
                                <i class="fa fa-arrow-right" aria-hidden="true"></i> Saber más
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 skf wow slideInRight" data-wow-duration="1s">
                    <div style="background-color: #ebf0f0;">
                        <div class="back_image" style="background-image: url({{ asset('imagenes/imagenes_landing/skf_04.jpg') }})"></div>
                        <p class="skf_title">
                            SKF College
                        </p>
                        <div class="botones_derecha">
                            <a href="https://skfcollege.com.mx/" class="skf_button">
                                <i class="fa fa-arrow-right" aria-hidden="true"></i> Saber más
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- SECCIÓN FORMULARIO -->
    <div class="formulario" style="width:100%">
        <div class="container-fluid contenedor_padding">
            <div class="row">
                <div class="col-lg-6 col-md-12 wow slideInLeft color_one" data-wow-duration="1s" >
                    <p class="titulo-body">¿Aún no eres distribuidor autorizado?</p>
                    <p class="title_small hide-mobile">
                        Déjanos tus datos y con gusto nos
                        <br />
                        pondremos en contacto contigo.
                    </p>
                    <p class="title_small hide-desktop">
                        Déjanos tus datos y con gusto nos
                        pondremos en contacto contigo.
                    </p>
                </div>
                <div class="col-lg-6 col-md-12 wow slideInRight color_two" data-wow-duration="1s">
                    <div class="row">
                        <form method="get" action="{{ url('/enviar_correo') }}" class="col-12 form-contacto" id="formulario_contacto">
                            @csrf
                            <div class="row" id="form_contacto">
                                <div class="col-md-12" style="margin-bottom:20px;">
                                    <input type="text" name="nombre" id="nombre" placeholder="Nombre y apellidos" value="{{ old('nombre') }}">
                                    <span id="nombre_mensaje" class="invalid-feedback" style="color: #fff"></span>
                                    @if ($errors->has('nombre'))
                                        <span class="feedbak-error">
                                            <strong>{{ $errors->first('nombre') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="col-md-6" style="margin-bottom:20px;">
                                    <input type="email" name="email" id="email" placeholder="Correo electrónico" value="{{ old('email') }}">
                                    <span id="correo_mensaje" class="invalid-feedback" style="color: #fff"></span>
                                    @if ($errors->has('email'))
                                        <span class="feedbak-error">
                                            <strong>{{ $errors->first('email') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="col-md-6" style="margin-bottom:20px;">
                                    <input type="tel" name="tel" id="tel" placeholder="Teléfono" value="{{ old('tel') }}">
                                    <span id="telefono" class="invalid-feedback" style="color: #fff"></span>
                                    @if ($errors->has('tel'))
                                        <span class="feedbak-error">
                                            <strong>{{ $errors->first('tel') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="col-md-12 pb-5" style="margin-top:20px;">
                                    <textarea name="mensaje" id="mensaje" cols="30" rows="10"
                                        placeholder="Mensaje" value="{{ old('mensaje') }}"></textarea>
                                    @if ($errors->has('mensaje'))
                                        <span class="feedbak-error">
                                            <strong>{{ $errors->first('mensaje') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="col-12 message">
                                    ¡El mensaje se ha enviado correctamente!
                                </div>
                            </div>
                            {!! NoCaptcha::renderJs() !!}
                            {!! NoCaptcha::display() !!}
                        </form>
                        <div class="col-12">
                            <button type="button" class="button_login button_width text-center" style="background-color: #073781;" id="enviar">Enviar</button>
                        </div>
                        <div class="col-12">
                            @if ($errors->has('g-recaptcha-response'))
                                <span class="feedbak-error">
                                    <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection