start on memers view

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
-    %thead
-      %tr
-        %th Name
-        %th Public
-        %th
-        %th
-        %th
-
-    %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
+.grid.grid-cols-4
+  - @members.each do |member|
+    .fex.flex-col.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm.m-10
+      = image_for( member ,  class: "h-60 w-full object-cover")
+      %h3.p-5.text-2xl.bg-gray-100.text-black.font-bold.text-center= member.name
+      %div.h-full
+        .p-5.text-center
+          .m-2.text-sm.leading-relaxed.line-clamp-3{ prose_classes }
+            = markdown(member.bio)