{{template "head" .}}
{{template "site_header" .}}
<main class="mx-auto max-w-7xl px-5 pb-24 pt-32 md:px-8 md:pt-40">
  <section class="grid gap-10 md:grid-cols-[0.9fr_1.1fr] md:items-start">
    <div class="aspect-[4/5] overflow-hidden bg-neutral-200">
      <img src="{{.Content.AboutImage}}" alt="{{.Content.AboutName}}" class="h-full w-full object-cover">
    </div>
    <div>
      <p class="mb-4 text-sm uppercase tracking-[0.2em] text-neutral-500">{{.Content.AboutRole}}</p>
      <h1 class="text-5xl font-semibold md:text-7xl">{{.Content.AboutName}}</h1>
      <p class="mt-8 max-w-2xl text-xl leading-relaxed text-neutral-600">{{.Content.AboutBio}}</p>
      <div class="mt-8 grid gap-2 text-sm text-neutral-600">
        <p>{{.Content.Email}}</p>
        <p>{{.Content.Phone}}</p>
        <p>{{.Content.Location}}</p>
      </div>
    </div>
  </section>

  <section class="mt-20 max-w-2xl">
    <h2 class="mb-6 text-3xl font-semibold">Contact</h2>
    <form hx-post="/contact" hx-target="#contact-result" hx-swap="innerHTML" class="grid gap-4">
      <input name="name" required placeholder="Name" class="border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-neutral-950">
      <input name="email" type="email" required placeholder="Email" class="border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-neutral-950">
      <textarea name="message" required rows="6" placeholder="Project request" class="border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-neutral-950"></textarea>
      <button class="bg-neutral-950 px-5 py-3 text-sm font-medium uppercase tracking-[0.18em] text-white hover:bg-neutral-700">Submit request</button>
    </form>
    <div id="contact-result" class="mt-4"></div>
  </section>
</main>
{{template "footer" .}}
<div id="overlay-root"></div>
</body>
</html>