  <section id="latest-blog" class="pb-4">
      <div class="container-lg">
        <div class="row">
          <div class="section-header d-flex align-items-center justify-content-between my-4">
            <h2 class="section-title">Artikel Terbaru</h2>
            <a href="{{ route('article') }}" class="btn btn-primary">Lihat Selengkapnya</a>
          </div>
        </div>
        <div class="row">
          @foreach ($article as $item)
          <div class="col-md-4">
            <article class="post-item card border-0 shadow-sm p-3">
              <div class="image-holder zoom-effect">
                <a href="#">
                   <img src="{{ asset('img_assets/article/'. $item->image) }}"alt="post" class="card-img-top">
                </a>
              </div>
              <div class="card-body">
                <div class="post-meta d-flex text-uppercase gap-3 my-2 align-items-center">
                  <div class="meta-date"><svg width="16" height="16"><use xlink:href="#calendar"></use></svg>📅 {{ date('d-m-Y', strtotime($item->created_at)) }}</div>
                  <div class="meta-categories"><svg width="16" height="16"><use xlink:href="#category"></use></svg>tips & tricks</div>
                </div>
                <div class="post-header">
                  <h3 class="post-title">
                    <a href="#" class="text-decoration-none">{{ Illuminate\Support\Str::limit($item->title, 20, '...') }}</a>
                  </h3>
                  <p>{{ Illuminate\Support\Str::limit($item->description, 20, '...') }}</p>
                </div>
              </div>
            </article>
          </div>
          @endforeach
        </div>
      </div>
    </section>