cannery/lib/cannery_web/live/home_live.html.heex

<div class="mx-auto px-8 sm:px-16 flex flex-col justify-center items-center text-center space-y-4 max-w-3xl">
  <img
    src={~p"/images/cannery.svg"}
    alt={gettext("Cannery logo")}
    class="inline-block w-32 hover:-mt-2 hover:mb-2 transition-all duration-500 ease-in-out"
    title={gettext("isn't he cute >:3")}
  />

  <h1 class="title text-primary-600 text-2xl">
    <%= gettext("Welcome to Cannery") %>
  </h1>

  <h2 class="title text-primary-600 text-lg">
    <%= gettext("The self-hosted firearm tracker website") %>
  </h2>

  <hr class="hr" />

  <ul class="flex flex-col space-y-4 text-center">
    <li class="flex flex-col justify-center items-center space-y-2">
      <b class="whitespace-nowrap">
        <%= gettext("Easy to Use:") %>
      </b>
      <p>
        <%= gettext(
          "Cannery lets you easily keep an eye on your ammo levels before and after range day"
        ) %>
      </p>
    </li>
    <li class="flex flex-col justify-center items-center space-y-2">
      <b class="whitespace-nowrap">
        <%= gettext("Secure:") %>
      </b>
      <p>
        <%= gettext("Self-host your own instance, or use an instance from someone you trust.") %>
        <%= gettext("Your data stays with you, period") %>
      </p>
    </li>
    <li class="flex flex-col justify-center items-center space-y-2">
      <b class="whitespace-nowrap">
        <%= gettext("Simple:") %>
      </b>
      <p>
        <%= gettext("Access from any internet-capable device") %>
      </p>
    </li>
  </ul>

  <hr class="hr" />

  <ul class="flex flex-col space-y-2 text-center justify-center">
    <h2 class="title text-primary-600 text-lg">
      <%= gettext("Instance Information") %>
    </h2>

    <li class="flex flex-col justify-center space-x-2">
      <b>
        <%= gettext("Admins:") %>
      </b>
      <p>
        <%= if @admins |> Enum.empty?() do %>
          <.link href={~p"/users/register"} class="hover:underline">
            <%= dgettext("prompts", "Register to setup Cannery") %>
          </.link>
        <% else %>
          <div class="flex flex-wrap justify-center space-x-2">
            <.link
              :for={%{email: email} <- @admins}
              class="hover:underline"
              href={"mailto:#{email}"}
            >
              <%= email %>
            </.link>
          </div>
        <% end %>
      </p>
    </li>

    <li class="flex flex-row justify-center space-x-2">
      <b><%= gettext("Registration:") %></b>
      <p>
        <%= case Accounts.registration_mode() do
          :public -> gettext("Public Signups")
          :invite_only -> gettext("Invite Only")
        end %>
      </p>
    </li>

    <li class="flex flex-row justify-center items-center space-x-2">
      <b><%= gettext("Version:") %></b>
      <.link
        href="https://gitea.bubbletea.dev/shibao/cannery/src/branch/stable/CHANGELOG.md"
        class="flex flex-row justify-center items-center space-x-2 hover:underline"
        target="_blank"
        rel="noopener noreferrer"
      >
        <p>
          <%= @version %>
        </p>
        <i class="fas fa-md fa-info-circle"></i>
      </.link>
    </li>
  </ul>

  <hr class="hr" />

  <ul class="flex flex-col space-y-2 text-center justify-center">
    <h2 class="title text-primary-600 text-lg">
      <%= gettext("Get involved!") %>
    </h2>

    <li class="flex flex-col justify-center space-x-2">
      <.link
        class="flex flex-row justify-center items-center space-x-2 hover:underline"
        href="https://gitea.bubbletea.dev/shibao/cannery"
        target="_blank"
        rel="noopener noreferrer"
      >
        <p><%= gettext("View the source code") %></p>
        <i class="fas fa-md fa-code"></i>
      </.link>
    </li>
    <li class="flex flex-col justify-center space-x-2">
      <.link
        class="flex flex-row justify-center items-center space-x-2 hover:underline"
        href="https://weblate.bubbletea.dev/engage/cannery"
        target="_blank"
        rel="noopener noreferrer"
      >
        <p><%= gettext("Help translate") %></p>
        <i class="fas fa-md fa-language"></i>
      </.link>
    </li>
    <li class="flex flex-col justify-center space-x-2">
      <.link
        class="flex flex-row justify-center items-center space-x-2 hover:underline"
        href="https://gitea.bubbletea.dev/shibao/cannery/issues/new"
        target="_blank"
        rel="noopener noreferrer"
      >
        <p><%= gettext("Report bugs or request features") %></p>
        <i class="fas fa-md fa-spider"></i>
      </.link>
    </li>
  </ul>
</div>