Refactor FAQs index view for improved layout and styling

- Updated the FAQs index view to enhance the layout by using a grid system for better responsiveness.
- Removed unnecessary elements and simplified the display of FAQ categories.
- Cleaned up the code by eliminating commented-out sections and unused classes for improved readability.

Author: Shpigford

app/views/faqs/index.html.erb

@@ -31,19 +31,12 @@
                 <%= faq.question %>
               </h3>
               <% if faq.category.present? %>
-                <div class="mb-3">
+                <div class="">
                   <span class="inline-block px-3 py-1 text-xs font-medium bg-gray-100 text-gray-600 rounded-full">
                     <%= faq.category %>
                   </span>
                 </div>
               <% end %>
-              <p class="text-sm text-gray-600 leading-relaxed">
-                <%= truncate(strip_tags(faq.answer), length: 120, separator: ' ') %>
-              </p>
-              <div class="mt-4 flex items-center text-sm font-medium text-gray-900">
-                Read answer
-                <%= lucide_icon "chevron-right", class: "ml-1 w-4 h-4" %>
-              </div>
             <% end %>
           <% end %>
         </div>
@@ -54,19 +47,12 @@
       <% faqs_grouped.sort.each do |category_name, category_faqs| %>
         <div class="mb-12">
           <h2 class="text-2xl font-semibold mb-6 text-gray-900"><%= category_name %></h2>
-          <div class="space-y-4">
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
             <% category_faqs.each do |faq| %>
               <%= link_to faq_path(faq), class: "block bg-white p-6 rounded-lg border shadow-xs hover:shadow-sm transition-shadow duration-200" do %>
-                <h3 class="text-lg font-semibold mb-3 text-gray-900 leading-tight">
+                <h3 class="text-lg font-semibold text-gray-900 leading-tight">
                   <%= faq.question %>
                 </h3>
-                <p class="text-sm text-gray-600 leading-relaxed">
-                  <%= truncate(strip_tags(faq.answer), length: 120, separator: ' ') %>
-                </p>
-                <div class="mt-4 flex items-center text-sm font-medium text-gray-900">
-                  Read answer
-                  <%= lucide_icon "chevron-right", class: "ml-1 w-4 h-4" %>
-                </div>
               <% end %>
             <% end %>
           </div>