<!--Start Layout-->
{{#> default }}

<section x-data="blog()" class="w-full bg-muted-100 dark:bg-muted-900">
  <div class="w-full max-w-7xl mx-auto">
    <div class="w-full flex items-center overflow-hidden">
      <!--Content-->
      <div
        class="
          w-full
          h-full
          flex flex-col
          justify-between
          px-6
          pt-36
          lg:pt-36
          pb-16
        "
      >
        <!--Title-->
        <div class="w-full max-w-3xl mx-auto space-y-4 text-center">
          <!--Badge-->
          <span
            class="
              inline-block
              font-sans
              text-xs
              py-1.5
              px-3
              m-1
              rounded-lg
              bg-primary-100
              text-primary-500
              dark:bg-primary-500 dark:text-white
            "
          >
            Latest News
          </span>
          <h1
            class="
              font-heading font-extrabold
              text-5xl
              md:text-5xl
              text-muted-800
              dark:text-white
            "
          >
            The Blog.
          </h1>
          <p
            class="
              font-sans
              text-base
              md:text-lg
              text-muted-500
              dark:text-muted-400
            "
          >
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </p>
        </div>

        <!--Search-->
        {{> blog/blog-search}}

        <!--Blog loader-->
        {{> blog/blog-list-placeload}}

        <!--Blog content-->
        {{> blog/blog-list}}
      </div>
    </div>
  </div>
</section>

<!--End Layout-->
{{/default}}
