{% extends 'layout.html' %} {% block content %}

<link
  href="https://fonts.googleapis.com/css?family=Source+Sans+Pro"
  rel="stylesheet"
  type="text/css"
/>
<style>
  @import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");
</style>

<!-- hero section -->
<div
  class="border-none border-dashed rounded-lg border-gray-300 dark:border-gray-600 mb-4"
>
  <section class="bg-white dark:bg-gray-900">
    <div
      class="items-center py-8 px-4 mx-auto max-w-screen-xl lg:grid lg:grid-cols-4 lg:gap-16 xl:gap-24 lg:py-16 lg:px-6"
    >
      <div class="col-span-2 mb-8">
        <p class="text-lg font-medium text-primary-600 dark:text-primary-500">
          AI-Powered Vtuber Hub
        </p>
        <h2
          class="mt-3 mb-4 text-3xl font-extrabold tracking-tight text-gray-900 md:text-4xl dark:text-white"
        >
          What Vtubers can I watch?
        </h2>
        <p class="font-light text-gray-500 sm:text-xl dark:text-gray-400">
          We bring Vtubers directly to viewers and offer stream analysis to
          creators. Our website is all about Vtuber content, and nothing else.
        </p>
        <div
          class="pt-6 mt-6 space-y-4 border-t border-gray-200 dark:border-gray-700"
        >
          <div>
            <a
              href="#"
              class="inline-flex items-center text-base font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700"
            >
              Log in
              <svg
                class="ml-1 w-5 h-5"
                fill="currentColor"
                viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
                  clip-rule="evenodd"
                ></path>
              </svg>
            </a>
          </div>
          <div>
            <a
              href="#"
              class="inline-flex items-center text-base font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700"
            >
              Submit your character
              <svg
                class="ml-1 w-5 h-5"
                fill="currentColor"
                viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
                  clip-rule="evenodd"
                ></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div
        class="col-span-2 space-y-8 md:grid md:grid-cols-2 md:gap-12 md:space-y-0"
      >
        <div>
          <svg
            class="mb-2 w-8 h-8 md:w-10 md:h-10 text-primary-600 md:w-12 md:h-12 dark:text-primary-500"
            fill="currentColor"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              d="M2 5a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm14 1a1 1 0 11-2 0 1 1 0 012 0zM2 13a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2v-2zm14 1a1 1 0 11-2 0 1 1 0 012 0z"
              clip-rule="evenodd"
            ></path>
          </svg>
          <h3
            class="mb-2 text-lg md:text-2xl tracking-tight font-bold dark:text-white"
          >
            723 channels
          </h3>
          <p class="font-light text-gray-500 dark:text-gray-400">
            and content in 12 languages from various streaming platforms
          </p>
        </div>
        <div>
          <svg
            class="mb-2 w-8 h-8 md:w-10 md:h-10 text-primary-600 md:w-12 md:h-12 dark:text-primary-500"
            fill="currentColor"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"
            ></path>
          </svg>
          <h3
            class="mb-2 text-lg md:text-2xl tracking-tight font-bold dark:text-white"
          >
            1000+ users
          </h3>
          <p class="font-light text-gray-500 dark:text-gray-400">
            trusted by over 1000 users around the world
          </p>
        </div>
        <div>
          <svg
            class="mb-2 w-8 h-8 md:w-10 md:h-10 text-primary-600 md:w-12 md:h-12 dark:text-primary-500"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            fill="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              fill-rule="evenodd"
              d="M14.516 6.743c-.41-.368-.443-1-.077-1.41a.99.99 0 0 1 1.405-.078l5.487 4.948.007.006A2.047 2.047 0 0 1 22 11.721a2.06 2.06 0 0 1-.662 1.51l-5.584 5.09a.99.99 0 0 1-1.404-.07 1.003 1.003 0 0 1 .068-1.412l5.578-5.082a.05.05 0 0 0 .015-.036.051.051 0 0 0-.015-.036l-5.48-4.942Zm-6.543 9.199v-.42a4.168 4.168 0 0 0-2.715 2.415c-.154.382-.44.695-.806.88a1.683 1.683 0 0 1-2.167-.571 1.705 1.705 0 0 1-.279-1.092V15.88c0-3.77 2.526-7.039 5.967-7.573V7.57a1.957 1.957 0 0 1 .993-1.838 1.931 1.931 0 0 1 2.153.184l5.08 4.248a.646.646 0 0 1 .012.011l.011.01a2.098 2.098 0 0 1 .703 1.57 2.108 2.108 0 0 1-.726 1.59l-5.08 4.25a1.933 1.933 0 0 1-2.929-.614 1.957 1.957 0 0 1-.217-1.04Z"
              clip-rule="evenodd"
            />
          </svg>
          <h3
            class="mb-2 text-lg md:text-2xl tracking-tight font-bold dark:text-white"
          >
            98.50% of traffic
          </h3>
          <p class="font-light text-gray-500 dark:text-gray-400">
            visits official VTuber channels from our website
          </p>
        </div>
        <div>
          <svg
            class="mb-2 w-8 h-8 md:w-10 md:h-10 text-primary-600 md:w-12 md:h-12 dark:text-primary-500"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            viewBox="0 0 20 20"
          >
            <path
              d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"
            ></path>
          </svg>
          <h3
            class="mb-2 text-lg md:text-2xl tracking-tight font-bold dark:text-white"
          >
            3.6K alarms
          </h3>
          <p class="font-light text-gray-500 dark:text-gray-400">
            per day for upcoming streams, unarchived streams and missed streams
          </p>
        </div>
      </div>
    </div>
  </section>
</div>

<!-- table -->
<div
  class="border-none border-dashed rounded-lg border-gray-300 dark:border-gray-600 mb-4"
>
  <section class="bg-gray-50 dark:bg-gray-900 py-3 sm:py-5">
    <div class="px-4 mx-auto max-w-screen-2xl lg:px-12">
      <div
        class="relative overflow-hidden bg-white shadow-md dark:bg-gray-800 sm:rounded-lg"
      >
        <div class="px-4 divide-y dark:divide-gray-700">
          <div
            class="flex flex-col py-3 space-y-3 md:flex-row md:items-center md:justify-between md:space-y-0 md:space-x-4"
          >
            <div class="flex items-center flex-1 space-x-4">
              <button
                type="button"
                class="inline-flex items-center justify-center flex-shrink-0 px-3 py-2 text-xs font-medium text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewbox="0 0 24 24"
                  fill="currentColor"
                  class="w-4 h-4 mr-2"
                  aria-hidden="true"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 01-.517.608 7.45 7.45 0 00-.478.198.798.798 0 01-.796-.064l-.453-.324a1.875 1.875 0 00-2.416.2l-.243.243a1.875 1.875 0 00-.2 2.416l.324.453a.798.798 0 01.064.796 7.448 7.448 0 00-.198.478.798.798 0 01-.608.517l-.55.092a1.875 1.875 0 00-1.566 1.849v.344c0 .916.663 1.699 1.567 1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 01-.064.796l-.324.453a1.875 1.875 0 00.2 2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0 01.796-.064c.157.071.316.137.478.198.267.1.47.327.517.608l.092.55c.15.903.932 1.566 1.849 1.566h.344c.916 0 1.699-.663 1.85-1.567l.091-.549a.798.798 0 01.517-.608 7.52 7.52 0 00.478-.198.798.798 0 01.796.064l.453.324a1.875 1.875 0 002.416-.2l.243-.243c.648-.648.733-1.67.2-2.416l-.324-.453a.798.798 0 01-.064-.796c.071-.157.137-.316.198-.478.1-.267.327-.47.608-.517l.55-.091a1.875 1.875 0 001.566-1.85v-.344c0-.916-.663-1.699-1.567-1.85l-.549-.091a.798.798 0 01-.608-.517 7.507 7.507 0 00-.198-.478.798.798 0 01.064-.796l.324-.453a1.875 1.875 0 00-.2-2.416l-.243-.243a1.875 1.875 0 00-2.416-.2l-.453.324a.798.798 0 01-.796.064 7.462 7.462 0 00-.478-.198.798.798 0 01-.517-.608l-.091-.55a1.875 1.875 0 00-1.85-1.566h-.344zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"
                  />
                </svg>
                All channels: 1,635
              </button>
              <button
                type="button"
                class="inline-flex items-center justify-center flex-shrink-0 px-3 py-2 text-xs font-medium text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewbox="0 0 24 24"
                  fill="currentColor"
                  class="w-4 h-4 mr-2"
                  aria-hidden="true"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 01-.517.608 7.45 7.45 0 00-.478.198.798.798 0 01-.796-.064l-.453-.324a1.875 1.875 0 00-2.416.2l-.243.243a1.875 1.875 0 00-.2 2.416l.324.453a.798.798 0 01.064.796 7.448 7.448 0 00-.198.478.798.798 0 01-.608.517l-.55.092a1.875 1.875 0 00-1.566 1.849v.344c0 .916.663 1.699 1.567 1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 01-.064.796l-.324.453a1.875 1.875 0 00.2 2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0 01.796-.064c.157.071.316.137.478.198.267.1.47.327.517.608l.092.55c.15.903.932 1.566 1.849 1.566h.344c.916 0 1.699-.663 1.85-1.567l.091-.549a.798.798 0 01.517-.608 7.52 7.52 0 00.478-.198.798.798 0 01.796.064l.453.324a1.875 1.875 0 002.416-.2l.243-.243c.648-.648.733-1.67.2-2.416l-.324-.453a.798.798 0 01-.064-.796c.071-.157.137-.316.198-.478.1-.267.327-.47.608-.517l.55-.091a1.875 1.875 0 001.566-1.85v-.344c0-.916-.663-1.699-1.567-1.85l-.549-.091a.798.798 0 01-.608-.517 7.507 7.507 0 00-.198-.478.798.798 0 01.064-.796l.324-.453a1.875 1.875 0 00-.2-2.416l-.243-.243a1.875 1.875 0 00-2.416-.2l-.453.324a.798.798 0 01-.796.064 7.462 7.462 0 00-.478-.198.798.798 0 01-.517-.608l-.091-.55a1.875 1.875 0 00-1.85-1.566h-.344zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"
                  />
                </svg>
                Languages: 5
              </button>
            </div>
            <div
              class="flex flex-col items-start flex-shrink-0 space-y-3 md:flex-row md:items-center lg:justify-end md:space-y-0 md:space-x-3"
            >
              <button
                type="button"
                class="inline-flex items-center justify-center flex-shrink-0 px-3 py-2 text-xs font-medium text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewbox="0 0 24 24"
                  fill="currentColor"
                  class="w-4 h-4 mr-2"
                  aria-hidden="true"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 01-.517.608 7.45 7.45 0 00-.478.198.798.798 0 01-.796-.064l-.453-.324a1.875 1.875 0 00-2.416.2l-.243.243a1.875 1.875 0 00-.2 2.416l.324.453a.798.798 0 01.064.796 7.448 7.448 0 00-.198.478.798.798 0 01-.608.517l-.55.092a1.875 1.875 0 00-1.566 1.849v.344c0 .916.663 1.699 1.567 1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 01-.064.796l-.324.453a1.875 1.875 0 00.2 2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0 01.796-.064c.157.071.316.137.478.198.267.1.47.327.517.608l.092.55c.15.903.932 1.566 1.849 1.566h.344c.916 0 1.699-.663 1.85-1.567l.091-.549a.798.798 0 01.517-.608 7.52 7.52 0 00.478-.198.798.798 0 01.796.064l.453.324a1.875 1.875 0 002.416-.2l.243-.243c.648-.648.733-1.67.2-2.416l-.324-.453a.798.798 0 01-.064-.796c.071-.157.137-.316.198-.478.1-.267.327-.47.608-.517l.55-.091a1.875 1.875 0 001.566-1.85v-.344c0-.916-.663-1.699-1.567-1.85l-.549-.091a.798.798 0 01-.608-.517 7.507 7.507 0 00-.198-.478.798.798 0 01.064-.796l.324-.453a1.875 1.875 0 00-.2-2.416l-.243-.243a1.875 1.875 0 00-2.416-.2l-.453.324a.798.798 0 01-.796.064 7.462 7.462 0 00-.478-.198.798.798 0 01-.517-.608l-.091-.55a1.875 1.875 0 00-1.85-1.566h-.344zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"
                  />
                </svg>
                Table settings
              </button>
            </div>
          </div>
          <div
            class="flex flex-col items-stretch justify-between py-4 space-y-3 md:flex-row md:items-center md:space-y-0"
          >
            <button
              type="button"
              class="flex items-center justify-center px-4 py-2 text-sm font-medium text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800"
            >
              <svg
                class="h-3.5 w-3.5 mr-2"
                fill="currentColor"
                viewbox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg"
                aria-hidden="true"
              >
                <path
                  clip-rule="evenodd"
                  fill-rule="evenodd"
                  d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
                />
              </svg>
              Add new user
            </button>
            <div
              class="inline-flex flex-col rounded-md shadow-sm md:flex-row"
              role="group"
            >
              <button
                type="button"
                class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-t-lg md:rounded-tr-none md:rounded-l-lg hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-primary-500 dark:focus:text-white"
              >
                Suspend all</button
              ><button
                type="button"
                class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border-gray-200 border-x md:border-x-0 md:border-t md:border-b hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-primary-500 dark:focus:text-white"
              >
                Archive all</button
              ><button
                type="button"
                class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-b-lg md:rounded-bl-none md:rounded-r-lg hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-primary-500 dark:focus:text-white"
              >
                Delete all
              </button>
            </div>
          </div>
        </div>
        <div class="overflow-x-auto">
          <table
            class="w-full text-sm text-left text-gray-500 dark:text-gray-400"
          >
            <thead
              class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
            >
              <tr>
                <th scope="col" class="px-4 py-3">Name</th>
                <th scope="col" class="px-4 py-3 hidden md:table-cell">
                  Network
                </th>
                <th scope="col" class="px-4 py-3 hidden lg:table-cell">
                  Categories
                </th>
                <th scope="col" class="px-4 py-3">Language</th>
                <th scope="col" class="px-4 py-3 hidden lg:table-cell">
                  Last Activity
                </th>
                <th
                  scope="col"
                  class="px-4 py-3 hidden sm:table-cell whitespace-nowrap"
                >
                  Socials
                </th>
                <th scope="col" class="px-4 py-3">
                  <span class="sr-only">Channel Link</span>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr
                class="border-b dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
              >
                <th
                  scope="row"
                  class="px-4 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white"
                >
                  <a href="#" class="flex items-center">
                    <img
                      src="{{ url_for('static', filename='src/miko.jpg') }}"
                      alt="iMac Front Image"
                      class="inline w-auto h-8 mr-3 rounded-full"
                    />
                    <span class="truncate hover:bg-gray-200 rounded px-1"
                      >Sakura Miko</span
                    >
                  </a>
                </th>
                <td
                  class="hidden md:table-cell px-4 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white"
                >
                  <div class="flex items-center">
                    <a
                      href="#"
                      class="inline-flex items-center bg-gray-100 text-gray-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300"
                    >
                      Hololive
                    </a>
                  </div>
                </td>
                <td
                  class="hidden lg:table-cell px-4 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white"
                >
                  <div class="flex items-center">
                    <a
                      href="#"
                      class="inline-flex items-center bg-gray-100 text-gray-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300"
                    >
                      Gaming
                    </a>
                    <a
                      href="#"
                      class="inline-flex items-center bg-gray-100 text-gray-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300"
                    >
                      Music
                    </a>
                    <a
                      href="#"
                      class="inline-flex items-center bg-gray-100 text-gray-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300"
                    >
                      Free Talk
                    </a>
                  </div>
                </td>
                <td
                  class="px-4 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white"
                >
                  <div class="flex items-center">
                    <a
                      href="#"
                      class="inline-flex items-center bg-gray-100 text-gray-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300"
                    >
                      Japanese
                    </a>
                    <a
                      href="#"
                      class="inline-flex items-center bg-gray-100 text-gray-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300"
                    >
                      English
                    </a>
                  </div>
                </td>
                <td
                  class="hidden lg:table-cell px-4 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white"
                >
                  <div class="flex items-center">12 minutes ago</div>
                </td>
                <td class="hidden sm:table-cell px-4 py-2 whitespace-nowrap">
                  <div class="flex items-center space-x-1.5">
                    <a
                      class="transition hover:text-gray-900 dark:hover:text-white"
                      href="#"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="13"
                        height="10"
                        fill="currentColor"
                        aria-hidden="true"
                      >
                        <path
                          d="M11.508 2.497c.469-.351.89-.773 1.219-1.265a4.613 4.613 0 0 1-1.407.375c.516-.305.89-.774 1.078-1.36a5.197 5.197 0 0 1-1.546.61A2.461 2.461 0 0 0 9.047.083a2.46 2.46 0 0 0-2.461 2.461c0 .188.023.375.07.563A7.14 7.14 0 0 1 1.57.529c-.21.351-.328.773-.328 1.242 0 .844.422 1.594 1.102 2.039-.399-.024-.797-.117-1.125-.305v.024c0 1.195.843 2.18 1.968 2.414a2.748 2.748 0 0 1-.632.093c-.164 0-.305-.023-.47-.046A2.45 2.45 0 0 0 4.384 7.7a4.948 4.948 0 0 1-3.047 1.055c-.211 0-.399-.023-.586-.047A6.857 6.857 0 0 0 4.523 9.81c4.524 0 6.985-3.727 6.985-6.985v-.328Z"
                        />
                      </svg>
                    </a>
                  </div>
                </td>
                <td
                  class="px-4 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white"
                >
                  <a
                    href="#"
                    class="inline-flex items-center p-1 text-sm font-medium text-center text-gray-500 rounded-lg hover:text-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none dark:text-gray-400 dark:hover:text-gray-100"
                  >
                    <svg
                      class="w-4 h-4 dark:text-white"
                      aria-hidden="true"
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      fill="none"
                      viewBox="0 0 24 24"
                    >
                      <path
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M18 14v4.833A1.166 1.166 0 0 1 16.833 20H5.167A1.167 1.167 0 0 1 4 18.833V7.167A1.166 1.166 0 0 1 5.167 6h4.618m4.447-2H20v5.768m-7.889 2.121 7.778-7.778"
                      />
                    </svg>
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <nav
          class="flex flex-col items-start justify-between p-4 space-y-3 md:flex-row md:items-center md:space-y-0"
          aria-label="Table navigation"
        >
          <div class="flex items-center space-x-3">
            <label
              for="rows"
              class="text-xs font-normal text-gray-500 dark:text-gray-400"
              >Rows per page</label
            ><select
              id="rows"
              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block py-1.5 pl-3.5 pr-6 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
            >
              <option selected="" value="10">10</option>
              <option value="25">25</option>
              <option value="50">50</option>
              <option value="100">100</option>
            </select>
            <div class="text-xs font-normal text-gray-500 dark:text-gray-400">
              <span class="font-semibold text-gray-900 dark:text-white"
                >1-10</span
              >
              of
              <span class="font-semibold text-gray-900 dark:text-white"
                >100</span
              >
            </div>
          </div>
          <ul class="inline-flex items-stretch -space-x-px">
            <li>
              <a
                href="#"
                class="flex text-sm w-20 items-center justify-center h-full py-1.5 px-3 ml-0 text-gray-500 bg-white rounded-l-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                >Previous</a
              >
            </li>
            <li>
              <a
                href="#"
                class="flex text-sm w-20 items-center justify-center h-full py-1.5 px-3 leading-tight text-gray-500 bg-white rounded-r-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                >Next</a
              >
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </section>
</div>

<!-- categories -->
<div
  class="border-none border-dashed rounded-lg border-gray-300 dark:border-gray-600 mb-4"
>
  <section class="bg-white dark:bg-gray-900 antialiased">
    <div class="max-w-screen-xl px-4 py-8 mx-auto lg:px-6 sm:py-16 lg:py-24">
      <div class="max-w-3xl mx-auto text-center">
        <h2
          class="text-3xl font-extrabold leading-tight tracking-tight text-gray-900 sm:text-4xl dark:text-white"
        >
          Our people make us great
        </h2>
        <p
          class="mt-4 text-base font-normal text-gray-500 sm:text-xl dark:text-gray-400"
        >
          You'll interact with talented professionals, will be challenged to
          solve difficult problems and think in new and creative ways.
        </p>
      </div>

      <div
        class="grid grid-cols-1 gap-4 mt-8 lg:mt-16 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
      >
        <a href="#" class="relative overflow-hidden rounded-lg group">
          <img
            class="object-cover w-full h-[320px] lg:h-auto scale-100 ease-in duration-300 group-hover:scale-125"
            src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/team/member-12.png"
            alt=""
          />
          <div
            class="absolute inset-0 grid items-end justify-center p-4 bg-gradient-to-b from-transparent to-black/60"
          >
            <div class="text-center">
              <p class="text-xl font-bold text-white">Thomas Lean</p>
              <p class="text-base font-medium text-gray-300">Marketing</p>
            </div>
          </div>
        </a>

        <a href="#" class="relative overflow-hidden rounded-lg group">
          <img
            class="object-cover w-full h-[320px] lg:h-auto scale-100 ease-in duration-300 group-hover:scale-125"
            src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/team/member-12.png"
            alt=""
          />
          <div
            class="absolute inset-0 grid items-end justify-center p-4 bg-gradient-to-b from-transparent to-black/60"
          >
            <div class="text-center">
              <p class="text-xl font-bold text-white">Thomas Lean</p>
              <p class="text-base font-medium text-gray-300">Marketing</p>
            </div>
          </div>
        </a>

        <a href="#" class="relative overflow-hidden rounded-lg group">
          <img
            class="object-cover w-full h-[320px] lg:h-auto scale-100 ease-in duration-300 group-hover:scale-125"
            src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/team/member-12.png"
            alt=""
          />
          <div
            class="absolute inset-0 grid items-end justify-center p-4 bg-gradient-to-b from-transparent to-black/60"
          >
            <div class="text-center">
              <p class="text-xl font-bold text-white">Thomas Lean</p>
              <p class="text-base font-medium text-gray-300">Marketing</p>
            </div>
          </div>
        </a>

        <a href="#" class="relative overflow-hidden rounded-lg group">
          <img
            class="object-cover w-full h-[320px] lg:h-auto scale-100 ease-in duration-300 group-hover:scale-125"
            src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/team/member-12.png"
            alt=""
          />
          <div
            class="absolute inset-0 grid items-end justify-center p-4 bg-gradient-to-b from-transparent to-black/60"
          >
            <div class="text-center">
              <p class="text-xl font-bold text-white">Thomas Lean</p>
              <p class="text-base font-medium text-gray-300">Marketing</p>
            </div>
          </div>
        </a>

        <a href="#" class="relative overflow-hidden rounded-lg group">
          <img
            class="object-cover w-full h-[320px] lg:h-auto scale-100 ease-in duration-300 group-hover:scale-125"
            src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/team/member-12.png"
            alt=""
          />
          <div
            class="absolute inset-0 grid items-end justify-center p-4 bg-gradient-to-b from-transparent to-black/60"
          >
            <div class="text-center">
              <p class="text-xl font-bold text-white">Thomas Lean</p>
              <p class="text-base font-medium text-gray-300">Marketing</p>
            </div>
          </div>
        </a>

        <a href="#" class="relative overflow-hidden rounded-lg group">
          <img
            class="object-cover w-full h-[320px] lg:h-auto scale-100 ease-in duration-300 group-hover:scale-125"
            src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/team/member-12.png"
            alt=""
          />
          <div
            class="absolute inset-0 grid items-end justify-center p-4 bg-gradient-to-b from-transparent to-black/60"
          >
            <div class="text-center">
              <p class="text-xl font-bold text-white">Thomas Lean</p>
              <p class="text-base font-medium text-gray-300">Marketing</p>
            </div>
          </div>
        </a>
      </div>

      <div
        class="max-w-3xl p-4 mx-auto mt-8 rounded-md lg:mt-16 bg-gray-50 dark:bg-gray-800"
      >
        <div
          class="flex flex-col justify-between gap-3 md:gap-6 md:items-center md:flex-row"
        >
          <div class="flex items-center gap-1.5">
            <svg
              aria-hidden="true"
              class="hidden w-5 h-5 text-gray-800 dark:text-gray-400 md:block shrink-0"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"
              />
            </svg>
            <span
              class="text-base font-normal text-gray-700 dark:text-gray-400"
            >
              <span class="font-semibold">
                Want to join the Flowbite team?
              </span>
              We are growing our community.
            </span>
          </div>

          <a
            href="#"
            title=""
            class="inline-flex items-center text-base font-medium text-primary-600 hover:underline dark:text-primary-500"
          >
            Join our team
            <svg
              aria-hidden="true"
              class="w-5 h-5 ml-1.5"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fill-rule="evenodd"
                d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                clip-rule="evenodd"
              />
            </svg>
          </a>
        </div>
      </div>
    </div>
  </section>
</div>

<!-- clips -->
<div
  class="border-none border-dashed rounded-lg border-gray-300 dark:border-gray-600 mb-4"
>
  <aside
    aria-label="Related articles"
    class="py-8 bg-white lg:py-16 dark:bg-gray-900 antialiased"
  >
    <div class="px-4 mx-auto max-w-screen-xl">
      <h2 class="mb-8 text-2xl font-bold text-gray-900 dark:text-white">
        Read Next
      </h2>
      <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
        <article>
          <a href="#">
            <img
              src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/articles/wordpress/image-2.jpg"
              class="mb-5 w-full max-w-full rounded-lg"
              alt="Image 2"
            />
          </a>
          <h2
            class="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white"
          >
            <a href="#">How AI is transforming your smartphone</a>
          </h2>
          <a
            href="#"
            class="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
          >
            Read more
          </a>
        </article>
        <article>
          <a href="#">
            <img
              src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/articles/wordpress/image-2.jpg"
              class="mb-5 w-full max-w-full rounded-lg"
              alt="Image 2"
            />
          </a>
          <h2
            class="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white"
          >
            <a href="#">How AI is transforming your smartphone</a>
          </h2>
          <a
            href="#"
            class="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
          >
            Read more
          </a>
        </article>
        <article>
          <a href="#">
            <img
              src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/articles/wordpress/image-2.jpg"
              class="mb-5 w-full max-w-full rounded-lg"
              alt="Image 2"
            />
          </a>
          <h2
            class="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white"
          >
            <a href="#">How AI is transforming your smartphone</a>
          </h2>
          <a
            href="#"
            class="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
          >
            Read more
          </a>
        </article>
        <article>
          <a href="#">
            <img
              src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/articles/wordpress/image-2.jpg"
              class="mb-5 w-full max-w-full rounded-lg"
              alt="Image 2"
            />
          </a>
          <h2
            class="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white"
          >
            <a href="#">How AI is transforming your smartphone</a>
          </h2>
          <a
            href="#"
            class="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
          >
            Read more
          </a>
        </article>
        <article>
          <a href="#">
            <img
              src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/articles/wordpress/image-2.jpg"
              class="mb-5 w-full max-w-full rounded-lg"
              alt="Image 2"
            />
          </a>
          <h2
            class="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white"
          >
            <a href="#">How AI is transforming your smartphone</a>
          </h2>
          <a
            href="#"
            class="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
          >
            Read more
          </a>
        </article>
        <article>
          <a href="#">
            <img
              src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/articles/wordpress/image-3.jpg"
              class="mb-5 w-full max-w-full rounded-lg"
              alt="Image 3"
            />
          </a>
          <h2
            class="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white"
          >
            <a href="#">Android, ChromeOS, and the future of app discovery</a>
          </h2>
          <a
            href="#"
            class="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
          >
            Read more
          </a>
        </article>
        <article>
          <a href="#">
            <img
              src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/articles/wordpress/image-4.jpg"
              class="mb-5 w-full max-w-full rounded-lg"
              alt="Image 4"
            />
          </a>
          <h2
            class="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white"
          >
            <a href="#">What Google collaboration app offers remote teams</a>
          </h2>
          <a
            href="#"
            class="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
          >
            Read more
          </a>
        </article>
        <article>
          <a href="#">
            <img
              src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/articles/wordpress/image-5.jpg"
              class="mb-5 w-full max-w-full rounded-lg"
              alt="Image 5"
            />
          </a>
          <h2
            class="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white"
          >
            <a href="#"
              >Collaboration app spending grows in the face of crisis</a
            >
          </h2>
          <a
            href="#"
            class="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
          >
            Read more
          </a>
        </article>
        <article>
          <a href="#">
            <img
              src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/articles/wordpress/image-6.jpg"
              class="mb-5 w-full max-w-full rounded-lg"
              alt="Image 6"
            />
          </a>
          <h2
            class="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white"
          >
            <a href="#"
              >For developers, too many meetings, too little 'focus' time</a
            >
          </h2>
          <a
            href="#"
            class="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
          >
            Read more
          </a>
        </article>
        <article>
          <a href="#">
            <img
              src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/articles/wordpress/image-6.jpg"
              class="mb-5 w-full max-w-full rounded-lg"
              alt="Image 6"
            />
          </a>
          <h2
            class="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white"
          >
            <a href="#"
              >For developers, too many meetings, too little 'focus' time</a
            >
          </h2>
          <a
            href="#"
            class="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
          >
            Read more
          </a>
        </article>
        <article>
          <a href="#">
            <img
              src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/articles/wordpress/image-6.jpg"
              class="mb-5 w-full max-w-full rounded-lg"
              alt="Image 6"
            />
          </a>
          <h2
            class="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white"
          >
            <a href="#"
              >For developers, too many meetings, too little 'focus' time</a
            >
          </h2>
          <a
            href="#"
            class="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
          >
            Read more
          </a>
        </article>
        <article>
          <a href="#">
            <img
              src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/articles/wordpress/image-6.jpg"
              class="mb-5 w-full max-w-full rounded-lg"
              alt="Image 6"
            />
          </a>
          <h2
            class="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white"
          >
            <a href="#"
              >For developers, too many meetings, too little 'focus' time</a
            >
          </h2>
          <a
            href="#"
            class="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
          >
            Read more
          </a>
        </article>
      </div>
    </div>
  </aside>
</div>
{% endblock content %}