{% extends 'base.html' %}

{% block title %}Halaman Beranda{% endblock %}
{% block meta %}
  <meta name="description" content="Artifilaw adalah platform untuk mencari peraturan dan kebijakan hukum secara mudah dan cepat. Temukan peraturan yang Anda butuhkan sekarang juga!">
  <meta name="keywords" content="regulasi, hukum, peraturan, kebijakan, pencarian hukum, Artifilaw, penelitian hukum, hukum digital">
  <meta name="author" content="Artifilaw">
  <meta property="og:title" content="Artifilaw - Pencarian Regulasi Hukum dengan Mudah">
  <meta property="og:description" content="Temukan peraturan hukum terbaru dengan mudah menggunakan Artifilaw. Jelajahi berbagai regulasi, kebijakan, dan informasi hukum yang akurat dan up-to-date.">
  <meta property="og:image" content="{{ site_url }}/path/to/your/image.jpg">
  <meta property="og:url" content="{{ request.build_absolute_uri }}">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Artifilaw - Pencarian Regulasi Hukum dengan Mudah">
  <meta name="twitter:description" content="Temukan peraturan hukum terbaru dengan mudah menggunakan Artifilaw. Jelajahi berbagai regulasi, kebijakan, dan informasi hukum yang akurat dan up-to-date.">
{% endblock %}
{% block content %}
<main class="relative pt-20">


    
    
    <!-- Hero -->
<div class="relative">
  
  <div class="max-w-[85rem] mx-auto mt-36 px-4 sm:px-6 lg:px-8 py-10 sm:py-24">
    <div class="text-center">
      <h1 class="text-4xl sm:text-6xl font-bold text-neutral-950 dark:text-neutral-200">
        Cari Regulasi dengan Mudah dan Cepat
      </h1>

      <p class="mt-3 text-gray-600 dark:text-neutral-400">
        Temukan peraturan dan kebijakan yang Anda butuhkan dengan Artifilaw. Masukkan kata kunci di bawah untuk memulai pencarian Anda! 
      </p>

      <div class="mt-7 sm:mt-12 mx-auto max-w-xl relative">
        <!-- Form -->
        <form class="relative z-10 flex gap-x-3 p-3 bg-white border rounded-lg shadow-lg shadow-gray-100 dark:bg-neutral-900 dark:border-neutral-700 dark:shadow-gray-900/20 w-75 mx-auto" action="{% url 'search_view' %}" method="get">
          <div class="w-full">
              <label for="search-input" class="block text-sm text-gray-700 font-medium dark:text-white">
                  <span class="sr-only">Cari Peraturan</span>
              </label>
              <input type="text" name="q" id="search-input" class="py-2.5 px-4 block w-full border-transparent rounded-lg focus:outline-none focus:ring-2  focus:border-neutral-900 focus:ring-neutral-900 dark:bg-neutral-900 dark:border-transparent dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600" placeholder="Cari Peraturan dengan kata kunci...">
          </div>
          <div>
              <button type="submit" class="inline-flex justify-center items-center gap-x-2 text-sm font-bold rounded-lg border-transparent bg-gradient-to-br from-violet-600 to-indigo-500 hover:from-violet-700 hover:to-indigo-600 hover:to-90%  text-white focus:outline-none disabled:opacity-50 disabled:pointer-events-none px-4 py-2">
                  <svg class="shrink-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <circle cx="11" cy="11" r="8"/>
                      <path d="m21 21-4.3-4.3"/>
                  </svg>
                  Cari
              </button>
          </div>
      </form>
      
        <!-- End Form -->
        
        <!-- SVG Element -->
        <div class="hidden md:block absolute top-0 end-0 -translate-y-12 translate-x-20">
          <svg class="w-16 h-auto  text-white" width="121" height="135" viewBox="0 0 121 135" fill="none">
            <path d="M5 16.4754C11.7688 27.4499 21.2452 57.3224 5 89.0164" stroke="currentColor" stroke-width="10" stroke-linecap="round"/>
            <path d="M33.6761 112.104C44.6984 98.1239 74.2618 57.6776 83.4821 5" stroke="currentColor" stroke-width="10" stroke-linecap="round"/>
            <path d="M50.5525 130C68.2064 127.495 110.731 117.541 116 78.0874" stroke="currentColor" stroke-width="10" stroke-linecap="round"/>
          </svg>
        </div>
        <!-- End SVG Element -->

        <!-- SVG Element -->
        <div class="hidden md:block absolute bottom-0 start-0 translate-y-10 -translate-x-32">
          <svg class="w-40 h-auto text-white" width="347" height="188" viewBox="0 0 347 188" fill="none">
            <path d="M4 82.4591C54.7956 92.8751 30.9771 162.782 68.2065 181.385C112.642 203.59 127.943 78.57 122.161 25.5053C120.504 2.2376 93.4028 -8.11128 89.7468 25.5053C85.8633 61.2125 130.186 199.678 180.982 146.248L214.898 107.02C224.322 95.4118 242.9 79.2851 258.6 107.02C274.299 134.754 299.315 125.589 309.861 117.539L343 93.4426" stroke="currentColor" stroke-width="7" stroke-linecap="round"/>
          </svg>
        </div>
        <!-- End SVG Element -->
      </div>
      
      </div>
    </div>
  </div>
</div>
<!-- End Hero -->
<!-- Icon Blocks -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
  <!-- Grid -->
  <div class="grid md:grid-cols-2 gap-12">
    <div class="lg:w-3/4">
      <h2 class="text-3xl text-gray-800 font-bold lg:text-4xl dark:text-white">
        Kami menyediakan alat untuk menemukan regulasi.
      </h2>
      <p class="mt-3 text-gray-800 dark:text-neutral-400">
        Rangkaian fitur Artifilaw dirancang untuk memenuhi setiap kebutuhan regulasi Anda dan membantu Anda berkembang dalam lingkungan bisnis yang dinamis. Jelajahi teknologi kami untuk memulai perjalanan Anda menuju efisiensi, inovasi, dan dukungan tanpa banding. Wawasan Anda adalah prioritas kami.
      </p>
      <p class="mt-5">
        <a class="inline-flex items-center gap-x-1 text-sm text-blue-600 decoration-2 hover:underline focus:outline-none focus:underline font-medium dark:text-blue-500" href="#">
          Contact sales to learn more
          <svg class="shrink-0 size-4 transition ease-in-out group-hover:translate-x-1 group-focus:translate-x-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
        </a>
      </p>
    </div>
    <!-- End Col -->

    <div class="space-y-6 lg:space-y-10">
      <!-- Icon Block -->
      <div class="flex gap-x-5 sm:gap-x-8">
        <!-- Icon -->
        <span class="shrink-0 inline-flex justify-center items-center size-[46px] rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm mx-auto dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
          <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
        </span>
        <div class="grow">
          <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-neutral-200">
            Penelitian Hukum
          </h3>
          <p class="mt-1 text-gray-600 dark:text-neutral-400">
            Manfaatkan teknologi kami dengan alat yang disediakan untuk keperluan penelitian hukum yang didukung oleh teknologi mutakhir.
          </p>
        </div>
      </div>
      <!-- End Icon Block -->

      <!-- Icon Block -->
      <div class="flex gap-x-5 sm:gap-x-8">
        <!-- Icon -->
        <span class="shrink-0 inline-flex justify-center items-center size-[46px] rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm mx-auto dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
          <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z"/><path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"/></svg>
        </span>
        <div class="grow">
          <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-neutral-200">
            Fitur Kolaborasi
          </h3>
          <p class="mt-1 text-gray-600 dark:text-neutral-400">
            ArtifiLaw memungkinkan riset bersama, penandaan regulasi, dan berbagi wawasan secara real-time, memastikan semua anggota tim selalu terupdate.
          </p>
        </div>
      </div>
      <!-- End Icon Block -->

      <!-- Icon Block -->
      <div class="flex gap-x-5 sm:gap-x-8">
        <!-- Icon -->
        <span class="shrink-0 inline-flex justify-center items-center size-[46px] rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm mx-auto dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
          <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"/></svg>
        </span>
        <div class="grow">
          <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-neutral-200">
            Update Harian
          </h3>
          <p class="mt-1 text-gray-600 dark:text-neutral-400">
            Kami memberikan pembaruan harian kepada pengguna yang mencakup data terbaru tentang perubahan regulasi
          </p>
        </div>
      </div>
      <!-- End Icon Block -->
         <!-- Icon Block -->
      <div class="flex gap-x-5 sm:gap-x-8">
        <!-- Icon -->
        <span class="shrink-0 inline-flex justify-center items-center size-[46px] rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm mx-auto dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
          <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"/></svg>
        </span>
        <div class="grow">
          <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-neutral-200">
            Layanan Dukungan
          </h3>
          <p class="mt-1 text-gray-600 dark:text-neutral-400">
            Kami memberikan layanan dukungan untuk seluruh pengguna, kapanpun ketika anda membutuhkannya
          </p>
        </div>
      </div>
      <!-- End Icon Block -->
    </div>
    <!-- End Col -->
  </div>
  <!-- End Grid -->
</div>
<!-- End Icon Blocks --> 
<div class="bg-white py-24 sm:py-32">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto max-w-2xl lg:mx-0">
      <h2 class="text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Hukum di Ujung Jari Anda</h2>
      <p class="mt-2 text-lg/8 text-gray-600">Pelajari cara menyederhanakan pencarian regulasi dengan alat cerdas kami</p>
    </div>
    <div class="mx-auto mt-10 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 border-t border-gray-200 pt-10 sm:mt-16 sm:pt-16 lg:mx-0 lg:max-w-none lg:grid-cols-3">
      {% for item in popular_items %}
<article class="flex max-w-xl flex-col items-start justify-between ">
    <div class="flex items-center gap-x-4 text-xs">
        <time datetime="{{ item.uu.created_at|date:'Y-m-d' }}" class="text-gray-500">
            {{ item.uu.created_at|date:'M d, Y' }}
        </time>
        <a href="#" class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100">
            Terupdate
        </a>
    </div>
    <div class="group relative">
        <h3 class="mt-3 text-lg/6 font-semibold text-gray-900 group-hover:text-violet-600">
            <a href="{% url 'my_model_detail' slug=item.uu.slug %}">
                <span class="absolute inset-0"></span>
                {{ item.uu }}
            </a>
        </h3>
        <p class="mt-5 line-clamp-3 text-sm/6 text-gray-600">
            {{ item.uu.data.Description|default:"Deskripsi tidak tersedia." }}
        </p>
    </div>
    <div class="relative mt-8 flex items-center gap-x-4">
        <div class="text-sm/6">
            <p class="text-gray-600">Viewers</p>  
            <p class="font-semibold text-gray-900">
                <a href="#">
                    <span class="absolute inset-0"></span>
                    {{ item.view_count }}
                </a>
            </p>
        </div>
    </div>
</article>
{% endfor %}

      {% for item in popular_items %}
      <article class="flex max-w-xl flex-col items-start justify-between">
          <div class="flex items-center gap-x-4 text-xs">
              <time datetime="{{ item.uu.year.year|default:'' }}" class="text-gray-500">
                  {{ item.uu.year.year|default:'Unknown Year' }}
              </time>
              <a href="#" class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100">
                  Sering Dilihat
              </a>
          </div>
          <div class="group relative">
              <h3 class="mt-3 text-lg/6 font-semibold text-gray-900 group-hover:text-violet-600">
                <a href="{% url 'my_model_detail' slug=item.uu.slug %}">
                  <span class="absolute inset-0"></span>
                  {{ item.uu }}
              </a>
              
              </h3>
              <p class="mt-5 line-clamp-3 text-sm/6 text-gray-600">
                {{ item.uu.data.Description|default:'No description available.' }}
            </p>
          </div>
          <div class="relative mt-8 flex items-center gap-x-4">
              <div class="text-sm/6">
                  <p class="text-gray-600">Viewers</p>
                  <p class="font-semibold text-gray-900">
                      <a href="#">
                          <span class="absolute inset-0"></span>
                          {{ item.view_count }} Views
                      </a>
                  </p>
              </div>
          </div>
      </article>
      {% endfor %}
     {% if recent_laws %}
    <article class="flex max-w-xl flex-col items-start justify-between">
        <div class="flex items-center gap-x-4 text-xs">
            <time datetime="{{ recent_laws.year.year }}" class="text-gray-500">
                Tahun {{ recent_laws.year.year }}
            </time>
            <a href="#" class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100">
                Untuk anda
            </a>
        </div>
        <div class="group relative">
            <h3 class="mt-3 text-lg/6 font-semibold text-gray-900 group-hover:text-violet-600">
                <a href="{% url 'my_model_detail' slug=recent_laws.slug %}">
                    <span class="absolute inset-0"></span>
                    UU No {{ recent_laws.data.Nomor }} Tahun {{ recent_laws.year.year }} Tentang {{ recent_laws.data.Tentang }}
                </a>
            </h3>
            <p class="mt-5 line-clamp-3 text-sm/6 text-gray-600">
                {{ recent_laws.data.Description|default:"Deskripsi tidak tersedia" }}
            </p>
        </div>
        <div class="relative mt-8 flex items-center gap-x-4">
            <div class="text-sm/6">
                <p class="text-gray-600">Viewers</p>
                <p class="font-semibold text-gray-900">
                    <a href="#">
                        <span class="absolute inset-0"></span>
                        {{ recent_laws.popularity.view_count|default:"0" }}
                    </a>
                </p>
            </div>
        </div>
    </article>
{% else %}
    <p>No recent laws available.</p>
{% endif %}

      <!-- More posts... -->
    </div>
  </div>
</div>
</main>

{% endblock %}