<div class="h-[300px] lg:h-[340px] bg-container shadow-border-xs rounded-xl py-4 flex flex-col items-center justify-center">
  <div class="space-y-3 text-center flex flex-col items-center">
    <%= render DS::FilledIcon.new(
      variant: :container,
      icon: "layers",
    ) %>

    <p class="text-sm font-medium text-primary"><%= t("pages.dashboard.no_accounts.title") %></p>
    <p class="text-secondary text-sm"><%= t("pages.dashboard.no_accounts.description") %></p>
    <%= render DS::Link.new(
      text: t("pages.dashboard.no_accounts.add_account"),
      icon: "plus",
      href: new_account_path,
      frame: :modal
    ) %>
  </div>
</div>
