@extends('layouts.app_web')  <!-- Hereda el layout base -->
@section('content')
<div id="wrapper" class="wrap overflow-hidden-x">
    <!-- Section start -->
    <div class="section panel overflow-hidden py-2 bg-gray-25 dark:bg-gray-900 uc-dark">
        <div class="section-outer panel">
            <div class="container container-expand">
                <div class="section-inner panel vstack gap-4">
                    <div class="section-content">
                        <div class="block-layout grid-overlay-layout">
                            <div class="block-content">
                                <div class="row child-cols-12 md:child-cols-6 g-1 col-match">
                                    <div>
                                        <div>
                                            @foreach ($posts as $post)
                                                @if ($post->id == $home2->post_one)
                                                    <article class="post type-post panel uc-transition-toggle  h-100 rounded overflow-hidden">
                                                        <div class="post-media panel overflow-hidden h-100">
                                                            <div>
                                                                <canvas class="h-100 w-100"></canvas>
                                                                <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="{{ asset('imagenes/posts/post_'.$post->id."/".$post->imagen_principal) }}" data-src="{{ asset('imagenes/posts/post_'.$post->id."/".$post->imagen_principal) }}" alt="AI-Powered Financial Planning: How Algorithms Revolutionizing" data-uc-img="loading: lazy">
                                                            </div>
                                                        </div>
                                                        <div class="position-cover bg-gradient-to-t from-black to-transparent opacity-90"></div>
                                                        <div class="post-header panel vstack justify-end items-start gap-1 sm:gap-2 p-2 sm:p-4 position-cover text-white">
                                                            <div class="post-meta panel hstack justify-start gap-1 fs-7 ft-tertiary fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                                <div>
                                                                    <div class="post-category hstack gap-narrow fw-semibold">
                                                                        <a class="fw-medium text-none text-primary dark:text-primary-400" href="{{route('home.category',$post->category_id)}}">{{$post->category->name}}</a>
                                                                    </div>
                                                                </div>
                                                                <div class="sep d-none md:d-block">|</div>
                                                                <div class="d-none md:d-block">
                                                                    <div class="post-date hstack gap-narrow">
                                                                        <span>{{ \Carbon\Carbon::parse($post->updated_at)->diffForHumans() }}</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <h3 class="post-title h5 sm:h4 xl:h3 m-0 max-w-600px text-white text-truncate-2">
                                                                <a class="text-none text-white" href="{{route('home.post',$post->slug)}}">{{$post->titulo_principal}}</a>
                                                            </h3>
                                                            <div>
                                                                <div class="post-meta panel hstack justify-between fs-7 fw-medium text-white text-opacity-60">
                                                                    <div class="actions">
                                                                        <div class="hstack gap-1"></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </article>
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                    <div>
                                        <div class="panel">
                                            <div class="row child-cols-6 g-1">
                                                @foreach ($posts as $post)
                                                    @if ($post->id == $home2->post_two)
                                                        <div>
                                                            <article class="post type-post panel uc-transition-toggle vstack gap-2 lg:gap-3 rounded overflow-hidden">
                                                                <div >
                                                                    <div class="featured-image bg-gray-25 dark:bg-gray-800 ratio ratio-1x1 sm:ratio-4x3">
                                                                        <img class="media-cover image image uc-transition-scale-up uc-transition-opaque" src="{{ asset('imagenes/posts/post_'.$post->id."/".$post->imagen_principal) }}" data-src="{{ asset('imagenes/posts/post_'.$post->id."/".$post->imagen_principal) }}" alt="{{$post->slug}}" data-uc-img="loading: lazy">
                                                                    </div>
                                                                </div>
                                                                <div class="position-cover bg-gradient-to-t from-black to-transparent opacity-90"></div>
                                                                <div class="post-header panel vstack justify-start items-start flex-column-reverse gap-1 p-2 position-cover text-white">
                                                                    <h3 class="post-title h6 sm:h5 lg:h6 xl:h5 m-0 max-w-600px text-white text-truncate-2">
                                                                        <a class="text-none text-white" href="{{route('home.post',$post->slug)}}">{{$post->titulo_principal}}</a>
                                                                    </h3>
                                                                    <div class="post-meta panel hstack justify-start gap-1 fs-7 ft-tertiary fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                                        <div>
                                                                            <div class="post-category hstack gap-narrow fw-semibold">
                                                                                <a class="fw-medium text-none text-primary dark:text-primary-400" href="{{$post->category_id}}">{{$post->category->name}}</a>
                                                                            </div>
                                                                        </div>
                                                                        <div class="sep d-none md:d-block">|</div>
                                                                        <div class="d-none md:d-block">
                                                                            <div class="post-date hstack gap-narrow">
                                                                                <span>{{ \Carbon\Carbon::parse($post->updated_at)->diffForHumans() }}</span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <a href="{{route('home.post',$post->slug)}}" class="position-cover"></a>
                                                            </article>
                                                        </div>
                                                    @endif
                                                @endforeach
                                                @foreach ($posts as $post)
                                                    @if ($post->id == $home2->post_three)
                                                        <div>
                                                            <article class="post type-post panel uc-transition-toggle vstack gap-2 lg:gap-3 rounded overflow-hidden">
                                                                <div >
                                                                    <div class="featured-image bg-gray-25 dark:bg-gray-800 ratio ratio-1x1 sm:ratio-4x3">
                                                                        <img class="media-cover image image uc-transition-scale-up uc-transition-opaque" src="{{ asset('imagenes/posts/post_'.$post->id."/".$post->imagen_principal) }}" data-src="{{ asset('imagenes/posts/post_'.$post->id."/".$post->imagen_principal) }}" alt="{{$post->slug}}" data-uc-img="loading: lazy">
                                                                    </div>
                                                                </div>
                                                                <div class="position-cover bg-gradient-to-t from-black to-transparent opacity-90"></div>
                                                                <div class="post-header panel vstack justify-start items-start flex-column-reverse gap-1 p-2 position-cover text-white">
                                                                    <h3 class="post-title h6 sm:h5 lg:h6 xl:h5 m-0 max-w-600px text-white text-truncate-2">
                                                                        <a class="text-none text-white" href="{{route('home.post',$post->slug)}}">{{$post->titulo_principal}}</a>
                                                                    </h3>
                                                                    <div class="post-meta panel hstack justify-start gap-1 fs-7 ft-tertiary fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                                        <div>
                                                                            <div class="post-category hstack gap-narrow fw-semibold">
                                                                                <a class="fw-medium text-none text-primary dark:text-primary-400" href="{{$post->category_id}}">{{$post->category->name}}</a>
                                                                            </div>
                                                                        </div>
                                                                        <div class="sep d-none md:d-block">|</div>
                                                                        <div class="d-none md:d-block">
                                                                            <div class="post-date hstack gap-narrow">
                                                                                <span>{{ \Carbon\Carbon::parse($post->updated_at)->diffForHumans() }}</span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <a href="{{route('home.post',$post->slug)}}" class="position-cover"></a>
                                                            </article>
                                                        </div>
                                                    @endif
                                                @endforeach
                                                @foreach ($posts_ten as $post)
                                                    <div>
                                                        <article class="post type-post panel uc-transition-toggle vstack gap-2 lg:gap-3 rounded overflow-hidden">
                                                            <div >
                                                                <div class="featured-image bg-gray-25 dark:bg-gray-800 ratio ratio-1x1 sm:ratio-4x3">
                                                                    <img class="media-cover image image uc-transition-scale-up uc-transition-opaque" src="{{ asset('imagenes/posts/post_'.$post->id."/".$post->imagen_principal) }}" data-src="{{ asset('imagenes/posts/post_'.$post->id."/".$post->imagen_principal) }}" alt="{{$post->slug}}" data-uc-img="loading: lazy">
                                                                </div>
                                                            </div>
                                                            <div class="position-cover bg-gradient-to-t from-black to-transparent opacity-90"></div>
                                                            <div class="post-header panel vstack justify-start items-start flex-column-reverse gap-1 p-2 position-cover text-white">
                                                                <h3 class="post-title h6 sm:h5 lg:h6 xl:h5 m-0 max-w-600px text-white text-truncate-2">
                                                                    <a class="text-none text-white" href="{{route('home.post',$post->slug)}}">{{$post->titulo_principal}}</a>
                                                                </h3>
                                                                <div class="post-meta panel hstack justify-start gap-1 fs-7 ft-tertiary fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                                    <div>
                                                                        <div class="post-category hstack gap-narrow fw-semibold">
                                                                            <a class="fw-medium text-none text-primary dark:text-primary-400" href="{{$post->category_id}}">{{$post->category->name}}</a>
                                                                        </div>
                                                                    </div>
                                                                    <div class="sep d-none md:d-block">|</div>
                                                                    <div class="d-none md:d-block">
                                                                        <div class="post-date hstack gap-narrow">
                                                                            <span>{{ \Carbon\Carbon::parse($post->updated_at)->diffForHumans() }}</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <a href="{{route('home.post',$post->slug)}}" class="position-cover"></a>
                                                        </article>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
     <!-- Section end -->
        {{-- <div class="image-links-panel panel overflow-hidden pt-2 swiper-parent">
                <div class="container">
                    <div class="panel">
                        <div class="swiper overflow-unset" data-uc-swiper="items: 3.25; gap: 8; center: true; freeMode: true; center-bounds: true; disable-class: d-none;" data-uc-swiper-s="items: 6;" data-uc-swiper-l="items: 8; gap: 16;">
                            <div class="swiper-wrapper">
                                @foreach ($galleries as $gallery)
                                    <div class="swiper-slide" style="height: 150px; whith:200px">
                                        <div class="panel uc-transition-toggle vstack text-center overflow-hidden rounded border border-white border-opacity-10">
                                            <figure class="featured-image m-0 ratio ratio-3x4 rounded-0 overflow-hidden">
                                                @if ($gallery->type == "image")
                                                    <img src="{{asset('imagenes/posts/post_'.$gallery->post_id."/".$gallery->image)}}" data-src="{{asset('imagenes/posts/post_'.$gallery->post_id."/".$gallery->image)}}" alt="Tech" data-uc-img="loading: lazy">
                                                @else
                                                    @php
                                                        $videoUrl = $gallery->image; // Esto vendría de la base de datos
                                                        $videoId = str_replace("https://youtu.be/", "", $videoUrl); 
                                                    @endphp
                                                    <iframe width="100%" height="400" 
                                                        src="https://www.youtube.com/embed/{{$videoId}}"
                                                        frameborder="0" 
                                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                                        allowfullscreen>
                                                    </iframe>
                                                @endif
                                                <a href="{{route('home.post',$gallery->post_id)}}" class="position-cover" data-caption="Tech"></a>
                                            </figure>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div> --}}

    <!-- Section end -->
    {{-- toda la galeria  --}}

    <!-- Section start BANNER  -->
    <div class="section panel overflow-hidden">
        <br><br><br>
            <div class="section-outer panel">
                <div class="container max-w-xl">
                    <div class="section-inner">
                        <a class="text-none" href="https://themeforest.net/user/reacthemes/portfolio" target="_blank" rel="nofollow">
                            <img class="d-none md:d-block" src="{{asset('assets/images/common/ad-slot.jpg')}}" alt="Ad slot">
                            <img class="d-block md:d-none" src="{{asset('assets/images/common/ad-slot-mobile.jpg')}}" alt="Ad slot">
                        </a>
                    </div>
                </div>
            </div>
        <br><br><br>
    </div>

    <!-- Section start GALERIA -->
    <div class="section panel overflow-hidden swiper-parent uc-dark">
        <div class="section-outer panel py-5 lg:py-8 bg-gray-25 dark:bg-gray-800 dark:text-white">
            <div class="container max-w-xl">
                <div class="section-inner panel vstack gap-4">
                    <div class="section-header panel">
                        <h2 class="h5 lg:h4 fw-medium m-0 text-inherit hstack">
                            <a class="text-none dark:text-white hover:text-primary duration-150" href="#">Galería</a>
                            <i class="icon-2 lg:icon-3 unicon-chevron-right opacity-40"></i>
                        </h2>
                    </div>
                    <div class="section-content">
                        <div class="swiper" data-uc-swiper="items: 2; gap: 16; autoplay: 2500; dots: .dot-nav; next: .nav-next; prev: .nav-prev; disable-class: opacity-40;" data-uc-swiper-s="items: 3;" data-uc-swiper-m="gap: 24;" data-uc-swiper-l="items: 3; gap: 32;">
                            <div class="swiper-wrapper">
                                @foreach ($galleries as $gallery)
                                    <div class="swiper-slide">
                                        <div>
                                            <article class="post type-post panel vstack gap-1 lg:gap-2">
                                                <div class="post-media panel overflow-hidden">
                                                    <div class="featured-video bg-gray-700 ratio ratio-16x9">
                                                        @if ($gallery->type == "image")
                                                            <figure class="featured-image m-0 ratio ratio-3x4 rounded-0 overflow-hidden">
                                                                    <img src="{{asset('imagenes/posts/post_'.$gallery->post_id."/".$gallery->image)}}" data-src="{{asset('imagenes/posts/post_'.$gallery->post_id."/".$gallery->image)}}" alt="Tech" data-uc-img="loading: lazy">
                                                                <a href="{{route('home.post',$gallery->post->slug)}}" class="position-cover" data-caption="Tech"></a>
                                                            </figure>
                                                        @else
                                                            @php
                                                                $videoUrl = $gallery->image; // Esto vendría de la base de datos
                                                                $videoId = str_replace("https://youtu.be/", "", $videoUrl); 
                                                            @endphp
                                                            <iframe width="100%" height="400" 
                                                                src="https://www.youtube.com/embed/{{$videoId}}"
                                                                frameborder="0" 
                                                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                                                allowfullscreen>
                                                            </iframe>
                                                        @endif
                                                    </div>
                                                    <div class="has-video-overlay position-absolute top-0 end-0 w-150px h-150px bg-gradient-45 from-transparent via-transparent to-black opacity-50"></div>
                                                    <span class="cstack has-video-icon position-absolute top-0 end-0 fs-6 w-40px h-40px text-white">
                                                        <i class="icon-narrow unicon-play-filled-alt"></i>
                                                    </span>
                                                    <a href="{{route('home.post',$gallery->post->slug)}}" class="position-cover"></a>
                                                </div>
                                                <div class="post-header panel vstack gap-1">
                                                    <div class="post-meta panel hstack justify-start gap-1 fs-7 ft-tertiary fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                        <div>
                                                            <div class="post-category hstack gap-narrow fw-semibold">
                                                                <a class="fw-medium text-none text-primary dark:text-primary-400" href="blog-category.html">{{$gallery->post->category->name}}</a>
                                                            </div>
                                                        </div>
                                                        <div class="sep d-none md:d-block">|</div>
                                                        <div class="d-none md:d-block">
                                                            <div class="post-date hstack gap-narrow">
                                                                <span>{{ \Carbon\Carbon::parse($gallery->post->updated_at)->diffForHumans() }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <h3 class="post-title h6 lg:h5 m-0 text-truncate-2 mb-1">
                                                        <a class="text-none hover:text-primary duration-150" href="{{route('home.post',$gallery->post->slug)}}">{{$gallery->post->titulo_principal}}</a>
                                                    </h3>
                                                </div>
                                            </article>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div class="hstack gap-1 mt-4">
                                <div class="swiper-nav nav-prev btn btn-alt-primary bg-transparent dark:text-white rounded-0 p-0 border w-32px lg:w-40px h-32px lg:h-40px shadow-sm">
                                    <i class="icon-1 unicon-chevron-left"></i>
                                </div>
                                <div class="swiper-nav nav-next btn btn-alt-primary bg-transparent dark:text-white rounded-0 p-0 border w-32px lg:w-40px h-32px lg:h-40px shadow-sm">
                                    <i class="icon-1 unicon-chevron-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    {{-- <!-- Section start --> categoria randon  --}}
    <div class="section panel overflow-hidden">
        <div class="section-outer panel py-5 lg:py-8">
            <div class="container max-w-xl">
                <div class="section-inner">
                    <div class="block-layout grid-layout vstack gap-3 lg:gap-4 panel overflow-hidden">
                        <div class="block-header panel">
                            <h2 class="h5 lg:h4 fw-medium m-0 text-inherit hstack">
                                <a class="text-none dark:text-white hover:text-primary duration-150" href="{{route('home.category',$category_random->id)}}">{{$category_random->name}}</a>
                                <i class="icon-2 lg:icon-3 unicon-chevron-right opacity-40"></i>
                            </h2>
                        </div>
                        <div class="block-content">
                            <div class="panel row child-cols-12 md:child-cols gy-4 md:gx-3 xl:gx-4">
                                <div class="col-12 md:col-6 lg:col-7">
                                    <div class="h-100">
                                        <article class="post type-post panel uc-transition-toggle vstack gap-2 lg:gap-3 h-100 overflow-hidden uc-dark">
                                            <div class="post-media panel overflow-hidden h-100">
                                                <div class="featured-image bg-gray-25 dark:bg-gray-800 h-100 d-none md:d-block">
                                                    <canvas class="h-100 w-100"></canvas>
                                                    <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="{{ asset('imagenes/categories/category_'.$category_random->id."/".$category_random->image) }}" data-src="{{ asset('imagenes/categories/category_'.$category_random->id."/".$category_random->image) }}" alt="{{$category_random->name}}" data-uc-img="loading: lazy">
                                                </div>
                                                <div class="featured-image bg-gray-25 dark:bg-gray-800 ratio ratio-1x1 d-block md:d-none">
                                                    <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="{{ asset('imagenes/categories/category_'.$category_random->id."/".$category_random->image) }}" data-src="{{ asset('imagenes/categories/category_'.$category_random->id."/".$category_random->image) }}" alt="The Future of Sustainable Living: Driving Eco-Friendly Lifestyles" data-uc-img="loading: lazy">
                                                </div>
                                            </div>
                                            <div class="position-cover bg-gradient-to-t from-black to-transparent opacity-90"></div>
                                            <div class="post-header panel vstack justify-end items-start gap-1 sm:gap-2 p-2 sm:p-4 position-cover text-white">
                                                <div class="post-meta panel hstack justify-start gap-1 fs-7 ft-tertiary fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                    <div>
                                                        <div class="post-category hstack gap-narrow fw-semibold">
                                                            <a class="fw-medium text-none text-primary dark:text-primary-400" href="{{route('home.category',$category_random->id)}}">{{$category_random->name}}</a>
                                                        </div>
                                                    </div>
                                                    <div class="sep d-none md:d-block">|</div>
                                                    <div class="d-none md:d-block">
                                                        <div class="post-date hstack gap-narrow">
                                                            <span>{{count($category_random->posts)}} Post</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <h3 class="post-title h5 lg:h4 m-0 max-w-600px text-white text-truncate-2">
                                                    <a class="text-none text-white" href="{{route('home.category',$category_random->id)}}">{{$category_random->description}}</a>
                                                </h3>
                                            </div>
                                        </article>
                                    </div>
                                </div>
                                <div>
                                    <div class="row child-cols-12 g-4 sep-x">
                                        @foreach ($category_random->posts as $post)
                                            <div>
                                                <article class="post type-post panel uc-transition-toggle">
                                                    <div class="row child-cols g-2" data-uc-grid>
                                                        <div class="col-auto">
                                                            <div class="post-media panel overflow-hidden max-w-150px min-w-100px lg:min-w-150px">
                                                                <div class="featured-image bg-gray-25 dark:bg-gray-800 ratio ratio-16x9">
                                                                    <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="{{ asset('imagenes/posts/post_'.$post->id."/".$post->imagen_principal) }}" data-src="{{ asset('imagenes/posts/post_'.$post->id."/".$post->imagen_principal) }}" alt="{{$post->slug}}" data-uc-img="loading: lazy">
                                                                </div>
                                                                <a href="{{route('home.post',$post->slug)}}" class="position-cover"></a>
                                                            </div>
                                                        </div>
                                                        <div>
                                                            <div class="post-header panel vstack justify-between gap-1">
                                                                <div class="post-meta panel hstack justify-start gap-1 fs-7 ft-tertiary fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                                    <div>
                                                                        <div class="post-category hstack gap-narrow fw-semibold">
                                                                            <a class="fw-medium text-none text-primary dark:text-primary-400" href="{{route('home.category', $category_random->id)}}">{{$category_random->name}}</a>
                                                                        </div>
                                                                    </div>
                                                                    <div class="sep d-none md:d-block">|</div>
                                                                    <div class="d-none md:d-block">
                                                                        <div class="post-date hstack gap-narrow">
                                                                            <span>{{ \Carbon\Carbon::parse($post->updated_at)->diffForHumans() }}</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <h3 class="post-title h6 lg:h5 m-0 text-truncate-2">
                                                                    <a class="text-none hover:text-primary duration-150" href="{{route('home.post',$post->slug)}}">{{$post->titulo_principal}}</a>
                                                                </h3>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </article>
                                            </div>
                                        @endforeach
                                    </div>
                                    <a href="{{route('home.category', $category_random->id)}}" class="animate-btn gap-0 btn btn-sm btn-alt-primary bg-transparent dark:text-white border w-100 mt-4">
                                        <span>Ver todo</span>
                                        <i class="icon icon-1 unicon-chevron-right"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Section end -->

      <!-- Section start -->
    <div class="section panel overflow-hidden">
        <div class="section-outer panel">
            <div class="container max-w-xl">
                <div class="section-inner">
                    <a class="text-none" href="https://themeforest.net/user/reacthemes/portfolio" target="_blank" rel="nofollow">
                        <img class="d-none md:d-block" src="{{asset('assets/images/common/ad-slot-2.jpg')}}" alt="Ad slot">
                        <img class="d-block md:d-none" src="{{asset('assets/images/common/ad-slot-mobile-2.jpg')}}" alt="Ad slot">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- Section start -->

    <!-- Section start PRODUCTOS-->
    <div id="latest-news" class="latest-news section panel overflow-hidden">
        <div class="section-outer panel py-5 lg:py-8">
            <div class="container max-w-xl">
                <div class="section-inner panel vstack gap-4">
                    <div class="section-header panel vstack items-center justify-center text-center gap-1">
                        <h2 class="h5 lg:h4 fw-medium m-0 text-inherit hstack">
                            <span>Productos</span>
                        </h2>
                    </div>
                    <div class="section-content">
                        <div class="row child-cols-12 sm:child-cols-6 md:child-cols-4 lg:child-cols-3 g-2 gy-4 md:g-3 md:gy-5 xl:g-4 xl:gy-6">
                            @foreach ($products as $product)
                            <div>
                                <article class="post type-post panel uc-transition-toggle vstack gap-1 lg:gap-2">
                                    <div class="post-media panel overflow-hidden">
                                        <div class="featured-image bg-gray-25 dark:bg-gray-800 ratio ratio-16x9">
                                            <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="{{asset('imagenes/products/product_'.$product->id."/".$product->image)}}" data-src="{{asset('imagenes/products/product_'.$product->id."/".$product->image)}}" alt="{{$product->name}}" data-uc-img="loading: lazy">
                                        </div>
                                        <a href="{{route('home.product',$product->id)}}" class="position-cover"></a>
                                    </div>
                                    <div class="post-header panel vstack gap-1">
                                        <div class="post-meta panel hstack justify-start gap-1 fs-7 ft-tertiary fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                            <div>
                                                <div class="post-category hstack gap-narrow fw-semibold">
                                                    <a class="fw-medium text-none text-primary dark:text-primary-400" href="{{$product->link}}">Comprar</a>
                                                </div>
                                            </div>
                                            <div class="sep d-none md:d-block">|</div>
                                            <div class="d-none md:d-block">
                                                <div class="post-date hstack gap-narrow">
                                                    <span>PROMO</span>
                                                </div>
                                            </div>
                                        </div>
                                        <h3 class="post-title h6 lg:h5 m-0 text-truncate-2 mb-1">
                                            <a class="text-none hover:text-primary duration-150" href="{{route('home.product',$product->id)}}">{{$product->name}}</a>
                                        </h3>
                                    </div>
                                </article>
                            </div>     
                            @endforeach
                        </div>
                    </div>
                    <div class="section-footer cstack lg:mt-4">
                        <a href="{{route('home.products')}}" class="animate-btn gap-0 btn btn-sm btn-alt-primary bg-transparent dark:text-white border w-100 md:w-auto">
                            <span>Ver todos los productos</span>
                            <i class="icon icon-1 unicon-chevron-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Section end -->
</div>
@endsection