finish center page

majak_uistyleguide/templates/patterns/molecules/program/secondary_card_program.html

-<div class="bg-grey-180 py-24">
+<div class="bg-grey-180">
   <div
     class="__js-root container--wide"
     id="{{ id }}"

majak_uistyleguide/templates/patterns/organisms/header/district/center_header.html

@@ -15,7 +15,7 @@
 
   <div
     class="
-      opacity-0 absolute top-0 left-0
+      opacity-0 absolute top-0 left-0 overflow-hidden
 
       py-8
 

majak_uistyleguide/templates/patterns/organisms/main_section/newsletter_section.html

@@ -8,7 +8,7 @@
       {{ second_line }}
     </h2>
     <p class="xl:mt-[-1rem]">
-      Fake news tam nenajdeš, ale dozvíš se, co chystáme doopravdy!
+      {{ section_label }}
     </p>
 
     <div class="flex flex-col gap-2 mt-12 items-start">

majak_uistyleguide/templates/patterns/organisms/main_section/newsletter_section.yaml

@@ -2,4 +2,3 @@ context:
   first_line: 'Odebírej náš'
   second_line: 'newsletter'
   section_label: 'Fake news tam nenajdeš, ale dozvíš se, co chystáme doopravdy!'
-  section_text: 'Odebírej náš newsletter'

majak_uistyleguide/templates/patterns/organisms/main_section/small_newsletter_section.html

+<div
+  class="newsletter-section"
+  style="background-image:url('../../../../../static/images/background-images/bg-newsletter.webp')"
+>
+  <div class="container--medium py-16">
+    <h2 class="head-9xl">
+      {{ header }}
+    </h2>
+    <p class="xl:mt-[-1rem]">
+      {{ section_label }}
+    </p>
+
+    <div class="flex flex-col gap-2 mt-4 items-start">
+      {% include 'patterns/atoms/form_fields/form_input_backgroundless.html' with placeholder='Tvůj email' classes='mb-3 w-full md:w-96' %}
+      {% include 'patterns/atoms/form_fields/form_checkbox.html' with label='Souhlasím se zpracováním osobních údajů' classes='mb-3' %}
+      {% include 'patterns/atoms/buttons/round_button.html' with button_text='Odebírat' %}
+    </div>
+  </div>
+</div>

majak_uistyleguide/templates/patterns/organisms/main_section/small_newsletter_section.yaml

+context:
+  header: 'Odebírej newsletter centra'
+  section_label: 'Lorem ipsum dolor sit amet.'

majak_uistyleguide/templates/patterns/templates/district/center/center.html

@@ -3,6 +3,12 @@
 
 <main role="main">
   {% include "patterns/molecules/program/secondary_card_program.html" %}
+
+  <div class="container--wide my-6 lg:my-12">
+    asdf
+  </div>
+
+  {% include 'patterns/organisms/main_section/small_newsletter_section.html' %}
 </main>
 
 {% include 'patterns/organisms/layout/footer.html' %}

src/js/components/card_program/CardProgram.vue

@@ -6,7 +6,7 @@
   <div
     :class="
       (
-        (backgroundClass) ?
+        (backgroundClass !== null) ?
         backgroundClass :
         'bg-pirati-yellow'
       ) + ' py-16'
@@ -31,7 +31,7 @@
           :title="point.title"
           :renderedContent="point.renderedContent"
           :points="point.points"
-          :openPointBackgroundClass="openPointBackgroundClass"
+          :openPointBackgroundClass="point.openPointBackgroundClass"
         />
       </ul>
     </div>

src/js/components/card_program/CardProgramItem.vue

@@ -46,8 +46,8 @@
           'w-0 [&_*]:!text-[0rem] [&_*]:!p-0 [&_*]:!gap-0 [&_*]:!leading-[0px] [&_*]:!delay-0 [&_*]:!duration-0 !h-0'
             :
           'p-6 xl:p-12'
-        ) + (
-          (openPointBackgroundClass) ?
+        ) + ' ' + (
+          (openPointBackgroundClass !== null) ?
           openPointBackgroundClass :
           'bg-white'
         )