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..db7737e482d5f04bfdd431ec9b17503e17e0c566 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">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" )}} diff --git a/source/css/organisms/lead-banner.pcss b/source/css/organisms/lead-banner.pcss new file mode 100644 index 0000000000000000000000000000000000000000..7459fdb7175e18c18f4e26e0c3ee4a6feeeac72e --- /dev/null +++ b/source/css/organisms/lead-banner.pcss @@ -0,0 +1,22 @@ +.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 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";