<div class="container h-full">
  <ul class="space-y-3">
    <% unless @notifications.empty? %>
      <%= render NotificationComponent.with_collection(@notifications) %>
    <% else %>
      <div class="text-center mx-auto">
        <h3 class="text-lg leading-6 font-medium text-gray-900 mb-2">No notifications yet</h3>
        <p>Why not take your next lesson while you wait?</p>
      </div>
    <% end %>
  </ul>
</div>

<%= title("Notifications") %>

<div class="container h-full">
  <h1 class="text-center page-heading-title mb-16">Notifications</h1>
  <ul class="space-y-3">
    <% unless @notifications.empty? %>
      <%= render NotificationComponent.with_collection(@notifications) %>
    <% else %>
      <div class="text-center mx-auto">
        <h3 class="text-lg leading-6 font-medium text-gray-900 mb-2">No notifications yet</h3>
        <p>Why not take your next lesson while you wait?</p>
      </div>
    <% end %>
  </ul>
</div>

Add Page Heading and Title to Notifications
Feature: Add Page Heading and Title to Notifications

Because:
* To ensure it's consistent with other pages.
