wip - migrate new homepage design

main/templates/main/includes/atoms/calendar/calendar.html

+<div class="__js-root">
+  <ui-full-calendar events='{{ calendar_data }}'></ui-full-calendar>
+</div>

main/templates/main/includes/atoms/containers/container__medium.html

+<div class="container--medium">
+  <p class="text-2xl">container--medium</p>
+  <p>mpus purus at lorem. Etiam neque. Cras pede lib mpus purus at lorem. Etiam neque. Cras pede libmpus purus at lorem. Etiam neque. Cras pede libmpus purus at lorem. Etiam neque. Cras pede libmpus purus at lorem. Etiam neque. Cras pede li
+    mpus purus at lorem. Etiam neque. Cras pede libmpus purus at lorem. Etiam neque. Cras pede libmpus purus at lorem. Etiam neque. Cras pede libmpus purus at lorem. Etiam neque. Cras pede lib
+    mpus purus at lorem. Etiam neque. Cras pede libmpus purus at lorem. Etiam neque. Cras pede libmpus purus at lorem. Etiam neque. Cras pede lib
+    mpus purus at lorem. Etiam neque. Cras pede libmpus purus at lorem. Etiam neque. Cras pede libmpus purus at lorem. Etiam neque. Cras pede lib
+    bmpus purus at lorem. Etiam neque. Cras pede lib</p>
+</div>
\ No newline at end of file

main/templates/main/includes/atoms/containers/container__narrow.html

+<div class="container--narrow">
+  <p class="text-2xl">container--narrow</p>
+  <p>mpus purus at lorem. Etiam neque. Cras pede lib mpus purus at lorem. Etiam neque. Cras pede lib
+  mpus purus at lorem. Etiam neque. Cras pede lib
+  mpus purus at lorem. Etiam neque. Cras pede lib
+  mpus purus at lorem. Etiam neque. Cras pede lib
+  mpus purus at lorem. Etiam neque. Cras pede libmpus purus at lorem. Etiam neque. Cras pede lib mpus purus at lorem. Etiam neque. Cras pede lib mpus purus at lorem. Etiam neque. Cras pede lib
+  </p>
+</div>
\ No newline at end of file

main/templates/main/includes/atoms/containers/container__wide.html

+<div class="container--wide">
+  <p class="text-2xl">container--wide</p>
+  <p>mpus purus at lorem. Etiam neque. Cras pede lib mpus purus at lorem. Etiam neque. Cras pede lib
+  mpus purus at lorem. Etiam neque. Cras pede lib
+  mpus purus at lorem. Etiam neque. Cras pede lib
+  mpus purus at lorem. Etiam neque. Cras pede lib
+  mpus purus at lorem. Etiam neque. Cras pede libmpus purus at lorem. Etiam neque. Cras pede lib mpus purus at lorem. Etiam neque. Cras pede lib mpus purus at lorem. Etiam neque. Cras pede lib
+  </p>
+</div>
\ No newline at end of file

main/templates/main/includes/atoms/form_fields/form_checkbox.html

+<div class="checkbox form-field__control flex items-center {{ classes }}">
+  <input type="checkbox" id="checkbox_1">
+  <label for="checkbox_1">{{ label }}</label>
+</div>

main/templates/main/includes/atoms/form_fields/form_input.html

+<input
+  type="text"
+  class="text-input bg-white form-field__control border-none {{ classes }}"
+  value=""
+  placeholder="{{ form_placeholder }}"
+/>

main/templates/main/includes/atoms/form_fields/form_select.html

+<div class="select">
+  <select class="select__control form-field__control {{ classes }}"
+          value="">
+    <option> {{ all_region }} </option>
+    <option> {{ option_2 }} </option>
+    <option> {{ option_3 }} </option>
+    <option> {{ option_4 }} </option>
+  </select>
+</div>

main/templates/main/includes/atoms/grids/grids.html

+<div class="space-y-12">
+  <div class="grid-container m-10">
+    <div class="grid-content">
+      <h1 class="text-2xl">grid-content</h1>
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+    </div>
+  </div>
+
+  <div class="grid-container m-10">
+    <div class="grid-full">
+      <h1 class="text-2xl">grid-full</h1>
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+    </div>
+  </div>
+
+  <div class="grid-container m-10">
+    <div class="grid-left-side">
+      <h1 class="text-2xl">grid-left-side</h1>
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+    </div>
+  </div>
+  <div class="grid-container m-10">
+    <div class="grid-left-side-with-content">
+      <div>
+      <h1 class="text-2xl">grid-left-side-with-content"</h1>
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      </div>
+    </div>
+  </div>
+
+  <div class="grid-container m-10">
+    <div class="grid-right-side">
+      <h1 class="text-2xl">grid-right-side</h1>
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+    </div>
+  </div>
+
+  <div class="grid-container m-10">
+    <div class="grid-content-with-right-side">
+      <h1 class="text-2xl">grid-content-with-right-side</h1>
+      <div>
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      mpus purus at lorem. Etiam neque. Cras pede lib
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file

main/templates/main/includes/atoms/header/navigation.html

+<div class="flex gap-3 text-grey-185 {{ classes }}">
+  <a href="#" class="underline">
+    {{ first_text }}
+  </a>
+
+  ⎯⎯
+
+  {% if second_link %}
+    <a href="{{ second_link }}" class="underline">
+      {{ second_text }}
+    </a>
+  {% else %}
+    <span>{{ second_text }}</span>
+  {% endif %}
+</div>

main/templates/main/includes/atoms/icons/arrow.html

+<svg width="{% if width %}{{ width }}{% else %}20{% endif %}" height="{% if height %}{{ height }}{% else %}21{% endif %}" viewBox="0 0 10 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g id="Icon / Placeholder">
+    <path
+      id="{% block id %}{{ id }}{% endblock %}"
+      d="M0 16.5H4.40178L11 10.0002L4.40228 3.5H0L6.60069 10.0002L0 16.5Z"
+      fill="{% if fill %}{{ fill }}{% else %}#FEC900{% endif %}"
+      class="arrow-icon"
+    />
+  </g>
+</svg>

main/templates/main/includes/atoms/tags/tag.html

+<a href="#" class="text px-4 py-2 text-black bg-yellow-500 duration-200 hover:bg-yellow-600 hover:no-underline">
+  {{ text }}
+</a>

main/templates/main/includes/atoms/text/font_sizes.html

+<div class="flex flex-col">
+<span class="text-9xl">9xl size</span>
+<span class="text-8xl">8xl size</span>
+<span class="text-7xl">7xl size</span>
+<span class="text-6xl">6xl size</span>
+<span class="text-5xl">5xl size</span>
+<span class="text-4xl">4xl size</span>
+<span class="text-3xl">3xl size</span>
+<span class="text-2xl">2xl size</span>
+<span class="text-xl">xl size</span>
+<span class="text-lg">lg size</span>
+<span class="text-base">base size</span>
+<span class="text-sm">sm size</span>
+<span class="text-xs">xs size</span>
+</div>
\ No newline at end of file

main/templates/main/includes/atoms/text/headings.html

+<div class="space-y-12">
+  <div>
+    <h1 class="head-9xl">{{ title }}</h1>
+    <h1 class="head-8xl">{{ title }}</h1>
+    <h1 class="head-7xl">{{ title }}</h1>
+    <h1 class="head-6xl">{{ title }}</h1>
+    <h1 class="head-5xl">{{ title }}</h1>
+    <h1 class="head-4xl">{{ title }}</h1>
+    <h1 class="head-3xl">{{ title }}</h1>
+    <h1 class="head-2xl">{{ title }}</h1>
+    <h1 class="head-xl">{{ title }}</h1>
+    <h1 class="head-base">{{ title }}</h1>
+    <h1 class="head-sm">{{ title }}</h1>
+    <h1 class="head-xs">{{ title }}</h1>
+  </div>
+</div>
\ No newline at end of file

main/templates/main/includes/atoms/text/paragraph.html

+<p>{{ text }}</p>
\ No newline at end of file

main/templates/main/includes/atoms/text/prose.html

+<div class="prose">
+  {% include 'patterns/atoms/text/paragraph.html' with text=text %}
+</div> 

main/templates/main/includes/atoms/text/richtext.html

+<div class="content-block prose max-w-none">
+  <h2> {{ richtext_h2 }}</h2>
+  <h3> {{ richtext_h3 }} </h3>
+  <h4> {{ h4 }}</h4>
+  <p>  {{ p }}</p>
+  <p>  {{ p }}</p>
+  <ul>
+    <li>{{ li }}</li>
+    <li>{{ li }}</li>
+    <li>{{ li }}</li>
+  </ul>
+  <ol>
+    <li>{{ li }}</li>
+    <li>{{ li }}</li>
+    <li>{{ li }}</li>
+  </ol>
+</div>

main/templates/main/includes/form_button.html

-<button type="submit" class="btn btn--black btn--to-yellow-500 btn--hoveractive uppercase {{ extra_classes }}">
-  <span class="btn__body-wrap">
-    <span class="btn__body text-lg lg:text-base">
-      {{ btn_text | default_if_none:"Číst dále" }}
-    </span>
-  </span>
-</button>

main/templates/main/includes/href_button.html

-<a href="{{ btn_link }}"{% if noindex %} rel="noindex" {% endif %}class="btn btn--black btn--to-yellow-500 btn--hoveractive uppercase {{ extra_classes }}">
-  <span class="btn__body-wrap">
-    <span class="btn__body text-lg lg:text-base {{ size_classes | default_if_none:"" }}">
-      {{ btn_text | default_if_none:"Číst dále" }}
-    </span>
-  </span>
-</a>

main/templates/main/includes/href_button_secondary.html

-<a href="{{ btn_link }}" class="btn btn--white btn--to-black btn--hoveractive uppercase {{ extra_classes }}">
-  <span class="btn__body-wrap">
-    <span class="btn__body text-lg lg:text-base">
-      {{ btn_text | default_if_none:"Číst dále" }}
-    </span>
-  </span>
-</a>

main/templates/main/includes/layout/footer.html

-{% load wagtailimages_tags %}
-<footer class="footer footer-clip bg-black text-white __js-root">
-  <ui-app inline-template>
-    <div>
-      <div class="footer__main py-4 lg:py-16 container--wide">
-        <section class="footer__social mb-5 mt-16 lg:text-right lg:mb-16 lg:mt-32">
-          {% if page.root_page.social_links %}
-            <div class="font-alt text-2xl mb-4">
-              Zůstaňte s námi v kontaktu
-            </div>
-            <div
-              class="flex flex-col space-y-2 lg:flex-row lg:justify-end lg:space-y-0 lg:space-x-4">
-              {% for social_link in page.root_page.social_links %}
-                <a href="{{ social_link.value.link }}" class="flex items-center hover:no-underline">
-                  <i class="{{ social_link.value.icon }} mr-1"></i>
-                  <span class="text-sm">{{ social_link.value.text }}</span>
-                </a>
-              {% endfor %}
-            </div>
-          {% endif %}
-        </section>
-        <section class="footer__main-links text-white lg:flex lg:justify-between gap-8">
-          {% for other_link in page.root_page.footer_other_links %}
-            <div class="py-4 lg:py-0">
-              <ui-footer-collapsible label="{{ other_link.value.title }}">
-                <ul class="text-white py-8">
-                  {% for link_list in other_link.value.list %}
-                    <li>
-                      <a href="{{ link_list.link }}">{{ link_list.text }}</a>
-                    </li>
-                  {% endfor %}
-                </ul>
-              </ui-footer-collapsible>
-            </div>
-          {% endfor %}
-        </section>
-      </div>
-      <section class="bg-black py-8 xl:pb-36">
-        <div class="container--wide flex flex-col lg:flex-row lg:justify-between lg:items-end">
-          {% if page.root_page.footer_person_list %}
-            <div class="mb-10 flex flex-wrap flex-col lg:flex-row lg:flex-wrap lg:order-2 lg:mb-0">
-              {% for person in page.root_page.footer_person_list %}
-                <div class="flex space-x-2 mb-4 xl:mr-4 xl:mb-0">
-                  <div class="mr-5">
-                    {% image person.value.person.profile_image fill-128x128 as person_profile_image %}
-                    <img class="rounded-full shadow-sm w-16 mb-2" src="{{ person_profile_image.url }}"
-                         alt="user image">
-                  </div>
-                  <div class="flex flex-col leading-6">
-                    <h6 class="font-alt text-xl text-uppercase">{{ person.value.person.title }}</h6>
-                    <strong class="font-bold text-sm text-grey-300">
-                      {% if person.value.person.position %}
-                        {{ person.value.person.position }}
-                      {% else %}
-                        {{ person.value.position }}
-                      {% endif %}</strong>
-                    <span>{{ person.value.person.phone | default_if_none:'' }}</span>
-                    <span class="text-turquoise-500 text-sm">{{ person.value.person.email | default_if_none:'' }}</span>
-                  </div>
-                </div>
-              {% endfor %}
-            </div>
-          {% endif %}
-          <div class="max-w-xs">
-            <span class="text-xs text-grey-350 ">
-              <span class="-scale-x-100 inline-block">©</span> Piráti, {% now 'Y' %}.
-              Všechna práva vyhlazena. Sdílejte a nechte ostatní sdílet za stejných podmínek.<br><br>
-              <a href="{{ page.root_page.gdpr_and_cookies_url }}">Zásady ochrany osobních údajů</a>
-            </span>
-          </div>
-        </div>
-      </section>
-    </div>
-  </ui-app>
-</footer>