@extends('front.layouts.demo')
@section('local_styles')
    <link rel="stylesheet" href="/css/subarticle.css">
    <link rel="stylesheet" href="/css/blog.css">
@endsection
@section('content')

<div class="bd-example">
        <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
            
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="/img/v2/slides/polo-hero@2880.jpg" class="d-block w-100" alt="La Patrona">
                </div>    
            </div>

        </div>
    </div>

    <div class="container">
        <div class="row justify-content-center my-5">
            <div class="col-12">
                
                <!----
                <div class="hero">
                    <div class="container">
                        <div class="content-hero-blog">
                            <a href="blog/post/{{ $featuredPosts[0]->id }}" class="hero-blog-item1" style="background-image:url({{ $featuredPosts[0]->image }})">
                                <div class="background-gradient">
                                    <span class="bodoni wine">{{ trans('site.title_news') }}</span>
                                    <div class="text-news">
                                        <h2 class="awesome">The chef blog</h2>
                                        <h1 class="title-first-item bodoni">{{ $featuredPosts[0]->title }}</h1>
                                        <p>{{ $featuredPosts[0]->overview }}</p>
                                    </div>
                                </div>
                            </a>
                            <div class="hero-blog-item2">
                                <a href="blog/post/{{ $featuredPosts[1]->id }}" class="item2-news" style="background-image: url({{ $featuredPosts[1]->image }})" >
                                    <div class="background-gradient">
                                        <div class="text-news" >
                                            <h1 class="tittle-second-item awesome">{{ $featuredPosts[1]->title }}</h1>
                                            <p>{{ $featuredPosts[1]->overview }}</p>
                                        </div>
                                    </div>
                                </a>
                                <a href="blog/post/{{ $featuredPosts[2]->id }}" class="item2-news" style="background-image:url({{ $featuredPosts[2]->image }})">
                                    <div class="background-gradient">
                                        <div class="text-news" >
                                            <h1 class="tittle-second-item bodoni">{{ $featuredPosts[2]->title }}</h1>
                                            <p>{{ $featuredPosts[2]->overview }}</p>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>-->

                <div class="container ribbon__container">
                    <nav class="ribbon">
                        <div class="ribbon-item ribbon-item--nosotros">
                            <div class="ribbon-item__copy ribbon-item__copy--title">
                                <h1 class="ribbon-item__heading bodoni wine">{{ trans('site.title_news') }}</h1>
                            </div>
                        </div>
                    </nav>
                </div>

                <div class="container">
                    <div class="row">
                        <div class="text-center py-5">
                            <p class="w-75 mx-auto text-left gray mt-2">{{ trans('site.text_ini_1') }}</p>
                            <p class="w-75 mx-auto text-left gray">{{ trans('site.text_ini_2') }}</p>
                            <p class="w-75 mx-auto text-left gray">{{ trans('site.text_ini_3') }}</p>
                            <p class="w-75 mx-auto text-left gray">{{ trans('site.text_ini_4') }}</p>
                        </div>
                    </div>
                </div>

                <section class="section section--subarticle">
                    <div class="container">
                        <div class="container-article-blog">
                            @foreach ($posts as $post)
                                <a href="blog/post/{{ $post->id }}" class="article-blog-item">
                                    <div class="item item__img" style="background-image: url({{ $post->image }})">

                                    </div>
                                    <div class="item item__text">
                                        <div class="item-text-ribbon">
                                            <h1 class="bodoni">{{$post->title}}</h1>
                                            <p>{{$post->overview}}...</p>
                                        </div>
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    </div>
                </section>
                <!---->
            </div>
        </div>
    </div>

@endsection
@section('local_scripts')
    <script src="/js/subarticle.js" charset="utf-8"></script>
@endsection