45 lines
2.1 KiB
HTML
45 lines
2.1 KiB
HTML
|
{{template "head" .}}
|
||
|
|
{{template "site_header" .}}
|
||
|
|
<main>
|
||
|
|
<section class="relative min-h-[92vh] 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>
|
||
|
|
<h1 class="max-w-5xl text-5xl font-semibold leading-[0.95] md:text-8xl">{{.Content.HeroTitle}}</h1>
|
||
|
|
</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>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="px-5 pb-24 md:px-8" 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>
|
||
|
|
</div>
|
||
|
|
<div class="mx-auto grid max-w-7xl gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||
|
|
{{range .Projects}}
|
||
|
|
<a href="/projects/{{.Slug}}" class="group block">
|
||
|
|
<div class="aspect-square 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 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>
|
||
|
|
</div>
|
||
|
|
<p class="text-sm text-neutral-500">{{.Year}}</p>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
{{end}}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
{{template "footer" .}}
|
||
|
|
<div id="overlay-root"></div>
|
||
|
|
</body>
|
||
|
|
</html>
|