{{ define "header" }}

{{- partial "header-nav" . -}}

{{- partial "hero" . -}}


<!-- Nav Bar -->
<div
  class="w-screen pt-4 md:pt-0 min-h-[6rem] h-auto md:h-24 bg-accent flex flex-wrap items-center relative md:justify-between bg-[#EAF3FF] mx-auto">
  <div
    class="blog-nav-container flex flex-wrap justify-center md:justify-between md:inline-flex items-center md:w-[1280px] mx-auto px-12 relative w-full">
    <div class="flex flex-wrap inline-flex md:justify-start md:w-auto gap-8 font-body mb-4 md:mb-0 w-full">
      <a class="text-brand-blue" href="/categories/">
        All Categories
      </a>
      {{ range .Site.Taxonomies.categories }}
      <a class="text-brand-blue" href="{{ .Page.Permalink }}">{{ .Page.Title }}</a>
      {{ end }}
    </div>

    <blog-search class="w-full md:w-[20rem]"></blog-search>
  </div>
</div>
{{ end }}

{{ define "main" }}
<h3 class="text-left mt-8 mb-6 px-12 max-w-[1280px] mx-auto">
  Recent Articles
</h3>

{{ range first 1 .Page.FirstSection.Pages }}
<div class="max-w-[1280px] px-12 grid selection:grid-cols-1 md:grid-cols-3 gap-2 justify-center pb-10 mx-auto">
  {{ range after 0 .FirstSection.Pages }}
  {{ partial "card" . }}
  {{ end }}
</div>


{{ end }}



{{ end }}