File: //var/www/quadcode.com/src/components/blocks/trading-platform/WhiteLabel.svelte
<script lang="ts">
import {t} from '$lib/translations';
import computer from '../../../assets/images/trading-platform/whiteLabel/computer.webp';
import mobile from '../../../assets/images/trading-platform/whiteLabel/mobile.webp';
import cards from '../../../assets/images/trading-platform/whiteLabel/cards.webp';
import { onMount } from 'svelte';
let blockFeaturesBestInClass: HTMLDivElement;
let blockFeaturesAllMarkets: HTMLDivElement;
let cardColumn: HTMLDivElement;
let cardRow: HTMLDivElement;
let isMobile: boolean;
onMount(() => {
isMobile = window.innerWidth < 767;
const replaceCards = () => {
cardColumn.replaceChild(blockFeaturesBestInClass, blockFeaturesAllMarkets);
cardColumn.appendChild(blockFeaturesAllMarkets);
}
const resetReplacingCards = () => {
cardColumn.replaceChild(blockFeaturesAllMarkets, blockFeaturesBestInClass);
cardRow.prepend(blockFeaturesBestInClass);
}
window.addEventListener('resize', (event) => {
isMobile = window.innerWidth < 767;
if (isMobile) {
replaceCards();
}
else {
resetReplacingCards();
}
})
if (isMobile) {
replaceCards();
}
});
</script>
<section class="affiliate_broker__features block-features">
<div class="container">
<div class="block-features__wrapper">
<div class="block-features__text">
<div class="block-features__titleBlock">
<p class="block-features__underTitle underTitle" >{$t('trading-platform.White label')}</p>
<h2 class="block-features__title ">
{$t('trading-platform.Ready-To-Go White Label Solution')}
</h2>
</div>
<p class="block-features__description">
{$t('trading-platform.Create a bold and unique brand for your brokerage business, setting everything from color scheme to typography with a few clicks.')}
</p>
</div>
<div class="block-features__cards">
<div class="block-features__cardRow" bind:this={cardRow}>
<div class="block-features__card" id="blockFeaturesBestInClass" bind:this={blockFeaturesBestInClass}>
<div class="block-features__card__text">
<div class="block-features__card__title" >{$t('trading-platform.Best in class UI/UX your traders will fall in love')}</div>
<img src={computer} loading="lazy" alt="computer">
</div>
</div>
<div class="block-features__cardColumn" bind:this={cardColumn}>
<div class="block-features__card" id="blockFeaturesAffiliateModuleConvertMobile">
<div class="block-features__card__text">
<div class="block-features__card__title">{$t('trading-platform.Convert mobile traffic better with iOS, Android and PWA')} </div>
<div class="block-features__card__description">{$t('trading-platform.Get the most of your mobile traffic with cutting-edge mobile applications and PWA.')}</div>
</div>
<img src={mobile} loading="lazy" alt="mobile">
</div>
<div class="block-features__card" id="blockFeaturesAllMarkets" bind:this={blockFeaturesAllMarkets}>
<div class="block-features__card__title">{@html $t('trading-platform.All markets in one platform')}</div>
<div class="block-features__card__features">
<div class="block-features__card__feature">
<div class="block-features__card__feature__title">7+</div>
<div class="block-features__card__feature__description">{$t('trading-platform.Asset classes')}</div>
</div>
<div class="block-features__card__feature">
<div class="block-features__card__feature__title">300+</div>
<div class="block-features__card__feature__description">{$t('trading-platform.Instruments')}</div>
</div>
<div class="block-features__card__feature">
<div class="block-features__card__feature__title">100+</div>
<div class="block-features__card__feature__description">{$t('trading-platform.Technical indicators')}</div>
</div>
</div>
</div>
</div>
</div>
<div class="block-features__cardRow" >
<div class="block-features__card" id="blockFeaturesAffiliateModule" >
<div class="block-features__card__text">
<div class="block-features__card__title">{$t('trading-platform.API Integrations')}</div>
<div class="block-features__card__description">{$t("trading-platform.Plug our widgets' data into your system in just a click")}</div>
</div>
<img src={cards} loading="lazy" alt="cards">
</div>
<div class="block-features__card" id="blockFeaturesUserCommunication">
<div class="block-features__card__text">
<div class="block-features__card__title">{$t('trading-platform.iFrame')} </div>
<div class="block-features__card__description">{$t('trading-platform.Effortlessly integrate Quadcode traderoom into your product line-up')}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="folderСrest center">
<svg width="800" height="42" viewBox="0 0 800 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 41.5168V41.5168C10.2978 41.5168 20.1874 37.4899 27.556 30.2962L46.9339 11.3781C54.4059 4.08349 64.4342 0 74.8765 0H724.173C734.367 0 744.176 3.8921 751.597 10.8812L772.572 30.6356C779.993 37.6248 789.806 41.5168 800 41.5168V41.5168H395H0Z" fill="#E62334"/>
</svg>
</div>
<div class="folderСrest center deskL">
<svg width="580" height="31" viewBox="0 0 580 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.5 30.3289H0.906577C6.12236 30.3289 11.1318 28.2913 14.8668 24.6506L34.3306 5.67822C38.0656 2.03756 43.075 0 48.2908 0H530.819C535.911 0 540.811 1.94197 544.52 5.42998L565.224 24.8989C568.934 28.3869 573.834 30.3289 578.925 30.3289H579.5H283H0.5Z" fill="#E62334"/>
</svg>
</div>
<div class="folderСrest center tabL">
<svg width="333" height="27" viewBox="0 0 333 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.5 26.912V26.912C4.5374 26.912 8.30078 24.8697 10.5012 21.4846L20.9175 5.46C23.1311 2.05456 26.9171 0 30.9787 0H298.402C302.394 0 306.124 1.98449 308.354 5.29452L319.352 21.6175C321.583 24.9275 325.313 26.912 329.304 26.912H332.5H161H0.5Z" fill="#E62334"/>
</svg>
</div>
<div class="folderСrest center tabM">
<svg width="173" height="14" viewBox="0 0 173 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.499985 13.1406H5.77985C9.8415 13.1406 13.6275 11.0861 15.8411 7.68063L17.2845 5.46001C19.4981 2.05457 23.2841 0 27.3458 0H151.324C155.316 0 159.046 1.98449 161.276 5.29452L162.995 7.84612C165.226 11.1561 169.009 13.1406 173 13.1406V13.1406H87.5003H0.499985Z" fill="#E62334"/>
</svg>
</div>
</section>
<style lang="scss">
@import "src/scss/variables";
@import "src/scss/media";
@import "src/scss/trading-platform/mixins";
@import "src/scss/trading-platform/folderStyle";
.block-features{
padding-top: 77px;
padding-bottom: 223px;
overflow: hidden;
position: relative;
@include breakpoint-down('deskL') {
padding-top: 60px;
padding-bottom: 174px;
}
@include breakpoint-down('deskS') {
padding-top: 40px;
padding-bottom: 134px;
}
@include breakpoint-down('tabM') {
gap: 12px;
padding-top: 41px;
padding-bottom: 102px;
}
&__wrapper {
display: flex;
flex-direction: column;
gap: 72px;
@include breakpoint-down('deskL') {
gap: 62px;
}
@include breakpoint-down('deskS') {
gap: 18px;
}
@include breakpoint-down('tabM') {
gap: 56px;
}
}
&__underTitle {
@include underTitle;
color: $redPrimary;
}
&__text {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
@include breakpoint-down('deskL') {
gap: 18px;
}
@include breakpoint-down('deskS') {
gap: 12px;
}
}
&__description {
@include text;
width: 827px;
text-align: center;
@include breakpoint-down('deskL') {
width: 616px;
}
@include breakpoint-down('deskS') {
width: 500px;
}
@include breakpoint-down('tabM') {
width: 81%;
}
}
&__title {
@include titleBlock;
}
&__titleBlock {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
@include breakpoint-down('deskL') {
gap: 16px;
}
@include breakpoint-down('tabL') {
gap: 12px;
}
@include breakpoint-down('tabM') {
text-align: center;
gap: 11px;
}
}
&__cards {
display: flex;
flex-direction: column;
gap: 20px;
@include breakpoint-down('deskL') {
gap: 28px;
}
@include breakpoint-down('tabL') {
gap: 20px;
}
@include breakpoint-down('tabM') {
gap: 12px;
}
}
&__cardRow {
display: flex;
gap: 22px;
@include breakpoint-down('deskL') {
gap: 30px;
}
@include breakpoint-down('tabL') {
gap: 24px;
}
@include breakpoint-down('tabM') {
gap: 14px;
flex-direction: column;
}
&:last-child {
@include breakpoint-down('tabM') {
flex-direction: column-reverse;
}
}
}
&__cardColumn {
display: flex;
flex-direction: column;
gap: 18px;
flex: 1;
padding-top: 6px;
@include breakpoint-down('deskL') {
padding-top: 2px;
gap: 30px;
}
@include breakpoint-down('tabL') {
gap: 24px;
}
@include breakpoint-down('tabM') {
gap: 12px;
}
}
&__card {
border: 2px solid $redPrimary;
background-color: $techWhite;
color: #141414;
padding: 60px;
border-radius: 40px;
overflow: hidden;
position: relative;
@include breakpoint-down('deskL') {
padding: 40px;
border-radius: 20px;
}
@include breakpoint-down('tabL') {
padding: 21px;
border-radius: 12px;
}
&__text {
display: flex;
flex-direction: column;
gap: 16px;
@include breakpoint-down('deskL') {
gap: 7px;
}
@include breakpoint-down('tabM') {
gap: 14px;
}
}
&__title {
font-size: 42px;
line-height: 42px;
font-weight: 700;
span {
color: $redPrimary;
}
@include breakpoint-down('deskL') {
font-size: 24px;
line-height: 29.23px;
}
@include breakpoint-down('deskS') {
font-size: 24px;
line-height: 29.23px;
}
@include breakpoint-down('tabL') {
font-size: 18px;
line-height: 19.8px;
}
}
&__description {
font-size: 20px;
line-height: 24px;
@include breakpoint-down('deskL') {
font-size: 18px;
line-height: 22.5px;
}
@include breakpoint-down('tabL') {
font-size: 10px;
line-height: 12px;
}
@include breakpoint-down('tabM') {
font-size: 12px;
line-height: 14px;
}
}
&__features {
display: flex;
gap: 46px;
@include breakpoint-down('deskL') {
gap: 45px;
}
@include breakpoint-down('tabL') {
gap: 27px;
}
@include breakpoint-down('tabM') {
font-size: 12px;
line-height: 14px;
flex-wrap: wrap;
}
}
&__list {
display: flex;
flex-direction: column;
gap: 12px;
@include breakpoint-down('tabL') {
gap: 4px;
}
}
&__listItem {
display: flex;
gap: 12px;
font-size: 24px;
line-height: 24px;
align-items: center;
font-weight: 700;
span {
width: 229px;
}
@include breakpoint-down('deskL') {
font-size: 18px;
line-height: 19.8px;
span {
width: 162px;
}
}
@include breakpoint-down('tabL') {
font-size: 12px;
line-height: 14.4px;
gap: 12px;
svg {
width: auto;
height: 18px;
}
}
}
&__feature {
display: flex;
flex-direction: column;
color: #313236;
@include breakpoint-down('deskS') {
gap: 4px;
}
@include breakpoint-down('tabM') {
gap: 8px;
}
&__title {
font-size: 77px;
line-height: 77px;
text-wrap: nowrap;
@include breakpoint-down('deskL') {
font-size: 42px;
line-height: 46px;
}
@include breakpoint-down('tabL') {
font-size: 36px;
line-height: 36px;
}
}
&__description {
font-size: 24px;
line-height: 32px;
text-wrap: nowrap;
@include breakpoint-down('deskL') {
font-size: 18px;
line-height: 25.2px;
}
@include breakpoint-down('tabL') {
font-size: 10px;
line-height: 12px;
}
}
}
}
#blockFeaturesBestInClass {
background-color: $redPrimary;
min-width: 588px;
min-height: 673px;
position: relative;
border-color: $techWhite;
color: $techWhite;
@include breakpoint-down('deskL') {
min-width: 442px;
min-height: 458px;
}
@include breakpoint-down('tabL') {
min-width: 299px;
min-height: 288px;
}
@include breakpoint-down('tabM') {
min-width: 100%;
padding: 25px;
min-height: 272px;
}
.block-features__card__title {
width: 370px;
@include breakpoint-down('deskL') {
width: 338px;
}
@include breakpoint-down('tabL') {
width: 157px;
}
@include breakpoint-down('tabM') {
width: 200px;
}
}
img {
width: 566px;
height: 410px;
position: absolute;
bottom: 0;
left: 0;
right: -43px;
margin: auto;
@include breakpoint-down('deskL') {
width: 382px;
height: 264px;
bottom: 0;
flex: 1;
}
@include breakpoint-down('tabL') {
width: 263px;
height: 183px;
bottom: 0;
}
@include breakpoint-down('tabM') {
left: -47px;
}
}
}
#blockFeaturesAllMarkets {
display: flex;
flex-direction: column;
gap: 23px;
background-image: url('src/assets/images/trading-platform/whiteLabel/allMarketBg.webp');
background-repeat: no-repeat;
background-position: right;
background-size: 50%;
@include breakpoint-down('deskL') {
background-image: url("src/assets/images/trading-platform/whiteLabel/allMarketBgDeskL.webp");
}
@include breakpoint-down('deskS') {
gap: 12px;
background-image: url("src/assets/images/trading-platform/whiteLabel/allMarketBgTabL.webp");
}
@include breakpoint-down('tabM') {
background-image: url("src/assets/images/trading-platform/whiteLabel/allMarketBgMob.webp");
padding-bottom: 27px;
gap: 20px;
background-position: 133% 22px;
}
}
#blockFeaturesAffiliateModuleConvertMobile {
display: flex;
gap: 82px;
padding-bottom: 74px;
overflow: visible;
.block-features__card__text {
width: 598px;
gap: 40px;
}
.block-features__card__text {
width: 431px;
}
.block-features__card__title{
font-size: 40px;
line-height: 42px;
}
.block-features__card__description {
width: 460px;
}
img {
position: absolute;
width: 183px;
height: 378px;
top: -81px;
right: 54px;
@include breakpoint-down('deskL') {
width: 131px;
height: 272px;
top: -69px;
right: 57px;
}
@include breakpoint-down('deskS') {
width: 85px;
height: 176px;
top: -36px;
right: 32px;
}
@include breakpoint-down('tabM') {
top: -45px;
right: 17px;
}
}
@include breakpoint-down('deskL') {
height: 213px;
.block-features__card__text {
width: 339px;
gap: 23px;
}
.block-features__card__title{
font-size: 24px;
line-height: 29.23px;
}
.block-features__card__description {
width: 360px;
}
}
@include breakpoint-down('tabL') {
height: 130px;
padding: 12px 20px;
.block-features__card__text {
width: 191px;
gap: 8px;
}
.block-features__card__title{
font-size: 18px;
line-height: 19.8px;
}
.block-features__card__description{
width: 153px;
}
}
@include breakpoint-down('tabM') {
height: 156px;
padding-top: 19px;
.block-features__card__description {
width: 162px;
}
.block-features__card__text {
gap: 13px;
}
}
}
#blockFeaturesAffiliateModule {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 690px;
height: 313px;
overflow: visible;
padding: 78px 60px;
@include breakpoint-down('deskL') {
height: 233px;
width: 565px;
gap: 12px;
padding: 46px 36px;
}
@include breakpoint-down('tabL') {
height: 132px;
width: 348px;
gap: 7px;
padding: 25px 21px;
}
@include breakpoint-down('tabM') {
width: 100%;
min-height: 178px;
gap: 15px;
padding: 31px 21px;
}
.block-features__card__text {
width: 256px;
@include breakpoint-down('deskL') {
width: 174px;
}
@include breakpoint-down('tabL') {
width: 122px;
}
}
.block-features__card__description {
@include breakpoint-down('deskL') {
width: 180px;
}
@include breakpoint-down('tabL') {
width: 117px;
}
@include breakpoint-down('tabM') {
width: 87px;
}
}
img {
position: absolute;
bottom: -161px;
right: -93px;
width: 503px;
height: auto;
@include breakpoint-down('deskL') {
bottom: -127px;
right: -48px;
width: 393px;
}
@include breakpoint-down('tabL') {
bottom: -93px;
right: -30px;
width: 231px;
}
@include breakpoint-down('tabM') {
bottom: -79px;
right: -50px;
width: 275px;
}
}
}
#blockFeaturesUserCommunication {
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: $redPrimary;
border-color: $techWhite;
color: $techWhite;
width: 100%;
flex: 1;
padding: 77px 60px;
background-image: url('../../../assets/images/trading-platform/whiteLabel/website.webp');
background-repeat: no-repeat;
background-position: 93% 61%;
@include breakpoint-down('deskL') {
padding: 40px 35px;
background-size: 49%;
background-position: 98% 52%;
}
@include breakpoint-down('tabL') {
background-size: 43%;
gap: 28px;
padding: 25px 20px;
background-position: 86% 48%;
}
@include breakpoint-down('tabM') {
padding: 33px 21px;
background-size: 178px;
}
.block-features__card__text {
width: 304px;
@include breakpoint-down('tabL') {
width: 220px;
}
@include breakpoint-down('tabM') {
gap: 5px;
}
}
.block-features__card__description {
width: 191px;
@include breakpoint-down('deskL') {
width: 173px;
}
@include breakpoint-down('tabL'){
width: 95px;
}
@include breakpoint-down('tabM') {
width: 91px;
}
}
}
.folderСrest {
bottom: 8px;
svg {
height: auto;
}
&.deskL, &.tabL, &tabM {
display: none;
}
@include breakpoint-down('deskL') {
display: none;
&.deskL {
display: flex;
}
}
@include breakpoint-down('tabL') {
&.deskL {
display: none;
}
&.tabL {
display: flex;
}
}
@include breakpoint-down('tabM') {
&.tabL {
display: none;
}
&.tabM {
display: flex;
}
}
}
}
:global(.block-features__card__title span) {
color: $redPrimary;
}
:global(._locale) {
#blockFeaturesAffiliateModule {
height: auto;
}
#blockFeaturesBestInClass {
.block-features__card__title {
@include breakpoint-down('tabM') {
width: 285px;
}
}
}
#blockFeaturesUserCommunication {
@include breakpoint-down('tabM') {
min-height: 185px;
}
}
#blockFeaturesAffiliateModuleConvertMobile {
@include breakpoint-down('deskL') {
height: 250px;
}
@include breakpoint-down('tabL') {
height: 156px;
}
@include breakpoint-down('tabM') {
height: fit-content;
}
height: fit-content;
.block-features__card__text {
@include breakpoint-down('deskL') {
width: 396px;
}
@include breakpoint-down('deskS') {
width: 379px;
}
@include breakpoint-down('tabL') {
width: 202px;
}
@include breakpoint-down('tabM') {
width: 70%;
}
}
.block-features__card__description {
@include breakpoint-down('deskS') {
width: 300px;
}
@include breakpoint-down('tabL') {
width: 202px;
}
}
}
}
</style>