/home/bdqbpbxa/demo-subdomains/sendon.goodface.com.ua/layout/index.html
<!DOCTYPE html>
<html lang="uk">
<head>
<title>
Home page
</title>
<!-- TODO: Set or remove page description -->
<meta charset="utf-8">
<meta name="description" content="Page description">
<!-- TODO: Delete noindex on production -->
<meta name="robots" content="noindex">
<meta name="googlebot" content="noindex">
<!-- TODO: Set absolute page URL -->
<link rel="canonical" href="https://sitename.com/page">
<!-- Mobile -->
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/styles.css?v=1.1">
<link rel="stylesheet" type="text/css" href="css/adaptive.css?v=1.1">
<link rel="stylesheet" type="text/css" href="css/lib/scroll-animations.css?v=1.1">
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
<link rel="manifest" href="images/favicon/site.webmanifest">
<link rel="mask-icon" href="images/favicon/safari-pinned-tab.svg" color="#166a82">
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="theme-color" content="#f1f1fa">
<!-- Opengraph -->
<!-- TODO: Add or remove opengraph -->
<meta name="twitter:card" content="summary_large_image">
<meta property="og:type" content="website">
<meta property="og:image:type" content="images/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://sendon.goodface.com.ua/layout/">
<meta property="og:site_name" content="SendOn">
<meta property="og:title" content="Page title">
<meta property="og:description" content="Page description">
<meta property="og:image" content="images/opengraph.png">
</head>
<body>
<style>
.-allow-animations .preloader {
opacity: 1;
}
.preloader {
height: var(--window-inner-height);
width: 100vw;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 99999;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.-allow-animations .preloader.-hidden {
opacity: 0;
pointer-events: none;
}
.change-color {
transition: fill 0.4s;
}
.move-item {
transition: transform 0.4s, fill 0.4s;
}
.preloader.-active .change-color {
fill: var(--blue)
}
.preloader.-active .move-item {
fill: var(--yellow);
transform: translateX(18px);
}
</style>
<div class="preloader">
<div class="img">
<svg width="87" height="48" viewBox="0 0 87 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M10.462 42.9749C13.8072 42.9749 16.519 40.2251 16.519 36.8331C16.519 33.441 13.8072 30.6912 10.462 30.6912C7.11686 30.6912 4.40506 33.441 4.40506 36.8331C4.40506 40.2251 7.11686 42.9749 10.462 42.9749ZM10.462 47.4417C16.24 47.4417 20.924 42.692 20.924 36.8331C20.924 30.9741 16.24 26.2245 10.462 26.2245C4.68401 26.2245 0 30.9741 0 36.8331C0 42.692 4.68401 47.4417 10.462 47.4417Z"
fill="#0A0A1F" />
<path
d="M20.3734 0.534783V5.00156C18.5403 4.85046 12.0799 4.39319 10.1518 4.47535C8.74432 4.53532 7.25418 4.70067 6.14121 4.97614C5.41767 5.15522 4.97238 5.82934 4.92094 6.58276C4.85179 7.59563 5.51147 8.48736 6.51241 8.51353C7.69717 8.54449 9.17558 8.4667 10.5547 8.36815C12.4451 8.23182 14.7974 8.06218 16.6858 8.55156C17.7378 8.82419 18.8573 9.34705 19.7007 10.3688C20.5617 11.4119 20.924 12.7179 20.924 14.1381C20.924 15.4732 20.5514 16.6754 19.8317 17.6855C19.1301 18.6703 18.1835 19.3556 17.1991 19.8358C15.2815 20.7711 12.8839 21.0896 10.685 21.1742C8.43563 21.2608 2.40457 20.8067 0.550633 20.641V16.1742C2.34507 16.3346 8.54623 16.7866 10.5178 16.7107C12.0042 16.6534 13.5939 16.4805 14.7637 16.1822C15.4507 16.007 15.8855 15.3757 15.9599 14.6615C16.0666 13.6381 15.4062 12.7168 14.3916 12.6956C13.2944 12.6727 11.9551 12.746 10.6169 12.8417C8.70779 12.9787 6.13735 13.1633 4.21474 12.6421C3.15555 12.3549 2.04103 11.8123 1.20612 10.7752C0.357631 9.72123 0 8.40863 0 6.97847C0 5.67483 0.354828 4.49476 1.04934 3.49675C1.72792 2.52165 2.64699 1.83915 3.60736 1.35922C5.4744 0.426211 7.81198 0.104327 9.96691 0.0125082C12.172 -0.0814495 18.4923 0.379731 20.3734 0.534783Z"
fill="#0A0A1F" />
<path
d="M42.9493 46.8832L38.4845 46.8833L27.5315 33.9855V46.8832H23.1266V26.7828H27.5914L38.5442 39.6804V26.7828H42.9493V46.8832Z"
fill="#0A0A1F" />
<path
d="M42.3987 4.44891V0.540481H23.1266V20.641H42.9494V16.7326H27.5316V12.2658H39.0949V8.35734H27.5316V4.44891H42.3987Z"
fill="#0A0A1F" />
<path
d="M64.9746 20.6409L60.5098 20.641L49.5569 7.7432V20.6409H45.1519V0.540481H49.6167L60.5695 13.438V0.540481H64.9746V20.6409Z"
fill="#0A0A1F" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M67.1772 0.540481H71.5823L71.5824 0.543467L77.0886 0.540481C82.5625 0.540481 87 5.04013 87 10.5907C87 16.1413 82.5625 20.641 77.0886 20.641H67.1772V0.540481ZM71.5823 4.44891H76.538C79.8831 4.44891 82.5949 7.1987 82.5949 10.5907C82.5949 13.9828 79.8831 16.7326 76.538 16.7326H71.5823L71.5823 4.44891Z"
fill="#0A0A1F" />
<path class="change-color"
d="M45.1519 36.8331C45.1519 30.6657 50.0824 25.6661 56.1646 25.6661H75.9873C82.0695 25.6661 87 30.6657 87 36.8331C87 43.0004 82.0695 48 75.9873 48H56.1646C50.0824 48 45.1519 43.0004 45.1519 36.8331Z"
fill="#CECECE" />
<path class="move-item"
d="M65.2468 36.8331C65.2468 41.4586 61.5489 45.2083 56.9873 45.2083C52.4257 45.2083 48.7278 41.4586 48.7278 36.8331C48.7278 32.2076 52.4257 28.4578 56.9873 28.4578C61.5489 28.4578 65.2468 32.2076 65.2468 36.8331Z"
fill="#FCFCFC" />
</svg>
</div>
</div>
<script>
// Allow animations if JS support is enabled
document.body.classList.add('-allow-animations');
// Don't show preloader again if the page was visited
let preloader = document.querySelector('.preloader');
let fullPageUrl = window.location.href;
let visitedPages = window.localStorage.getItem('visited-pages');
let visitedPagesArr = visitedPages ? visitedPages.split(' ') : '';
let isPreloaderLoaded = visitedPagesArr.includes(fullPageUrl);
if (preloader && isPreloaderLoaded) {
preloader.remove();
} else if (preloader) {
lockScroll();
}
function lockScroll() {
const html = document.documentElement;
const body = document.body;
const scrollTop = window.scrollY;
html.classList.add('-scroll-lock');
body.classList.add('-scroll-lock');
document.body.scrollTo(0, scrollTop);
html.setAttribute('data-scroll', scrollTop);
}
</script>
<header class="header">
<div class="container">
<div class="header__wrapper">
<a href="index.html" class="logo">
<img src="images/logo.svg" alt="SendOn - Logo">
</a>
<nav class="header__navigation text-2">
<a href="about-us.html">Про нас</a>
<a href="payments-solutions.html">Платіжні рішення</a>
<a href="contacts.html">Контакти</a>
<a href="#" class="link-with-icon -lang-switcher">
<span class="icon">
</span>
EN
</a>
</nav>
<a href="#" class="default-button -disabled -icon -login" data-text="Незабаром">
<span class="icon">
</span>
Увійти
</a>
<div class="burger">
<span></span><span></span>
</div>
</div>
</div>
<div class="mobile-menu">
<div class="mobile-menu__wrapper">
<nav class="mobile-menu__navigation mob-text-2 --semi-bold">
<a href="#" class="-active">Головна</a>
<a href="about-us.html">Про нас</a>
<a href="payments-solutions.html">Платіжні рішення</a>
<a href="contacts.html">Контакти</a>
</nav>
<div class="mobile-menu__footer">
<a href="#" class="default-button -disabled -icon -login" data-text="Незабаром">
<span class="icon">
</span>
Увійти
</a>
<a href="#" class="link-with-icon -lang-switcher mob-text-2">
<span class="icon">
</span>
English
</a>
</div>
</div>
</div>
</header>
<main>
<section class="hero" data-animate-group="list">
<div class="container">
<div class="hero__text">
<h1 class="title-1 mob-title-1 title" data-animate="word" data-index="1">
Робимо процес оплати <br class="--pc-display">
зручним і доступним для всіх
</h1>
<p class="text text-1 mob-text-2" data-animate="swim-top" data-index="2">
Правильно підібране платіжне рішення — <br class="--pc-display"> запорука успішного розвитку вашого <br
class="--mobile-display"> бізнесу.
</p>
<a href="#contact-form" class="default-button -hover-swipe" data-animate="swim-top" data-index="3">
<div class="icon-wrapper">
<span class="icon">
<span>
<img src="images/ui-kit/arrow-right.svg" alt="">
</span>
<span>
<img src="images/ui-kit/plus.svg" alt="">
</span>
</span>
</div>
<span class="text">
Підключити
</span>
</a>
</div>
</div>
<div class="container -bigger">
<div class="hero__animation" data-animate="swim-top" data-index="4">
<div class="hero__animation-line conveyor-belt" data-check-in-viewport>
<div class="conveyor-belt-part">
<div class="animation-line-item">
<div class="animation-line-item__circle">
<div class="img" data-image="images/homepage/hero/emoji-girl-sunglasses.png">
<video src="images/homepage/video/7.mp4" autoplay loop muted playsinline></video>
</div>
</div>
<div class="animation-line-item__circle-double">
<div class="animation-line-item__circle">
<div class="img">
<svg fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="first-arr" opacity=".3" d="m37 38 6 6-6 6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
<path class="last-arr" d="m45 38 6 6-6 6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="animation-line-item__circle">
<div class="img">
<img src="images/homepage/hero/apple-pay.png" alt="">
</div>
</div>
</div>
<div class="animation-line-item__circle">
<div class="img">
<img src="images/homepage/hero/emoji-shop-pack.png" alt="">
</div>
</div>
</div>
<div class="animation-line-item">
<div class="animation-line-item__circle">
<div class="img" data-image="images/homepage/hero/emoji-man-in-hat.png">
<video src="images/homepage/video/second.mp4" autoplay loop muted playsinline></video>
</div>
</div>
<div class="animation-line-item__circle-double">
<div class="animation-line-item__circle">
<div class="img">
<svg fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="first-arr" opacity=".3" d="m37 38 6 6-6 6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
<path class="last-arr" d="m45 38 6 6-6 6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="animation-line-item__circle">
<div class="img">
<img src="images/homepage/hero/emoji-visa.png" alt="">
</div>
</div>
</div>
<div class="animation-line-item__circle">
<div class="img">
<img src="images/homepage/hero/emoji-bank.png" alt="">
</div>
</div>
</div>
<div class="animation-line-item">
<div class="animation-line-item__circle">
<div class="img" data-image="images/homepage/hero/emoji.png">
<video src="images/homepage/video/3.mp4" autoplay loop muted playsinline></video>
</div>
</div>
<div class="animation-line-item__circle-double">
<div class="animation-line-item__circle">
<div class="img">
<svg fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="first-arr" opacity=".3" d="m37 38 6 6-6 6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
<path class="last-arr" d="m45 38 6 6-6 6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="animation-line-item__circle">
<div class="img">
<img src="images/homepage/hero/mastercard.png" alt="">
</div>
</div>
</div>
<div class="animation-line-item__circle">
<div class="img">
<img src="images/homepage/hero/emoji-cash.png" alt="">
</div>
</div>
</div>
<div class="animation-line-item">
<div class="animation-line-item__circle">
<div class="img" data-image="images/homepage/hero/emoji-woman-thinking.png">
<video src="images/homepage/video/4.mp4" autoplay loop muted playsinline></video>
</div>
</div>
<div class="animation-line-item__circle-double">
<div class="animation-line-item__circle">
<div class="img">
<svg fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="first-arr" opacity=".3" d="m37 38 6 6-6 6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
<path class="last-arr" d="m45 38 6 6-6 6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="animation-line-item__circle">
<div class="img">
<img src="images/homepage/hero/google-pay.png" alt="">
</div>
</div>
</div>
<div class="animation-line-item__circle">
<div class="img">
<img src="images/homepage/hero/emoji-dishes.png" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="hero__animation-line conveyor-belt -reverse" data-check-in-viewport>
<div class="conveyor-belt-part">
<div class="animation-line-item">
<div class="animation-line-item__circle">
<div class="img">
<img src="images/homepage/hero/emoji-cash.png" alt="">
</div>
</div>
<div class="animation-line-item__circle-double">
<div class="animation-line-item__circle">
<div class="img">
<img src="images/homepage/hero/mastercard.png" alt="">
</div>
</div>
<div class="animation-line-item__circle">
<div class="img">
<svg fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="first-arr" opacity=".3" d="m51 50-6-6 6-6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
<path class="last-arr" d="m43 50-6-6 6-6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
</div>
<div class="animation-line-item__circle">
<div class="img" data-image="images/homepage/hero/emoji-women-glasses.png">
<video src="images/homepage/video/5.mp4" autoplay loop muted playsinline></video>
</div>
</div>
</div>
<div class="animation-line-item">
<div class="animation-line-item__circle">
<div class="img">
<img src="images/homepage/hero/emoji-dishes.png" alt="">
</div>
</div>
<div class="animation-line-item__circle-double">
<div class="animation-line-item__circle">
<div class="img">
<img src="images/homepage/hero/google-pay.png" alt="">
</div>
</div>
<div class="animation-line-item__circle">
<div class="img">
<svg fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="first-arr" opacity=".3" d="m51 50-6-6 6-6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
<path class="last-arr" d="m43 50-6-6 6-6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
</div>
<div class="animation-line-item__circle">
<div class="img" data-image="images/homepage/hero/emoji-woman-thinking.png">
<video src="images/homepage/video/6.mp4" autoplay loop muted playsinline></video>
</div>
</div>
</div>
<div class="animation-line-item">
<div class="animation-line-item__circle">
<div class="img">
<img src="images/homepage/hero/emoji-2.png" alt="">
</div>
</div>
<div class="animation-line-item__circle-double">
<div class="animation-line-item__circle">
<div class="img">
<img src="images/homepage/hero/emoji-visa.png" alt="">
</div>
</div>
<div class="animation-line-item__circle">
<div class="img">
<svg fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="first-arr" opacity=".3" d="m51 50-6-6 6-6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
<path class="last-arr" d="m43 50-6-6 6-6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
</div>
<div class="animation-line-item__circle">
<div class="img" data-image="images/homepage/hero/emoji-man-in-glasses.png">
<video src="images/homepage/video/1.mp4" autoplay loop muted playsinline></video>
</div>
</div>
</div>
<div class="animation-line-item">
<div class="animation-line-item__circle">
<div class="img">
<img src="images/homepage/hero/emoji-shop-pack.png" alt="">
</div>
</div>
<div class="animation-line-item__circle-double">
<div class="animation-line-item__circle">
<div class="img">
<img src="images/homepage/hero/apple-pay.png" alt="">
</div>
</div>
<div class="animation-line-item__circle">
<div class="img">
<svg fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="first-arr" opacity=".3" d="m51 50-6-6 6-6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
<path class="last-arr" d="m43 50-6-6 6-6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
</div>
<div class="animation-line-item__circle">
<div class="img" data-image="images/homepage/hero/emoji-girl-sunglasses.png">
<video src="images/homepage/video/8.mp4" autoplay loop muted playsinline></video>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="solutions-section">
<div class="container">
<div class="title-wrapper" data-animate-group="list">
<h2 class="title-2 mob-title-2 title" data-animate="word" data-index="1">
Наші рішення підійдуть для <br class="--pc-display">
будь‑якого типу онлайн‑бізнесу.
</h2>
<p class="text text-1 mob-text-1" data-animate="swim-top" data-index="2">
Залежно від галузі та <br class="--mobile-display"> запитів, ми допоможемо обрати та <br
class="--pc-display">
інтегрувати найвдаліше рішення.
</p>
</div>
<div class="solutions-list">
<a href="#contact-form" class="solution-card" data-animate="swim-top">
<div class="solution-card__text">
<p class="title-3 mob-title-3 title">
HoReCa
</p>
<p class="text text-2 mob-text-2">
Ефективні платіжні рішення для <br class="--pc-display">
готельно‑ресторанного бізнесу
</p>
<p class="text-2 mob-text-2 --semi-bold link">Підключити</p>
</div>
<div class="solution-card__img">
<div class="horeca-animation">
<div class="horeca-animation__wrapper">
<div class="horeca-animation__item">
<div class="images">
<div class="img">
<img src="images/homepage/animations/horeca/girl-think.png" alt="">
</div>
<div class="small-img">
<img src="images/homepage/animations/horeca/hotel.png" alt="">
</div>
</div>
<div class="service">
<p class="grey">
Бронювання
</p>
<p class="name">
Junior Suite, 9 ночей
</p>
</div>
<div class="price-button">
<p class="price">
8 600 ₴
</p>
<p class="button">
Деталі
</p>
</div>
</div>
<div class="horeca-animation__item">
<div class="images">
<div class="img">
<img src="images/homepage/animations/horeca/girl.png" alt="">
</div>
<div class="small-img">
<img src="images/homepage/animations/horeca/dishes.png" alt="">
</div>
</div>
<div class="service">
<p class="grey">
Ресторан
</p>
<p class="name">
Чек №3459, Столик №6
</p>
</div>
<div class="price-button">
<p class="price">
2 800 ₴
</p>
<p class="button">
Деталі
</p>
</div>
</div>
<div class="horeca-animation__item">
<div class="images">
<div class="img">
<img src="images/homepage/animations/horeca/boy.png" alt="">
</div>
<div class="small-img">
<img src="images/homepage/animations/horeca/hotel.png" alt="">
</div>
<div class="small-img">
<img src="images/homepage/animations/horeca/dishes.png" alt="">
</div>
</div>
<div class="service">
<p class="grey">
Бронювання + сніданок
</p>
<p class="name">
Junior Suite, 6 ночей
</p>
</div>
<div class="price-button">
<p class="price">
7 300 ₴
</p>
<p class="button">
Деталі
</p>
</div>
</div>
<div class="horeca-animation__item">
<div class="images">
<div class="img">
<img src="images/homepage/animations/horeca/woman.png" alt="">
</div>
<div class="small-img">
<img src="images/homepage/animations/horeca/hotel.png" alt="">
</div>
<div class="small-img">
<img src="images/homepage/animations/horeca/dishes.png" alt="">
</div>
</div>
<div class="service">
<p class="grey">
Бронювання + сніданок
</p>
<p class="name">
Suite, 6 ночей
</p>
</div>
<div class="price-button">
<p class="price">
9 700 ₴
</p>
<p class="button">
Деталі
</p>
</div>
</div>
<div class="horeca-animation__item">
<div class="images">
<div class="img">
<img src="images/homepage/animations/horeca/man.png" alt="">
</div>
<div class="small-img">
<img src="images/homepage/animations/horeca/dishes.png" alt="">
</div>
</div>
<div class="service">
<p class="grey">
Ресторан
</p>
<p class="name">
Чек №1358, Столик №7
</p>
</div>
<div class="price-button">
<p class="price">
6 500 ₴
</p>
<p class="button">
Деталі
</p>
</div>
</div>
</div>
</div>
</div>
</a>
<a href="#contact-form" class="solution-card" data-animate="swim-top">
<div class="solution-card__text">
<p class="title-3 mob-title-3 title">
Маркетплейси
</p>
<p class="text text-2 mob-text-2">
Ідеальне рішення для <br class="--pc-display">
онлайн-бізнесу
</p>
<p class="text-2 mob-text-2 --semi-bold link">Підключити</p>
</div>
<div class="solution-card__img">
<div class="marketplace-animation">
<div class="marketplace-animation__wrapper">
<div class="marketplace-animation__header"></div>
<div class="marketplace-animation__grid">
<div class="marketplace-animation__item">
<div class="img">
<img src="images/homepage/animations/marketplaces/camera.png" alt="">
</div>
<div class="text">
<p class="name">Фотоаппарат</p>
<p class="price">23 999 ₴</p>
<div class="payment-method"></div>
<div class="buy-button">Купити</div>
</div>
</div>
<div class="marketplace-animation__item">
<div class="img">
<img src="images/homepage/animations/marketplaces/laptop.png" alt="">
</div>
<div class="text">
<p class="name">Ноутбук</p>
<p class="price">56 999 ₴</p>
<div class="payment-method"></div>
<div class="buy-button">Купити</div>
</div>
</div>
<div class="marketplace-animation__item">
<div class="img">
<img src="images/homepage/animations/marketplaces/headphones.png" alt="">
</div>
<div class="text">
<p class="name">Навушники</p>
<p class="price">14 999 ₴</p>
<div class="payment-method"></div>
<div class="buy-button">Купити</div>
</div>
</div>
<div class="marketplace-animation__item">
<div class="img">
<img src="images/homepage/animations/marketplaces/watch.png" alt="">
</div>
<div class="text">
<p class="name">Смарт годинник</p>
<p class="price">20 999 ₴</p>
<div class="payment-method"></div>
<div class="buy-button">Купити</div>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
<a href="#contact-form" class="solution-card" data-animate="swim-top">
<div class="solution-card__text">
<p class="title-3 mob-title-3 title">
Освітні проекти
</p>
<p class="text text-2 mob-text-2">
Усе необхідне для прийому <br class="--pc-display">
платежів за освітні послуги
</p>
<p class="text-2 mob-text-2 --semi-bold link">Підключити</p>
</div>
<div class="solution-card__img">
<div class="education-animation">
<div class="education-animation__wrapper">
<div class="education__outer">
<div class="course">
Курси Іспанської
</div>
<div class="g-pay"></div>
</div>
<div class="education__inner">
<div class="gradient-item">
<div class="flag">
<img src="images/homepage/animations/education/spain.png" alt="">
</div>
<div class="img -double">
<img src="images/homepage/animations/education/man-without-like.png" alt="">
<img src="images/homepage/animations/education/like.png" alt="">
</div>
</div>
<div class="gradient-item">
<div class="flag">
<img src="images/homepage/animations/education/uk.png" alt="">
</div>
<div class="img">
<img src="images/homepage/animations/education/girl.png" alt="">
</div>
</div>
</div>
<div class="education__footer"></div>
</div>
</div>
</div>
</a>
<a href="#contact-form" class="solution-card" data-animate="swim-top">
<div class="solution-card__text">
<p class="title-3 mob-title-3 title">
Гемблінг та бетінг
</p>
<p class="text text-2 mob-text-2">
Платіжні інструменти для бізнесу <br class="--pc-display"> у high-risk сегменті
</p>
<p class="text-2 mob-text-2 --semi-bold link">Підключити</p>
</div>
<div class="solution-card__img">
<div class="gamebling-animation">
<div class="gamebling-animation__wrapper">
<div class="gamebling-animation__item">
<div class="emoji-right">
<img src="images/homepage/animations/gambling/cubic.png" alt="">
</div>
<div class="img">
<img src="images/homepage/animations/gambling/casino.png" alt="">
</div>
<p class="text">Казино</p>
<p class="price -red">− 200 ₴</p>
</div>
<div class="gamebling-animation__item">
<div class="emoji-left">
<img src="images/homepage/animations/gambling/lunka.png" alt="">
</div>
<div class="emoji-right">
<img src="images/homepage/animations/gambling/finish.png" alt="">
</div>
<div class="img">
<img src="images/homepage/animations/gambling/car.png" alt="">
</div>
<p class="text">Ставка Formula 1</p>
<p class="price">15 000 ₴ </p>
</div>
<div class="gamebling-animation__item">
<div class="emoji-left">
<img src="images/homepage/animations/gambling/medal.png" alt="">
</div>
<div class="emoji-right">
<img src="images/homepage/animations/gambling/ball.png" alt="">
</div>
<div class="img">
<img src="images/homepage/animations/gambling/cup.png" alt="">
</div>
<p class="text">Ліга Чемпіонів</p>
<p class="price">10 000 ₴ </p>
</div>
<div class="gamebling-animation__item">
<div class="emoji-left">
<img src="images/homepage/animations/gambling/pike.png" alt="">
</div>
<div class="emoji-right">
<img src="images/homepage/animations/gambling/horse.png" alt="">
</div>
<div class="img">
<img src="images/homepage/animations/gambling/joker.png" alt="">
</div>
<p class="text">Онлайн покер</p>
<p class="price">20 000 ₴ </p>
</div>
<div class="gamebling-animation__item">
<div class="emoji-right">
<img src="images/homepage/animations/gambling/lemon.png" alt="">
</div>
<div class="img">
<img src="images/homepage/animations/gambling/basketball.png" alt="">
</div>
<p class="text">NBA</p>
<p class="price">12 000 ₴</p>
</div>
</div>
</div>
</div>
</a>
<a href="#contact-form" class="solution-card -big" data-animate="swim-top">
<div class="solution-card__text">
<p class="title-3 mob-title-3 title">
Індивідуальне рішення
</p>
<p class="text text-2 mob-text-2">
Рішення створене під ваш бізнес та конкретний запит
</p>
<p class="text-2 mob-text-2 --semi-bold link">Підключити</p>
</div>
<div class="solution-card__img">
<div class="individual-animation">
<div class="individual-animation__item -cart">
<div class="cart-button">
<img src="images/homepage/animations/individual/cart.svg" alt="">
</div>
<div class="price">
<img src="images/homepage/animations/individual/price.svg" alt="">
</div>
<div class="reload">
<img src="images/homepage/animations/individual/reload.svg" alt="">
</div>
</div>
<div class="individual-animation__item -payment">
<div><img src="images/homepage/animations/individual/apple.svg" alt=""></div>
<div><img src="images/homepage/animations/individual/mastercard.svg" alt=""></div>
<div><img src="images/homepage/animations/individual/g-pay.svg" alt=""></div>
<div><img src="images/homepage/animations/individual/visa.svg" alt=""></div>
</div>
<div class="individual-animation__item -graph">
<img src="images/homepage/animations/individual/grafic.svg" alt="" class="bg">
<div class="graph-line">
<img src="images/homepage/animations/individual/grafic-line.svg" alt="">
</div>
</div>
<div class="individual-animation__item -card">
<img src="images/homepage/animations/individual/card.svg" alt="">
</div>
</div>
</div>
</a>
</div>
</div>
</section>
<section class="services-section" data-animate-group="list">
<div class="container">
<div class="title-wrapper">
<h2 class="title-2 mob-title-2 title" data-animate="word" data-index="1">
Що ми пропонуємо
</h2>
</div>
<div class="services" data-animate="swim-top" data-index="2">
<div class="services__menu">
<div class="title-2 mob-title-2 services__menu-item -active">
Оплата на сайті <br>
та в додатку
</div>
<div class="title-2 mob-title-2 services__menu-item">
Платіжна кнопка
</div>
<div class="title-2 mob-title-2 services__menu-item">
Платіжні інвойси
</div>
<div class="title-2 mob-title-2 services__menu-item">
QR-платежі
</div>
<div class="title-2 mob-title-2 services__menu-item">
Передплатa
</div>
</div>
<div class="services__items">
<div class="services__item -active">
<img src="images/homepage/service-1.png" alt="">
</div>
<div class="services__item">
<img src="images/homepage/service-2.png" alt="">
</div>
<div class="services__item">
<img src="images/homepage/service-3.png" alt="">
</div>
<div class="services__item">
<img src="images/homepage/service-4.png" alt="">
</div>
<div class="services__item">
<img src="images/homepage/service-5.png" alt="">
</div>
</div>
</div>
</div>
</section>
<section class="why-choose-us" data-animate-group="list">
<div class="container">
<div class="title-wrapper">
<h2 class="title-2 mob-title-2 title" data-animate="word" data-index="1">
Чому обирають нас?
</h2>
</div>
<div class="why-choose-us-cards" data-animate="swim-top" data-index="2">
<div class="why-choose-us-card" data-x-final="-95.6%" data-y-final="8.3%" data-rotation-final="-10">
<div class="why-choose-us-card__img">
<picture>
<source srcset="images/homepage/why-choose-us-1-mob.png" media="(max-width: 1024px)">
<img src="images/homepage/why-choose-us-1.png" alt="">
</picture>
</div>
<div class="why-choose-us-card__text">
<p class="title title-3 mob-title-3">
Гарантія
завершення платежу
</p>
<p class="text text-2 mob-text-2">
Ми оптимізуємо маршрут транзакцій, аби кошти точно надійшли на ваш рахунок незалежно
<br class="--pc-display">
від роботи банку
</p>
</div>
</div>
<div class="why-choose-us-card" data-x-final="0" data-y-final="0" data-rotation-final="0">
<div class="why-choose-us-card__img">
<picture>
<source srcset="images/homepage/why-choose-us-2-mob.png" media="(max-width: 1024px)">
<img src="images/homepage/why-choose-us-2.png" alt="">
</picture>
</div>
<div class="why-choose-us-card__text">
<p class="title title-3 mob-title-3">
Жодних <br>
валютних обмежень
</p>
<p class="text text-2 mob-text-2">
Ваші клієнти можуть здійснювати оплату у будь-якій валюті: ми налаштуємо автоматичну конвертацію <br>
за офіційним курсом
</p>
</div>
</div>
<div class="why-choose-us-card" data-x-final="98.7%" data-y-final="8.2%" data-rotation-final="10">
<div class="why-choose-us-card__img">
<picture>
<source srcset="images/homepage/why-choose-us-3-mob.png" media="(max-width: 1024px)">
<img src="images/homepage/why-choose-us-3.png" alt="">
</picture>
</div>
<div class="why-choose-us-card__text">
<p class="title title-3 mob-title-3">
Різноманіття <br class="--pc-display">
платіжних можливостей
</p>
<p class="text text-2 mob-text-2">
Ви можете обирати найвдаліші платіжні рішення <br class="--pc-display">
для вашого бізнесу – від платіжних карток <br class="--pc-display">
до криптовалюти
</p>
</div>
</div>
</div>
</div>
</section>
<section class="form-section" id="contact-form" data-animate-group="list">
<div class="container">
<div class="title-wrapper">
<h2 class="title-2 mob-title-2 title" data-animate="word" data-index="1">
Покращіть роботу вашого бізнесу
</h2>
<p class="text text-1 mob-text-1" data-animate="swim-top" data-index="2">
Інтегруйте ефективне платіжне рішення відповідно до потреб <br class="--mob-display"> проєкту.
</p>
</div>
<div class="form-block" data-animate="swim-top" data-index="3">
<div class="form-block__left">
<h3 class="title title-3 mob-title-3">
Звʼяжіться з нами,
аби дізнатися більше
</h3>
<p class="text text-2 mob-text-2">
Наші консультанти нададуть вам детальну інформацію щодо можливих варіантів
рішень конкретно для вашого
бізнесу
</p>
<div class="img form-block__img">
<img src="images/contacts/contacts.png" alt="">
</div>
</div>
<div class="form-block__right">
<div class="form__wrapper">
<div class="form">
<form action="#">
<div class="double-input">
<div class="input" data-important="not-empty">
<p class="label text-2 mob-text-2">Імʼя</p>
<input type="text">
</div>
<div class="input">
<p class="label text-2 mob-text-2">Сайт компанії</p>
<input type="link">
</div>
</div>
<div class="double-input">
<div class="input" data-important="email">
<p class="label text-2 mob-text-2">Email</p>
<input type="email">
</div>
<div class="input" data-important="inputmask">
<p class="label text-2 mob-text-2">Телефон</p>
<input type="text" class="phone-mask">
</div>
</div>
<button class="default-button -hover-swipe">
<div class="icon-wrapper">
<span class="icon">
<span>
<img src="images/ui-kit/arrow-right.svg" alt="">
</span>
<span>
<img src="images/ui-kit/plus.svg" alt="">
</span>
</span>
</div>
<span class="text">
Відправити
</span>
</button>
<p class="agreement text-2">
Натискаючи «Відправити», ви підтверджуєте, що прочитали та <br class="--pc-display"> <br
class="--tablet-display">
зрозуміли інформацію щодо <a href="#">Oбробки персональних даних</a>.
</p>
</form>
</div>
<div class="form__thank">
<div class="img">
<img src="images/contacts/check.svg" alt="">
</div>
<p class="title title-3 mob-title-3">
Вашу заявку <br class="--pc-display">
успішно відправлено
</p>
<p class="text text-2 mob-text-2">
Наші менеджери звʼяжуться з вами найближчим <br class="--pc-display">
часом аби відповісти на всі ваші запитання
</p>
<a href="#" class="default-button">
Зрозуміло
</a>
</div>
</div>
</div>
<div class="form-block__img">
<img src="images/contacts/contacts.png" alt="">
</div>
</div>
</div>
</section>
</main>
<a href="#contact-form" class="cta-button">
</a>
<footer class="footer">
<div class="container">
<div class="footer-wrapper">
<div class="footer__col -big">
<a href="#" class="logo">
<img src="images/logo.svg" alt="">
</a>
<div class="partners">
<div class="img">
<img src="images/ui-kit/pci-dss.svg" alt="">
</div>
<div class="img">
<img src="images/ui-kit/visa.svg" alt="">
</div>
<div class="img">
<img src="images/ui-kit/mastercard.svg" alt="">
</div>
</div>
</div>
<div class="footer__col -big">
<div class="footer__menu-list">
<a href="index.html" class="text-2 mob-text-2 --semi-bold link -active">
Головна
</a>
<a href="payments-solutions.html" class="text-2 mob-text-2 --semi-bold link">
Платіжні рішення
</a>
<a href="about-us.html" class="text-2 mob-text-2 --semi-bold link">
Про нас
</a>
<a href="contacts.html" class="text-2 mob-text-2 --semi-bold link">
Контакти
</a>
</div>
</div>
<a href="mailto:info@sendon.com" class="footer__col -small">
<div class="social-icon">
<img src="images/ui-kit/mail.svg" alt="">
</div>
<div class="text text-2 mob-text-2">
<p class="name">Email</p>
<p class="value --semi-bold">info@sendon.com</p>
</div>
</a>
<a href="tel:+380987654321" class="footer__col -small">
<div class="social-icon">
<img src="images/ui-kit/phone.svg" alt="">
</div>
<div class="text text-2 mob-text-2">
<p class="name">Телефон</p>
<p class="value --semi-bold">+380 98 765 4321</p>
</div>
</a>
<div class="footer__col">
<div class="social-list">
<a href="#" class="social-icon">
<img src="images/ui-kit/fb.svg" alt="">
</a>
<a href="#" class="social-icon">
<img src="images/ui-kit/linkedin.svg" alt="">
</a>
<a href="#" class="social-icon">
<img src="images/ui-kit/twitter.svg" alt="">
</a>
<a href="#" class="social-icon">
<img src="images/ui-kit/telegram.svg" alt="">
</a>
</div>
</div>
<div class="footer__col -bottom">
<div class="col">
<p class="copyright text-2 mob-text-2 --font-display">
© SendOn, 2023
</p>
</div>
<div class="col">
<a href="text-page.html" class="link text-2 mob-text-2">
Oбробкa персональних даних
</a>
</div>
<div class="col">
<p class="designed-by">
Дизайн і розробка <a href="https://goodface.agency/" target="_blank">Goodface</a>
</p>
</div>
</div>
</div>
</div>
</footer>
<script src="js/lib/jquery-3.6.0.min.js"></script>
<script src="js/lib/gsap.min.js"></script>
<script src="js/lib/ScrollTrigger.min.js"></script>
<script src="js/lib/jquery.inputmask.min.js"></script>
<script src="js/lib/scroll-lock.min.js"></script>
<script src="js/custom-solutions.js?v=1.1"></script>
<script src="js/script.js?v=1.1"></script>
<script src="js/animations.js?v=1.1"></script>
<script src="js/test.js?v=1.1"></script>
</body>
</html>