integrated section and card previews into page show

app/views/cms/pages/show.haml

@@ -1,10 +1,13 @@
 %p#notice= notice
+.flex.flex-col.bg-white
+  .flex.items-center.justify-center.flex-1
+    .max-w-xl.px-4.py-8.mx-auto.text-center
+      %h1.text-2xl.font-bold.tracking-tight.text-gray-900.sm:text-4xl
+        Page #{@page.name}
 
 -@page.sections.each_with_index do |section , index|
   .grid.grid-cols-6.gap-2.m-8{class: (index%2)==1 ? 'bg-cyan-50' : 'bg-red-50' }
     .relative.block.border.border-gray-100
-      =#image_tag("cms/#{file}" , class: "h-56 w-full object-contain lg:h-72")
-      =# section.template #PREVIEW here
       .p-4
         %h3.mt-4.text-lg.font-bold Section #{index + 1}
         %button.mt-4.rounded-lg.bg-yellow-500.p-4
@@ -13,13 +16,9 @@
           =link_to "Down" , "/index"
         %button.mt-4.rounded-lg.bg-blue-400.p-4
           =link_to "Edit" , "/index"
+        %button.mt-4.rounded-lg.bg-cyan-400.p-4
+          =link_to "New" , "/index"
         %button.mt-4.rounded-lg.bg-red-400.p-4
           =link_to "Delete" , "/index"
     -section.content.each do |key , value|
       = render "cms/sections/#{key}", section: section , key: key , value: value
-
-.grid.grid-cols-6.gap-2.m-8
-  %button.mt-4.rounded-lg.bg-cyan-400.p-4
-    =link_to "New Section" , "/index"
-  %button.mt-4.rounded-lg.bg-blue-400.p-4
-    =link_to "Save Changes" , "/index"

app/views/cms/sections/_card_template.haml

@@ -0,0 +1,5 @@
+.p-6
+  %h3.mt-4.text-lg.font-bold= key.upcase
+  %p= value
+  =image_tag("cms/card_preview/#{value}" , class: "w-full object-contain")
+  %p #{section.content['cards'].length} cards

app/views/cms/sections/_image.haml

@@ -1,2 +1,3 @@
 .p-6
+  %h3.mt-4.text-lg.font-bold= key.upcase
   = image_tag "cms/" + value

app/views/cms/sections/_template.haml

@@ -1,3 +1,4 @@
-.p-6{style: bg(section)}
+.p-6
   %h3.mt-4.text-lg.font-bold= key.upcase
   %p= value
+  =image_tag("cms/section_preview/#{section.template}" , class: "w-full object-contain")

app/views/sections/_section_2_col.haml

@@ -5,7 +5,7 @@
         = section["header"]
       %p.mt-4.text-gray-500
         = section["text"]
-  - template = "cards/" + section["element_template"]
+  - template = "cards/" + section["card_template"]
   .grid.grid-cols-1.md:grid-cols-2
-    - section["elements"].each do |element|
+    - section["cards"].each do |element|
       = render( template , element: element)