[ADD] representatives section

main/styleguide/source/_patterns/molecules/articles/main-article-preview.mustache

-<div class="flex flex-col md:flex-row mb-10">
+<div class="flex flex-col mb-5 lg:flex-row lg:mb-10">
   <img src="https://i.picsum.photos/id/361/576/576.jpg?hmac=kb62KiZkyDuigb46DUJQd7QvQM6LfYFolTdIMwEqei4" alt=""
-       class="md:mr-12">
+       class="max-w-xl lg:mr-12">
   <div class="flex flex-col items-start">
-    <span class="text-green-500 text-3xl mt-12 mb-8">2.3.2022</span>
-    <h5 class="uppercase mb-10 h-allcaps head-alt-md ">Senátoři vyzvali k ukončení veřejné podpory firmám z Ruska
+    <span class="text-green-500 head-3xl mt-12 mb-4 lg:mb-8">2.3.2022</span>
+    <h5 class="head-4xl mb-5 lg:mb-10">Senátoři vyzvali k ukončení veřejné podpory firmám z Ruska
       a Běloruska, vkteré neodsoudí akt vojenské agrese na Ukrajině</h5>
-    <p class="leading-6 mb-8">
+    <p class="leading-6 mb-4 lg:mb-8">
       Senát chce v souvislosti s ruskou agresí zabránit některým firmám z Ruska a Běloruska čerpat dotace z
       prostředků rozpočtu České republiky.
       Plénum Senátu PČR dnes schválilo usnesení Stálé komise Senátu pro dohled nad poskytováním veřejných

main/styleguide/source/_patterns/molecules/representative-box.mustache

+<div class="w-full max-w-xs mb-1 w-80 h-80 flex flex-col items-center justify-center"
+     style="background-image: url('https://i.picsum.photos/id/261/350/350.jpg?hmac=GOGR4Va2TTfzr3sxRHwTlAxqhpu4M_pl_oKex2O7fcQ')">
+  <h5 class="head-alt-md text-white mt-24 mb-8">poslanci za piráty</h5>
+  <a href="" class="btn btn__slide__wrap w-32 mt-">
+          <span class="btn bg-black text-white w-32">
+            Poslanecký klub
+          </span>
+    <span class="btn bg-white text-black w-32">
+            Poslanecký klub
+          </span>
+  </a>
+</div>

main/styleguide/source/_patterns/organisms/articles-section.mustache

 <div class="mb-32 section-clip py-32 bg-no-repeat"
      style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')">
-  <div class="container--wide mx-auto px-4 ">
-    <h2 class="clear-both head-alt-md md:head-alt-lg pb-4 lg:pb-8 text-center mb-16">
+  <div class="container--medium mx-auto px-4">
+    <h2 class="head-7xl text-center mb-16 pb-4 lg:pb-8">
       Aktuality z paluby
     </h2>
     {{> molecules-main-article-preview }}
     <div class="flex w-11/12">
-      {{> molecules-small-article-preview }}
-      {{> molecules-small-article-preview }}
-      {{> molecules-small-article-preview }}
+      <div class="__js-root">
+      <ui-article-carousel></ui-article-carousel>
+      </div>
     </div>
   </div>
 </div>

main/styleguide/source/_patterns/organisms/representatives-section.mustache

+<div class="container--medium mb-32">
+  <h2 class="head-7xl text-center mb-14 lg:mb-28">
+    Piráti zastupují občany
+  </h2>
+  <div class="flex flex-wrap space-x-1 justify-center items-center">
+    {{> molecules-representative-box }}
+    {{> molecules-representative-box }}
+    {{> molecules-representative-box }}
+    {{> molecules-representative-box }}
+  </div>
+</div>

main/styleguide/source/_patterns/organisms/twitter-section.mustache

 <div class="container--medium mx-auto pt-8 lg:py-16 mb-16">
-  <h2 class="head-alt-md md:head-alt-lg pb-4 lg:pb-8 text-center">
+  <h2 class="head-7xl text-center pb-4 lg:pb-8">
     Co právě děláme
   </h2>
   <div class="mb-8 flex flex-wrap justify-center">

main/styleguide/source/_patterns/templates/homepage.mustache

@@ -6,61 +6,7 @@
   </div>
   {{> organisms-twitter-section }}
   {{> organisms-articles-section }}
-  <div class="container--wide mx-auto px-4 mb-32">
-    <h2 class="clear-both head-alt-md md:head-alt-lg pb-4 lg:pb-8 text-center mb-16">
-      Piráti zastupují občany
-    </h2>
-    <div class="flex flex-col md:flex-row justify-center items-center">
-      <div class="mb-1 w-80 h-80 flex flex-col items-center justify-center md:mr-1"
-           style="background-image: url('https://i.picsum.photos/id/261/350/350.jpg?hmac=GOGR4Va2TTfzr3sxRHwTlAxqhpu4M_pl_oKex2O7fcQ')">
-        <h5 class="head-alt-md text-white mt-24 mb-8">poslanci za piráty</h5>
-        <a href="" class="btn btn__slide__wrap w-32 mt-">
-          <span class="btn bg-black text-white w-32">
-            Poslanecký klub
-          </span>
-          <span class="btn bg-white text-black w-32">
-            Poslanecký klub
-          </span>
-        </a>
-      </div>
-      <div class="mb-1 w-80 h-80 flex flex-col items-center justify-center md:mr-1"
-           style="background-image: url('https://i.picsum.photos/id/261/350/350.jpg?hmac=GOGR4Va2TTfzr3sxRHwTlAxqhpu4M_pl_oKex2O7fcQ')">
-        <h5 class="head-alt-md text-white mt-24 mb-8">poslanci za piráty</h5>
-        <a href="" class="btn btn__slide__wrap w-32 mt-">
-          <span class="btn bg-black text-white w-32">
-            Poslanecký klub
-          </span>
-          <span class="btn bg-white text-black w-32">
-            Poslanecký klub
-          </span>
-        </a>
-      </div>
-      <div class="mb-1 w-80 h-80 flex flex-col items-center justify-center md:mr-1"
-           style="background-image: url('https://i.picsum.photos/id/261/350/350.jpg?hmac=GOGR4Va2TTfzr3sxRHwTlAxqhpu4M_pl_oKex2O7fcQ')">
-        <h5 class="head-alt-md text-white mt-24 mb-8">poslanci za piráty</h5>
-        <a href="" class="btn btn__slide__wrap w-32 mt-">
-          <span class="btn bg-black text-white w-32">
-            Poslanecký klub
-          </span>
-          <span class="btn bg-white text-black w-32">
-            Poslanecký klub
-          </span>
-        </a>
-      </div>
-      <div class="mb-1 w-80 h-80 flex flex-col items-center justify-center md:mr-1"
-           style="background-image: url('https://i.picsum.photos/id/261/350/350.jpg?hmac=GOGR4Va2TTfzr3sxRHwTlAxqhpu4M_pl_oKex2O7fcQ')">
-        <h5 class="head-alt-md text-white mt-24 mb-8">poslanci za piráty</h5>
-        <a href="" class="btn btn__slide__wrap w-32 mt-">
-          <span class="btn bg-black text-white w-32">
-            Poslanecký klub
-          </span>
-          <span class="btn bg-white text-black w-32">
-            Poslanecký klub
-          </span>
-        </a>
-      </div>
-    </div>
-  </div>
+  {{> organisms-representatives-section }}
   {{> organisms-region-section }}
   {{> organisms-newsletter-section }}
 

main/styleguide/source/css/atoms/container.pcss

@@ -9,7 +9,7 @@
 
 .container--medium {
   margin: auto;
-  max-width: 1280px;
+  max-width: 1300px;
 }
 
 .container--wide {

main/styleguide/source/css/atoms/heading.pcss

@@ -149,12 +149,16 @@
   @apply text-2xl font-bold leading-8 uppercase
 }
 
+.head-3xl {
+  @apply text-2xl leading-4 uppercase xl:text-3xl xl:leading-8;
+}
+
 .head-4xl {
-  @apply text-4xl font-bold leading-10 uppercase mb-5;
+  @apply text-2xl font-bold leading-7 uppercase mb-5 lg:text-4xl lg:leading-10;
 }
 
-.head-8xl {
-  @apply text-7xl font-bold uppercase;
+.head-7xl {
+  @apply text-3xl font-bold uppercase lg:text-7xl;
 }
 
 

main/styleguide/source/js/components/articles/ArticleCarousel.vue

+<template>
+  <div>
+    <vue-slick-carousel v-bind="settings">
+      <div class="flex max-w-md">
+        <img src="https://i.picsum.photos/id/523/132/132.jpg?hmac=XjW7KxLZNbta7gMDNvldHNGwA9XyxpjBFUGkJqrMR4o" alt="" class="mr-4">
+        <div class="flex flex-col justify-between items-start">
+          <span class="text-green-500">23.2.2022</span>
+          <h4 class="uppercase">
+            Komentář Lukáše Koláříka: Kriminalita ve virtuálním prostoru není imaginární,
+            ale skutečná. Jak nenaletět internetovým šmejdům?
+          </h4>
+        </div>
+      </div>
+    </vue-slick-carousel>
+  </div>
+</template>
+
+<script>
+import VueSlickCarousel from 'vue-slick-carousel'
+
+export default {
+  components: {VueSlickCarousel},
+  name: 'ArticleCarousel',
+  data: () => ({
+    settings: {
+      "dots": false,
+    }
+  })
+}
+</script>

main/styleguide/source/js/main.js

@@ -2,6 +2,7 @@ import Vue from "vue";
 
 import { forEachNode } from "./utils";
 
+import ArticleCarousel from "./components/articles/ArticleCarousel";
 import HeaderCarousel from "./components/header/HeaderCarousel";
 import Renderer from "./components/calendar/Renderer";
 import DummyProvider from "./components/calendar/DummyProvider";
@@ -13,6 +14,7 @@ import FooterCollapsible from "./components/footer/FooterCollapsible";
 import FlipClock from "./components/FlipClock";
 
 
+Vue.component("ui-article-carousel", ArticleCarousel);
 Vue.component("ui-header-carousel", HeaderCarousel);
 Vue.component("ui-calendar-renderer", Renderer);
 Vue.component("ui-calendar-dummy-provider", DummyProvider);