Merge branch 'ui_koalicni' of gitlab.pirati.cz:fanky/ui_koalicni into ui_koalicni

source/_patterns/02-organisms/03-hero/hero-pirati-stan.mustache

 <article class="relative bg-lemon md:bg-split-color px-4 md:pl-8 md:pr-0 2xl:px-8 hero py-0 w-full {{ classes }}">
+  {{^ listing}}
   <div class="2xl:container w-auto bg-lemon md:pl-20 pr-0 grid {{# simpleHero}}lg:grid-rows-1 h-40 sm:h-56 md:h-64 {{/ simpleHero}}{{^ simpleHero}}lg:grid-rows-2{{/ simpleHero}} lg:grid-cols-7 items-center 2xl:mx-auto">
     <div class="lg:row-span-1 lg:col-span-4 order-1 {{^ simpleHero}}pt-14 {{/ simpleHero}}md:pr-20">
-      <h1 class="head-alt-md sm:head-alt-lg {{# simpleHero}} pt-1 max-w-sm{{/ simpleHero}}{{^ simpleHero}} max-w-xs{{/ simpleHero}}">{{ claim }}{{^ claim }}Lorem ipsum dolor sit{{/ claim }}</h1>
+     <h1 class="head-alt-md sm:head-alt-lg {{# simpleHero}} pt-1 max-w-sm{{/ simpleHero}}{{^ simpleHero}} max-w-xs{{/ simpleHero}}">{{ claim }}{{^ claim }}Lorem ipsum dolor sit{{/ claim }}</h1>
+  
     </div>
     {{^ simpleHero}}
     <div class="lg:row-span-1 lg:col-span-4 order-3 pb-14 md:pr-20">
@@ -31,4 +33,22 @@
       <img class="object-cover w-full h-full" src="{{ img.landscape-16x9-fullhd.src }}" />
     </div>
   </div>
+  {{/ listing}}
+
+  {{# listing}}
+  <div class="2xl:container w-auto bg-lemon md:pl-20 pr-0 grid {{^ simpleHero}}lg:grid-rows-1{{/ simpleHero}} lg:grid-cols-7 items-center 2xl:mx-auto">
+    <div class="lg:row-span-1 lg:col-span-4 order-1 py-14 md:pr-20">
+   
+      <p class="para">„Máme doma čtyři děti, takže naše největší téma posledního roku byl jejich bezpečný návrat mezi kamarády. Trápilo nás to sociální strádání u dcer a samozřejmě i nedostatky ve vědomostech, které jim distanční výuka nemůže nikdy předat v dostatečné kvalitě; a to jsem povoláním učitelka, navíc na mateřské, takže jsem snad měla trochu předpoklady poskytnout jim co nejlepší podporu. Hodně nás zklamalo také to nekonečné uzavření malých obchodů, to nám ve srovnání s otevřenými obchoďáky přišlo nesmyslné. Přijde nám, že to je jen důsledkem toho, že stát si zvykl hlavně přikazovat, zakazovat a kontrolovat. Obecně by to tu chtělo více svobody.“</p>
+      <p class="head-alt-2xs mt-8">Pavla Metelková, učitelka v mateřské škole, aktuálně na rodičovské dovolené</p>
+      <p class="head-alt-2xs mt-2">Michal Metelka, pracovník výzkumu a vývoje v nadnárodní firmě</p>
+    </div>
+  
+     
+    <div class="hidden lg:block lg:row-span-2 lg:col-span-3 order-2 h-full 2xl:absolute 2xl:right-0 2xl:w-1/3">
+      <img class="object-cover w-full h-full" src="{{ img.landscape-16x9-fullhd.src }}" />
+    </div>
+  </div>
+  {{/ listing}}
+  
 </article>

source/_patterns/02-organisms/13-lead-banner/lead-banner-pirati-stan.mustache

@@ -2,20 +2,22 @@
     <div class="lead-collector-icon bg-acidgreen max-w-max p-10 hidden md:flex" style="height: max-content">
         <i class="ico--{{# email}}envelope{{/ email}}{{^ email}}app{{/ email}} text-black" style="font-size: 51px"></i>
     </div>
-    <div class="lead-collector-body bg-lemon py-10 px-8 w-full">
+    <div class="lead-collector-body {{# homepage}}lead-collector-body-app {{/ homepage}}bg-lemon py-10 px-8 w-full">
         {{# programAppLink}}
             <p class="head-alt-lg text-black mb-4">Vyselektujte si programové body díky naší programové aplikaci</p>
             {{> atoms-icon-button(icon: "ico--chevron-right", bodyClasses: "bg-acidgreen text-black py-4" )}} 
         {{/ programAppLink}}
         {{# homepage}}
-            <p class="head-alt-lg text-black mb-4">Volební program</p>
-            {{> atoms-icon-button(icon: "ico--chevron-right", bodyClasses: "hover:bg-grey-700 text-white py-5 px-12", iconClasses: "bg-grey-700 px-5", classes: "btn--hoveractive border mr-6 mt-5" )}}
-            {{> atoms-icon-button(icon: "ico--chevron-right", bodyClasses: "bg-lemon text-black py-5 px-12", iconClasses: "bg-lemon text-black px-5", classes: "btn--hoveractive border mt-5 bg-lemon hover:border-black hover:bg-black text-black hover:text-white"  )}}
-            <p class="mt-5">Aplikace vám vyselektuje programové  <br>body vám na míru</p>
-        {{/ homepage}}
+            <div>       
+            <p class="head-alt-lg text-white mb-4">ZOBRAZTE SI, CO VÁS ZAJÍMÁ<br>Z VOLEBNÍHO PROGRAMU</p>
+            {{> atoms-icon-button(icon: "ico--chevron-right", bodyClasses: "bg-white text-black py-5 px-12 hover:text-white hover:bg-black hover:border-black", iconClasses: "px-5 bg-white text-black", classes: "bg-white text-black btn--hoveractive border mr-6 mt-5 bg-white", cta: "Ukažte mi program přesně pro mě" )}}
+            {{> atoms-icon-button(icon: "ico--chevron-right", bodyClasses: "bg-transparent text-white py-5 px-12 hover:text-black hover:bg-white", iconClasses: "bg-transparent text-white px-5 border-white", classes: "btn--hoveractive border border-white mt-5 bg-transparent", cta: "Chci vidět celý váš program"  )}}
+            <p class="mt-5 text-white">Aplikace vám vyselektuje programové  <br>body vám na míru</p>
+            </div>
+       {{/ homepage}}
         {{# email}}
             <div class="w-full grid grid-cols-3">
-                <p class="head-alt-lg text-black mb-4 col-span-3 md:col-span-2 pr-12">PŘIHLÁŠENÍ K ODBĚRU NOVINEK</p>
+                <p class="head-alt-lg text-white mb-4 col-span-3 md:col-span-2 pr-12">PŘIHLÁŠENÍ K ODBĚRU NOVINEK</p>
                 <div class="col-span-3 md:col-span-1">
                     {{> atoms-text-input(placeholder: "Zadejte email", classes: "w-full") }}
                     {{> atoms-icon-button(cta: "Přihlásit se", icon: "ico--chevron-right", classes: "my-2 text-lg w-full cta-btn", bodyClasses: "py-4 leading-4 w-full bg-acidgreen", iconClasses: "px-4 bg-black border" )}}
@@ -23,4 +25,4 @@
             </div>
         {{/ email}}
     </div>
-</div>
\ No newline at end of file
+</div>

source/_patterns/03-templates/coalition-program-points/elections-program-listing-pirati-stan.mustache

 {{> organisms-navbar-pirati-stan }}
-{{> organisms-hero-pirati-stan(showSwitch: false, underClaim: "Vybrané programové body pro:", selectedHeading: "Senioři") }}
+{{> organisms-hero-pirati-stan(showSwitch: false, listing: true) }}
 {{> organisms-hero-alt-pirati-stan }}
 <div class="relative">
   {{> organisms-side-cta-panel }}

source/css/organisms/lead-banner.pcss

+.lead-collector-body-app  {
+    position: relative;
+    background-color: black!important;
+    border-color: black;
+}
+
+.lead-collector-body-app div  {
+    position: relative;
+}
+.lead-collector-body-app:before  {
+    background-image: linear-gradient(180deg, #00000000, black),   url('../images/program-app-bg-full.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+    content: "";
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+}
+
+@media only screen and (max-width: 1100px) {
+   .lead-collector-body-app:before {
+        background-image: linear-gradient(180deg, #00000000 10%, black 90%),  url('../images/program-app-bg-mobile.png');
+        background-size: 100% auto;
+    }
+}
+
+@media only screen and (max-width: 768px) {
+   .lead-collector-body-app:before {
+        background-image: linear-gradient(180deg, #00000000 10%, black 70%),  url('../images/program-app-bg-mobile.png');
+        background-size: 100% auto;
+    }
+}
+
+@media only screen and (max-width: 680px) {
+   .lead-collector-body-app:before {
+        background-image: linear-gradient(180deg, #00000000 10%, black 63vw),  url('../images/program-app-bg-mobile.png');
+        background-size: 100% auto;
+    }
+}

source/css/style.pcss

@@ -82,6 +82,7 @@
 @import "./organisms/region-map.pcss";
 @import "./organisms/region-map-pirati-stan.pcss";
 @import "./organisms/side-cta-panel.pcss";
+@import "./organisms/lead-banner.pcss";
 
 @import "./templates/candidate-detail.pcss";
 @import "./templates/cf2021.pcss";