section.html

{{ define "hero" }}
    <header class="header-hero header-hero-dark pb-0 mb-0 px-0 relative">
        <div class="absolute inset-0 -mx-2 z-10">
            <svg viewBox="0 0 1688 331" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g filter="url(#filter0_d)">
                    <path d="M4 0H1684C1684 211.842 1684 70.0914 1684 281.933C868.502 177.277 577.108 411.803 4 281.933V0Z" fill="url(#paint0_linear)"/>
                </g>
                <defs>
                    <filter id="filter0_d" x="0" y="0" width="1688" height="330.275" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
                        <feOffset dy="4"/>
                        <feGaussianBlur stdDeviation="2"/>
                        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
                    </filter>
                    <linearGradient id="paint0_linear" x1="844" y1="0" x2="844" y2="322.275" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#2A1337"/>
                        <stop offset="1" stop-color="#371A47"/>
                    </linearGradient>
                </defs>
            </svg>
        </div>
        <div class="mx-auto text-center relative z-20">
            <h1 class="font-bold font-body">{{ .Title }}</h1>
            <p class="text-xl leading-relaxed text-purple-100 max-w-md mx-auto">
                {{ .Description }}
            </p>
            <img src="/images/learn/lightningpus.svg" class="mt-2 mb-12 w-40 inline-block mx-auto" alt="">
        </div>
    </header>
{{ end }}

{{ define "main" }}
    {{ $modules := where (where .Site.Pages ".Type" "learn") ".Layout" "module" }}

    <div class="bg-purple-800 p-0 text-purple-100">
        <div class="pt-8 pb-64 mx-4 md:mx-0">
            <section id="modules">
                <div class="container mx-auto flex flex-col md:flex-row justify-center">
                    {{ range sort $modules ".Params.index" }}
                        <div class="md:w-1/3 flex flex-col rounded md:px-4">
                            <div>
                                {{ if .Params.meta_image }}
                                    <a class="block" href="{{ .RelPermalink }}">
                                        <img
                                            class="rounded-t border-b border-gray-300"
                                            src="{{ (.Resources.GetMatch .Params.meta_image).RelPermalink }}"
                                        alt="{{ .Title }}">
                                    </a>
                                {{ end }}
                            </div>
                            <div class="py-4 md:px-6 bg-white rounded-b">
                                <h2>
                                    <a href="{{ .RelPermalink }}" class="text-blue-500 hover:text-blue-400 transition-all font-body">
                                        {{ .Title }}
                                    </a>
                                </h2>
                                <p class="text-gray-800 my-4">
                                    {{ .Description }}
                                </p>
                                <div class="my-6">
                                    {{ partial "learn/summary" (dict "module" .) }}
                                </div>
                            </div>
                        </div>
                    {{ end }}
                </div>
            </section>
        </div>
    </div>
{{ end }}