<p class='introduction'><%= t ".introduction" %></p>
-<% ['welcome', 'beginners_guide', 'help', 'mailing_lists', 'forums', 'irc', 'switch2osm', 'welcomemat', 'wiki'].each do |site| %>
- <% unless site == 'welcome' && !current_user %>
- <div class='<%= site %> help-item'>
- <h3>
- <a href='<%= t ".#{site}.url" %>'>
- <%= t ".#{site}.title" %>
- </a>
- </h3>
- <p><%= t ".#{site}.description" %></p>
- </div>
+<% sites = %w[beginners_guide help mailing_lists forums community irc switch2osm welcomemat wiki] %>
+<% sites.prepend("welcome") if current_user %>
+
+<div class="row row-cols-sm-3 g-4 mb-3">
+ <% sites.each do |site| %>
+ <div class="col">
+ <div class='<%= site %> help-item card h-100'>
+ <div class='card-body'>
+ <h6 class='card-title'>
+ <a href='<%= t ".#{site}.url" %>'>
+ <%= t ".#{site}.title" %>
+ </a>
+ </h6>
+ <p class='card-text'><%= t ".#{site}.description" %></p>
+ </div>
+ <div class="card-footer">
+ <small>
+ <a href='<%= t ".#{site}.url" %>'>
+ <%= t ".#{site}.url" %>
+ </a>
+ </small>
+ </div>
+ </div>
+ </div>
<% end %>
-<% end %>
+</div>