breeze_cms 0.9.5

data/app/views/breeze/sections/_overlay.haml

@@ -0,0 +1,33 @@
+:javascript
+  var authenticity_token = "#{form_authenticity_token}"
+
+:opal
+  Document.ready? do
+    init_section
+  end
+
+:css
+  #overlay {
+    position: fixed;
+    display: none;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0,0,0,0.5);
+    z-index: 2;
+    cursor: pointer;
+  }
+
+  #text {
+    position: absolute;
+  }
+#overlay
+  #text.text-gray-800
+    %input.header.mt-1.w-full.rounded-md.border-gray-200.bg-white.shadow-sm{ id: "_header", type: "text" , value: "trans.header"}
+    %textarea.textarea.mt-2.w-full.rounded-lg.border-gray-200.align-top.shadow-sm.sm:text-sm{ cols: 100 , rows: 10 }
+
+    %button#hidden_button.button.change.mt-4{type: :submit }
+      Update Texts

data/app/views/breeze/sections/_section.rabl

@@ -0,0 +1,5 @@
+object @section
+attributes :id , :text , :header
+child :cards , object_root: false do
+  attributes :id , :text , :header
+end

data/app/views/breeze/sections/_sections_pagination.haml

@@ -0,0 +1,29 @@
+.text-xl.font-bold.text-gray-900
+  = section.page.type.capitalize
+  \:
+  = link_to section.page.name, breeze.page_sections_path(section.page.id), class: "underline text-3xl ml-3"
+.text-xl.font-bold.text-gray-900
+  %span
+    Section
+    \:
+    = link_to section.header, section_path(section), class: "underline text-3xl ml-3"
+
+.inline-flex.items-center.justify-center.gap-3
+  - if section.previous_section
+    =link_to breeze.section_path(section.previous_section.id) , class: "inline-flex h-8 w-8 items-center justify-center rounded border border-gray-100 hover:bg-sky-100" do
+      %span.sr-only Next Section
+      %svg.h-3.w-3{:fill => "currentColor", :viewbox => "0 0 20 20", :xmlns => "http://www.w3.org/2000/svg"}
+        %path{"clip-rule" => "evenodd", :d => "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z", "fill-rule" => "evenodd"}
+  - else
+    .inline-flex.h-8.w-8.items-center.justify-center.rounded.border.border-gray-100
+  %p.text-xs
+    = section.index
+    %span{:class => "mx-0.25"} /
+    = section.page.sections.length
+  - if section.next_section
+    =link_to breeze.section_path(section.next_section.id), class: "inline-flex h-8 w-8 items-center justify-center rounded border border-gray-100 hover:bg-sky-100" do
+      %span.sr-only Next Section
+      %svg.h-3.w-3{:fill => "currentColor", :viewbox => "0 0 20 20", :xmlns => "http://www.w3.org/2000/svg"}
+        %path{"clip-rule" => "evenodd", :d => "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", "fill-rule" => "evenodd"}
+  - else
+    .inline-flex.h-8.w-8.items-center.justify-center.rounded.border.border-gray-100

data/app/views/breeze/sections/index.haml

@@ -0,0 +1,88 @@
+.mx-6.md:mx-12.mx-20.flex.h-16.items-center.gap-16.mb-10
+  .text-xl.font-bold.text-gray-900
+    = @page.type.capitalize
+    = link_to @page.name , breeze.page_path(@page)
+  .text-xl.text-gray-900
+    =link_to "View live" , "/#{@page.name}" , target: @page.name
+  = form_tag( breeze.section_new_path(@page.id), method: :post ) do
+    %button.button.change.mr-3{type: :submit} New Section
+
+-@page.sections.each do |section |
+  .flex.gap-10.mt-2.pt-4.pb-2.border-2.bg-neutral-50.border-slate-400{ id: "section_#{section.id}"}
+    .basis-72.ml-20
+      %h3.text-lg.font-bold Section #{section.index} : #{section.header}
+      .flex.flex-wrap.gap-3
+        = link_to breeze.section_path(section.id) do
+          %button.button.action Edit
+        = form_tag( breeze.section_new_path(@page.id , template: section.template), method: :post ) do
+          %button.button.change.mr-3{type: :submit} Copy
+        .p-2
+          =link_to(breeze.section_move_path(section.id , dir: :down)) do
+            %svg.w-6.h-6{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
+              %path{:d => "M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
+        .p-2
+          =link_to(breeze.section_move_path(section.id , dir: :up)) do
+            %svg.w-6.h-6{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
+              %path{:d => "M8.25 6.75L12 3m0 0l3.75 3.75M12 3v18", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
+        .basis-full.mt-3
+          Updated at:
+          = distance_of_time_in_words_to_now(section.updated_at)
+        .basis-full.mb-3
+          Updated by:
+          = updated_by(section)
+        - if section.has_cards?
+          - if card = section.cards_update
+            .basis-full
+              Cards updated at:
+              = distance_of_time_in_words_to_now(card.updated_at)
+            .basis-full.mb-3
+              Cards updated by:
+              = card.updated_by
+        .basis-full.mb-3
+        = form_tag( breeze.section_path(section.id) , {method: :delete  } ) do
+          %button.button.remove{type: :submit} Delete
+
+    .basis-72
+      .flow.flow-cols
+        %h3.text-lg.font-bold.border-bottom-2 Style
+        %p= section.template_style.header
+        = section_preview(section , class: "object-contain")
+        = form_tag( breeze.section_select_template_path(section.id), method: :post ) do
+          %button.button.action.mt-3{type: :submit} Change Section Style
+
+    .basis-52.grow
+      %h3.my-4.text-lg.font-bold Header
+      %p= section.header
+      %h3.mt-4.text-lg.font-bold Text
+      %p= section.text[0..100] + " ..." if section.text
+    .basis-72
+      - if section.has_cards?
+        %h3.text-lg.font-bold #{section.cards.length} Cards
+        =link_to breeze.section_cards_path(section.id) do
+          =card_preview(section , class: "object-contain")
+      - else
+        = link_to(breeze.images_path(section_id: section.id)) do
+          -if section.image
+            %h3.text-lg.font-bold Image #{section.image.name}
+            .flex.align-center.justify-between.mb-4
+              .text-lg.font-bold.mt-2.mx-2
+                = section.image.size.to_s + "k"
+              %strong.inline-block.rounded.bg-gray-200.px-3.py-1.text-md.font-medium
+                = section.image.aspect_ratio
+            = image_for( section , "h-40 mb-1")
+          -else
+            %h3.mt-y.text-lg.font-bold No Image
+    .basis-96
+      %h3.text-lg.font-bold Options
+      .grid.grid-cols-2.gap-3.mx-10
+        - section.safe_options.each do|name , value|
+          -unless value.blank?
+            .font-bold.mt-1= name.camelcase
+            .font-xl= value
+.grid.grid-cols-2.gap-2.m-8
+  .relative.block
+    = form_tag( breeze.section_new_path(@page.id), method: :post ) do
+      %button.button.change.mr-3{type: :submit} New Section
+  .relative.block.delete_page
+    = form_tag( breeze.page_path(@page.id) , {method: :delete  } ) do
+      %button.button.remove{type: :submit} Delete Page

data/app/views/breeze/sections/new.haml

@@ -0,0 +1,12 @@
+.mx-6.md:mx-12.mx-20.flex.h-16.items-center.gap-16
+  .text-xl.font-bold.text-gray-900
+    Changes
+  .text-xl.text-gray-900
+    Branch
+    = @git.current_branch
+
+%h1 New breeze_section
+
+= render 'form'
+
+= link_to 'Back', breeze.sections_path

data/app/views/breeze/sections/select_card_template.haml

@@ -0,0 +1,13 @@
+.mx-6.md:mx-12.mx-20.flex.h-16.items-center.gap-16
+  .text-xl.font-bold.text-gray-900
+    Page #{link_to @section.page.name, breeze.page_sections_path(@section.page.id), class: "underline"}
+  .text-xl.text-gray-900
+    Select Card Style for Section #{@section.index} - #{@section.header}
+
+.grid.grid-cols-4.gap-6.m-8
+  - @cards.each do |style|
+    .flex.flex-col.border.border-gray-300.rounded-lg.p-2.bg-neutral-50
+      = link_to( breeze.section_set_card_template_path( card_template: style.template )) do
+        .font-bold.text-lg.text-center.pb-4= style.header
+        =image_tag(style.card_preview , class: "w-full object-contain")
+        .text-left.pt-4.bg-gray-50= style.text

data/app/views/breeze/sections/select_template.haml

@@ -0,0 +1,15 @@
+.mx-6.md:mx-12.mx-20.flex.h-16.items-center.gap-16
+  .text-xl.font-bold.text-gray-900
+    Page #{link_to @section.page.name, breeze.page_sections_path(@section.page.id), class: "underline"}
+  .text-4xl.font-bold.text-gray-900
+    Select Style
+  .text-xl.text-gray-900
+    for Section #{@section.index} - #{@section.header}
+
+.grid.grid-cols-4.gap-6.my-10.mx-6.md:mx-12.mx-20
+  - @sections.each do |style|
+    .flex.flex-col.border.border-gray-300.rounded-lg.p-2.bg-neutral-50
+      = link_to( breeze.section_set_template_path( template: style.template )) do
+        .font-bold.text-lg.text-center.pb-4= style.header
+        =image_tag(style.section_preview , class: "w-full object-contain")
+        .text-left.pt-4.bg-gray-50= style.text

data/app/views/breeze/sections/show.haml

@@ -0,0 +1,91 @@
+.mx-6.md:mx-12.mx-20.flex.h-16.items-center.gap-16.w-full
+  = render "sections_pagination" , section: @section
+  = form_tag( breeze.section_new_path(@section.page.id), method: :post ) do
+    %button.button.change.mr-3{type: :submit} New Section
+
+.xl:mx-auto{class: "max-w-[1920px]"}
+  = render_section( @section )
+
+.flex.gap-8.my-10.flex-wrap.mx-20
+  .basis-80
+    %h3.text-lg.font-bold= @section.template_style.header
+    = section_preview(@section , class: "w-full object-contain my-4")
+    .flex
+      = form_tag( breeze.section_select_template_path(@section.id), method: :post ) do
+        %button.button.action.mr-3{type: :submit} Change Section Style
+      = form_tag( breeze.section_new_path(@section.page.id , template: @section.template), method: :post ) do
+        %button.button.change.mr-3{type: :submit} New Section
+    .basis-full.mt-3
+      Updated at:
+      = distance_of_time_in_words_to_now(@section.updated_at)
+    .basis-full.mb-3
+      Updated by:
+      = updated_by(@section)
+    = simple_form_for(  @section ,  method: :patch ) do |f|
+      = f.input :page_id , label: "move to page" , include_blank: false ,
+                collection: Breeze::Page.all.collect{|p| [p.name , p.id]}
+      %button.button.change.mt-3{type: :submit} Move
+
+  .basis-80.image
+    = link_to(breeze.images_path(section_id: @section.id)) do
+      -if @section.image
+        %h3.text-lg.font-bold Image #{@section.image.name}
+        .flex.align-center.justify-between.mb-4
+          .text-lg.font-bold.mt-2.mx-2
+            = @section.image.size.to_s + "k"
+          %strong.inline-block.rounded.bg-slate-200.px-3.py-1.text-md.font-medium
+            = @section.image.aspect_ratio
+        = image_for( @section )
+      -else
+        %h3.text-lg.font-bold No Image
+    .flex
+      =link_to breeze.images_path(section_id: @section.id) do
+        .button.action.mt-4.mr-3 Change Image
+      - if( @section.image )
+        =link_to breeze.image_path(@section.image.id) do
+          .button.change.mt-4.mr-3 Edit Image
+        =link_to  breeze.section_set_image_path( @section.id  , image: "") do
+          .button.remove.mt-4 Remove image
+
+  .basis-80.grow.content_update
+    %label.block
+      %h4.text-lg.font-bold Texts
+    = simple_form_for( @section , method: :patch) do |f|
+      = f.input :header
+      = f.input :text , as: :text , input_html: {rows: rows(@section)}
+      %button.button.change.mt-4{type: :submit} Update Texts
+
+  - if( @section.has_cards? )
+    .basis-full.h-0
+    .basis-96
+      .mx-3.text-lg.font-bold Card Style: #{@section.card_template_style.header}
+      =card_preview(@section , class: "my-3")
+      .flex.py-3
+        = form_tag( breeze.section_select_card_template_path(@section.id), method: :post ) do
+          %button.button.action.mr-3{type: :submit} Change Card Style
+
+    .basis-96.grow
+      %h3.text-lg.font-bold #{@section.cards.length} Cards
+      -@section.cards.each do |card|
+        .mt-4.text-md.font-bold= card.header
+        .text-sm #{card.text[0..70]} .....
+      .flex.mt-3.gap-3
+        = link_to breeze.section_cards_path(@section.id) do
+          %button.button.action View and Edit Cards
+        = form_tag( breeze.card_new_path(@section.id) , method: :post ) do
+          %button.button.change.mr-3{type: :submit} New Card
+
+  .basis-80.grow
+    = simple_form_for( @section , method: :patch , class: "mx-auto mb-0 max-w space-y-4") do
+      - @section.option_definitions.each do |option|
+        .grid.grid-cols-3
+          =render "option_form_#{option.type}" , section: @section , option: option
+      -if @section.option_definitions.empty?
+        %p No options
+      -else
+        %button.button.change.mt-4{type: :submit} Update Options
+
+:javascript
+  var sections = [#{ render( partial: "section" , formats: :json).html_safe } ]
+
+= render partial: 'overlay'

data/app/views/breeze/styles/_options.haml

@@ -0,0 +1,9 @@
+.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm
+  .p-6
+    %h3.text-lg.font-medium
+      Options
+    %p.mt-2.text-sm.leading-relaxed.line-clamp-3
+      -style.options_definitions.each do | style |
+        %label.block
+          .text-lg.font-bold=style.name
+          =style.description

data/app/views/breeze/styles/index.haml

@@ -0,0 +1,84 @@
+.mx-6.md:mx-12.mx-20.flex.h-16.items-center.gap-16
+  .text-xl.font-bold
+    Page styles
+  .text-xl.font-bold
+    =link_to "Section styles" , "#section_styles"
+  .text-xl.font-bold
+    =link_to "Card styles" , "#cards_styles"
+
+.flex.bg-cyan-100
+  .px-4.py-8.mx-auto.text-center
+    %h1.text-4xl.font-bold
+      Page styles
+
+.grid.grid-cols-3.gap-4.m-8
+  -@page_styles.each do |style|
+    %article.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm
+      .p-6
+        %h3.text-lg.font-medium
+          =style.type
+        %p.mt-2.text-sm
+          Shorthand:
+          =style.section_template
+    .overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm
+      .p-6
+        -if style.section_template
+          = style.section_template
+          .w-full.object-contain
+            =image_tag(style.section_preview )
+        -else style.section_template
+          .w-full
+            Any Section allowed
+    =render "options" , style: style
+
+#section_styles.flex.bg-cyan-100
+  .px-4.py-8.mx-auto.text-center
+    %h1.text-4xl.font-bold
+      Section styles
+
+.grid.grid-cols-3.gap-4.m-8
+  -@section_styles.each do | style|
+    .overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm
+      .p-6
+        %h3.text-lg.font-medium
+          =style.header
+        %p.mt-2.text-sm.leading-relaxed.line-clamp-3
+          = style.text
+        %p.mt-2.text-sm
+          Shorthand:
+          =style.template
+        %h3.text-lg.font-medium.mt-4
+          Cards
+        %p.mt-2.text-sm.leading-relaxed.line-clamp-3
+          -if(style.has_cards?)
+            Section may include cards. See card styles below
+          -else
+            Section may not include cards
+    .overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm
+      .p-6
+        .w-full.object-contain.h-72
+          =image_tag(style.section_preview )
+
+    =render "options" , style: style
+
+#cards_styles.flex.bg-cyan-100
+  .px-4.py-8.mx-auto.text-center
+    %h1.text-4xl.font-bold
+      Card styles
+.grid.grid-cols-3.gap-4.m-8
+  -@cards_styles.each do |style|
+    %article.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm
+      .p-6
+        %h3.text-lg.font-medium
+          =style.header
+        %p.mt-2.text-sm.leading-relaxed.line-clamp-3
+          = style.text
+        %p.mt-2.text-sm
+          Shorthand:
+          =style.template
+    .overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm
+      .p-6
+        .w-full.object-contain.h-72
+          =image_tag(style.card_preview )
+
+    =render "options" , style: style

data/app/views/breeze/translations/_row.haml

@@ -0,0 +1,29 @@
+.flex.gap-10.mt-2.pt-4.bg-neutral-50.mx-10.border-b-2{class: language_bg(trans.language)}
+  .basis-10.ml-3
+    %h3.text-lg.font-bold.text-center
+      = trans.object.index_name
+      = trans.language
+  .grow
+    .text{id: "#{trans.id}_header_text" ,
+          onclick: "text_to_form(event)" ,
+          class: ("bg-orange-200" if trans.is_old?) }
+      = trans.header
+    .hidden.form{id: "#{trans.id}_header_form"}
+      %input.mt-1.w-full.rounded-md.border-gray-200.bg-white.text-sm.text-gray-800.shadow-sm{ id: "#{trans.id}_header", type: "text" , value: trans.header}
+      %button.button.change.mt-4{type: :submit ,
+              id: "#{trans.id}_header_button" ,
+               onclick: "submit_switch(event)"  }
+        Update Texts
+  .grow
+    .text{id: "#{trans.id}_text_text" ,
+          onclick: "text_to_form(event)" ,
+          class: ("bg-orange-200" if trans.is_old?) }
+      = trans.text
+    .hidden.form{id: "#{trans.id}_text_form"}
+      %textarea.mt-2.w-full.rounded-lg.border-gray-200.align-top.shadow-sm.sm:text-sm{ cols: 100 ,
+              id: "#{trans.id}_text" , rows: rows(trans.text) }
+        =trans.text
+      %button.button.change.mt-4{type: :submit ,
+              id: "#{trans.id}_text_button" ,
+              onclick: "submit_switch(event)"}
+        Update Texts

data/app/views/breeze/translations/show.haml

@@ -0,0 +1,79 @@
+.mx-6.md:mx-12.mx-20.flex.h-16.items-center.gap-16
+  .text-xl.font-bold.text-gray-900
+    - previous = @page.previous_page
+    = link_to( "<< previous (#{previous.name})" , breeze.translation_path(id: previous.id) )
+  .text-xl.font-bold.text-gray-900
+    Page
+    = @page.name
+  .text-xl.font-bold.text-gray-900
+    - next_page = @page.next_page
+    = link_to( "(#{next_page.name}) next >> " , breeze.translation_path(id: next_page.id) )
+
+-Breeze.language_strings.each do |lang|
+  -@page.sections.each do |section|
+    -trans = section.get_translation(lang)
+    = render "row" , trans: trans
+
+    -section.cards.each do |card|
+      -trans = card.get_translation(lang)
+      = render "row" , trans: trans
+
+
+:javascript
+  // element ids conform to the following namng scheme (trans is tanslation id)
+  // trans_type_text  is the text div for type (text/header)
+  // trans_type_form  is the form div for type (gets switched with above)
+  // trans_type_button  is the button for form for type
+  // trans_type is the input/textarea (value is put to trans_type_text)
+
+  // change visibility id_text /id_form according to param 2/3
+  function toggle_vis(id , text_visability , form_visability){
+    var text_id = id + "_text";
+    var text = document.getElementById(text_id);
+    text.style.display = text_visability;
+    var form_id = id + "_form";
+    var form = document.getElementById(form_id);
+    form.style.display = form_visability ;
+    return text ;
+  }
+
+
+  function form_submit(trans_id , field ){
+    var input_id = trans_id + "_" + field
+    var input = document.getElementById(input_id);
+
+    var postObj = {
+        authenticity_token: "#{form_authenticity_token}"
+    }
+    postObj[field] = input.value ;
+    const url = "/breeze/translations/" + trans_id
+    fetch(url, {
+        method: 'put', body: JSON.stringify(postObj),
+        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json'}
+      }).then((response) => {
+          return response.json()
+      }).then((res) => {
+          console.log(input_id + " updated")
+      }).catch((error) => {
+          console.log(error)
+      })
+    var text = toggle_vis( input_id , "block", "none")
+    text.innerHTML = input.value ;
+    text.classList.remove("bg-orange-200");
+  }
+
+
+  function submit_switch(event){
+    var input_id = event.target.id; // eg 123_header
+    console.log("switch " + input_id)
+    var parts = input_id.split("_")
+    form_submit( parts[0] , parts[1] );
+  }
+
+
+  function text_to_form(event) {
+    var text_id = event.target.id; // eg 123_header_text
+    console.log("text2form " + text_id)
+    var parts = text_id.split("_");
+    toggle_vis( parts[0] + "_" + parts[1] , "none" , "block")
+  }

data/app/views/breeze/view/_blog_header.haml

@@ -0,0 +1,13 @@
+.flex.justify-center.p-8.flex-col.md:flex-row{options(section , :margin , :background )}
+  .flex.items-center.h-40.md:h-60.lg:h-96.w-full.overflow-hidden{order_option(section, "lg:w-1/3")}
+    = image_for(section ,"")
+  .flex.items-center.w-full.max-w.px-6.mt-6.mx-auto{:class => "lg:w-2/3"}
+    .flex-1{text_color_option(section)}
+      .text-center
+        %h2.text-4xl.font-bold.text-center.mb-2
+          = section.header_text(current_lang)
+        .font-bold.text-center.mb-4.lg:mb-8
+          = date_precision(section.page , "published_date")
+        .max-w-full.mt-4.gap-16{ options(section , :text_columns , :prose ) }
+          = markdown(section,current_lang)
+          = header_list

data/app/views/breeze/view/_form_section.haml

@@ -0,0 +1,21 @@
+.flex.flex-col.m-5.md:m-12.lg:m-20{ options(section , :background , :text_color)}
+  .flex.items-center.justify-center.flex-1
+    .max-w-prose.px-4.mt-16.mx-auto.text-center
+      %h1.text-4xl.font-medium= section.header_text(current_lang)
+      .mt-4.text-lg.pt-10{ prose_classes }
+        = markdown(section,current_lang)
+  .flex.items-center.justify-start.m-10.md:m-20
+    .mx-auto.w-full.max-w-4xl{class: "max-w-[50%]"}
+      = form_tag( main_app.post_form_path , {class: "mt-10" }) do
+        - challenge = rand(8)
+        = hidden_field_tag :section_id , section.id
+        = hidden_field_tag :bot_fudder , "#{challenge*2}"
+        .md:grid.gap-6.grid-cols-2
+          - template = "breeze/view/cards/" + section.card_template
+          - section.cards.each do |card|
+            = render( template , card: card)
+        .grid.gap-6.md:grid-cols-2
+          .relative.z-0.mt-10
+            %input.peer.block.w-full.appearance-none.border-0.border-b.border-gray-500.bg-transparent.px-0.text-sm.text-gray-900.focus:border-blue-600.focus:outline-none.focus:ring-0{:class => "py-2.5", :name => "challenge", :placeholder => " ", :type => "text"}
+            %label.absolute.top-3.-z-10.-translate-y-6.scale-75.transform.text-sm.text-gray-500.duration-300.peer-placeholder-shown:translate-y-0.peer-placeholder-shown:scale-100.peer-focus:left-0.peer-focus:-translate-y-6.peer-focus:scale-75.peer-focus:text-blue-600.peer-focus:dark:text-blue-500{:class => "origin-[0]"}Anti bot question: #{challenge} + #{challenge + 1} is
+          %button.mt-10.rounded-md.bg-cyan-700.px-20.py-2.text-white{:type => "submit"} Send

data/app/views/breeze/view/_section_cards.haml

@@ -0,0 +1,17 @@
+%section.m-6.md:m-12.lg:m-20{ options(section , :background , :text_color), id: section.type_id}
+  .flex.justify-center
+    - unless section.header.blank? and section.text.blank?
+      .px-4.py-4.md:py-10.lg:py-16{ options(section , :text_align)}
+        - unless section.header.blank?
+          %h1.section_header.text-2xl.font-bold.tracking-tight.sm:text-4xl
+            = section.header_text(current_lang)
+        - if section.has_option?("subheader")
+          %h2.text-xl.pt-10.font-bold.tracking-tight.sm:text-2xl
+            = section.option("subheader")
+        - unless section.text.blank?
+          .section_text.text-lg.pt-10{ prose_classes }
+            = markdown(section , current_lang)
+  - template = "breeze/view/cards/" + section.card_template
+  .grid{ column_option(section)}
+    - section.cards.each do |card|
+      = render( template , card: card)

data/app/views/breeze/view/_section_feature.haml

@@ -0,0 +1,13 @@
+%section.m-5.md:m-12.lg:m-20{ options(section , :background , :text_color), id: section.type_id}
+  .grid.grid-cols-1.md:grid-cols-2
+    .flex.flex-col.lg:flex-row
+      .max-w-xl.pr-16.mx-auto.mb-10
+        %h2.section_header.my-4.md:my-10.text-4xl.font-extrabold.leading-none
+          = section.header_text(current_lang)
+        .section_text.mb-6{ prose_classes }
+          = markdown(section,current_lang)
+        .flex.items-center
+    - template = "breeze/view/cards/" + section.card_template
+    .grid{ column_option(section)}
+      - section.cards.each do |card|
+        = render( template , card: card)

data/app/views/breeze/view/_section_full_image.haml

@@ -0,0 +1,10 @@
+%section.overflow-hidden.bg-cover.bg-no-repeat{bg(section , "h-full") , id: section.type_id}
+  .px-4.py-24.sm:px-6.lg:px-8
+    .flex{ item_align_option( section)}
+      .p-8.md:p-12.lg:px-16.lg:py-24{options(section , :shade )}
+        .mx-auto.max-w-xl{ options(section , :text_color, :text_align)}
+          %h2.section_header.text-2xl.font-bold.md:text-5xl
+            = section.header_text(current_lang)
+          .section_text.sm:mt-4.text-2xl{ prose_classes }
+            = markdown(section,current_lang)
+          =view_button(section , "my-2")

data/app/views/breeze/view/_section_full_up.haml

@@ -0,0 +1,11 @@
+%section{ options(section , :background , :margin) , id: section.type_id}
+  .flex{ options(section , :item_align )}
+    .px-4.py-4.md:py-10.lg:py-16.mx-5.md:mx-12.lg:mx-20{options(section , :text_align , :text_color)}
+      %h1.section_header.text-2xl.font-bold.tracking-tight.sm:text-4xl
+        = section.header_text(current_lang)
+      -if section.has_option?("subheader")
+        %h4.text-xl.mt-10.md:text-2xl
+          = section.option("subheader")
+      .section_text.mt-4.text-lg.pt-10{ prose_classes }
+        = markdown(section,current_lang)
+      =view_button(section , "my-2")

data/app/views/breeze/view/_section_half_image.haml

@@ -0,0 +1,13 @@
+%section.overflow-hidden.grid.grid-cols-1.m-5.md:m-12.lg:m-20.md:grid-cols-2{id: section.type_id}
+  %div{ order_option(section)}
+    = image_for( section , "h-56 w-full object-cover sm:h-full")
+  .p-8.md:p-12.lg:px-16.lg:py-24{ background_option(section)}
+    .mx-auto.max-w-xl{options(section , :text_align , :text_color)}
+      %h2.section_header.text-2xl.font-bold.md:text-4xl
+        = section.header_text(current_lang)
+      -if section.has_option?("subheader")
+        %h4.text-xl.mt-10.md:text-2xl
+          = section.option("subheader")
+      .section_text.mt-8{ prose_classes }
+        = markdown(section,current_lang)
+      =view_button(section , "my-2")

data/app/views/breeze/view/_section_large_image.haml

@@ -0,0 +1,13 @@
+.flex.justify-center.flex-col.md:flex-row{options(section , :margin , :background ), id: section.type_id}
+  .flex.items-center.sm:my-2.lg:my-0.h-40.md:h-60.lg:h-96.w-full.overflow-hidden{order_option(section, "lg:w-2/3")}
+    = image_for(section ,"object-cover")
+  .flex.items-center.w-full.max-w.px-6.mt-6.mx-auto{:class => "lg:w-1/3"}
+    .flex-1{text_color_option(section)}
+      .text-center
+        %h2.section_header.text-4xl.font-bold.text-center.mb-4.lg:mb-8= section.header_text(current_lang)
+        -if section.has_option?("subheader")
+          %h4.text-xl.mt-4.lg:mt-8.md:text-2xl
+            = section.option("subheader")
+        .section_text.mt-3{ prose_classes }
+          = markdown(section,current_lang)
+        =view_button(section , "my-2")

data/app/views/breeze/view/_section_news.haml

@@ -0,0 +1,16 @@
+- if blog = last_blog
+  %section.border.border-xl.mt-20{ options(section , :background ), id: section.type_id}
+    .flex.my-5.mx-6.md:mx-12.mx-20.justify-between.items-center
+      .section_header.text-2xl.font-bold.tracking-tight.sm:text-4xl
+        = section.header_text(current_lang)
+      .text-lg
+        = distance_of_time_in_words_to_now last_blog.updated_at
+        ago
+  %hr.mt-2.border.border-4.border-gray-600
+  = render_section( last_blog )
+  .flex.justify-between.items-center.border-b-8.border-gray-600
+    .ml-20.mb-2.text-lg
+      = section.text_text(current_lang)
+    .mr-20.mb-2.text-lg
+      %a.transition{:class => "hover:text-gray-500/75", :href => main_app.view_blog_path(blog.page.name)}
+        Read More . . .