diff --git a/source/_patterns/02-organisms/03-hero/hero-pirati-stan.mustache b/source/_patterns/02-organisms/03-hero/hero-pirati-stan.mustache
index 7f3711229f93a39a32d3941144b0b9cd8819ebe2..901aaf157b746571ca590f6f67cf6e5a915f56c9 100644
--- a/source/_patterns/02-organisms/03-hero/hero-pirati-stan.mustache
+++ b/source/_patterns/02-organisms/03-hero/hero-pirati-stan.mustache
@@ -1,7 +1,9 @@
<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>
diff --git a/source/_patterns/02-organisms/13-lead-banner/lead-banner-pirati-stan.mustache b/source/_patterns/02-organisms/13-lead-banner/lead-banner-pirati-stan.mustache
index d6a09c5ac44e90494629e33dd0f45bebaffa1e4e..dbdadda887bc0b3919d94d43f0d7d7f0c456b14f 100644
--- a/source/_patterns/02-organisms/13-lead-banner/lead-banner-pirati-stan.mustache
+++ b/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>
diff --git a/source/_patterns/03-templates/coalition-program-points/elections-program-listing-pirati-stan.mustache b/source/_patterns/03-templates/coalition-program-points/elections-program-listing-pirati-stan.mustache
index 29bc88db15238ec02fdf16ee0dbe59ba0e3692e4..fb054d2cc828ffb351c01a4b6eca21e0c636323d 100644
--- a/source/_patterns/03-templates/coalition-program-points/elections-program-listing-pirati-stan.mustache
+++ b/source/_patterns/03-templates/coalition-program-points/elections-program-listing-pirati-stan.mustache
@@ -1,5 +1,5 @@
{{> 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 }}
diff --git a/source/css/organisms/lead-banner.pcss b/source/css/organisms/lead-banner.pcss
new file mode 100644
index 0000000000000000000000000000000000000000..6a2b87cbca1242d7ab7247d9dc03ed70a76ca23c
--- /dev/null
+++ b/source/css/organisms/lead-banner.pcss
@@ -0,0 +1,39 @@
+.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;
+ }
+}
diff --git a/source/css/style.pcss b/source/css/style.pcss
index 14ee6d095e57efc0d1bc3519ecf40b228c190ec2..4232654e640821187a06f89764e5479be741c2db 100644
--- a/source/css/style.pcss
+++ b/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";