7079e32a5f
All checks were successful
Publish / Test, build, and push image (push) Successful in 4m8s
83 lines
3.8 KiB
HTML
83 lines
3.8 KiB
HTML
{{define "services.html"}}
|
|
{{template "public_shell_start" .}}
|
|
{{template "services_content" .}}
|
|
{{template "public_shell_end" .}}
|
|
{{end}}
|
|
|
|
{{define "services_partial.html"}}
|
|
{{template "public_nav_oob" .}}
|
|
{{template "services_content" .}}
|
|
{{end}}
|
|
|
|
{{define "services_content"}}
|
|
<main id="main-content" 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.82fr_1.18fr] md:items-end">
|
|
<div>
|
|
<p class="mb-3 text-sm uppercase tracking-[0.2em] text-neutral-500">{{.Content.ServiceArea}}</p>
|
|
<h1 class="text-5xl font-semibold md:text-7xl">Services</h1>
|
|
</div>
|
|
<p class="max-w-2xl text-xl leading-relaxed text-neutral-600">Focused architectural and interior design support for residential clients, renovations, compact interiors, and early-stage project decisions.</p>
|
|
</section>
|
|
|
|
<section class="grid gap-6 py-16 md:grid-cols-2">
|
|
{{range .Services}}
|
|
<article class="border-t border-neutral-300 pt-6">
|
|
<div class="mb-4 flex items-start justify-between gap-4">
|
|
<h2 class="text-2xl font-semibold">{{.Title}}</h2>
|
|
<p class="text-sm text-neutral-400">{{.Position}}</p>
|
|
</div>
|
|
<p class="mb-5 text-lg leading-relaxed text-neutral-600">{{.Summary}}</p>
|
|
<p class="leading-relaxed text-neutral-500">{{.Details}}</p>
|
|
</article>
|
|
{{end}}
|
|
</section>
|
|
|
|
<section class="grid gap-10 bg-neutral-950 px-5 py-12 text-white md:grid-cols-[0.75fr_1.25fr] md:px-8">
|
|
<div>
|
|
<p class="mb-3 text-sm uppercase tracking-[0.2em] text-white/50">How projects work</p>
|
|
<h2 class="text-3xl font-semibold md:text-5xl">A clear process before a larger commitment</h2>
|
|
</div>
|
|
<div class="grid gap-6 md:grid-cols-3">
|
|
<article class="border-t border-white/25 pt-5">
|
|
<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 class="border-t border-white/25 pt-5">
|
|
<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 class="border-t border-white/25 pt-5">
|
|
<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>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="grid gap-10 py-16 md:grid-cols-[0.75fr_1.25fr]">
|
|
<div>
|
|
<p class="mb-3 text-sm uppercase tracking-[0.2em] text-neutral-500">Project fit</p>
|
|
<h2 class="text-3xl font-semibold md:text-5xl">FAQs</h2>
|
|
</div>
|
|
<div class="grid gap-6">
|
|
{{range .FAQs}}
|
|
<article class="border-t border-neutral-300 pt-5">
|
|
<h3 class="mb-3 text-xl font-medium">{{.Question}}</h3>
|
|
<p class="leading-relaxed text-neutral-600">{{.Answer}}</p>
|
|
</article>
|
|
{{end}}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="grid gap-6 border-t border-neutral-200 pt-10 md:grid-cols-[0.8fr_1.2fr] md:items-center">
|
|
<h2 class="text-3xl font-semibold">Ready to discuss a project?</h2>
|
|
<div>
|
|
<p class="max-w-2xl text-lg leading-relaxed text-neutral-600">Use the enquiry form to share the project type, site location, budget range, and timeline.</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="#main-content" hx-swap="outerHTML transition:true" hx-push-url="true">Start an enquiry</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
{{end}}
|