{{ 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">
                        TailBliss</h1>
                    <h2 class="pb-2 text-3xl font-light text-gray-800 dark:text-gray-300 md:text-4xl">
                        Super Fast, and Flexible
                    </h2>
                    <a href="https://github.com/nusserstudios/tailbliss"
                       class="inline-flex py-4 mx-auto space-x-4 sm:text-center">
                        <span class="rounded bg-gray-50 px-2.5 py-1 text-sm font-bold text-gray-900">
                            What's new
                        </span>
                        <span
                              class="inline-flex items-center space-x-1 text-sm font-medium text-gray-800 dark:text-white">
                            <span>Just shipped version 0.1.0</span>
                            <!-- Heroicon name: mini/chevron-right -->
                            <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                 fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd"
                                      d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
                                      clip-rule="evenodd" />
                            </svg>
                        </span>
                    </a>
                    <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">
                        A Hugo theme built with love, using TailwindCSS 3, Apline.JS, and Hugo
                        Pipes. Images are optimized for use with Hugo Pipes for WebP format.</p>
                </div>
                <div class="col-span-6">
                    <img src="/images/tailbliss-rocket-indigo.webp" width="100%" height="" alt=""
                         class="w-full max-w-xl mx-auto rounded-lg" alt="TailBliss Hero" />
                </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">
                        <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" />
                        {{ end }}>
                        {{ end }}
                        <div class="absolute inset-0 bg-indigo-300 mix-blend-multiply"></div>
                        <div class="absolute inset-0 bg-gradient-to-t from-indigo-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-indigo-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">
                        Our mission</h2>
                    <div class="mt-6 space-y-6 text-gray-900 dark:text-gray-300">
                        <p class="text-lg">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>
                        <p class="text-base leading-7">Sollicitudin tristique eros erat odio sed
                            vitae, consequat turpis elementum. Lorem nibh vel, eget pretium arcu
                            vitae. Eros eu viverra donec ut volutpat donec laoreet quam urna.
                            Sollicitudin tristique eroserat odio sed vitae, consequat turpis elementum. Lorem nibh vel,
                            eget pretium arcu vitae. Eros eu viverra donec ut volutpat donec laoreet quam urna.
                        </p>
                        <p class="text-base leading-7">Rhoncus nisl, libero egestas diam fermentum
                            dui. At quis tincidunt vel ultricies. Vulputate aliquet velit faucibus semper.
                            Pellentesque in venenatis vestibulum consectetur nibh id. In id ut tempus egestas. Enim sit
                            aliquam nec, a. Morbi enim fermentum lacus in. Viverra.
                        </p>
                    </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-gray-50 sm:text-5xl">
                            Just in time for Hacktoberfest with JIT Tailwind.
                        </h1>
                        <p class="pb-12 mt-6 text-lg text-gray-500 dark:text-gray-400">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at purus non enim commodo
                            tincidunt vel in nulla. Aenean pretium dolor non ultricies bibendum. Etiam quis blandit
                            enim. Nunc condimentum ut lorem in faucibus. Phasellus varius ligula et commodo tristique.
                            Nunc sodales nisl nec
                            laoreet vehicula. Donec velit nibh, sollicitudin at nulla a, egestas dignissim eros. Sed
                            lacinia hendrerit interdum.
                            Vestibulum pellentesque sem venenatis nisl tempor accumsan sit amet tempus felis. Mauris leo
                            diam, porttitor nec
                            bibendum id, tempus ac nulla. Etiam congue ornare erat at convallis. Donec in nisi dapibus,
                            mattis risus vel, imperdiet enim. Donec
                            fermentum sit amet tortor nec tincidunt. Nam nec lectus tortor. Nunc sit amet laoreet orci,
                            porta ornare massa. Phasellus
                            eget lorem mi. Nam eleifend ultricies sapien, quis mollis leo bibendum at. Quisque viverra
                            lorem sit amet magna aliquet, et dignissim arcu eleifend.
                        </p>
                    </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">
                        <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">
                    {{ $bannerOne := resources.GetMatch "images/pages/hacktoberfest.jpg" }}

                    {{ $tiny := ($bannerOne.Fit "480x280 q80") }}
                    {{ $small := ($bannerOne.Fit "768x280 q80") }}
                    {{ $medium := ($bannerOne.Fit "1024x280 q80") }}
                    {{ $large := ($bannerOne.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="{{ $bannerOne.RelPermalink }}"
                         alt="TailBliss Hacktoberfest Image"
                         class="w-full rounded-lg shadow-xl lg:h-full lg:w-auto lg:max-w-none" />
                </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">
                    <img class="max-h-12" src="https://tailwindui.com/img/logos/transistor-logo-gray-400.svg"
                         alt="Transistor">
                </div>

                <div class="flex justify-center col-span-1 px-8 py-8 bg-gray-50 dark:bg-gray-900/10">
                    <img class="max-h-12" src="https://tailwindui.com/img/logos/mirage-logo-gray-400.svg" alt="Mirage">
                </div>

                <div class="flex justify-center col-span-1 px-8 py-8 bg-gray-50 dark:bg-gray-900/10">
                    <img class="max-h-12" src="https://tailwindui.com/img/logos/tuple-logo-gray-400.svg" alt="Tuple">
                </div>

                <div class="flex justify-center col-span-1 px-8 py-8 bg-gray-50 dark:bg-gray-900/10">
                    <img class="max-h-12" src="https://tailwindui.com/img/logos/laravel-logo-gray-400.svg"
                         alt="Laravel">
                </div>

                <div class="flex justify-center col-span-1 px-8 py-8 bg-gray-50 dark:bg-gray-900/10">
                    <img class="max-h-12" src="https://tailwindui.com/img/logos/statickit-logo-gray-400.svg"
                         alt="StaticKit">
                </div>

                <div class="flex justify-center col-span-1 px-8 py-8 bg-gray-50 dark:bg-gray-900/10">
                    <img class="max-h-12" src="https://tailwindui.com/img/logos/workcation-logo-gray-400.svg"
                         alt="Workcation">
                </div>
            </div>
            <div>
                <h2 class="pt-6 text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">
                    Backed by world-renowned investors
                </h2>
                <p class="max-w-3xl mt-6 text-lg leading-7 text-gray-500">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-indigo-500">
                        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-900 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-indigo-500 capitalize dark:text-gray-50 sm:text-4xl">
                    From the blog
                </h2>
                <p class="max-w-2xl mx-auto mt-3 text-xl text-gray-500 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 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">
                            {{ 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="" />
                            {{ end }}
                            {{ end }}
                            <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-indigo-600 dark:hover:text-indigo-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-indigo-600 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-indigo-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-gray-300">
                                            {{ .Params.author }}
                                        </p>
                                        <div class="flex space-x-1 text-sm text-gray-500">
                                            <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>

    <!-- 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-indigo-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">
                        <path class="text-indigo-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-indigo-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-indigo-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-indigo-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-indigo-500 sm:px-10">Notify
                                me</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</main>
{{ end }}