<section style="background-image: url({{ asset('web/images/banner-1.jpg')}});background-repeat: no-repeat;background-size: cover;">
      <div class="container-lg">
        <div class="row">
          <div class="col-lg-6 pt-5 mt-5">
            <h2 class="display-1 ls-1"><span class="fw-bold" style="color: #00b4d8">{{ $slider->title }} </span></h2>
            <h2 class="displasy-1 ls-1" style="color: #ee9b00">{{ $slider->subtitle }}</h2>
            <p class="fs-4" style="color: #caf0f8; line-height: 1.2">Nikmati hasil tangkapan nelayan lokal, segar setiap hari sampai ke rumah Anda.</p>
            <div class="d-flex gap-3">
              <a href="{{ route('product') }}" class="btn btn-primary text-uppercase fs-6 rounded-pill px-4 py-3 mt-3">Mulai Belanja</a>
            </div>
            <div class="row my-5">
              
            </div>
          </div>
        </div>
        
        <div class="row row-cols-1 row-cols-sm-3 row-cols-lg-3 g-0 justify-content-center">
          <div class="col">
            <div class="card border-0 rounded-0 p-4 text-light" style="background-color: #1E88E5;">
              <div class="row">
                <div class="col-md-3 text-center">
                  <svg width="60" height="60"><use xlink:href="#fresh"></use></svg>
                </div>
                <div class="col-md-9">
                  <div class="card-body p-0">
                    <h5 class="text-light">Segar dari Laut</h5>
                    <p class="card-text">Ditangkap langsung oleh nelayan Desa Jaring Halus setiap hari.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card border-0 bg-secondary rounded-0 p-4 text-light">
              <div class="row">
                <div class="col-md-3 text-center">
                  <svg width="60" height="60"><use xlink:href="#organic"></use></svg>
                </div>
                <div class="col-md-9">
                  <div class="card-body p-0">
                    <h5 class="text-light">100% Alami & Segar</h5>
                    <p class="card-text">Tanpa bahan kimia, langsung dari laut ke meja makan Anda.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card border-0 bg-danger rounded-0 p-4 text-light">
              <div class="row">
                <div class="col-md-3 text-center">
                  <svg width="60" height="60"><use xlink:href="#delivery"></use></svg>
                </div>
                <div class="col-md-9">
                  <div class="card-body p-0">
                    <h5 class="text-light">Siap Antar ke Rumah</h5>
                    <p class="card-text">Pengiriman cepat dan aman dengan kualitas tetap terjaga.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      
      </div>
    </section> 