@extends('frontend::layouts.master')


@section('content')
<main class="pt-[80px] sm:pt-[88px] bg-gradient-to-b from-white to-kru-light-strong min-h-screen">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
    {{-- Page Header --}}
    <div class="flex flex-col md:flex-row md:items-end md:justify-between mb-12">
      <div>
        <div class="articles-page-title inline-flex items-center gap-2 bg-kru-green/10 text-kru-green px-4 py-2 rounded-full text-sm font-medium mb-4">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/></svg>
          ข่าวสาร
        </div>
        <h1 class="articles-page-title text-4xl sm:text-5xl lg:text-6xl font-bold text-kru-dark">
          ข่าวสาร<span class="text-kru-green">น่ารู้</span>
        </h1>
      </div>
    </div>
    @livewire('frontend::sections.news-card')
  </div>
</main>
@endsection