start on memers view

app/controllers/members_controller.rb

@@ -3,7 +3,7 @@ class MembersController < ApplicationController
 
   # GET /members
   def index
-    @members = Member.all
+    @members = Member.order(:name).page params[:page]
   end
 
   # GET /members/1

app/helpers/application_helper.rb

@@ -1,7 +1,8 @@
 require "redcarpet"
 
 module ApplicationHelper
-
+  include Merged::ViewHelper
+  
   def renderer
     options = {hard_wrap: true , autolink: true, no_intra_emphasis: true ,
         safe_links_only: true, no_styles: true ,

app/helpers/members_helper.rb

@@ -1,2 +1,12 @@
 module MembersHelper
+
+  def image_for(someone , classes = "")
+    if someone.picture.blank?
+      image = asset_url("no_image")
+    else
+      image = element.picture.url
+    end
+    image_tag(image , alt: someone.name , class: classes )
+  end
+
 end

app/views/layouts/_header.haml

@@ -4,7 +4,9 @@
       = image_tag("feenix_lintu" , class: "h-20")
       %span.ml-2.text-xl.font-bold.tracking-wide.text-gray-800.uppercase Hub Feenix
     %ul.flex.items-center.hidden.space-x-8.lg:flex
-      - [:volunteers , :stories , :info , :arriving, :about].each do |link|
+      %li
+        %a.font-medium.tracking-wide.text-gray-700.transition-colors.duration-400.hover:text-cyan-800{"aria-label" => "Our product", :href => "/members", :title => "People"} People
+      - [ :stories , :info , :arriving, :about].each do |link|
         %li
           %a.font-medium.tracking-wide.text-gray-700.transition-colors.duration-400.hover:text-cyan-800{"aria-label" => "Our product", :href => "/#{link}", :title => link.capitalize}= link.capitalize
       %li

app/views/members/index.html.haml

@@ -1,25 +1,14 @@
 .flex.justify-center
 
   %h1 Listing members
+  = paginate @members
 
-  %table
+.grid.grid-cols-4
-    %thead
+  - @members.each do |member|
-      %tr
+    .fex.flex-col.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm.m-10
-        %th Name
+      = image_for( member ,  class: "h-60 w-full object-cover")
-        %th Public
+      %h3.p-5.text-2xl.bg-gray-100.text-black.font-bold.text-center= member.name
-        %th
+      %div.h-full
-        %th
+        .p-5.text-center
-        %th
+          .m-2.text-sm.leading-relaxed.line-clamp-3{ prose_classes }
-
+            = markdown(member.bio)
-    %tbody
-      - @members.each do |member|
-        %tr
-          %td= member.name
-          %td= member.public
-          %td= link_to 'Show', member
-          %td= link_to 'Edit', edit_member_path(member)
-          %td= link_to 'Destroy', member, method: :delete, data: { confirm: 'Are you sure?' }
-
-  %br
-
-  = link_to 'New Member', new_member_path