Pre-refactor checkpoint
This commit is contained in:
V
+54
-20
@@ -1,34 +1,68 @@
|
||||
{{template "head" .}}
|
||||
{{template "site_header" .}}
|
||||
{{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">{{.Content.AboutRole}}</p>
|
||||
<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-2 text-sm text-neutral-600">
|
||||
<p>{{.Content.Email}}</p>
|
||||
<p>{{.Content.Phone}}</p>
|
||||
<p>{{.Content.Location}}</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 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 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 "footer" .}}
|
||||
<div id="overlay-root"></div>
|
||||
</body>
|
||||
</html>
|
||||
{{template "site_end" .}}
|
||||
|
||||
@@ -33,6 +33,7 @@
|
||||
<nav class="mx-auto flex max-w-7xl gap-2 overflow-x-auto px-5 py-3 text-sm md:px-8" aria-label="Admin sections">
|
||||
<a href="/admin/main" hx-get="/admin/main" hx-target="#admin-panel" hx-push-url="true" hx-swap="innerHTML transition:true" class="whitespace-nowrap px-3 py-2 {{if eq .AdminTab "main"}}bg-neutral-950 text-white{{else}}text-neutral-500 hover:bg-neutral-100 hover:text-neutral-950{{end}}">Main</a>
|
||||
<a href="/admin/projects" hx-get="/admin/projects" hx-target="#admin-panel" hx-push-url="true" hx-swap="innerHTML transition:true" class="whitespace-nowrap px-3 py-2 {{if eq .AdminTab "projects"}}bg-neutral-950 text-white{{else}}text-neutral-500 hover:bg-neutral-100 hover:text-neutral-950{{end}}">Projects</a>
|
||||
<a href="/admin/services" hx-get="/admin/services" hx-target="#admin-panel" hx-push-url="true" hx-swap="innerHTML transition:true" class="whitespace-nowrap px-3 py-2 {{if eq .AdminTab "services"}}bg-neutral-950 text-white{{else}}text-neutral-500 hover:bg-neutral-100 hover:text-neutral-950{{end}}">Services</a>
|
||||
<a href="/admin/contact-details" hx-get="/admin/contact-details" hx-target="#admin-panel" hx-push-url="true" hx-swap="innerHTML transition:true" class="whitespace-nowrap px-3 py-2 {{if eq .AdminTab "contact-details"}}bg-neutral-950 text-white{{else}}text-neutral-500 hover:bg-neutral-100 hover:text-neutral-950{{end}}">Contact Details</a>
|
||||
</nav>
|
||||
{{end}}
|
||||
|
||||
@@ -28,9 +28,15 @@
|
||||
{{range .Contacts}}
|
||||
<article class="border border-neutral-200 p-4">
|
||||
<div class="mb-2 flex flex-col gap-1 text-sm md:flex-row md:items-center md:justify-between">
|
||||
<p class="font-medium">{{.Name}} · {{.Email}}</p>
|
||||
<p class="text-neutral-500">{{.CreatedAt.Format "2006-01-02 15:04"}}</p>
|
||||
<p class="font-medium">{{.Name}} · {{.Email}}{{if .Phone}} · {{.Phone}}{{end}}</p>
|
||||
<p class="text-neutral-500">{{.Status}} · {{.CreatedAt.Format "2006-01-02 15:04"}}</p>
|
||||
</div>
|
||||
<dl class="mb-3 grid gap-2 text-sm text-neutral-600 md:grid-cols-4">
|
||||
<div><dt class="text-neutral-400">Type</dt><dd>{{.ProjectType}}</dd></div>
|
||||
<div><dt class="text-neutral-400">Location</dt><dd>{{.ProjectLocation}}</dd></div>
|
||||
<div><dt class="text-neutral-400">Budget</dt><dd>{{.BudgetRange}}</dd></div>
|
||||
<div><dt class="text-neutral-400">Timeline</dt><dd>{{.Timeline}}</dd></div>
|
||||
</dl>
|
||||
<p class="text-neutral-700">{{.Message}}</p>
|
||||
</article>
|
||||
{{else}}
|
||||
|
||||
@@ -16,15 +16,53 @@
|
||||
<form method="post" action="/admin/content" enctype="multipart/form-data" class="grid gap-5">
|
||||
<input type="hidden" name="hero_image_current" value="{{.Content.HeroImage}}">
|
||||
<input type="hidden" name="about_image_current" value="{{.Content.AboutImage}}">
|
||||
<h2 class="text-lg font-semibold">Home Hero</h2>
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Hero title</span><input name="hero_title" value="{{.Content.HeroTitle}}" class="w-full border px-3 py-2"></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Hero subtitle</span><input name="hero_subtitle" value="{{.Content.HeroSubtitle}}" class="w-full border px-3 py-2"></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Positioning</span><input name="positioning" value="{{.Content.Positioning}}" class="w-full border px-3 py-2"></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Primary CTA label</span><input name="hero_cta_label" value="{{.Content.HeroCTALabel}}" class="w-full border px-3 py-2"></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Primary CTA URL</span><input name="hero_cta_url" value="{{.Content.HeroCTAURL}}" class="w-full border px-3 py-2"></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Secondary CTA label</span><input name="secondary_cta_label" value="{{.Content.SecondaryCTALabel}}" class="w-full border px-3 py-2"></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Secondary CTA URL</span><input name="secondary_cta_url" value="{{.Content.SecondaryCTAURL}}" class="w-full border px-3 py-2"></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Intro title</span><input name="intro_title" value="{{.Content.IntroTitle}}" class="w-full border px-3 py-2"></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">About name</span><input name="about_name" value="{{.Content.AboutName}}" class="w-full border px-3 py-2"></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">About role</span><input name="about_role" value="{{.Content.AboutRole}}" class="w-full border px-3 py-2"></label>
|
||||
</div>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Intro text</span><textarea name="intro_text" rows="3" class="w-full border px-3 py-2">{{.Content.IntroText}}</textarea></label>
|
||||
|
||||
<h2 class="border-t border-neutral-200 pt-5 text-lg font-semibold">Service Preview</h2>
|
||||
<div class="grid gap-4 md:grid-cols-3">
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Service 1 title</span><input name="service_one_title" value="{{.Content.ServiceOneTitle}}" class="w-full border px-3 py-2"></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Service 2 title</span><input name="service_two_title" value="{{.Content.ServiceTwoTitle}}" class="w-full border px-3 py-2"></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Service 3 title</span><input name="service_three_title" value="{{.Content.ServiceThreeTitle}}" class="w-full border px-3 py-2"></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Service 1 text</span><textarea name="service_one_text" rows="4" class="w-full border px-3 py-2">{{.Content.ServiceOneText}}</textarea></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Service 2 text</span><textarea name="service_two_text" rows="4" class="w-full border px-3 py-2">{{.Content.ServiceTwoText}}</textarea></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Service 3 text</span><textarea name="service_three_text" rows="4" class="w-full border px-3 py-2">{{.Content.ServiceThreeText}}</textarea></label>
|
||||
</div>
|
||||
|
||||
<h2 class="border-t border-neutral-200 pt-5 text-lg font-semibold">Process Preview</h2>
|
||||
<div class="grid gap-4 md:grid-cols-3">
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Step 1 title</span><input name="process_one_title" value="{{.Content.ProcessOneTitle}}" class="w-full border px-3 py-2"></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Step 2 title</span><input name="process_two_title" value="{{.Content.ProcessTwoTitle}}" class="w-full border px-3 py-2"></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Step 3 title</span><input name="process_three_title" value="{{.Content.ProcessThreeTitle}}" class="w-full border px-3 py-2"></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Step 1 text</span><textarea name="process_one_text" rows="4" class="w-full border px-3 py-2">{{.Content.ProcessOneText}}</textarea></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Step 2 text</span><textarea name="process_two_text" rows="4" class="w-full border px-3 py-2">{{.Content.ProcessTwoText}}</textarea></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Step 3 text</span><textarea name="process_three_text" rows="4" class="w-full border px-3 py-2">{{.Content.ProcessThreeText}}</textarea></label>
|
||||
</div>
|
||||
|
||||
<h2 class="border-t border-neutral-200 pt-5 text-lg font-semibold">Studio</h2>
|
||||
<div class="grid gap-4 md:grid-cols-3">
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Studio name</span><input name="about_name" value="{{.Content.AboutName}}" class="w-full border px-3 py-2"></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Role</span><input name="about_role" value="{{.Content.AboutRole}}" class="w-full border px-3 py-2"></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Service area</span><input name="service_area" value="{{.Content.ServiceArea}}" class="w-full border px-3 py-2"></label>
|
||||
</div>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">About bio</span><textarea name="about_bio" rows="4" class="w-full border px-3 py-2">{{.Content.AboutBio}}</textarea></label>
|
||||
<div class="grid gap-4 md:grid-cols-3">
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Studio philosophy</span><textarea name="studio_philosophy" rows="5" class="w-full border px-3 py-2">{{.Content.StudioPhilosophy}}</textarea></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Studio approach</span><textarea name="studio_approach" rows="5" class="w-full border px-3 py-2">{{.Content.StudioApproach}}</textarea></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Credentials / experience</span><textarea name="studio_credentials" rows="5" class="w-full border px-3 py-2">{{.Content.StudioCredentials}}</textarea></label>
|
||||
</div>
|
||||
|
||||
<h2 class="border-t border-neutral-200 pt-5 text-lg font-semibold">Images</h2>
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Hero image</span><input name="hero_image" type="file" accept="image/png,image/jpeg,image/webp,image/gif" class="w-full border px-3 py-2"></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">About image</span><input name="about_image" type="file" accept="image/png,image/jpeg,image/webp,image/gif" class="w-full border px-3 py-2"></label>
|
||||
|
||||
@@ -20,7 +20,11 @@
|
||||
<input name="location" required placeholder="Location" class="border px-3 py-2">
|
||||
<input name="year" required placeholder="Year" class="border px-3 py-2">
|
||||
<input name="category" required placeholder="Category" class="border px-3 py-2">
|
||||
<input name="scope" required placeholder="Scope" class="border px-3 py-2">
|
||||
<input name="status" required placeholder="Status" value="Completed" class="border px-3 py-2">
|
||||
<input name="position" type="number" value="0" class="border px-3 py-2">
|
||||
<label class="flex items-center gap-2 border px-3 py-2 text-sm"><input name="featured" type="checkbox"> Featured</label>
|
||||
<textarea name="summary" required rows="3" placeholder="Short card summary" class="border px-3 py-2 md:col-span-2"></textarea>
|
||||
<textarea name="description" required rows="4" placeholder="Description" class="border px-3 py-2 md:col-span-2"></textarea>
|
||||
<input name="cover_image" type="file" accept="image/png,image/jpeg,image/webp,image/gif" class="border px-3 py-2 md:col-span-2">
|
||||
<button class="w-fit bg-neutral-950 px-5 py-3 text-sm uppercase tracking-[0.18em] text-white md:col-span-2">Create project</button>
|
||||
@@ -38,7 +42,11 @@
|
||||
<input name="location" value="{{.Location}}" class="border px-3 py-2">
|
||||
<input name="year" value="{{.Year}}" class="border px-3 py-2">
|
||||
<input name="category" value="{{.Category}}" class="border px-3 py-2">
|
||||
<input name="scope" value="{{.Scope}}" class="border px-3 py-2">
|
||||
<input name="status" value="{{.Status}}" class="border px-3 py-2">
|
||||
<input name="position" type="number" value="{{.Position}}" class="border px-3 py-2">
|
||||
<label class="flex items-center gap-2 border px-3 py-2 text-sm"><input name="featured" type="checkbox" {{if .Featured}}checked{{end}}> Featured</label>
|
||||
<textarea name="summary" rows="3" class="border px-3 py-2 md:col-span-2">{{.Summary}}</textarea>
|
||||
<textarea name="description" rows="4" class="border px-3 py-2 md:col-span-2">{{.Description}}</textarea>
|
||||
<div class="grid gap-3 md:col-span-2 md:grid-cols-[120px_1fr] md:items-center">
|
||||
<img src="{{.CoverImage}}" alt="" class="h-24 w-24 object-cover">
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
{{define "admin_services.html"}}
|
||||
{{template "admin_shell_start" .}}
|
||||
{{template "admin_services_panel" .}}
|
||||
{{template "admin_shell_end" .}}
|
||||
{{end}}
|
||||
|
||||
{{define "admin_services_partial.html"}}
|
||||
{{template "admin_tabs_oob" .}}
|
||||
{{template "admin_flash_oob" .}}
|
||||
{{template "admin_services_panel" .}}
|
||||
{{end}}
|
||||
|
||||
{{define "admin_services_panel"}}
|
||||
<section class="grid gap-6">
|
||||
<section class="bg-white p-6 shadow-sm">
|
||||
<h1 class="mb-6 text-2xl font-semibold">Services</h1>
|
||||
<form method="post" action="/admin/services" class="grid gap-4 md:grid-cols-[1fr_1fr_120px_120px]">
|
||||
<input name="title" required placeholder="Title" class="border px-3 py-2">
|
||||
<input name="summary" required placeholder="Summary" class="border px-3 py-2">
|
||||
<input name="position" type="number" value="0" class="border px-3 py-2">
|
||||
<label class="flex items-center gap-2 border px-3 py-2 text-sm"><input name="active" type="checkbox" checked> Active</label>
|
||||
<textarea name="details" required rows="4" placeholder="Details" class="border px-3 py-2 md:col-span-4"></textarea>
|
||||
<button class="w-fit bg-neutral-950 px-5 py-3 text-sm uppercase tracking-[0.18em] text-white md:col-span-4">Add service</button>
|
||||
</form>
|
||||
|
||||
<div class="mt-8 grid gap-4">
|
||||
{{range .Services}}
|
||||
<article class="border border-neutral-200 p-4">
|
||||
<form method="post" action="/admin/services/{{.ID}}" class="grid gap-4 md:grid-cols-[1fr_1fr_120px_120px]">
|
||||
<input name="title" value="{{.Title}}" class="border px-3 py-2">
|
||||
<input name="summary" value="{{.Summary}}" class="border px-3 py-2">
|
||||
<input name="position" type="number" value="{{.Position}}" class="border px-3 py-2">
|
||||
<label class="flex items-center gap-2 border px-3 py-2 text-sm"><input name="active" type="checkbox" {{if .Active}}checked{{end}}> Active</label>
|
||||
<textarea name="details" rows="4" class="border px-3 py-2 md:col-span-4">{{.Details}}</textarea>
|
||||
<button class="w-fit bg-neutral-950 px-5 py-2 text-sm uppercase tracking-[0.18em] text-white">Save</button>
|
||||
</form>
|
||||
<form method="post" action="/admin/services/{{.ID}}/delete" class="mt-2">
|
||||
<button class="text-sm text-red-700">Delete service</button>
|
||||
</form>
|
||||
</article>
|
||||
{{end}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-white p-6 shadow-sm">
|
||||
<h2 class="mb-6 text-2xl font-semibold">FAQs</h2>
|
||||
<form method="post" action="/admin/faqs" class="grid gap-4 md:grid-cols-[1fr_120px_120px]">
|
||||
<input name="question" required placeholder="Question" class="border px-3 py-2">
|
||||
<input name="position" type="number" value="0" class="border px-3 py-2">
|
||||
<label class="flex items-center gap-2 border px-3 py-2 text-sm"><input name="active" type="checkbox" checked> Active</label>
|
||||
<textarea name="answer" required rows="4" placeholder="Answer" class="border px-3 py-2 md:col-span-3"></textarea>
|
||||
<button class="w-fit bg-neutral-950 px-5 py-3 text-sm uppercase tracking-[0.18em] text-white md:col-span-3">Add FAQ</button>
|
||||
</form>
|
||||
|
||||
<div class="mt-8 grid gap-4">
|
||||
{{range .FAQs}}
|
||||
<article class="border border-neutral-200 p-4">
|
||||
<form method="post" action="/admin/faqs/{{.ID}}" class="grid gap-4 md:grid-cols-[1fr_120px_120px]">
|
||||
<input name="question" value="{{.Question}}" class="border px-3 py-2">
|
||||
<input name="position" type="number" value="{{.Position}}" class="border px-3 py-2">
|
||||
<label class="flex items-center gap-2 border px-3 py-2 text-sm"><input name="active" type="checkbox" {{if .Active}}checked{{end}}> Active</label>
|
||||
<textarea name="answer" rows="4" class="border px-3 py-2 md:col-span-3">{{.Answer}}</textarea>
|
||||
<button class="w-fit bg-neutral-950 px-5 py-2 text-sm uppercase tracking-[0.18em] text-white">Save</button>
|
||||
</form>
|
||||
<form method="post" action="/admin/faqs/{{.ID}}/delete" class="mt-2">
|
||||
<button class="text-sm text-red-700">Delete FAQ</button>
|
||||
</form>
|
||||
</article>
|
||||
{{end}}
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
{{end}}
|
||||
+53
-2
@@ -5,6 +5,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{if .Title}}{{.Title}} | {{end}}Archi Folio</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
|
||||
<link rel="stylesheet" href="/static/styles.css">
|
||||
@@ -13,14 +14,31 @@
|
||||
<body class="bg-neutral-50 text-neutral-950 antialiased">
|
||||
{{end}}
|
||||
|
||||
{{define "site_start"}}
|
||||
{{template "head" .}}
|
||||
<div class="drawer drawer-end">
|
||||
<input id="site-drawer" type="checkbox" class="drawer-toggle">
|
||||
<div class="drawer-content min-h-screen bg-neutral-50 text-neutral-950">
|
||||
{{template "site_header" .}}
|
||||
{{end}}
|
||||
|
||||
{{define "site_header"}}
|
||||
<header data-site-header class="fixed inset-x-0 top-0 z-40 transition-all duration-300 {{if eq .Active "home"}}py-7 text-white{{else}}bg-neutral-50/95 py-4 shadow-sm backdrop-blur text-neutral-950{{end}}">
|
||||
<div class="mx-auto flex max-w-7xl items-center justify-between px-5 md:px-8">
|
||||
<a href="/" class="text-xl font-semibold tracking-normal md:text-3xl" data-header-brand hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">Archi Folio</a>
|
||||
<nav class="flex items-center gap-4 text-sm uppercase tracking-[0.18em] md:gap-8" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">
|
||||
<nav class="hidden items-center gap-4 text-sm uppercase tracking-[0.18em] md:flex md:gap-8" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">
|
||||
<a class="hover:opacity-60 {{if eq .Active "projects"}}font-semibold{{end}}" href="/projects">Projects</a>
|
||||
<a class="hover:opacity-60 {{if eq .Active "about"}}font-semibold{{end}}" href="/about">About</a>
|
||||
<a class="hover:opacity-60 {{if eq .Active "about"}}font-semibold{{end}}" href="/about">Studio</a>
|
||||
<a class="hover:opacity-60 {{if eq .Active "services"}}font-semibold{{end}}" href="/services">Services</a>
|
||||
<a class="hover:opacity-60 {{if eq .Active "contact"}}font-semibold{{end}}" href="/contact">Contact</a>
|
||||
</nav>
|
||||
<label for="site-drawer" class="grid h-11 w-11 cursor-pointer place-items-center border border-current/30 md:hidden" aria-label="Open menu">
|
||||
<span class="grid gap-1.5">
|
||||
<span class="block h-px w-5 bg-current"></span>
|
||||
<span class="block h-px w-5 bg-current"></span>
|
||||
<span class="block h-px w-5 bg-current"></span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</header>
|
||||
{{end}}
|
||||
@@ -33,3 +51,36 @@
|
||||
</div>
|
||||
</footer>
|
||||
{{end}}
|
||||
|
||||
{{define "site_end"}}
|
||||
{{template "footer" .}}
|
||||
<div id="overlay-root"></div>
|
||||
</div>
|
||||
<div class="drawer-side z-50 md:hidden">
|
||||
<label for="site-drawer" aria-label="Close menu" class="drawer-overlay bg-neutral-950/45"></label>
|
||||
<aside class="flex min-h-full w-[min(22rem,86vw)] flex-col bg-neutral-950/45 text-white shadow-2xl backdrop-blur-xl">
|
||||
<div class="flex items-center justify-between border-b border-white/15 px-5 py-4">
|
||||
<a href="/" class="text-xl font-semibold text-white" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">Archi Folio</a>
|
||||
<label for="site-drawer" class="grid h-10 w-10 cursor-pointer place-items-center border border-white/25 text-white" aria-label="Close menu">
|
||||
<span class="relative block h-5 w-5">
|
||||
<span class="absolute left-0 top-1/2 block h-px w-5 rotate-45 bg-current"></span>
|
||||
<span class="absolute left-0 top-1/2 block h-px w-5 -rotate-45 bg-current"></span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<nav class="grid px-5 py-6 text-2xl font-medium text-white" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">
|
||||
<a class="border-b border-white/15 py-4 text-white {{if eq .Active "projects"}}underline underline-offset-8{{end}}" href="/projects">Projects</a>
|
||||
<a class="border-b border-white/15 py-4 text-white {{if eq .Active "about"}}underline underline-offset-8{{end}}" href="/about">Studio</a>
|
||||
<a class="border-b border-white/15 py-4 text-white {{if eq .Active "services"}}underline underline-offset-8{{end}}" href="/services">Services</a>
|
||||
<a class="border-b border-white/15 py-4 text-white {{if eq .Active "contact"}}underline underline-offset-8{{end}}" href="/contact">Contact</a>
|
||||
</nav>
|
||||
<div class="mt-auto px-5 pb-6 text-sm leading-relaxed text-white">
|
||||
<p>{{.Content.Email}}</p>
|
||||
<p>{{.Content.Location}}</p>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
{{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" .}}
|
||||
+79
-13
@@ -1,21 +1,51 @@
|
||||
{{template "head" .}}
|
||||
{{template "site_header" .}}
|
||||
{{template "site_start" .}}
|
||||
<main>
|
||||
<section class="relative min-h-[92vh] overflow-hidden bg-neutral-950">
|
||||
<section class="relative min-h-[88vh] overflow-hidden bg-neutral-950">
|
||||
<img src="{{.Content.HeroImage}}" alt="" class="absolute inset-0 h-full w-full object-cover opacity-90">
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-black/35 via-black/5 to-black/55"></div>
|
||||
<div class="relative mx-auto flex min-h-[92vh] max-w-7xl flex-col justify-end px-5 pb-16 text-white md:px-8 md:pb-20">
|
||||
<p class="mb-4 max-w-xl text-sm uppercase tracking-[0.22em] text-white/75">{{.Content.HeroSubtitle}}</p>
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-black/40 via-black/10 to-black/65"></div>
|
||||
<div class="relative mx-auto flex min-h-[88vh] max-w-7xl flex-col justify-end px-5 pb-16 text-white md:px-8 md:pb-20">
|
||||
<p class="mb-4 max-w-xl text-sm uppercase tracking-[0.22em] text-white/75">{{.Content.Positioning}}</p>
|
||||
<h1 class="max-w-5xl text-5xl font-semibold leading-[0.95] md:text-8xl">{{.Content.HeroTitle}}</h1>
|
||||
<p class="mt-6 max-w-2xl text-lg leading-relaxed text-white/80 md:text-xl">{{.Content.HeroSubtitle}}</p>
|
||||
<div class="mt-8 flex flex-wrap gap-3" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">
|
||||
<a href="{{.Content.HeroCTAURL}}" class="bg-white px-5 py-3 text-sm font-medium uppercase tracking-[0.18em] text-neutral-950 hover:bg-neutral-200">{{.Content.HeroCTALabel}}</a>
|
||||
<a href="{{.Content.SecondaryCTAURL}}" class="border border-white/60 px-5 py-3 text-sm font-medium uppercase tracking-[0.18em] text-white hover:bg-white hover:text-neutral-950">{{.Content.SecondaryCTALabel}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mx-auto grid max-w-7xl gap-8 px-5 py-20 md:grid-cols-[0.8fr_1.2fr] md:px-8 md:py-28">
|
||||
<h2 class="text-3xl font-semibold md:text-5xl">{{.Content.IntroTitle}}</h2>
|
||||
<p class="max-w-2xl text-xl leading-relaxed text-neutral-600">{{.Content.IntroText}}</p>
|
||||
<div class="max-w-2xl">
|
||||
<p class="text-xl leading-relaxed text-neutral-600">{{.Content.IntroText}}</p>
|
||||
<a href="/about" class="mt-6 inline-flex text-sm uppercase tracking-[0.18em] text-neutral-500 hover:text-neutral-950" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">Meet the studio</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="px-5 pb-24 md:px-8" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">
|
||||
<section class="border-y border-neutral-200 bg-white px-5 py-20 md:px-8 md:py-24">
|
||||
<div class="mx-auto grid max-w-7xl gap-10 md:grid-cols-[0.75fr_1.25fr]">
|
||||
<div>
|
||||
<p class="mb-3 text-sm uppercase tracking-[0.2em] text-neutral-500">Services</p>
|
||||
<h2 class="text-3xl font-semibold md:text-5xl">Focused support for homes and small spaces</h2>
|
||||
</div>
|
||||
<div class="grid gap-6 md:grid-cols-3">
|
||||
<article class="border-t border-neutral-300 pt-5">
|
||||
<h3 class="mb-3 text-xl font-medium">{{.Content.ServiceOneTitle}}</h3>
|
||||
<p class="leading-relaxed text-neutral-600">{{.Content.ServiceOneText}}</p>
|
||||
</article>
|
||||
<article class="border-t border-neutral-300 pt-5">
|
||||
<h3 class="mb-3 text-xl font-medium">{{.Content.ServiceTwoTitle}}</h3>
|
||||
<p class="leading-relaxed text-neutral-600">{{.Content.ServiceTwoText}}</p>
|
||||
</article>
|
||||
<article class="border-t border-neutral-300 pt-5">
|
||||
<h3 class="mb-3 text-xl font-medium">{{.Content.ServiceThreeTitle}}</h3>
|
||||
<p class="leading-relaxed text-neutral-600">{{.Content.ServiceThreeText}}</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="px-5 py-20 md:px-8 md:py-28" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">
|
||||
<div class="mx-auto mb-8 flex max-w-7xl items-end justify-between">
|
||||
<h2 class="text-2xl font-semibold md:text-4xl">Featured Projects</h2>
|
||||
<a href="/projects" class="text-sm uppercase tracking-[0.18em] text-neutral-500 hover:text-neutral-950">All work</a>
|
||||
@@ -29,7 +59,8 @@
|
||||
<div class="mt-3 flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h3 class="text-lg font-medium">{{.Title}}</h3>
|
||||
<p class="text-sm text-neutral-500">{{.Location}}</p>
|
||||
<p class="text-sm text-neutral-500">{{.Location}} · {{.Status}}</p>
|
||||
<p class="mt-2 max-w-sm text-sm leading-relaxed text-neutral-600">{{.Summary}}</p>
|
||||
</div>
|
||||
<p class="text-sm text-neutral-500">{{.Year}}</p>
|
||||
</div>
|
||||
@@ -37,8 +68,43 @@
|
||||
{{end}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-neutral-950 px-5 py-20 text-white md:px-8 md:py-28">
|
||||
<div class="mx-auto grid max-w-7xl gap-10 md:grid-cols-[0.7fr_1.3fr]">
|
||||
<div>
|
||||
<p class="mb-3 text-sm uppercase tracking-[0.2em] text-white/50">Process</p>
|
||||
<h2 class="text-3xl font-semibold md:text-5xl">Clear decisions from first conversation to detailed direction</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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mx-auto grid max-w-7xl gap-10 px-5 py-20 md:grid-cols-[0.85fr_1.15fr] md:px-8 md:py-28 md:items-center">
|
||||
<div class="aspect-[4/5] max-h-[640px] overflow-hidden bg-neutral-200">
|
||||
<img src="{{.Content.AboutImage}}" alt="{{.Content.AboutName}}" class="h-full w-full object-cover">
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-3 text-sm uppercase tracking-[0.2em] text-neutral-500">{{.Content.AboutRole}}</p>
|
||||
<h2 class="text-4xl font-semibold md:text-6xl">{{.Content.AboutName}}</h2>
|
||||
<p class="mt-6 max-w-2xl text-xl leading-relaxed text-neutral-600">{{.Content.AboutBio}}</p>
|
||||
<a href="/about" class="mt-8 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">Studio profile</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{{template "footer" .}}
|
||||
<div id="overlay-root"></div>
|
||||
</body>
|
||||
</html>
|
||||
{{template "site_end" .}}
|
||||
|
||||
@@ -1,17 +1,26 @@
|
||||
{{template "head" .}}
|
||||
{{template "site_header" .}}
|
||||
{{template "site_start" .}}
|
||||
<main class="pt-28 md:pt-36">
|
||||
<section class="mx-auto max-w-7xl px-5 md:px-8">
|
||||
<p class="mb-4 text-sm uppercase tracking-[0.2em] text-neutral-500">{{.Project.Category}}</p>
|
||||
<p class="mb-4 text-sm uppercase tracking-[0.2em] text-neutral-500">{{.Project.Category}} · {{.Project.Status}}</p>
|
||||
<div class="grid gap-8 md:grid-cols-[1.2fr_0.8fr] md:items-end">
|
||||
<h1 class="text-5xl font-semibold leading-none md:text-8xl">{{.Project.Title}}</h1>
|
||||
<div class="grid grid-cols-3 gap-4 border-t border-neutral-200 pt-4 text-sm">
|
||||
<div class="grid grid-cols-2 gap-4 border-t border-neutral-200 pt-4 text-sm">
|
||||
<div><p class="text-neutral-500">Location</p><p>{{.Project.Location}}</p></div>
|
||||
<div><p class="text-neutral-500">Year</p><p>{{.Project.Year}}</p></div>
|
||||
<div><p class="text-neutral-500">Type</p><p>{{.Project.Category}}</p></div>
|
||||
<div><p class="text-neutral-500">Status</p><p>{{.Project.Status}}</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 grid gap-8 md:grid-cols-[0.8fr_1.2fr]">
|
||||
<div class="border-t border-neutral-200 pt-4">
|
||||
<p class="mb-2 text-sm text-neutral-500">Scope</p>
|
||||
<p class="leading-relaxed">{{.Project.Scope}}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-4 text-2xl leading-snug text-neutral-800">{{.Project.Summary}}</p>
|
||||
<p class="max-w-3xl text-xl leading-relaxed text-neutral-600">{{.Project.Description}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-10 max-w-3xl text-xl leading-relaxed text-neutral-600">{{.Project.Description}}</p>
|
||||
</section>
|
||||
|
||||
<section class="mx-auto mt-14 max-w-7xl px-5 pb-24 md:px-8">
|
||||
@@ -25,7 +34,4 @@
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{{template "footer" .}}
|
||||
<div id="overlay-root"></div>
|
||||
</body>
|
||||
</html>
|
||||
{{template "site_end" .}}
|
||||
|
||||
+11
-11
@@ -1,5 +1,4 @@
|
||||
{{template "head" .}}
|
||||
{{template "site_header" .}}
|
||||
{{template "site_start" .}}
|
||||
<main class="mx-auto max-w-7xl px-5 pb-24 pt-32 md:px-8 md:pt-40">
|
||||
<div class="mb-10 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
|
||||
<div>
|
||||
@@ -8,21 +7,22 @@
|
||||
</div>
|
||||
<p class="max-w-md text-neutral-600">A visual index of architectural and interior design work.</p>
|
||||
</div>
|
||||
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">
|
||||
<div class="grid gap-x-5 gap-y-10 sm:grid-cols-2 lg:grid-cols-3" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">
|
||||
{{range .Projects}}
|
||||
<a href="/projects/{{.Slug}}" class="group block">
|
||||
<div class="aspect-square overflow-hidden bg-neutral-200">
|
||||
<div class="aspect-[4/3] overflow-hidden bg-neutral-200">
|
||||
<img src="{{.CoverImage}}" alt="{{.Title}}" class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<h2 class="text-lg font-medium">{{.Title}}</h2>
|
||||
<p class="text-sm text-neutral-500">{{.Location}} · {{.Year}}</p>
|
||||
<div class="mt-4">
|
||||
<div class="mb-2 flex items-start justify-between gap-4">
|
||||
<h2 class="text-xl font-medium">{{.Title}}</h2>
|
||||
<p class="text-sm text-neutral-500">{{.Year}}</p>
|
||||
</div>
|
||||
<p class="mb-3 text-sm text-neutral-500">{{.Location}} · {{.Category}} · {{.Status}}</p>
|
||||
<p class="leading-relaxed text-neutral-600">{{.Summary}}</p>
|
||||
</div>
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
</main>
|
||||
{{template "footer" .}}
|
||||
<div id="overlay-root"></div>
|
||||
</body>
|
||||
</html>
|
||||
{{template "site_end" .}}
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
{{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.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="body" hx-swap="outerHTML transition:true">Start an enquiry</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{{template "site_end" .}}
|
||||
Reference in New Issue
Block a user