New home page
This commit is contained in:
Roman Pyrih
1
layout/style-css/home-new.css
Normal file
1
layout/style-css/home-new.css
Normal file
File diff suppressed because one or more lines are too long
1
layout/style-css/home-new.css.map
Normal file
1
layout/style-css/home-new.css.map
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sources":["../style-scss/home-new.scss","../style-scss/_mixins.scss","../style-scss/_variables.scss"],"names":[],"mappings":"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","file":"home-new.css"}
|
||||||
520
layout/style-scss/home-new.scss
Normal file
520
layout/style-scss/home-new.scss
Normal file
@@ -0,0 +1,520 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
|
||||||
|
@import '_variables';
|
||||||
|
@import '_mixins';
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
.box-title {
|
||||||
|
color: $cBlackText;
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: $font-5;
|
||||||
|
line-height: 1;
|
||||||
|
font-weight: 700;
|
||||||
|
|
||||||
|
padding-left: 20px;
|
||||||
|
border-left: 3px solid $cYellow;
|
||||||
|
|
||||||
|
@include respond-below(sm) {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.subpage-content {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-1 {
|
||||||
|
padding-top: 90px;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin: 100px 0 30px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
position: relative;
|
||||||
|
color: $cBlackText;
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-family: $font-5;
|
||||||
|
padding-left: 20px;
|
||||||
|
border-left: 3px solid $cYellow;
|
||||||
|
margin: 0 0 40px 0;
|
||||||
|
text-transform: initial;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
@include respond-below(sm) {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#form-acc-demo {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 500px;
|
||||||
|
margin-left: auto;
|
||||||
|
padding: 40px;
|
||||||
|
border: 1px solid $cYellow;
|
||||||
|
border-radius: 24px;
|
||||||
|
background-color: $cWhite;
|
||||||
|
|
||||||
|
@include respond-below(md) {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.f-row {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.tile {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
label {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 20px;
|
||||||
|
color: #b9b9b9;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1;
|
||||||
|
margin: 0;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
transition: all 250ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
background: #f9f9f9;
|
||||||
|
height: 53px;
|
||||||
|
width: 100%;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
|
||||||
|
color: #000;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus ~ label,
|
||||||
|
input:not(:placeholder-shown) ~ label {
|
||||||
|
top: 0;
|
||||||
|
color: #b9b9b9;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1;
|
||||||
|
color: rgba(#000, 0.8);
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $cYellow;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox'] {
|
||||||
|
appearance: none;
|
||||||
|
position: relative;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border: 1px solid #ebebeb;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #f9f9f9;
|
||||||
|
width: 20px;
|
||||||
|
min-width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:checked {
|
||||||
|
&::before {
|
||||||
|
top: 9px;
|
||||||
|
left: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
top: 10px;
|
||||||
|
left: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -11px;
|
||||||
|
left: 26px;
|
||||||
|
width: 10px;
|
||||||
|
height: 2px;
|
||||||
|
background: #000;
|
||||||
|
transform: rotate(-50deg);
|
||||||
|
transition: all 250ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -10px;
|
||||||
|
left: -16px;
|
||||||
|
width: 5px;
|
||||||
|
height: 2px;
|
||||||
|
background: #000;
|
||||||
|
transform: rotate(50deg);
|
||||||
|
transition: all 250ms ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-row {
|
||||||
|
.btn {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
column-gap: 12px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
padding: 20px 21px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background-color: #d43277;
|
||||||
|
|
||||||
|
color: $cWhite;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-family: $font-5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.star {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
&-1 {
|
||||||
|
top: -40px;
|
||||||
|
right: 60px;
|
||||||
|
}
|
||||||
|
&-2 {
|
||||||
|
left: -90px;
|
||||||
|
top: 27%;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
|
||||||
|
@include respond-below(sm) {
|
||||||
|
left: auto;
|
||||||
|
right: -90px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-3 {
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
transform: translate(-65%, 10%);
|
||||||
|
width: 190px;
|
||||||
|
height: 190px;
|
||||||
|
object-fit: contain;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include respond-below(xs) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box-2 {
|
||||||
|
padding-top: 80px;
|
||||||
|
padding-bottom: 70px;
|
||||||
|
background-color: #fffbec;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
@extend .box-title;
|
||||||
|
margin: 0 0 60px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
color: $cBlackText;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
max-width: fit-content;
|
||||||
|
border-top-left-radius: 12px;
|
||||||
|
border-top-right-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
column-gap: 30px;
|
||||||
|
row-gap: 40px;
|
||||||
|
|
||||||
|
@include respond-below(sm) {
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
width: calc(100% / 2 - (30px - (30px / 2)));
|
||||||
|
|
||||||
|
@include respond-below(sm) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
> div {
|
||||||
|
padding: 45px 50px 35px 50px;
|
||||||
|
background: $cWhite;
|
||||||
|
border-bottom-left-radius: 12px;
|
||||||
|
border-bottom-right-radius: 12px;
|
||||||
|
|
||||||
|
box-shadow: 0 24px 64px rgba(100, 84, 0, 0.12);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box-3 {
|
||||||
|
padding-top: 70px;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
background-color: #fffbec;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
column-gap: 80px;
|
||||||
|
row-gap: 40px;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
width: calc(100% / 3 - (80px - 80px / 3));
|
||||||
|
|
||||||
|
@include respond-below(sm) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-bottom: 28px;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box-4 {
|
||||||
|
padding-top: 80px;
|
||||||
|
padding-bottom: 40px;
|
||||||
|
background-color: #fffbec;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
@extend .box-title;
|
||||||
|
margin: 0 0 40px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
column-gap: 30px;
|
||||||
|
row-gap: 40px;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
width: calc(100% / 3 - (30px - 30px / 3));
|
||||||
|
background-color: $cWhite;
|
||||||
|
padding: 40px;
|
||||||
|
border-radius: 15px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
&:nth-child(2) {
|
||||||
|
img {
|
||||||
|
margin-bottom: 35px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> span {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include respond-below(md) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-bottom: 28px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: fit-content;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box-5 {
|
||||||
|
padding-top: 40px;
|
||||||
|
padding-bottom: 90px;
|
||||||
|
background-color: #fffbec;
|
||||||
|
|
||||||
|
.box-5--wrapper {
|
||||||
|
position: relative;
|
||||||
|
background-color: #141414;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 64px;
|
||||||
|
background-image: url('/upload/filemanager/Pages/home-new/box-bg.svg');
|
||||||
|
background-position: calc(100% + 57px) center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
@include respond-below(md) {
|
||||||
|
padding: 30px;
|
||||||
|
background-position: calc(170% + 57px) center;
|
||||||
|
}
|
||||||
|
@include respond-below(sm) {
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-col-1 {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 675px;
|
||||||
|
|
||||||
|
@include respond-below(lg) {
|
||||||
|
max-width: 470px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: $cWhite;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
font-size: 48px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-family: $font-5;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: $cYellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include respond-below(sm) {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: $cWhite;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: row;
|
||||||
|
column-gap: 12px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
padding: 20px 21px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background-color: #d43277;
|
||||||
|
|
||||||
|
color: $cWhite;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-family: $font-5;
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
libraries/.DS_Store
vendored
Normal file
BIN
libraries/.DS_Store
vendored
Normal file
Binary file not shown.
135
pages/Home-Page.php
Normal file
135
pages/Home-Page.php
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
<div class="box-1" id="bezplatne-demo">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<h2>
|
||||||
|
<img src="/upload/filemanager/new-2024/assets/Star.svg" alt="">
|
||||||
|
BEZPŁATNE DEMO
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<h1>Wypróbuj Zaufane.pl za darmo!</h1>
|
||||||
|
|
||||||
|
<p>Załóż konto demo i przetestuj najlepsze narzędzie do pozyskiwania, publikowania i zarządzania opiniami. Bez zobowiązań, bez ryzyka - przetestuj Zaufane.pl zupełnie bezpłatnie.</p>
|
||||||
|
|
||||||
|
<img src="/upload/filemanager/Pages/home-new/Group-138.png" alt="">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<?php include 'templates_user/home-page-form-new.php'; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box-2">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<h2>Dlaczego warto założyć konto demo?</h2>
|
||||||
|
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
<img alt="" src="/upload/filemanager/Pages/home-new/img-1.png"/>
|
||||||
|
<div>
|
||||||
|
<h4>Wyróżnisz się na tle konkurencji dzięki „złotym gwiazdkom” w Google</h4>
|
||||||
|
<p>Wizytówka Google to jedno z pierwszych miejsc, gdzie klienci sprawdzają Twoją wiarygodność. Dzięki Zaufane.pl możesz wypełnić swoją wizytówkę pozytywnymi opiniami i wyświetlać „złote gwiazdki” w reklamach Google, co zwiększa zaufanie, obniża CPC i podnosi CTR.</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img alt="" src="/upload/filemanager/Pages/home-new/img-2.png"/>
|
||||||
|
<div>
|
||||||
|
<h4>Oszczędzasz czas i zarządzasz opiniami w jednym miejscu</h4>
|
||||||
|
<p>Zaufane.pl oferuje 5 metod pozyskiwania opinii (pop-upy, e-maile, QR kody i inne), które działają automatycznie. Wszystkie opinie są Twoją własnością, a zarządzanie nimi odbywa się w jednym miejscu.</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img alt="" src="/upload/filemanager/Pages/home-new/img-3.png"/>
|
||||||
|
<div>
|
||||||
|
<h4>Zbudujesz trwałe relacje z klientami</h4>
|
||||||
|
<p>Negatywne doświadczenia klientów to szansa na poprawę. Zaufane.pl oferuje mediację, która pomaga rozwiązywać spory i chroni wizerunek Twojej marki, poprawiając satysfakcję klientów i budując długotrwałe relacje.</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img alt="" src="/upload/filemanager/Pages/home-new/img-4.png"/>
|
||||||
|
<div>
|
||||||
|
<h4>Otrzymasz tylko pozytywne opinie i cenny feedback</h4>
|
||||||
|
<p>Dzięki algorytmom Zaufane.pl filtrujesz recenzentów na podstawie ich wcześniejszych odpowiedzi. Zadowolonych klientów zachęcasz do zostawienia opinii publicznie, a mniej zadowolonych prosisz o dodatkowy feedback, unikając negatywnych opinii.</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box-3">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<img alt="" src="/upload/filemanager/icons/icon-star.svg" style="max-width: 74px; width: 100%;" />
|
||||||
|
<h4>Będziesz zgodny z prawem i zyskasz przewagę konkurencyjną</h4>
|
||||||
|
<p>Zaufane.pl jest zgodne z dyrektywą Omnibus, co oznacza, że wszystkie opinie są legalne i wiarygodne. Jako oficjalny partner Google, zapewnia narzędzia wyróżniające Twoją markę na tle konkurencji.</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img alt="" src="/upload/filemanager/icons/icon-camera.svg" style="max-width: 74px; width: 100%;" />
|
||||||
|
<h4>Zdobędziesz przewagę na rynkach zagranicznych</h4>
|
||||||
|
<p>Jeśli planujesz ekspansję, Zaufane.pl obsługuje 26 języków, co pozwala zbierać i wyświetlać opinie na całym świecie. To zwiększa zaufanie międzynarodowych klientów i szanse na sukces na nowych rynkach.</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img alt="" src="/upload/filemanager/icons/icon-star.svg" style="max-width: 74px; width: 100%;" />
|
||||||
|
<h4>Zbudujesz zaufanie klientów i zwiększysz sprzedaż</h4>
|
||||||
|
<p>Klienci ufają opiniom innych konsumentów. Dzięki Zaufane.pl zbierasz autentyczne, potransakcyjne opinie, które pokazują, że Twoje produkty i usługi są warte zakupu. Produkty z 20+ recenzjami mogą zwiększyć sprzedaż nawet o 100%, a przy 101+ recenzjach - nawet o 380%.</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box-4">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<h2>Zobacz opinie naszych klientów</h2>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<img alt="" src="/upload/filemanager/Pages/home-new/gatta.png" />
|
||||||
|
<p>"Dzięki Zaufane.pl nasza sprzedaż wzrosła o 150%! Klienci widząc autentyczne opinie, chętniej dokonują zakupów. Dodatkowo „złote gwiazdki” w Google sprawiły, że nasze reklamy mają lepsze wyniki i niższy koszt. Polecam każdemu e-commerce!"</p>
|
||||||
|
<span>Anna Kowalska,<br/>Właścicielka Gatta</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img alt="" src="/upload/filemanager/Pages/home-new/morele.png" />
|
||||||
|
<p>"Zaufane.pl to świetne narzędzie do budowania wiarygodności marki. Dzięki automatycznemu zbieraniu opinii oszczędzamy czas, a system filtrowania pomaga nam unikać negatywnych recenzji publicznie. Klienci chętniej nam ufają, co przekłada się na większą konwersję!"</p>
|
||||||
|
<span>Mateusz Kowalski,<br/>Dyrektor marketingu Morele</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img alt="" src="/upload/filemanager/Pages/home-new/hnlo.png" />
|
||||||
|
<p>"Reputacja w branży beauty to podstawa, a Zaufane.pl pomogło nam zdobyć setki pozytywnych opinii. Klientki zwracają uwagę na oceny w Google, a nasze 4,9 gwiazdki robią ogromną różnicę. Dodatkowo, mediacja pomogła nam rozwiązać kilka trudniejszych sytuacji z klientami. Bardzo polecam!"</p>
|
||||||
|
<span>Andżelika Nowak,<br/>Właścicielka Hair New Life</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box-5">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="box-5--wrapper">
|
||||||
|
<div class="c-col-1">
|
||||||
|
<h2>Zaufane.pl to najlepszy wybór dla Twojego <span>e-commerce</span></h2>
|
||||||
|
<p>Zwiększysz sprzedaż dzięki autentycznym opiniom i „złotym gwiazdkom” w Google. Zbudujesz zaufanie klientów, wyróżnisz się na tle konkurencji, otrzymasz cenny feedback, unikniesz negatywnych opinii, będziesz zgodny z prawem, oszczędzisz czas i zyskasz przewagę na rynkach zagranicznych.</p>
|
||||||
|
<a class="btn" href="#bezplatne-demo">
|
||||||
|
<img src="/upload/filemanager/icons/icon-rocket-1.svg" alt="">
|
||||||
|
<span>Załóż konto DEMO</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -1 +0,0 @@
|
|||||||
<!-- <?= \front\view\Scontainers::scontainer(240); ?> -->
|
|
||||||
37
templates_user/home-page-form-new.php
Normal file
37
templates_user/home-page-form-new.php
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
<form method="POST" action="/" id="form-acc-demo">
|
||||||
|
<input type="hidden" name="action" value="home_form_acc_demo">
|
||||||
|
|
||||||
|
<h2>Załóż konto DEMO</h2>
|
||||||
|
|
||||||
|
<div class="f-row">
|
||||||
|
<div class="tile">
|
||||||
|
<input type="text" name="name" id="form-name" placeholder="" required>
|
||||||
|
<label for="form-name">Imię i nazwisko</label>
|
||||||
|
</div>
|
||||||
|
<div class="tile">
|
||||||
|
<input type="email" name="email" id="form-email" placeholder="" required>
|
||||||
|
<label for="form-email">Adres e-mail</label>
|
||||||
|
</div>
|
||||||
|
<div class="tile">
|
||||||
|
<input type="text" name="phone" id="form-phone" placeholder="" required>
|
||||||
|
<label for="form-phone">Nr telefonu</label>
|
||||||
|
</div>
|
||||||
|
<div class="tile">
|
||||||
|
<input type="text" name="www" id="form-www" placeholder="" required>
|
||||||
|
<label for="form-www">Adres Twojej strony www</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="checkbox-row">
|
||||||
|
<input type="checkbox" name="" id="checkbox-1" required>
|
||||||
|
<label for="checkbox-1">Wyrażam zgodę na otrzymywanie informacji marketingowych od Zaufane.pl zgodnie z <a href="#">Polityką Prywatności</a></label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn-row">
|
||||||
|
<button type="submit" class="btn">Zarejestruj swoje konto</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img class="star star-1" src="/upload/filemanager/Pages/home-new/solar_star-bold.svg" alt="">
|
||||||
|
<img class="star star-2" src="/upload/filemanager/Pages/home-new/solar_star-bold.svg" alt="">
|
||||||
|
<img class="star star-3" src="/upload/filemanager/Pages/home-new/solar_star-bold.svg" alt="">
|
||||||
|
</form>
|
||||||
Reference in New Issue
Block a user