[ADD] program page

main/styleguide/source/_patterns/molecules/blocks/icon-title-text-block.mustache

+<div class="flex mb-6">
+  <i class="{{ icon }} mr-6 text-6xl"></i>
+  <div class="flex flex-col">
+    <h3 class="font-alt mb-4 text-4xl">
+      DOSTUPNÉ A DŮSTOJNÉ BYDLENÍ PRO KVALITNÍ ŽIVOT
+    </h3>
+    <p class="leading-6">
+      Bydlení je jednou ze základních věcí pro každou obec nebo město. Nevnímáme bydlení jako
+      zásluhu. Bydlet
+      podle nás potřebuje každý, a právě obecní bydlení může poskytovat zázemí pro všechny skupiny obyvatel od
+      znevýhodněných rodin a jednotlivců, přes rodiny se středními příjmy, seniory až například po potřebná
+      povolání. A bydlet nesmí znamenat zadlužit se.
+    </p>
+  </div>
+</div>

main/styleguide/source/_patterns/molecules/simple_header.mustache

 <header class="bg-black flex items-center h-80 header-clip mb-36 py-32 w-full">
   <div class="container--narrow flex items-center">
     <h1 class="font-alt text-7xl text-white">
-      Kontakty
+      {{ title }}
     </h1>
   </div>
 </header>

main/styleguide/source/_patterns/molecules/switch/multi-state-switch.mustache

+<div class="switch">
+  <a class="switch__item switch__item--active">{{ cta }}</a>
+  <a class="switch__item">{{ cta }}</a>
+  <a class="switch__item">{{ cta }}</a>
+  <a class="switch__item">{{ cta }}</a>
+</div>

main/styleguide/source/_patterns/pages/program.mustache

+{{> templates-program }}

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

 {{> organisms-header }}
 
-{{> molecules-simple_header }}
+{{> molecules-simple_header(title: "Kontakty") }}
 
 <main role="main">
   <section class="container--middle flex flex-wrap mb-16 pl-44">

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

+{{> organisms-header }}
+
+{{> molecules-simple_header(title: "Program") }}
+
+<main role="main">
+  <div class="container--narrow mx-auto">
+    <h2 class="max-w-xl font-alt leading-6 mx-auto mb-12">
+      23. a 24. září 2022 nás čekají volby do zastupitelstev obcí a do třetiny Senátu Parlamentu České republiky.
+      Níže předkládáme zásadní body společného programu pro komunální volby. <br> Kompletní program ve formátu pdf. <br>
+      Programy jednotlivých sdružení naleznete na jejich stránkách.
+    </h2>
+    <div class="mb-12">
+      {{> molecules-multi-state-switch }}
+    </div>
+    <div class="mb-12">
+      {{> molecules-icon-title-text-block(icon: "ico--book") }}
+      {{> molecules-icon-title-text-block(icon: "ico--search") }}
+      {{> molecules-icon-title-text-block(icon: "ico--eye") }}
+    </div>
+  </div>
+  {{> organisms-newsletter-section }}
+</main>
+
+
+
+{{> organisms-footer }}

main/styleguide/source/css/molecules/switch.pcss

+.switch {
+  @apply inline-flex;
+}
+
+.switch__item {
+  @apply py-4 px-8 bg-grey-150 mr-2 font-alt font-normal text-xl text-white text-center cursor-pointer;
+
+  &:hover {
+    @apply no-underline bg-grey-400;
+  }
+
+  &.switch__item--active,
+  &.switch__item--active:hover {
+    @apply bg-turquoise-500;
+  }
+}

main/styleguide/source/css/style.pcss

@@ -28,6 +28,7 @@
 @import "./molecules/person_box.pcss";
 @import "./molecules/photo_header.pcss";
 @import "./molecules/sliding_button.pcss";
+@import "./molecules/switch.pcss";
 
 @import "./organisms/footer.pcss";
 @import "./organisms/navbar.pcss";

main/styleguide/tailwind.config.js

@@ -71,6 +71,7 @@ module.exports = {
                 '50': '#f7f7f7',
                 '100': '#f3f3f3',
                 '125': '#f0f0f0',
+                '150': '#CDCDCD',
                 '200': '#ECECEC',
                 '300': '#4c4c4c',
                 '400': '#343434',