tw-runner/mysite/layouts/partials/content/products/feature.html

Run and manage Tower Website projects with this utility.

<section class="text-center md:text-left">
  {{ $page := .Site.GetPage "products/_index.md" }}
  {{ if $page }}
  <h1 class="font-medium">{{ $page.Title }}</h1>
  <div class="box box-md grid grid-cols-5 gap-6 justify-between items-center">
    {{ partial "components/cards/base.html" (dict
      "page" $page
      "styles" "p-0 col-span-5 md:col-span-3 text-2xl gap-4"
      "content" $page.Summary
      "cta" "See All Products"
      "noHeading" true
      "noShare" true
      "pStyles" "font-thin text-3xl"
      "footerStyles" "justify-center md:justify-end gap-4"
      "ctaStyles" "btn-sm btn-primary-highlight text-sm"
    ) }}
    <div class="col-span-5 md:col-span-2 grid grid-cols-3 -mx-9 md:mx-auto">
      {{ range first 6 $page.Params.examples }}
        {{ $image := $page.Resources.GetMatch .image }}
        {{ $img := $image.Fit "640x360 webp" }}
        {{ $name := (replace .name " " "")}}
        <div id="prod-image-{{$name}}" class="aspect-[4/3] md:min-h-[8rem] bg-cover bg-center">
          <style>
            #prod-image-{{$name}} {
              background-image: url('{{ $img.RelPermalink }}');
            }
          </style>
        </div>
      {{ end }}
    </div>
  </div>
  {{ end }}
</section>
<section id="newest-products" class="box md:box-xl grid gap-6">
  {{ $products := sort (where .Site.RegularPages "Section" "products") "Date" "desc" }}
  {{ $featured := first 2 $products }}
  {{ $rest := after 2 $products }}

  {{/*  Render the featured products  */}}
  {{ if gt (len $featured) 0 }}
  {{ partial "content/products/collections/featured.html" $featured }}
  {{ end }}

  {{/*  Render a list of products  */}}
  {{ if gt (len $rest) 0 }}
  {{ partial "content/products/collections/list.html" (dict "list" $rest) }}
  {{ end }}

  {{ partial "components/sections/seeMore.html" $page }}
</section>