Make empty donations page prettier

app/views/contributions/donations/index.html.erb

@@ -2,11 +2,11 @@
 
 <%= render MainWithTabnavComponent.new(tabnav_partial: "shared/tabnav_contributions") do %>
   <section>
-    <p class="mb-12">
-      Your financial contributions to the development and upkeep of Kosmos
-      software and services.
-    </p>
     <% if @donations.any? %>
+      <p class="mb-12">
+        Your financial contributions to the development and upkeep of Kosmos
+        software and services.
+      </p>
       <ul class="list-none">
         <% @donations.each do |donation| %>
           <li class="mb-8 grid gap-y-2 gap-x-8 grid-cols-2 items-center">
@@ -33,11 +33,19 @@
         <% end %>
       </ul>
     <% else %>
-      <p class="text-gray-500">
-        The donation process is not automated yet. Please
-        <a href="https://wiki.kosmos.org/Main_Page#Community_.2F_Getting_in_touch_.2F_Getting_involved" class="ks-text-link" target="_blank">contact us</a>
-        if you'd like to contribute this way right now.
-      </p>
+      <div class="text-center">
+        <p class="mt-8 mb-12 inline-flex align-center items-center">
+          <%= image_tag("/img/illustrations/undraw_savings_re_eq4w.svg", class: 'h-48') %>
+        </p>
+        <h3>
+          No donations yet
+        </h3>
+        <p class="text-gray-500">
+          The donation process is not automated yet.<br>Please
+          <a href="https://wiki.kosmos.org/Main_Page#Community_.2F_Getting_in_touch_.2F_Getting_involved" class="ks-text-link" target="_blank">contact us</a>
+          if you'd like to contribute this way right now.
+        </p>
+      </div>
     <% end %>
   </section>
 <% end %>