@extends('layouts.app')
@section('css')
@endsection
@section('content')
<!-- Navbar -->
  <!-- Navbar -->
  
  <?php $asset = asset('assets/Background2.png'); ?>
  <section 
    class="relative h-[90vh] md:h-screen bg-cover bg-center flex items-center bg-[#1E4D8B] md:bg-white md:bg-[url({{ $asset }})]"
    style="">
    
    <div class="container relative text-right z-10 px-6">
      <h2 class="text-3xl md:text-4xl active font-bold text-white mb-4">Pusat Data & Informasi</h2>
      <h3 class="text-3xl md:text-4xl font-bold text-white mb-6">Semua Informasi dalam Satu Tempat</h3>
      <p class="text-white float-right md:w-130">
        Jelajahi kumpulan 60 resource data kami. Berikut beberapa pilihan yang kami tampilkan untuk mempermudah akses Anda
      </p>
    </div>
  </section>
  
  <section class="container relative pt-0 pb-10 px-5 flex flex-col gap-5">
    <div class="relative flex justify-between items-center content-center mb-10">
      <div>
        <h1 class="font-bold poppins-bold text-xl">Resource Data</h1>
      </div>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
        @foreach($template as $dataTemplate)
      <div class="bg-white text-center rounded-[20px] shadow-lg p-5 py-10 gap-3 flex">
        <div class="flex flex-col gap-3 mx-auto items-center">
          <img src="{{ asset('logodki.png') }}" alt="" width="50" class="">
          <h1 class="font-bold">{{ $dataTemplate->name }}</h1>
        </div>
      </div>
      @endforeach

    </div>
    <div class="mt-15 text-center">
        {{ $template->render() }}
        {{-- <a href="" class="p-3 bg-[#FFAD5C] text-white rounded-full">Lihat Lainnya</a> --}}
    </div>
  </section>
  
@endsection