pivoine.art/layouts/index.html

{{- define "main" -}}
{{- $posts     := where .Site.RegularPages "Section" "posts" -}}
{{- $featured  := where $posts "Params.featured" true -}}
{{- $hero      := index $featured 0 -}}
{{- $secondary := after 1 $featured | first 3 -}}
{{- $latest    := complement $featured $posts -}}

<!-- ── HERO ──────────────────────────────────────────────────── -->
{{- with $hero -}}
<section class="relative min-h-screen flex items-end overflow-hidden noise">

  <!-- Background media — bundle banner.png first, fallback to front matter -->
  {{- $heroBanner := .Resources.GetMatch "banner.png" -}}
  {{- if not $heroBanner -}}{{- $heroBanner = .Resources.GetMatch "banner.*" -}}{{- end -}}
  {{- $heroBannerSrc := "" -}}
  {{- with $heroBanner }}{{ $heroBannerSrc = .RelPermalink }}{{ else }}{{ with $.Params.background }}{{ $heroBannerSrc = .src }}{{ else }}{{ with $.Params.banner }}{{ $heroBannerSrc = .src }}{{ end }}{{ end }}{{ end -}}
  {{- with $heroBannerSrc -}}
  <div class="absolute inset-0">
    <img src="{{ . }}" alt="" class="w-full h-full object-cover" loading="eager" decoding="async">
  </div>
  {{- end -}}

  <!-- Cinematic overlay -->
  <div class="absolute inset-0 overlay-gradient-hero"></div>

  <!-- Hero content -->
  <div class="relative z-10 gutter-x pb-20 md:pb-32 w-full">
    <div class="max-w-5xl">

      <!-- Drop label + category badges -->
      <div class="flex flex-wrap items-center gap-3 mb-6">
        <span class="badge badge-gradient">Featured Drop</span>
        {{- with .Params.categories -}}
        {{- range first 1 . -}}
        <a href="/categories/{{ . | urlize }}/" class="badge badge-outline">{{ . }}</a>
        {{- end -}}
        {{- end -}}
      </div>

      <!-- Title -->
      <h1 class="font-display text-6xl md:text-8xl lg:text-[10rem] text-paper text-balance mb-6 leading-none">
        {{- .Title -}}
      </h1>

      <!-- Description -->
      <p class="text-chalk text-base md:text-lg max-w-2xl mb-10 leading-relaxed text-pretty font-body opacity-90">
        {{- .Description -}}
      </p>

      <!-- CTA + author -->
      <div class="flex flex-wrap items-center gap-6">
        <a href="{{ .RelPermalink }}" class="btn btn-outline">View Editorial {{ partial "icon.html" "arrow-right" }}</a>
        {{- with .Params.author -}}
          {{- $author := site.GetPage (printf "authors/%s" .) -}}
          {{- with $author -}}
          <div class="flex items-center gap-3">
            {{- $avRes := .Resources.GetMatch "avatar.*" -}}
            {{- $avSrc := "" -}}
            {{- with $avRes }}{{ $avSrc = .RelPermalink }}{{ else }}{{ with $author.Params.avatar }}{{ $avSrc = . }}{{ end }}{{ end -}}
            {{- with $avSrc -}}
            <img src="{{ . }}" alt="{{ $author.Params.name | default $author.Title }}"
              class="w-8 h-8 object-cover border border-heat/50">
            {{- end -}}
            <span class="label text-chalk">
              By <a href="{{ .RelPermalink }}" class="text-heat hover:text-frost transition-colors">{{ .Params.name | default .Title }}</a>
            </span>
          </div>
          {{- end -}}
        {{- end -}}
      </div>

    </div>
  </div>

  <!-- Scroll indicator -->
  <div class="absolute bottom-8 right-8 z-10 hidden md:flex flex-col items-center gap-2">
    <span class="label text-fog" style="writing-mode: vertical-lr; letter-spacing: 0.25em;">SCROLL</span>
    <div class="w-px h-12 bg-zinc relative overflow-hidden">
      <div class="absolute top-0 left-0 right-0 h-full"
        style="background: linear-gradient(var(--color-heat), var(--color-frost));
               animation: scroll-line 1.8s ease-in-out infinite;"></div>
    </div>
  </div>

</section>
{{- end -}}

<!-- ── SECONDARY FEATURED ────────────────────────────────────── -->
{{- with $secondary -}}
<section class="gutter-x py-14 md:py-20">
  <div class="flex items-center gap-5 mb-8">
    <span class="badge badge-pulse">Also Featured</span>
    <div class="flex-1 gradient-line"></div>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
    {{- range . -}}
    {{- partial "post-card-large.html" . -}}
    {{- end -}}
  </div>
</section>
{{- end -}}

<div class="gradient-line" style="opacity:0.2"></div>

<!-- ── LATEST POSTS ──────────────────────────────────────────── -->
<section class="gutter-x py-16 md:py-24 relative overflow-hidden">

  <!-- Decorative graffiti tag behind heading -->
  <div class="graffiti-tag absolute -top-6 -right-4 opacity-100 select-none pointer-events-none"
    style="-webkit-text-stroke-color: rgba(0,200,255,0.07);" aria-hidden="true">DROPS</div>

  <div class="relative z-10 flex flex-wrap items-end justify-between gap-4 mb-10">
    <h2 class="font-display text-5xl md:text-7xl leading-none">
      <span class="text-stroke-heat">LATEST</span>&nbsp;<span class="text-gradient">DROPS</span>
    </h2>
    <a href="/posts/" class="btn btn-ghost">All posts {{ partial "icon.html" "arrow-right" }}</a>
  </div>

  <div class="relative z-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
    {{- range first 8 $latest -}}
    {{- partial "post-card.html" . -}}
    {{- end -}}
  </div>

  {{- if gt (len $latest) 8 -}}
  <div class="relative z-10 mt-14 text-center">
    <a href="/posts/" class="btn btn-outline">View All {{ len $latest }} Posts {{ partial "icon.html" "arrow-right" }}</a>
  </div>
  {{- end -}}

</section>

<!-- ── ABOUT STRIP ───────────────────────────────────────────── -->
<section class="bg-concrete border-t border-b border-zinc gutter-x py-16 md:py-20 spray-bg relative overflow-hidden">
  <div class="max-w-3xl mx-auto text-center relative z-10">
    <span class="badge badge-frost text-void mb-6 inline-block">About the Magazine</span>
    <p class="font-display text-3xl md:text-5xl text-paper leading-tight text-balance mb-10">
      {{ .Site.Params.description }}
    </p>
    <a href="/about/" class="btn btn-outline">Learn more {{ partial "icon.html" "arrow-right" }}</a>
  </div>
</section>

{{- end -}}