Update K5 PL marketing page (#57904)

* create professional-learning/elementary.haml and redirect professional-development-workshops

* add views to share between k-5 and middle-high pl pages

* remove strings to move to a new PR

* delete new views

these will get added when I merge in another PR

* add workshop and curriculum block sections

* add certificate list item to middle-high page

* update map styles

* show programs and regional partner views

pegasus/sites.v3/code.org/public/css/design-system-pegasus.scss

@@ -77,10 +77,10 @@ section.bg-pattern-dark {
 
 // Adds 2rem of space above or below an element
 .add-margin-top {
-  margin-top: 2rem;
+  margin-top: 2rem !important;
 }
 .add-margin-bottom {
-  margin-bottom: 2rem;
+  margin-bottom: 2rem !important;
 }
 
 
@@ -163,6 +163,9 @@ i.fa-fw {
   &.align-items-center {
     align-items: center;
   }
+  &.gap-2 {
+    gap: 2rem;
+  }
   &.gap-4 {
     gap: 4rem;
   }

pegasus/sites.v3/code.org/public/educate/professional-learning/middle-high.haml

@@ -23,6 +23,7 @@ theme: responsive_full_width
         %li=hoc_s(:pl_middle_high_top_list_01)
         %li=hoc_s(:pl_middle_high_top_list_02)
         %li=hoc_s(:pl_middle_high_top_list_03)
+        %li=hoc_s("pl_page_k5.top_list_04")
       %a.link-button{href: off_season_version ? "#subscribe-form" : "/educate/professional-learning/program-information"}
         =hoc_s(off_season_version ? :call_to_action_applications_get_notified : :call_to_action_apply_now)
     .video-wrapper.col-50

pegasus/sites.v3/code.org/public/professional-development-workshops.redirect

@@ -0,0 +1 @@
+/professional-learning/elementary

pegasus/sites.v3/code.org/public/professional-learning/elementary.haml

@@ -0,0 +1,72 @@
+---
+title: K-5 Professional Learning Workshops
+theme: responsive_full_width
+---
+
+- button_url = "#workshops-map"
+- button_string = hoc_s("pl_page_k5.button")
+
+%link{href: "/css/generated/design-system-pegasus.css", rel: "stylesheet"}
+
+%section
+  .wrapper
+    %h1=hoc_s("pl_page_k5.heading")
+    .grid-container.two-col.justify-space-between.align-items-start.gap-2
+      .text-wrapper
+        %p=hoc_s("pl_page_k5.desc_01")
+        %p.body-three.wrap-pretty
+          %strong=hoc_s("pl_page_k5.desc_02")
+        %ul
+          %li=hoc_s("pl_page_k5.top_list_01")
+          %li=hoc_s("pl_page_k5.top_list_02")
+          %li=hoc_s("pl_page_k5.top_list_03")
+          %li=hoc_s("pl_page_k5.top_list_04")
+        %a.link-button{href: button_url}
+          =button_string
+      %figure
+        %img.rounded-corners{src: "/images/self-paced-pl-tile-csf.png", alt: "", style: "width: 100%; margin-block: 0.5rem 0"}
+
+%section.bg-neutral-light
+  .wrapper.centered
+    %h2=hoc_s("pl_page_k5.workshops.heading")
+    %p.wrap-pretty
+      =hoc_s("pl_page_k5.workshops.desc")
+    = view :"professional_learning/k_5_workshop_blocks"
+    %a.link-button.add-margin-top{href: button_url}
+      =button_string
+
+%section.quote.bg-neutral-dark
+  .wrapper
+    %div.quotes-wrapper
+      %p.quote-text.large
+        =hoc_s("pl_page_k5.quote.text")
+      %p.no-margin-bottom
+        Daphne Wright
+        %span •
+        =hoc_s("pl_page_k5.quote.byline")
+
+%section#workshops-map
+  .wrapper
+    %h2=hoc_s("pl_page_k5.workshops_map.heading")
+    %p=hoc_s("pl_page_k5.workshops_map.desc")
+    = view :workshop_search
+
+%section.bg-neutral-light
+  .wrapper.centered
+    %h2=hoc_s("pl_page_k5.curriculum.heading")
+    %p=hoc_s("pl_page_k5.curriculum.desc")
+    = view :"professional_learning/k_5_curriculum_blocks"
+    %a.link-button.secondary.add-margin-top{href: CDO.studio_url("/catalog?grade=grade_1&grade=grade_2&grade=grade_3&grade=grade_4&grade=grade_5&grade=kindergarten")}
+      =hoc_s("pl_page_k5.curriculum.button")
+
+%section
+  .wrapper
+    = view :"professional_learning/additional_programs", heading: hoc_s("pl_page_k5.additional_offerings.heading"), desc: hoc_s("pl_page_k5.additional_offerings.desc"), middle_high: false
+
+= view :section_divider_line
+
+%section
+  .wrapper
+    = view :"professional_learning/regional_partners_questions"
+
+= view :analytics_event_log_helper, event_name: AnalyticsConstants::ELEMENTARY_SCHOOL_PL_PAGE_VISITED_EVENT

pegasus/sites.v3/code.org/views/professional_learning/additional_programs.haml

@@ -10,11 +10,11 @@
         =hoc_s(:call_to_action_explore_self_paced_learning)
   .action-block.action-block--one-col.secondary.flex-space-between
     .content-wrapper
-      %h3=hoc_s(middle_high ? :pl_elementary_workshops_heading : "pl_page_k5.additional_programs.workshops.title")
-      %p=hoc_s(middle_high ? :pl_elementary_workshops_desc : "pl_page_k5.additional_programs.workshops.desc")
+      %h3=hoc_s(middle_high ? :pl_elementary_workshops_heading : "pl_page_k5.additional_offerings.workshop_6_12.title")
+      %p=hoc_s(middle_high ? :pl_elementary_workshops_desc : "pl_page_k5.additional_offerings.workshop_6_12.desc")
     .content-footer
-      %a.link-button.secondary{href: middle_high ? "/professional-development-workshops" : "/educate/professional-learning/middle-high"}
-        =hoc_s(middle_high ? :call_to_action_explore_k_5_workshops : "pl_page_k5.additional_programs.workshops.button")
+      %a.link-button.secondary{href: middle_high ? "/professional-learning/elementary" : "/educate/professional-learning/middle-high"}
+        =hoc_s(middle_high ? :call_to_action_explore_k_5_workshops : "pl_page_k5.additional_offerings.workshop_6_12.button")
   .action-block.action-block--one-col.secondary.flex-space-between
     .content-wrapper
       %h3=hoc_s(:pl_outside_us_heading)

pegasus/sites.v3/code.org/views/professional_learning/k_5_curriculum_blocks.haml

@@ -0,0 +1,34 @@
+:ruby
+  block_items = [
+    {
+      overline: hoc_s("pl_page_k5.curriculum.csf.overline"),
+      title: hoc_s("pl_page_k5.curriculum.csf.title"),
+      image: "/images/action-blocks/action-block-csf.png",
+      desc: hoc_s("pl_page_k5.curriculum.csf.desc"),
+      url: "/csf",
+      button_label: hoc_s("pl_page_k5.curriculum.csf.button")
+    },
+    {
+      overline: hoc_s("pl_page_k5.curriculum.csc.overline"),
+      title: hoc_s("pl_page_k5.curriculum.csc.title"),
+      image: "/images/action-blocks/action-block-poetry.png",
+      desc: hoc_s("pl_page_k5.curriculum.csc.desc"),
+      url: "/csc",
+      button_label: hoc_s("pl_page_k5.curriculum.csc.button")
+    },
+  ]
+
+.action-block__wrapper.action-block__wrapper--two-col
+  - block_items.each do |block_item|
+    .action-block.action-block--one-col.flex-space-between.white
+      .content-wrapper
+        %p.overline
+          = block_item[:overline]
+        %h3
+          = block_item[:title]
+        %img{src: "#{block_item[:image]}", alt: ""}
+        %p
+          = block_item[:desc]
+      .content-footer
+        %a.link-button{href: "#{block_item[:url]}"}
+          = block_item[:button_label]

pegasus/sites.v3/code.org/views/professional_learning/k_5_workshop_blocks.haml

@@ -0,0 +1,24 @@
+:ruby
+  block_items = [
+    {
+      overline: hoc_s("pl_page_k5.workshops.intro.overline"),
+      title: hoc_s("pl_page_k5.workshops.intro.title"),
+      desc: hoc_s("pl_page_k5.workshops.intro.desc"),
+    },
+    {
+      overline: hoc_s("pl_page_k5.workshops.deep_dive.overline"),
+      title: hoc_s("pl_page_k5.workshops.deep_dive.title"),
+      desc: hoc_s("pl_page_k5.workshops.deep_dive.desc"),
+    },
+  ]
+
+.action-block__wrapper.action-block__wrapper--two-col
+  - block_items.each do |block_item|
+    .action-block.action-block--one-col.flex-space-between.white
+      .content-wrapper
+        %p.overline
+          = block_item[:overline]
+        %h3
+          = block_item[:title]
+        %p
+          = block_item[:desc]