People

<div class="bg-white">
    <div class="max-w-7xl mx-auto py-12 px-4 text-center sm:px-6 lg:px-8 lg:py-24">
        <div class="space-y-8 sm:space-y-12">
            <div class="space-y-5 sm:mx-auto sm:max-w-xl sm:space-y-4 lg:max-w-5xl">
                <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl">The People</h2>
                <p class="text-xl text-gray-500">Risus velit condimentum vitae tincidunt tincidunt. Mauris ridiculus fusce amet urna nunc. Ut nisl ornare diam in.</p>
            </div>
            <ul role="list" class="mx-auto grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-4 md:gap-x-6 lg:max-w-5xl lg:gap-x-8 lg:gap-y-12 xl:grid-cols-6">

                <li>
                    <div class="space-y-4">
                        <img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" src="https://loremflickr.com/64/64/people?99747" alt="">
                        <div class="space-y-2">
                            <div class="text-xs font-medium lg:text-sm">
                                <h3>Clarence Rau</h3>
                                <p class="text-indigo-600">Investor Solutions Orchestrator</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="space-y-4">
                        <img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" src="https://loremflickr.com/64/64/people?60268" alt="">
                        <div class="space-y-2">
                            <div class="text-xs font-medium lg:text-sm">
                                <h3>Dr. Archie Yundt</h3>
                                <p class="text-indigo-600">Principal Identity Facilitator</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="space-y-4">
                        <img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" src="https://loremflickr.com/64/64/people?24274" alt="">
                        <div class="space-y-2">
                            <div class="text-xs font-medium lg:text-sm">
                                <h3>Ms. Shaun Paucek</h3>
                                <p class="text-indigo-600">International Optimization Liaison</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="space-y-4">
                        <img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" src="https://loremflickr.com/64/64/people?95070" alt="">
                        <div class="space-y-2">
                            <div class="text-xs font-medium lg:text-sm">
                                <h3>Louise Ryan</h3>
                                <p class="text-indigo-600">Internal Solutions Assistant</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="space-y-4">
                        <img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" src="https://loremflickr.com/64/64/people?82850" alt="">
                        <div class="space-y-2">
                            <div class="text-xs font-medium lg:text-sm">
                                <h3>Carrie Armstrong</h3>
                                <p class="text-indigo-600">International Accounts Manager</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="space-y-4">
                        <img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" src="https://loremflickr.com/64/64/people?91717" alt="">
                        <div class="space-y-2">
                            <div class="text-xs font-medium lg:text-sm">
                                <h3>Micheal Pfeffer</h3>
                                <p class="text-indigo-600">Senior Accounts Supervisor</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="space-y-4">
                        <img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" src="https://loremflickr.com/64/64/people?86321" alt="">
                        <div class="space-y-2">
                            <div class="text-xs font-medium lg:text-sm">
                                <h3>Sylvia Schamberger</h3>
                                <p class="text-indigo-600">Regional Directives Assistant</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="space-y-4">
                        <img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" src="https://loremflickr.com/64/64/people?39170" alt="">
                        <div class="space-y-2">
                            <div class="text-xs font-medium lg:text-sm">
                                <h3>Bill Howell</h3>
                                <p class="text-indigo-600">Regional Usability Technician</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="space-y-4">
                        <img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" src="https://loremflickr.com/64/64/people?67453" alt="">
                        <div class="space-y-2">
                            <div class="text-xs font-medium lg:text-sm">
                                <h3>Marcos Rath</h3>
                                <p class="text-indigo-600">Global Infrastructure Coordinator</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="space-y-4">
                        <img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" src="https://loremflickr.com/64/64/people?71500" alt="">
                        <div class="space-y-2">
                            <div class="text-xs font-medium lg:text-sm">
                                <h3>Glenn Fritsch</h3>
                                <p class="text-indigo-600">International Group Technician</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="space-y-4">
                        <img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" src="https://loremflickr.com/64/64/people?84651" alt="">
                        <div class="space-y-2">
                            <div class="text-xs font-medium lg:text-sm">
                                <h3>Roosevelt Larkin</h3>
                                <p class="text-indigo-600">Direct Functionality Developer</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="space-y-4">
                        <img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" src="https://loremflickr.com/64/64/people?72939" alt="">
                        <div class="space-y-2">
                            <div class="text-xs font-medium lg:text-sm">
                                <h3>Mr. Marguerite Gutkowski</h3>
                                <p class="text-indigo-600">Chief Division Supervisor</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="space-y-4">
                        <img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" src="https://loremflickr.com/64/64/people?17722" alt="">
                        <div class="space-y-2">
                            <div class="text-xs font-medium lg:text-sm">
                                <h3>Martha Haag</h3>
                                <p class="text-indigo-600">Global Web Facilitator</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="space-y-4">
                        <img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" src="https://loremflickr.com/64/64/people?37039" alt="">
                        <div class="space-y-2">
                            <div class="text-xs font-medium lg:text-sm">
                                <h3>Randy D'Amore</h3>
                                <p class="text-indigo-600">National Solutions Manager</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="space-y-4">
                        <img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" src="https://loremflickr.com/64/64/people?21148" alt="">
                        <div class="space-y-2">
                            <div class="text-xs font-medium lg:text-sm">
                                <h3>Marion Herzog PhD</h3>
                                <p class="text-indigo-600">Global Accounts Manager</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="space-y-4">
                        <img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" src="https://loremflickr.com/64/64/people?46103" alt="">
                        <div class="space-y-2">
                            <div class="text-xs font-medium lg:text-sm">
                                <h3>Mr. Clifford Ryan</h3>
                                <p class="text-indigo-600">Forward Configuration Director</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="space-y-4">
                        <img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" src="https://loremflickr.com/64/64/people?27408" alt="">
                        <div class="space-y-2">
                            <div class="text-xs font-medium lg:text-sm">
                                <h3>Colleen Moore</h3>
                                <p class="text-indigo-600">Dynamic Functionality Manager</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="space-y-4">
                        <img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" src="https://loremflickr.com/64/64/people?43692" alt="">
                        <div class="space-y-2">
                            <div class="text-xs font-medium lg:text-sm">
                                <h3>Ms. Leland Larkin DVM</h3>
                                <p class="text-indigo-600">Direct Operations Analyst</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="space-y-4">
                        <img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" src="https://loremflickr.com/64/64/people?70860" alt="">
                        <div class="space-y-2">
                            <div class="text-xs font-medium lg:text-sm">
                                <h3>Lewis Mohr</h3>
                                <p class="text-indigo-600">Dynamic Security Producer</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="space-y-4">
                        <img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" src="https://loremflickr.com/64/64/people?26229" alt="">
                        <div class="space-y-2">
                            <div class="text-xs font-medium lg:text-sm">
                                <h3>Alice Turcotte</h3>
                                <p class="text-indigo-600">Dynamic Directives Representative</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="space-y-4">
                        <img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" src="https://loremflickr.com/64/64/people?69935" alt="">
                        <div class="space-y-2">
                            <div class="text-xs font-medium lg:text-sm">
                                <h3>Alexis Streich</h3>
                                <p class="text-indigo-600">International Brand Representative</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="space-y-4">
                        <img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" src="https://loremflickr.com/64/64/people?22404" alt="">
                        <div class="space-y-2">
                            <div class="text-xs font-medium lg:text-sm">
                                <h3>Alton Beier</h3>
                                <p class="text-indigo-600">Internal Integration Developer</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="space-y-4">
                        <img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" src="https://loremflickr.com/64/64/people?82588" alt="">
                        <div class="space-y-2">
                            <div class="text-xs font-medium lg:text-sm">
                                <h3>Melanie Hermiston</h3>
                                <p class="text-indigo-600">Dynamic Implementation Coordinator</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="space-y-4">
                        <img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" src="https://loremflickr.com/64/64/people?82985" alt="">
                        <div class="space-y-2">
                            <div class="text-xs font-medium lg:text-sm">
                                <h3>Guadalupe Kuhn</h3>
                                <p class="text-indigo-600">Dynamic Program Strategist</p>
                            </div>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
    </div>
</div>
<div class="bg-white">
  <div class="max-w-7xl mx-auto py-12 px-4 text-center sm:px-6 lg:px-8 lg:py-24">
    <div class="space-y-8 sm:space-y-12">
      <div class="space-y-5 sm:mx-auto sm:max-w-xl sm:space-y-4 lg:max-w-5xl">
        <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl">The People</h2>
        <p class="text-xl text-gray-500">Risus velit condimentum vitae tincidunt tincidunt. Mauris ridiculus fusce amet urna nunc. Ut nisl ornare diam in.</p>
      </div>
      <ul role="list" class="mx-auto grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-4 md:gap-x-6 lg:max-w-5xl lg:gap-x-8 lg:gap-y-12 xl:grid-cols-6">

        {% for p in people %}
        <li>
          <div class="space-y-4">
            <img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" src="{{ p.avatar }}" alt="">
            <div class="space-y-2">
              <div class="text-xs font-medium lg:text-sm">
                <h3>{{ p.name }}</h3>
                <p class="text-indigo-600">{{ p.job }}</p>
              </div>
            </div>
          </div>
        </li>
        {% endfor %}

      </ul>
    </div>
  </div>
</div>
{
  "people": [
    {
      "avatar": "https://loremflickr.com/64/64/people?99747",
      "name": "Clarence Rau",
      "job": "Investor Solutions Orchestrator"
    },
    {
      "avatar": "https://loremflickr.com/64/64/people?60268",
      "name": "Dr. Archie Yundt",
      "job": "Principal Identity Facilitator"
    },
    {
      "avatar": "https://loremflickr.com/64/64/people?24274",
      "name": "Ms. Shaun Paucek",
      "job": "International Optimization Liaison"
    },
    {
      "avatar": "https://loremflickr.com/64/64/people?95070",
      "name": "Louise Ryan",
      "job": "Internal Solutions Assistant"
    },
    {
      "avatar": "https://loremflickr.com/64/64/people?82850",
      "name": "Carrie Armstrong",
      "job": "International Accounts Manager"
    },
    {
      "avatar": "https://loremflickr.com/64/64/people?91717",
      "name": "Micheal Pfeffer",
      "job": "Senior Accounts Supervisor"
    },
    {
      "avatar": "https://loremflickr.com/64/64/people?86321",
      "name": "Sylvia Schamberger",
      "job": "Regional Directives Assistant"
    },
    {
      "avatar": "https://loremflickr.com/64/64/people?39170",
      "name": "Bill Howell",
      "job": "Regional Usability Technician"
    },
    {
      "avatar": "https://loremflickr.com/64/64/people?67453",
      "name": "Marcos Rath",
      "job": "Global Infrastructure Coordinator"
    },
    {
      "avatar": "https://loremflickr.com/64/64/people?71500",
      "name": "Glenn Fritsch",
      "job": "International Group Technician"
    },
    {
      "avatar": "https://loremflickr.com/64/64/people?84651",
      "name": "Roosevelt Larkin",
      "job": "Direct Functionality Developer"
    },
    {
      "avatar": "https://loremflickr.com/64/64/people?72939",
      "name": "Mr. Marguerite Gutkowski",
      "job": "Chief Division Supervisor"
    },
    {
      "avatar": "https://loremflickr.com/64/64/people?17722",
      "name": "Martha Haag",
      "job": "Global Web Facilitator"
    },
    {
      "avatar": "https://loremflickr.com/64/64/people?37039",
      "name": "Randy D'Amore",
      "job": "National Solutions Manager"
    },
    {
      "avatar": "https://loremflickr.com/64/64/people?21148",
      "name": "Marion Herzog PhD",
      "job": "Global Accounts Manager"
    },
    {
      "avatar": "https://loremflickr.com/64/64/people?46103",
      "name": "Mr. Clifford Ryan",
      "job": "Forward Configuration Director"
    },
    {
      "avatar": "https://loremflickr.com/64/64/people?27408",
      "name": "Colleen Moore",
      "job": "Dynamic Functionality Manager"
    },
    {
      "avatar": "https://loremflickr.com/64/64/people?43692",
      "name": "Ms. Leland Larkin DVM",
      "job": "Direct Operations Analyst"
    },
    {
      "avatar": "https://loremflickr.com/64/64/people?70860",
      "name": "Lewis Mohr",
      "job": "Dynamic Security Producer"
    },
    {
      "avatar": "https://loremflickr.com/64/64/people?26229",
      "name": "Alice Turcotte",
      "job": "Dynamic Directives Representative"
    },
    {
      "avatar": "https://loremflickr.com/64/64/people?69935",
      "name": "Alexis Streich",
      "job": "International Brand Representative"
    },
    {
      "avatar": "https://loremflickr.com/64/64/people?22404",
      "name": "Alton Beier",
      "job": "Internal Integration Developer"
    },
    {
      "avatar": "https://loremflickr.com/64/64/people?82588",
      "name": "Melanie Hermiston",
      "job": "Dynamic Implementation Coordinator"
    },
    {
      "avatar": "https://loremflickr.com/64/64/people?82985",
      "name": "Guadalupe Kuhn",
      "job": "Dynamic Program Strategist"
    }
  ]
}

No notes defined.