memEx/lib/memex_web/live/home_live.html.heex

<div class="flex flex-col justify-center items-center text-center space-y-4">
  <h1 class="title text-primary-400 text-2xl">
    <%= gettext("memex") %>
  </h1>

  <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("notes:") %>
      </b>
      <p>
        <%= gettext("document notes about individual items or concepts") %>
      </p>
    </li>

    <li class="flex flex-col justify-center items-center
      space-y-2">
      <b class="whitespace-nowrap">
        <%= gettext("contexts:") %>
      </b>
      <p>
        <%= gettext("provide context around a single topic and hotlink to your notes") %>
      </p>
    </li>

    <li class="flex flex-col justify-center items-center
      space-y-2">
      <b class="whitespace-nowrap">
        <%= gettext("pipelines:") %>
      </b>
      <p>
        <%= gettext("document your processes, attaching contexts to each step") %>
      </p>
    </li>
  </ul>

  <hr class="hr" />

  <ul class="flex flex-col space-y-4 text-center">
    <h2 class="title text-primary-400 text-lg">
      <%= gettext("features") %>
    </h2>

    <li class="flex flex-col justify-center items-center
      space-y-2">
      <b class="whitespace-nowrap">
        <%= gettext("multi-user:") %>
      </b>
      <p>
        <%= gettext("built with sharing and collaboration in mind") %>
      </p>
    </li>

    <li class="flex flex-col justify-center items-center
      space-y-2">
      <b class="whitespace-nowrap">
        <%= gettext("privacy:") %>
      </b>
      <p>
        <%= gettext("privacy controls on a per-note, context or pipeline basis") %>
      </p>
    </li>

    <li class="flex flex-col justify-center items-center
      space-y-2">
      <b class="whitespace-nowrap">
        <%= gettext("convenient:") %>
      </b>
      <p>
        <%= gettext("accessible from any internet-capable device") %>
      </p>
    </li>
  </ul>

  <hr class="hr" />

  <ul class="flex flex-col space-y-4 text-center">
    <h2 class="title text-primary-400 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={Routes.user_registration_path(MemexWeb.Endpoint, :new)}
            class="hover:underline"
          >
            <%= dgettext("prompts", "register to setup %{name}", name: "memex") %>
          </.link>
        <% else %>
          <div class="flex flex-wrap justify-center space-x-2">
            <%= for admin <- @admins do %>
              <a class="hover:underline" href={"mailto:#{admin.email}"}>
                <%= admin.email %>
              </a>
            <% end %>
          </div>
        <% end %>
      </p>
    </li>

    <li class="flex flex-row justify-center space-x-2">
      <b><%= gettext("registration:") %></b>
      <p>
        <%= Application.get_env(:memex, MemexWeb.Endpoint)[:registration]
        |> case do
          "public" -> gettext("public signups")
          _ -> 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/memex/src/branch/stable/CHANGELOG.md"
        class="flex flex-row justify-center items-center space-x-2 hover:underline"
        target="_blank"
        rel="noopener noreferrer"
      >
        <p>0.1.0</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-400 text-lg">
      <%= gettext("get involved!") %>
    </h2>

    <li class="flex flex-col justify-center space-x-2">
      <.link
        href="https://gitea.bubbletea.dev/shibao/memex"
        class="flex flex-row justify-center items-center space-x-2 hover:underline"
        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
        href="https://weblate.bubbletea.dev/engage/memex"
        class="flex flex-row justify-center items-center space-x-2 hover:underline"
        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
        href="https://gitea.bubbletea.dev/shibao/memex/issues/new"
        class="flex flex-row justify-center items-center space-x-2 hover:underline"
        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>