69 lines
3.5 KiB
HTML
69 lines
3.5 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 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">Studio</p>
|
|
<h1 class="text-5xl font-semibold md:text-7xl">{{.Content.AboutName}}</h1>
|
|
<p class="mt-3 text-xl text-neutral-500">{{.Content.AboutRole}}</p>
|
|
<p class="mt-8 max-w-2xl text-xl leading-relaxed text-neutral-600">{{.Content.AboutBio}}</p>
|
|
<div class="mt-8 grid gap-4 border-t border-neutral-200 pt-6 text-sm text-neutral-600 md:grid-cols-3">
|
|
<p><span class="block text-neutral-400">Base</span>{{.Content.Location}}</p>
|
|
<p><span class="block text-neutral-400">Service area</span>{{.Content.ServiceArea}}</p>
|
|
<p><span class="block text-neutral-400">Contact</span>{{.Content.Email}}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="mt-20 grid gap-10 border-t border-neutral-200 pt-12 md:grid-cols-[0.75fr_1.25fr]">
|
|
<div>
|
|
<p class="mb-3 text-sm uppercase tracking-[0.2em] text-neutral-500">Philosophy</p>
|
|
<h2 class="text-3xl font-semibold md:text-5xl">Quiet spaces shaped around real use</h2>
|
|
</div>
|
|
<div class="grid gap-8">
|
|
<p class="max-w-3xl text-xl leading-relaxed text-neutral-600">{{.Content.StudioPhilosophy}}</p>
|
|
<div class="grid gap-6 md:grid-cols-2">
|
|
<article class="border-t border-neutral-300 pt-5">
|
|
<h3 class="mb-3 text-xl font-medium">Approach</h3>
|
|
<p class="leading-relaxed text-neutral-600">{{.Content.StudioApproach}}</p>
|
|
</article>
|
|
<article class="border-t border-neutral-300 pt-5">
|
|
<h3 class="mb-3 text-xl font-medium">Experience</h3>
|
|
<p class="leading-relaxed text-neutral-600">{{.Content.StudioCredentials}}</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="mt-20 grid gap-8 bg-neutral-950 px-5 py-12 text-white md:grid-cols-3 md:px-8">
|
|
<article>
|
|
<p class="mb-4 text-sm text-white/45">01</p>
|
|
<h3 class="mb-3 text-xl font-medium">{{.Content.ProcessOneTitle}}</h3>
|
|
<p class="leading-relaxed text-white/65">{{.Content.ProcessOneText}}</p>
|
|
</article>
|
|
<article>
|
|
<p class="mb-4 text-sm text-white/45">02</p>
|
|
<h3 class="mb-3 text-xl font-medium">{{.Content.ProcessTwoTitle}}</h3>
|
|
<p class="leading-relaxed text-white/65">{{.Content.ProcessTwoText}}</p>
|
|
</article>
|
|
<article>
|
|
<p class="mb-4 text-sm text-white/45">03</p>
|
|
<h3 class="mb-3 text-xl font-medium">{{.Content.ProcessThreeTitle}}</h3>
|
|
<p class="leading-relaxed text-white/65">{{.Content.ProcessThreeText}}</p>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="mt-20 border-t border-neutral-200 pt-10">
|
|
<div class="grid gap-6 md:grid-cols-[0.8fr_1.2fr] md:items-end">
|
|
<h2 class="text-3xl font-semibold">Discuss a project</h2>
|
|
<div class="max-w-2xl">
|
|
<p class="text-lg leading-relaxed text-neutral-600">Share the project type, location, budget range, and timeline so the studio can assess whether the work is a good fit.</p>
|
|
<a href="/contact" class="mt-6 inline-flex bg-neutral-950 px-5 py-3 text-sm font-medium uppercase tracking-[0.18em] text-white hover:bg-neutral-700" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">Start an enquiry</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
{{template "site_end" .}}
|