{{ define "hero" }}
    {{ partial "hero" (dict "title" .Params.title ) }}
{{ end }}

{{ define "main" }}
    <div class="container mx-auto mt-12  max-w-7xl">
        <a class="text-blue-600 text-xl font-body ml-9 hidden sm:block" href="{{ relref . " /about" }}">
            <i class="fas fa-arrow-left mr-4"></i>
            About
        </a>

        <section id="leaders" class="mb-28">
            <div class="container mx-auto text-center">
                <h2 class="mb-8 text-center">Our Leaders</h2>
                <ul class="inline-flex flex-wrap list-none justify-center p-0 gap-x-8 gap-y-6">
                    {{ range (sort $.Site.Data.team.leadership "weight") }}
                        <li class="about-card border-2 border-gray-300 rounded-md flex overflow-hidden relative">
                            <div class="flex">
                                <img class="about-card-photo" src="/images/team/{{ .id }}.jpg" alt="{{ .name }}" />
                                <div class="flex flex-col justify-center text-left mx-4">
                                    <div class="font-display font-medium text-gray-900 text-3xl mb-3">{{ .name }}</div>
                                    <div class="text-sm text-gray-700">{{ .title }}</div>
                                </div>
                                <div class="opacity-0 hover:opacity-95 bg-blue-600 h-full w-full absolute flex justify-center social-overlay">
                                    {{ partial "widgets/social-icons.html" (dict "social" .social) }}
                                </div>
                            </div>
                        </li>
                    {{ end }}
                </ul>
            </div>
        </section>

        <section id="board" class="mb-28">
            <div class="container mx-auto text-center">
                <h2 class="mb-8 text-center">Our Board of Directors</h2>
                <ul class="inline-flex flex-wrap list-none justify-center p-0 gap-x-8 gap-y-6">
                    {{ range (sort $.Site.Data.team.board "weight") }}
                        <li class="about-card border-2 border-gray-300 rounded-md flex overflow-hidden relative">
                            <div class="flex">
                                <img class="about-card-photo" src="/images/team/{{ .id }}.jpg" alt="{{ .name }}" />
                                <div class="flex flex-col justify-center text-left mx-4">
                                    <div class="font-display font-medium text-gray-900 text-3xl mb-3">{{ .name }}</div>
                                    <div class="text-sm text-gray-700">{{ .title }}</div>
                                    <div class="text-sm text-gray-700">{{ .investor }}</div>
                                </div>
                                <div class="opacity-0 hover:opacity-95 bg-blue-600 h-full w-full absolute flex justify-center social-overlay">
                                    {{ partial "widgets/social-icons.html" (dict "social" .social) }}
                                </div>
                            </div>
                        </li>
                    {{ end }}
                </ul>
            </div>
        </section>
    </div>
{{ end }}