@extends('Vistas_cliente.appCliente')

@section('contenido')
    <!--Inicio area slider-->

    <section class="slider_section">
        <div class="slider_area owl-carousel">
            <div class="single_slider d-flex align-items-center" data-bgimg="assets/img/slider/slider1.jpg">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="slider_content">
                                <h2>Únicos en el mercado</h2>
                                <h1>Jabones a tu disposición</h1>
                                <p>
                                    "Diseña tu jabón ideal con ingredientes naturales, pensado para hidratar y cuidar tu
                                    piel mientras se adapta a tus necesidades y preferencias únicas."
                                </p>
                                <a href="{{ route('tienda.index') }}">+ Compra Ahora </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="single_slider d-flex align-items-center" data-bgimg="assets/img/slider/slider2.jpg">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="slider_content">
                                <h2>Completamente naturales</h2>
                                <h1>Crea tu jabón ahora mismo</h1>
                                <p>
                                    "Personaliza tu propio jabón con ingredientes naturales de alta calidad. Elige tus
                                    aromas, colores y propiedades para crear un producto único que cuide tu piel de la mejor
                                    manera."
                                </p>
                                <a href="{{ route('tienda.index') }}">+ Compra Ahora </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Fin area slider-->

    <!--Inicio area de banner-->
    <div class="banner_gallery_area">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section_title">
                        <h2>Diseñados para ti</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="banner_aera banner_style_three mb-85">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-lg-6 col-md-6">

                                <div class="banner_thumb">
                                    <a href="{{ route('tienda.index') }}"><img src="assets/img/bg/banner13.jpg"
                                            alt=""></a>
                                    <div class="banner_text">
                                        <h3>Jabones</h3>
                                        <p>Tu propio jabón a tu medida sin elementos artificiales.</p>
                                    </div>
                                </div>

                            </div>

                            <div class="col-lg-6 col-md-6">
                                <div class="banner_thumb">
                                    <a href="{{ route('tienda.index') }}"><img src="assets/img/bg/banner14.jpg"
                                            alt=""></a>
                                    <div class="banner_text">
                                        <h3>Naturales</h3>
                                        <p>Utiliza nuestra variedad de elementos naturales.</p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Fin area de banner-->

    <!--Inicio area productos-->
    <div class="product_area  mb-100">
        <div class="container">

            <div class="row">
                <div class="col-12">
                    <div class="section_title">
                        <h2>Algunos productos </h2>
                        <p>Observa los jabones creados por otras personas</p>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="product_carousel product_column4 owl-carousel">

                    @foreach ($jabones as $jabon)
                        <div class="col-lg-3">
                            <article class="single_product">
                                <figure>
                                    <div class="product_thumb">
                                        <a class="primary_img" href="{{ route('landing.show', $jabon->id_jabon) }}"><img
                                                src="{{ asset("$jabon->img") }}"></a>

                                    </div>
                                    <figcaption class="product_content">
                                        <h4 class="product_name"><a
                                                href="{{ route('landing.show', $jabon->id_jabon) }}">{{ $jabon->nombre }}</a>
                                        </h4>
                                        <div class="price_box">
                                            <span class="current_price"><span>₡</span>{{ $jabon->precio_base }}</span>
                                        </div>
                                        <div class="add_to_cart"> <a href="javascript:void(0);"
                                                onclick="addToCart({{ $jabon->id_jabon }}, '{{ $jabon->nombre }}', {{ $jabon->precio_base }}, '','{{ $jabon->img }}', 1)">+
                                                Añadir al carrito</a>
                                        </div>
                                    </figcaption>
                                </figure>
                            </article>
                        </div>
                    @endforeach

                </div>
            </div>

        </div>

    </div>
    </div>
    </div>
    <!--product area end-->

    <!--testimonial area start-->
    <div class="testimonial_area mb-95">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section_title testi_title">
                        <i class="fa fa-quote-left" aria-hidden="true"></i>
                        <h2>Testimonios de clientes</h2>
                    </div>
                </div>
            </div>
            <div class="testimonial_container">
                <div class="row">
                    <div class="testimonial_carousel testimonial_column3 owl-carousel">

                        <div class="single_testimonial">

                            <div class="testimonial_thumb">
                                <img src="assets/img/about/Primera.jpg" alt="">
                            </div>

                            <div class="testimonial_content">
                                <h3>Carla López</h3>
                                <a href="mailto:carla.lopez@example.com">/carla.lopez@gmail.com</a>
                                <p>¡Encantada con los jabones personalizados! Los aromas y diseños son únicos. Perfectos
                                    para regalar o consentirme.</p>
                            </div>
                        </div>

                        <div class="single_testimonial">

                            <div class="testimonial_thumb">
                                <img src="assets/img/about/Segundo.jpg" alt="">
                            </div>

                            <div class="testimonial_content">
                                <h3>Diego Ramírez</h3>
                                <a href="mailto:diego.ramirez@example.com">/diego.ramirez@example.com</a>
                                <p>Excelente calidad y atención al cliente. Los jabones superaron mis expectativas, se
                                    nota el cuidado en cada detalle.</p>
                            </div>
                        </div>

                        <div class="single_testimonial">

                            <div class="testimonial_thumb">
                                <img src="assets/img/about/Tercera.png" alt="">
                            </div>

                            <div class="testimonial_content">
                                <h3>Lucía Fernández</h3>
                                <a href="mailto:lucia.fernandez@example.com">/lucia.fernandez@example.com</a>
                                <p>Los jabones personalizados son increíbles. Los elegí como recuerdo para un evento y a
                                    todos les encantaron.</p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--testimonial area end-->

    <!--banner static area start-->
    <div class="banner_static_area mb-95">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-5 col-md-5">
                    <div class="banner_static_content">
                        <h3>Jabones Artesanales & Naturales</h3>
                        <h2>Pureza natural<br> en tus manos</h2>
                        <p>Jabones artesanales elaborados con ingredientes naturales para cuidar tu piel y el planeta.
                        </p>
                        <a href="{{ route('tienda.index') }}">+ Comprar ahora</a>
                    </div>
                </div>
                <div class="col-lg-7 col-md-7">
                    <div class="banner_thumb static_b_thumb">
                        <a href="{{ route('tienda.index') }}"><img src="assets/img/bg/explorar_productos.jpg"
                                alt=""></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--banner static area end-->
@endsection