{{template "head" .}}
{{template "site_header" .}}
<main>
  <section class="relative min-h-[92vh] overflow-hidden bg-neutral-950">
    <img src="{{.Content.HeroImage}}" alt="" class="absolute inset-0 h-full w-full object-cover opacity-90">
    <div class="absolute inset-0 bg-gradient-to-b from-black/35 via-black/5 to-black/55"></div>
    <div class="relative mx-auto flex min-h-[92vh] max-w-7xl flex-col justify-end px-5 pb-16 text-white md:px-8 md:pb-20">
      <p class="mb-4 max-w-xl text-sm uppercase tracking-[0.22em] text-white/75">{{.Content.HeroSubtitle}}</p>
      <h1 class="max-w-5xl text-5xl font-semibold leading-[0.95] md:text-8xl">{{.Content.HeroTitle}}</h1>
    </div>
  </section>

  <section class="mx-auto grid max-w-7xl gap-8 px-5 py-20 md:grid-cols-[0.8fr_1.2fr] md:px-8 md:py-28">
    <h2 class="text-3xl font-semibold md:text-5xl">{{.Content.IntroTitle}}</h2>
    <p class="max-w-2xl text-xl leading-relaxed text-neutral-600">{{.Content.IntroText}}</p>
  </section>

  <section class="px-5 pb-24 md:px-8" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">
    <div class="mx-auto mb-8 flex max-w-7xl items-end justify-between">
      <h2 class="text-2xl font-semibold md:text-4xl">Featured Projects</h2>
      <a href="/projects" class="text-sm uppercase tracking-[0.18em] text-neutral-500 hover:text-neutral-950">All work</a>
    </div>
    <div class="mx-auto grid max-w-7xl gap-4 sm:grid-cols-2 lg:grid-cols-3">
      {{range .Projects}}
      <a href="/projects/{{.Slug}}" class="group block">
        <div class="aspect-square overflow-hidden bg-neutral-200">
          <img src="{{.CoverImage}}" alt="{{.Title}}" class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
        </div>
        <div class="mt-3 flex items-start justify-between gap-4">
          <div>
            <h3 class="text-lg font-medium">{{.Title}}</h3>
            <p class="text-sm text-neutral-500">{{.Location}}</p>
          </div>
          <p class="text-sm text-neutral-500">{{.Year}}</p>
        </div>
      </a>
      {{end}}
    </div>
  </section>
</main>
{{template "footer" .}}
<div id="overlay-root"></div>
</body>
</html>