refactor

app/controllers/articles_controller.rb

@@ -5,7 +5,7 @@ def index
 
   def show
     @article = Article.where(slug: params[:id]).first
-    @next_articles = Article.where("id > ?", @article.id).limit(3)
+    @next_articles = Article.where.not(slug: @article.slug).limit(3)
 
     if @article.nil?
       redirect_to '/404'

app/views/articles/_article_card.html.erb

@@ -1,6 +1,5 @@
 <%# locals: (article:) -%>
-<div class="overflow-hidden rounded-2xl shadow transition hover:shadow-lg p-1 bg-white">
-  <a href="<%= article_url(article.slug) %>" class="flex flex-col justify-between h-full gap-5">
+<%= link_to article_url(article.slug), class: "overflow-hidden rounded-xl shadow transition hover:shadow-lg p-1 bg-white border flex flex-col justify-between h-full gap-5" do %>
   <div class="h-56 w-full object-cover bg-gradient-to-b <%= article_random_gradient(article) %> rounded-xl"></div>
   <div class="flex flex-col flex-grow justify-between">
     <div class="flex items-center gap-3 px-6">
@@ -16,5 +15,4 @@
       <p><%= article.author_name %></p>
     </div>
   </div>
-  </a>
-</div>
+<% end %>

app/views/articles/index.html.erb

@@ -1,12 +1,12 @@
 <div class="max-w-5xl mx-auto text-center">
   <div class="flex flex-col gap-y-1">
     <div class="flex items-center justify-center gap-x-2">
-      <h1 class="text-3xl font-medium tracking-tight">Maybe Articles</h1>
-      <%= image_tag("icon-articles.svg", alt: "Articles", class: "inline") %>
+      <h1 class="text-3xl font-medium tracking-tight">Maybe Blog</h1>
+      <%= image_tag("icon-articles.svg", alt: "Blog", class: "inline") %>
     </div>
     <p class="text-sm text-neutral-400">Thoughts and insights around personal finance.</p>
   </div>
-  <div class="grid grid-cols-3 gap-4 mt-7 mb-14">
+  <div class="grid grid-cols-1 md:grid-cols-2  lg:grid-cols-3 xl:grid-cols-3 gap-4 mt-7 mb-14">
     <% @articles.each do |article| %>
       <%= render partial: "articles/article_card", locals: { article: article } %>
     <% end %>

app/views/articles/show.html.erb

@@ -37,7 +37,7 @@
       </div>
     </div>
   </article>
-  <div class="grid grid-cols-3 gap-4 mt-7 mb-14">
+  <div class="grid grid-cols-1 md:grid-cols-2  lg:grid-cols-3 xl:grid-cols-3 gap-4 mt-7 mb-14">
     <% @next_articles.each do |next_article| %>
       <%= render "articles/article_card", article: next_article %>
     <% end %>

app/views/layouts/application.html.erb

@@ -27,7 +27,7 @@
         <span class="px-1.5 py-0.5 text-[0.1em] uppercase bg-white border rounded-full border-neutral-200/75 text-neutral-500">Early Access</span>
       </div>
       <nav class="flex-1 text-sm text-center gap-x-1">
-        <%= link_to "Articles", articles_path, class: "px-3 py-1.5 text-neutral-800 hover:text-neutral-900 hover:bg-neutral-200/60 rounded-xl" %>
+        <%= link_to "Blog", articles_path, class: "px-3 py-1.5 text-neutral-800 hover:text-neutral-900 hover:bg-neutral-200/60 rounded-xl" %>
         <a href="#" class="px-3 py-1.5 text-neutral-800 hover:text-neutral-900 hover:bg-neutral-200/60 rounded-xl">Glossary</a>
         <a href="https://github.com/maybe-finance/maybe" class="px-3 py-1.5 text-neutral-800 hover:text-neutral-9000 hover:bg-neutral-200/60 rounded-xl">Contribute</a>
       </nav>
@@ -53,7 +53,7 @@
             <h4 class="mb-4 text-xs font-medium uppercase">General</h4>
             <ul>
               <li>
-                <%= link_to "Articles", articles_path %>
+                <%= link_to "Blog", articles_path %>
               </li>
               <li>
                 <%= link_to "Glossary", "#" %>