analytics/lib/plausible_web/templates/billing/upgrade.html.eex

<div class="max-w-lg w-full mx-auto bg-white shadow-md rounded px-8 py-6 mb-4 mt-8">
  <h2 class="text-xl font-black">Upgrade your free trial</h2>

  <div class="mt-2">
    <%= cond do %>
      <% Timex.equal?(@user.trial_expiry_date, @today) ->  %>
        Today is the last day of your trial. Please select a plan and enter
        your billing info to access your stats after the trial ends.
        <% Timex.after?(@user.trial_expiry_date, @today) ->  %>
        <p class="py-2">
        Your free trial ends on <b><%= Timex.format!(@user.trial_expiry_date, "{WDshort} {D} {Mshort}") %></b>. Please select a plan and enter
        your billing info to access your stats after the trial ends.
        </p>
      <% Timex.before?(@user.trial_expiry_date, @today) ->  %>
        <p class="py-2">
        Your free trial ended on <%= Timex.format!(@user.trial_expiry_date, "{Mshort} {D}")%>. To access your stats going forward, please select a plan and enter your billing info.
        </p>
    <% end %>

    <p class="py-2">
      If you go over your limit in the future, we will contact you about upgrading.
      Don't worry, we will never bill you unexpectedly or stop recording without telling you first.
    </p>
    <p class="py-2">
      All plans are on a monthly basis, cancel any time.
    </p>
  </div>
  <div class="pt-6"></div>

  <div class="w-full flex justify-between items-center py-4 border-t">
    <span><b>10,000</b> / mo</span>
    <b class="bg-orange-200 text-orange-900 p-1 rounded-sm">$6 / mo</b>
    <%= render("_checkout_button.html", conn: @conn, plan: :personal) %>
  </div>
  <div class="w-full flex justify-between items-center py-4 border-t">
    <span><b>100,000</b> / mo</span>
    <b class="bg-orange-200 text-orange-900 p-1 rounded-sm">$12 / mo</b>
    <%= render("_checkout_button.html", conn: @conn, plan: :startup) %>
  </div>
  <div class="w-full flex justify-between items-center py-4 border-t">
    <span><b>1,000,000</b> / mo</span>
    <b class="bg-orange-200 text-orange-900 p-1 rounded-sm">$36 / mo</b>
    <%= render("_checkout_button.html", conn: @conn, plan: :business) %>
  </div>
  <div class="w-full flex justify-between items-center py-4 border-t">
    <span>Your usage: <b><%= PlausibleWeb.AuthView.delimit_integer(@usage) %></b> pageviews in the last 30 days</span>
  </div>

  <div class="text-center mt-8">
    Questions? Contact <%= link("uku@plausible.io", to: "mailto: uku@plausible.io", class: "text-indigo-500") %>
  </div>

  <script type="text/javascript" src="https://cdn.paddle.com/paddle/paddle.js"></script>
  <script>Paddle.Setup({vendor: 49430})</script>

</div>