Lead edit

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>
+            <div>       
+            <p class="head-alt-lg text-white mb-4">Volební program</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" )}}
+            {{> 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"  )}}
+            <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" )}}

source/css/organisms/lead-banner.pcss

+.lead-collector-body-app  {
+    position: relative;
+}
+
+.lead-collector-body-app div  {
+    position: relative;
+}
+.lead-collector-body-app:before  {
+    background-image:  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: url('../images/program-app-bg-mobile.png');
+    }
+}
\ No newline at end of file

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";