Files
zaufane.pl/templates_user/landing-nfc.php
2024-11-04 19:13:57 +01:00

602 lines
25 KiB
PHP

<section class="offer-timer">
<div class="content container">
<div class="wrapper-offer-timer">
<ul>
<li class="days-num">00</li>
<li class="days-text">DNI</li>
<li class="days-separator">:</li>
<li class="hours-num">00</li>
<li class="hours-text">GODZIN</li>
<li class="hours-separator">:</li>
<li class="minutes-num">00</li>
<li class="minutes-text">MINUT</li>
<li class="minutes-separator">:</li>
<li class="seconds-num">0</li>
<li class="seconds-text">SEKUND</li>
</ul>
</div>
<div class="offer-data">
<h2>PROMOCJA -50%</h2>
<p><strong>DLA SŁUCHACZY MWF</strong><br />
Użyj kodu <strong>MWF50</strong></p>
</div>
</div>
</section>
<header>
<div class="content container">
<div class="logo">
<img src="/layout/nfc/logo.svg">
</div>
<div class="button">
<a href="#" class="btn">
Wybierz pakiet
</a>
</div>
</div>
</header>
<section class="hero">
<div class="content container">
<div class="left">
<!-- <h2>DARMOWY E-BOOK</h2> -->
<h1>
<span class="l1">pozytywne opinie</span>
<br />
<span class="l2">na wyciągniecie ręki</span>
</h1>
<p>Pozyskiwanie opinii nigdy dotąd nie było tak proste! Dziesiątki nowych klientów dzięki pozytywnym opiniom w Google i na Twojej stronie www.</p>
<div class="buttons">
<a href="#" class="btn btn-green">
Już od 99 PLN netto
</a>
</div>
</div>
<div class="right">
<img src="/layout/nfc/hero-1.png">
</div>
</div>
</section>
<section class="box-1">
<div class="container content">
<div class="box-big-title">
<h2 class="big-title">Co zyskasz?</h2>
<p>Roczny dostęp do narzędzia Zaufane.pl dzięki któremu zbudujesz pozytywny wizerunek swojej firmy i przekonasz <strong>dziesiątki</strong> nowych klientów</p>
</div>
<div class="tiles">
<div class="tile tile-1">
<span>01</span>
<h3>Opinie na Twoją stronę i Wizytowkę Google</h3>
<p>Poznasz cztery przykłady poważnych błędów różnych e-commerce'ów, które wydarzyły się w trakcie Black Friday.</p>
</div>
<div class="tile tile-2">
<span>02</span>
<h3>Łatwe metody pozyskiwania opinii</h3>
<p>Sprawdzisz 44 błędy wraz z rozwiązaniami, powstałe w wyniku analizy przedstawionych historii sklepów internetowych.</p>
</div>
<div class="tile tile-3">
<span>03</span>
<h3>Certyfikat wiarygodności niezależności</h3>
<p>Otrzymasz punkt po punkcie listę, dzięki której dowiesz się co zrobić przed, po i w trakcie Black Friday, by uniknąć błędów.</p>
</div>
</div>
<a href="#" class="btn btn-green">Zamów już teraz -50%</a>
</div>
</section>
<section class="box-2">
<div class="container content">
<h2>Setki zadowolonych klientów</h2>
<ul class="clients">
<li><img src="/layout/nfc/clients/1.png" alt="client-1"></li>
<li><img src="/layout/nfc/clients/2.png" alt="client-2"></li>
<li><img src="/layout/nfc/clients/3.png" alt="client-3"></li>
<li><img src="/layout/nfc/clients/4.png" alt="client-4"></li>
<li><img src="/layout/nfc/clients/5.png" alt="client-5"></li>
<li><img src="/layout/nfc/clients/6.png" alt="client-6"></li>
<li><img src="/layout/nfc/clients/7.png" alt="client-7"></li>
<li><img src="/layout/nfc/clients/8.png" alt="client-8"></li>
<li><img src="/layout/nfc/clients/9.png" alt="client-9"></li>
<li><img src="/layout/nfc/clients/10.png" alt="client-10"></li>
<li><img src="/layout/nfc/clients/11.png" alt="client-11"></li>
<li><img src="/layout/nfc/clients/12.png" alt="client-12"></li>
<li><img src="/layout/nfc/clients/1.png" alt="client-1"></li>
<li><img src="/layout/nfc/clients/2.png" alt="client-2"></li>
<li><img src="/layout/nfc/clients/3.png" alt="client-3"></li>
<li><img src="/layout/nfc/clients/4.png" alt="client-4"></li>
<li><img src="/layout/nfc/clients/5.png" alt="client-5"></li>
<li><img src="/layout/nfc/clients/6.png" alt="client-6"></li>
<li><img src="/layout/nfc/clients/7.png" alt="client-7"></li>
<li><img src="/layout/nfc/clients/8.png" alt="client-8"></li>
<li><img src="/layout/nfc/clients/9.png" alt="client-9"></li>
<li><img src="/layout/nfc/clients/10.png" alt="client-10"></li>
<li><img src="/layout/nfc/clients/11.png" alt="client-11"></li>
<li><img src="/layout/nfc/clients/12.png" alt="client-12"></li>
<li><img src="/layout/nfc/clients/1.png" alt="client-1"></li>
<li><img src="/layout/nfc/clients/2.png" alt="client-2"></li>
<li><img src="/layout/nfc/clients/3.png" alt="client-3"></li>
<li><img src="/layout/nfc/clients/4.png" alt="client-4"></li>
<li><img src="/layout/nfc/clients/5.png" alt="client-5"></li>
<li><img src="/layout/nfc/clients/6.png" alt="client-6"></li>
<li><img src="/layout/nfc/clients/7.png" alt="client-7"></li>
<li><img src="/layout/nfc/clients/8.png" alt="client-8"></li>
<li><img src="/layout/nfc/clients/9.png" alt="client-9"></li>
<li><img src="/layout/nfc/clients/10.png" alt="client-10"></li>
<li><img src="/layout/nfc/clients/11.png" alt="client-11"></li>
<li><img src="/layout/nfc/clients/12.png" alt="client-12"></li>
<li><img src="/layout/nfc/clients/1.png" alt="client-1"></li>
<li><img src="/layout/nfc/clients/2.png" alt="client-2"></li>
<li><img src="/layout/nfc/clients/3.png" alt="client-3"></li>
<li><img src="/layout/nfc/clients/4.png" alt="client-4"></li>
<li><img src="/layout/nfc/clients/5.png" alt="client-5"></li>
<li><img src="/layout/nfc/clients/6.png" alt="client-6"></li>
<li><img src="/layout/nfc/clients/7.png" alt="client-7"></li>
<li><img src="/layout/nfc/clients/8.png" alt="client-8"></li>
</ul>
</div>
</section>
<section class="box-3">
<div class="container content">
<div class="box-big-title">
<h2 class="big-title">
OPINIE NA TWOJĄ<br />
<span>stronę www</span>
</h2>
</div>
<div class="c-row">
<div class="c-col c-col-1">
<img src="/layout/nfc/btn-3-img-1.png" alt="">
</div>
<div class="c-col c-col-2">
<h3>Przekonywującą strona to podstawa!</h3>
<ul>
<li>Nawet kilkadziesiąt pozytywnych opinii dziennie od Twoich Klientów to możliwe,</li>
<li>Badaj nastrój klienta zanim zapytasz go o opinie,</li>
<li>Unikaj negatywnych opinii</li>
</ul>
<a href="#" class="btn btn-green">Zamów już teraz -50%</a>
</div>
</div>
</div>
</section>
<section class="box-4">
<div class="container content">
<h2>2 sposoby pozyskiwania opinii</h2>
<div class="tiles">
<div class="tile tile-1">
<p class="big-title">QR CODE</p>
<ul>
<li>Nawet kilkadziesiąt <strong>pozytywnych opinii</strong><br/> dziennie od Twoich Klientów to możliwe,</li>
<li>Badaj nastrój klienta zanim zapytasz go o opinie,</li>
<li>Unikaj negatywnych <strong>opinii</strong></li>
</ul>
</div>
<div class="tile tile-2">
<div class="tile-data">
<p class="big-title">LINK</p>
<ul>
<li>Nawet kilkadziesiąt pozytywnych opinii dziennie od Twoich Klientów to możliwe,</li>
<li>Badaj nastrój <strong>klienta zanim zapytasz</strong> go o opinie,</li>
<li>Unikaj negatywnych opinii</li>
</ul>
<a href="#" class="btn btn-green">Wybierz swój pakiet</a>
</div>
<img src="/layout/nfc/box-4-img-2.jpg" alt="">
</div>
<div class="tile tile-3">
<img src="/layout/nfc/box-4-img-1.jpg" alt="">
</div>
</div>
</div>
</section>
<section class="box-5">
<div class="container content">
<div class="box-big-title">
<h2 class="big-title">JAK TO DZIAŁa?</h2>
<p>Wiesz już, że działa... ale jak? Obejrzyj krótki film i poznaj szczegóły działania naszej usługi.</p>
</div>
<div class="tiles">
<div class="tile tile-1">
<p>Udostępniamy QR Code</p>
<img src="/layout/nfc/box-5-img-1.png" alt="">
</div>
<div class="tile-arrow tile-arrow-1">
<img src="/layout/nfc/arrow-dashed-mini.svg" alt="">
</div>
<div class="tile tile-2">
<p>Wysyłamy link w mailu, sms'em lub jako przycisk</p>
<img src="/layout/nfc/box-5-img-2.svg" alt="">
</div>
<div class="tile-arrow tile-arrow-2">
<img src="/layout/nfc/arrow-dashed-mini.svg" alt="">
</div>
<div class="tile tile-3">
<p>Wyświetlamy ankietę</p>
<span class="empty-box"></span>
</div>
<div class="tile-arrow tile-arrow-3">
<p>Ocena: 5</p>
<img src="/layout/nfc/arrow-dashed-big.svg" alt="">
</div>
<div class="tile-arrow tile-arrow-4">
<p>Ocena: 1-3</p>
<img src="/layout/nfc/arrow-dashed-big.svg" alt="">
</div>
<div class="tile tile-4">
<p>Zapraszamy do wizytówki Google</p>
<img src="/layout/nfc/box-5-img-3.png" alt="">
</div>
<div class="tile-arrow tile-arrow-5">
<img src="/layout/nfc/arrow-dashed-mini.svg" alt="">
</div>
<div class="tile tile-5">
<p>Pytamy:<br /> Co możemy zrobić lepiej?</p>
<img src="/layout/nfc/box-5-img-4.svg" alt="">
</div>
<div class="tile tile-6">
<p>Udostępniamy Twoje pozytywne opinie</p>
<span class="empty-box"></span>
</div>
<div class="tile-arrow tile-arrow-6">
<img src="/layout/nfc/arrow-dashed-mini.svg" alt="">
</div>
</div>
<a href="#" class="btn btn-green">Zamów już teraz -50%</a>
</div>
</section>
<section class="box-6">
<div class="container content">
<div class="box-big-title">
<h2 class="big-title">JAK TO DZIAŁa?</h2>
<div class="slider-nav">
<div class="swiper-button-prev">
<img src="/layout/nfc/arrow-left.svg" alt="">
</div>
<div class="swiper-button-next">
<img src="/layout/nfc/arrow-right.svg" alt="">
</div>
</div>
</div>
<div class="reviews-box">
<div class="swiper reviews-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="nolazy" src="/layout/nfc/huawei-logo.png" alt="">
<p>Lorem ipsum dolor sit amet consectetur. Consectetur enim nibh tortor sed eget sit. Porttitor suspendisse malesuada vitae nunc elit ultrices tortor sed. Non scelerisque cursus velit cum euismod massa gravida rhoncus elementum. Maecenas a interdum rutrum euismod. Nibh id.</p>
<div class="reviews-author">
<div class="author-img">
<img class="nolazy" src="/layout/nfc/Theresa Webb.png" alt="">
</div>
<div class="author-data">
<p><strong>Theresa Webb</strong></p>
<p>CEO ABC</p>
</div>
</div>
</div>
<div class="swiper-slide">
<img class="nolazy" src="/layout/nfc/raizer-logo.png" alt="">
<p>Lorem ipsum dolor sit amet consectetur. Enim pellentesque semper at ac proin scelerisque id nulla congue. Ac tristique ut suspendisse gravida. Blandit amet aenean luctus enim sagittis in aliquam. Vitae ac purus metus pretium venenatis.
Pulvinar dui mi cras in neque. Aliquet ullamcorper euismod ultricies ac id. Nunc in morbi eu diam sed ornare est. Odio faucibus etiam magna lorem porttitor. Dolor sodales metus sed euismod. Orci at adipiscing enim facilisis. Habitant sit viverra nibh.</p>
<div class="reviews-author">
<div class="author-img">
<img class="nolazy" src="/layout/nfc/Theresa Webb.png" alt="">
</div>
<div class="author-data">
<p><strong>Wade Warren</strong></p>
<p>Właściciel Xyz</p>
</div>
</div>
</div>
<div class="swiper-slide">
<img class="nolazy" src="/layout/nfc/pepsi-logo.png" alt="">
<p>Lorem ipsum dolor sit amet consectetur. Consectetur enim nibh tortor sed eget sit. Porttitor suspendisse malesuada vitae nunc elit ultrices tortor sed. Non scelerisque cursus velit cum euismod massa gravida rhoncus elementum. Maecenas a interdum rutrum euismod. Nibh id.</p>
<div class="reviews-author">
<div class="author-img">
<img class="nolazy" src="/layout/nfc/Theresa Webb.png" alt="">
</div>
<div class="author-data">
<p><strong>Robert Fox</strong></p>
<p>CEO Pepsi Co.</p>
</div>
</div>
</div>
<div class="swiper-slide">
<img class="nolazy" src="/layout/nfc/huawei-logo.png" alt="">
<p>Lorem ipsum dolor sit amet consectetur. Consectetur enim nibh tortor sed eget sit. Porttitor suspendisse malesuada vitae nunc elit ultrices tortor sed. Non scelerisque cursus velit cum euismod massa gravida rhoncus elementum. Maecenas a interdum rutrum euismod. Nibh id.</p>
<div class="reviews-author">
<div class="author-img">
<img class="nolazy" src="/layout/nfc/Theresa Webb.png" alt="">
</div>
<div class="author-data">
<p><strong>Theresa Webb</strong></p>
<p>CEO ABC</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="box-7">
<div class="container content">
<div class="c-row">
<div class="c-col-1">
<h2 class="big-title">FAQ</h2>
<div class="author-box">
<p><strong>Masz więcej pytań?</strong> Zadzwoń!</p>
<div class="author-info">
<div class="author-img">
<img src="/upload/filemanager/SH-2-1.png" alt="">
</div>
<div class="author-data">
<p><strong>Sebastian Horoszko</strong></p>
<a href="tel:+48123456789">+48 123 456 789</a>
</div>
</div>
</div>
</div>
<div class="c-col-2">
<ul class="accordion">
<li>
<div class="accordion-title">
<h3>Elit nisl ac ut diam?</h3>
<span class="arrow"></span>
</div>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, sint aspernatur ducimus quia doloremque perferendis distinctio! Blanditiis, accusamus repudiandae nihil tempore quo nemo sint ea dolorem facere ex natus ipsam.</p>
</div>
</li>
<li>
<div class="accordion-title">
<h3>Et odio vel feugiat condimentum tortor nullam sit?</h3>
<span class="arrow"></span>
</div>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, sint aspernatur ducimus quia doloremque perferendis distinctio! Blanditiis, accusamus repudiandae nihil tempore quo nemo sint ea dolorem facere ex natus ipsam.</p>
</div>
</li>
<li>
<div class="accordion-title">
<h3>Ut nunc nunc?</h3>
<span class="arrow"></span>
</div>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, sint aspernatur ducimus quia doloremque perferendis distinctio! Blanditiis, accusamus repudiandae nihil tempore quo nemo sint ea dolorem facere ex natus ipsam.</p>
</div>
</li>
<li>
<div class="accordion-title">
<h3>Suspendisse sed blandit massa risus elementum?</h3>
<span class="arrow"></span>
</div>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, sint aspernatur ducimus quia doloremque perferendis distinctio! Blanditiis, accusamus repudiandae nihil tempore quo nemo sint ea dolorem facere ex natus ipsam.</p>
</div>
</li>
<li>
<div class="accordion-title">
<h3>Ultrices egestas nunc at mi sollicitudin habitasse sed nisi ut?</h3>
<span class="arrow"></span>
</div>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, sint aspernatur ducimus quia doloremque perferendis distinctio! Blanditiis, accusamus repudiandae nihil tempore quo nemo sint ea dolorem facere ex natus ipsam.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="offer-timer">
<div class="content container">
<div class="wrapper-offer-timer">
<ul>
<li class="days-num">00</li>
<li class="days-text">DNI</li>
<li class="days-separator">:</li>
<li class="hours-num">00</li>
<li class="hours-text">GODZIN</li>
<li class="hours-separator">:</li>
<li class="minutes-num">00</li>
<li class="minutes-text">MINUT</li>
<li class="minutes-separator">:</li>
<li class="seconds-num">0</li>
<li class="seconds-text">SEKUND</li>
</ul>
</div>
<div class="offer-data">
<h2>PROMOCJA -50%</h2>
<p><strong>DLA SŁUCHACZY MWF</strong><br />
Użyj kodu <strong>MWF50</strong></p>
</div>
</div>
</section>
<section class="box-8">
<div class="container content">
<div class="tiles">
<div class="tile tile-1">
<div class="title-tag">
<span>Najbardziej elastyczny</span>
</div>
<p>Płatność miesięczna</p>
<h3>99 PLN</h3>
<p>Introduce your simple pricing plan with a beautifully crafted pricing card design that grabs attention and intrigues.</p>
<a href="#" class="btn btn-green">Kup teraz</a>
</div>
<div class="tile tile-2">
<div class="title-tag">
<span>Najczęściej wybierany</span>
</div>
<p>Płatność roczna <strong>20% taniej</strong></p>
<h3>950 PLN</h3>
<p>Introduce your simple pricing plan with a beautifully crafted pricing card design that grabs attention and intrigues.</p>
<a href="#" class="btn btn-green">Kup teraz</a>
</div>
</div>
</div>
</section>
<footer>
<div class="footer-box-1">
<div class="container content">
<div class="c-row">
<div class="c-col-1">
<ul class="footer-menu-1">
<li>
<a href="tel:+48123456789">t: +48 123 456 789</a>
</li>
<li>
<a href="mailto:biuro@zaufane.pl">e: biuro@zaufane.pl</a>
</li>
</ul>
<ul class="footer-menu-2">
<li>
<a href="#">Regulamin</a>
</li>
<li>
<a href="#">Polityka prywatności</a>
</li>
</ul>
</div>
<div class="c-col-2">
<div class="f-logo">
<img src="/layout/nfc/logo.svg" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="footer-box-2">
<div class="container content">
<span>Zaufane 2024</span>
<span>Designed by Kreatywny Brand</span>
</div>
</div>
</footer>
<script class="footer">
$(function() {
const endDate = new Date("2024-11-01T00:00:00").getTime();
function updateCountdown() {
const now = new Date().getTime();
const timeLeft = endDate - now;
const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
$(".days-num").text(days);
$(".hours-num").text(hours.toString().padStart(2, '0'));
$(".minutes-num").text(minutes.toString().padStart(2, '0'));
$(".seconds-num").text(seconds.toString().padStart(2, '0'));
if (timeLeft <= 0) {
clearInterval(countdownInterval);
$(".days-num, .hours-num, .minutes-num, .seconds-num").text("00");
}
}
const countdownInterval = setInterval(updateCountdown, 1000);
updateCountdown();
});
$(document).ready(function() {
var swiper = new Swiper(".reviews-slider", {
slidesPerView: 3,
spaceBetween: 30,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
navigation: {
nextEl: ".box-6 .swiper-button-next",
prevEl: ".box-6 .swiper-button-prev",
},
on: {
init: function () {
setEqualHeight(this);
},
resize: function () {
setEqualHeight(this);
},
},
});
function setEqualHeight(swiper) {
var maxHeight = 0;
swiper.slides.forEach(function(slide) {
var slideHeight = slide.offsetHeight;
if (slideHeight > maxHeight) {
maxHeight = slideHeight;
}
});
swiper.slides.forEach(function(slide) {
slide.style.height = maxHeight + 'px';
});
}
});
$(function() {
$('body').on('click', '.accordion .accordion-title', function() {
$(this).parent().toggleClass('active');
$(this).siblings('.accordion-content').slideToggle('fast');
if ($(this).parent().hasClass('active')) {
$(this).parent().siblings().removeClass('active');
$(this).parent().siblings().find('.accordion-content').slideUp('fast');
}
})
})
</script>