_success_stories.html.erb

<div class="w-full bg-gradient-to-b from-white to-gray-100 dark:bg-gray-800/30 dark:bg-none">
  <div class="page-container py-20">
    <div class="text-center">
      <h2 class="font-medium text-3xl text-gray-800 dark:text-gray-200">Success Stories</h2>
    </div>

    <div class="max-w-7xl mx-auto mt-8 sm:mt-16 flex flex-nowrap xl:flex-wrap flex-col xl:flex-row items-center">
      <% @success_stories.each do |story| %>
      <div class="px-6 sm:px-0 max-w-xl xl:max-w-none xl:w-1/2 flex pb-9">
        <div class="w-16 sm:w-24 text-center pt-4 sm:flex justify-center">
          <%= image_tag "success_stories/#{story.avatar_path_name}", alt: "#{story.student_name}'s avatar", class: 'w-12 h-12 rounded-full shadow-inner' %>
        </div>

        <div class="flex-1">
            <p><%= link_to story.student_name, story.social_media_link, class: 'text-gold-600' %></p>
          <div class="text-lg"><%= story.story_content.truncate_words(30).html_safe %></div>
        </div>
      </div>
      <% end %>
    </div>

    <div class="flex justify-center">
      <%= link_to 'Read more success stories', success_stories_path, class: 'dark:text-gray-400 underline text-lg pt-4 hover:text-gray-800 dark:hover:text-gray-300' %>
    </div>

  </div>
</div>