hugoWebsite/layouts/index.html

276 lines
16 KiB
HTML
Raw Normal View History

2022-10-29 00:20:35 +02:00
{{ define "main" }}
<main>
2022-10-29 16:51:00 +02:00
<div class="bg-gray-200 dark:bg-gray-900">
<div class="max-w-screen-xl px-4 py-8 mx-auto">
<div class="grid items-center gap-8 mb-8 sm:mb-0 lg:gap-12 lg:grid-cols-12">
2022-10-29 16:51:00 +02:00
<div class="col-span-6 px-4 text-center sm:mb-6 lg:text-left lg:mb-0">
<h1 class="mb-2 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl xl:text-6xl dark:text-white">
{{ .Site.Title }}
</h1>
2022-10-29 16:51:00 +02:00
<h2 class="pb-2 text-3xl font-light text-gray-800 dark:text-gray-300 md:text-4xl">
{{ .Site.Params.Moto }}
2022-10-29 16:51:00 +02:00
</h2>
<p class="max-w-xl mx-auto mb-6 font-normal text-gray-900 lg:mx-0 xl:mb-2 md:text-lg xl:text-xl dark:text-gray-50">
{{ .Site.Params.Description}}
</p>
2022-10-29 00:20:35 +02:00
</div>
2022-10-29 16:51:00 +02:00
<div class="col-span-6">
{{ $hero := resources.GetMatch "images/pages/tailbliss-rocket-indigo.png" }}
{{ $thumb := ($hero.Fill "400x400 webp q90") }}
{{ $large := ($hero.Fill "576x576 webp q90") }}
<img srcset="
{{- with $thumb.RelPermalink -}}{{.}} 400w{{- end -}}
{{- with $large.RelPermalink -}}, {{.}} 576w{{- end -}}" src="{{ $hero.RelPermalink }}" width="100%" height="" alt="TailBliss Hero" class="w-full max-w-xl mx-auto rounded-lg" />
2022-10-29 00:20:35 +02:00
</div>
</div>
</div>
</div>
<!-- More main page content here... -->
<!-- Our mission section -->
2022-10-29 16:51:00 +02:00
<div class="relative my-4">
2022-10-29 00:20:35 +02:00
<div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-cols-2 lg:items-start lg:gap-24 lg:px-8">
<div class="relative sm:py-8 lg:py-0">
2022-10-29 00:20:35 +02:00
<div aria-hidden="true" class="hidden sm:block lg:absolute lg:inset-y-0 lg:right-0 lg:w-screen">
<div class="absolute inset-y-0 w-full bg-gray-50 dark:bg-gray-900/10 right-1/2 rounded-r-3xl lg:right-72"></div><svg class="absolute -ml-3 top-8 left-1/2 lg:-right-8 lg:left-auto lg:top-12" width="404" height="392" fill="none" viewBox="0 0 404 392" loading="lazy">
2022-10-29 00:20:35 +02:00
<defs>
<pattern id="02f20b47-fd69-4224-a62a-4c9de5c763f7" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="4" height="4" class="text-gray-200 dark:text-gray-900/60" fill="currentcolor"></rect>
2022-10-29 00:20:35 +02:00
</pattern>
</defs>
<rect width="404" height="392" fill="url(#02f20b47-fd69-4224-a62a-4c9de5c763f7)"></rect>
2022-10-29 00:20:35 +02:00
</svg>
</div>
<div class="relative w-full h-auto px-4 py-6 mx-auto sm:max-w-3xl sm:px-6 lg:px-0 lg:py-20">
<div class="overflow-hidden shadow-xl rounded-2xl">
{{ $p1image := resources.Get .Site.Params.P1.Image }}
{{ with $p1image }}
{{ with .Resize (printf "%dx%d webp q90" .Width .Height) }}
<img imgh src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" class="w-full h-auto" alt="P1" loading="lazy" />
{{ end }}
2022-10-29 00:20:35 +02:00
{{ end }}
</div>
</div>
</div>
<div class="relative max-w-md px-4 mx-auto sm:max-w-3xl sm:px-6 lg:px-0">
<div class="md:pt-12 sm:pt-6 lg:pt-20">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">
{{ .Site.Params.P1.Heading }}
</h2>
<div class="mt-6 text-gray-900 dark:text-white">
<div class="mt-6 space-y-6 text-gray-900 dark:text-white">
{{ range .Site.Params.P1.Content }}
<p class="text-lg text-gray-900 dark:text-white">
{{ .text }}
</p>
{{ end }}
</div>
2022-10-29 00:20:35 +02:00
</div>
</div>
</div>
</div>
</div>
<!-- JITsection -->
<div class="overflow-hidden sm:pt-6 lg:relative">
<div class="max-w-md px-4 mx-auto sm:max-w-3xl sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-2 lg:gap-12 lg:px-8">
<div>
<div class="md:mt-8">
<div class="mt-6 sm:max-w-xl">
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl md:mt-16">
{{ .Site.Params.P2.Heading }}
</h2>
{{ range .Site.Params.P2.Content }}
<p class="pb-12 mt-6 text-lg text-gray-900 dark:text-white">
{{ .text }}
2022-10-29 00:20:35 +02:00
</p>
{{ end }}
</p>
2022-10-29 00:20:35 +02:00
</div>
</div>
</div>
</div>
<div class="sm:mx-auto sm:max-w-3xl sm:px-6">
<div class="md:py-12 sm:relative sm:mt-12 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
<div class="hidden sm:block">
<div class="absolute inset-y-0 w-screen left-1/2 rounded-l-3xl bg-gray-50 dark:bg-gray-900/10 lg:left-80 lg:right-0 lg:w-full"></div><svg class="absolute -mr-3 top-8 right-1/2 lg:left-0 lg:m-0" width="404" height="392" fill="none" viewBox="0 0 404 392" loading="lazy">
2022-10-29 00:20:35 +02:00
<defs>
<pattern id="837c3e70-6c3a-44e6-8854-cc48c737b659" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="4" height="4" class="text-gray-200 dark:text-gray-900/60" fill="currentcolor"></rect>
2022-10-29 00:20:35 +02:00
</pattern>
</defs>
<rect width="404" height="392" fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"></rect>
2022-10-29 00:20:35 +02:00
</svg>
</div>
<div class="relative pl-4 -mr-40 sm:mx-auto sm:max-w-3xl sm:px-0 lg:h-full lg:max-w-none lg:pl-12">
{{ $p2image := resources.Get .Site.Params.P2.Image }}
{{ with $p2image }}
{{ with .Resize (printf "%dx%d webp q90" .Width .Height) }}
<img imgh src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="p2" class="w-full rounded-lg shadow-xl lg:h-full lg:w-auto lg:max-w-none" loading="lazy" />
{{ end }}
{{ end }}
2022-10-29 00:20:35 +02:00
</div>
</div>
</div>
</div>
2023-06-08 12:34:31 +02:00
<!-- Sponsors section -->
<div class="max-w-md px-4 mx-auto md:pt-24 md:pb-16 sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
<div class="lg:grid lg:grid-cols-2 lg:items-center lg:gap-24">
<div class="mt-12 grid grid-cols-2 gap-0.5 md:grid-cols-3 lg:mt-0 lg:grid-cols-2">
2023-06-08 12:34:31 +02:00
{{ range .Site.Params.P3.Logos }}
<div class="flex justify-center col-span-1 px-8 py-8 bg-gray-50 dark:bg-gray-900/10">
2023-06-08 16:13:49 +02:00
{{ if .image }}
{{ $sponsor := resources.Get .image }}
<img src="{{ $sponsor.RelPermalink }}" class="max-h-12 dark:invert" alt="{{ .alt }}" loading="lazy" />
2023-06-08 16:13:49 +02:00
{{ else }}
{{ $sponsor := resources.Get "images/global/sample-logo.svg" }}
<img src="{{ $sponsor.RelPermalink }}" class="max-h-12 dark:invert" alt="{{ .alt }}" loading="lazy" />
2023-06-08 16:13:49 +02:00
{{ end }}
2022-10-29 00:20:35 +02:00
</div>
2023-06-08 12:34:31 +02:00
{{ end }}
</div>
<div>
2023-06-08 12:34:31 +02:00
<h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">
{{ .Site.Params.P3.Heading }}
</h2>
{{ range .Site.Params.P3.Content }}
2023-06-08 11:57:50 +02:00
<p class="max-w-3xl mt-6 text-lg leading-7 text-gray-900 dark:text-white">
{{ .text }}
</p>
{{ end }}
{{ range .Site.Params.P3.Links }}
<div class="my-6">
<a href="{{ .url }}" class="text-base font-medium text-primary-400 dark:text-primary-100">
{{ .text }}&nbsp&rarr;
</a>
2022-10-29 00:20:35 +02:00
</div>
{{ end }}
2022-10-29 00:20:35 +02:00
</div>
</div>
</div>
2023-06-08 12:34:31 +02:00
<!-- Blog section -->
<div class="relative px-1 pt-8 pb-4 bg-transparent lg:px-8 lg:pt-12 lg:mb-4 md:mt-12">
2022-10-29 00:20:35 +02:00
<div class="absolute inset-0">
<div class="bg-gray-200 dark:bg-gray-900/50 h-1/3 sm:h-2/3"></div>
2022-10-29 00:20:35 +02:00
</div>
<div class="relative px-2 mx-auto max-w-7xl">
2022-10-29 00:20:35 +02:00
<div class="text-center">
<h2 class="text-3xl font-black tracking-tight text-primary-500 dark:text-primary-300 sm:text-4xl">
{{ .Site.Params.P4.Heading }}
2022-10-29 00:20:35 +02:00
</h2>
{{ range .Site.Params.P4.Content }}
<p class="max-w-2xl mx-auto mt-3 text-xl text-gray-500 dark:text-gray-300 sm:mt-4">
{{ .text }}
</p>
{{ end }}
2022-10-29 00:20:35 +02:00
</div>
<div class="mx-auto text-gray-900 max-w-7xl dark:text-gray-50 md:px-1.5">
<div class="px-4 text-gray-900 dark:text-white not-prose dark:text-zinc-200">
2022-10-29 00:20:35 +02:00
<div class="grid gap-4 mx-auto mt-12 mb-4 lg:max-w-none md:grid-cols-3">
{{ range (.Paginator 3).Pages }}
<div class="flex flex-col overflow-hidden rounded-lg shadow-lg bg-gray-50 dark:bg-gray-900">
<a href="{{.Permalink}}">
{{ with .Params.featured_image }}
{{ with resources.Get . }}
{{ $postimage := (.Resize "500x webp q90").RelPermalink }}
<img src="{{ $postimage }}" class="object-fill overflow-hidden rounded-t-lg" width="100%" height="" loading="lazy" alt="{{ .Title }}" />
{{ end }}
{{ end }}
</a>
2022-10-29 00:20:35 +02:00
<div class="p-6">
<div class="flex-1">
<a href="{{.Permalink}}" class="block mt-2 text-2xl font-black text-gray-900 dark:text-gray-200 hover:text-primary-600 dark:hover:text-primary-500 hover:underline">
{{ .Title }}
2022-10-29 00:20:35 +02:00
</a>
<p class="mt-3 text-base text-gray-900 dark:text-gray-300">
{{ .Params.summary }}
</p>
</div>
<div class="flex pt-6 font-medium text-primary-600 dark:text-primary-100 text-md">
2022-10-29 00:20:35 +02:00
<span class="pr-2 font-black">Tags:</span>
{{ range $elem_index, $elem_val := (.GetTerms "tags") }}
{{- if gt $elem_index 0 }}, {{ end -}}
<a href="{{ .Permalink }}" class="inline-flex items-center rounded-md bg-gray-300 hover:bg-primary-200 hover:text-black px-2.5 py-0.5 text-sm font-medium text-gray-900 ">{{ .LinkTitle }}</a>
{{- end -}}
2022-10-29 00:20:35 +02:00
</div>
<div class="flex items-center mt-6">
<div class="flex-shrink-0">
<span class="sr-only">{{ .Params.author }}</span>
{{ with .Params.authorimage }}
{{ with resources.Get . }}
{{ $authorimage := (.Resize "400x webp").RelPermalink }}
<img class="w-10 h-10 rounded-full" src="{{ $authorimage }}" alt="">
{{ end }}
{{ end }}
</div>
<div class="pt-1 ml-3">
<p class="text-sm font-medium text-gray-900 dark:text-white">
2022-10-29 00:20:35 +02:00
{{ .Params.author }}
</p>
<div class="flex space-x-1 text-sm text-gray-500 dark:text-white">
2022-10-29 00:20:35 +02:00
<time datetime="2020-02-12">{{.Date.Format "2006-01-02"}}</time>
<span aria-hidden="true">&middot;</span>
<span>{{ math.Round (div (countwords .Content) 220.0) }}
min read</span>
</div>
</div>
</div>
</div>
</div>
{{ end }}
</div>
</div>
</div>
</div>
</div>
{{ if not .Site.Params.Disable_stay_uptodate}}
2022-10-29 00:20:35 +02:00
<!-- CTA section -->
<div class="relative pb-16 mt-6">
<div class="max-w-md mx-auto px-7 sm:max-w-3xl lg:max-w-7xl">
<div class="relative px-6 py-10 overflow-hidden shadow-xl bg-primary-500 rounded-2xl sm:px-12 sm:py-20">
2022-10-29 00:20:35 +02:00
<div aria-hidden="true" class="absolute inset-0 -mt-72 sm:-mt-32 md:mt-0">
<svg class="absolute inset-0 w-full h-full" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1463 360" loading="lazy">
<path class="text-primary-600 text-opacity-40" fill="currentColor" d="M-82.673 72l1761.849 472.086-134.327 501.315-1761.85-472.086z" />
<path class="text-primary-600 text-opacity-40" fill="currentColor" d="M-217.088 544.086L1544.761 72l134.327 501.316-1761.849 472.086z" />
2022-10-29 00:20:35 +02:00
</svg>
</div>
<div class="relative">
<div class="sm:text-center">
<h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">
{{ .Site.Params.P5.Heading }}
2022-10-29 00:20:35 +02:00
</h2>
{{ range .Site.Params.P5.Content }}
<p class="max-w-2xl mx-auto mt-6 text-lg text-primary-100">
{{ .text }}
</p>
{{ end }}
2022-10-29 00:20:35 +02:00
</div>
<form action="{{ .Site.Params.P5.Action }}" class="mt-12 sm:mx-auto sm:flex sm:max-w-lg">
2022-10-29 00:20:35 +02:00
<div class="flex-1 min-w-0">
<label for="cta-email" class="sr-only">{{ .Site.Params.P5.Label }}</label>
<input id="cta-email" type="email" class="block w-full px-5 py-3 text-base text-gray-900 placeholder-gray-500 border border-transparent rounded-md shadow-sm focus:border-transparent focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-500" placeholder="{{ .Site.Params.P5.Placeholder }}">
2022-10-29 00:20:35 +02:00
</div>
<div class="mt-4 sm:mt-0 sm:ml-3">
<button type="submit" class="block w-full px-5 py-3 text-base font-medium text-white bg-gray-900 border border-transparent rounded-md shadow hover:bg-black focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-500 sm:px-10">
{{ .Site.Params.P5.Button }}
</button>
2022-10-29 00:20:35 +02:00
</div>
</form>
</div>
</div>
</div>
</div>
{{ end }}
2022-10-29 00:20:35 +02:00
</main>
{{ end }}