hugoWebsite/layouts/index.html

{{ define "main" }}
<main>
    <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">
                <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>
                    <h2 class="pb-2 text-3xl font-light text-gray-800 dark:text-gray-300 md:text-4xl">
                        {{ .Site.Params.Moto }}
                    </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>
                </div>
                <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" />
                </div>
            </div>
        </div>
    </div>

    <!-- More main page content here... -->

    <!-- Testimonial/stats section -->
    <div class="relative my-4">
        <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">
                <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">
                        <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" />
                            </pattern>
                        </defs>
                        <rect width="404" height="392" fill="url(#02f20b47-fd69-4224-a62a-4c9de5c763f7)" />
                    </svg>
                </div>
                <div class="relative max-w-md px-4 py-6 mx-auto sm:max-w-3xl sm:px-6 lg:max-w-none lg:px-0 lg:py-20">
                    <!-- Testimonial card-->
                    <div class="relative pt-64 pb-10 overflow-hidden shadow-xl rounded-2xl">
                        {{ $missionimage := resources.Get "images/pages/our-mission.png" }}
                        {{ with $missionimage }}
                        {{ with .Resize (printf "%dx%d webp q50" .Width .Height) }}
                        <img imgh src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}"
                             class="absolute inset-0 object-cover w-full h-full" alt="TailBliss - Our Mission"
                             loading="lazy" />
                        {{ end }}>
                        {{ end }}
                        <div class="absolute inset-0 bg-primary-300 mix-blend-multiply"></div>
                        <div class="absolute inset-0 bg-gradient-to-t from-primary-600 opacity-80">
                        </div>
                        <div class="relative px-8">
                            <div>
                                <img class="h-12" src="images/tailbliss-white.svg" alt="Workcation">
                            </div>
                            <blockquote class="mt-8">
                                <div class="relative text-lg font-medium text-white md:flex-grow">
                                    <svg class="absolute top-0 left-0 w-8 h-8 transform -translate-x-3 -translate-y-2 text-primary-400/30"
                                         fill="currentColor" viewBox="0 0 32 32" aria-hidden="true">
                                        <path
                                              d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
                                    </svg>
                                    <p class="relative">Tincidunt integer commodo, cursus etiam
                                        aliquam neque, et. Consectetur pretium in volutpat, diam.
                                        Montes, magna cursus nulla feugiat dignissim id lobortis
                                        amet.
                                    </p>
                                </div>

                                <footer class="mt-4">
                                    <p class="text-base font-semibold text-gray-200">
                                        John Doe, CEO at TailBliss
                                    </p>
                                </footer>
                            </blockquote>
                        </div>
                    </div>
                </div>
            </div>

            <div class="relative max-w-md px-4 mx-auto sm:max-w-3xl sm:px-6 lg:px-0">
                <!-- Content area -->
                <div class="md:pt-12 sm:pt-6 lg:pt-20">
                    <h2 class="text-3xl font-bold tracking-tight text-gray-900 capitalize dark:text-gray-50 sm:text-4xl">
                        {{ .Site.Params.P1.Heading }}
                    </h2>
                    <div class="mt-6 space-y-6 text-gray-900 dark:text-white">
                        {{ range .Site.Params.P1.Content }}
                        <p class="pb-6 mt-6 text-lg text-gray-900 dark:text-white">
                            {{ .text }}
                        </p>
                        {{ end }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Hero section -->
    <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">
                        <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl">
                            {{ .Site.Params.P2.Heading }}
                        </h1>
                        {{ range .Site.Params.P2.Content }}
                        <p class="pb-6 mt-6 text-lg text-gray-900 dark:text-white">
                            {{ .text }}
                        </p>
                        {{ end }}
                    </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">
                        <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" />
                            </pattern>
                        </defs>
                        <rect width="404" height="392" fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)" />
                    </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">
                    {{ $heroOne := resources.GetMatch "images/pages/hacktoberfest.jpg" }}

                    {{ $tiny := ($heroOne.Fit "480x280 q80") }}
                    {{ $small := ($heroOne.Fit "768x280 q80") }}
                    {{ $medium := ($heroOne.Fit "1024x280 q80") }}
                    {{ $large := ($heroOne.Fit "1374x1000 q80") }}

                    <img srcset="
                        {{- with $tiny.RelPermalink -}}{{.}} 480w{{- end -}}
                        {{- with $small.RelPermalink -}}, {{.}} 768w{{- end -}}
                        {{- with $medium.RelPermalink -}}, {{.}} 1024w{{- end -}}
                        {{- with $large.RelPermalink -}}, {{.}} 1374w{{- end -}}" src="{{ $heroOne.RelPermalink }}"
                         alt="TailBliss Hacktoberfest Image"
                         class="w-full rounded-lg shadow-xl lg:h-full lg:w-auto lg:max-w-none" loading="lazy" />
                </div>
            </div>
        </div>
    </div>

    <!-- Logo cloud 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">
                <div class="flex justify-center col-span-1 px-8 py-8 bg-gray-50 dark:bg-gray-900/10">
                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                         xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 138 48"
                         style="enable-background:new 0 0 138 48;" xml:space="preserve" alt="Logo" class="max-h-12">
                        <g>
                            <path class="text-gray-900 dark:text-white" d="M62,32.6V15.4h4.7v13.5h7v3.8H62z"
                                  fill="currentColor" />
                            <path class="text-gray-900 dark:text-white" fill="currentColor"
                                  d="M89.8,24c0,1.9-0.4,3.5-1.1,4.8c-0.7,1.3-1.8,2.3-3,3c-1.3,0.7-2.7,1-4.2,1c-1.6,0-3-0.3-4.2-1
                            c-1.3-0.7-2.3-1.7-3-3c-0.7-1.3-1.1-2.9-1.1-4.8c0-1.9,0.4-3.5,1.1-4.8c0.7-1.3,1.7-2.3,3-3c1.3-0.7,2.7-1,4.2-1c1.6,0,3,0.3,4.2,1
                            c1.3,0.7,2.3,1.7,3,3C89.5,20.5,89.8,22.1,89.8,24z M85,24c0-1-0.1-1.9-0.4-2.6c-0.3-0.7-0.7-1.2-1.2-1.6c-0.5-0.4-1.2-0.6-2-0.6
                            c-0.8,0-1.4,0.2-2,0.6c-0.5,0.4-0.9,0.9-1.2,1.6C78,22.1,77.9,23,77.9,24c0,1,0.1,1.9,0.4,2.6c0.3,0.7,0.7,1.2,1.2,1.6
                            c0.5,0.4,1.2,0.6,2,0.6c0.8,0,1.4-0.2,2-0.6c0.5-0.4,0.9-0.9,1.2-1.6C84.9,25.9,85,25,85,24z" />
                            <path class="text-gray-900 dark:text-white" fill="currentColor" d="M102,21.1c-0.1-0.3-0.2-0.6-0.3-0.8c-0.2-0.2-0.4-0.4-0.6-0.6c-0.2-0.2-0.5-0.3-0.8-0.4s-0.6-0.1-1-0.1
                            c-0.8,0-1.5,0.2-2,0.6c-0.6,0.4-1,0.9-1.3,1.6c-0.3,0.7-0.4,1.6-0.4,2.6c0,1,0.1,1.9,0.4,2.6c0.3,0.7,0.7,1.3,1.2,1.6
                            c0.5,0.4,1.2,0.6,2,0.6c0.7,0,1.3-0.1,1.8-0.3s0.8-0.5,1.1-0.9c0.2-0.4,0.4-0.8,0.4-1.3l0.8,0.1h-3.9V23h7.6v2.4c0,1.6-0.3,2.9-1,4
                            c-0.7,1.1-1.6,2-2.7,2.6c-1.2,0.6-2.5,0.9-4,0.9c-1.7,0-3.1-0.4-4.4-1.1c-1.3-0.7-2.3-1.7-3-3c-0.7-1.3-1.1-2.9-1.1-4.7
                            c0-1.4,0.2-2.7,0.7-3.8c0.4-1.1,1-2,1.8-2.8c0.8-0.8,1.7-1.3,2.7-1.7c1-0.4,2.1-0.6,3.3-0.6c1,0,2,0.1,2.8,0.4s1.7,0.7,2.3,1.2
                            c0.7,0.5,1.2,1.2,1.6,1.9c0.4,0.7,0.7,1.5,0.8,2.4H102z" />
                            <path class="text-gray-900 dark:text-white" fill="currentColor"
                                  d="M124.6,24c0,1.9-0.4,3.5-1.1,4.8c-0.7,1.3-1.8,2.3-3,3c-1.3,0.7-2.7,1-4.2,1c-1.6,0-3-0.3-4.2-1
                            c-1.3-0.7-2.3-1.7-3-3c-0.7-1.3-1.1-2.9-1.1-4.8c0-1.9,0.4-3.5,1.1-4.8c0.7-1.3,1.7-2.3,3-3c1.3-0.7,2.7-1,4.2-1c1.6,0,3,0.3,4.2,1
                            c1.3,0.7,2.3,1.7,3,3C124.2,20.5,124.6,22.1,124.6,24z M119.8,24c0-1-0.1-1.9-0.4-2.6c-0.3-0.7-0.7-1.2-1.2-1.6
                            c-0.5-0.4-1.2-0.6-2-0.6c-0.8,0-1.4,0.2-2,0.6c-0.5,0.4-0.9,0.9-1.2,1.6c-0.3,0.7-0.4,1.6-0.4,2.6c0,1,0.1,1.9,0.4,2.6
                            c0.3,0.7,0.7,1.2,1.2,1.6c0.5,0.4,1.2,0.6,2,0.6c0.8,0,1.4-0.2,2-0.6c0.5-0.4,0.9-0.9,1.2-1.6C119.7,25.9,119.8,25,119.8,24z" />
                        </g>
                        <g>
                            <g>
                                <polygon class="text-gray-900 dark:text-white" fill="currentColor"
                                         points="33.7,36.8 19,36.8 19,8 16.5,8 16.5,36.6 13.4,36.6 13.4,4.9 22.1,4.9 22.1,33.7 33.7,33.7" />
                            </g>
                            <g>
                                <polygon class="text-gray-900 dark:text-white" fill="currentColor" points="46.3,43.1 13.4,43.1 13.4,40 43.2,40 43.2,8 28.2,8 28.2,27.4 40,27.4 40,36.6 36.9,36.6 
                                36.9,30.5 25.1,30.5 25.1,4.9 46.3,4.9" />
                            </g>
                        </g>
                    </svg>

                </div>

                <div class="flex justify-center col-span-1 px-8 py-8 bg-gray-50 dark:bg-gray-900/10">
                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                         xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 138 48"
                         style="enable-background:new 0 0 138 48;" xml:space="preserve" alt="Logo" class="max-h-12">
                        <g>
                            <path class="text-gray-900 dark:text-white" d="M62,32.6V15.4h4.7v13.5h7v3.8H62z"
                                  fill="currentColor" />
                            <path class="text-gray-900 dark:text-white" fill="currentColor"
                                  d="M89.8,24c0,1.9-0.4,3.5-1.1,4.8c-0.7,1.3-1.8,2.3-3,3c-1.3,0.7-2.7,1-4.2,1c-1.6,0-3-0.3-4.2-1
                                                c-1.3-0.7-2.3-1.7-3-3c-0.7-1.3-1.1-2.9-1.1-4.8c0-1.9,0.4-3.5,1.1-4.8c0.7-1.3,1.7-2.3,3-3c1.3-0.7,2.7-1,4.2-1c1.6,0,3,0.3,4.2,1
                                                c1.3,0.7,2.3,1.7,3,3C89.5,20.5,89.8,22.1,89.8,24z M85,24c0-1-0.1-1.9-0.4-2.6c-0.3-0.7-0.7-1.2-1.2-1.6c-0.5-0.4-1.2-0.6-2-0.6
                                                c-0.8,0-1.4,0.2-2,0.6c-0.5,0.4-0.9,0.9-1.2,1.6C78,22.1,77.9,23,77.9,24c0,1,0.1,1.9,0.4,2.6c0.3,0.7,0.7,1.2,1.2,1.6
                                                c0.5,0.4,1.2,0.6,2,0.6c0.8,0,1.4-0.2,2-0.6c0.5-0.4,0.9-0.9,1.2-1.6C84.9,25.9,85,25,85,24z" />
                            <path class="text-gray-900 dark:text-white" fill="currentColor" d="M102,21.1c-0.1-0.3-0.2-0.6-0.3-0.8c-0.2-0.2-0.4-0.4-0.6-0.6c-0.2-0.2-0.5-0.3-0.8-0.4s-0.6-0.1-1-0.1
                                                c-0.8,0-1.5,0.2-2,0.6c-0.6,0.4-1,0.9-1.3,1.6c-0.3,0.7-0.4,1.6-0.4,2.6c0,1,0.1,1.9,0.4,2.6c0.3,0.7,0.7,1.3,1.2,1.6
                                                c0.5,0.4,1.2,0.6,2,0.6c0.7,0,1.3-0.1,1.8-0.3s0.8-0.5,1.1-0.9c0.2-0.4,0.4-0.8,0.4-1.3l0.8,0.1h-3.9V23h7.6v2.4c0,1.6-0.3,2.9-1,4
                                                c-0.7,1.1-1.6,2-2.7,2.6c-1.2,0.6-2.5,0.9-4,0.9c-1.7,0-3.1-0.4-4.4-1.1c-1.3-0.7-2.3-1.7-3-3c-0.7-1.3-1.1-2.9-1.1-4.7
                                                c0-1.4,0.2-2.7,0.7-3.8c0.4-1.1,1-2,1.8-2.8c0.8-0.8,1.7-1.3,2.7-1.7c1-0.4,2.1-0.6,3.3-0.6c1,0,2,0.1,2.8,0.4s1.7,0.7,2.3,1.2
                                                c0.7,0.5,1.2,1.2,1.6,1.9c0.4,0.7,0.7,1.5,0.8,2.4H102z" />
                            <path class="text-gray-900 dark:text-white" fill="currentColor"
                                  d="M124.6,24c0,1.9-0.4,3.5-1.1,4.8c-0.7,1.3-1.8,2.3-3,3c-1.3,0.7-2.7,1-4.2,1c-1.6,0-3-0.3-4.2-1
                                                c-1.3-0.7-2.3-1.7-3-3c-0.7-1.3-1.1-2.9-1.1-4.8c0-1.9,0.4-3.5,1.1-4.8c0.7-1.3,1.7-2.3,3-3c1.3-0.7,2.7-1,4.2-1c1.6,0,3,0.3,4.2,1
                                                c1.3,0.7,2.3,1.7,3,3C124.2,20.5,124.6,22.1,124.6,24z M119.8,24c0-1-0.1-1.9-0.4-2.6c-0.3-0.7-0.7-1.2-1.2-1.6
                                                c-0.5-0.4-1.2-0.6-2-0.6c-0.8,0-1.4,0.2-2,0.6c-0.5,0.4-0.9,0.9-1.2,1.6c-0.3,0.7-0.4,1.6-0.4,2.6c0,1,0.1,1.9,0.4,2.6
                                                c0.3,0.7,0.7,1.2,1.2,1.6c0.5,0.4,1.2,0.6,2,0.6c0.8,0,1.4-0.2,2-0.6c0.5-0.4,0.9-0.9,1.2-1.6C119.7,25.9,119.8,25,119.8,24z" />
                        </g>
                        <g>
                            <g>
                                <polygon class="text-gray-900 dark:text-white" fill="currentColor"
                                         points="33.7,36.8 19,36.8 19,8 16.5,8 16.5,36.6 13.4,36.6 13.4,4.9 22.1,4.9 22.1,33.7 33.7,33.7" />
                            </g>
                            <g>
                                <polygon class="text-gray-900 dark:text-white" fill="currentColor" points="46.3,43.1 13.4,43.1 13.4,40 43.2,40 43.2,8 28.2,8 28.2,27.4 40,27.4 40,36.6 36.9,36.6 
                                                    36.9,30.5 25.1,30.5 25.1,4.9 46.3,4.9" />
                            </g>
                        </g>
                    </svg>
                </div>

                <div class="flex justify-center col-span-1 px-8 py-8 bg-gray-50 dark:bg-gray-900/10">
                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                         xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 138 48"
                         style="enable-background:new 0 0 138 48;" xml:space="preserve" alt="Logo" class="max-h-12">
                        <g>
                            <path class="text-gray-900 dark:text-white" d="M62,32.6V15.4h4.7v13.5h7v3.8H62z"
                                  fill="currentColor" />
                            <path class="text-gray-900 dark:text-white" fill="currentColor"
                                  d="M89.8,24c0,1.9-0.4,3.5-1.1,4.8c-0.7,1.3-1.8,2.3-3,3c-1.3,0.7-2.7,1-4.2,1c-1.6,0-3-0.3-4.2-1
                                                                    c-1.3-0.7-2.3-1.7-3-3c-0.7-1.3-1.1-2.9-1.1-4.8c0-1.9,0.4-3.5,1.1-4.8c0.7-1.3,1.7-2.3,3-3c1.3-0.7,2.7-1,4.2-1c1.6,0,3,0.3,4.2,1
                                                                    c1.3,0.7,2.3,1.7,3,3C89.5,20.5,89.8,22.1,89.8,24z M85,24c0-1-0.1-1.9-0.4-2.6c-0.3-0.7-0.7-1.2-1.2-1.6c-0.5-0.4-1.2-0.6-2-0.6
                                                                    c-0.8,0-1.4,0.2-2,0.6c-0.5,0.4-0.9,0.9-1.2,1.6C78,22.1,77.9,23,77.9,24c0,1,0.1,1.9,0.4,2.6c0.3,0.7,0.7,1.2,1.2,1.6
                                                                    c0.5,0.4,1.2,0.6,2,0.6c0.8,0,1.4-0.2,2-0.6c0.5-0.4,0.9-0.9,1.2-1.6C84.9,25.9,85,25,85,24z" />
                            <path class="text-gray-900 dark:text-white" fill="currentColor"
                                  d="M102,21.1c-0.1-0.3-0.2-0.6-0.3-0.8c-0.2-0.2-0.4-0.4-0.6-0.6c-0.2-0.2-0.5-0.3-0.8-0.4s-0.6-0.1-1-0.1
                                                                    c-0.8,0-1.5,0.2-2,0.6c-0.6,0.4-1,0.9-1.3,1.6c-0.3,0.7-0.4,1.6-0.4,2.6c0,1,0.1,1.9,0.4,2.6c0.3,0.7,0.7,1.3,1.2,1.6
                                                                    c0.5,0.4,1.2,0.6,2,0.6c0.7,0,1.3-0.1,1.8-0.3s0.8-0.5,1.1-0.9c0.2-0.4,0.4-0.8,0.4-1.3l0.8,0.1h-3.9V23h7.6v2.4c0,1.6-0.3,2.9-1,4
                                                                    c-0.7,1.1-1.6,2-2.7,2.6c-1.2,0.6-2.5,0.9-4,0.9c-1.7,0-3.1-0.4-4.4-1.1c-1.3-0.7-2.3-1.7-3-3c-0.7-1.3-1.1-2.9-1.1-4.7
                                                                    c0-1.4,0.2-2.7,0.7-3.8c0.4-1.1,1-2,1.8-2.8c0.8-0.8,1.7-1.3,2.7-1.7c1-0.4,2.1-0.6,3.3-0.6c1,0,2,0.1,2.8,0.4s1.7,0.7,2.3,1.2
                                                                    c0.7,0.5,1.2,1.2,1.6,1.9c0.4,0.7,0.7,1.5,0.8,2.4H102z" />
                            <path class="text-gray-900 dark:text-white" fill="currentColor"
                                  d="M124.6,24c0,1.9-0.4,3.5-1.1,4.8c-0.7,1.3-1.8,2.3-3,3c-1.3,0.7-2.7,1-4.2,1c-1.6,0-3-0.3-4.2-1
                                                                    c-1.3-0.7-2.3-1.7-3-3c-0.7-1.3-1.1-2.9-1.1-4.8c0-1.9,0.4-3.5,1.1-4.8c0.7-1.3,1.7-2.3,3-3c1.3-0.7,2.7-1,4.2-1c1.6,0,3,0.3,4.2,1
                                                                    c1.3,0.7,2.3,1.7,3,3C124.2,20.5,124.6,22.1,124.6,24z M119.8,24c0-1-0.1-1.9-0.4-2.6c-0.3-0.7-0.7-1.2-1.2-1.6
                                                                    c-0.5-0.4-1.2-0.6-2-0.6c-0.8,0-1.4,0.2-2,0.6c-0.5,0.4-0.9,0.9-1.2,1.6c-0.3,0.7-0.4,1.6-0.4,2.6c0,1,0.1,1.9,0.4,2.6
                                                                    c0.3,0.7,0.7,1.2,1.2,1.6c0.5,0.4,1.2,0.6,2,0.6c0.8,0,1.4-0.2,2-0.6c0.5-0.4,0.9-0.9,1.2-1.6C119.7,25.9,119.8,25,119.8,24z" />
                        </g>
                        <g>
                            <g>
                                <polygon class="text-gray-900 dark:text-white" fill="currentColor"
                                         points="33.7,36.8 19,36.8 19,8 16.5,8 16.5,36.6 13.4,36.6 13.4,4.9 22.1,4.9 22.1,33.7 33.7,33.7" />
                            </g>
                            <g>
                                <polygon class="text-gray-900 dark:text-white" fill="currentColor" points="46.3,43.1 13.4,43.1 13.4,40 43.2,40 43.2,8 28.2,8 28.2,27.4 40,27.4 40,36.6 36.9,36.6 
                                                                        36.9,30.5 25.1,30.5 25.1,4.9 46.3,4.9" />
                            </g>
                        </g>
                    </svg>
                </div>

                <div class="flex justify-center col-span-1 px-8 py-8 bg-gray-50 dark:bg-gray-900/10">
                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                         xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 138 48"
                         style="enable-background:new 0 0 138 48;" xml:space="preserve" alt="Logo" class="max-h-12">
                        <g>
                            <path class="text-gray-900 dark:text-white" d="M62,32.6V15.4h4.7v13.5h7v3.8H62z"
                                  fill="currentColor" />
                            <path class="text-gray-900 dark:text-white" fill="currentColor"
                                  d="M89.8,24c0,1.9-0.4,3.5-1.1,4.8c-0.7,1.3-1.8,2.3-3,3c-1.3,0.7-2.7,1-4.2,1c-1.6,0-3-0.3-4.2-1
                                                                    c-1.3-0.7-2.3-1.7-3-3c-0.7-1.3-1.1-2.9-1.1-4.8c0-1.9,0.4-3.5,1.1-4.8c0.7-1.3,1.7-2.3,3-3c1.3-0.7,2.7-1,4.2-1c1.6,0,3,0.3,4.2,1
                                                                    c1.3,0.7,2.3,1.7,3,3C89.5,20.5,89.8,22.1,89.8,24z M85,24c0-1-0.1-1.9-0.4-2.6c-0.3-0.7-0.7-1.2-1.2-1.6c-0.5-0.4-1.2-0.6-2-0.6
                                                                    c-0.8,0-1.4,0.2-2,0.6c-0.5,0.4-0.9,0.9-1.2,1.6C78,22.1,77.9,23,77.9,24c0,1,0.1,1.9,0.4,2.6c0.3,0.7,0.7,1.2,1.2,1.6
                                                                    c0.5,0.4,1.2,0.6,2,0.6c0.8,0,1.4-0.2,2-0.6c0.5-0.4,0.9-0.9,1.2-1.6C84.9,25.9,85,25,85,24z" />
                            <path class="text-gray-900 dark:text-white" fill="currentColor"
                                  d="M102,21.1c-0.1-0.3-0.2-0.6-0.3-0.8c-0.2-0.2-0.4-0.4-0.6-0.6c-0.2-0.2-0.5-0.3-0.8-0.4s-0.6-0.1-1-0.1
                                                                    c-0.8,0-1.5,0.2-2,0.6c-0.6,0.4-1,0.9-1.3,1.6c-0.3,0.7-0.4,1.6-0.4,2.6c0,1,0.1,1.9,0.4,2.6c0.3,0.7,0.7,1.3,1.2,1.6
                                                                    c0.5,0.4,1.2,0.6,2,0.6c0.7,0,1.3-0.1,1.8-0.3s0.8-0.5,1.1-0.9c0.2-0.4,0.4-0.8,0.4-1.3l0.8,0.1h-3.9V23h7.6v2.4c0,1.6-0.3,2.9-1,4
                                                                    c-0.7,1.1-1.6,2-2.7,2.6c-1.2,0.6-2.5,0.9-4,0.9c-1.7,0-3.1-0.4-4.4-1.1c-1.3-0.7-2.3-1.7-3-3c-0.7-1.3-1.1-2.9-1.1-4.7
                                                                    c0-1.4,0.2-2.7,0.7-3.8c0.4-1.1,1-2,1.8-2.8c0.8-0.8,1.7-1.3,2.7-1.7c1-0.4,2.1-0.6,3.3-0.6c1,0,2,0.1,2.8,0.4s1.7,0.7,2.3,1.2
                                                                    c0.7,0.5,1.2,1.2,1.6,1.9c0.4,0.7,0.7,1.5,0.8,2.4H102z" />
                            <path class="text-gray-900 dark:text-white" fill="currentColor"
                                  d="M124.6,24c0,1.9-0.4,3.5-1.1,4.8c-0.7,1.3-1.8,2.3-3,3c-1.3,0.7-2.7,1-4.2,1c-1.6,0-3-0.3-4.2-1
                                                                    c-1.3-0.7-2.3-1.7-3-3c-0.7-1.3-1.1-2.9-1.1-4.8c0-1.9,0.4-3.5,1.1-4.8c0.7-1.3,1.7-2.3,3-3c1.3-0.7,2.7-1,4.2-1c1.6,0,3,0.3,4.2,1
                                                                    c1.3,0.7,2.3,1.7,3,3C124.2,20.5,124.6,22.1,124.6,24z M119.8,24c0-1-0.1-1.9-0.4-2.6c-0.3-0.7-0.7-1.2-1.2-1.6
                                                                    c-0.5-0.4-1.2-0.6-2-0.6c-0.8,0-1.4,0.2-2,0.6c-0.5,0.4-0.9,0.9-1.2,1.6c-0.3,0.7-0.4,1.6-0.4,2.6c0,1,0.1,1.9,0.4,2.6
                                                                    c0.3,0.7,0.7,1.2,1.2,1.6c0.5,0.4,1.2,0.6,2,0.6c0.8,0,1.4-0.2,2-0.6c0.5-0.4,0.9-0.9,1.2-1.6C119.7,25.9,119.8,25,119.8,24z" />
                        </g>
                        <g>
                            <g>
                                <polygon class="text-gray-900 dark:text-white" fill="currentColor"
                                         points="33.7,36.8 19,36.8 19,8 16.5,8 16.5,36.6 13.4,36.6 13.4,4.9 22.1,4.9 22.1,33.7 33.7,33.7" />
                            </g>
                            <g>
                                <polygon class="text-gray-900 dark:text-white" fill="currentColor" points="46.3,43.1 13.4,43.1 13.4,40 43.2,40 43.2,8 28.2,8 28.2,27.4 40,27.4 40,36.6 36.9,36.6 
                                                                        36.9,30.5 25.1,30.5 25.1,4.9 46.3,4.9" />
                            </g>
                        </g>
                    </svg>
                </div>

                <div class="flex justify-center col-span-1 px-8 py-8 bg-gray-50 dark:bg-gray-900/10">
                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                         xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 138 48"
                         style="enable-background:new 0 0 138 48;" xml:space="preserve" alt="Logo" class="max-h-12">
                        <g>
                            <path class="text-gray-900 dark:text-white" d="M62,32.6V15.4h4.7v13.5h7v3.8H62z"
                                  fill="currentColor" />
                            <path class="text-gray-900 dark:text-white" fill="currentColor"
                                  d="M89.8,24c0,1.9-0.4,3.5-1.1,4.8c-0.7,1.3-1.8,2.3-3,3c-1.3,0.7-2.7,1-4.2,1c-1.6,0-3-0.3-4.2-1
                                                                    c-1.3-0.7-2.3-1.7-3-3c-0.7-1.3-1.1-2.9-1.1-4.8c0-1.9,0.4-3.5,1.1-4.8c0.7-1.3,1.7-2.3,3-3c1.3-0.7,2.7-1,4.2-1c1.6,0,3,0.3,4.2,1
                                                                    c1.3,0.7,2.3,1.7,3,3C89.5,20.5,89.8,22.1,89.8,24z M85,24c0-1-0.1-1.9-0.4-2.6c-0.3-0.7-0.7-1.2-1.2-1.6c-0.5-0.4-1.2-0.6-2-0.6
                                                                    c-0.8,0-1.4,0.2-2,0.6c-0.5,0.4-0.9,0.9-1.2,1.6C78,22.1,77.9,23,77.9,24c0,1,0.1,1.9,0.4,2.6c0.3,0.7,0.7,1.2,1.2,1.6
                                                                    c0.5,0.4,1.2,0.6,2,0.6c0.8,0,1.4-0.2,2-0.6c0.5-0.4,0.9-0.9,1.2-1.6C84.9,25.9,85,25,85,24z" />
                            <path class="text-gray-900 dark:text-white" fill="currentColor"
                                  d="M102,21.1c-0.1-0.3-0.2-0.6-0.3-0.8c-0.2-0.2-0.4-0.4-0.6-0.6c-0.2-0.2-0.5-0.3-0.8-0.4s-0.6-0.1-1-0.1
                                                                    c-0.8,0-1.5,0.2-2,0.6c-0.6,0.4-1,0.9-1.3,1.6c-0.3,0.7-0.4,1.6-0.4,2.6c0,1,0.1,1.9,0.4,2.6c0.3,0.7,0.7,1.3,1.2,1.6
                                                                    c0.5,0.4,1.2,0.6,2,0.6c0.7,0,1.3-0.1,1.8-0.3s0.8-0.5,1.1-0.9c0.2-0.4,0.4-0.8,0.4-1.3l0.8,0.1h-3.9V23h7.6v2.4c0,1.6-0.3,2.9-1,4
                                                                    c-0.7,1.1-1.6,2-2.7,2.6c-1.2,0.6-2.5,0.9-4,0.9c-1.7,0-3.1-0.4-4.4-1.1c-1.3-0.7-2.3-1.7-3-3c-0.7-1.3-1.1-2.9-1.1-4.7
                                                                    c0-1.4,0.2-2.7,0.7-3.8c0.4-1.1,1-2,1.8-2.8c0.8-0.8,1.7-1.3,2.7-1.7c1-0.4,2.1-0.6,3.3-0.6c1,0,2,0.1,2.8,0.4s1.7,0.7,2.3,1.2
                                                                    c0.7,0.5,1.2,1.2,1.6,1.9c0.4,0.7,0.7,1.5,0.8,2.4H102z" />
                            <path class="text-gray-900 dark:text-white" fill="currentColor"
                                  d="M124.6,24c0,1.9-0.4,3.5-1.1,4.8c-0.7,1.3-1.8,2.3-3,3c-1.3,0.7-2.7,1-4.2,1c-1.6,0-3-0.3-4.2-1
                                                                    c-1.3-0.7-2.3-1.7-3-3c-0.7-1.3-1.1-2.9-1.1-4.8c0-1.9,0.4-3.5,1.1-4.8c0.7-1.3,1.7-2.3,3-3c1.3-0.7,2.7-1,4.2-1c1.6,0,3,0.3,4.2,1
                                                                    c1.3,0.7,2.3,1.7,3,3C124.2,20.5,124.6,22.1,124.6,24z M119.8,24c0-1-0.1-1.9-0.4-2.6c-0.3-0.7-0.7-1.2-1.2-1.6
                                                                    c-0.5-0.4-1.2-0.6-2-0.6c-0.8,0-1.4,0.2-2,0.6c-0.5,0.4-0.9,0.9-1.2,1.6c-0.3,0.7-0.4,1.6-0.4,2.6c0,1,0.1,1.9,0.4,2.6
                                                                    c0.3,0.7,0.7,1.2,1.2,1.6c0.5,0.4,1.2,0.6,2,0.6c0.8,0,1.4-0.2,2-0.6c0.5-0.4,0.9-0.9,1.2-1.6C119.7,25.9,119.8,25,119.8,24z" />
                        </g>
                        <g>
                            <g>
                                <polygon class="text-gray-900 dark:text-white" fill="currentColor"
                                         points="33.7,36.8 19,36.8 19,8 16.5,8 16.5,36.6 13.4,36.6 13.4,4.9 22.1,4.9 22.1,33.7 33.7,33.7" />
                            </g>
                            <g>
                                <polygon class="text-gray-900 dark:text-white" fill="currentColor" points="46.3,43.1 13.4,43.1 13.4,40 43.2,40 43.2,8 28.2,8 28.2,27.4 40,27.4 40,36.6 36.9,36.6 
                                                                        36.9,30.5 25.1,30.5 25.1,4.9 46.3,4.9" />
                            </g>
                        </g>
                    </svg>
                </div>

                <div class="flex justify-center col-span-1 px-8 py-8 bg-gray-50 dark:bg-gray-900/10">
                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                         xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 138 48"
                         style="enable-background:new 0 0 138 48;" xml:space="preserve" alt="Logo" class="max-h-12">
                        <g>
                            <path class="text-gray-900 dark:text-white" d="M62,32.6V15.4h4.7v13.5h7v3.8H62z"
                                  fill="currentColor" />
                            <path class="text-gray-900 dark:text-white" fill="currentColor"
                                  d="M89.8,24c0,1.9-0.4,3.5-1.1,4.8c-0.7,1.3-1.8,2.3-3,3c-1.3,0.7-2.7,1-4.2,1c-1.6,0-3-0.3-4.2-1
                                                                    c-1.3-0.7-2.3-1.7-3-3c-0.7-1.3-1.1-2.9-1.1-4.8c0-1.9,0.4-3.5,1.1-4.8c0.7-1.3,1.7-2.3,3-3c1.3-0.7,2.7-1,4.2-1c1.6,0,3,0.3,4.2,1
                                                                    c1.3,0.7,2.3,1.7,3,3C89.5,20.5,89.8,22.1,89.8,24z M85,24c0-1-0.1-1.9-0.4-2.6c-0.3-0.7-0.7-1.2-1.2-1.6c-0.5-0.4-1.2-0.6-2-0.6
                                                                    c-0.8,0-1.4,0.2-2,0.6c-0.5,0.4-0.9,0.9-1.2,1.6C78,22.1,77.9,23,77.9,24c0,1,0.1,1.9,0.4,2.6c0.3,0.7,0.7,1.2,1.2,1.6
                                                                    c0.5,0.4,1.2,0.6,2,0.6c0.8,0,1.4-0.2,2-0.6c0.5-0.4,0.9-0.9,1.2-1.6C84.9,25.9,85,25,85,24z" />
                            <path class="text-gray-900 dark:text-white" fill="currentColor"
                                  d="M102,21.1c-0.1-0.3-0.2-0.6-0.3-0.8c-0.2-0.2-0.4-0.4-0.6-0.6c-0.2-0.2-0.5-0.3-0.8-0.4s-0.6-0.1-1-0.1
                                                                    c-0.8,0-1.5,0.2-2,0.6c-0.6,0.4-1,0.9-1.3,1.6c-0.3,0.7-0.4,1.6-0.4,2.6c0,1,0.1,1.9,0.4,2.6c0.3,0.7,0.7,1.3,1.2,1.6
                                                                    c0.5,0.4,1.2,0.6,2,0.6c0.7,0,1.3-0.1,1.8-0.3s0.8-0.5,1.1-0.9c0.2-0.4,0.4-0.8,0.4-1.3l0.8,0.1h-3.9V23h7.6v2.4c0,1.6-0.3,2.9-1,4
                                                                    c-0.7,1.1-1.6,2-2.7,2.6c-1.2,0.6-2.5,0.9-4,0.9c-1.7,0-3.1-0.4-4.4-1.1c-1.3-0.7-2.3-1.7-3-3c-0.7-1.3-1.1-2.9-1.1-4.7
                                                                    c0-1.4,0.2-2.7,0.7-3.8c0.4-1.1,1-2,1.8-2.8c0.8-0.8,1.7-1.3,2.7-1.7c1-0.4,2.1-0.6,3.3-0.6c1,0,2,0.1,2.8,0.4s1.7,0.7,2.3,1.2
                                                                    c0.7,0.5,1.2,1.2,1.6,1.9c0.4,0.7,0.7,1.5,0.8,2.4H102z" />
                            <path class="text-gray-900 dark:text-white" fill="currentColor"
                                  d="M124.6,24c0,1.9-0.4,3.5-1.1,4.8c-0.7,1.3-1.8,2.3-3,3c-1.3,0.7-2.7,1-4.2,1c-1.6,0-3-0.3-4.2-1
                                                                    c-1.3-0.7-2.3-1.7-3-3c-0.7-1.3-1.1-2.9-1.1-4.8c0-1.9,0.4-3.5,1.1-4.8c0.7-1.3,1.7-2.3,3-3c1.3-0.7,2.7-1,4.2-1c1.6,0,3,0.3,4.2,1
                                                                    c1.3,0.7,2.3,1.7,3,3C124.2,20.5,124.6,22.1,124.6,24z M119.8,24c0-1-0.1-1.9-0.4-2.6c-0.3-0.7-0.7-1.2-1.2-1.6
                                                                    c-0.5-0.4-1.2-0.6-2-0.6c-0.8,0-1.4,0.2-2,0.6c-0.5,0.4-0.9,0.9-1.2,1.6c-0.3,0.7-0.4,1.6-0.4,2.6c0,1,0.1,1.9,0.4,2.6
                                                                    c0.3,0.7,0.7,1.2,1.2,1.6c0.5,0.4,1.2,0.6,2,0.6c0.8,0,1.4-0.2,2-0.6c0.5-0.4,0.9-0.9,1.2-1.6C119.7,25.9,119.8,25,119.8,24z" />
                        </g>
                        <g>
                            <g>
                                <polygon class="text-gray-900 dark:text-white" fill="currentColor"
                                         points="33.7,36.8 19,36.8 19,8 16.5,8 16.5,36.6 13.4,36.6 13.4,4.9 22.1,4.9 22.1,33.7 33.7,33.7" />
                            </g>
                            <g>
                                <polygon class="text-gray-900 dark:text-white" fill="currentColor" points="46.3,43.1 13.4,43.1 13.4,40 43.2,40 43.2,8 28.2,8 28.2,27.4 40,27.4 40,36.6 36.9,36.6 
                                                                        36.9,30.5 25.1,30.5 25.1,4.9 46.3,4.9" />
                            </g>
                        </g>
                    </svg>
                </div>
            </div>
            <div>
                <h2 class="pt-6 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
                    Backed by world-renowned investors
                </h2>
                <p class="max-w-3xl mt-6 text-lg leading-7 text-gray-900 dark:text-white">Sagittis scelerisque nulla
                    cursus in enim
                    consectetur quam. Dictum urna sed consectetur neque tristique pellentesque. Blandit amet, sed
                    aenean erat arcu morbi. Cursus faucibus nunc nisl netus morbi vel porttitor vitae ut. Amet vitae
                    fames senectus vitae.
                </p>
                <div class="my-6">
                    <a href="#" class="text-base font-medium text-primary-400 dark:text-primary-100">
                        Meet our investors and advisors&nbsp&rarr;
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="relative px-1 pt-8 pb-4 bg-transparent lg:px-8 lg:pt-12 lg:mb-4 md:mt-12">
        <div class="absolute inset-0">
            <div class="bg-gray-200 dark:bg-gray-900/50 h-1/3 sm:h-2/3"></div>
        </div>
        <div class="relative px-2 mx-auto max-w-7xl">
            <div class="text-center">
                <h2
                    class="text-3xl font-black tracking-tight text-primary-500 capitalize dark:text-primary-300 sm:text-4xl">
                    From the blog
                </h2>
                <p class="max-w-2xl mx-auto mt-3 text-xl text-gray-500 dark:text-gray-300 sm:mt-4">Lorem ipsum dolor
                    sit amet consectetur,
                    adipisicing elit. Ipsa libero labore natus atque, ducimus sed.</p>
            </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">
                    <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>
                            <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}}
                                    </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">
                                    <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 capitalize">{{ .LinkTitle }}</a>
                                    {{- end -}}
                                </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">
                                            {{ .Params.author }}
                                        </p>
                                        <div class="flex space-x-1 text-sm text-gray-500 dark:text-white">
                                            <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}}
    <!-- CTA section -->
    <div class="relative pb-16 mt-6">
        <div aria-hidden="true" class="hidden sm:block">
            <div class="absolute inset-y-0 left-0 w-1/2 rounded-r-3xl bg-gray-50 dark:bg-gray-900/10">
            </div>
            <svg class="absolute -ml-3 top-8 left-1/2" width="404" height="392" fill="none" viewBox="0 0 404 392">
                <defs>
                    <pattern id="8228f071-bcee-4ec8-905a-2a059a2cc4fb" 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" />
                    </pattern>
                </defs>
                <rect width="404" height="392" fill="url(#8228f071-bcee-4ec8-905a-2a059a2cc4fb)" />
            </svg>
        </div>
        <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 bg-primary-500 shadow-xl rounded-2xl sm:px-12 sm:py-20">
                <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" />
                    </svg>
                </div>
                <div class="relative">
                    <div class="sm:text-center">
                        <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">
                            Stay Up to Date
                        </h2>
                        <p class="max-w-2xl mx-auto mt-6 text-lg text-primary-100">Sagittis
                            scelerisque nulla cursus in enim consectetur quam. Dictum urna sed
                            consectetur neque tristique pellentesque.</p>
                    </div>
                    <form action="#" class="mt-12 sm:mx-auto sm:flex sm:max-w-lg">
                        <div class="flex-1 min-w-0">
                            <label for="cta-email" class="sr-only">Email address</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="Enter your email">
                        </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">Notify
                                me</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{ end }}

</main>
{{ end }}