new section with two third image. margin option

app/views/merged/sections/show.html.haml

@@ -8,13 +8,17 @@
         Page #{link_to @section.page.name, page_sections_url(@section.page.name), class: "underline"}
   .flex.items-center.justify-center.flex-1
     %h3.text-xl.font-bold.tracking-tight.text-gray-900
-      Section #{@section.index + 1}
-
+      Section #{@section.index + 1} / #{@section.page.sections.length}
+      - unless @section.index == 0
+        =link_to "(prev)" , section_url(@section.previous_section.id) 
+      - unless @section.index == (@section.page.sections.length - 1)
+        =link_to "(next)" , section_url(@section.next_section.id)
 .grid.grid-cols-3.gap-2.m-8
   .relative.block.border.border-gray-100
     %h3.mt-4.text-lg.font-bold Template  #{@section.template}
     = section_preview(@section , class: "w-full object-contain p-3")
     = yellow_button( "Change Template" , section_select_template_url(@section.id))
+    = green_button( "New Section" , new_page_section_url(@section.page.name) )
 
   .relative.block.border.border-gray-100
     = section_form( class: "mx-auto mt-8 mb-0 max-w space-y-4") do

app/views/merged/view/_section_full_up.haml

@@ -1,4 +1,4 @@
-.flex.flex-col.m-20{ options(section , :background , :color)}
+.flex.flex-col{ options(section , :background , :color , :margin)}
   .flex.items-center.justify-center.flex-1
     .max-w-prose.px-4.py-16.mx-auto.text-center
       %h1.text-2xl.font-bold.tracking-tight.sm:text-4xl

app/views/merged/view/_section_large_image.haml

@@ -0,0 +1,8 @@
+.flex.justify-center.h-96.p-8{margin_option(section )}
+  .flex.items-center.w-full.overflow-hidden{order_option(section, "w-2/3")}
+    = image_for(section ,"")
+  .flex.items-center.w-full.max-w-md.px-6.mx-auto{:class => "w-1/3"}
+    .flex-1{color_option(section)}
+      .text-center
+        %h2.text-4xl.font-bold.text-center.mb-8= section.header
+        %p.mt-3= section.text