bar/layouts/index.html

{{ define "main" }}
  {{- $pages     := .Site.RegularPages -}}
  {{- $featured  := first 8 (shuffle $pages) -}}
  {{- $hero      := index (shuffle $pages) 0 -}}
  {{- $cats      := .Site.Taxonomies.categories.ByCount -}}
  {{- $glasses   := .Site.Taxonomies.glasses.ByCount -}}
  {{- $ings      := .Site.Taxonomies.ingredients.ByCount -}}

  {{/* Spirit type counts (alcoholic isn't a Hugo taxonomy) */}}
  {{- $nAlcoholic := 0 -}}
  {{- $nNonAlc    := 0 -}}
  {{- $nOptional  := 0 -}}
  {{- range $pages -}}
    {{- if eq .Params.alcoholic "Alcoholic" -}}{{- $nAlcoholic = add $nAlcoholic 1 -}}
    {{- else if eq .Params.alcoholic "Non alcoholic" -}}{{- $nNonAlc = add $nNonAlc 1 -}}
    {{- else -}}{{- $nOptional = add $nOptional 1 -}}
    {{- end -}}
  {{- end -}}

  <!-- ══ HERO ══════════════════════════════════════════════════════════════ -->
  <section class="relative pt-12 overflow-hidden max-[768px]:pt-7">
    <div class="max-w-[1280px] mx-auto px-8 max-[860px]:px-5">
      <div class="grid grid-cols-[1.05fr_0.95fr] gap-14 items-center min-h-[62vh] max-[900px]:grid-cols-1 max-[900px]:gap-9 max-[900px]:min-h-0 max-[900px]:pb-2.5 rise">

        <!-- Copy -->
        <div class="max-w-[560px]">
          <div class="eyebrow">Bar Pivoine — A Field Guide to the Good Pour</div>
          <h1 class="display text-[clamp(46px,7.2vw,92px)] mt-[22px]">
            The quiet art of the <em class="italic text-gold-2 not-italic" style="font-style:italic">evening</em> cocktail.
          </h1>
          <p class="text-[18px] leading-[1.55] mt-[26px] max-w-[480px] text-ink-soft">
            A curated cellar of <b class="text-gold-2 font-semibold">{{ len $pages }}</b> recipes — every measure, every method, photographed in low amber light. Search by spirit, glass, or whatever sits in your cabinet tonight.
          </p>
          <div class="flex gap-[14px] mt-[34px] flex-wrap max-[768px]:gap-[10px]">
            <a href="/recipes/" class="btn btn-gold">
              Browse the cellar
              {{- partial "icon.html" "arrow-right" -}}
            </a>
            <a href="{{ $hero.RelPermalink }}" class="btn btn-ghost">Tonight's pour</a>
          </div>
        </div>

        <!-- Art frame -->
        <div class="relative max-[900px]:max-w-[440px]">
          <div class="relative rounded-[18px] overflow-hidden border border-warm/18 shadow-[0_50px_90px_-40px_#000,0_0_0_1px_rgba(0,0,0,0.4)] aspect-square frame-overlay">
            {{- $heroImg := $hero.Resources.GetMatch "cocktail.*" -}}
            {{- if $heroImg -}}
              {{- partial "img.html" (dict
                "res"    $heroImg
                "widths" (slice 800 1200)
                "sizes"  "(max-width: 900px) 100vw, 50vw"
                "class"  "w-full h-full object-cover"
                "alt"    $hero.Title
                "loading" "eager"
              ) -}}
            {{- else -}}
              <img
                src="{{ $hero.Params.drinkThumbnail }}"
                alt="{{ $hero.Title }}"
                loading="eager"
                decoding="sync"
                class="w-full h-full object-cover"
              />
            {{- end -}}
            <!-- Caption overlay -->
            <div class="absolute left-0 right-0 bottom-0 z-[2] flex justify-between px-[18px] py-4 font-mono text-[11px] tracking-[0.12em] uppercase text-ink-soft">
              <span>{{ $hero.Title }}</span>
            </div>
          </div>
        </div>

      </div>
    </div>

    <!-- Separator -->
    <div class="mt-14 max-[768px]:mt-9 max-[480px]:mt-7 h-px bg-[linear-gradient(90deg,transparent_0%,rgba(233,210,180,0.18)_12%,rgba(233,210,180,0.18)_88%,transparent_100%)]"></div>
  </section>

  <!-- ══ EXPLORE INDEX ═════════════════════════════════════════════════════ -->
  <section class="pt-[84px] pb-[84px] relative max-[768px]:pt-[52px] max-[768px]:pb-[52px] max-[480px]:pt-10 max-[480px]:pb-10">
    <div class="max-w-[1280px] mx-auto px-8 max-[860px]:px-5">

      <div class="flex items-end justify-between gap-6 mb-[38px]">
        <div>
          <div class="eyebrow">Find your way in</div>
          <h2 class="font-serif font-medium text-[clamp(34px,5vw,56px)] leading-none tracking-[-0.015em] mt-[10px] mb-0 max-[768px]:text-[clamp(28px,6vw,40px)]">Explore the index</h2>
        </div>
        <a href="/recipes/" class="inline-flex items-center gap-[5px] font-mono text-[12px] tracking-[0.08em] uppercase text-ink-soft border-b border-warm/18 pb-[3px] transition-all duration-200 whitespace-nowrap hover:text-gold-2 hover:border-gold">
          All recipes {{- partial "icon.html" "arrow-right" -}}
        </a>
      </div>

      <!-- Tax tiles grid -->
      <div class="grid grid-cols-4 gap-[18px] max-[900px]:grid-cols-2 max-[900px]:gap-3 max-[520px]:grid-cols-1">

        <!-- Spirit Styles tile -->
        <div class="border border-warm/10 rounded-[14px] bg-surface p-[22px] transition-all duration-[240ms] hover:border-warm/18 hover:bg-surface-2">
          <div class="flex items-center gap-[10px] pb-4 mb-1.5 border-b border-warm/10">
            <span class="text-gold text-[17px] leading-none">◑</span>
            <span class="font-mono text-[11px] tracking-[0.14em] uppercase text-ink">Spirit Styles</span>
            <span class="ml-auto font-mono text-[11px] text-ink-faint">3</span>
          </div>
          <div>
            <a href="/recipes/?alcoholic=alcoholic" class="flex justify-between items-center gap-3 py-2 text-[14.5px] text-ink-soft border-b border-warm/[0.04] transition-all duration-[160ms] hover:text-gold-2 hover:pl-[5px]">
              <span class="flex-1 min-w-0 whitespace-nowrap overflow-hidden text-ellipsis">Alcoholic</span>
              <span class="text-ink-faint text-[11px] font-mono">{{ $nAlcoholic }}</span>
            </a>
            <a href="/recipes/?alcoholic=non-alcoholic" class="flex justify-between items-center gap-3 py-2 text-[14.5px] text-ink-soft border-b border-warm/[0.04] transition-all duration-[160ms] hover:text-gold-2 hover:pl-[5px]">
              <span class="flex-1 min-w-0 whitespace-nowrap overflow-hidden text-ellipsis">Non alcoholic</span>
              <span class="text-ink-faint text-[11px] font-mono">{{ $nNonAlc }}</span>
            </a>
            <a href="/recipes/?alcoholic=optional-alcohol" class="flex justify-between items-center gap-3 py-2 text-[14.5px] text-ink-soft transition-all duration-[160ms] hover:text-gold-2 hover:pl-[5px]">
              <span class="flex-1 min-w-0 whitespace-nowrap overflow-hidden text-ellipsis">Optional alcohol</span>
              <span class="text-ink-faint text-[11px] font-mono">{{ $nOptional }}</span>
            </a>
          </div>
        </div>

        <!-- Categories tile -->
        <div class="border border-warm/10 rounded-[14px] bg-surface p-[22px] transition-all duration-[240ms] hover:border-warm/18 hover:bg-surface-2">
          <div class="flex items-center gap-[10px] pb-4 mb-1.5 border-b border-warm/10">
            <span class="text-gold text-[17px] leading-none">❖</span>
            <span class="font-mono text-[11px] tracking-[0.14em] uppercase text-ink">Categories</span>
            <span class="ml-auto font-mono text-[11px] text-ink-faint">{{ len $cats }}</span>
          </div>
          <div class="max-h-[320px] overflow-y-auto pr-2">
            {{- range $cats -}}
              <a href="{{ .Page.RelPermalink }}" class="flex justify-between items-center gap-3 py-2 text-[14.5px] text-ink-soft border-b border-warm/[0.04] transition-all duration-[160ms] hover:text-gold-2 hover:pl-[5px] last:border-b-0">
                <span class="flex-1 min-w-0 whitespace-nowrap overflow-hidden text-ellipsis">{{ .Page.Title }}</span>
                <span class="text-ink-faint text-[11px] font-mono">{{ .Count }}</span>
              </a>
            {{- end -}}
          </div>
        </div>

        <!-- Glassware tile -->
        <div class="border border-warm/10 rounded-[14px] bg-surface p-[22px] transition-all duration-[240ms] hover:border-warm/18 hover:bg-surface-2">
          <div class="flex items-center gap-[10px] pb-4 mb-1.5 border-b border-warm/10">
            <span class="text-gold text-[17px] leading-none">▽</span>
            <span class="font-mono text-[11px] tracking-[0.14em] uppercase text-ink">Glassware</span>
            <span class="ml-auto font-mono text-[11px] text-ink-faint">{{ len $glasses }}</span>
          </div>
          <div class="max-h-[320px] overflow-y-auto pr-2">
            {{- range $glasses -}}
              <a href="{{ .Page.RelPermalink }}" class="flex justify-between items-center gap-3 py-2 text-[14.5px] text-ink-soft border-b border-warm/[0.04] transition-all duration-[160ms] hover:text-gold-2 hover:pl-[5px] last:border-b-0">
                <span class="flex-1 min-w-0 whitespace-nowrap overflow-hidden text-ellipsis">{{ .Page.Title }}</span>
                <span class="text-ink-faint text-[11px] font-mono">{{ .Count }}</span>
              </a>
            {{- end -}}
          </div>
        </div>

        <!-- Ingredients tile -->
        <div class="border border-warm/10 rounded-[14px] bg-surface p-[22px] transition-all duration-[240ms] hover:border-warm/18 hover:bg-surface-2">
          <div class="flex items-center gap-[10px] pb-4 mb-1.5 border-b border-warm/10">
            <span class="text-gold text-[17px] leading-none">✦</span>
            <span class="font-mono text-[11px] tracking-[0.14em] uppercase text-ink">Ingredients</span>
            <span class="ml-auto font-mono text-[11px] text-ink-faint">{{ len $ings }}</span>
          </div>
          <div class="max-h-[320px] overflow-y-auto pr-2">
            {{- range $ings -}}
              <a href="{{ .Page.RelPermalink }}" class="flex justify-between items-center gap-3 py-2 text-[14.5px] text-ink-soft border-b border-warm/[0.04] transition-all duration-[160ms] hover:text-gold-2 hover:pl-[5px] last:border-b-0">
                <span class="flex-1 min-w-0 whitespace-nowrap overflow-hidden text-ellipsis">{{ .Page.Title }}</span>
                <span class="text-ink-faint text-[11px] font-mono">{{ .Count }}</span>
              </a>
            {{- end -}}
          </div>
        </div>

      </div>
    </div>
  </section>

  <!-- ══ SELECTED POURS ════════════════════════════════════════════════════ -->
  <section class="pt-0 pb-[84px] relative max-[768px]:pb-[52px] max-[480px]:pb-10">
    <div class="max-w-[1280px] mx-auto px-8 max-[860px]:px-5">

      <div class="flex items-end justify-between gap-6 mb-[38px]">
        <div>
          <div class="eyebrow">The cabinet</div>
          <h2 class="font-serif font-medium text-[clamp(34px,5vw,56px)] leading-none tracking-[-0.015em] mt-[10px] mb-0 max-[768px]:text-[clamp(28px,6vw,40px)]">Selected pours</h2>
        </div>
        <a href="/recipes/" class="inline-flex items-center gap-[5px] font-mono text-[12px] tracking-[0.08em] uppercase text-ink-soft border-b border-warm/18 pb-[3px] transition-all duration-200 whitespace-nowrap hover:text-gold-2 hover:border-gold">
          See all {{- partial "icon.html" "arrow-right" -}}
        </a>
      </div>

      <div class="grid [grid-template-columns:repeat(auto-fill,minmax(258px,1fr))] gap-[22px] max-[560px]:[grid-template-columns:repeat(auto-fill,minmax(150px,1fr))] max-[560px]:gap-3.5">
        {{- range $featured -}}
          {{- partial "cocktail-card.html" . -}}
        {{- end -}}
      </div>

    </div>
  </section>

{{ end }}