{% include "@Components/sections/newsletter-section/newsletter-section.twig" with {props: {
spacing: "top-0",
newsletter: {
header: {
heading: {
title: "Přihlaste se k odběru novinek",
},
perex: "Chcete mít přehled o speciálních nabídkách? Přihlašte se k odběru."
},
form: {
vars: {
action: "",
method: "POST",
id: "newsletter-form-id",
full_name: "newsletter-form"
},
submit: {
vars: {
label: "Odeslat",
full_name: "newsletter-submit",
}
},
email: {
vars: {
full_name: "newsletter-input",
placeholder: "Váš e-mail",
}
},
gdpr: {
vars: {
title: "Odesláním souhlasím s <a href='#'>podmínkami</a> o zpracování osobních údajů.",
name: "contact-terms",
check: true,
}
},
},
}
}} %}
<section class="base-section --top-0 s-newsletter">
<div class="base-section__container container">
<form class="base-form --validate f-newsletter p-4 p-sm-7 u-rounded-3 u-bg-primary-400 u-posr overflow-hidden" id="newsletter-form-id" action="" method="POST">
<div class="img u-posr overflow-hidden f-newsletter__decoration u-posa u-top-50-p u-translate-middle-y h-100">
<picture>
<img src="" data-src="/images/content/signature-decoration.svg" alt="" width="1175" height="360" draggable="false" aria-hidden="true">
</picture>
</div>
<div class="row gx-lg-5 gy-4">
<div class="f-newsletter__header-col col-lg-6 d-flex gap-1 flex-column">
<header class="base-header d-flex flex-column gap-3 text-center align-items-center --left --spacing-none f-newsletter__header">
<h2 class="base-heading mb-0 u-fw-700 u-h1">
Přihlaste se k odběru novinek
</h2>
</header>
</div>
<div class="f-newsletter__inputs-col col-lg-6 d-flex gap-3 flex-column">
<p class="px-0 px-sm-3">
Chcete mít přehled o speciálních nabídkách? Přihlašte se k odběru.
</p>
<div class="d-flex gap-1 align-items-center u-bg-white u-rounded-5 flex-column flex-sm-row">
<div class="f-text d-flex flex-column gap-1 u-posr flex-grow-1 --active">
<div class="f-text__wrap d-flex align-items-center u-posr">
<input class="f-base f-text__input" type="text" placeholder="Váš e-mail" name=newsletter-input>
<span class="icon d-flex align-items-center justify-content-center --colored --danger f-text__invalid-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.026 15A7.034 7.034 0 0 1 1 7.974c.33-9.3 13.724-9.297 14.053 0A7.034 7.034 0 0 1 8.026 15Zm0-12.296c-6.964.221-6.963 10.319 0 10.54 6.964-.222 6.964-10.32 0-10.54Zm.879 1.756H7.148v4.392h1.757V4.46Zm0 5.27H7.148v1.757h1.757V9.73Z"/></svg> </span>
</div>
<span class="f-error u-fz-sm gap-1 d-none">
<span class="f-error__icon d-flex align-items-center justify-content-center">
<span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span>
</span>
<span class="f-error__title"></span>
</span>
</div>
<div class="f-newsletter__submit">
<button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --transparent --sm newsletter-submit --full-width w-100" type="submit" aria-label="Odeslat" name=newsletter-submit>
<span class="btn__title u-z-index-1">
Odeslat
</span>
<span class="btn__icon d-flex align-items-center justify-content-center">
<span class="icon d-flex align-items-center justify-content-center --md">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="m2 7.995 8.086 4.814-2.053 2.053 1.105 1.105 2.052-2.052L16.005 22 22 2 2 7.995Zm3.85.476L18.09 4.804l-6.866 6.866L5.85 8.47Zm9.68 9.676-3.2-5.372 6.867-6.867-3.668 12.239Z"/></svg> </span>
</span>
</button>
</div>
</div>
<div class="f-newsletter__terms px-3">
<label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox">
<input class="f-checkbox__input u-posa" type="checkbox">
<span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span>
<div class="f-checkbox__body d-flex column-gap-1 align-items-center">
<span class="f-checkbox__title">
Odesláním souhlasím s <a href='#'>podmínkami</a> o zpracování osobních údajů.
</span>
</div>
<span class="f-error u-fz-sm gap-1 d-none">
<span class="f-error__icon d-flex align-items-center justify-content-center">
<span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span>
</span>
<span class="f-error__title"></span>
</span>
</label>
</div>
</div>
</div>
</form>
</div>
</section>