first card (with pic) and grid/loop for it

app/views/cards/_card_full_image.haml

@@ -0,0 +1,7 @@
+%a.group.overflow-hidden.relative.flex.h-96.w-full.items-end.bg-black{:href => "#"}
+  = image_for( element , "absolute inset-0 h-full w-full object-cover hover:scale-110 ease-in duration-700")
+  .relative.w-full.bg-cyan-600.m-2.p-4.text-center.tracking-widest.text-white.transition-colors.group-hover:bg-cyan-700{:class => "sm:w-1/2"}
+    %h3.text-lg.uppercase
+      = element["header"]
+    %p.mt-1.text-xs.font-medium
+      = element["text"]

app/views/sections/_section_2_col.haml

@@ -0,0 +1,11 @@
+.flex.flex-col.bg-cyan-100.mx-5
+  .flex.items-center.justify-center.flex-1
+    .max-w-prose.px-4.py-8.mx-auto.text-center
+      %h1.text-2xl.font-bold.tracking-tight.text-gray-900.sm:text-4xl
+        = section["header"]
+      %p.mt-4.text-gray-500
+        = section["text"]
+  - template = "cards/" + section["element_template"]
+  .grid.grid-cols-2.gap-4
+    - section["elements"].each do |element|
+      = render( template , element: element)

app/views/sections/_section_full_up.haml

@@ -1,10 +1,7 @@
 .flex.flex-col.bg-white
-  %img.object-cover.w-full.h-96{:alt => "", :src => "https://images.unsplash.com/photo-1558769132-cb1aea458c5e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1548&q=80"}/
   .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
         = section["header"]
       %p.mt-4.text-gray-500
         = section["text"]
-      %a.inline-block.px-5.py-3.mt-6.text-sm.font-medium.text-white.bg-indigo-600.rounded.hover:bg-indigo-700.focus:outline-none.focus:ring{:href => "#"}
-        = section["button"]["text"]