Make invitation page prettier when it's empty

app/components/main_simple_component.html.erb

@@ -1,5 +1,5 @@
 <main class="w-full max-w-6xl mx-auto pb-12 px-4 md:px-6 lg:px-8">
-  <div class="bg-white rounded-lg shadow px-6 sm:px-12 py-8 sm:py-12">
+  <div class="md:min-h-[50vh] bg-white rounded-lg shadow px-6 sm:px-12 py-8 sm:py-12">
     <%= content %>
   </div>
 </main>

app/views/invitations/index.html.erb

@@ -27,10 +27,17 @@
         <% end %>
       </ul>
     <% else %>
-      <p>
-        You do not have any invitations to give away yet. We will notify you,
-        as soon as you can invite others.
-      </p>
+      <div class="text-center">
+        <p class="my-12 inline-flex align-center items-center">
+          <%= image_tag("/img/illustrations/undraw_loading_re_5axr.svg", class: 'h-48') %>
+        </p>
+        <h3>
+          No invitations available yet
+        </h3>
+        <p class="text-gray-500">
+          We will notify you, as soon as you can invite others.
+        </p>
+      </div>
     <% end %>
   </section>