faq section, program, homepage, animations

majak_uistyleguide/templates/patterns/molecules/candidates/europarl/candidate_footer_box.html

-<div
+<a
+  href="#"
   class="
-    flex gap-2 min-w-[calc(100vw_-_2.5rem)]
+    flex gap-2 min-w-[calc(100vw_-_2.5rem)] duration-150 group !no-underline
+
+    hover:scale-110
+
     lg:min-w-[24rem]
   "
 >
@@ -10,9 +14,11 @@
   >
 
   <div class="flex flex-col justify-end">
-    <h3 class="head-4xl">{{ name }}</h3>
-    <p class="font-condensed">
+    <h3
+      class="head-4xl group-hover:underline underline-offset-3"
+    >{{ name }}</h3>
+    <p class="font-condensed !no-underline">
       {{ position }}
     </p>
   </div>
-</div>
+</a>

majak_uistyleguide/templates/patterns/molecules/candidates/europarl/candidate_primary_box.html

-<li class="candidate-primary-box">
-  <div
-    class="
-      candidate-primary-box--content
-
-      container--wide flex gap-8 py-16
-    "
-  >
-    <div
-      class="
-        candidate-primary-box--text-column
-
-        flex flex-col justify-between w-full
-      "
-    >
-      <div class="flex flex-col w-min">
-        <h2 class="head-9xl whitespace-nowrap">
-          {{ name }}
-        </h2>
-
-        <p class="font-condensed text-lg mt-[-0.5rem] mb-8">
-          {{ position }}
-        </p>
-
-        <p class="font-condensed text-lg mb-16">
-          {{ description }}
-        </p>
-      </div>
-
-      <div class="flex justify-start">
-        {% include 'patterns/atoms/buttons/round_button.html' with button_text='Zjisti více' %}
-      </div>
-    </div>
-
-    <div
-      class="
-        candidate-primary-box--image-column
-
-        w-full flex justify-center
-      "
-    >
-      <img
-        class="w-1/2"
-        src="{{ image_source }}"
-      >
-    </div>
-  </div>
-</li>
+<ui-candidate-primary-box
+  name="{{ name }}"
+  position="{{ position }}"
+  description="{{ description }}"
+  url="{{ url }}"
+  image-source="{{ image_source }}"
+></ui-candidate-primary-box>

majak_uistyleguide/templates/patterns/molecules/candidates/europarl/candidate_secondary_box.html

 <li class="candidate-secondary-box">
-  <div class="container--wide py-4">
-    <h4 class="text-xl">{{ name }}</h4>
+  <a
+    href="#"
+    class="
+      container--wide py-2 flex gap-6 items-center underline-offset-2
+    "
+  >
+    <div class="font-bold text-xl">
+      {{ number }}
     </div>
+
+    <div
+      class="
+        flex font-bold justify-center items-center rounded-full
+      "
+    >
+      <img
+        class="rounded-full w-12 h-12 object-cover"
+        src="{{ image_source }}"
+      >
+    </div>
+
+    <div class="flex flex-col lg:flex-row">
+      <h4 class="text-xl font-bold">{{ name }}</h4>
+
+      {% if position %}
+        <p><span class="hidden lg:inline">,</span>
+          {{ position }}
+        </p>
+      {% endif %}
+    </div>
+  </a>
 </li>

majak_uistyleguide/templates/patterns/molecules/candidates/europarl/candidate_secondary_box.yaml

 context:
   number: '1'
   name: 'Mikuláš Peksa'
-  image_source: '../../../../../static/images/mikulas-arrow.png'
+  image_source: 'https://www.extremnews.com/images/max_image_view-166664f1d580456c9866fa3c20ed545b.jpg'
   position: 'Europoslanec'
   description: 'Mikuláš Peksa (18. 6. 1986) vystudoval fyziku na Matematicko-fyzikální fakultě Univerzity Karlovy. V Německu pracoval jako správce Linuxových serverů a programátor v C++. Po návratu do Čech byl v roce 2017 zvolen poslancem PSP ČR, následně v roce 2019 poslancem Evropského parlamentu. Věnuje se zejména tématům spojeným s fungováním společnosti v digitálním věku.'

majak_uistyleguide/templates/patterns/molecules/menus/carousel.html

@@ -2,6 +2,7 @@
   <div class="header-carousel">
     <div class="h-[700px] xl:h-screen relative">
       <img
+        class="header-carousel--image"
         src="../../../../../static/images/background-images/bg-flag.webp"
         draggable="false"
       >

majak_uistyleguide/templates/patterns/molecules/menus/europarl/carousel.html

+<div class="__js-root">
+  <div class="header-carousel">
+    <div class="h-[700px] xl:h-screen relative bg-white">
+      <img
+        class="header-carousel--image opacity-60"
+        src="../../../../../static/images/background-images/bg-europarl-candidates.webp"
+        draggable="false"
+      >
+
+      <div class="europarl--header-carousel--text-wrapper">
+        <div
+          class="container--wide h-full flex flex-col justify-end items-start"
+        >
+          <div class="2.5xl:ml-[-10rem]">
+            <img
+              class="w-4/5"
+              src="../../../../../static/images/europarl-header.png"
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

majak_uistyleguide/templates/patterns/molecules/menus/europarl/carousel.yaml

+context:
+  label_first: 'Jsme jediná strana'
+  label_second: 'bez korupce'

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

+<div class="__js-root">
+  <ui-card-program :points="{{ program_data }}"></ui-card-program>
+</div>

majak_uistyleguide/templates/patterns/molecules/program/card_program.yaml

+context:
+  header: 'Program'
+  program_data: "[
+    {
+      'slug': '1',
+      'number': 1,
+      'title': 'Boj s korupcí a daňovými ráji',
+      'content': 'TODO'
+    },
+    {
+      'slug': '2',
+      'number': 2,
+      'title': 'Boj s korupcí a daňovými ráji',
+      'content': 'TODO'
+    },
+    {
+      'slug': '3',
+      'number': 3,
+      'title': 'Boj s korupcí a daňovými ráji',
+      'content': 'TODO'
+    },
+    {
+      'slug': '4',
+      'number': 4,
+      'title': 'Boj s korupcí a daňovými ráji',
+      'content': 'TODO'
+    }
+  ]"

majak_uistyleguide/templates/patterns/organisms/candidates/europarl/candidate_footer_list.html

@@ -18,8 +18,10 @@
       <div class="w-full">
         <ui-horizontal-scrollable
           classes="
-            flex gap-8 overflow-x-scroll mt-4 mb-8
-            lg:mt-0 lg:grid lg:grid-cols-2
+            flex gap-8 overflow-x-scroll mt-4 mb-8 duration-150 py-5
+
+            lg:mt-0 lg:grid lg:grid-cols-2 lg:overflow-x-hidden
+
             xl:grid-cols-3
           "
           scroller-classes="!text-black"

majak_uistyleguide/templates/patterns/organisms/candidates/europarl/candidate_primary_list.html

-<ul class="candidate-primary-list">
+<ul class="candidate-primary-list __js-root">
   {% include "patterns/molecules/candidates/europarl/candidate_primary_box.html" %}
   {% include "patterns/molecules/candidates/europarl/candidate_primary_box.html" %}
   {% include "patterns/molecules/candidates/europarl/candidate_primary_box.html" %}

majak_uistyleguide/templates/patterns/organisms/candidates/europarl/candidate_secondary_list.html

-<ul class="candidate-secondary-list">
+<ul class="candidate-secondary-list pt-14 pb-16">
+  <div class="container--wide">
+    <h2 class="head-7xl mb-3">Další kandidáti</h2>
+  </div>
+
   {% include "patterns/molecules/candidates/europarl/candidate_secondary_box.html" %}
   {% include "patterns/molecules/candidates/europarl/candidate_secondary_box.html" %}
   {% include "patterns/molecules/candidates/europarl/candidate_secondary_box.html" %}

majak_uistyleguide/templates/patterns/organisms/faq/faq_answer.html

+<div class="faq-answer">
+  <div class="border-y border-black mb-16">
+    <div class="container--wide py-1">
+      {{ section_name }}
+    </div>
+  </div>
+
+  <div class="container--wide !mb-16">
+    <div class="
+      flex gap-16 items-start flex-col-reverse
+
+      lg:flex-row
+
+      faq-answer--content
+    ">
+      <div class="flex flex-col w-full gap-8">
+        {% for question in questions %}
+          <div class="flex flex-col gap-5">
+            <h2 class="text-5xl font-alt">{{ question.title }}</h2>
+
+            <div>
+              <span class="bg-black text-white text-sm px-4 py-1.5">
+                {{ question.tag }}
+              </span>
+            </div>
+
+            <p class="font-condensed text-black leading-7 text-lg">
+              {{ question.answer }}
+            </p>
+          </div>
+        {% endfor %}
+      </div>
+
+      <div
+        class="
+          flex gap-8 w-full items-center
+          faq-answer--person
+        "
+      >
+        <div
+          class="
+            flex flex-col justify-end items-end h-40
+
+            lg:h-96
+
+            faq-answer--person--text
+          "
+        >
+          <div class="font-alt text-5xl whitespace-nowrap leading-10">
+            Odpovídá
+          </div>
+          <div class="head-3xl whitespace-nowrap leading-8">
+            {{ name }}
+          </div>
+          <div class="whitespace-nowrap font-condensed">
+            {{ position }}
+          </div>
+        </div>
+
+        <img
+          class="lg:h-96 h-40"
+          src="{{ image_src }}"
+        >
+      </div>
+    </div>
+  </div>
+</div>
+

majak_uistyleguide/templates/patterns/organisms/faq/faq_answer.yaml

+context:
+  section_name: 'Otevřenost a transparentnost'
+
+  questions:
+    -
+      title: 'Jak by měla strana podporovat participativní demokracii a zapojení občanů do politického procesu?'
+      tag: 'téma Markéty Gregorové'
+      answer: 'Zde se věnuje dotačním politikám, ochraně právního státu, digitalizaci a modernizaci ekonomiky s ohledem na udržitelnost a ochranu klimatu. Je členem parlamentních výborů pro průmysl, výzkum a energetiku, dále Hospodářského a měnového výboru, Výboru pro rozpočtovou kontrolu, Zvláštního výboru pro pandemii onemocnění COVID-19) a také podvýboru pro daňové záležitosti. Působí rovněž v delegaci EP pro Ukrajinu a vede zájmové skupiny pro Legalizaci cannabis a skupinu Přátel Tibetu.'
+    -
+      title: 'Jak vnímáte postoj České pirátské strany k ochraně digitálních práv a svobody na internetu?'
+      tag: 'téma Markéty Gregorové'
+      answer: 'Zde se věnuje dotačním politikám, ochraně právního státu, digitalizaci a modernizaci ekonomiky s ohledem na udržitelnost a ochranu klimatu. Je členem parlamentních výborů pro průmysl, výzkum a energetiku, dále Hospodářského a měnového výboru, Výboru pro rozpočtovou kontrolu, Zvláštního výboru pro pandemii onemocnění COVID-19) a také podvýboru pro daňové záležitosti. Působí rovněž v delegaci EP pro Ukrajinu a vede zájmové skupiny pro Legalizaci cannabis a skupinu Přátel Tibetu.'
+
+  image_src: '../../../../../static/images/marketka-arrow.png'
+  name: 'Markéta Gregorová'
+  position: 'Europoslankyně'

majak_uistyleguide/templates/patterns/organisms/header/europarl/candidate_header.html

@@ -81,7 +81,7 @@
       "
     >
       <img
-        class="w-3/5"
+        class="lg:w-3/5"
         src="../../../../../static/images/mikulas-arrow.png"
       >
     </div>

majak_uistyleguide/templates/patterns/organisms/header/europarl/faq_header.html

+{% extends 'patterns/organisms/header/europarl/simple_header_with_ui_switch.html' %}
+
+{% block extra_classes %}!mb-0{% endblock %}

majak_uistyleguide/templates/patterns/organisms/header/europarl/simple_header.yaml

+context:
+  title: 'Stanovisko Pirátů k migraci 2020'
+  description: null
+  sub_heading: 'Podtitulek'
+  has_navigation: false
+  has_tags: false