91 lines
5.2 KiB
HTML
91 lines
5.2 KiB
HTML
{{template "site_start" .}}
|
|
<main class="mx-auto max-w-7xl px-5 pb-24 pt-32 md:px-8 md:pt-40">
|
|
<section class="grid gap-10 border-b border-neutral-200 pb-14 md:grid-cols-[0.85fr_1.15fr] md:items-end">
|
|
<div>
|
|
<p class="mb-3 text-sm uppercase tracking-[0.2em] text-neutral-500">Project enquiry</p>
|
|
<h1 class="text-5xl font-semibold md:text-7xl">Contact</h1>
|
|
</div>
|
|
<p class="max-w-2xl text-xl leading-relaxed text-neutral-600">Share a few details about the site, scope, budget, and timing. The studio will review the enquiry and respond if the project is a suitable fit.</p>
|
|
</section>
|
|
|
|
<section class="grid gap-12 pt-14 lg:grid-cols-[0.72fr_1.28fr]">
|
|
<aside class="grid content-start gap-8">
|
|
<div>
|
|
<h2 class="mb-4 text-2xl font-semibold">Studio details</h2>
|
|
<div class="grid gap-3 text-neutral-600">
|
|
<p><span class="block text-sm uppercase tracking-[0.18em] text-neutral-400">Email</span>{{.Content.Email}}</p>
|
|
<p><span class="block text-sm uppercase tracking-[0.18em] text-neutral-400">Phone</span>{{.Content.Phone}}</p>
|
|
<p><span class="block text-sm uppercase tracking-[0.18em] text-neutral-400">Location</span>{{.Content.Location}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="border-t border-neutral-200 pt-8">
|
|
<h2 class="mb-3 text-2xl font-semibold">Useful to include</h2>
|
|
<p class="leading-relaxed text-neutral-600">Approximate property location, whether the project is new build or renovation, target budget, and any planning or timing constraints.</p>
|
|
</div>
|
|
</aside>
|
|
|
|
<form hx-post="/contact" hx-target="#contact-result" hx-swap="innerHTML" class="grid gap-5 bg-white p-5 shadow-sm md:p-8">
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
<label class="block text-sm">
|
|
<span class="mb-2 block text-neutral-500">Name</span>
|
|
<input name="name" required autocomplete="name" class="w-full border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-neutral-950">
|
|
</label>
|
|
<label class="block text-sm">
|
|
<span class="mb-2 block text-neutral-500">Email</span>
|
|
<input name="email" type="email" required autocomplete="email" class="w-full border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-neutral-950">
|
|
</label>
|
|
<label class="block text-sm">
|
|
<span class="mb-2 block text-neutral-500">Phone, optional</span>
|
|
<input name="phone" autocomplete="tel" class="w-full border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-neutral-950">
|
|
</label>
|
|
<label class="block text-sm">
|
|
<span class="mb-2 block text-neutral-500">Project type</span>
|
|
<select name="project_type" required class="form-select w-full border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-neutral-950">
|
|
<option value="">Select one</option>
|
|
<option>Residential architecture</option>
|
|
<option>Renovation or extension</option>
|
|
<option>Interior architecture</option>
|
|
<option>Early-stage consultation</option>
|
|
<option>Other</option>
|
|
</select>
|
|
</label>
|
|
<label class="block text-sm">
|
|
<span class="mb-2 block text-neutral-500">Project location</span>
|
|
<input name="project_location" required class="w-full border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-neutral-950">
|
|
</label>
|
|
<label class="block text-sm">
|
|
<span class="mb-2 block text-neutral-500">Budget range</span>
|
|
<select name="budget_range" required class="form-select w-full border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-neutral-950">
|
|
<option value="">Select one</option>
|
|
<option>Under GBP 100k</option>
|
|
<option>GBP 100k-250k</option>
|
|
<option>GBP 250k-500k</option>
|
|
<option>GBP 500k+</option>
|
|
<option>Not sure yet</option>
|
|
</select>
|
|
</label>
|
|
<label class="block text-sm md:col-span-2">
|
|
<span class="mb-2 block text-neutral-500">Timeline</span>
|
|
<select name="timeline" required class="form-select w-full border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-neutral-950">
|
|
<option value="">Select one</option>
|
|
<option>As soon as possible</option>
|
|
<option>Within 3 months</option>
|
|
<option>3-6 months</option>
|
|
<option>6-12 months</option>
|
|
<option>Still exploring</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<label class="block text-sm">
|
|
<span class="mb-2 block text-neutral-500">Project notes</span>
|
|
<textarea name="message" required rows="7" class="w-full border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-neutral-950"></textarea>
|
|
</label>
|
|
<div class="flex flex-col gap-4 md:flex-row md:items-center">
|
|
<button class="w-fit bg-neutral-950 px-5 py-3 text-sm font-medium uppercase tracking-[0.18em] text-white hover:bg-neutral-700">Submit enquiry</button>
|
|
<div id="contact-result" class="text-sm"></div>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
</main>
|
|
{{template "site_end" .}}
|