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>