File: /var/www/quadcode.com/src/components/blocks/white-label-binary-options/Hero.svelte
<script lang="ts">
import Button from '../../button/Button.svelte';
import image from '../../../assets/images/white-label-binary-options/heroImage.webp';
import iqOption from '../../../assets/images/white-label-binary-options/logos/iq-option.webp';
import markets from '../../../assets/images/white-label-binary-options/logos/markets.webp';
import qcex from '../../../assets/images/white-label-binary-options/logos/qcex.webp';
import yahoo from '../../../assets/images/white-label-binary-options/logos/yahoo.webp';
import wire from '../../../assets/images/white-label-binary-options/logos/wire.webp';
import insider from '../../../assets/images/white-label-binary-options/logos/insider.webp';
import fxEmp from '../../../assets/images/white-label-binary-options/logos/fx-emp.webp';
import fxStrt from '../../../assets/images/white-label-binary-options/logos/fx-strt.webp';
import { t } from '$lib/translations';
import { popupForm } from '../../../store';
</script>
<section class="white-label-binary-options">
<div class="container">
<div class="white-label-binary-options__row">
<div class="white-label-binary-options__textBlock">
<h1 class="white-label-binary-options__title">
{@html $t('white-label-binary-options.Start Your Own Binary Options Platform Today')}
</h1>
<div class="mobile white-label-binary-options__imageContainer">
<img src={image} alt="white label binary option" class="white-label-binary-options__image" loading="eager">
</div>
<ul class="white-label-binary-options__features">
<li class="white-label-binary-options__feature">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.0816 5.81845C13.0816 5.21596 13.5701 4.72754 14.1725 4.72754H18.1939C18.7964 4.72754 19.2848 5.21596 19.2848 5.81845C19.2848 6.42094 18.7964 6.90936 18.1939 6.90936H17.2741V7.84375C22.0926 8.39211 25.8196 12.5297 25.8196 17.5275C25.8196 22.8967 21.5182 27.273 16.1832 27.273C10.8482 27.273 6.54688 22.8967 6.54688 17.5275C6.54688 12.5297 10.2739 8.39211 15.0923 7.84375V6.90936H14.1725C13.5701 6.90936 13.0816 6.42094 13.0816 5.81845ZM10.0842 7.17226C10.5129 7.59558 10.5173 8.28629 10.094 8.71501L8.58598 10.2423C8.16267 10.671 7.47196 10.6754 7.04324 10.2521C6.61452 9.82875 6.61014 9.13804 7.03345 8.70932L8.54147 7.18204C8.96479 6.75332 9.6555 6.74894 10.0842 7.17226ZM22.2823 7.17226C22.711 6.74894 23.4017 6.75332 23.825 7.18204L25.333 8.70932C25.7564 9.13804 25.752 9.82875 25.3233 10.2521C24.8945 10.6754 24.2038 10.671 23.7805 10.2423L22.2725 8.71501C21.8492 8.28629 21.8536 7.59558 22.2823 7.17226ZM16.1832 9.9639C12.0792 9.9639 8.72869 13.3372 8.72869 17.5275C8.72869 21.7179 12.0792 25.0912 16.1832 25.0912C20.2872 25.0912 23.6378 21.7179 23.6378 17.5275C23.6378 13.3372 20.2872 9.9639 16.1832 9.9639ZM16.1832 12.3639C16.7857 12.3639 17.2741 12.8523 17.2741 13.4548V16.9139L19.2631 18.1225C19.778 18.4354 19.9418 19.1064 19.6289 19.6213C19.316 20.1362 18.645 20.3 18.1301 19.9871L15.6167 18.4598C15.2911 18.262 15.0923 17.9086 15.0923 17.5275V13.4548C15.0923 12.8523 15.5807 12.3639 16.1832 12.3639Z" fill="#E62334"/>
</svg>
{$t('white-label-binary-options.Launch in just 2 weeks')}
</li>
<li class="white-label-binary-options__feature">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.6367 6.18182H12.0004C10.7954 6.18182 9.81854 7.15865 9.81854 8.36364V23.6364C9.81854 24.8413 10.7954 25.8182 12.0004 25.8182H19.6367C20.8417 25.8182 21.8185 24.8413 21.8185 23.6364V8.36364C21.8185 7.15865 20.8417 6.18182 19.6367 6.18182ZM12.0004 4C9.59039 4 7.63672 5.95367 7.63672 8.36364V23.6364C7.63672 26.0463 9.59038 28 12.0004 28H19.6367C22.0467 28 24.0004 26.0463 24.0004 23.6364V8.36364C24.0004 5.95367 22.0467 4 19.6367 4H12.0004Z" fill="#E62334"/>
<path d="M16.7276 22.9091C16.7276 23.5116 16.2392 24 15.6367 24C15.0342 24 14.5458 23.5116 14.5458 22.9091C14.5458 22.3066 15.0342 21.8182 15.6367 21.8182C16.2392 21.8182 16.7276 22.3066 16.7276 22.9091Z" fill="#E62334"/>
</svg>
{$t('white-label-binary-options.Get your broker a top-notch mobile app')}
</li>
<li class="white-label-binary-options__feature">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9996 6.47898C10.7415 6.47898 6.47898 10.7415 6.47898 15.9996C6.47898 21.2578 10.7415 25.5203 15.9996 25.5203C21.2578 25.5203 25.5203 21.2578 25.5203 15.9996C25.5203 10.7415 21.2578 6.47898 15.9996 6.47898ZM4.36328 15.9996C4.36328 9.57306 9.57306 4.36328 15.9996 4.36328C22.4262 4.36328 27.636 9.57306 27.636 15.9996C27.636 22.4262 22.4262 27.636 15.9996 27.636C9.57306 27.636 4.36328 22.4262 4.36328 15.9996ZM15.9996 8.06576C16.5839 8.06576 17.0575 8.53938 17.0575 9.12361V9.65254H17.2338C19.1813 9.65254 20.76 11.2313 20.76 13.1787C20.76 13.7629 20.2864 14.2366 19.7021 14.2366C19.1179 14.2366 18.6443 13.7629 18.6443 13.1787C18.6443 12.3997 18.0128 11.7682 17.2338 11.7682H14.9418C14.0654 11.7682 13.355 12.4787 13.355 13.355C13.355 14.2314 14.0654 14.9418 14.9418 14.9418H17.0575C19.1023 14.9418 20.76 16.5995 20.76 18.6443C20.76 20.6891 19.1023 22.3468 17.0575 22.3468V22.8757C17.0575 23.4599 16.5839 23.9335 15.9996 23.9335C15.4154 23.9335 14.9418 23.4599 14.9418 22.8757V22.3468H14.7655C12.818 22.3468 11.2393 20.768 11.2393 18.8206C11.2393 18.2363 11.7129 17.7627 12.2972 17.7627C12.8814 17.7627 13.355 18.2363 13.355 18.8206C13.355 19.5996 13.9865 20.2311 14.7655 20.2311H17.0575C17.9339 20.2311 18.6443 19.5206 18.6443 18.6443C18.6443 17.7679 17.9338 17.0575 17.0575 17.0575H14.9418C12.897 17.0575 11.2393 15.3998 11.2393 13.355C11.2393 11.3102 12.897 9.65254 14.9418 9.65254V9.12361C14.9418 8.53938 15.4154 8.06576 15.9996 8.06576Z" fill="#E62334"/>
</svg>
{$t('white-label-binary-options.Enjoy full pricing transparency')}
</li>
<li class="white-label-binary-options__feature">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.30294C4 5.6335 4.54329 5.09082 5.21348 5.09082H26.7865C27.4567 5.09082 28 5.6335 28 6.30294C28 6.92685 27.5281 7.44067 26.9213 7.50766V15.1872C26.9214 16.0504 26.9214 16.771 26.8732 17.3596C26.823 17.9736 26.7144 18.55 26.4364 19.0951C26.0098 19.9313 25.3291 20.6113 24.4919 21.0374C23.9462 21.3151 23.3692 21.4235 22.7545 21.4737C22.1652 21.5218 21.4438 21.5218 20.5796 21.5218H19.3517L23.2488 24.7657C23.7636 25.1942 23.8332 25.9586 23.4041 26.4728C22.9751 26.9871 22.2099 27.0566 21.6951 26.628L17.2135 22.8976V25.6969C17.2135 26.3663 16.6702 26.909 16 26.909C15.3298 26.909 14.7865 26.3663 14.7865 25.6969V22.8976L10.3049 26.628C9.79009 27.0566 9.02491 26.9871 8.59587 26.4728C8.16682 25.9586 8.23638 25.1942 8.75124 24.7657L12.6483 21.5218H11.4204C10.5562 21.5218 9.83479 21.5218 9.24548 21.4737C8.63083 21.4235 8.05377 21.3151 7.50809 21.0374C6.67087 20.6113 5.99019 19.9313 5.56361 19.0951C5.28557 18.55 5.17699 17.9736 5.12677 17.3596C5.07862 16.771 5.07863 16.0504 5.07865 15.1871L5.07865 7.50766C4.47192 7.44067 4 6.92685 4 6.30294ZM7.50562 7.51506V15.1379C7.50562 16.0631 7.50656 16.684 7.54568 17.1622C7.58363 17.6263 7.6514 17.8481 7.72605 17.9945C7.91996 18.3746 8.22935 18.6837 8.60991 18.8773C8.75643 18.9519 8.97855 19.0196 9.44311 19.0575C9.92184 19.0966 10.5435 19.0975 11.4697 19.0975H20.5303C21.4565 19.0975 22.0782 19.0966 22.5569 19.0575C23.0215 19.0196 23.2436 18.9519 23.3901 18.8773C23.7706 18.6837 24.08 18.3746 24.2739 17.9945C24.3486 17.8481 24.4164 17.6263 24.4543 17.1622C24.4934 16.684 24.4944 16.0631 24.4944 15.1379V7.51506H7.50562ZM16 9.40058C16.6702 9.40058 17.2135 9.94326 17.2135 10.6127V15.9999C17.2135 16.6693 16.6702 17.212 16 17.212C15.3298 17.212 14.7865 16.6693 14.7865 15.9999V10.6127C14.7865 9.94326 15.3298 9.40058 16 9.40058ZM11.6854 11.5555C12.3556 11.5555 12.8989 12.0981 12.8989 12.7676V15.9999C12.8989 16.6693 12.3556 17.212 11.6854 17.212C11.0152 17.212 10.4719 16.6693 10.4719 15.9999V12.7676C10.4719 12.0981 11.0152 11.5555 11.6854 11.5555ZM20.3146 13.7103C20.9848 13.7103 21.5281 14.253 21.5281 14.9225V15.9999C21.5281 16.6693 20.9848 17.212 20.3146 17.212C19.6444 17.212 19.1011 16.6693 19.1011 15.9999V14.9225C19.1011 14.253 19.6444 13.7103 20.3146 13.7103Z" fill="#E62334"/>
</svg>
{$t('white-label-binary-options.Offer wide range of assets')}
</li>
</ul>
<Button onClick={() => {popupForm.set(true)}}>{$t('white-label-binary-options.Request demo')}</Button>
</div>
<img src={image} alt="white label binary option" class="white-label-binary-options__image" loading="eager">
</div>
<div class="white-label-binary-options__row white-label-binary-options__companies">
<div class="white-label-binary-options__companiesBlock">
<div class="white-label-binary-options__companiesBlockTitle">{$t('white-label-binary-options.Trusted by brokers & exchanges all over the world')}</div>
<div class="white-label-binary-options__companiesBlockCompaniesList">
<img src={iqOption} alt="iqOption">
<img src={markets} alt="quadcode markets">
<img src={qcex} alt="qcex ">
</div>
</div>
<div class="white-label-binary-options__companiesBlock">
<div class="white-label-binary-options__companiesBlockTitle">{$t('white-label-binary-options.We’re featured in')}</div>
<div class="white-label-binary-options__companiesBlockCompaniesList">
<img src={yahoo} alt="yahoo finance">
<img src={wire} alt="business wire">
<img src={insider} alt="business insider">
<img class="fxempire" src={fxEmp} alt="fxempire">
<img class="fxstreet" src={fxStrt} alt="fxstreet">
</div>
</div>
</div>
</div>
</section>
<style lang="scss">
@import 'src/scss/media';
@import 'src/scss/mixins';
@import 'src/scss/variables';
.white-label-binary-options {
padding: 120px 0 90px 0;
background: linear-gradient(53.99deg, #F8FBFD 8.34%, #CCEBFF 97.82%);
overflow: hidden;
@include breakpoint-down('deskL') {
padding: 106px 0 60px 0;
}
@include breakpoint-down('tabL') {
padding: 73px 0 55px 0;
}
@include breakpoint-down('tabM') {
padding: 62px 0 40px 0;
}
.container {
display: flex;
flex-direction: column;
gap: 133px;
@include breakpoint-down('deskL') {
gap: 78px;
}
@include breakpoint-down('tabL') {
gap: 50px;
}
@include breakpoint-down('tabM') {
gap: 59px;
}
}
&__title {
@include H1;
margin-bottom: 30px;
@include breakpoint-down('deskL') {
margin-bottom: 21px;
}
@include breakpoint-down('tabL') {
margin-bottom: 20px;
}
@include breakpoint-down('tabM') {
width: 302px;
text-align: center;
margin-bottom: 0;
}
:global(span) {
color: $redPrimary;
}
}
&__features {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 30px;
@include breakpoint-down('deskL') {
gap: 0;
margin-bottom: 24px;
}
@include breakpoint-down('tabL') {
margin-bottom: 23px;
}
@include breakpoint-down('tabM') {
margin-bottom: 16px;
}
}
&__feature {
@include body;
align-items: center;
display: flex;
gap: 8px;
@include breakpoint-down('tabL') {
@include table;
}
svg {
min-width: 32px;
min-height: 32px;
max-width: 32px;
max-height: 32px;
@include breakpoint-down('tabL') {
min-width: 20px;
min-height: 20px;
max-width: 20px;
max-height: 20px;
}
}
}
&__textBlock {
min-width: 516px;
max-width: 516px;
margin-left: -6px;
@include breakpoint-down('deskL') {
margin-left: 0;
min-width: 417px;
max-width: 417px;
}
@include breakpoint-down('tabL') {
min-width: 246px;
max-width: 246px;
}
@include breakpoint-down('tabM') {
min-width: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
}
&__row {
display: flex;
position: relative;
&:first-child {
gap: 82px;
@include breakpoint-down('tabM') {
flex-direction: column;
}
}
&:last-child {
gap: 93px;
@include breakpoint-down('deskL') {
gap: 57px;
}
@include breakpoint-down('deskM') {
gap: 30px;
}
@include breakpoint-down('tabL') {
flex-direction: column;
gap: 16px;
}
}
}
&__companiesBlock {
display: flex;
flex-direction: column;
gap: 24px;
width: 50%;
@include breakpoint-down('deskL') {
gap: 15px;
}
@include breakpoint-down('tabL') {
width: 100%;
}
@include breakpoint-down('tabM') {
align-items: center;
}
}
&__companiesBlockTitle {
@include accent;
font-weight: 700;
color: $redPrimary;
@include breakpoint-down('tabL') {
@include H3;
}
@include breakpoint-down('tabM') {
width: 223px;
text-align: center;
}
}
&__companiesBlockCompaniesList {
display: flex;
align-items: center;
gap: 36px;
@include breakpoint-down('deskL') {
gap: 24px;
}
@include breakpoint-down('tabM') {
gap: 12px;
height: 17px;
}
img {
filter: invert(1);
max-height: 32px;
width: auto;
@include breakpoint-down('deskL') {
max-height: 25px;
}
@include breakpoint-down('deskS') {
max-height: 18px;
}
@include breakpoint-down('tabM') {
max-height: 17px;
}
}
.fxempire, .fxstreet {
height: 18px;
@include breakpoint-down('deskL') {
height: 15px;
}
@include breakpoint-down('tabM') {
height: 9px;
}
}
}
&__imageContainer {
display: none;
width: 384px;
height: 240px;
&.mobile {
@include breakpoint-down('tabM') {
display: flex;
img {
display: flex;
}
}
}
}
&__image {
position: absolute;
width: 1074px;
right: -212px;
top: -89px;
-webkit-filter: drop-shadow(-12px -12px 20px #C8D9E54D);
filter: drop-shadow(-12px -12px 20px #C8D9E54D);
@include breakpoint-down('deskL') {
width: 888px;
right: -162px;
top: -101px;
}
@include breakpoint-down('tabL') {
width: 527px;
right: -87px;
top: -29px;
}
@include breakpoint-down('tabM') {
position: static;
display: none;
width: 384px;
height: 240px;
margin-bottom: 12px;
margin-top: -7px;
margin-left: 32px;
}
&.mobile {
@include breakpoint-down('tabM') {
display: flex;
}
}
}
:global(.button) {
width: 456px;
height: 73px;
font-weight: 700;
font-size: 30px;
line-height: 33px;
letter-spacing: 0;
text-align: center;
@include breakpoint-down('deskL') {
width: 352px;
height: 52px;
@include accent;
}
@include breakpoint-down('tabL') {
@include table;
width: 242px;
height: 38px;
}
@include breakpoint-down('tabM') {
width: 302px;
}
}
}
</style>