35 lines
1.8 KiB
HTML
35 lines
1.8 KiB
HTML
|
{{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>
|