File: //var/www/quadcode.com/src/components/blocks/white-label-broker/Become.svelte
<script lang="ts">
import img from '../../../assets/images/white-label-broker/become/image.png';
import watchlist from '../../../assets/images/white-label-broker/become/watchlist.svg';
import select from '../../../assets/images/white-label-broker/become/select.svg';
import oneClick from '../../../assets/images/white-label-broker/become/one-click.svg';
import hedgign from '../../../assets/images/white-label-broker/become/hedgign.svg';
import charts from '../../../assets/images/white-label-broker/become/charts.svg';
import short from '../../../assets/images/white-label-broker/become/short.svg';
import multiplier from '../../../assets/images/white-label-broker/become/multiplier.svg';
import balance from '../../../assets/images/white-label-broker/become/balance.svg';
import video from '../../../assets/videos/white-label-broker/become/qcm.mp4';
import lazyVideo from '$utils/lazyVideo';
import { onMount } from 'svelte';
import { t } from '$lib/translations';
onMount(() => {
const video: HTMLElement | null = document.querySelector('.block-become__video');
lazyVideo(video);
});
</script>
<div class="block-become">
<div class="container">
<p class="block-become__title">
<span>{$t('white-label-broker.Become a dream broker')}</span><br /> {$t('white-label-broker.for your traders')}
</p>
<p class="block-become__text">{$t('white-label-broker.Launch a trading platform with a smooth and seamless trading experience')}</p>
<div class="block-become__list">
<div class="block-become__listItem">
<img src={watchlist} alt="" class="block-become__listItemIcon" />
<p class="block-become__listItemText">{$t('white-label-broker.Watch list')}</p>
</div>
<div class="block-become__listItem">
<img src={select} alt="" class="block-become__listItemIcon" />
<p class="block-become__listItemText">{$t('white-label-broker.Asset selector')}</p>
</div>
<div class="block-become__listItem">
<img src={oneClick} alt="" class="block-become__listItemIcon" />
<p class="block-become__listItemText">{$t('white-label-broker.One-click trading')}</p>
</div>
<div class="block-become__listItem">
<img src={hedgign} alt="" class="block-become__listItemIcon" />
<p class="block-become__listItemText">{$t('white-label-broker.Hedging')}</p>
</div>
<div class="block-become__listItem">
<img src={charts} alt="" class="block-become__listItemIcon" />
<p class="block-become__listItemText">{$t('white-label-broker.Up to 9 charts display')}</p>
</div>
<div class="block-become__listItem">
<img src={short} alt="" class="block-become__listItemIcon" />
<p class="block-become__listItemText">{$t('white-label-broker.Making short positions')}</p>
</div>
<div class="block-become__listItem">
<img src={multiplier} alt="" class="block-become__listItemIcon" />
<p class="block-become__listItemText">{$t('white-label-broker.Leveraged trading')}</p>
</div>
<div class="block-become__listItem">
<img src={balance} alt="" class="block-become__listItemIcon" />
<p class="block-become__listItemText">{$t('white-label-broker.Negative balance protection')}</p>
</div>
</div>
<div class="block-become__grid">
<div class="block-become__gridItem">
<p class="block-become__gridItemNumber">{$t('white-label-broker.6')}</p>
<p class="block-become__gridItemText">{$t('white-label-broker.Markets')}</p>
</div>
<div class="block-become__gridItem">
<p class="block-become__gridItemNumber">{$t('white-label-broker.300+')}</p>
<p class="block-become__gridItemText">{$t('white-label-broker.Instruments')}</p>
</div>
<div class="block-become__gridItem">
<p class="block-become__gridItemNumber">{$t('white-label-broker.100+')}</p>
<p class="block-become__gridItemText">{$t('white-label-broker.Indicators')}</p>
</div>
<div class="block-become__gridItem">
<p class="block-become__gridItemNumber">{$t('white-label-broker.7')}</p>
<p class="block-become__gridItemText">{$t('white-label-broker.Timeframes')}</p>
</div>
</div>
<video autoplay loop muted playsinline poster={img} class="block-become__video">
<source src="" data-src={video} type="video/mp4" />
</video>
</div>
</div>
<style lang="scss">
@import 'src/scss/variables';
@import 'src/scss/media';
@import 'src/scss/mixins';
.block-become {
padding-top: 114px;
padding-bottom: 203px;
@include breakpoint-down('deskL') {
padding: 122px 0;
}
@include breakpoint-down('deskS') {
padding: 64px 0;
}
@include breakpoint-down('tabM') {
padding-top: 40px;
padding-bottom: 61px;
}
&__title {
@include titleXL;
text-align: center;
width: 100%;
max-width: 920px;
margin-inline: auto;
margin-bottom: 24px;
@include breakpoint-down('deskL') {
margin-bottom: 16px;
}
@include breakpoint-down('deskS') {
margin-bottom: 8px;
}
br {
@include breakpoint-down('tabM') {
display: none;
}
}
> span {
color: $redPrimary;
}
}
&__text {
text-align: center;
width: 100%;
max-width: 920px;
margin-inline: auto;
margin-bottom: 100px;
@include breakpoint-down('deskL') {
margin-bottom: 40px;
}
}
&__list {
display: flex;
flex-wrap: wrap;
gap: 40px;
width: 100%;
max-width: 920px;
margin-inline: auto;
margin-bottom: 64px;
@include breakpoint-down('deskL') {
max-width: 736px;
column-gap: 32px;
margin-bottom: 40px;
}
@include breakpoint-down('deskS') {
max-width: 530px;
column-gap: 20px;
row-gap: 24px;
margin-bottom: 24px;
}
@include breakpoint-down('tabM') {
column-gap: 0;
margin-bottom: 40px;
}
}
&__listItem {
width: calc((100% - 40px * 3) / 4);
@include breakpoint-down('deskL') {
width: calc((100% - 32px * 3) / 4);
}
@include breakpoint-down('deskS') {
width: calc((100% - 20px * 3) / 4);
}
@include breakpoint-down('tabM') {
width: calc(100% / 2);
}
}
&__listItemIcon {
width: 70px;
min-width: 70px;
height: 70px;
margin-inline: auto;
}
&__listItemText {
@include smallDefault;
text-align: center;
}
&__grid {
border-top: 1px solid $techBlue2;
padding-top: 64px;
display: flex;
margin-bottom: 203px;
gap: 40px;
@include breakpoint-down('deskL') {
padding-top: 40px;
gap: 32px;
margin-bottom: 123px;
}
@include breakpoint-down('deskS') {
padding-top: 24px;
gap: 20px;
margin-bottom: 64px;
}
@include breakpoint-down('tabM') {
flex-wrap: wrap;
padding-top: 40px;
gap: 40px;
margin-bottom: 61px;
}
}
&__gridItem {
flex: 1;
@include breakpoint-down('tabM') {
width: 100%;
flex: none;
}
}
&__gridItemNumber {
font-family: $Inter;
font-size: 48px;
font-weight: 800;
line-height: 53px;
text-align: center;
margin-bottom: 8px;
@include breakpoint-down('deskL') {
font-size: 36px;
line-height: 40px;
}
@include breakpoint-down('deskS') {
font-size: 28px;
line-height: 31px;
margin-bottom: 0;
}
}
&__gridItemText {
text-align: center;
}
&__video {
width: 100%;
height: auto;
display: flex;
border-radius: 8px;
@include breakpoint-down('deskS') {
border-radius: 4px;
}
}
}
:global(.block-become__title span) {
color: $redPrimary;
}
</style>