@extends('app')

@section('content')
  <!-- slider / hero section -->
  <section class="slider_section">
    <div id="customCarousel1" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="container">
            <div class="row">
              <div class="col-md-6">
                <div class="detail-box">
                  <h1>
                    Selamat Datang di <br>
                    <span>NutriPosy</span>
                  </h1>
                  <p>
                    Platform digital untuk memantau pertumbuhan dan status gizi anak secara mudah dan akurat di Posyandu.
                  </p>
                  <a href="{{ route('grafik.pertumbuhan') }}">Lihat Grafik Pertumbuhan</a>
                </div>
              </div>
              <div class="col-md-6">
                <div class="img-box">
                  <img src="{{ asset('images/nutriposybanner.png') }}" alt="Ilustrasi anak sehat">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- menu utama section -->
  <section class="book_section layout_padding">
    <div class="container">
      <h4>Menu <span>Utama</span></h4>
      <div class="row">
        <div class="col-lg-6 col-md-6 mb-4">
          <div class="card text-center shadow p-4">
            <img src="{{ asset('images/daftar_balita.png') }}" class="card-img-top mx-auto" alt="Pendaftaran Balita" style="width: 100px; height: 100px; object-fit: cover; margin-top: 20px;">
            <div class="card-body">
              <h5 class="card-title">Pendaftaran Balita</h5>
              <p class="card-text">Daftarkan data balita untuk pemantauan gizi dan kesehatan.</p>
              <a href="{{ route('balita.create') }}" class="btn-custom">Masuk</a>

            </div>
          </div>
        </div>
        <div class="col-lg-6 col-md-6 mb-4">
          <div class="card text-center shadow p-4">
            <img src="{{ asset('images/data_balita.png') }}" class="card-img-top mx-auto" alt="Data Balita" style="width: 100px; height: 100px; object-fit: cover; margin-top: 20px;">
            <div class="card-body">
              <h5 class="card-title">Data Balita</h5>
              <p class="card-text">Lihat dan kelola data balita yang sudah terdaftar.</p>
              <a href="{{ route('balita.index') }}" class="btn-custom">Masuk</a>
            </div>
          </div>
        </div>        
      </div>
    </div>
  </section>
@endsection